hello world, again

docs/.vitepress/theme/Layout.vue

@@ -0,0 +1,83 @@
+<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'
+
+const { isDark } = useData()
+
+const enableTransitions = () =>
+  'startViewTransition' in document &&
+  window.matchMedia('(prefers-reduced-motion: no-preference)').matches
+
+provide('toggle-appearance', async ({ clientX: x, clientY: y }: MouseEvent) => {
+  if (!enableTransitions()) {
+    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)`
+  ]
+
+  // @ts-expect-error
+  await document.startViewTransition(async () => {
+    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)`
+    }
+  )
+})
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+  <Layout>
+    <template #sidebar-nav-after>
+      <Sidebar />
+    </template>
+    <template #home-hero-prelink>
+      <Announcement />
+    </template>
+    <Content />
+  </Layout>
+</template>
+
+<style>
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+::view-transition-old(root),
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-new(root),
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+
+.VPSwitchAppearance {
+  width: 22px !important;
+}
+
+.VPSwitchAppearance .check {
+  transform: none !important;
+}
+</style>

docs/.vitepress/theme/PostLayout.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import Authors from './components/Authors.vue'
+
+const props = defineProps<{
+  authors: string[]
+}>()
+
+const formatDate = (raw: string): string => {
+  const date = new Date(raw)
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric'
+  })
+}
+
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <h1>{{ frontmatter.title }}</h1>
+  <div>{{ frontmatter.description }} • {{ formatDate(frontmatter.date) }}</div>
+  <Authors :authors="props.authors" />
+</template>

docs/.vitepress/theme/Posts.vue

@@ -0,0 +1,67 @@
+<!-- eslint-disable vue/require-v-for-key -->
+<script setup lang="ts">
+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'
+  })
+}
+</script>
+
+<template>
+  <div>
+    <section>
+      <h1 class="flex items-center gap-2">Posts</h1>
+      <p>Everything from Monthly Updates to fmhy updates.</p>
+
+      We also have a
+      <a href="/feed.rss" target="_blank" title="RSS feed">
+        <div class="i-carbon-rss vertical-top" />
+        RSS feed.
+      </a>
+    </section>
+    <template v-for="year in Object.keys(posts).reverse()" :key="year">
+      <h2>{{ year }}</h2>
+      <ul>
+        <li v-for="post of posts[year]" :key="post.url">
+          <article>
+            <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>
+              </dd>
+            </dl>
+          </article>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.VPBadge {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  display: inline-flex;
+  margin-left: 2px;
+  padding: 0 10px;
+  line-height: 22px;
+  font-size: 12px;
+  font-weight: 500;
+  transform: translateY(-2px);
+  align-items: center;
+  gap: 0.2rem;
+  padding-right: 10px;
+  vertical-align: middle;
+  color: var(--vp-badge-tip-text);
+  background-color: transparent;
+  border-color: var(--vp-custom-block-tip-outline);
+}
+</style>

docs/.vitepress/theme/components/Announcement.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+
+const { frontmatter } = useData()
+</script>
+
+<template>
+  <a
+    v-if="frontmatter.hero.prelink"
+    :href="frontmatter.hero.prelink.link"
+    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>

docs/.vitepress/theme/components/Authors.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  authors: string[]
+}>()
+
+interface Author {
+  name: string
+  github: string
+}
+
+const data = [
+  {
+    name: 'nbats',
+    github: 'https://github.com/nbats'
+  },
+  {
+    name: 'Kai',
+    github: 'https://github.com/Kai-FMHY'
+  },
+  {
+    name: 'taskylizard',
+    github: 'https://github.com/taskylizard'
+  },
+  {
+    name: 'zinklog',
+    github: 'https://github.com/zinklog2'
+  },
+  {
+    name: 'Q',
+    github: 'https://github.com/qiracy'
+  }
+] satisfies Author[]
+
+const authors = computed(() =>
+  data.filter((author) => props.authors.includes(author.name))
+)
+</script>
+
+<template>
+  <div class="flex flex-wrap gap-4 pt-2">
+    <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>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/components/CardField.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string
+}>()
+</script>
+
+<template>
+  <div class="flex items-center mb-[8px] g-[12px]">
+    <span class="flex items-center">
+      <div class="text-2xl" :class="icon" />
+      <div class="ml-2 text-sm text-[var(--vp-c-text-2)]">
+        <slot />
+      </div>
+    </span>
+  </div>
+</template>

docs/.vitepress/theme/components/Feedback.vue

