19 collapsed lines
1
import sitemap from "@astrojs/sitemap";
2
import svelte from "@astrojs/svelte";
3
import tailwind from "@astrojs/tailwind";
4
import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
5
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
6
import swup from "@swup/astro";
7
import expressiveCode from "astro-expressive-code";
8
import icon from "astro-icon";
9
import { defineConfig } from "astro/config";
10
import rehypeAutolinkHeadings from "rehype-autolink-headings";
11
import rehypeComponents from "rehype-components"; /* Render the custom directive content */
12
import rehypeKatex from "rehype-katex";
13
import rehypeSlug from "rehype-slug";
14
import remarkDirective from "remark-directive"; /* Handle directives */
15
import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-directives";
16
import remarkMath from "remark-math";
17
import remarkSectionize from "remark-sectionize";
18
import { expressiveCodeConfig } from "./src/config.ts";
19
import { pluginLanguageBadge } from "./src/plugins/expressive-code/language-badge.ts";
20
import { AdmonitionComponent } from "./src/plugins/rehype-component-admonition.mjs";
21
import { GithubCardComponent } from "./src/plugins/rehype-component-github-card.mjs";
22
import { parseDirectiveNode } from "./src/plugins/remark-directive-rehype.js";
23
import { remarkTimeline } from "./src/plugins/remark-timeline.js";
24
import { remarkExcerpt } from "./src/plugins/remark-excerpt.js";
25
import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
26
import { pluginCustomCopyButton } from "./src/plugins/expressive-code/custom-copy-button.js";
83 collapsed lines
27

28
// https://astro.build/config
29
export default defineConfig({
30
  site: "https://fuwari.vercel.app/",
31
  base: "/",
32
  trailingSlash: "always",
33
  integrations: [
34
    tailwind({
35
      nesting: true,
36
    }),
37
    swup({
38
      theme: false,
39
      animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
40
      // the default value `transition-` cause transition delay
41
      // when the Tailwind class `transition-all` is used
42
      containers: ["main", "#toc", "#series"],
43
      smoothScrolling: true,
44
      cache: true,
45
      preload: true,
46
      accessibility: true,
47
      updateHead: true,
48
      updateBodyClass: false,
49
      globalInstance: true,
50
    }),
51
    icon({
52
      include: {
53
        "preprocess: vitePreprocess(),": ["*"],
54
        "fa6-brands": ["*"],
55
        "fa6-regular": ["*"],
56
        "fa6-solid": ["*"],
57
      },
58
    }),
59
    expressiveCode({
60
      themes: [expressiveCodeConfig.theme, expressiveCodeConfig.theme],
61
      plugins: [
62
        pluginCollapsibleSections(),
63
        pluginLineNumbers(),
64
        pluginLanguageBadge(),
65
        pluginCustomCopyButton()
66
      ],
67
      defaultProps: {
68
        wrap: true,
69
        overridesByLang: {
70
          'shellsession': {
71
            showLineNumbers: false,
72
          },
73
        },
74
      },
75
      styleOverrides: {
76
        codeBackground: "var(--codeblock-bg)",
77
        borderRadius: "0.75rem",
78
        borderColor: "none",
79
        codeFontSize: "0.875rem",
80
        codeFontFamily: "'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
81
        codeLineHeight: "1.5rem",
82
        frames: {
83
          editorBackground: "var(--codeblock-bg)",
84
          terminalBackground: "var(--codeblock-bg)",
85
          terminalTitlebarBackground: "var(--codeblock-topbar-bg)",
86
          editorTabBarBackground: "var(--codeblock-topbar-bg)",
87
          editorActiveTabBackground: "none",
88
          editorActiveTabIndicatorBottomColor: "var(--primary)",
89
          editorActiveTabIndicatorTopColor: "none",
90
          editorTabBarBorderBottomColor: "var(--codeblock-topbar-bg)",
91
          terminalTitlebarBorderBottomColor: "none"
92
        },
93
        textMarkers: {
94
          delHue: 0,
95
          insHue: 180,
96
          markHue: 250
97
        }
98
      },
99
      frames: {
100
        showCopyToClipboardButton: false,
101
      }
102
    }),
103
        svelte(),
104
    sitemap(),
105
  ],
106
  markdown: {
107
    remarkPlugins: [
108
      remarkMath,
109
      remarkReadingTime,
110
      remarkExcerpt,
111
      remarkGithubAdmonitionsToDirectives,
112
      remarkDirective,
113
      remarkTimeline,
114
      remarkSectionize,
115
      parseDirectiveNode,
116
    ],
58 collapsed lines
117
    rehypePlugins: [
118
      rehypeKatex,
119
      rehypeSlug,
120
      [
121
        rehypeComponents,
122
        {
123
          components: {
124
            github: GithubCardComponent,
125
            note: (x, y) => AdmonitionComponent(x, y, "note"),
126
            tip: (x, y) => AdmonitionComponent(x, y, "tip"),
127
            important: (x, y) => AdmonitionComponent(x, y, "important"),
128
            caution: (x, y) => AdmonitionComponent(x, y, "caution"),
129
            warning: (x, y) => AdmonitionComponent(x, y, "warning"),
130
          },
131
        },
132
      ],
133
      [
134
        rehypeAutolinkHeadings,
135
        {
136
          behavior: "append",
137
          properties: {
138
            className: ["anchor"],
139
          },
140
          content: {
141
            type: "element",
142
            tagName: "span",
143
            properties: {
144
              className: ["anchor-icon"],
145
              "data-pagefind-ignore": true,
146
            },
147
            children: [
148
              {
149
                type: "text",
150
                value: "#",
151
              },
152
            ],
153
          },
154
        },
155
      ],
156
    ],
157
  },
158
  vite: {
159
    build: {
160
      rollupOptions: {
161
        onwarn(warning, warn) {
162
          // temporarily suppress this warning
163
          if (
164
            warning.message.includes("is dynamically imported by") &&
165
            warning.message.includes("but also statically imported by")
166
          ) {
167
            return;
168
          }
169
          warn(warning);
170
        },
171
      },
172
    },
173
  },
174
});

1
import { h } from "hastscript";
2
import { visit } from "unist-util-visit";
3
import { toString } from "mdast-util-to-string";
4

5
export function remarkTimeline() {
6
  return (tree) => {
7
    visit(tree, "containerDirective", (node) => {
8
      if (node.name !== "timeline") return;
9

10
      const data = node.data || (node.data = {});
11
      const content = toString(node);
12
      const lines = content.split("\n").filter(l => l.trim() !== "");
13

14
      const children = lines.map(line => {
15
        line = line.trim();
16
        // Match year header: [2026 : xxxx]
17
        const yearMatch = line.match(/^\[(.*?)\s?:\s?(.*?)\]$/);
18
        if (yearMatch) {
19
          const year = yearMatch[1];
20
          const desc = yearMatch[2];
21
          return h("div", { className: "flex flex-row w-full items-center h-[3.75rem]" }, [
22
            h("div", { className: "w-[15%] md:w-[10%] transition text-2xl font-bold text-right text-75" }, year),
23
            h("div", { className: "w-[15%] md:w-[10%]" }, [
24
              h("div", { className: "h-3 w-3 bg-none rounded-full outline outline-[var(--primary)] mx-auto -outline-offset-[2px] z-50 outline-3" })
25
            ]),
26
            h("div", { className: "w-[70%] md:w-[80%] transition text-left text-50" }, desc)
27
          ]);
28
        }
29

30
        // Match entry: Date || Title
31
        const entryMatch = line.split("||");
32
        if (entryMatch.length >= 2) {
33
          const date = entryMatch[0].trim();
34
          const title = entryMatch[1].trim();
35
          return h("div", { className: "group btn-plain !block h-10 w-full rounded-lg hover:text-[initial] transition-all", style: "overflow:visible;"}, [
36
            h("div", { className: "flex flex-row justify-start items-center h-full" }, [
37
              // date
38
              h("div", { className: "w-[15%] md:w-[10%] transition text-sm text-right text-50" }, date),
39
              // dot and line
40
              h("div", { className: "w-[15%] md:w-[10%] relative dash-line h-full flex items-center" }, [
41
                h("div", { className: "transition-all mx-auto w-1 h-1 rounded group-hover:h-5 bg-[oklch(0.5_0.05_var(--hue))] group-hover:bg-[var(--primary)] outline outline-4 z-50 outline-[var(--card-bg)] group-hover:outline-[var(--btn-plain-bg-hover)] group-active:outline-[var(--btn-plain-bg-active)]" })
42
              ]),
43
              // title
44
              h("div", { className: "w-[70%] md:max-w-[75%] transition-all text-left font-bold text-75 group-hover:translate-x-1 group-hover:text-[var(--primary)] whitespace-nowrap overflow-ellipsis overflow-hidden" }, title)
45
            ])
46
          ]);
47
        }
48

49
        return h("div", { className: "text-red-500" }, `Invalid format: ${line}`);
50
      });
51

52
      data.hName = "div";
53
      data.hProperties = {
54
        className: "card-base timeline-container font-sans",
55
        style: "margin-bottom: 2rem; overflow: visible;",
56
      };
57
      data.hChildren = children;
58
    });
59
  };
60
}

1
:::timeline
2
[2026 : 这是一个时间轴演示！]
3
时间 || 事件
4
02-08 || 这里可以自定义
5
0208 || 随便写
6
这里也可以自定义 || 0208
7
[2025 : 可以有多个时间轴！]
8
时间 || 事件
9
02-08 || 这里可以自定义
10
0208 || 随便写
11
这里也可以自定义 || 0208
12
:::