plausible, katex as package not from cdn

stared · stared · commit 8e0eb188c2fc · 2025-12-03T19:08:26.000+01:00
diff --git a/index.html b/index.html
@@ -4,28 +4,50 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Equations Explained Colorfully</title>
-    <meta name="description" content="Interactive mathematical equations with KaTeX rendering. Write equations in LaTeX and descriptions in Markdown, with color-coded terms that reveal their meaning on hover. Built with TypeScript." />
+    <meta
+      name="description"
+      content="Interactive mathematical equations with KaTeX rendering. Write equations in LaTeX and descriptions in Markdown, with color-coded terms that reveal their meaning on hover. Built with TypeScript."
+    />
 
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://p.migdal.pl/equations-explained-colorfully/" />
+    <meta
+      property="og:url"
+      content="https://p.migdal.pl/equations-explained-colorfully/"
+    />
     <meta property="og:title" content="Equations Explained Colorfully" />
-    <meta property="og:description" content="Interactive mathematical equations with KaTeX rendering. Write equations in LaTeX and descriptions in Markdown, with color-coded terms that reveal their meaning on hover. Built with TypeScript." />
-    <meta property="og:image" content="https://p.migdal.pl/equations-explained-colorfully/social-media-preview.png" />
+    <meta
+      property="og:description"
+      content="Interactive mathematical equations with KaTeX rendering. Write equations in LaTeX and descriptions in Markdown, with color-coded terms that reveal their meaning on hover. Built with TypeScript."
+    />
+    <meta
+      property="og:image"
+      content="https://p.migdal.pl/equations-explained-colorfully/social-media-preview.png"
+    />
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content="https://p.migdal.pl/equations-explained-colorfully/" />
+    <meta
+      property="twitter:url"
+      content="https://p.migdal.pl/equations-explained-colorfully/"
+    />
     <meta property="twitter:title" content="Equations Explained Colorfully" />
-    <meta property="twitter:description" content="Interactive mathematical equations with KaTeX rendering. Write equations in LaTeX and descriptions in Markdown, with color-coded terms that reveal their meaning on hover. Built with TypeScript." />
-    <meta property="twitter:image" content="https://p.migdal.pl/equations-explained-colorfully/social-media-preview.png" />
+    <meta
+      property="twitter:description"
+      content="Interactive mathematical equations with KaTeX rendering. Write equations in LaTeX and descriptions in Markdown, with color-coded terms that reveal their meaning on hover. Built with TypeScript."
+    />
+    <meta
+      property="twitter:image"
+      content="https://p.migdal.pl/equations-explained-colorfully/social-media-preview.png"
+    />
 
     <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
-
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.25/dist/katex.min.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="app"></div>
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "@vitejs/plugin-vue": "^6.0.2",
     "codejar": "^4.3.0",
     "katex": "^0.16.25",
+    "plausible-tracker": "^0.3.9",
     "prismjs": "^1.30.0",
     "tex2typst": "^0.4.1",
     "vue": "^3.5.25"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,14 @@
-import { createApp } from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import App from "./App.vue";
+import Plausible from "plausible-tracker";
+import "katex/dist/katex.min.css";
 
-createApp(App).mount('#app')
+// Initialize Plausible Analytics
+const { enableAutoPageviews } = Plausible({
+  domain: "p.migdal.pl",
+  apiHost: "https://plausible.io",
+});
+
+enableAutoPageviews();
+
+createApp(App).mount("#app");
