Improve performance of the page by enabling prefetchig and moving scr…

…ipt tag to the body
Die-KoMa · Mar 1, 2024 · 562ce3e · 562ce3e
1 parent 8ea216c
commit 562ce3e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 35 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -28,6 +28,9 @@ function rehypeExternalLinksPlugin() {
 
 // https://astro.build/config
 export default defineConfig({
+  prefetch: {
+    prefetchAll: true,
+  },
   integrations: [mdx(), tailwind(), compress()],
   markdown: {
     remarkPlugins: [setDefaultLayout],

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -22,45 +22,44 @@ import ThemeToggle from '@components/ThemeToggle.astro'
   <meta name="generator" content={Astro.generator} />
   <title>KoMa - {title}</title>
 
-  <script is:inline>
-    {
-      const theme = localStorage.getItem('theme')
-      if (theme != null) {
-        document.documentElement.classList.remove('no-theme')
-        if (theme == 'dark') {
-          document.documentElement.classList.add('dark')
+  <body class="grid min-h-dvh grid-rows-[auto_1fr] bg-slate-100 dark:bg-slate-900">
+    <script is:inline>
+      {
+        const theme = localStorage.getItem('theme')
+        if (theme != null) {
+          document.documentElement.classList.remove('no-theme')
+          if (theme == 'dark') {
+            document.documentElement.classList.add('dark')
+          }
         }
       }
-    }
-    const toggleTheme = () => {
-      let currentDarkTheme
-      if (document.documentElement.classList.contains('no-theme')) {
-        currentDarkTheme = window.matchMedia('(prefers-color-scheme: dark').matches
-        document.documentElement.classList.remove('no-theme')
-      } else {
-        currentDarkTheme = document.documentElement.classList.contains('dark')
-      }
-      if (currentDarkTheme) {
-        document.documentElement.classList.remove('dark')
-        localStorage.setItem('theme', 'light')
-      } else {
-        document.documentElement.classList.add('dark')
-        localStorage.setItem('theme', 'dark')
-        document.documentElement.classList.remove('no-theme')
+      const toggleTheme = () => {
+        let currentDarkTheme
+        if (document.documentElement.classList.contains('no-theme')) {
+          currentDarkTheme = window.matchMedia('(prefers-color-scheme: dark').matches
+          document.documentElement.classList.remove('no-theme')
+        } else {
+          currentDarkTheme = document.documentElement.classList.contains('dark')
+        }
+        if (currentDarkTheme) {
+          document.documentElement.classList.remove('dark')
+          localStorage.setItem('theme', 'light')
+        } else {
+          document.documentElement.classList.add('dark')
+          localStorage.setItem('theme', 'dark')
+          document.documentElement.classList.remove('no-theme')
+        }
       }
-    }
-    const toggleMenu = () => {
-      if (menu.dataset.menu == 'open') {
-        menu.dataset.menu = ''
-        menuToggle.ariaExpanded = 'false'
-      } else {
-        menu.dataset.menu = 'open'
-        menuToggle.ariaExpanded = 'true'
+      const toggleMenu = () => {
+        if (menu.dataset.menu == 'open') {
+          menu.dataset.menu = ''
+          menuToggle.ariaExpanded = 'false'
+        } else {
+          menu.dataset.menu = 'open'
+          menuToggle.ariaExpanded = 'true'
+        }
       }
-    }
-  </script>
-
-  <body class="grid min-h-dvh grid-rows-[auto_1fr] bg-slate-100 dark:bg-slate-900">
+    </script>
     <div class="fixed inset-x-0 z-30 h-14 print:hidden">
       <header
         class="flex h-fit border-t-8 border-teal-600 bg-gradient-to-tr from-slate-200 to-cyan-100 shadow shadow-slate-300 dark:from-slate-800 dark:to-cyan-900 dark:shadow-slate-900"