ブログを​作り直した

16 collapsed lines
1
import { rehypeHeadingIds } from "@astrojs/markdown-remark";
2
import mdx from "@astrojs/mdx";
3
import react from "@astrojs/react";
4
import sitemap from "@astrojs/sitemap";
5
import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
6
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
7
import tailwindcss from "@tailwindcss/vite";
8
import { defineConfig } from "astro/config";
9
import expressiveCode from "astro-expressive-code";
10
import icon from "astro-icon";
11
import rehypeDocument from "rehype-document";
12
import rehypeExternalLinks from "rehype-external-links";
13
import rehypeKatex from "rehype-katex";
14
import rehypePrettyCode from "rehype-pretty-code";
15
import remarkEmoji from "remark-emoji";
16
import remarkMath from "remark-math";
17
import swup from "@swup/astro";
3 collapsed lines
18
import pagefind from "astro-pagefind";
19
import rehypeAutolinkHeadings from "rehype-autolink-headings";
20

21
export default defineConfig({
22
  site: "https://blog.p1at.dev",
23
  integrations: [
47 collapsed lines
24
    expressiveCode({
25
      themes: ["github-light", "github-dark"],
26
      plugins: [pluginCollapsibleSections(), pluginLineNumbers()],
27
      useDarkModeMediaQuery: false,
28
      themeCssSelector: (theme) => `[data-theme="${theme.name.split("-")[1]}"]`,
29
      defaultProps: {
30
        wrap: true,
31
        collapseStyle: "collapsible-auto",
32
        overridesByLang: {
33
          "ansi,bat,bash,batch,cmd,console,powershell,ps,ps1,psd1,psm1,sh,shell,shellscript,shellsession,text,zsh":
34
            {
35
              showLineNumbers: false,
36
            },
37
        },
38
      },
39
      styleOverrides: {
40
        codeFontSize: "0.75rem",
41
        borderColor: "var(--border)",
42
        codeFontFamily: "var(--font-mono)",
43
        codeBackground:
44
          "color-mix(in oklab, var(--secondary) 25%, transparent)",
45
        frames: {
46
          editorActiveTabForeground: "var(--muted-foreground)",
47
          editorActiveTabBackground:
48
            "color-mix(in oklab, var(--secondary) 25%, transparent)",
49
          editorActiveTabIndicatorBottomColor: "transparent",
50
          editorActiveTabIndicatorTopColor: "transparent",
51
          editorTabBorderRadius: "0",
52
          editorTabBarBackground: "transparent",
53
          editorTabBarBorderBottomColor: "transparent",
54
          frameBoxShadowCssValue: "none",
55
          terminalBackground:
56
            "color-mix(in oklab, var(--secondary) 25%, transparent)",
57
          terminalTitlebarBackground: "transparent",
58
          terminalTitlebarBorderBottomColor: "transparent",
59
          terminalTitlebarForeground: "var(--muted-foreground)",
60
        },
61
        lineNumbers: {
62
          foreground: "var(--muted-foreground)",
63
        },
64
        uiFontFamily: "var(--font-sans)",
65
      },
66
    }),
67
    mdx(),
68
    react(),
69
    sitemap(),
70
    icon(),
71
    swup({
72
      accessibility: true,
73
      preload: true,
74
      smoothScrolling: true,
75
      updateHead: true,
76
      cache: true,
77
      progress: true,
78
      containers: ["main", "#mobile-header"],
79
    }),
80
    pagefind(),
81
  ],
49 collapsed lines
82
  vite: {
83
    plugins: [tailwindcss()],
84
  },
85
  server: {
86
    port: 1234,
87
    host: true,
88
  },
89
  devToolbar: {
90
    enabled: false,
91
  },
92
  markdown: {
93
    syntaxHighlight: false,
94
    rehypePlugins: [
95
      [
96
        rehypeDocument,
97
        {
98
          css: "https://cdn.jsdelivr.net/npm/katex@0.16.21/dist/katex.min.css",
99
        },
100
      ],
101
      [
102
        rehypeExternalLinks,
103
        {
104
          target: "_blank",
105
          rel: ["nofollow", "noreferrer", "noopener"],
106
        },
107
      ],
108
      rehypeHeadingIds,
109
      [
110
        rehypeAutolinkHeadings,
111
        {
112
          behavior: "wrap",
113
        },
114
      ],
115
      rehypeKatex,
116
      [
117
        rehypePrettyCode,
118
        {
119
          theme: {
120
            light: "github-light",
121
            dark: "github-dark",
122
          },
123
        },
124
      ],
125
    ],
126
    remarkPlugins: [remarkMath, remarkEmoji],
127
  },
128
  build: {
129
    format: "file",
130
  },
131
});

1
.swup-progress-bar {
2
  height: 2px;
3
  background-color: var(--color-primary);
4
}

13 collapsed lines
1
import type { APIContext, APIRoute } from "astro";
2
import { getAllPosts } from "@/lib/data-utils";
3
import { SITE } from "@/consts";
4
import { formatDate } from "@/lib/utils";
5

6
const postUrl = (baseUrl: string, postId: string) => {
7
  return `${baseUrl}/blog/${postId}/`;
8
};
9

10
const linkText = (text: string, href: string) => {
11
  return `[${text}](${href})`;
12
};
13

14
const llmsTxt = (
15
  context: APIContext,
16
  posts: Awaited<ReturnType<typeof getAllPosts>>,
17
) => {
18
  const baseUrl = context.site?.toString() ?? SITE.href;
19
  const content = `# ${SITE.title}
9 collapsed lines
20
URL: ${baseUrl}
21

22
> ${SITE.description}
23

24
You can access the raw markdown text by adding \`.txt\` to the URL of any blog post, e.g. ${baseUrl}/blog/hello-world.txt
25

26
## Posts
27
${posts.length} posts available:
28

29
`;
30
  const contentWithLinks = posts.reduce((acc, post) => {
31
    const link = `- ${linkText(post.data.title, postUrl(baseUrl, post.id))}: ${post.data.description} (${formatDate(post.data.date)})`;
32

33
    return acc + link + "\n";
34
  }, content);
35

36
  return contentWithLinks;
37
};
38

39
export const GET: APIRoute = async (context: APIContext) => {
40
  const posts = await getAllPosts();
41

42
  const txt = llmsTxt(context, posts);
43

44
  return new Response(txt, {
45
    headers: {
46
      "Content-Type": "text/markdown; charset=utf-8",
47
    },
48
  });
49
};

1
@reference "./global.css";
2

3
pre:is([data-language="bash"], [data-language="zsh"], [data-language="sh"])
4
  div.ec-line
5
  div.code:not(:has(> .indent:first-child)) {
6
  &::before {
7
    content: "❯ ";
8
  }
9
}
10

11
pre:is([data-language="powershell"])
12
  div.ec-line
13
  div.code:not(:has(> .indent:first-child)) {
14
  &::before {
15
    content: "PS > ";
16
  }
17
}