Merge pull request #7230 from quarto-dev/feature/dashboard

In Progress

configuration

@@ -17,7 +17,8 @@ export TYPST=0.8.0
 
 # Bootstrap dependencies from bslib
 # (use commit hash from bslib repo)
-export BOOTSTRAP=dba137ff7fa0b4ee9dfcd77d8982ce5dd7e7214d # 0.5.1
+export BOOTSTRAP=ad946cafdbf1c91cfd714cb39948bb203ae66e66 # 0.5.1 + consolidated components
+export HTMLTOOLS=0.5.6
 export BOOTSTRAP_FONT=1.11.1
 export BOOTSWATCH=5.3.1
 

news/changelog-1.4.md

@@ -157,6 +157,8 @@
 - ([#6367](https://github.com/quarto-dev/quarto-cli/issues/6367)): Fix bug with nested code cells in the generation of Jupyter notebook from .qmd files.
 - ([#6393](https://github.com/quarto-dev/quarto-cli/pull/6393)): Search `JULIA_HOME` for Julia-specific Python installations.
 - Only search for Julia conda installation when the engine language is Julia
+- Support for `plotly-connected` option to determine where Plotly is embedded or loaded from CDN
+- Reduce default margins for Plotly figures (t=30,r=0,b=0,l=0)
 
 ## Knitr
 

package/src/common/update-html-dependencies.ts

@@ -3,7 +3,7 @@
  *
  * Copyright (C) 2020-2022 Posit Software, PBC
  */
-import { ensureDir, ensureDirSync, existsSync } from "fs/mod.ts";
+import { ensureDir, ensureDirSync, existsSync, walkSync } from "fs/mod.ts";
 import { copySync } from "fs/copy.ts";
 import { info } from "log/mod.ts";
 import { dirname, extname, join } from "path/mod.ts";
@@ -31,8 +31,14 @@ export async function updateHtmlDependencies(config: Configuration) {
   if (!bsIconVersion) {
     throw new Error(`BOOTSTRAP_FONT is not defined`);
   }
+  const htmlToolsVersion = Deno.env.get("HTMLTOOLS");
+  if (!htmlToolsVersion) {
+    throw new Error("HTMLTOOLS is not defined");
+  }
+
   info(`Boostrap: ${bsCommit}`);
   info(`Boostrap Icon: ${bsIconVersion}`);
+  info(`Html Tools: ${htmlToolsVersion}`);
 
   // the bootstrap and dist/themes dir
   const formatDir = join(
@@ -48,6 +54,9 @@ export async function updateHtmlDependencies(config: Configuration) {
 
   const bsDistDir = join(bsDir, "dist");
 
+  const htmlToolsDir = join(formatDir, "htmltools");
+  const bslibDir = join(formatDir, "bslib");
+
   // For applying git patch to what we retreive
   const patchesDir = join(config.directoryInfo.pkg, "src", "common", "patches");
 
@@ -207,7 +216,7 @@ export async function updateHtmlDependencies(config: Configuration) {
   const glightboxDir = join(formatDir, "glightbox");
   const glightBoxVersion = Deno.env.get("GLIGHTBOX_JS");;
 
-  info("Updating gloghtbox");
+  info("Updating glightbox");
   const basename = `glightbox-master`;
   const fileName = `${basename}.zip`;
   const distUrl = `https://github.com/biati-digital/glightbox/releases/download/${glightBoxVersion}/${fileName}`;
@@ -238,6 +247,7 @@ export async function updateHtmlDependencies(config: Configuration) {
       join(glightboxDir, depends.to)
     );
   });
+  info("");
 
   // Fuse
   const fuseJs = join(
@@ -498,8 +508,18 @@ export async function updateHtmlDependencies(config: Configuration) {
     bsCommit,
     workingSubDir("bsdist"),
     bsDistDir,
-    bsThemesDir
+    bsThemesDir,
+    bslibDir
   );
+
+  // Update Html Tools
+  await updateHtmlTools(
+    htmlToolsVersion,
+    workingSubDir("htmltools"),
+    htmlToolsDir
+  )
+
+  // Update Bootstrap icons
   await updateBoostrapIcons(bsIconVersion, workingSubDir("bsicons"), bsDistDir);
 
   // Update Pandoc themes
@@ -571,13 +591,42 @@ async function updateCookieConsent(
   await ensureDir(targetDir);
 
   await Deno.copyFile(tempPath, join(targetDir, fileName));
+  info("Done\n");
+}
+
+async function updateHtmlTools(
+  version: string,
+  working: string,
+  distDir: string
+) {
+  // https://github.com/rstudio/htmltools/archive/refs/tags/v0.5.6.zip
+  info("Updating Html Tools...");
+  const dirName = `htmltools-${version}`;
+  const fileName = `v${version}.zip`;
+  const distUrl = `https://github.com/rstudio/htmltools/archive/refs/tags/${fileName}`;
+  const zipFile = join(working, fileName);
+
+  // Download and unzip the release
+  info(`Downloading ${distUrl}`);
+  await download(distUrl, zipFile);
+  await unzip(zipFile, working);
+
+  // Copy the fill css file
+  ensureDirSync(distDir);
+  Deno.copyFileSync(
+    join(working, dirName, "inst", "fill", "fill.css"),
+    join(distDir, "fill.css")
+  );
+
+  info("Done\n");
 }
 
 async function updateBootstrapFromBslib(
   commit: string,
   working: string,
   distDir: string,
-  themesDir: string
+  themesDir: string,
+  bsLibDir: string
 ) {
   info("Updating Bootstrap Scss Files...");
   await withRepo(
@@ -587,6 +636,36 @@ async function updateBootstrapFromBslib(
       // Checkout the appropriate version
       await repo.checkout(commit);
 
+      // Build the required JS files
+      info("Copying Components");
+
+      // Get the components
+      const componentsFrom = join(repo.dir, "inst", "components", "dist");
+      const componentsTo = join(distDir, "components");
+      const components = ["accordion", "card", "grid", "sidebar", "valuebox"];
+      for (const component of components) {
+        info(` - ${component}`);
+        const componentDir = join(componentsTo, component);
+        ensureDirSync(componentDir);
+
+        const files = [
+          `${component}.min.js`,
+          `${component}.css`
+        ];
+
+        for (const file of files) {
+          const fromPath = join(componentsFrom, component, file);
+          if (existsSync(fromPath)) {
+            const toPath = join(componentsTo, component, file);
+            ensureDirSync(dirname(toPath));
+            Deno.copyFileSync(fromPath, toPath);
+
+            // Clean the source path
+            cleanSourceMap(toPath);
+          }
+        }        
+      }
+
       // Copy the scss files
       info("Copying scss files");
       const from = join(repo.dir, "inst", "lib", "bs5", "scss");
@@ -621,15 +700,68 @@ async function updateBootstrapFromBslib(
       const varContents = lines(Deno.readTextFileSync(bootstrapVariablesFile));
       const outLines: string[] = [];
       for (let line of varContents) {
-        line = line.replace(
+        line = line.replaceAll(
           "var(--#{$prefix}font-sans-serif)",
           "$font-family-sans-serif"
         );
-        line = line.replace(
+        line = line.replaceAll(
           "var(--#{$prefix}font-monospace)",
           "$font-family-monospace"
         );
-        line = line.replace(/var\(--#\{\$prefix\}(.*)\)/, "$$$1");
+        line = line.replaceAll(
+          "var(--#{$prefix}success-rgb)",
+          "$success"
+        );
+        line = line.replaceAll(
+          "var(--#{$prefix}danger-rgb)",
+          "$danger"
+        );
+        line = line.replaceAll(
+          "var(--#{$prefix}body-color-rgb)",
+          "$body-color"
+        );
+        line = line.replaceAll(
+          "var(--#{$prefix}body-bg-rgb)",
+          "$body-bg"
+        );
+        line = line.replaceAll(
+          "var(--#{$prefix}emphasis-color-rgb)",
+          "$body-emphasis-color"
+        );
+        line = line.replaceAll(
+          /RGBA?\(var\(--#\{\$prefix\}emphasis-color-rgb,(.*?)\).*?\)/gm,
+          "$body-emphasis-color"
+        );        
+        line = line.replaceAll(
+          "var(--#{$prefix}secondary-color)",
+          "$body-secondary-color"
+        );
+        line = line.replaceAll(
+          "var(--#{$prefix}secondary-bg)",
+          "$body-secondary-bg"
+        );
+        line = line.replaceAll(
+          "var(--#{$prefix}tertiary-bg)",
+          "$body-tertiary-bg"
+        );
+        line = line.replaceAll(
+          "var(--#{$prefix}tertiary-color)",
+          "$body-tertiary-color"
+        );
+        line = line.replaceAll(
+          "var(--#{$prefix}emphasis-bg)",
+          "$body-emphasis-bg"
+        );
+        line = line.replaceAll(
+          "var(--#{$prefix}emphasis-color)",
+          "$body-emphasis-color"
+        );
+        line = line.replaceAll(
+          "$emphasis-color-rgb", 
+          "$body-emphasis-color"
+        );
+
+        line = line.replaceAll(/var\(--#\{\$prefix\}(.*?)\)/gm, "$$$1");
         outLines.push(line);
       }
       Deno.writeTextFileSync(bootstrapVariablesFile, outLines.join("\n"));
@@ -643,6 +775,34 @@ async function updateBootstrapFromBslib(
       info(`Copying ${utilsFrom} to ${utilsTo}`);
       copySync(utilsFrom, utilsTo);
 
+      // Copy bslib
+      info("Copying BSLIB scss files");
+      const bslibScssFrom = join(repo.dir, "inst", "bslib-scss");
+      const bslibScssTo = join(bsLibDir, "bslib-scss");
+      info(`Copying ${bslibScssFrom} to ${bslibScssTo}`);
+      Deno.removeSync(bslibScssTo, { recursive: true});
+      copySync(bslibScssFrom, bslibScssTo);
+
+      // Copy componennts
+      info("Copying BSLIB component scss files");
+      const componentFrom = join(repo.dir, "inst", "components", "scss");
+      const componentTo = join(bsLibDir, "components", "scss");
+      info(`Copying ${componentFrom} to ${componentTo}`);
+      copySync(componentFrom, componentTo, {overwrite: true});
+
+      info("Copying BSLIB dist files");
+      const componentDistFrom = join(repo.dir, "inst", "components", "dist");
+      const componentDistTo = join(bsLibDir, "components", "dist");
+      info(`Copying ${componentDistFrom} to ${componentDistTo}`);
+      ensureDirSync(componentDistTo);
+      copySync(componentDistFrom, componentDistTo, {overwrite: true});      
+      // Clean map references
+      for (const entry of walkSync(componentDistTo)) {
+        if (entry.isFile) {
+          cleanSourceMap(entry.path);
+        }
+      }
+
       // Grab the js file that we need
       info("Copying dist files");
       [
@@ -693,6 +853,8 @@ async function updateBootstrapFromBslib(
           Deno.writeTextFileSync(themeOut, patchedScss);
         }
       }
+
+
       info("Done\n");
     }
   );
@@ -971,7 +1133,11 @@ const themePatches: Record<string, ThemePatch[]> = {
     {
       from: ".navbar {\n  @include shadow();",
       to: ".navbar {\n  @include shadow();\n  border-color: shade-color($navbar-bg, 10%);",
-    },
+    }, 
+    {
+      from: "$nav-link-color:                    var(--#{$prefix}link-color) !default;",
+      to: "$nav-link-color:                    $primary !default;"
+    }
   ],
   simplex: [
     {

src/command/capabilities/capabilities.ts

@@ -1,9 +1,8 @@
 /*
-* capabilities.ts
-*
-* Copyright (C) 2020-2022 Posit Software, PBC
-*
-*/
+ * capabilities.ts
+ *
+ * Copyright (C) 2020-2022 Posit Software, PBC
+ */
 
 import { basename, join } from "path/mod.ts";
 
@@ -53,6 +52,7 @@ async function formats() {
     "revealjs",
     "gfm",
     "epub",
+    "dashboard",
     "email",
   ];
 

src/command/preview/cmd.ts

@@ -278,10 +278,11 @@ export const previewCommand = new Command()
       const format = await previewFormat(file, flags.to, formats, project);
 
       // see if this is server: shiny document and if it is then forward to previewShiny
-      if (isHtmlOutput(format)) {
+      if (isHtmlOutput(parseFormatString(format).baseFormat)) {
         const renderFormat = formats[format] as Format | undefined;
         if (renderFormat && isServerShiny(renderFormat)) {
           const engine = fileExecutionEngine(file, flags);
+          setPreviewFormat(format, flags, args);
           if (isServerShinyPython(renderFormat, engine?.name)) {
             const result = await previewShiny({
               input: file,
@@ -306,6 +307,7 @@ export const previewCommand = new Command()
                 ? parseInt(options.port)
                 : options.port,
               host: options.host,
+              format: format,
               browser: options.browser,
               projectDir: project?.dir,
               tempDir: Deno.makeTempDirSync(),

src/command/preview/preview-shiny.ts

@@ -51,6 +51,7 @@ export async function previewShiny(options: PreviewShinyOptions) {
 
   // render for preview
   const render = async (to?: string) => {
+    to = to || options.format;
     const renderFlags: RenderFlags = { to, execute: true };
     const services = renderServices();
     try {

src/command/serve/cmd.ts

@@ -13,6 +13,8 @@ import { projectContext } from "../../project/project-context.ts";
 
 import { serve } from "./serve.ts";
 import { resolveHostAndPort } from "../../core/previewurl.ts";
+import { renderFormats } from "../render/render-contexts.ts";
+import { previewFormat } from "../preview/preview.ts";
 
 export const serveCommand = new Command()
   .name("serve")
@@ -60,9 +62,13 @@ export const serveCommand = new Command()
     const { host, port } = await resolveHostAndPort(options);
 
     const context = await projectContext(input);
+    const formats = await renderFormats(input, undefined, context);
+    const format = await previewFormat(input, undefined, formats, context);
+
     const result = await serve({
       input,
       render: options.render,
+      format,
       port,
       host,
       browser: options.browser,

src/config/constants.ts

@@ -76,6 +76,7 @@ export const kIpynbFilter = "ipynb-filter";
 export const kIpynbFilters = "ipynb-filters";
 export const kIpynbShellInteractivity = "ipynb-shell-interactivity";
 export const kIPynbTitleBlockTemplate = "ipynb-title-block";
+export const kPlotlyConnected = "plotly-connected";
 
 export const kJatsSubarticleId = "jats-subarticle-id";
 
@@ -165,6 +166,7 @@ export const kExecuteDefaultsKeys = [
   kIpynbFilter,
   kIpynbFilters,
   kIpynbShellInteractivity,
+  kPlotlyConnected,
 ];
 
 export const kRenderDefaultsKeys = [