save

Author: The-Infinitys

public/next-loading.svg

@@ -12,8 +12,15 @@ import rehypeStringify from "rehype-stringify";
 import { unified } from "unified";
 import "highlight.js/styles/gradient-dark.css";
 import { ReactNode } from "react";
+import { PlaceholderValue } from "next/dist/shared/lib/get-img-props";
+
 const postsDirectory = path.join(process.cwd(), "public");
 
+// SVGファイルをBase64に変換してLoadingImageに代入
+const svgFilePath = path.join(process.cwd(), "public", "next-loading.svg");
+const LoadingImage =
+  "data:image/svg+xml," + fs.readFileSync(svgFilePath, "utf-8").toString();
+
 export function getArticleIndexes() {
   const years = fs.readdirSync(postsDirectory).filter((year) => {
     const yearPath = path.join(postsDirectory, year);
@@ -96,7 +103,7 @@ export async function toHTML(articles: Article[]) {
         .use(remarkGfm)
         .use(remarkRehype)
         .use(rehypePrettyCode, {
-          defaultLang:"plaintext",
+          defaultLang: "plaintext",
           theme: "github-dark-high-contrast",
           keepBackground: true,
         })
@@ -131,6 +138,7 @@ export function generateArticleButton(article: Article): ReactNode {
             width={300}
             height={200}
             objectFit="cover"
+            placeholder={LoadingImage as PlaceholderValue}
             className="article-thumbnail"
           />
         )}