Create {myst:static} directive first draft

Author: mfisher87

assets/styles/style.css

@@ -9,3 +9,42 @@ body {
 [aria-label="Document Outline"] {
   max-height: calc(100vh - 100px) !important;
 }
+
+.myst-static-input-wrapper {
+  border: 1px solid #ccc;
+}
+
+.myst-static-input-wrapper::before {
+  content: "📥 MyST input";
+  display: block;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #ccc;
+  padding: 8px 12px;
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+  margin: 0;
+}
+
+.myst-static-output-wrapper {
+  border: 1px solid #ccc;
+  margin-bottom: 20px;
+}
+
+.myst-static-output-wrapper::before {
+  content: "📤 MyST output";
+  display: block;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #ccc;
+  padding: 8px 12px;
+  font-weight: bold;
+  font-size: 14px;
+  color: #333;
+  margin: 0;
+}
+
+.myst-static-content {
+  padding-left: 12px;
+  padding-right: 12px;
+  margin: 0;
+}

for-instructors/helpers.md

@@ -5,18 +5,15 @@ directives that will save some time authoring certain repeated elements.
 
 ## Git commit checkpoint directive
 
-```myst
+```{myst:static}
 :::{gitCommitCheckpoint} my commit message
 :::
 ```
 
-:::{gitCommitCheckpoint} my commit message
-:::
-
 
 ## "You should notice..." directive
 
-``````myst
+``````{myst:static}
 :::{youShouldNotice}
 ...the `{youShouldNotice}` directive fully supports markdown in the body.
 This means you can, for example include some code:
@@ -26,12 +23,3 @@ print("Some code!")
 ```
 :::
 ``````
-
-:::{youShouldNotice}
-...the `{youShouldNotice}` directive fully supports markdown in the body.
-This means you can, for example include some code:
-
-```python
-print("Some code!")
-```
-:::

plugin-custom-directives.mjs

@@ -1,51 +1,51 @@
 const gitCommitDirective = {
-  name: "gitCommitCheckpoint",
-  doc: "Renders a consistent callout when the learner should do a Git commit.",
+  name: 'gitCommitCheckpoint',
+  doc: 'Renders a consistent callout when the learner should do a Git commit.',
   arg: {
     type: String,
-    doc: "Commit message",
+    doc: 'Commit message',
   },
   run(data) {
     return [{
-      type: "admonition",
-      kind: "important",
+      type: 'admonition',
+      kind: 'important',
       icon: false,
       children: [
         {
-          type: "admonitionTitle",
+          type: 'admonitionTitle',
           children: [{
-            type: "text",
-            value: "💾 Commit & push to GitHub",
+            type: 'text',
+            value: '💾 Commit & push to GitHub',
           }],
         },
         {
-          type: "code",
-          lang: "bash",
-          value: `git add .\ngit commit -m "${data.arg}"\ngit push -u origin main`,
+          type: 'code',
+          lang: 'bash',
+          value: `git add .\ngit commit -m '${data.arg}'\ngit push -u origin main`,
         },
       ],
     }];
   },
 };
 
 const youShouldNoticeDirective = {
-  name: "youShouldNotice",
-  doc: "Renders a consistent callout when the learner should notice something.",
+  name: 'youShouldNotice',
+  doc: 'Renders a consistent callout when the learner should notice something.',
   body: {
     type: 'myst',
   },
   run(data) {
     return [{
-      type: "admonition",
-      kind: "important",
+      type: 'admonition',
+      kind: 'important',
       icon: false,
-      class: "simple",
+      class: 'simple',
       children: [
         {
-          type: "admonitionTitle",
+          type: 'admonitionTitle',
           children: [{
-            type: "text",
-            value: "👀 You should notice...",
+            type: 'text',
+            value: '👀 You should notice...',
           }],
         },
         ...data.body,
@@ -54,9 +54,43 @@ const youShouldNoticeDirective = {
   },
 };
 
+const mystDemoStatic = {
+  name: 'myst:static',
+  doc: 'A static/pre-rendered version of the `{myst}` directive which supports plugins.',
+  body: {
+    type: 'myst',
+  },
+  run(data) {
+    return [
+      {
+        type: "div",
+        class: "myst-static-input-wrapper",
+        children: [{
+          type: "div",
+          class: "myst-static-content",
+          children: [{
+            type: "code",
+            language: "text",
+            value: data.node.value,
+          }],
+        }],
+      },
+      {
+        type: "div",
+        class: "myst-static-output-wrapper",
+        children: [{
+          type: "div",
+          class: "myst-static-content",
+          children: data.body,
+        }],
+      },
+    ];
+  },
+};
+
 const plugin = {
-  name: "Our custom functionality",
-  doc: "Custom functionality for this workshop website",
-  directives: [gitCommitDirective, youShouldNoticeDirective],
+  name: 'Our custom functionality',
+  doc: 'Custom functionality for this workshop website',
+  directives: [gitCommitDirective, youShouldNoticeDirective, mystDemoStatic],
 }
 export default plugin;