@@ -0,0 +1,327 @@
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import {
+  TransitionRoot,
+  TransitionChild,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  DialogDescription,
+  Listbox,
+  ListboxLabel,
+  ListboxButton,
+  ListboxOptions,
+  ListboxOption
+} from '@headlessui/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 router = useRouter()
+const feedback = reactive<FeedbackType>({ message: '' })
+
+const options = [
+  {
+    label: '💡 Suggestion',
+    value: 'suggestion'
+  },
+  {
+    label: '❤️ Appreciation',
+    value: 'appreciate'
+  },
+  { label: '🐞 Bug', value: 'bug' },
+  { label: '📂 Other', value: 'other' }
+]
+const selectedOption = ref(options[0])
+
+async function handleSubmit() {
+  loading.value = true
+
+  const body: FeedbackType = {
+    message: feedback.message,
+    type: selectedOption.value.value,
+    page: router.route.path
+  }
+
+  try {
+    const response = await fetch('https://api.fmhy.net/feedback', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(body)
+    })
+
+    const data = await response.json()
+
+    if (data.error) {
+      error.value = data.error
+      return
+    }
+    if (data.status === 'ok') {
+      success.value = true
+    }
+  } catch (error) {
+    error.value = error
+  } finally {
+    loading.value = false
+  }
+}
+
+const isOpen = ref(false)
+
+function closeModal() {
+  isOpen.value = false
+}
+function openModal() {
+  isOpen.value = true
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="p-[4px 8px] text-xl i-carbon:user-favorite-alt-filled"
+    @click="openModal"
+  />
+
+  <Teleport to="body">
+    <TransitionRoot appear :show="isOpen" as="template">
+      <Dialog as="div" class="relative z-10" @close="closeModal">
+        <TransitionChild
+          as="template"
+          enter="duration-300 ease-out"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="duration-200 ease-in"
+          leave-from="opacity-100"
+          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"
+          >
+            <TransitionChild
+              as="template"
+              enter="duration-300 ease-out"
+              enter-from="opacity-0 scale-95"
+              enter-to="opacity-100 scale-100"
+              leave="duration-200 ease-in"
+              leave-from="opacity-100 scale-100"
+              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"
+                >
+                  Feedback
+                </DialogTitle>
+
+                <div class="mt-4 top-16 w-72" v-if="!success">
+                  <Listbox v-model="selectedOption">
+                    <div class="relative mt-1">
+                      <ListboxButton
+                        class="relative w-full cursor-default rounded-lg bg-bg-alt text-text py-2 pl-3 pr-10 text-left shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm"
+                      >
+                        <span class="block truncate">
+                          {{ selectedOption.label }}
+                        </span>
+                        <span
+                          class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+                        >
+                          <div
+                            class="i-heroicons-solid:chevron-up-down h-5 w-5 text-gray-400"
+                            aria-hidden="true"
+                          />
+                        </span>
+                      </ListboxButton>
+
+                      <transition
+                        leave-active-class="transition duration-100 ease-in"
+                        leave-from-class="opacity-100"
+                        leave-to-class="opacity-0"
+                      >
+                        <ListboxOptions
+                          class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-bg-alt py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm"
+                        >
+                          <ListboxOption
+                            v-slot="{ active, selected }"
+                            v-for="option in options"
+                            :key="option.value"
+                            :value="option"
+                            as="template"
+                          >
+                            <li
+                              :class="[
+                                active ? 'text-primary' : 'text-gray-500',
+                                'relative cursor-default select-none py-2 pl-10 pr-4'
+                              ]"
+                            >
+                              <span
+                                :class="[
+                                  selected ? 'font-medium' : 'font-normal',
+                                  'block truncate'
+                                ]"
+                              >
+                                {{ option.label }}
+                              </span>
+                              <span
+                                v-if="selected"
+                                class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary"
+                              >
+                                <div
+                                  class="i-heroicons-solid:check h-5 w-5"
+                                  aria-hidden="true"
+                                />
+                              </span>
+                            </li>
+                          </ListboxOption>
+                        </ListboxOptions>
+                      </transition>
+                    </div>
+                  </Listbox>
+
+                  <div class="mt-2">
+                    <div>
+                      <label class="field-label">Message</label>
+                      <textarea
+                        v-model="feedback.message"
+                        class="mt-2 h-32"
+                        placeholder="What a lovely wiki!"
+                        rows="5"
+                      />
+                    </div>
+                  </div>
+                  <p class="text-sm text-gray-400 mb-2">
+                    If you want a reply to your feedback, feel free to mention a
+                    contact in the message or join our
+                    <a
+                      class="text-primary font-semibold text-underline"
+                      href="https://discord.gg/Stz6y6NgNg"
+                    >
+                      Discord.
+                    </a>
+                  </p>
+
+                  <details
+                    v-if="selectedOption.value === 'suggestion'"
+                    class="text-sm text-gray-400"
+                  >
+                    <summary class="mb-2">Submission Guidelines</summary>
+                    <strong>🕹️ Emulators</strong>
+                    <p>
+                      They're already on the
+                      <a
+                        class="text-primary font-bold text-underline"
+                        href="https://emulation.gametechwiki.com/index.php/Main_Page"
+                      >
+                        Game Tech Wiki.
+                      </a>
+                    </p>
+                    <strong>🔻 Leeches</strong>
+                    <p>
+                      They're already on the
+                      <a
+                        class="text-primary font-bold text-underline"
+                        href="https://filehostlist.miraheze.org/wiki/Free_Premium_Leeches"
+                      >
+                        File Hosting Wiki.
+                      </a>
+                    </p>
+                    <strong>🐧 Distros</strong>
+                    <p>
+                      They're already on
+                      <a
+                        class="text-primary font-bold text-underline"
+                        href="https://distrowatch.com/"
+                      >
+                        DistroWatch.
+                      </a>
+                    </p>
+                    <strong>🎲 Mining / Betting Sites</strong>
+                    <p>
+                      Don't post anything related to betting, mining, BINs, CCs,
+                      etc.
+                    </p>
+                    <strong>🎮 Multiplayer Game Hacks</strong>
+                    <p>
+                      Don't post any hacks/exploits that give unfair advantages
+                      in multiplayer games.
+                    </p>
+                  </details>
+
+                  <div class="mt-4">
+                    <button
+                      type="button"
+                      class="inline-flex justify-center rounded-md border border-transparent bg-blue-500 px-4 py-2 text-sm font-medium text-blue-100 hover:bg-blue-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:bg-blue-400"
+                      :disabled="
+                        feedback.message.length < 5 ||
+                        feedback.message.length > 1000
+                      "
+                      @click="handleSubmit()"
+                    >
+                      Submit
+                    </button>
+
+                    <button
+                      type="button"
+                      class="ml-2 inline-flex justify-center rounded-md border border-transparent bg-red-500 px-4 py-2 text-sm font-medium text-red-100 hover:bg-red-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
+                      @click="closeModal()"
+                    >
+                      Close
+                    </button>
+                  </div>
+                </div>
+                <div v-else-if="error">
+                  <div class="text-sm font-medium leading-6 text-text">
+                    Error!
+                  </div>
+                  <details>{{ error }}</details>
+                </div>
+                <div v-else>
+                  <TransitionRoot
+                    enter="transition-opacity duration-75"
+                    enter-from="opacity-0"
+                    enter-to="opacity-100"
+                  >
+                    Thanks!
+                  </TransitionRoot>
+                </div>
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </TransitionRoot>
+  </Teleport>
+</template>
+
+<style scoped>
+textarea,
+input {
+  font-family: var(--vp-font-family-base);
+  background: var(--vp-c-bg-soft);
+  font-size: 14px;
+  border-radius: 4px;
+  padding: 16px;
+  width: 100%;
+
+  &::placeholder {
+    color: var(--vp-c-text-2) !important;
+    opacity: 1;
+  }
+}
+</style>

