From ee1d37a4c774361a0ebba8372e1afdb7e2439600 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E5=9D=82=E9=9B=85?=
 <23130178+ShadowRZ@users.noreply.github.com>
Date: Fri, 26 Jan 2024 20:36:11 +0800
Subject: [PATCH] Move to my scaffold

---
 app.config.ts                  |  9 +++++
 app.vue                        | 54 -------------------------
 components/Footer.vue          | 18 ---------
 components/Header.vue          | 36 -----------------
 components/ScrollToTop.vue     | 31 ---------------
 components/TOCContainer.vue    | 16 --------
 components/ThemeToggle.vue     | 58 ---------------------------
 components/WithUnderline.vue   | 18 ---------
 components/content/ProseH1.vue | 27 -------------
 components/content/ProseH2.vue | 27 -------------
 components/content/ProseH3.vue | 27 -------------
 components/content/ProseH4.vue | 27 -------------
 components/content/ProseH5.vue | 27 -------------
 components/content/ProseH6.vue | 27 -------------
 content/index.md               |  0
 content/index.yml              | 10 +++++
 content/posts/_dir.yml         |  2 +-
 layouts/default.vue            |  5 ---
 layouts/posts.vue              | 50 -----------------------
 nuxt.config.ts                 | 14 +------
 pages/index.vue                | 73 ----------------------------------
 uno.config.ts                  |  9 ++++-
 22 files changed, 30 insertions(+), 535 deletions(-)
 create mode 100644 app.config.ts
 delete mode 100644 app.vue
 delete mode 100644 components/Footer.vue
 delete mode 100644 components/Header.vue
 delete mode 100644 components/ScrollToTop.vue
 delete mode 100644 components/TOCContainer.vue
 delete mode 100644 components/ThemeToggle.vue
 delete mode 100644 components/WithUnderline.vue
 delete mode 100644 components/content/ProseH1.vue
 delete mode 100644 components/content/ProseH2.vue
 delete mode 100644 components/content/ProseH3.vue
 delete mode 100644 components/content/ProseH4.vue
 delete mode 100644 components/content/ProseH5.vue
 delete mode 100644 components/content/ProseH6.vue
 delete mode 100644 content/index.md
 create mode 100644 content/index.yml
 delete mode 100644 layouts/default.vue
 delete mode 100644 layouts/posts.vue
 delete mode 100644 pages/index.vue

