個人的な技術ブログのソースコードです。
Next.jsとTypeScriptにより実装されています。
Next.jsは、Reactベースのフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）をサポートしています。 これによりパフォーマンスやSEO向上を図ることができます。
また、言語にはよりモダンなTypeScriptを採用しています。これは自身の学習のためです。サイトの性能には影響しません。
SSG(Static Site Generation)により静的な記事ページを生成しています。
SSGはサイトのビルド時にあらかじめHTMLファイルを生成し、これらを静的ファイルとして配信する方法です。これにより高速で安定したページリロードを可能にします。
Markdownパーサーにより、Markdownで書かれた記事をHTMLに変換しています。 Markdownパーサーの実装は以下のように行われています。
export const markdownToHtml = async (markdownContent: string): Promise<string> => {
const result = unified()
.use(remarkParse) // Parse markdown.
.use(remarkGfm) // Support GFM (tables, autolinks, tasklists, strikethrough).
.use(remarkRehype) // Turn it into HTML.
.use(rehypeSlug)
.use(rehypeCodeTitles) // add code block titles
.use(rehypePrism) // syntax hightlighting
.use(rehypeStringify) // Serialize HTML.
.processSync(markdownContent)
.toString();
return result;
};以下に例を示します。
tocbot を用いて自動追尾目次（上図参照）を実装しています。
上記のMarddownパーサーでは、HTMLに変換した後にHTML解析を行ってPrism.jsによるシンタックスハイライティングを行っています。
Prism.jsだけで対応できない行ハイライトやdiffのデザインは独自に実装しています。
SSR(Server Side Rendering)によりリアルタイムで動的なサイトマップ生成を行います。 サイトマップは https://almond-latte.com/sitemap.xml から取得できます。
ブログ記事のタイトル下にあるタグをクリックすることで同じタグがついた記事を検索できます。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent