Introducing astro-erudite v2

35
markdown: {
36
  syntaxHighlight: false,
37
  rehypePlugins: [
38
    [
39
      rehypeExternalLinks,
40
      {
41
        target: '_blank',
42
        rel: ['nofollow', 'noreferrer', 'noopener'],
43
      },
44
    ],
45
    rehypeHeadingIds,
46
    rehypeKatex,
47
    [
48
      rehypeExpressiveCode,
49
      {
50
        themes: ['github-light', 'github-dark'],
51
        plugins: [pluginCollapsibleSections(), pluginLineNumbers()],
52
        useDarkModeMediaQuery: false,
53
        themeCssSelector: (theme: ExpressiveCodeTheme) =>
54
          `[data-theme="${theme.name.split('-')[1]}"]`,
55
        defaultProps: {
56
          wrap: true,
57
          collapseStyle: 'collapsible-auto',
58
          overridesByLang: {
59
            'ansi,bat,bash,batch,cmd,console,powershell,ps,ps1,psd1,psm1,sh,shell,shellscript,shellsession,text,zsh':
60
              {
61
                showLineNumbers: false,
62
              },
63
          },
64
        },
65
        styleOverrides: {
25 collapsed lines
66
          codeFontSize: '0.75rem',
67
          borderColor: 'var(--border)',
68
          codeFontFamily: 'var(--font-mono)',
69
          codeBackground:
70
            'color-mix(in oklab, var(--muted) 25%, transparent)',
71
          frames: {
72
            editorActiveTabForeground: 'var(--muted-foreground)',
73
            editorActiveTabBackground:
74
              'color-mix(in oklab, var(--muted) 25%, transparent)',
75
            editorActiveTabIndicatorBottomColor: 'transparent',
76
            editorActiveTabIndicatorTopColor: 'transparent',
77
            editorTabBorderRadius: '0',
78
            editorTabBarBackground: 'transparent',
79
            editorTabBarBorderBottomColor: 'transparent',
80
            frameBoxShadowCssValue: 'none',
81
            terminalBackground:
82
              'color-mix(in oklab, var(--muted) 25%, transparent)',
83
            terminalTitlebarBackground: 'transparent',
84
            terminalTitlebarBorderBottomColor: 'transparent',
85
            terminalTitlebarForeground: 'var(--muted-foreground)',
86
          },
87
          lineNumbers: {
88
            foreground: 'var(--muted-foreground)',
89
          },
90
          uiFontFamily: 'var(--font-sans)',
91
        },
92
      },
93
    ],
94
    [
95
      rehypeShiki,
96
      {
97
        themes: {
98
          light: 'github-light',
99
          dark: 'github-dark',
100
        },
101
        inline: 'tailing-curly-colon',
102
      },
103
    ],
104
  ],
105
  remarkPlugins: [remarkMath, remarkEmoji],
106
},

21
markdown: {
22
  syntaxHighlight: false,
23
  processor: satteri({
24
    features: { directive: true, math: true },
25
    mdastPlugins: [calloutDirective, inlineExpressiveCode, temmlMath],
26
    hastPlugins: [externalLinks, blockExpressiveCode, headingNamespace],
27
  }),
28
},

1
import { defineHastPlugin } from "satteri";
2

3
export const externalLinks = defineHastPlugin({
4
  name: "external-links",
5
  element: {
6
    filter: ["a"],
7
    visit(node, ctx) {
8
      const href = node.properties.href;
9
      if (typeof href === "string" && /^https?:\/\//.test(href)) {
10
        ctx.setProperty(node, "target", "_blank");
11
        ctx.setProperty(node, "rel", "nofollow noreferrer noopener");
12
      }
13
    },
14
  },
15
});

1
import GithubSlugger from "github-slugger";
2
import { defineHastPlugin } from "satteri";
3

4
const SUBPOST = /\/blog\/[^/]+\/(?!index\.mdx?$)([^/]+)\.mdx?$/;
5

6
export function headingNamespace() {
7
  const slugger = new GithubSlugger();
8
  return defineHastPlugin({
9
    name: "heading-namespace",
10
    element: {
11
      filter: ["h1", "h2", "h3", "h4", "h5", "h6"],
12
      visit(node, ctx) {
13
        const match = SUBPOST.exec(ctx.filename);
14
        if (!match) return;
15
        ctx.setProperty(
16
          node,
17
          "id",
18
          `${match[1]}-${slugger.slug(ctx.textContent(node))}`,
19
        );
20
      },
21
    },
22
  });
23
}

