feat!: migrate to UnoCSS and Shiki highlighter

Author: alexanderdavide

.devcontainer/devcontainer.json

@@ -3,7 +3,7 @@
   "build": {
     "dockerfile": "./vscode-dev-containers/containers/typescript-node/.devcontainer/Dockerfile",
     "args": {
-      "VARIANT": "16-bullseye"
+      "VARIANT": "20-bullseye"
     }
   },
   "customizations": {
@@ -22,7 +22,6 @@
         "shan.code-settings-sync",
         "sleistner.vscode-fileutils",
         "pustelto.bracketeer",
-        "voorjaar.windicss-intellisense",
         "vscode-icons-team.vscode-icons",
         "vue.volar",
         "wakatime.vscode-wakatime",

layouts/cover.vue

@@ -27,17 +27,15 @@ const {
   coverAuthor: coverAuthorTransferred,
   coverAuthorUrl: coverAuthorUrlTransferred,
   coverBackgroundUrl,
-} = withDefaults(
-  defineProps<{
-    coverAuthor?: string | string[];
-    coverAuthorUrl?: string | string[];
-    coverBackgroundUrl?: string;
-    coverBackgroundSource?: string;
-    coverBackgroundSourceUrl?: string;
-    coverDate?: string | Date;
-  }>(),
-  { coverDate: new Date().toLocaleDateString() },
-);
+  coverDate = new Date().toLocaleDateString(),
+} = defineProps<{
+  coverAuthor?: string | string[];
+  coverAuthorUrl?: string | string[];
+  coverBackgroundUrl?: string;
+  coverBackgroundSource?: string;
+  coverBackgroundSourceUrl?: string;
+  coverDate?: string | Date;
+}>();
 
 const coverAuthors = computed(() => transformIntoArray(coverAuthorTransferred));
 const coverAuthorUrls = computed(() => transformIntoArray(coverAuthorUrlTransferred));

layouts/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="slidev-layout">
     <slot> <h1>Index</h1> </slot>
-    <TocList v-if="indexEntriesInternal" :level="1" :list="indexEntriesInternal" />
-    <ol v-else>
+    <ol>
       <li v-for="{ uri, title } in indexEntries" :key="title">
-        <TextWithOptionalLink :link="uri" :text="title" />
+        <Link v-if="indexRedirectType === 'internal'" :to="uri">{{ title }}</Link>
+        <TextWithOptionalLink v-else :link="uri" :text="title" />
       </li>
     </ol>
   </div>
@@ -13,26 +13,14 @@
 <script setup lang="ts">
 import { computed, PropType } from 'vue';
 
-const { indexEntries, indexRedirectType } = defineProps({
+const { indexEntries, indexRedirectType = 'internal' } = defineProps({
   indexEntries: {
     type: Array as PropType<{ title: string; uri?: number | string }[]>,
     required: true,
   },
   indexRedirectType: {
-    default: 'internal',
     type: String as PropType<'external' | 'internal'>,
     validator: (value) => value === 'external' || value === 'internal',
   },
 });
-
-const indexEntriesInternal =
-  indexRedirectType === 'internal' &&
-  computed(() =>
-    indexEntries.map(({ title, uri }) => ({
-      children: [],
-      level: 1,
-      path: uri.toString(),
-      title,
-    })),
-  );
 </script>