Provide more notebook style affordances

Author: dragonstyle

src/config/constants.ts

@@ -41,6 +41,7 @@ export const kFormatResources = "format-resources";
 export const kFormatLinks = "format-links";
 export const kNotebookLinks = "notebook-links";
 export const kNotebookView = "notebook-view";
+export const kNotebookViewStyle = "notebook-view-style";
 
 export const kKeepHidden = "keep-hidden";
 
@@ -170,6 +171,7 @@ export const kRenderDefaultsKeys = [
   kFormatLinks,
   kNotebookLinks,
   kNotebookView,
+  kNotebookViewStyle,
 ];
 
 // language fields

src/config/types.ts

@@ -132,6 +132,7 @@ import {
   kMermaidFormat,
   kNotebookLinks,
   kNotebookView,
+  kNotebookViewStyle,
   kNumberOffset,
   kNumberSections,
   kOutput,
@@ -410,6 +411,7 @@ export interface FormatRender {
   [kFormatResources]?: string[];
   [kFormatLinks]?: boolean | string[];
   [kNotebookLinks]?: boolean | "inline" | "global";
+  [kNotebookViewStyle]?: "document" | "notebook";
   [kNotebookView]?:
     | boolean
     | NotebookPublishOptions

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

@@ -79,7 +79,7 @@ import {
   isPresentationOutput,
 } from "../../config/format.ts";
 import { basename } from "path/mod.ts";
-import { processNotebookEmbeds } from "./format-html-embed.ts";
+import { processNotebookEmbeds } from "./format-html-notebook.ts";
 
 export function formatPageLayout(format: Format) {
   return format.metadata[kPageLayout] as string || kPageLayoutArticle;

src/format/html/format-html-embed.ts src/format/html/format-html-notebook.tssrc/format/html/format-html-embed.ts renamed to src/format/html/format-html-notebook.ts

@@ -13,6 +13,7 @@ import * as ld from "../../core/lodash.ts";
 import {
   kNotebookLinks,
   kNotebookView,
+  kNotebookViewStyle,
   kOutputFile,
   kRelatedNotebooksTitle,
   kSourceNotebookPrefix,
@@ -21,7 +22,10 @@ import {
 } from "../../config/constants.ts";
 import { Format, NotebookPublishOptions } from "../../config/types.ts";
 
-import { RenderServices } from "../../command/render/types.ts";
+import {
+  HtmlPostProcessResult,
+  RenderServices,
+} from "../../command/render/types.ts";
 import { render, renderServices } from "../../command/render/render-shared.ts";
 
 import { basename, dirname, join } from "path/mod.ts";
@@ -36,6 +40,46 @@ interface NotebookViewOptions {
   href?: string;
 }
 
+export const kNotebookViewStyleNotebook = "notebook";
+
+const kQuartoNbClass = "quarto-notebook";
+const kQuartoCellContainerClass = "cell-container";
+const kQuartoCellDecoratorClass = "cell-decorator";
+
+export function notebookViewPostProcessor() {
+  return (doc: Document): Promise<HtmlPostProcessResult> => {
+    doc.body.classList.add(kQuartoNbClass);
+    const cells = doc.querySelectorAll("div.cell[data-execution_count]");
+    for (const cell of cells) {
+      const cellEl = cell as Element;
+      const count = cellEl.getAttribute("data-execution_count");
+      if (count) {
+        const containerNode = doc.createElement("div");
+        containerNode.classList.add(kQuartoCellContainerClass);
+        containerNode.classList.add("column-page-left");
+
+        const decoratorNode = doc.createElement("div");
+        decoratorNode.classList.add(kQuartoCellDecoratorClass);
+
+        const contentsEl = doc.createElement("pre");
+        contentsEl.appendChild(doc.createTextNode(`In [${count}]:`));
+        decoratorNode.appendChild(contentsEl);
+
+        containerNode.appendChild(decoratorNode);
+        cell.parentElement?.insertBefore(containerNode, cell);
+        containerNode.appendChild(cell);
+      }
+    }
+
+    const resources: string[] = [];
+    const supporting: string[] = [];
+    return Promise.resolve({
+      resources,
+      supporting,
+    });
+  };
+}
+
 export async function processNotebookEmbeds(
   doc: Document,
   format: Format,
@@ -57,7 +101,6 @@ export async function processNotebookEmbeds(
     const linkedNotebooks: string[] = [];
     for (const nbDivNode of notebookDivNodes) {
       const nbDivEl = nbDivNode as Element;
-      nbDivEl.classList.add("quarto-notebook");
       const notebookPath = nbDivEl.getAttribute("data-notebook");
       if (notebookPath) {
         linkedNotebooks.push(notebookPath);
@@ -236,6 +279,7 @@ async function renderHtmlView(
           [kTheme]: format.metadata[kTheme],
           [kOutputFile]: nbPreviewFile,
           [kTemplate]: templatePath,
+          [kNotebookViewStyle]: kNotebookViewStyleNotebook,
         },
         quiet: false,
       },

src/format/html/format-html.ts

@@ -28,6 +28,7 @@ import {
   kLinkExternalIcon,
   kLinkExternalNewwindow,
   kNotebookLinks,
+  kNotebookViewStyle,
   kTheme,
 } from "../../config/constants.ts";
 
@@ -89,6 +90,10 @@ import {
 } from "../../core/giscus.ts";
 import { metadataPostProcessor } from "./format-html-meta.ts";
 import { kHtmlEmptyPostProcessResult } from "../../command/render/constants.ts";
+import {
+  kNotebookViewStyleNotebook,
+  notebookViewPostProcessor,
+} from "./format-html-notebook.ts";
 
 export function htmlFormat(
   figwidth: number,
@@ -528,6 +533,15 @@ export async function htmlFormatExtras(
     partials: partials.map((partial) => join(templateDir, partial)),
   };
 
+  const htmlPostProcessors = [
+    htmlFormatPostprocessor(format, featureDefaults),
+    metadataPostProcessor(input, format, offset),
+  ];
+  const viewStyle = format.render[kNotebookViewStyle];
+  if (viewStyle === kNotebookViewStyleNotebook) {
+    htmlPostProcessors.push(notebookViewPostProcessor());
+  }
+
   const metadata: Metadata = {};
   return {
     [kIncludeInHeader]: includeInHeader,
@@ -537,10 +551,7 @@ export async function htmlFormatExtras(
     html: {
       [kDependencies]: dependencies,
       [kSassBundles]: sassBundles,
-      [kHtmlPostprocessors]: [
-        htmlFormatPostprocessor(format, featureDefaults),
-        metadataPostProcessor(input, format, offset),
-      ],
+      [kHtmlPostprocessors]: htmlPostProcessors,
     },
   };
 }

src/resources/formats/html/bootstrap/_bootstrap-rules.scss

@@ -1017,6 +1017,24 @@ figure .quarto-notebook-link {
   margin-right: 0.4em;
 }
 
+.quarto-notebook .cell-container {
+  display: flex;
+}
+
+.quarto-notebook .cell-container .cell {
+  flex-grow: 4;
+}
+
+.quarto-notebook .cell-container .cell-decorator {
+  padding-top: 1.5em;
+  padding-right: 1em;
+  text-align: right;
+}
+
+.quarto-notebook h2 {
+  border-bottom: none;
+}
+
 .sidebar .quarto-alternate-formats a,
 .sidebar .quarto-alternate-notebooks a {
   text-decoration: none;

src/resources/formats/html/embed/template.ejs.html

@@ -15,10 +15,6 @@
     </style>
 
     <style>
-      .cell {
-        border-bottom: solid 1px;
-      }
-
       .quarto-embed-header {
         height: 3em;
         width: 100%;

src/resources/schema/document-links.yml

@@ -78,3 +78,11 @@
             required: [notebook]
 
   description: "Configures the HTML viewer for notebooks that provide embedded content."
+
+- name: notebook-view-style
+  tags:
+    formats: [$html-doc]
+  schema:
+    enum: [document, notebook]
+  hidden: true
+  description: "The style of document to render. Setting this to `notebook` will create additional notebook style affordances."

tests/docs/smoke-all/2023/01/05/notebook-preview.qmd

@@ -19,7 +19,7 @@ grid:
     body-width: 1000px
     margin-width: 300px
     gutter-width: 1.5rem
-theme: darkly
+theme: spacelab
 
 notebook-view: true 
 notebook-links: true

tests/docs/smoke-all/2023/01/05/plots.ipynb

@@ -2,28 +2,17 @@
  "cells": [
   {
    "cell_type": "markdown",
-   "id": "4170aedd",
+   "id": "5627eef3",
    "metadata": {},
    "source": [
-    "---\n",
-    "title: This is a test notebook\n",
-    "author: Charles Teague\n",
-    "date: today\n",
-    "---"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "id": "21d4bff7",
-   "metadata": {},
-   "source": [
-    "## Hi Dog\n",
-    "This is a **test** of a markdown cell"
+    "## Hi\n",
+    "\n",
+    "This is some markdown"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 7,
    "id": "3d8a9364",
    "metadata": {
     "tags": [
@@ -54,7 +43,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 8,
    "id": "176f6946",
    "metadata": {},
    "outputs": [
@@ -83,7 +72,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 9,
    "id": "ff7727fa",
    "metadata": {},
    "outputs": [
@@ -108,7 +97,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": 10,
    "id": "9b3f7a5f",
    "metadata": {},
    "outputs": [