merge with upsteam 1ad522ad69

mdsvex.config.ts

@@ -41,7 +41,8 @@ const remarkUraraFm =
           slug: slugs.slug(toString(node), false)
         })
       })
-      data.fm.toc = toc
+      if (toc.length > 0) data.fm.toc = toc
+      else data.fm.toc = false
     }
   }
 

src/lib/components/header.svelte

@@ -41,7 +41,8 @@
 
   if (browser)
     currentTheme =
-      localStorage.getItem('theme') ?? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+      localStorage.getItem('theme') ??
+      (window.matchMedia('(prefers-color-scheme: dark)').matches ? theme?.[1].name : theme[0].name ?? theme[0].name)
 </script>
 
 <svelte:head>

src/lib/components/post_toc.svelte

@@ -4,7 +4,6 @@
 
 <script lang="ts">
   import { onMount, onDestroy } from 'svelte'
-  import Tree from '$lib/components/post_toc_tree.svelte'
   export let toc: Urara.Post.Toc[]
 
   let intersecting: string[] = []
@@ -34,7 +33,7 @@
     // @ts-ignore: Cannot find name 'headingsObserver'
     if (typeof headingsObserver !== 'undefined') headingsObserver.disconnect()
     // @ts-ignore: Cannot find name 'articleObserver'
-    if (typeof headingsObserver !== 'undefined') articleObserver.disconnect()
+    if (typeof articleObserver !== 'undefined') articleObserver.disconnect()
   })
 
   $: if (intersecting.length > 0) bordered = intersecting
@@ -53,16 +52,28 @@
     aria-label="TableOfContent"
     dir="rtl"
     class="max-h-[calc(100vh-12rem)] overflow-y-hidden hover:overflow-y-auto">
-    <Tree
+    <ul dir="ltr" id="toc-list-root">
-      toc={toc.reduce(
+      {#each toc as { depth, title, slug }}
-        (acc, heading) => {
+        <li id={`toc-item-${slug}`} class="flex flex-col">
-          let parent = acc
+          <span
-          // @ts-ignore Type 'Toc | undefined' is not assignable to type 'Toc.' ts(2322)
+            dir="ltr"
-          while (parent.depth + 1 < heading.depth) parent = parent.children.at(-1)
+            on:click={() =>
-          parent.children = [...(parent.children ?? []), { ...heading, children: [] }]
+              // @ts-ignore Object is possibly 'null'. ts(2531)
-          return acc
+              document.getElementById(slug).scrollIntoView({ behavior: 'smooth' })}
-        },
+            id={`toc-link-${slug}`}
-        { depth: toc[0].depth - 1, children: [] }
+            class="cursor-pointer border-l-4 border-transparent transition-all hover:border-primary hover:bg-base-content hover:bg-opacity-10 active:bg-primary active:text-primary-content active:font-bold pr-4 {depth <=
-      )} />
+            2
+              ? 'py-3'
+              : 'py-2'}"
+            class:pl-4={depth <= 2}
+            class:pl-8={depth === 3}
+            class:pl-12={depth === 4}
+            class:pl-16={depth === 5}
+            class:pl-20={depth === 6}>
+            {title}
+          </span>
+        </li>
+      {/each}
+    </ul>
   </nav>
 </aside>

