style: format with new style

2024-01-25 16:32:45 +00:00
parent bc3bbaafeb
commit ef422dcda8
43 changed files with 686 additions and 583 deletions
--- a/.vitepress/theme/Layout.vue
+++ b/.vitepress/theme/Layout.vue
@@ -1,47 +1,47 @@
 <script setup lang="ts">
-import DefaultTheme from "vitepress/theme";
-import { useData } from "vitepress";
-import { nextTick, provide } from "vue";
-import Sidebar from "./components/SidebarCard.vue";
-import Announcement from "./components/Announcement.vue";
+import DefaultTheme from 'vitepress/theme'
+import { useData } from 'vitepress'
+import { nextTick, provide } from 'vue'
+import Sidebar from './components/SidebarCard.vue'
+import Announcement from './components/Announcement.vue'

-const { isDark } = useData();
+const { isDark } = useData()

 const enableTransitions = () =>
-  "startViewTransition" in document &&
-  window.matchMedia("(prefers-reduced-motion: no-preference)").matches;
+  'startViewTransition' in document &&
+  window.matchMedia('(prefers-reduced-motion: no-preference)').matches

-provide("toggle-appearance", async ({ clientX: x, clientY: y }: MouseEvent) => {
+provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
  if (!enableTransitions()) {
-    isDark.value = !isDark.value;
-    return;
+    isDark.value = !isDark.value
+    return
  }

  const clipPath = [
    `circle(0px at ${x}px ${y}px)`,
    `circle(${Math.hypot(
      Math.max(x, innerWidth - x),
-      Math.max(y, innerHeight - y),
-    )}px at ${x}px ${y}px)`,
-  ];
+      Math.max(y, innerHeight - y)
+    )}px at ${x}px ${y}px)`
+  ]

  // @ts-expect-error
  await document.startViewTransition(async () => {
-    isDark.value = !isDark.value;
-    await nextTick();
-  }).ready;
+    isDark.value = !isDark.value
+    await nextTick()
+  }).ready

  document.documentElement.animate(
    { clipPath: isDark.value ? clipPath.reverse() : clipPath },
    {
      duration: 300,
-      easing: "ease-in",
-      pseudoElement: `::view-transition-${isDark.value ? "old" : "new"}(root)`,
-    },
-  );
-});
+      easing: 'ease-in',
+      pseudoElement: `::view-transition-${isDark.value ? 'old' : 'new'}(root)`
+    }
+  )
+})

-const { Layout } = DefaultTheme;
+const { Layout } = DefaultTheme
 </script>

 <template>
--- a/.vitepress/theme/PostLayout.vue
+++ b/.vitepress/theme/PostLayout.vue
@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { useData } from "vitepress";
-import Authors from "./components/Authors.vue";
+import { useData } from 'vitepress'
+import Authors from './components/Authors.vue'

 const props = defineProps<{
-  authors: string[];
-}>();
+  authors: string[]
+}>()

 const formatDate = (raw: string): string => {
-  const date = new Date(raw);
-  return date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-  });
-};
+  const date = new Date(raw)
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric'
+  })
+}

-const { frontmatter } = useData();
+const { frontmatter } = useData()
 </script>

 <template>
@@ -22,6 +22,8 @@ const { frontmatter } = useData();
    {{ frontmatter.title }}
  </h3>

-  <span>{{ frontmatter.description }} • {{ formatDate(frontmatter.date) }}</span>
+  <span>
+    {{ frontmatter.description }} • {{ formatDate(frontmatter.date) }}
+  </span>
  <Authors :authors="props.authors" />
 </template>
--- a/.vitepress/theme/Posts.vue
+++ b/.vitepress/theme/Posts.vue
@@ -1,14 +1,14 @@
 <!-- eslint-disable vue/require-v-for-key -->
 <script setup lang="ts">
-import { data as posts } from "./posts.data";
+import { data as posts } from './posts.data'

 const formatDate = (raw: string): string => {
-  const date = new Date(raw);
-  return date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-  });
-};
+  const date = new Date(raw)
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric'
+  })
+}
 </script>

 <template>
@@ -28,11 +28,14 @@ const formatDate = (raw: string): string => {
      <ul>
        <li v-for="post of posts[year]" :key="post.url">
          <article>
-            <a :href="post.url" class="border-none">{{ post.title }}</a> -
+            <a :href="post.url" class="border-none">{{ post.title }}</a>
+            -
            <dl class="m-0 inline">
              <dt class="sr-only">Published on</dt>
              <dd class="m-0 inline">
-                <time :datetime="post.date" class="font-bold">{{ formatDate(post.date) }}</time>
+                <time :datetime="post.date" class="font-bold">
+                  {{ formatDate(post.date) }}
+                </time>
              </dd>
            </dl>
          </article>
--- a/.vitepress/theme/components/Announcement.vue
+++ b/.vitepress/theme/components/Announcement.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useData } from "vitepress";
+import { useData } from 'vitepress'

-const { frontmatter } = useData();
+const { frontmatter } = useData()
 </script>

 <template>
@@ -9,7 +9,8 @@ const { frontmatter } = useData();
    v-if="frontmatter.hero.prelink"
    :href="frontmatter.hero.prelink.link"
    target="_blank"
-    class="inline-flex items-center rounded-lg bg-[var(--vp-c-default-soft)] px-4 py-1 text-sm font-semibold mb-3">
+    class="inline-flex items-center rounded-lg bg-[var(--vp-c-default-soft)] px-4 py-1 text-sm font-semibold mb-3"
+  >
    {{ frontmatter.hero.prelink.title }}
  </a>
 </template>
--- a/.vitepress/theme/components/Authors.vue
+++ b/.vitepress/theme/components/Authors.vue
@@ -1,39 +1,41 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed } from 'vue'

 const props = defineProps<{
-  authors: string[];
-}>();
+  authors: string[]
+}>()

 interface Author {
-  name: string;
-  github: string;
+  name: string
+  github: string
 }

 const data = [
  {
-    name: "nbats",
-    github: "https://github.com/nbats",
+    name: 'nbats',
+    github: 'https://github.com/nbats'
  },
  {
-    name: "Kai",
-    github: "https://github.com/Kai-FMHY",
+    name: 'Kai',
+    github: 'https://github.com/Kai-FMHY'
  },
  {
-    name: "taskylizard",
-    github: "https://github.com/taskylizard",
+    name: 'taskylizard',
+    github: 'https://github.com/taskylizard'
  },
  {
-    name: "zinklog",
-    github: "https://github.com/zinklog2",
+    name: 'zinklog',
+    github: 'https://github.com/zinklog2'
  },
  {
-    name: "Q",
-    github: "https://github.com/qiracy",
-  },
-] satisfies Author[];
+    name: 'Q',
+    github: 'https://github.com/qiracy'
+  }
+] satisfies Author[]

-const authors = computed(() => data.filter((author) => props.authors.includes(author.name)));
+const authors = computed(() =>
+  data.filter((author) => props.authors.includes(author.name))
+)
 </script>

 <template>
@@ -41,7 +43,7 @@ const authors = computed(() => data.filter((author) => props.authors.includes(au
    <div v-for="(c, index) of authors" class="flex gap-2 items-center">
      <img :src="`${c.github}.png`" class="w-8 h-8 rounded-full" />
      <a :href="c.github">{{ c.name }}</a>
-      <span v-if="index < authors.length - 1"> • </span>
+      <span v-if="index < authors.length - 1">•</span>
    </div>
  </div>
 </template>
--- a/.vitepress/theme/components/CardField.vue
+++ b/.vitepress/theme/components/CardField.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 defineProps<{
-  icon: string;
-}>();
+  icon: string
+}>()
 </script>

 <template>
--- a/.vitepress/theme/components/Feedback.vue
+++ b/.vitepress/theme/components/Feedback.vue
@@ -1,48 +1,52 @@
 <script setup lang="ts">
-import { reactive, ref } from "vue";
-import { useRouter } from "vitepress";
-import { type FeedbackType, getFeedbackOption, feedbackOptions } from "../../types/Feedback";
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vitepress'
+import {
+  type FeedbackType,
+  getFeedbackOption,
+  feedbackOptions
+} from '../../types/Feedback'

-const loading = ref<boolean>(false);
-const error = ref<unknown>(null);
-const success = ref<boolean>(false);
+const loading = ref<boolean>(false)
+const error = ref<unknown>(null)
+const success = ref<boolean>(false)

-const router = useRouter();
+const router = useRouter()

-const feedback = reactive<FeedbackType>({ message: "" });
+const feedback = reactive<FeedbackType>({ message: '' })

-async function handleSubmit(type?: FeedbackType["type"]) {
-  if (type) feedback.type = type;
-  loading.value = true;
+async function handleSubmit(type?: FeedbackType['type']) {
+  if (type) feedback.type = type
+  loading.value = true

  const body: FeedbackType = {
    message: feedback.message,
    type: feedback.type,
-    page: router.route.path,
-  };
+    page: router.route.path
+  }

  try {
-    const response = await fetch("https://feedback.tasky.workers.dev", {
-      method: "POST",
+    const response = await fetch('https://feedback.tasky.workers.dev', {
+      method: 'POST',
      headers: {
-        "Content-Type": "application/json",
+        'Content-Type': 'application/json'
      },
-      body: JSON.stringify(body),
-    });
+      body: JSON.stringify(body)
+    })

-    const data = await response.json();
+    const data = await response.json()

    if (data.error) {
-      error.value = data.error;
-      return;
+      error.value = data.error
+      return
    }
-    if (data.status === "ok") {
-      success.value = true;
+    if (data.status === 'ok') {
+      success.value = true
    }
  } catch (error) {
-    error.value = error;
+    error.value = error
  } finally {
-    loading.value = false;
+    loading.value = false
  }
 }
 </script>
@@ -61,7 +65,8 @@ async function handleSubmit(type?: FeedbackType["type"]) {
            v-for="item in feedbackOptions"
            :key="item.value"
            class="btn"
-            @click="handleSubmit(item.value as FeedbackType['type'])">
+            @click="handleSubmit(item.value as FeedbackType['type'])"
+          >
            <span>{{ item.label }}</span>
          </button>
        </div>
@@ -71,7 +76,11 @@ async function handleSubmit(type?: FeedbackType["type"]) {
          <p class="desc">Page: {{ router.route.path }}</p>
          <div>
            <span>{{ getFeedbackOption(feedback.type)?.label }}</span>
-            <button style="margin-left: 0.5rem" class="btn" @click="feedback.type = undefined">
+            <button
+              style="margin-left: 0.5rem"
+              class="btn"
+              @click="feedback.type = undefined"
+            >
              <span class="i-carbon-close-large">close</span>
            </button>
          </div>
@@ -80,19 +89,27 @@ async function handleSubmit(type?: FeedbackType["type"]) {
          v-model="feedback.message"
          autofocus
          class="input"
-          placeholder="What a lovely wiki!" />
+          placeholder="What a lovely wiki!"
+        />
        <p class="desc mb-2">
-          If you'd prefer to be contacted through another platform, feel free to mention it in the
-          message or join our
-          <a class="text-primary font-semibold text-underline" href="https://discord.gg/Stz6y6NgNg"
-            >Discord</a
-          >.
+          If you'd prefer to be contacted through another platform, feel free to
+          mention it in the message or join our
+          <a
+            class="text-primary font-semibold text-underline"
+            href="https://discord.gg/Stz6y6NgNg"
+          >
+            Discord
+          </a>
+          .
        </p>
        <button
          type="submit"
          class="btn btn-primary"
-          :disabled="feedback.message.length < 5 || feedback.message.length > 1000"
-          @click="handleSubmit()">
+          :disabled="
+            feedback.message.length < 5 || feedback.message.length > 1000
+          "
+          @click="handleSubmit()"
+        >
          Submit
        </button>
      </div>
--- a/.vitepress/theme/components/Feedback2.vue
+++ b/.vitepress/theme/components/Feedback2.vue
@@ -1,34 +1,34 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref } from 'vue'
 import {
  TransitionRoot,
  TransitionChild,
  Dialog,
  DialogPanel,
  DialogTitle,
-  DialogDescription,
-} from "@headlessui/vue";
+  DialogDescription
+} from '@headlessui/vue'

-const isOpen = ref(true);
+const isOpen = ref(true)

 const feedbackOptions = [
  {
-    label: "💡 Suggestion",
-    value: "suggestion",
+    label: '💡 Suggestion',
+    value: 'suggestion'
  },
  {
-    label: "❤️ Appreciation",
-    value: "appreciate",
+    label: '❤️ Appreciation',
+    value: 'appreciate'
  },
-  { label: "🐞 Bug", value: "bug" },
-  { label: "📂 Other", value: "other" },
-];
+  { label: '🐞 Bug', value: 'bug' },
+  { label: '📂 Other', value: 'other' }
+]

 function closeModal() {
-  isOpen.value = false;
+  isOpen.value = false
 }
 function openModal() {
-  isOpen.value = true;
+  isOpen.value = true
 }
 </script>

@@ -36,7 +36,8 @@ function openModal() {
  <button
    type="button"
    class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled"
-    @click="openModal" />
+    @click="openModal"
+  />

  <TransitionRoot appear :show="isOpen" as="template">
    <Dialog as="div" class="relative z-10" @close="closeModal">
@@ -47,12 +48,15 @@ function openModal() {
        enter-to="opacity-100"
        leave="duration-200 ease-in"
        leave-from="opacity-100"
-        leave-to="opacity-0">
+        leave-to="opacity-0"
+      >
        <div class="fixed inset-0 bg-black/25" />
      </TransitionChild>

      <div class="fixed inset-0 overflow-y-auto">
-        <div class="flex min-h-full items-center justify-center p-4 text-center">
+        <div
+          class="flex min-h-full items-center justify-center p-4 text-center"
+        >
          <TransitionChild
            as="template"
            enter="duration-300 ease-out"
@@ -60,10 +64,15 @@ function openModal() {
            enter-to="opacity-100 scale-100"
            leave="duration-200 ease-in"
            leave-from="opacity-100 scale-100"
-            leave-to="opacity-0 scale-95">
+            leave-to="opacity-0 scale-95"
+          >
            <DialogPanel
-              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-bg p-6 text-left align-middle shadow-xl transition-all">
-              <DialogTitle as="h3" class="text-lg font-medium leading-6 text-text">
+              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-bg p-6 text-left align-middle shadow-xl transition-all"
+            >
+              <DialogTitle
+                as="h3"
+                class="text-lg font-medium leading-6 text-text"
+              >
                Feedback
              </DialogTitle>

@@ -72,7 +81,8 @@ function openModal() {
                  <button
                    v-for="item in feedbackOptions"
                    :key="item.value"
-                    class="inline-flex justify-center rounded-md border border-transparent bg-bg-alt px-4 py-2 text-sm font-medium text-text hover:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2">
+                    class="inline-flex justify-center rounded-md border border-transparent bg-bg-alt px-4 py-2 text-sm font-medium text-text hover:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+                  >
                    <span>{{ item.label }}</span>
                  </button>
                </div>
@@ -90,7 +100,8 @@ function openModal() {
                <button
                  type="button"
                  class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
-                  @click="closeModal">
+                  @click="closeModal"
+                >
                  Close
                </button>
              </div>
--- a/.vitepress/theme/components/InputField.vue
+++ b/.vitepress/theme/components/InputField.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 defineProps<{
-  label: string;
-  id: string;
-}>();
+  label: string
+  id: string
+}>()
 </script>

 <template>
--- a/.vitepress/theme/components/Modal.vue
+++ b/.vitepress/theme/components/Modal.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { ref } from "vue";
-import Feedback from "./Feedback.vue";
+import { ref } from 'vue'
+import Feedback from './Feedback.vue'

-const showModal = ref(false);
+const showModal = ref(false)
 </script>

 <template>
-  <button class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled" @click="showModal = true" />
+  <button
+    class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled"
+    @click="showModal = true"
+  />

  <Teleport to="body">
    <Transition name="modal">
@@ -14,7 +17,9 @@ const showModal = ref(false);
        <div class="modal-container">
          <Feedback />
          <div class="model-footer">
-            <button class="modal-button" @click="showModal = false">Close</button>
+            <button class="modal-button" @click="showModal = false">
+              Close
+            </button>
          </div>
        </div>
      </div>
--- a/.vitepress/theme/components/SidebarCard.vue
+++ b/.vitepress/theme/components/SidebarCard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Field from "./CardField.vue";
-import Modal from "./Modal.vue";
-import InputField from "./InputField.vue";
-import ToggleStarred from "./ToggleStarred.vue";
+import Field from './CardField.vue'
+import Modal from './Modal.vue'
+import InputField from './InputField.vue'
+import ToggleStarred from './ToggleStarred.vue'
 </script>

 <template>
@@ -10,9 +10,9 @@ import ToggleStarred from "./ToggleStarred.vue";
    <div class="card-header">
      <div class="card-title">Emoji Legend</div>
    </div>
-    <Field icon="i-twemoji-star"> Recommendations </Field>
-    <Field icon="i-twemoji-globe-with-meridians"> Indexes </Field>
-    <Field icon="i-twemoji-repeat-button"> Storage Links </Field>
+    <Field icon="i-twemoji-star">Recommendations</Field>
+    <Field icon="i-twemoji-globe-with-meridians">Indexes</Field>
+    <Field icon="i-twemoji-repeat-button">Storage Links</Field>
    <div class="card-header">
      <div class="card-title">Options</div>
    </div>
--- a/.vitepress/theme/components/Switch.vue
+++ b/.vitepress/theme/components/Switch.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { ref } from "vue";
-import { Switch } from "@headlessui/vue";
+import { ref } from 'vue'
+import { Switch } from '@headlessui/vue'

-const enabled = ref(false);
+const enabled = ref(false)
 </script>

 <template>
--- a/.vitepress/theme/components/ToggleStarred.vue
+++ b/.vitepress/theme/components/ToggleStarred.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import Switch from "./Switch.vue";
+import Switch from './Switch.vue'

-const toggleStarred = () => document.documentElement.classList.toggle("starred-only");
+const toggleStarred = () =>
+  document.documentElement.classList.toggle('starred-only')
 </script>

 <template>
--- a/.vitepress/theme/composables/nprogress.ts
+++ b/.vitepress/theme/composables/nprogress.ts
@@ -1,23 +1,23 @@
-import nprogress, { type NProgress } from "nprogress";
-import type { EnhanceAppContext } from "vitepress";
+import nprogress, { type NProgress } from 'nprogress'
+import type { EnhanceAppContext } from 'vitepress'

-export function loadProgress(router: EnhanceAppContext["router"]): NProgress {
-  if (typeof window === "undefined") return;
+export function loadProgress(router: EnhanceAppContext['router']): NProgress {
+  if (typeof window === 'undefined') return

  setTimeout(() => {
-    nprogress.configure({ showSpinner: false });
+    nprogress.configure({ showSpinner: false })

-    const cacheBeforeRouteChange = router.onBeforeRouteChange;
-    const cacheAfterRouteChange = router.onAfterRouteChanged;
+    const cacheBeforeRouteChange = router.onBeforeRouteChange
+    const cacheAfterRouteChange = router.onAfterRouteChanged
    router.onBeforeRouteChange = (to) => {
-      nprogress.start();
-      cacheBeforeRouteChange?.(to);
-    };
+      nprogress.start()
+      cacheBeforeRouteChange?.(to)
+    }
    router.onAfterRouteChanged = (to) => {
-      nprogress.done();
-      cacheAfterRouteChange?.(to);
-    };
-  });
+      nprogress.done()
+      cacheAfterRouteChange?.(to)
+    }
+  })

-  return nprogress;
+  return nprogress
 }
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -1,16 +1,16 @@
-import { type Theme } from "vitepress";
-import DefaultTheme from "vitepress/theme";
-import Layout from "./Layout.vue";
-import Post from "./PostLayout.vue";
-import { loadProgress } from "./composables/nprogress";
-import "./style.css";
-import "uno.css";
+import { type Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import Layout from './Layout.vue'
+import Post from './PostLayout.vue'
+import { loadProgress } from './composables/nprogress'
+import './style.css'
+import 'uno.css'

 export default {
  extends: DefaultTheme,
  Layout,
  enhanceApp({ router, app }) {
-    app.component("Post", Post);
-    loadProgress(router);
-  },
-} satisfies Theme;
+    app.component('Post', Post)
+    loadProgress(router)
+  }
+} satisfies Theme
--- a/.vitepress/theme/posts.data.ts
+++ b/.vitepress/theme/posts.data.ts
@@ -1,30 +1,30 @@
-import { createContentLoader, type ContentData } from "vitepress";
-import { groupBy } from "../utils";
+import { createContentLoader, type ContentData } from 'vitepress'
+import { groupBy } from '../utils'

 interface Post {
-  title: string;
-  url: string;
-  date: string;
+  title: string
+  url: string
+  date: string
 }

-type Dictionary = ReturnType<typeof transformRawPosts>;
+type Dictionary = ReturnType<typeof transformRawPosts>

-declare const data: Dictionary;
-export { data };
+declare const data: Dictionary
+export { data }

 function transformRawPosts(rawPosts: ContentData[]): Record<string, Post[]> {
  const posts: Post[] = rawPosts
    .map(({ url, frontmatter }) => ({
      title: frontmatter.title,
      url,
-      date: (frontmatter.date as Date).toISOString().slice(0, 10),
+      date: (frontmatter.date as Date).toISOString().slice(0, 10)
    }))
-    .sort((a, b) => b.date.localeCompare(a.date));
+    .sort((a, b) => b.date.localeCompare(a.date))

-  return groupBy(posts, (post) => post.date.slice(0, 4));
+  return groupBy(posts, (post) => post.date.slice(0, 4))
 }

-export default createContentLoader("posts/*.md", {
+export default createContentLoader('posts/*.md', {
  includeSrc: true,
-  transform: (raw) => transformRawPosts(raw),
-});
+  transform: (raw) => transformRawPosts(raw)
+})
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -124,9 +124,17 @@
 */
 :root {
  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #c4b5fd 30%, #7bc5e4);
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #c4b5fd 30%,
+    #7bc5e4
+  );

-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #c4b5fd 50%, #47caff 50%);
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #c4b5fd 50%,
+    #47caff 50%
+  );
  --vp-home-hero-image-filter: blur(44px);
 }