1
import { defineMdastPlugin } from "satteri";
2
import temml from "temml";
3

4
const err = (e: unknown) => (e instanceof Error ? e.message : String(e));
5

6
export function temmlMath() {
7
  return defineMdastPlugin({
8
    name: "temml-math",
9
    inlineMath(node, ctx) {
10
      try {
11
        const value = temml.renderToString(node.value, { throwOnError: false });
12
        return { type: "html", value };
13
      } catch (error) {
14
        ctx.report({
15
          message: `temml-math: failed on \`${node.value}\`: ${err(error)}`,
16
          node,
17
          severity: "warning",
18
        });
19
      }
20
    },
21
    math(node, ctx) {
22
      try {
23
        const value = temml.renderToString(node.value, {
24
          displayMode: true,
25
          throwOnError: false,
26
        });
27
        return { type: "html", value: `<math-display>${value}</math-display>` };
28
      } catch (error) {
29
        ctx.report({
30
          message: `temml-math: failed on \`${node.value}\`: ${err(error)}`,
31
          node,
32
          severity: "warning",
33
        });
34
      }
35
    },
36
  });
37
}

37 collapsed lines
1
import { readFileSync } from "node:fs";
2
import { dirname, join } from "node:path";
3
import { fileURLToPath } from "node:url";
4
import type { ElementContent } from "hast";
5
import { toHtml } from "hast-util-to-html";
6
import { h } from "hastscript";
7
import { defineMdastPlugin } from "satteri";
8

9
const ICONS_DIR = join(
10
  dirname(fileURLToPath(import.meta.url)),
11
  "../assets/icons/callouts",
12
);
13

14
const loadIcon = (name: string) =>
15
  readFileSync(join(ICONS_DIR, `${name}.svg`), "utf8")
16
    .replace("<svg", '<svg aria-hidden="true"')
17
    .replace(/\s+/g, " ")
18
    .trim();
19

20
const VARIANTS: Record<string, string> = {
21
  note: "info-circle",
22
  tip: "lightbulb",
23
  warning: "danger-triangle",
24
  caution: "shield-warning",
25
  important: "bell",
26
};
27

28
const icons: Record<string, string> = {};
29
for (const name of [...new Set(Object.values(VARIANTS)), "alt-arrow-down"]) {
30
  icons[name] = loadIcon(name);
31
}
32

33
const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
34

35
const raw = (value: string): ElementContent =>
36
  ({ type: "raw", value }) as unknown as ElementContent;
37

38
export function calloutDirective() {
39
  return defineMdastPlugin({
40
    name: "callout-directive",
41
    containerDirective(node, ctx) {
42
      const iconName = VARIANTS[node.name];
43
      if (!iconName) return;
44

45
      const first = node.children[0];
46
      const isLabel = first?.type === "paragraph" &&
47
        (first.data as { directiveLabel?: boolean })?.directiveLabel === true;
48
      const label = isLabel ? ctx.textContent(first) : null;
49
      if (isLabel) ctx.removeNode(first);
50

51
      const title: ElementContent[] = [
52
        { type: "text", value: capitalize(node.name) },
53
      ];
54
      if (label) title.push(h("span", ` (${label})`));
55

56
      const summary = toHtml(
57
        h("summary", [
58
          raw(icons[iconName]),
59
          h("span", title),
60
          raw(icons["alt-arrow-down"]),
61
        ]),
62
        { allowDangerousHtml: true },
63
      );
64

65
      const closed = !!node.attributes && "closed" in node.attributes;
66

67
      ctx.prependChild(node, { type: "html", value: summary });
68
      ctx.setProperty(node, "data", {
69
        hName: "details",
70
        hProperties: {
71
          dataCallout: node.name,
72
          open: !closed,
73
        },
74
      });
75
    },
76
  });
77
}

