feat: latex and umami analytics support (#162)

* feat: added latex render support * fix: eliminate warnings * feat: support umami analytics * fix: eliminate warnings * pref: make latex support to be optional
moeyua · Oct 17, 2024 · 0961f80 · 0961f80
1 parent fde5c13
commit 0961f80
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 3 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -5,23 +5,36 @@ import { defineConfig } from 'astro/config'
 import robotsTxt from 'astro-robots-txt'
 import UnoCSS from 'unocss/astro'
 import { themeConfig } from './src/.config'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
 
 // https://astro.build/config
 export default defineConfig({
   site: themeConfig.site.website,
   prefetch: true,
   base: '/',
   markdown: {
-    remarkPlugins: [],
-    rehypePlugins: [],
+    remarkPlugins: [
+      remarkMath,
+    ],
+    rehypePlugins: [
+      rehypeKatex,
+    ],
     shikiConfig: {
       theme: 'dracula',
       wrap: true,
     },
   },
   integrations: [
     UnoCSS({ injectReset: true }),
-    mdx(),
+    mdx({
+      remarkPlugins: [
+        remarkMath,
+      ],
+      rehypePlugins: [
+        rehypeKatex,
+      ],
+    }),
     robotsTxt(),
     sitemap(),
     swup({

diff --git a/package.json b/package.json
@@ -26,6 +26,9 @@
     "astro-robots-txt": "^1.0.0",
     "astro-seo": "^0.8.4",
     "giscus": "^1.5.0",
+    "katex": "^0.16.11",
+    "rehype-katex": "^7.0.1",
+    "remark-math": "^6.0.0",
     "typescript": "~5.5.4",
     "vite": "^5.4.6"
   },

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/.config/default.ts b/src/.config/default.ts
@@ -84,5 +84,9 @@ export const defaultConfig: ThemeConfig = {
   },
   analytics: {
     googleAnalyticsId: '',
+    umamiAnalyticsId: '',
+  },
+  latex: {
+    katex: false,
   },
 }
diff --git a/src/components/Analytics.astro b/src/components/Analytics.astro
@@ -1,9 +1,14 @@
 ---
 import GoogleAnalytics from '~/components/analytics/GoogleAnalytics.astro'
+import UmamiAnalytics from '~/components/analytics/UmamiAnalytics.astro'
 import { themeConfig } from '~/.config'
 
 const PUBLIC_GOOGLE_ANALYTICS_ID = import.meta.env.PUBLIC_GOOGLE_ANALYTICS_ID
 const googleAnalyticsId = themeConfig.analytics.googleAnalyticsId || PUBLIC_GOOGLE_ANALYTICS_ID
+
+const PUBLIC_UMAMI_ANALYTICS_ID = import.meta.env.PUBLIC_UMAMI_ANALYTICS_ID
+const umamiAnalyticsId = themeConfig.analytics.umamiAnalyticsId || PUBLIC_UMAMI_ANALYTICS_ID
 ---
 
 {googleAnalyticsId && <GoogleAnalytics id={googleAnalyticsId} />}
+{umamiAnalyticsId && <UmamiAnalytics id={umamiAnalyticsId} />}
diff --git a/src/components/LaTeX.astro b/src/components/LaTeX.astro
@@ -0,0 +1,17 @@
+---
+import { themeConfig } from '~/.config'
+
+const { latex } = themeConfig
+
+const katex = latex.katex
+---
+
+{katex && (
+  <>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css" crossorigin="anonymous">
+    <script is:inline defer src="https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.js" crossorigin="anonymous"></script>
+    <script is:inline defer src="https://cdn.jsdelivr.net/npm/katex@latest/dist/contrib/auto-render.min.js" crossorigin="anonymous"
+        onload="renderMathInElement(document.body);"></script>
+  </>
+)}
+
diff --git a/src/components/analytics/UmamiAnalytics.astro b/src/components/analytics/UmamiAnalytics.astro
@@ -0,0 +1,10 @@
+---
+interface Props {
+  id: string
+}
+
+const { id } = Astro.props
+---
+
+<!-- Global site tag (script.js) - Umami Analytics -->
+<script is:inline async defer src='https://analytics.umami.is/script.js' data-website-id={id}></script>
diff --git a/src/env.d.ts b/src/env.d.ts
@@ -8,6 +8,7 @@ declare namespace App {
 
 interface ImportMetaEnv {
   readonly PUBLIC_GOOGLE_ANALYTICS_ID: string
+  readonly PUBLIC_UMAMI_ANALYTICS_ID: string
 }
 
 interface ImportMeta {

diff --git a/src/layouts/LayoutDefault.astro b/src/layouts/LayoutDefault.astro
@@ -4,6 +4,7 @@ import SiteFooter from '~/components/SiteFooter.astro'
 import SiteNavigation from '~/components/SiteNavigation.astro'
 import SiteTitle from '~/components/SiteTitle.astro'
 import SiteSeo from '~/components/SiteSeo.astro'
+import LaTeX from '~/components/LaTeX.astro'
 import Analytics from '~/components/Analytics.astro'
 import '~/styles/global.css'
 
@@ -14,6 +15,7 @@ const dark = themeConfig.appearance.theme === 'dark'
 <html lang={lang} class:list={['animation-prepared', { dark }]}>
   <head>
     <slot name="seo"> <SiteSeo /> </slot>
+    <LaTeX />
     <Analytics />
   </head>
 

diff --git a/src/types/themeConfig.ts b/src/types/themeConfig.ts
@@ -21,6 +21,7 @@ export interface ThemeConfig {
   comment: Partial<ConfigComment>
   rss: ConfigRSS
   analytics: ConfigAnalytics
+  latex: ConfigLaTeX
 }
 
 export type UserConfig = DeepPartial<ThemeConfig>
@@ -67,6 +68,11 @@ export interface ConfigRSS {
 export interface ConfigAnalytics {
   /** google analytics */
   googleAnalyticsId: string
+  umamiAnalyticsId: string
+}
+
+export interface ConfigLaTeX {
+  katex: boolean
 }
 
 interface Colors {