diff --git a/app.config.ts b/app.config.ts
new file mode 100644
index 0000000..0dbc25a
--- /dev/null
+++ b/app.config.ts
@@ -0,0 +1,9 @@
+export default defineAppConfig({
+  bitfield: {
+    baseURL: 'https://shadowrz.github.io/blog/',
+    title: '@ShadowRZ\'s Blog',
+    description: 'Where something happens.',
+    copyright: (date: Date) => `© 2021-${date.getFullYear()} Yorusaka Miyabi`,
+    generator: true
+  }
+})
diff --git a/app.vue b/app.vue
deleted file mode 100644
index bee66f5..0000000
--- a/app.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import "@unocss/reset/tailwind-compat.css"
-import "@fontsource-variable/jost"
-import "@fontsource-variable/jetbrains-mono"
-
-import { useWindowScroll } from "@vueuse/core"
-
-const { y } = useWindowScroll()
-const showTop = computed(() => y.value >= 100)
-const route = useRoute()
-
-useHead({
-  titleTemplate: (subtitle) => {
-    return subtitle
-      ? `${subtitle} || @ShadowRZ's Blog`
-      : "@ShadowRZ's Blog";
-  },
-})
-
-useSeoMeta({
-  ogSiteName: '@ShadowRZ\'s Blog',
-  ogImage: '/assets/avatar.png',
-  ogUrl: `https://shadowrz.github.io/blog${route.path}`,
-  twitterCard: 'summary',
-  twitterImage: '/assets/avatar.png',
-})
-</script>
-
-<template>
-  <div
-    flex="~ col"
-    bg="pink-50 dark:pink-950"
-    text="pink-800 dark:pink-200"
-    min-h="dvh"
-    px="4 sm:8 md:16"
-    font="sans"
-  >
-    <Header />
-    <div grow>
-      <NuxtPage />
-    </div>
-    <Footer mt="32" />
-    <Transition
-      enter-active-class="transition duration-200 ease-out"
-      enter-from-class="translate-y-1 opacity-0"
-      enter-to-class="translate-y-0 opacity-100"
-      leave-active-class="transition duration-150 ease-in"
-      leave-from-class="translate-y-0 opacity-100"
-      leave-to-class="translate-y-1 opacity-0"
-    >
-      <ScrollToTop v-if="showTop" />
-    </Transition>
-  </div>
-</template>
diff --git a/components/Footer.vue b/components/Footer.vue
deleted file mode 100644
index d9776ef..0000000
--- a/components/Footer.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <footer flex="~ row" gap="8" justify="start" py="4">
-    <span>
-      &copy; 2021-2024 Yorusaka Miyabi<br />
-      Built with
-      <NuxtLink href="https://nuxt.com" target="_blank" rel="noopener"
-        ><WithUnderline
-          transition="all"
-          duration="200"
-          is="span"
-          font="bold"
-          class="bg-underline"
-          >Nuxt</WithUnderline
-        ></NuxtLink
-      >.
-    </span>
-  </footer>
-</template>
diff --git a/components/Header.vue b/components/Header.vue
deleted file mode 100644
index ee8afc2..0000000
--- a/components/Header.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div flex="~ row" gap="8" justify="end" items="center" py="4">
-    <nav>
-      <ul flex="~ row" gap="2" items="center">
-          <li>
-            <NuxtLink
-              class="group"
-              items="center"
-              flex="~ row"
-              gap="1"
-              to="/"
-              title="Home"
-            >
-              <div
-                flex
-                w="8"
-                h="8"
-                items="center"
-                justify="center"
-                transition
-                duration="200"
-                rounded="full"
-                ring="pink-500 group-focus:2"
-                bg="gray-200 hover:pink-200 dark:pink-900 dark:hover:gray-900"
-                un-text="hover:pink-500"
-              >
-                <Icon name="ph:house-duotone" size="1.25rem" />
-              </div>
-              <span hover="underline" sr-only>Home</span>
-            </NuxtLink>
-          </li>
-        </ul>
-    </nav>
-    <ThemeToggle />
-  </div>
-</template>
diff --git a/components/ScrollToTop.vue b/components/ScrollToTop.vue
deleted file mode 100644
index c4ced89..0000000
--- a/components/ScrollToTop.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-const toTop = (event: Event) => {
-  event.preventDefault();
-  window.scrollTo({ top: 0, behavior: "smooth" });
-};
-</script>
-
-<template>
-  <a
-    href="#"
-    title="Scroll to Top"
-    @click="toTop"
-    flex
-    items="center"
-    justify="center"
-    rounded="full"
-    shadow="lg"
-    transition
-    duration="200"
-    ring="pink-500 hover:2"
-    bottom="8" right="8 md:16"
-    un-text="hover:pink-500"
-    bg="dark:pink-900"
-    fixed
-    w="12"
-    h="12"
-  >
-    <Icon name="ph:arrow-line-up-duotone" size="1.5rem" />
-    <span sr-only>Scroll to Top</span>
-  </a>
-</template>
diff --git a/components/TOCContainer.vue b/components/TOCContainer.vue
deleted file mode 100644
index f80fcff..0000000
--- a/components/TOCContainer.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup lang="ts">
-const { toc } = useContent()
-</script>
-
-<template>
-  <aside v-if="toc && (toc.links.length !== 0)" class="min-w-80 not-prose" px="4">
-    <p font="bold">Table Of Contents</p>
-    <ul pl="4">
-      <li v-for="link in toc.links" :key="link.text">
-        <a hover="underline" :href="`#${link.id}`">
-          {{ link.text }}
-        </a>
-      </li>
-    </ul>
-  </aside>
-</template>
diff --git a/components/ThemeToggle.vue b/components/ThemeToggle.vue
deleted file mode 100644
index b81c939..0000000
--- a/components/ThemeToggle.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script setup lang="ts">
-const colors = [
-  {
-    id: "system",
-    icon: "ph:monitor-duotone",
-    title: "System",
-  },
-  {
-    id: "light",
-    icon: "ph:sun-duotone",
-    title: "Light",
-  },
-  {
-    id: "dark",
-    icon: "ph:moon-duotone",
-    title: "Dark",
-  },
-];
-</script>
-<template>
-  <ul flex="~ row" gap="2">
-    <li v-for="color of colors">
-      <button
-        :disabled="$colorMode.preference === color.id"
-        @click="$colorMode.preference = color.id"
-        :title="color.title"
-        type="button"
-        flex
-        ring="pink-500 focus:2"
-        :class="{
-          'ring-2 text-pink-500 bg-pink-200':
-            $colorMode.preference === color.id,
-        }"
-        rounded="full"
-        bg="gray-200 hover:pink-200 dark:pink-900 dark:hover:gray-900"
-        items="center"
-        justify="center"
-        transition
-        duration="200"
-        un-text="hover:pink-500"
-      >
-        <div
-          flex
-          w="8"
-          h="8"
-          items="center"
-          justify="center"
-          transition
-          duration="200"
-          un-text="hover:pink-500"
-        >
-          <Icon :name="color.icon" size="1.25rem" />
-        </div>
-        <span sr-only>{{ color.title }}</span>
-      </button>
-    </li>
-  </ul>
-</template>
diff --git a/components/WithUnderline.vue b/components/WithUnderline.vue
deleted file mode 100644
index 129a152..0000000
--- a/components/WithUnderline.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup lang="ts">
-const props = defineProps<{
-  is: Component | string;
-}>();
-</script>
-
-<template>
-  <component
-    style="background-position-y: 85%"
-    from="50% pink-400 dark:pink-700"
-    to="50% pink-200 dark:pink-900"
-    bg="gradient-to-r no-repeat underline-start hover:underline-end"
-    :is="props.is"
-    v-bind="$attrs"
-  >
-    <slot></slot>
-  </component>
-</template>
diff --git a/components/content/ProseH1.vue b/components/content/ProseH1.vue
deleted file mode 100644
index b091bbf..0000000
--- a/components/content/ProseH1.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <h1 :id="id">
-    <a
-      class="no-underline group"
-      v-if="generate"
-      :href="`#${id}`"
-    >
-      <slot />
-      <Icon
-        name="ph:anchor-simple-duotone"
-        ml="2"
-        style="vertical-align: -0.125em;"
-        transition duration="200"
-        class="opacity-0 group-hover:opacity-80" />
-    </a>
-    <slot v-else />
-  </h1>
-</template>
-
-<script setup lang="ts">
-import { computed, useRuntimeConfig } from '#imports'
-
-const props = defineProps<{ id?: string }>()
-
-const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => props.id && headings?.anchorLinks?.h1)
-</script>
diff --git a/components/content/ProseH2.vue b/components/content/ProseH2.vue
deleted file mode 100644
index a1ab2c0..0000000
--- a/components/content/ProseH2.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <h2 :id="id">
-    <a
-      class="no-underline group"
-      v-if="id && generate"
-      :href="`#${id}`"
-    >
-      <slot />
-      <Icon
-        name="ph:anchor-simple-duotone"
-        ml="2"
-        style="vertical-align: -0.125em;"
-        transition duration="200"
-        class="opacity-0 group-hover:opacity-80" />
-    </a>
-    <slot v-else />
-  </h2>
-</template>
-
-<script setup lang="ts">
-import { computed, useRuntimeConfig } from '#imports'
-
-const props = defineProps<{ id?: string }>()
-
-const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => props.id && headings?.anchorLinks?.h2)
-</script>
diff --git a/components/content/ProseH3.vue b/components/content/ProseH3.vue
deleted file mode 100644
index cb537bf..0000000
--- a/components/content/ProseH3.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <h3 :id="id">
-    <a
-      class="no-underline group"
-      v-if="id && generate"
-      :href="`#${id}`"
-    >
-      <slot />
-      <Icon
-        name="ph:anchor-simple-duotone"
-        ml="2"
-        style="vertical-align: -0.125em;"
-        transition duration="200"
-        class="opacity-0 group-hover:opacity-80" />
-    </a>
-    <slot v-else />
-  </h3>
-</template>
-
-<script setup lang="ts">
-import { computed, useRuntimeConfig } from '#imports'
-
-const props = defineProps<{ id?: string }>()
-
-const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => props.id && headings?.anchorLinks?.h3)
-</script>
diff --git a/components/content/ProseH4.vue b/components/content/ProseH4.vue
deleted file mode 100644
index 7640a9c..0000000
--- a/components/content/ProseH4.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <h4 :id="id">
-    <a
-      class="no-underline group"
-      v-if="id && generate"
-      :href="`#${id}`"
-    >
-      <slot />
-      <Icon
-        name="ph:anchor-simple-duotone"
-        ml="2"
-        style="vertical-align: -0.125em;"
-        transition duration="200"
-        class="opacity-0 group-hover:opacity-80" />
-    </a>
-    <slot v-else />
-  </h4>
-</template>
-
-<script setup lang="ts">
-import { computed, useRuntimeConfig } from '#imports'
-
-const props = defineProps<{ id?: string }>()
-
-const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => props.id && headings?.anchorLinks?.h4)
-</script>
diff --git a/components/content/ProseH5.vue b/components/content/ProseH5.vue
deleted file mode 100644
index 8739b9f..0000000
--- a/components/content/ProseH5.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <h5 :id="id">
-    <a
-      class="no-underline group"
-      v-if="id && generate"
-      :href="`#${id}`"
-    >
-      <slot />
-      <Icon
-        name="ph:anchor-simple-duotone"
-        ml="2"
-        style="vertical-align: -0.125em;"
-        transition duration="200"
-        class="opacity-0 group-hover:opacity-80" />
-    </a>
-    <slot v-else />
-  </h5>
-</template>
-
-<script setup lang="ts">
-import { computed, useRuntimeConfig } from '#imports'
-
-const props = defineProps<{ id?: string }>()
-
-const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => props.id && headings?.anchorLinks?.h5)
-</script>
diff --git a/components/content/ProseH6.vue b/components/content/ProseH6.vue
deleted file mode 100644
index 2b22bfb..0000000
--- a/components/content/ProseH6.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <h6 :id="id">
-    <a
-      class="no-underline group"
-      v-if="id && generate"
-      :href="`#${id}`"
-    >
-      <slot />
-      <Icon
-        name="ph:anchor-simple-duotone"
-        ml="2"
-        style="vertical-align: -0.125em;"
-        transition duration="200"
-        class="opacity-0 group-hover:opacity-80" />
-    </a>
-    <slot v-else />
-  </h6>
-</template>
-
-<script setup lang="ts">
-import { computed, useRuntimeConfig } from '#imports'
-
-const props = defineProps<{ id?: string }>()
-
-const { headings } = useRuntimeConfig().public.mdc
-const generate = computed(() => props.id && headings?.anchorLinks?.h6)
-</script>
diff --git a/content/index.md b/content/index.md
deleted file mode 100644
index e69de29..0000000
diff --git a/content/index.yml b/content/index.yml
new file mode 100644
index 0000000..4a720a8
--- /dev/null
+++ b/content/index.yml
@@ -0,0 +1,10 @@
+title: "@ShadowRZ's Blog"
+description: "Where something happens."
+layout: listing
+metas: true
+query:
+  path: "/posts"
+  sort:
+    - date: -1
+  where:
+    - _partial: false
diff --git a/content/posts/_dir.yml b/content/posts/_dir.yml
index 68c1a51..5066081 100644
--- a/content/posts/_dir.yml
+++ b/content/posts/_dir.yml
@@ -1 +1 @@
-layout: posts
+layout: post
diff --git a/layouts/default.vue b/layouts/default.vue
deleted file mode 100644
index bac28bd..0000000
--- a/layouts/default.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <main text-base prose max-w-full xl="text-xl" pt="8">
-    <slot></slot>
-  </main>
-</template>
diff --git a/layouts/posts.vue b/layouts/posts.vue
deleted file mode 100644
index 0c2b5c7..0000000
--- a/layouts/posts.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-const { page } = useContent()
-</script>
-
-<template>
-  <Head>
-    <Meta name="og:title" :content="page.title" />
-    <Meta name="og:description" :content="page.description" />
-    <Meta name="twitter:title" :content="page.title" />
-    <Meta name="twitter:description" :content="page.description" />
-  </Head>
-  <div text-base xl="text-xl" pt="32">
-    <div flex="~ row wrap" gap="2">
-      <div inline-flex gap="1" items="center">
-        <Icon name="ph:calendar-duotone" />
-        <span sr-only>Publish Date: </span>
-        <time :datetime="page.date" font="bold">{{
-          page.date ? new Date(page.date).toDateString() : '(Working)'
-        }}</time>
-      </div>
-      <template v-if="page.categories" inline-flex gap="1">
-        <div v-for="category in page.categories" inline-flex gap="1" items="center">
-          <Icon name="ph:folders-duotone" />
-          <span sr-only>Category: </span>
-          <ul font="bold" flex="~ row" gap="1">
-            <li>{{ category }}</li>
-          </ul>
-        </div>
-      </template>
-      <template v-if="page.tags" inline-flex gap="1">
-        <div v-for="tag in page.tags" inline-flex gap="1" items="center">
-          <Icon name="ph:tag-duotone" />
-          <span sr-only>Tag: </span>
-          <ul font="bold" flex="~ row" gap="1">
-            <li>{{ tag }}</li>
-          </ul>
-        </div>
-      </template>
-    </div>
-    <main grow prose max-w-full>
-      <h1 font="bold">{{ page.title }}</h1>
-      <div flex="~ col lg:row-reverse">
-        <TOCContainer />
-        <section grow>
-          <slot></slot>
-        </section>
-      </div>
-    </main>
-  </div>
-</template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index b74d9c2..7af65f5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/guide/directory-structure/nuxt.config#nuxt-config-file
 export default defineNuxtConfig({
+  extends: ['github:ShadowRZ/bitfield-scaffold'],
   app: {
     baseURL: '/blog/',
     head: {
@@ -38,12 +39,7 @@ export default defineNuxtConfig({
   },
   devtools: { enabled: true },
   modules: [
-    "@nuxt/content",
-    '@nuxt/image',
-    "@nuxtjs/color-mode",
-    "@vueuse/nuxt",
-    "@unocss/nuxt",
-    "nuxt-icon"
+    '@nuxt/image'
   ],
   colorMode: {
     classSuffix: ''
@@ -52,11 +48,5 @@ export default defineNuxtConfig({
     prerender: {
       autoSubfolderIndex: false // XXX
     }
-  },
-  content: {
-    documentDriven: true,
-    highlight: {
-      theme: 'nord'
-    }
   }
 })
diff --git a/pages/index.vue b/pages/index.vue
deleted file mode 100644
index fe51568..0000000
--- a/pages/index.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import type { QueryBuilderParams } from "@nuxt/content/dist/runtime/types"
-const query: QueryBuilderParams = {
-  path: "/posts",
-  sort: [{ date: -1 }],
-  where: [{ _partial: false }],
-}
-
-useSeoMeta({
-  ogTitle: '@ShadowRZ\'s Blog',
-  twitterTitle: '@ShadowRZ\'s Blog',
-  description: 'Where something happens.',
-  ogDescription: 'Where something happens.',
-  twitterDescription: 'Where something happens.'
-})
-</script>
-
-<template>
-  <div py="32">
-    <h1 font="bold" text="4xl xl:7xl">@ShadowRZ's Blog</h1>
-    <p text-xl xl="text-2xl">Where something happens.</p>
-  </div>
-  <main flex="~ col" text-base xl="text-xl" gap="16">
-    <ContentList :query="query" v-slot="{ list }">
-      <section flex="~ col" gap="1" v-for="page in list" :key="page._path">
-        <div flex="~ row wrap" gap="2">
-          <div inline-flex gap="1" items="center">
-            <Icon name="ph:calendar-duotone" />
-            <span sr-only>Publish Date: </span>
-            <time :datetime="page.date" font="bold">{{
-              page.date ? new Date(page.date).toDateString() : '(Working)'
-            }}</time>
-          </div>
-          <template v-if="page.categories" inline-flex gap="1">
-            <div
-              v-for="category in page.categories"
-              inline-flex
-              gap="1"
-              items="center"
-            >
-              <Icon name="ph:folders-duotone" />
-              <span sr-only>Category: </span>
-              <ul font="bold" flex="~ row" gap="1">
-                <li>{{ category }}</li>
-              </ul>
-            </div>
-          </template>
-          <template v-if="page.tags" inline-flex gap="1">
-            <div v-for="tag in page.tags" inline-flex gap="1" items="center">
-              <Icon name="ph:tag-duotone" />
-              <span sr-only>Tag: </span>
-              <ul font="bold" flex="~ row" gap="1">
-                <li>{{ tag }}</li>
-              </ul>
-            </div>
-          </template>
-        </div>
-        <NuxtLink max-w="fit" :href="page._path"
-          ><WithUnderline
-            transition="all"
-            duration="200"
-            is="h2"
-            font="bold"
-            text="3xl xl:5xl"
-            class="bg-underline-large inline"
-            >{{ page.title }}</WithUnderline
-          ></NuxtLink
-        >
-        <p mt="2">{{ page.description }}</p>
-      </section>
-    </ContentList>
-  </main>
-</template>
diff --git a/uno.config.ts b/uno.config.ts
index 05ab36b..c1a2760 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -5,6 +5,7 @@ import {
   presetUno,
   presetWebFonts,
 } from 'unocss'
+import transformerDirectives from '@unocss/transformer-directives'
 
 export default defineConfig({
   presets: [
@@ -17,7 +18,10 @@ export default defineConfig({
         'blockquote': {
           'border-left': '4px',
           'border-style': 'dashed'
-        }
+        },
+        ':not(pre) > code::before,:not(pre) > code::after': {
+          content: 'none'
+        },
       }
     }),
     presetWebFonts({
@@ -34,4 +38,7 @@ export default defineConfig({
     ['bg-underline-start', { 'background-position': '100% 100%'}],
     ['bg-underline-end', { 'background-position': '0% 100%'}]
   ],
+  transformers: [
+    transformerDirectives(),
+  ],
 })