docs/.vitepress/theme/components/InputField.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+  id: string
+}>()
+</script>
+
+<template>
+  <div class="input-field">
+    <div v-if="label" class="input-label">
+      <label :for="id" class="pane-label">
+        {{ label }}
+      </label>
+      <div class="display-value">
+        <slot name="display" />
+      </div>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.pane-label {
+  line-height: 20px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--vt-c-text-1);
+  display: block;
+}
+
+.input-field:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+.display-value {
+  font-size: 13px;
+  color: var(--vp-c-text-2);
+}
+
+.input-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  gap: 12px;
+}
+</style>

docs/.vitepress/theme/components/SidebarCard.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import Field from './CardField.vue'
+import Feedback from './Feedback.vue'
+import InputField from './InputField.vue'
+import ToggleStarred from './ToggleStarred.vue'
+</script>
+
+<template>
+  <div class="card">
+    <div class="card-header">
+      <div class="card-title">Emoji Legend</div>
+    </div>
+    <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>
+    <div class="card-header">
+      <div class="card-title">Options</div>
+    </div>
+    <InputField id="feedback" label="Feedback">
+      <template #display>
+        <Feedback />
+      </template>
+    </InputField>
+    <InputField id="toggle-starred" label="Toggle Starred">
+      <template #display>
+        <ToggleStarred />
+      </template>
+    </InputField>
+  </div>
+</template>
+
+<style scoped>
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.card-title {
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  line-height: 32px;
+  font-size: 16px;
+}
+
+.card {
+  background: var(--vp-c-bg);
+  padding: 12px 24px 24px;
+  border-radius: 12px;
+  position: relative;
+  z-index: 0;
+  border: 1px solid transparent;
+  transition: border-color 0.4s ease-in-out;
+}
+
+.card:hover {
+  border-color: var(--vp-c-brand-1);
+}
+</style>