src/lib/components/post_toc_tree.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  export let toc: Urara.Post.Toc
-  const { title, slug, depth, children } = toc
-</script>
-
-{#if title}
-  <span
-    dir="ltr"
-    on:click={() =>
-      // @ts-ignore Object is possibly 'null'. ts(2531)
-      document.getElementById(slug).scrollIntoView({ behavior: 'smooth' })}
-    id={`toc-link-${slug}`}
-    class="cursor-pointer border-l-4 border-transparent transition-all hover:border-primary hover:bg-base-content hover:bg-opacity-10 active:bg-primary active:text-primary-content active:font-bold pr-4 {depth <=
-    2
-      ? 'py-3'
-      : 'py-2'}"
-    class:pl-4={depth <= 2}
-    class:pl-8={depth === 3}
-    class:pl-12={depth === 4}
-    class:pl-16={depth === 5}
-    class:pl-20={depth === 6}>
-    {title}
-  </span>
-{/if}
-{#if children}
-  <ul dir="ltr" id={`toc-list-${slug ?? 'root'}`}>
-    {#each children as child}
-      <li id={`toc-item-${child.slug}`} class="flex flex-col">
-        <svelte:self toc={child} />
-      </li>
-    {/each}
-  </ul>
-{/if}

src/lib/config/general.ts

@@ -2,120 +2,52 @@ import type { ThemeConfig, HeadConfig, HeaderConfig, FooterConfig, DateConfig, F
 
 export const theme: ThemeConfig = [
   {
-    name: 'lemonade',
+    name: 'garden',
     text: 'Light'
   },
   {
-    name: 'night',
+    name: 'dracula',
     text: 'Dark'
   },
-  {
-    name: 'cupcake',
-    text: 'Cupcake'
-  },
-  {
-    name: 'bumblebee',
-    text: 'Bumblebee'
-  },
-  {
-    name: 'emerald',
-    text: 'Emerald'
-  },
-  {
-    name: 'corporate',
-    text: 'Corporate'
-  },
   {
     name: 'valentine',
     text: 'Valentine'
   },
+  {
+    name: 'aqua',
+    text: 'Aqua'
+  },
   {
     name: 'synthwave',
     text: 'Synthwave'
   },
   {
-    name: 'retro',
+    name: 'night',
-    text: 'Retro'
+    text: 'Night'
-  },
-  {
-    name: 'cyberpunk',
-    text: 'Cyberpunk'
-  },
-  {
-    name: 'halloween',
-    text: 'Halloween'
-  },
-  {
-    name: 'garden',
-    text: 'Garden'
-  },
-  {
-    name: 'forest',
-    text: 'Forest'
-  },
-  {
-    name: 'aqua',
-    text: 'Aqua'
   },
   {
     name: 'lofi',
     text: 'Lo-Fi'
   },
   {
-    name: 'pastel',
+    name: 'lemonade',
-    text: 'Pastel'
+    text: 'Lemonade'
   },
   {
-    name: 'fantasy',
+    name: 'cupcake',
-    text: 'Fantasy'
+    text: 'Cupcake'
-  },
-  {
-    name: 'wirefream',
-    text: 'Wireframe'
-  },
-  {
-    name: 'black',
-    text: 'Black'
-  },
-  {
-    name: 'luxury',
-    text: 'Luxury'
-  },
-  {
-    name: 'dracula',
-    text: 'Dracula'
   },
   {
     name: 'cmyk',
     text: 'CMYK'
   },
   {
-    name: 'autumn',
+    name: 'retro',
-    text: 'Autumn'
+    text: 'Retro'
   },
   {
-    name: 'business',
+    name: 'black',
-    text: 'Business'
+    text: 'Black'
-  },
-  {
-    name: 'acid',
-    text: 'Acid'
-  },
-  // {
-  //   name: 'lemonade',
-  //   text: 'Lemonade'
-  // },
-  // {
-  //   name: 'night',
-  //   text: '🌃 Night'
-  // },
-  {
-    name: 'coffee',
-    text: 'Coffee'
-  },
-  {
-    name: 'winter',
-    text: 'Winter'
   }
 ]
 
@@ -184,26 +116,6 @@ export const footer: FooterConfig = {
 }
 
 export const date: DateConfig = {
-  // toPublishedString: {
-  //   locales: 'en-US',
-  //   options: {
-  //     year: 'numeric',
-  //     weekday: 'short',
-  //     month: 'short',
-  //     day: 'numeric',
-  //     timeZone: 'Asia/Shanghai'
-  //   }
-  // },
-  // toUpdatedString: {
-  //   locales: 'en-US',
-  //   options: {
-  //     year: 'numeric',
-  //     weekday: 'short',
-  //     month: 'short',
-  //     day: 'numeric',
-  //     timeZone: 'Asia/Shanghai'
-  //   }
-  // },
   locales: 'en-US',
   options: {
     year: 'numeric',

src/routes/+layout.ts

@@ -1,5 +1,9 @@
 import type { LayoutLoad } from './$types'
 export const prerender = true
+export const trailingSlash =
+  !Object.keys(process.env).some(key => ['VERCEL', 'CF_PAGES', 'NETLIFY'].includes(key)) && process.env.ADAPTER !== 'node'
+    ? 'always'
+    : undefined
 export const load: LayoutLoad = async ({ url, fetch }) => ({
   path: url.pathname,
   res: await fetch('/posts.json').then(res => res.json())

svelte.config.ts

@@ -8,7 +8,6 @@ import adapterStatic from '@sveltejs/adapter-static'
 import { mdsvex } from 'mdsvex'
 import mdsvexConfig from './mdsvex.config.js'
 import preprocess from 'svelte-preprocess'
-import { prerendered } from '$service-worker'
 
 const defineConfig = (config: Config) => config
 

tailwind.config.ts

@@ -1,3 +1,4 @@
+import { theme } from './src/lib/config/general'
 // @ts-ignore Could not find a declaration file for module '@tailwindcss/typography'.
 import typography from '@tailwindcss/typography'
 // @ts-ignore Could not find a declaration file for module 'daisyui'.
@@ -5,41 +6,7 @@ import daisyui from 'daisyui'
 
 export default {
   content: ['./src/**/*.{html,md,js,svelte,ts}'],
-  theme: {
+  theme: { extend: {} },
-    extend: {}
-  },
   plugins: [typography, daisyui],
-  daisyui: {
+  daisyui: { themes: theme.map(({ name }) => name) }
-    themes: [
-      'light',
-      'dark',
-      'cupcake',
-      'bumblebee',
-      'emerald',
-      'corporate',
-      'synthwave',
-      'retro',
-      'cyberpunk',
-      'valentine',
-      'halloween',
-      'garden',
-      'forest',
-      'aqua',
-      'lofi',
-      'pastel',
-      'fantasy',
-      'wireframe',
-      'black',
-      'luxury',
-      'dracula',
-      'cmyk',
-      'autumn',
-      'business',
-      'acid',
-      'lemonade',
-      'night',
-      'coffee',
-      'winter'
-    ]
-  }
 }

vite.config.ts

@@ -43,7 +43,11 @@ export default defineConfig({
     SvelteKitPWA({
       registerType: 'autoUpdate',
       manifest: false,
-      scope: '/'
+      scope: '/',
+      workbox: {
+        globPatterns: ['posts.json', '**/*.{js,css,html,svg,ico,png,webp,avif}'],
+        globIgnores: ['**/sw*', '**/workbox-*']
+      }
     })
   ]
 })