1
prose-content {
2
  [data-callout] {
3
    --accent: var(--muted-foreground);
4
    --callout-border: var(--accent);
5
    --callout-text: light-dark(
6
      oklch(from var(--accent) 0.48 calc(c * 1.05) h),
7
      oklch(from var(--accent) 0.83 calc(c * 0.5) h)
8
    );
55 collapsed lines
9

10
    position: relative;
11
    padding-block: 0.75rem;
12
    padding-inline: 1rem 0;
13
    border-inline-start: 4px solid var(--callout-border);
14

15
    > summary {
16
      display: flex;
17
      align-items: center;
18
      cursor: pointer;
19
      list-style: none;
20
      font-weight: 500;
21
      color: var(--callout-text);
22

23
      &::-webkit-details-marker {
24
        display: none;
25
      }
26

27
      svg {
28
        flex-shrink: 0;
29
        inline-size: 1.25rem;
30
        block-size: 1.25rem;
31
      }
32

33
      svg:first-child {
34
        margin-inline-end: 0.5rem;
35
      }
36

37
      svg:last-child {
38
        margin-inline-start: auto;
39
      }
40

41
      > span {
42
        margin-inline-end: 0.5rem;
43

44
        > span {
45
          font-weight: 400;
46
          opacity: 0.7;
47
        }
48
      }
49
    }
50

51
    &[open] > summary {
52
      margin-block-end: 0.75rem;
53

54
      svg:last-child {
55
        transform: rotate(180deg);
56
      }
57
    }
58

59
    > :last-child {
60
      margin-block-end: 0;
61
    }
62
  }
63

64
  [data-callout="note"] {
65
    --accent: #0090ff;
66
  }
67
  [data-callout="tip"] {
68
    --accent: #30a46c;
69
  }
70
  [data-callout="warning"] {
71
    --accent: #ffc53d;
72
  }
73
  [data-callout="caution"] {
74
    --accent: #e5484d;
75
  }
76
  [data-callout="important"] {
77
    --accent: #8e4ec6;
78
  }
79
}

1
import expressiveCode from "satteri-expressive-code";
2
import { ecRenderer } from "./config";
3
import { inlineExpressiveCode } from "./inline";
4

5
export const blockExpressiveCode = expressiveCode({
6
  customCreateRenderer: () => ecRenderer,
7
});
8

9
export { inlineExpressiveCode };

1
import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
2
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
3
import {
4
  createRenderer,
5
  type SatteriExpressiveCodeOptions,
6
} from "satteri-expressive-code";
7

8
export const ecOptions: SatteriExpressiveCodeOptions = {
9
  themes: ["github-light", "github-dark"],
10
  useDarkModeMediaQuery: true,
11
  themeCssSelector: (theme) =>
12
    `[data-theme="${theme.name === "github-dark" ? "dark" : "light"}"]`,
13
  plugins: [pluginCollapsibleSections(), pluginLineNumbers()],
45 collapsed lines
14
  defaultProps: {
15
    wrap: true,
16
    showLineNumbers: true,
17
    collapseStyle: "collapsible-auto",
18
    overridesByLang: {
19
      "ansi,bat,bash,batch,cmd,console,powershell,ps,ps1,psd1,psm1,sh,shell,shellscript,shellsession,text,zsh":
20
        {
21
          showLineNumbers: false,
22
        },
23
    },
24
  },
25
  styleOverrides: {
26
    codeFontSize: "var(--step--1)",
27
    codeFontFamily: "var(--font-mono)",
28
    codeBackground: "color-mix(in oklab, var(--muted) 25%, transparent)",
29
    borderColor: "var(--border)",
30
    borderRadius: "0",
31
    uiFontFamily: "var(--font-sans)",
32
    lineNumbers: {
33
      foreground: "var(--muted-foreground)",
34
    },
35
    frames: {
36
      editorActiveTabForeground: "var(--muted-foreground)",
37
      editorActiveTabBackground: "transparent",
38
      editorActiveTabIndicatorBottomColor: "transparent",
39
      editorActiveTabIndicatorTopColor: "transparent",
40
      editorTabBorderRadius: "0",
41
      editorTabBarBackground: "transparent",
42
      editorTabBarBorderBottomColor: "transparent",
43
      frameBoxShadowCssValue: "none",
44
      terminalBackground: "color-mix(in oklab, var(--muted) 25%, transparent)",
45
      terminalTitlebarBackground: "transparent",
46
      terminalTitlebarBorderBottomColor: "transparent",
47
      terminalTitlebarForeground: "var(--muted-foreground)",
48
    },
49
    textMarkers: {
50
      backgroundOpacity: "25%",
51
      borderOpacity: "25%",
52
      defaultChroma: "50",
53
      lineMarkerLabelColor: "var(--foreground)",
54
    },
55
    collapsibleSections: {
56
      closedFontFamily: "var(--font-sans)",
57
    },
58
  },
59
};
60

