blog/astro.config.ts at main · kq5y/blog · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import partytown from "@astrojs/partytown";
import solid from "@astrojs/solid-js";
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
import playformCompress from "@playform/compress";
import { defineConfig } from "astro/config";
import rehypeExpressiveCode from "rehype-expressive-code";
import rehypeExternalLinks from "rehype-external-links";
import rehypeKatex from "rehype-katex";
import rehypeMermaidCtm from "rehype-mermaid-ctm";
import rehypeRaw from "rehype-raw";
import remarkLinkCardCtm from "remark-link-card-ctm";
import remarkMath from "remark-math";

import { METADATA } from "./src/const";
import fontOptimizer from "./src/integrations/font-optimizer";
import { remarkCharCount } from "./src/integrations/remark-char-count";

export default defineConfig({
  site: METADATA.url,
  output: "static",
  build: {
    inlineStylesheets: "auto",
    assets: "assets",
  },
  integrations: [
    solid(),
    fontOptimizer(),
    partytown(),
    playformCompress({
      CSS: true,
      HTML: true,
      Image: false,
      JavaScript: true,
      JSON: true,
      SVG: true,
    }),
  ],
  markdown: {
    remarkPlugins: [
      remarkCharCount,
      [
        remarkLinkCardCtm,
        {
          shortenUrl: true,
          imgAsyncLazy: true,
          fallbackImageSrc: "/assets/linkcard-placeholder.avif",
          fallbackImageAlt: "No Image",
        },
      ],
      remarkMath,
    ],
    rehypePlugins: [
      rehypeKatex,
      [
        rehypeMermaidCtm,
        {
          outputType: "img-svg",
          imgAsyncLazy: true,
          mermaidConfig: {
            theme: "default",
            themeVariables: {
              background: "#eef5fb",
              mainBkg: "#eef5fb",
              nodeBkg: "#e2ecf5",
              nodeBorder: "#e2e8f0",
              nodeTextColor: "#334155",
              textColor: "#334155",
              labelColor: "#475569",
              secondaryLabelColor: "#64748b",
              noteTextColor: "#94a3b8",
              edgeColor: "#0f766e",
              lineColor: "#0f766e",
              accentColor: "#0f766e",
              clusterBkg: "#eef5fb",
              clusterBorder: "#0f766e",
            },
          },
        },
      ],
      [
        rehypeExpressiveCode,
        {
          themes: ["github-light"],
          plugins: [pluginLineNumbers()],
          defaultLocale: "ja-JP",
        },
      ],
      rehypeRaw,
      [
        rehypeExternalLinks,
        { target: "_blank", rel: ["noopener", "noreferrer"] },
      ],
    ],
    remarkRehype: {
      footnoteLabel: "脚注",
    },
    syntaxHighlight: false,
  },
  prefetch: true,
  vite: {
    build: {
      rollupOptions: {
        output: {
          entryFileNames: (chunkInfo) => {
            const name = chunkInfo.name.split(".")[0];
            return `assets/${name}.[hash].js`;
          },
        },
      },
    },
  },
  image: {
    domains: ["ogp.kq5.jp", "res.cloudinary.com"],
  },
});