Hello, world!
2023-11-12
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とか?