Updated post / added support for diagrams

app/writing/using-tailscale-to-bypass-steam-families-restrictions/page.mdx

@@ -37,6 +37,20 @@ Devices connected within your Tailscale network are part of a tailnet, we'll be
 
 Any device in your tailnet can be configured to act as an [exit node](https://tailscale.com/kb/1103/exit-nodes), which means all traffic will be routed through that node. For example, let's say Bob wants to allow Alice to route all her traffic through Bob's tailnet.
 
+```mermaid
+graph TD;
+subgraph AA [Bob's Tailnet]
+A[Bob];
+B[Alice];
+end
+subgraph BB [Internet]
+E[Steam];
+end
+Z[Exit Node];
+AA --> Z;
+Z --> E;
+```
+
 Bob simply [configures a device in the tailnet as an exit node](https://tailscale.com/kb/1103/exit-nodes#configure-an-exit-node), and upon joining Bob's tailnet, Alice can route [all her traffic through Bob's exit node](https://tailscale.com/kb/1103/exit-nodes#use-the-exit-node).
 
 Websites and apps that Alice visits will now appear to come from Bob's IP address, for as long as she is using Bob's tailnet and exit node.

components/common/Header.tsx

@@ -120,8 +120,11 @@ export function Header() {
         updateStyles()
 
         const opts: AddEventListenerOptions & EventListenerOptions = {passive: true}
-        window.addEventListener('scroll', updateStyles, opts)
-        window.addEventListener('resize', updateStyles)
+
+        if (isHomePage) {
+            window.addEventListener('scroll', updateStyles, opts)
+            window.addEventListener('resize', updateStyles)
+        }
 
         return () => {
             window.removeEventListener('scroll', updateStyles, opts)

next.config.mjs

@@ -1,6 +1,7 @@
 import nextMDX from '@next/mdx'
 import remarkGfm from 'remark-gfm'
 import rehypePrism from '@mapbox/rehype-prism'
+import {remarkMermaid} from '@theguild/remark-mermaid'
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -18,7 +19,7 @@ const nextConfig = {
 const withMDX = nextMDX({
     extension: /\.mdx?$/,
     options: {
-        remarkPlugins: [remarkGfm],
+        remarkPlugins: [remarkGfm, remarkMermaid],
         rehypePlugins: [rehypePrism],
     }
 })

package.json

@@ -18,6 +18,7 @@
     "@supabase/auth-helpers-nextjs": "^0.7.3",
     "@supabase/supabase-js": "^2.27.0",
     "@tailwindcss/typography": "^0.5.8",
+    "@theguild/remark-mermaid": "^0.1.2",
     "@types/mdx": "^2.0.5",
     "@types/node": "^18.11.18",
     "@types/nprogress": "^0.2.0",