Merge pull request #4760 from quarto-dev/feature/grid-content-mode

Add support for `content-mode` in the grid system

Author: dragonstyle

src/config/constants.ts

@@ -513,6 +513,13 @@ export const kCrossrefChaptersAppendix = "chapters-appendix";
 export const kCrossrefChaptersAlpha = "chapters-alpha";
 export const kCrossrefChapterId = "chapter-id";
 
+export const kGrid = "grid";
+export const kContentMode = "content-mode";
+export const kAuto = "auto";
+export const kStandardContent = "standard";
+export const kFullContent = "full";
+export const kSlimContent = "slim";
+
 export const kFigResponsive = "fig-responsive";
 export const kOutputLocation = "output-location";
 

src/format/html/format-html-bootstrap.ts

@@ -13,9 +13,11 @@ import { formatResourcePath } from "../../core/resources.ts";
 import { findParent } from "../../core/html.ts";
 
 import {
+  kContentMode,
   kDisplayName,
   kExtensionName,
   kFormatLinks,
+  kGrid,
   kHtmlMathMethod,
   kIncludeInHeader,
   kLinkCitations,
@@ -630,23 +632,41 @@ function bootstrapHtmlFinalizer(format: Format, flags: PandocFlags) {
     if (rightSidebar && !hasRightContent && !hasMarginContent && !hasToc) {
       rightSidebar.remove();
     }
-    const hasColumnElements = getColumnLayoutElements(doc).length > 0;
 
-    if (hasColumnElements) {
-      if (hasLeftContent && hasMarginContent) {
-        // Slim down the content area so there are sizable margins
-        // for the column element
-        doc.body.classList.add("slimcontent");
-      } else if (hasRightContent || hasMarginContent || fullLayout || hasToc) {
-        // Use the default layout, so don't add any classes
+    // Set the content mode for the grid system
+    const gridObj = format.metadata[kGrid] as Metadata;
+    let contentMode = "auto";
+    if (gridObj) {
+      contentMode =
+        gridObj[kContentMode] as ("auto" | "standard" | "full" | "slim");
+    }
+
+    if (contentMode === undefined || contentMode === "auto") {
+      const hasColumnElements = getColumnLayoutElements(doc).length > 0;
+      if (hasColumnElements) {
+        if (hasLeftContent && hasMarginContent) {
+          // Slim down the content area so there are sizable margins
+          // for the column element
+          doc.body.classList.add("slimcontent");
+        } else if (
+          hasRightContent || hasMarginContent || fullLayout || hasToc
+        ) {
+          // Use the default layout, so don't add any classes
+        } else {
+          doc.body.classList.add("fullcontent");
+        }
       } else {
-        doc.body.classList.add("fullcontent");
+        if (!hasRightContent && !hasMarginContent && !hasToc) {
+          doc.body.classList.add("fullcontent");
+        } else {
+          // Use the deafult layout, don't add any classes
+        }
       }
     } else {
-      if (!hasRightContent && !hasMarginContent && !hasToc) {
+      if (contentMode === "slim") {
+        doc.body.classList.add("slimcontent");
+      } else if (contentMode === "full") {
         doc.body.classList.add("fullcontent");
-      } else {
-        // Use the deafult layout, don't add any classes
       }
     }
 

src/format/html/format-html-scss.ts

@@ -22,7 +22,7 @@ import { outputVariable, SassVariable, sassVariable } from "../../core/sass.ts";
 
 import { Format, SassBundle, SassLayer } from "../../config/types.ts";
 import { Metadata } from "../../config/types.ts";
-import { kTheme } from "../../config/constants.ts";
+import { kGrid, kTheme } from "../../config/constants.ts";
 
 import {
   kPageFooter,
@@ -456,7 +456,7 @@ function pandocVariablesToThemeDefaults(
   });
 
   // Resolve any grid variables
-  const gridObj = metadata["grid"] as Metadata;
+  const gridObj = metadata[kGrid] as Metadata;
   if (gridObj) {
     add(explicitVars, "grid-sidebar-width", gridObj["sidebar-width"]);
     add(explicitVars, "grid-margin-width", gridObj["margin-width"]);

src/resources/editor/tools/vs-code.mjs

@@ -13916,6 +13916,15 @@ var require_yaml_intelligence_resources = __commonJS({
             object: {
               closed: true,
               properties: {
+                "content-mode": {
+                  enum: [
+                    "auto",
+                    "standard",
+                    "full",
+                    "slim"
+                  ],
+                  description: "Defines whether to use the standard, slim, or full content grid or to automatically select the most appropriate content grid."
+                },
                 "sidebar-width": {
                   string: {
                     description: "The base width of the sidebar (left) column in an HTML page."
@@ -19258,10 +19267,6 @@ var require_yaml_intelligence_resources = __commonJS({
         "Specify a default profile and profile groups",
         "Default profile to apply if QUARTO_PROFILE is not defined.",
         "Define a profile group for which at least one profile is always\nactive.",
-        {
-          short: "Location of output relative to the code that generated it\n(<code>default</code>, <code>fragment</code>, <code>slide</code>,\n<code>column</code>, or <code>column-location</code>)",
-          long: "Location of output relative to the code that generated it. The\npossible values are as follows:"
-        },
         {
           short: "Unique label for code cell",
           long: "Unique label for code cell. Used when other code needs to refer to\nthe cell (e.g.&nbsp;for cross references <code>fig-samples</code> or\n<code>tbl-summary</code>)"
@@ -19414,6 +19419,10 @@ var require_yaml_intelligence_resources = __commonJS({
         "Include errors in the output (note that this implies that errors\nexecuting code will not halt processing of the document).",
         "Catch all for preventing any output (code or results) from being\nincluded in output.",
         "Panel type for cell output (<code>tabset</code>, <code>input</code>,\n<code>sidebar</code>, <code>fill</code>, <code>center</code>)",
+        {
+          short: "Location of output relative to the code that generated it\n(<code>default</code>, <code>fragment</code>, <code>slide</code>,\n<code>column</code>, or <code>column-location</code>)",
+          long: "Location of output relative to the code that generated it. The\npossible values are as follows:"
+        },
         "Include messages in rendered output.",
         {
           short: "How to display text results",
@@ -19930,6 +19939,7 @@ var require_yaml_intelligence_resources = __commonJS({
           short: "Properties of the grid system used to layout Quarto HTML pages.",
           long: ""
         },
+        "Defines whether to use the standard, slim, or full content grid or to\nautomatically select the most appropriate content grid.",
         "The base width of the sidebar (left) column in an HTML page.",
         "The base width of the margin (right) column in an HTML page.",
         "The base width of the body (center) column in an HTML page.",
@@ -20233,6 +20243,10 @@ var require_yaml_intelligence_resources = __commonJS({
           short: "Use a smaller default font for slide content",
           long: "<code>true</code> to use a smaller default font for slide content.\nThis can also be set per-slide by including the <code>.smaller</code>\nclass on the slide title."
         },
+        {
+          short: "Location of output relative to the code that generated it\n(<code>default</code>, <code>fragment</code>, <code>slide</code>,\n<code>column</code>, or <code>column-location</code>)",
+          long: "Location of output relative to the code that generated it. The\npossible values are as follows:"
+        },
         "Flags if the presentation is running in an embedded mode",
         "The display mode that will be used to show slides",
         "For slides with a single top-level image, automatically stretch it to\nfill the slide.",
@@ -21255,12 +21269,12 @@ var require_yaml_intelligence_resources = __commonJS({
         mermaid: "%%"
       },
       "handlers/mermaid/schema.yml": {
-        _internalId: 151940,
+        _internalId: 152136,
         type: "object",
         description: "be an object",
         properties: {
           "mermaid-format": {
-            _internalId: 151932,
+            _internalId: 152128,
             type: "enum",
             enum: [
               "png",
@@ -21276,7 +21290,7 @@ var require_yaml_intelligence_resources = __commonJS({
             exhaustiveCompletions: true
           },
           theme: {
-            _internalId: 151939,
+            _internalId: 152135,
             type: "anyOf",
             anyOf: [
               {
@@ -30377,36 +30391,44 @@ function parseShortcodeCapture(capture) {
   const rawParams = [];
   const name = nameMatch[0];
   let paramStr = capture.slice(name.length).trim();
-  const paramName = "([a-zA-Z0-9_-]+)";
-  const paramValue1 = `([^"'\\s]+)`;
-  const paramValue2 = `"([^"]*)"`;
-  const paramValue3 = `'([^']*)'`;
-  const paramValue = `(?:${paramValue1})|(?:${paramValue2})|(?:${paramValue3})`;
-  const paramNameAndValue = `(?:${paramName}\\s*=\\s*${paramValue1})|(?:${paramName}\\s*=\\s*${paramValue2})|(?:${paramName}\\s*=\\s*${paramValue3})`;
-  const paramRe = new RegExp(`(?:${paramValue}|${paramNameAndValue})`);
   while (paramStr.length) {
-    const paramMatch = paramStr.match(paramRe);
+    let paramMatch;
+    paramMatch = paramStr.match(/^[a-zA-Z0-9_-]+="[^"]*"/);
+    if (!paramMatch) {
+      paramMatch = paramStr.match(/^[a-zA-Z0-9_-]+='[^']*'/);
+    }
     if (!paramMatch) {
-      throw new Error("invalid shortcode: " + capture);
+      paramMatch = paramStr.match(/^[a-zA-Z0-9_-]+=[^"'\s]+/);
     }
-    const captures = paramMatch.slice(1).filter((x) => x !== void 0);
-    if (captures.length === 1) {
-      params.push(captures[0]);
+    if (paramMatch) {
+      const [name2, value] = paramMatch[0].split("=");
+      namedParams[name2] = value;
       rawParams.push({
-        value: captures[0]
+        name: name2,
+        value
       });
-    } else if (captures.length === 2) {
-      namedParams[captures[0]] = captures[1];
+      paramStr = paramStr.slice(paramMatch[0].length).trim();
+      continue;
+    }
+    paramMatch = paramStr.match(/^[^"'\s]+/);
+    if (paramMatch) {
+      params.push(paramMatch[0]);
       rawParams.push({
-        name: captures[0],
-        value: captures[1]
+        value: paramMatch[0]
       });
-    } else {
-      throw new Error(
-        "Internal Error, could not determine correct shortcode capture for " + capture
-      );
+      paramStr = paramStr.slice(paramMatch[0].length).trim();
+      continue;
+    }
+    paramMatch = paramStr.match(/^"[^"]*"/) || paramStr.match(/^'[^']*'/);
+    if (paramMatch) {
+      params.push(paramMatch[0].slice(1, -1));
+      rawParams.push({
+        value: paramMatch[0].slice(1, -1)
+      });
+      paramStr = paramStr.slice(paramMatch[0].length).trim();
+      continue;
     }
-    paramStr = paramStr.slice(paramMatch[0].length).trim();
+    throw new Error("invalid shortcode: " + capture);
   }
   return { name, params, namedParams, rawParams };
 }