61
export const ecRenderer = createRenderer(ecOptions);

13 collapsed lines
1
import type { ElementContent } from "hast";
2
import { toHtml } from "hast-util-to-html";
3
import { select } from "hast-util-select";
4
import { h } from "hastscript";
5
import type { Html } from "mdast";
6
import { defineMdastPlugin } from "satteri";
7
import {
8
  type ExpressiveCode,
9
  ExpressiveCodeBlock,
10
  type ExpressiveCodeTheme,
11
} from "satteri-expressive-code";
12
import { ecRenderer } from "./config";
13

14
const ANNOTATION = /^(.+?)\{:([^}]+)\}$/;
15

16
type Annotation =
17
  | { kind: "lang"; code: string; lang: string }
18
  | { kind: "scope"; code: string; scope: string };
19

20
function parseAnnotation(value: string): Annotation | null {
21
  const match = ANNOTATION.exec(value);
22
  if (!match) return null;
23
  const [, code, tag] = match;
24
  if (!code || tag === ".") return null;
25
  return tag.startsWith(".")
26
    ? { kind: "scope", code, scope: tag.slice(1) }
27
    : { kind: "lang", code, lang: tag };
28
}
29

30
async function highlightLanguage(
31
  ec: ExpressiveCode,
32
  code: string,
33
  lang: string,
34
): Promise<ElementContent[]> {
35
  const block = new ExpressiveCodeBlock({ code, language: lang });
36
  const { renderedGroupAst } = await ec.render(block);
37
  const tokens = select(".ec-line .code", renderedGroupAst)?.children;
38
  return tokens ?? [{ type: "text", value: code }];
39
}
40

20 collapsed lines
41
function highlightScope(
42
  ec: ExpressiveCode,
43
  code: string,
44
  scope: string,
45
): ElementContent[] {
46
  const [light, dark] = ec.styleVariants;
47
  const c0 = resolveScopeColor(light.theme, scope);
48
  const c1 = resolveScopeColor(dark.theme, scope);
49
  return [h("span", { style: `--0:${c0};--1:${c1}` }, code)];
50
}
51

52
function resolveScopeColor(theme: ExpressiveCodeTheme, scope: string): string {
53
  const best = (theme.settings ?? [])
54
    .flatMap((rule) =>
55
      (rule.scope ?? []).map((s) => ({ s, fg: rule.settings.foreground }))
56
    )
57
    .filter(({ s, fg }) => fg && (scope === s || scope.startsWith(`${s}.`)))
58
    .sort((a, b) => b.s.length - a.s.length)[0];
59
  return best?.fg ?? theme.fg;
60
}
61

62
export function inlineExpressiveCode() {
63
  return defineMdastPlugin({
64
    name: "inline-expressive-code",
65
    async inlineCode(node, ctx) {
66
      const annotation = parseAnnotation(node.value);
67
      if (!annotation) return;
68

69
      try {
70
        const { ec } = await ecRenderer;
71
        const tokens = annotation.kind === "lang"
72
          ? await highlightLanguage(ec, annotation.code, annotation.lang)
73
          : highlightScope(ec, annotation.code, annotation.scope);
74
        const dataLanguage = annotation.kind === "lang"
75
          ? annotation.lang
76
          : undefined;
77

78
        const value = toHtml(h("code", { dataEc: "", dataLanguage }, tokens));
79
        return { type: "html", value } satisfies Html;
80
      } catch (error) {
81
        const reason = error instanceof Error ? error.message : String(error);
82
        ctx.report({
83
          message:
84
            `inline-expressive-code: failed on \`${node.value}\`: ${reason}`,
85
          node,
86
          severity: "warning",
87
        });
88
      }
89
    },
90
  });
91
}