docs/.vitepress/theme/components/Switch.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref } from 'vue'
+import { Switch } from '@headlessui/vue'
+
+const enabled = ref(false)
+</script>
+
+<template>
+  <Switch v-model="enabled" class="switch" :class="{ enabled }">
+    <span class="thumb" />
+  </Switch>
+</template>
+
+<style>
+.switch {
+  display: inline-flex;
+  position: relative;
+  width: 40px;
+  height: 22px;
+  flex-shrink: 0;
+  border: 1px solid var(--vp-input-border-color);
+  background-color: var(--vp-input-switch-bg-color);
+  transition:
+    border-color 0.25s,
+    background-color 0.4s ease;
+  border-radius: 11px;
+}
+
+.switch.enabled {
+  background-color: var(--vp-c-brand);
+}
+</style>
+
+<style scoped>
+.switch:hover {
+  border-color: var(--vp-input-hover-border-color);
+}
+
+.thumb {
+  display: inline-block;
+  background-color: #fff;
+  transition: transform 0.25s;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  box-shadow: var(--vp-shadow-1);
+}
+
+.switch.enabled .thumb {
+  transform: translateX(18px);
+}
+</style>

docs/.vitepress/theme/components/ToggleStarred.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import Switch from './Switch.vue'
+
+const toggleStarred = () =>
+  document.documentElement.classList.toggle('starred-only')
+</script>
+
+<template>
+  <Switch @click="toggleStarred()" />
+</template>
+
+<style>
+.starred-only li:not(.starred) {
+  display: none;
+}
+</style>

docs/.vitepress/theme/components/WallpaperCard.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  title: string
+  description: string
+  mobile: string
+  desktop: string
+}>()
+</script>
+
+<template>
+  <div class="rounded-lg border bg-bg-elv text-text shadow-sm w-full max-w-md">
+    <div class="flex flex-col space-y-1.5 p-6 pb-4">
+      <h4 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight">
+        {{ title }}
+      </h4>
+      <p class="text-sm text-text-2 font-medium leading-none tracking-tight">
+        {{ description }}
+      </p>
+    </div>
+    <div class="p-6">
+      <img :src="desktop" :alt="title" class="rounded-md object-cover aspect-[3/2]" width="1080" height="1920" />
+    </div>
+    <div class="items-center p-6 flex gap-2">
+      <a :href="mobile" target="_blank">Mobile</a>
+      <span class="text-text-2">•</span>
+      <a :href="desktop" target="_blank">Desktop</a>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/composables/nprogress.ts

@@ -0,0 +1,23 @@
+import nprogress, { type NProgress } from 'nprogress'
+import type { EnhanceAppContext } from 'vitepress'
+
+export function loadProgress(router: EnhanceAppContext['router']): NProgress {
+  if (typeof window === 'undefined') return
+
+  setTimeout(() => {
+    nprogress.configure({ showSpinner: false })
+
+    const cacheBeforeRouteChange = router.onBeforeRouteChange
+    const cacheAfterRouteChange = router.onAfterRouteChanged
+    router.onBeforeRouteChange = (to) => {
+      nprogress.start()
+      cacheBeforeRouteChange?.(to)
+    }
+    router.onAfterRouteChanged = (to) => {
+      nprogress.done()
+      cacheAfterRouteChange?.(to)
+    }
+  })
+
+  return nprogress
+}

docs/.vitepress/theme/index.ts

@@ -0,0 +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'
+
+export default {
+  extends: DefaultTheme,
+  Layout,
+  enhanceApp({ router, app }) {
+    app.component('Post', Post)
+    loadProgress(router)
+  }
+} satisfies Theme

