Merge pull request #61 from kseki/feature/add-diagrams

feat: Mermaid.jsのサポートを追加

assets/scss/custom.scss

@@ -63,3 +63,12 @@
     }
   }
 }
+
+// For Mermaid diagrams
+.article-content {
+  pre.mermaid {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}

config/_default/params.toml

@@ -14,7 +14,7 @@ customText = ""
 
 [dateFormat]
 published = "2006-01-02"
-lastUpdated = "2006-01-02 15:04 MST"
+lastUpdated = "2006-01-02"
 
 [sidebar]
 #emoji = "🍥"

content/post/convenient-multi-project-development-with-local-domains-and-nginx/index.md

@@ -10,6 +10,7 @@ keywords:
     - リバースプロキシ
 slug:
 date: 2024-08-13T16:14:17+09:00
+lastmod: 2024-08-21
 image: nginx.webp
 categories:
     - 開発
@@ -24,6 +25,17 @@ draft: false
 
 複数のプロジェクトを同時に開発する際に、Nginxをリバースプロキシとして使用し、hostsファイルでローカルドメインを設定する方法を紹介します。
 
+```mermaid
+graph TD;
+    A[ブラウザ] -->|http://klog.local| B[Nginx]
+    A -->|http://admin.hoge.local| B
+    A -->|http://user.hoge.local| B
+    B -->|http://localhost:1313| C[klogプロジェクト]
+    B -->|http://localhost:3000| D[admin.hogeプロジェクト]
+    B -->|http://localhost:3001| E[user.hogeプロジェクト]
+
+```
+
 ## 複数プロジェクト開発の問題
 
 ローカル開発環境では通常、ブラウザに `localhost:ポート番号` を入力してアクセスします。しかし、複数のプロジェクトを開発していると、ブラウザのアドレスバーに `localhost` と入力した際に他のプロジェクトのパスがサジェストされてしまい、煩わしいことがあります。

layouts/_default/_markup/render-codeblock-mermaid.html

@@ -0,0 +1,4 @@
+<pre class="mermaid">
+  {{- .Inner | safeHTML }}
+</pre>
+{{ .Page.Store.Set "hasMermaid" true }}

layouts/partials/footer/custom.html

@@ -0,0 +1,7 @@
+<!-- For Mermaid diagrams -->
+{{ if .Store.Get "hasMermaid" }}
+<script type="module">
+  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.esm.min.mjs';
+  mermaid.initialize({startOnLoad: true});
+</script>
+{{ end }}