Convert SZMGR notes from Asciidoc to Markdown

.vscode/launch.json

@@ -1,12 +1,9 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
         {
             "request": "launch",
-            "name": "Launch Program",
+            "name": "Debug",
             "type": "node",
             "cwd": "${workspaceFolder}",
             "runtimeExecutable": "deno",

_components/NavLevel.tsx

@@ -1,48 +1,54 @@
 import { Finder } from "../_plugins/finder.ts";
 
 export interface NavItem {
-  title?: string;
-  href?: string;
-  children?: NavItem[];
+    title?: string;
+    href?: string;
+    children?: NavItem[];
 }
 
 export default function NavLevel({
-  items,
-  depth,
-  maxDepth,
-  finder,
+    items,
+    depth,
+    maxDepth,
+    finder,
 }: {
-  items?: NavItem[];
-  depth?: number;
-  maxDepth?: number;
-  finder: Finder;
+    items?: NavItem[];
+    depth?: number;
+    maxDepth?: number;
+    finder: Finder;
 }) {
-  if (items === null || items === undefined) {
-    return <></>;
-  }
+    if (items === null || items === undefined) {
+        return <></>;
+    }
 
-  if (items.length === 0) {
-    return <ul></ul>;
-  }
+    if (items.length === 0) {
+        return <ul></ul>;
+    }
 
-  depth ??= 0;
-  if (maxDepth && depth > maxDepth) {
-    return <></>;
-  }
-  return (
-    <ul class="nav-level">
-      {items.map((i) => (
-        <li class="nav-item">
-          {i.href ? (
-            <a class="nav-link" href={i.href}>{i.title ?? finder.find(i.href)?.data.title ?? "Missing"}</a>
-          ) : (
-            <span class="nav-link">{i.title ?? "Missing"}</span>
-          )}
-          {i.children && i.children.length > 0 && (
-            <NavLevel items={i.children} depth={depth! + 1} maxDepth={maxDepth} finder={finder} />
-          )}
-        </li>
-      ))}
-    </ul>
-  );
+    depth ??= 0;
+    if (maxDepth && depth > maxDepth) {
+        return <></>;
+    }
+    return (
+        <ul class="nav-level w-full">
+            {items.map((i) => (
+                <li class="nav-item w-full">
+                    {i.href
+                        ? (
+                            <a class="nav-link block text-ellipsis whitespace-nowrap overflow-hidden" href={i.href}>
+                                {i.title ?? finder.find(i.href)?.data.title ?? "Missing"}
+                            </a>
+                        )
+                        : (
+                            <span class="nav-link block text-ellipsis whitespace-nowrap overflow-hidden">
+                                {i.title ?? "Missing"}
+                            </span>
+                        )}
+                    {i.children && i.children.length > 0 && (
+                        <NavLevel items={i.children} depth={depth! + 1} maxDepth={maxDepth} finder={finder} />
+                    )}
+                </li>
+            ))}
+        </ul>
+    );
 }

_config.ts

@@ -1,5 +1,11 @@
 import lume from "lume/mod.ts";
-import markdown from "lume/plugins/markdown.ts";
+import remark from "lume/plugins/remark.ts";
+import remarkAlert from "./_plugins/remark-alerts.ts";
+import { remarkDefinitionList, defListHastHandlers } from "npm:remark-definition-list";
+import remarkTextr from "npm:remark-textr";
+import remarkTitle from "./_plugins/remark-title.ts";
+import rehypeSlug from "npm:rehype-slug";
+import rehypeAutolinkHeadings from "npm:rehype-autolink-headings";
 import jsx from "lume/plugins/jsx.ts";
 import sass from "lume/plugins/sass.ts";
 import postcss from "lume/plugins/postcss.ts";
@@ -8,49 +14,79 @@ import picture from "lume/plugins/picture.ts";
 import katex from "./_plugins/katex.ts";
 import metas from "lume/plugins/metas.ts";
 import resolveUrls from "lume/plugins/resolve_urls.ts";
-import codeHighlight from "./_plugins/shiki.ts";
+import shiki from "./_plugins/shiki.ts";
 import sitemap from "lume/plugins/sitemap.ts";
 import inline from "lume/plugins/inline.ts";
 import pagefind from "lume/plugins/pagefind.ts";
-import { linkInsideHeader } from "lume_markdown_plugins/toc/anchors.ts";
-import toc from "lume_markdown_plugins/toc.ts";
 import esbuild from "lume/plugins/esbuild.ts";
+import typographicBase from "npm:typographic-base";
+import tailwindcss from "lume/plugins/tailwindcss.ts";
 
 import { AsciidoctorEngine, asciidocLoader } from "./_plugins/asciidoc.ts";
-import { default as markdownItAlerts } from "npm:markdown-it-github-alerts";
 import finder from "./_plugins/finder.ts";
+import git from "./_plugins/git.ts";
 
 const site = lume({
     dest: "public/",
     location: new URL("https://fi.cafour.cz"),
 });
 
 site.ignore("readme.md", "contributing.md", "public", "deps.ts", "_plugins");
-site.use(markdown({
-    plugins: [[markdownItAlerts, {
-        titles: {
-            "tip": "",
-            "note": "",
-            "important": "",
-            "warning": "",
-            "caution": ""
-        },
-        icons: {
-            "tip": " ",
-            "note": " ",
-            "important": " ",
-            "warning": " ",
-            "caution": " "
-        },
-        classPrefix: "alert"
-    }]]
-}));
-site.use(toc({
-    tabIndex: false,
-    // anchor: false,
-    anchor: linkInsideHeader({
-        placement: "before"
-    })
+site.use(remark({
+    remarkPlugins: [
+        [
+            remarkAlert,
+            {
+                classPrefix: "alert",
+                icons: {
+                    "TIP": "",
+                    "NOTE": "",
+                    "WARNING": ""
+                },
+                titles: {
+                    "TIP": "Tip",
+                    "NOTE": "Poznámka",
+                    "WARNING": "Varování",
+                    "IMPORTANT": "Důležitost",
+                    "CAUTION": "Bacha!"
+                }
+            }
+        ],
+        [remarkDefinitionList],
+        [
+            remarkTextr,
+            {
+                options: {
+                    locale: "cs"
+                },
+                plugins: [
+                    typographicBase
+                ]
+            }
+        ],
+        [remarkTitle]
+    ],
+    rehypePlugins: [
+        [rehypeSlug],
+        [
+            rehypeAutolinkHeadings,
+            {
+                content: {
+                    type: "text",
+                    value: "#"
+                },
+                properties: {
+                    tabIndex: -1,
+                    class: "header-anchor"
+                }
+            }
+        ]
+    ],
+    rehypeOptions: {
+        handlers: {
+            ...defListHastHandlers
+        }
+    }
 }));
 site.use(jsx());
 site.use(esbuild({
@@ -73,8 +109,8 @@ site.use(sass({
         ]
     }
 }));
+site.use(tailwindcss());
 site.use(postcss());
-site.use(metas());
 site.use(resolveUrls());
 site.use(sitemap({
     query: "indexable=true"
@@ -104,32 +140,44 @@ site.use(transformImages({
         }
     }
 }));
+site.use(metas());
 site.use(inline());
 site.use(katex({
     options: {
         fleqn: true,
         throwOnError: false,
         output: "html",
-        strict: false
+        strict: false,
+        delimiters: [
+            { left: "$", right: "$", display: false },
+            { left: "$$", right: "$$", display: true },
+            { left: "\\(", right: "\\)", display: false },
+            { left: "\\begin{equation}", right: "\\end{equation}", display: true },
+            { left: "\\begin{align}", right: "\\end{align}", display: true },
+            { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
+            { left: "\\begin{gather}", right: "\\end{gather}", display: true },
+            { left: "\\begin{CD}", right: "\\end{CD}", display: true },
+            { left: "\\[", right: "\\]", display: true }
+        ]
     }
 }));
-// .use(await codeHighlight())
+site.use(shiki())
 site.loadPages([".ad"], { loader: asciidocLoader, engine: new AsciidoctorEngine() })
 site.copy("fonts");
 site.add("icons");
 site.add("index.md");
 site.add("scripts");
 site.add("styles");
 site.add([".md", ".ad"]);
-site.add([".png", ".jpg", ".jpeg", ".gif", ".svg"])
+site.add([".png", ".jpg", ".jpeg", ".gif", ".svg"]);
 site.use(finder());
+site.use(git());
 site.use(pagefind({
-    indexing: {
-        rootSelector: "main"
-    },
     ui: {
-        showSubResults: true
-    }
+        showSubResults: true,
+        autofocus: true,
+        containerId: "search"
+    },
 }));
 
 export default site;

_includes/layouts/base.tsx

@@ -1,41 +1,45 @@
 export interface FrontPageData extends Lume.Data {
-  styles?: string[];
-  useNewStyle?: boolean;
+    styles?: string[];
+    useNewStyle?: boolean;
 }
 
 export default function (
-  { title, children, styles, useNewStyle }: FrontPageData,
+    { title, children, styles, useNewStyle }: FrontPageData,
 ) {
-  return (
-    // dark theme is not ready yet
-    <html data-theme="light">
-      <head>
-        <meta charSet="utf-8" />
-        <link rel="icon" sizes="16x16" href="/icons/fi_16.ico" />
-        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-        <meta
-          name="theme-color"
-          media="(prefers-color-scheme: light)"
-          content="#faf2eb"
-        />
-        <meta
-          name="theme-color"
-          media="(prefers-color-scheme: dark)"
-          content="#3a322b"
-        />
-        <title>{title ? `${title} | Poznámky z FI` : "Poznámky z FI"}</title>
+    const timestamp = Math.floor(Date.now() / 1000);
+    return (
+        // dark theme is not ready yet
+        <html data-theme="light">
+            <head>
+                <meta charSet="utf-8" />
+                <link rel="icon" sizes="16x16" href="/icons/fi_16.ico" />
+                <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+                <meta
+                    name="theme-color"
+                    media="(prefers-color-scheme: light)"
+                    content="#faf2eb"
+                />
+                <meta
+                    name="theme-color"
+                    media="(prefers-color-scheme: dark)"
+                    content="#3a322b"
+                />
+                <title>{title ? `${title} | Poznámky z FI` : "Poznámky z FI"}</title>
 
-        {!useNewStyle &&
-          (styles ?? []).map((style) => (
-            <link href={`/styles/${style}.css`} rel="stylesheet" />
-          ))}
-        {useNewStyle && <link href="/styles/main.css" rel="stylesheet" />}
+                {!useNewStyle &&
+                    (styles ?? []).map((style) => <link href={`/styles/${style}.css`} rel="stylesheet" />)}
+                {useNewStyle && (
+                    <>
+                        <link type="text/css" href={`/styles/tailwind.css?ts=${timestamp}`} rel="stylesheet" />
+                        <link type="text/css" href={`/styles/main.css?ts=${timestamp}`} rel="stylesheet" />
+                    </>
+                )}
 
-        <link href="/katex.css" rel="stylesheet" />
-        <script type="text/javascript" src="/scripts/main.js" />
-      </head>
+                <link href="/katex.css" rel="stylesheet" />
+                <script type="text/javascript" src="/scripts/main.js" />
+            </head>
 
-      <body className={styles?.join(" ")}>{children}</body>
-    </html>
-  );
+            <body className={styles?.join(" ")}>{children}</body>
+        </html>
+    );
 }