docs/.vitepress/theme/posts.data.ts

@@ -0,0 +1,30 @@
+import { createContentLoader, type ContentData } from 'vitepress'
+import { groupBy } from '../utils'
+
+interface Post {
+  title: string
+  url: string
+  date: string
+}
+
+type Dictionary = ReturnType<typeof transformRawPosts>
+
+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)
+    }))
+    .sort((a, b) => b.date.localeCompare(a.date))
+
+  return groupBy(posts, (post) => post.date.slice(0, 4))
+}
+
+export default createContentLoader('posts/*.md', {
+  includeSrc: true,
+  transform: (raw) => transformRawPosts(raw)
+})

docs/.vitepress/theme/style.css

@@ -0,0 +1,279 @@
+:root {
+  /* Colors: Brand */
+  --vp-c-brand-1: theme('colors.swarm.400');
+  --vp-c-brand-2: theme('colors.swarm.500');
+  --vp-c-brand-3: theme('colors.swarm.700');
+  --vp-c-brand-soft: theme('colors.swarm.300');
+
+  /* Colors: Button */
+  --vp-button-brand-bg: var(--vp-c-brand-1);
+  --vp-button-brand-border: var(--vp-c-brand-soft);
+  --vp-button-brand-text: rgba(42, 40, 47);
+  --vp-button-brand-hover-border: var(--vp-c-brand-soft);
+  --vp-button-brand-hover-text: rgba(42, 40, 47);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-soft);
+  --vp-button-brand-active-border: var(--vp-c-brand-soft);
+  --vp-button-brand-active-text: rgba(42, 40, 47);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+  --vp-button-alt-bg: #484848;
+  --vp-button-alt-text: #f0eeee;
+  --vp-button-alt-hover-bg: #484848;
+  --vp-button-alt-hover-text: #f0eeee;
+
+  --vp-c-bg-elv: rgba(255, 255, 255, 0.7);
+  --vp-c-bg-mark: rgb(232, 232, 232);
+
+  /* Colors: Custom Block */
+  --vp-custom-block-info-bg: theme('colors.swarm.100');
+  --vp-custom-block-info-border: theme('colors.swarm.800');
+  --vp-custom-block-info-text: theme('colors.swarm.800');
+  --vp-custom-block-info-text-deep: theme('colors.swarm.900');
+  --vp-custom-block-tip-bg: theme('colors.meadow.100');
+  --vp-custom-block-tip-border: theme('colors.meadow.800');
+  --vp-custom-block-tip-text: theme('colors.meadow.800');
+  --vp-custom-block-tip-text-deep: theme('colors.meadow.900');
+  --vp-custom-block-warning-bg: rgba(253, 224, 71, 0.1);
+  --vp-custom-block-warning-border: rgba(202, 138, 4, 1);
+  --vp-custom-block-warning-text: rgba(234, 179, 8, 1);
+  --vp-custom-block-warning-text-deep: rgba(250, 204, 21, 1);
+  --vp-custom-block-danger-bg: theme('colors.carnation.100');
+  --vp-custom-block-danger-border: theme('colors.carnation.800');
+  --vp-custom-block-danger-text: theme('colors.carnation.800');
+  --vp-custom-block-danger-text-deep: theme('colors.carnation.900');
+}
+
+.dark {
+  /* Colors: Background */
+  --vp-c-bg: rgb(26, 26, 26);
+  --vp-c-bg-alt: rgb(23, 23, 23);
+  --vp-c-bg-elv: rgba(23, 23, 23, 0.8);
+
+  /* Colors: Custom Block */
+  --vp-custom-block-info-bg: theme('colors.swarm.950');
+  --vp-custom-block-info-border: theme('colors.swarm.600');
+  --vp-custom-block-info-text: theme('colors.swarm.500');
+  --vp-custom-block-info-text-deep: theme('colors.swarm.600');
+  --vp-custom-block-tip-bg: theme('colors.meadow.950');
+  --vp-custom-block-tip-border: theme('colors.meadow.600');
+  --vp-custom-block-tip-text: theme('colors.meadow.500');
+  --vp-custom-block-tip-text-deep: theme('colors.meadow.600');
+  --vp-custom-block-warning-bg: rgba(253, 224, 71, 0.1);
+  --vp-custom-block-warning-border: rgba(202, 138, 4, 1);
+  --vp-custom-block-warning-text: rgba(234, 179, 8, 1);
+  --vp-custom-block-warning-text-deep: rgba(250, 204, 21, 1);
+  --vp-custom-block-danger-bg: theme('colors.carnation.950');
+  --vp-custom-block-danger-border: theme('colors.carnation.600');
+  --vp-custom-block-danger-text: theme('colors.carnation.400');
+  --vp-custom-block-danger-text-deep: theme('colors.carnation.500');
+}
+
+.vp-doc a {
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-style: solid;
+  text-decoration-color: transparent;
+  -webkit-text-decoration-color: transparent;
+  transition: text-decoration-color 0.25s;
+}
+
+.vp-doc a:hover {
+  color: var(--vp-c-brand-1);
+  text-decoration-color: var(--vp-c-brand-1);
+  -webkit-text-decoration-color: var(--vp-c-brand-1);
+}
+
+.vp-doc .custom-block a {
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  text-decoration-style: solid;
+}
+
+::selection {
+  background-color: #0f2c47;
+}
+
+.VPFooter a {
+  text-decoration-line: underline;
+  text-decoration-style: dashed;
+  text-underline-offset: 5px;
+  transition: 0.3s;
+}
+
+.VPFooter a:hover {
+  color: var(--vp-c-text-1);
+  text-decoration-line: underline;
+  text-decoration-style: dashed;
+  text-underline-offset: 5px;
+}
+
+/* Custom scrollbar */
+.VPSidebar::-webkit-scrollbar {
+  block-size: 4px;
+  border-end-end-radius: 14px;
+  border-start-end-radius: 14px;
+  inline-size: 4px;
+}
+
+/**
+ * Component: Home
+*/
+:root {
+  --vp-home-hero-name-color: transparent;
+  --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-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+.base64 {
+  min-width: 100%;
+  width: 0px;
+  white-space: pre-wrap;
+}
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: var(--vp-c-brand-1);
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow:
+    0 0 10px var(--vp-c-brand-1),
+    0 0 5px var(--vp-c-brand-1);
+  opacity: 1;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: var(--vp-c-brand);
+  border-left-color: var(--vp-c-brand);
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#VPContent strong > a {
+  font-weight: bold;
+}
+
+.info.custom-block {
+  --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWluZm8iPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00Ii8+PHBhdGggZD0iTTEyIDhoLjAxIi8+PC9zdmc+');
+}
+
+.note.custom-block {
+  --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWluZm8iPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00Ii8+PHBhdGggZD0iTTEyIDhoLjAxIi8+PC9zdmc+');
+}
+
+.tip.custom-block {
+  --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxpZ2h0YnVsYiI+PHBhdGggZD0iTTE1IDE0Yy4yLTEgLjctMS43IDEuNS0yLjUgMS0uOSAxLjUtMi4yIDEuNS0zLjVBNiA2IDAgMCAwIDYgOGMwIDEgLjIgMi4yIDEuNSAzLjUuNy43IDEuMyAxLjUgMS41IDIuNSIvPjxwYXRoIGQ9Ik05IDE4aDYiLz48cGF0aCBkPSJNMTAgMjJoNCIvPjwvc3ZnPg==');
+}
+
+.warning.custom-block {
+  --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFsZXJ0LXRyaWFuZ2xlIj48cGF0aCBkPSJtMjEuNzMgMTgtOC0xNGEyIDIgMCAwIDAtMy40OCAwbC04IDE0QTIgMiAwIDAgMCA0IDIxaDE2YTIgMiAwIDAgMCAxLjczLTNaIi8+PHBhdGggZD0iTTEyIDl2NCIvPjxwYXRoIGQ9Ik0xMiAxN2guMDEiLz48L3N2Zz4=');
+}
+
+.danger.custom-block {
+  --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNrdWxsIj48Y2lyY2xlIGN4PSI5IiBjeT0iMTIiIHI9IjEiLz48Y2lyY2xlIGN4PSIxNSIgY3k9IjEyIiByPSIxIi8+PHBhdGggZD0iTTggMjB2Mmg4di0yIi8+PHBhdGggZD0ibTEyLjUgMTctLjUtMS0uNSAxaDF6Ii8+PHBhdGggZD0iTTE2IDIwYTIgMiAwIDAgMCAxLjU2LTMuMjUgOCA4IDAgMSAwLTExLjEyIDBBMiAyIDAgMCAwIDggMjAiLz48L3N2Zz4=');
+}
+
+.custom-block-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.custom-block-title::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  -webkit-mask: var(--icon) no-repeat;
+  mask: var(--icon) no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  background-color: currentColor;
+  color: inherit;
+}