2023-11-12

SveltekitとdaisyUIでブログサイトを作った

Build A SvelteKit Markdown Blogを見ながら、SveltekitとdaisyUIでブログサイトを作ってみた。 Gitlabのリポジトリと Vercel Cloudflare Pagesをつなげてあって、Markdownで書いてpushすると公開される感じにできて便利。

コンテンツが少ないこともあって、何もしなくてもLighthouseはオールグリーン。つよい。

なるほどポイント

記事の一覧を返すAPIの処理で、Omitでもともとのメタデータに入ってたslugを捨てて、生成したslugを結合しつつsatisfiesでPost型であることを保証してるところ。 記事ページで使うためにPost型としてはslugを持っておきつつ、frontmatterに書いてあるslugは無視するという動きが実現できててなるほどねとなった。

export type Post = {
    title: string
    slug: string
    description: string
    date: string
    published: boolean
};

----

const slug = path.split('/').at(-1)?.replace('.md', '');
if (file && typeof file === 'object' && 'metadata' in file && slug) {
    const metadata = file.metadata as Omit<Post, 'slug'>;
    const post = {...metadata, slug} satisfies Post;
    if (post.published) {
        posts.push(post);
    }
}

ハマりポイント

mdsvexでコードブロックのシンタックスハイライトをするのにどうしたらいいのか書いてなくて悩んだ。 参考にしたサイトだと別のsyntax highligherを導入してるけどそこまではいらない、でも公式Docを見ても “import the CSS file for a Prism theme of your choosing”としか書いてない。

正解は「PrismJSの公式からCSSだけダウンロードしてきて、記事ページでimport」。 JSは要らないのでnpm installとかはしなくてよい。

<style>
    /*
      src/routes/posts/[slug]/+page.svelte
      から
      src/prism.css
      を読むなら
    */
    @import "../../../prism.css";
</style>

ToDo

• 明るいテーマと暗いテーマの切り替え
• 記事一覧ページ with ページング
• 記事ページの画像読み込み最適化？lazy loadingとか？