MVP mermaid support in posts

chantastic · Jul 25, 2024 · 344cd62 · 344cd62
1 parent 909906b
commit 344cd62
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/chan.dev/src/components/post.astro b/chan.dev/src/components/post.astro
@@ -44,3 +44,13 @@ const {Content} = await entry.render()
 		)
 	}
 </>
+
+{
+	entry.data.mermaid && (
+		<script type="module">
+			import mermaid from
+			'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs'
+			mermaid.initialize()
+		</script>
+	)
+}
diff --git a/chan.dev/src/content/posts/_posts.ts b/chan.dev/src/content/posts/_posts.ts
@@ -75,6 +75,7 @@ export const collectionSchema = defineCollection({
 					image: z.string().url().optional(),
 				})
 				.optional(),
+			mermaid: z.boolean().optional(),
 		}),
 })
 

diff --git a/chan.dev/src/content/posts/workos-pkce.md b/chan.dev/src/content/posts/workos-pkce.md
@@ -1,6 +1,7 @@
 ---
 title: Securely Implement OAuth 2.0 for Public Clients with PKCE
 date: 2024-07-24
+mermaid: true
 ---
 
 <p class="bg-yellow-100 p-6 text-yellow-800 border-yellow-800 border-0 border-l-4" data-astro-source-file="/Users/chan/sites/chan.dev/src/components/post.astro" data-astro-source-loc="36:85">
@@ -35,7 +36,7 @@ The Client Secret method remains highly secure but is only suitable for confiden
 
 Before we dive into the implementation, let's visualize how PKCE augments the standard OAuth flow with an additional layer of verification, ensuring that only the original client can exchange the authorization code for tokens.
 
-```mermaid
+<pre class="mermaid not-prose">
 sequenceDiagram
     participant Client
     participant AuthServer
@@ -50,7 +51,7 @@ sequenceDiagram
     AuthServer->>Client: Access token
     Client->>ResourceServer: Request with access token
     ResourceServer->>Client: Protected resource
-```
+</pre>
 
 This diagram illustrates the step-by-step process of the PKCE flow, highlighting how the code verifier and code challenge work together to enhance security.