Support GFM alerts

docs/src/basics/asides.dj

@@ -0,0 +1,55 @@
+---
+order: -6
+---
+
+# Asides
+
+## Note
+
+{.dj-djot-demo}
+```
+{tag=aside .note}
+:::
+Objects in mirror may be closer than they appear
+:::
+```
+
+## Tip
+
+{.dj-djot-demo}
+```
+{tag=aside .tip}
+:::
+Objects in mirror may be closer than they appear
+:::
+```
+
+## Important
+
+{.dj-djot-demo}
+```
+{tag=aside .important}
+:::
+Objects in mirror may be closer than they appear
+:::
+```
+
+## Caution
+
+{.dj-djot-demo}
+```
+{tag=aside .caution}
+:::
+Objects in mirror may be closer than they appear
+:::
+```
+
+## Warning
+
+{.dj-djot-demo}
+```
+{tag=aside .warning}
+:::
+Objects in mirror may be closer than they appear
+:::
+```

docs/src/basics/configuration.dj

@@ -3,7 +3,7 @@ order: -1
 ---
 # Configuration reference
 
-{tag=aside .warning}
+{tag=aside .caution}
 :::
 Djockey is pre-alpha and config options _will_ change.
 :::

docs/src/basics/custom_markup.dj

@@ -3,7 +3,7 @@ order: -5
 ---
 # Custom markup
 
-{tag=aside .warning}
+{tag=aside .caution}
 :::
 The details of this markup are likely to change, since Djockey is experimental.
 :::
@@ -30,36 +30,4 @@ Output:
 :::
 [I'm from Mattel!]{tag=summary}
 Well, I'm not really from Mattel. I'm actually from a smaller company that was purchased in a leveraged buyout.
-:::
-
-## Asides
-
-### Note
-
-{.dj-djot-demo}
-```
-{tag=aside .note}
-:::
-Objects in mirror may be closer than they appear
-:::
-```
-
-### Warning
-
-{.dj-djot-demo}
-```
-{tag=aside .warning}
-:::
-Objects in mirror may be closer than they appear
-:::
-```
-
-### Danger
-
-{.dj-djot-demo}
-```
-{tag=aside .danger}
-:::
-Objects in mirror may be closer than they appear
-:::
-```
+:::

docs/src/features/gfm.md

@@ -0,0 +1,49 @@
+---
+md_flavor: gfm
+---
+
+# GitHub Markdown demos
+
+## Alerts
+
+### H3
+
+```md
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+```
+
+> [!NOTE]
+> Useful information that users should know, even when skimming content.
+
+```md
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+```
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+```md
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+```
+
+> [!IMPORTANT]
+> Key information users need to know to achieve their goal.
+
+```md
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+```
+
+> [!WARNING]
+> Urgent info that needs immediate user attention to avoid problems.
+
+```md
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.
+```
+
+> [!CAUTION]
+> Advises about risks or negative outcomes of certain actions.

src/engine/executeConfig.ts

@@ -22,6 +22,7 @@ import { DjotDemoPlugin } from "../plugins/djotDemoPlugin.js";
 import { SyntaxHighlightingPlugin } from "../plugins/syntaxHighlighting.js";
 import { fileURLToPath } from "url";
 import { IndextermsPlugin } from "../plugins/indextermsPlugin.js";
+import { GFMAlertsPlugin } from "../plugins/gfmAlertsPlugin.js";
 
 function pluralize(n: number, singular: string, plural: string): string {
   return n === 1 ? `1 ${singular}` : `${n} ${plural}`;
@@ -35,6 +36,7 @@ function makeBuiltinPlugins(config: DjockeyConfigResolved): DjockeyPlugin[] {
     new DjotDemoPlugin(),
     new AutoTitlePlugin(),
     new SyntaxHighlightingPlugin(config),
+    new GFMAlertsPlugin(),
   ];
 }
 

src/plugins/gfmAlertsPlugin.ts

@@ -0,0 +1,35 @@
+import { DjockeyDoc, DjockeyPlugin } from "../types.js";
+import { applyFilter } from "../engine/djotFiltersPlus.js";
+import { djotASTToText, getHasClass } from "../util.js";
+import { Block } from "@djot/djot";
+
+// These happen to correspond to Djockey's 'aside' classes, so we're just going
+// to replace the 'div' tag with the 'aside' tag and remove the starting paragraph.
+const GITHUB_ALERT_CLASSES = ["note", "tip", "important", "warning", "caution"];
+
+export class GFMAlertsPlugin implements DjockeyPlugin {
+  name = "GitHub Flavored Markdown Alerts";
+
+  onPass_write(doc: DjockeyDoc) {
+    applyFilter(doc.docs.content, () => ({
+      div: (node) => {
+        for (const cls of GITHUB_ALERT_CLASSES) {
+          if (getHasClass(node, cls) && !node.attributes?.tag) {
+            const newNode = structuredClone(node);
+
+            const children = newNode.children || ([] as Block[]);
+            if (
+              !children.length ||
+              children[0].tag !== "p" ||
+              djotASTToText(children[0]).toLowerCase() !== cls
+            )
+              if (newNode.children && newNode.children.length)
+                newNode.attributes = { ...node.attributes, tag: "aside" };
+            newNode.children = newNode.children.slice(1);
+            return newNode;
+          }
+        }
+      },
+    }));
+  }
+}

src/plugins/indextermsPlugin.ts

@@ -6,7 +6,7 @@ import { Block, Str } from "@djot/djot";
 let nextID = 0;
 
 export class IndextermsPlugin implements DjockeyPlugin {
-  name = "Djot Example";
+  name = "Indexterms";
 
   // docRelativePath: term: { docRelativePath, id }
   indextermsByDoc: Record<

templates/html/static/dj-asides.css

@@ -32,24 +32,46 @@ aside.note {
   border-color: var(--aside-color-border-note);
 }
 
+/* Tip */
+
+aside.tip::before {
+  content: "Tip";
+  background-color: var(--aside-title-color-bg-tip);
+}
+
+aside.tip {
+  border-color: var(--aside-color-border-tip);
+}
+
+/* Important */
+
+aside.important::before {
+  content: "Important";
+  background-color: var(--aside-title-color-bg-important);
+}
+
+aside.important {
+  border-color: var(--aside-color-border-important);
+}
+
 /* Warning */
 
-aside.warning::before {
+aside.caution::before {
   content: "Warning";
   background-color: var(--aside-title-color-bg-warning);
 }
 
-aside.warning {
+aside.caution {
   border-color: var(--aside-color-border-warning);
 }
 
 /* Danger */
 
-aside.danger::before {
+aside.warning::before {
   content: "Danger";
   background-color: var(--aside-title-color-bg-danger);
 }
 
-aside.danger {
+aside.warning {
   border-color: var(--aside-color-border-danger);
 }

templates/html/static/dj-variables.css

@@ -92,6 +92,10 @@
   --aside-border-radius: 4px;
   --aside-color-border-note: rgb(60, 60, 255);
   --aside-title-color-bg-note: rgb(211, 211, 255);
+  --aside-color-border-tip: rgb(68, 149, 71);
+  --aside-title-color-bg-tip: rgb(203, 231, 205);
+  --aside-color-border-important: rgb(148, 68, 149);
+  --aside-title-color-bg-important: rgb(231, 203, 231);
   --aside-color-border-warning: rgb(155, 159, 31);
   --aside-title-color-bg-warning: rgb(252, 255, 187);
   --aside-color-border-danger: red;