refactor: rebirth via nuxt

.github/renovate.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": ["github>ntnyq/configs//packages/renovate-config/default.json"],
+  "automerge": true
+}

.github/workflows/ci.yml

@@ -4,17 +4,23 @@ on:
   pull_request:
     branches:
       - main
+      - next
   push:
     branches:
       - main
+      - next
 
 jobs:
   check:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
+      - uses: pnpm/action-setup@v3
+      - uses: actions/setup-node@v4
+        with:
+          cache: pnpm
 
-      - run: bun i
-      - run: bun run check
-      - run: bun run build
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm run lint
+      - run: pnpm run generate
+      - run: pnpm run typecheck

.gitignore

@@ -1,11 +1,24 @@
-.DS_Store
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
 node_modules
-*.log*
-*.local
-dist-ssr
-.vercel
-dist/
-dev-dist
-
-# generated types
-.astro/
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx nano-staged

.npmrc

@@ -0,0 +1,3 @@
+shamefully-hoist=true
+shell-emulator=true
+package-manager-strict=false

.nvmrc

@@ -0,0 +1 @@
+20

.vscode/settings.json

@@ -1,39 +1,13 @@
 {
-  "editor.formatOnSave": true,
-  "eslint.enable": false,
-  "eslint.validate": [
-    "vue",
-    "yaml",
-    "html",
-    "json",
-    "jsonc",
-    "json5",
-    "astro",
-    "markdown",
-    "javascript",
-    "typescript",
-    "javascriptreact",
-    "typescriptreact"
-  ],
-  "cSpell.allowCompoundWords": true,
   "cSpell.words": [
-    "amap",
-    "antfu",
-    "astrojs",
-    "attributify",
+    "Attributify",
     "bilibili",
     "bumpp",
     "changelogithub",
-    "destructurable",
+    "Hubot",
     "iconify",
+    "nuxt",
     "shiki",
-    "sindresorhus",
-    "solidjs",
-    "tsconfigs",
-    "unocss",
-    "unplugin",
-    "vite",
-    "vitejs",
     "vitesse",
     "vueuse"
   ]

.vscode/vue-sfc.code-snippets

@@ -0,0 +1,17 @@
+{
+  "Vue SFC with setup": {
+    "prefix": "sfc",
+    "scope": "vue",
+    "body": [
+      "<script lang=\"ts\" setup>",
+      "</script>",
+      "",
+      "<template>",
+      "  <div>",
+      "  </div>",
+      "</template>",
+      "",
+    ],
+    "description": "Vue SFC with setup",
+  },
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-PRESENT ntnyq <[email protected]>
+Copyright (c) 2024-PRESENT ntnyq <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -3,5 +3,3 @@
 My personal website.
 
 ## Design and Code
-
-[sindresorhus](https://sindresorhus.com)

app.vue

@@ -0,0 +1,14 @@
+<template>
+  <Suspense>
+    <main class="flex flex-col lg:h-screen">
+      <NuxtLayout />
+    </main>
+
+    <template #fallback>
+      <div class="h-screen flex flex-center gap-1 text-3xl font-bold">
+        <div class="i-ri-loader-4-fill animate-spin"></div>
+        Loading...
+      </div>
+    </template>
+  </Suspense>
+</template>

components/home/Footer.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup></script>
+
+<template>
+  <footer class="mt-12 flex items-center justify-between">
+    <p class="text-sm op-40">ntnyq &copy; 2024</p>
+    <div
+      @click="toggleDark"
+      class="cursor-pointer rounded-md p-2 hover:bg-zinc-100 dark:hover:bg-zinc-700"
+    >
+      <div
+        v-if="isDark"
+        class="i-radix-icons-moon"
+      />
+      <div
+        v-else
+        class="i-radix-icons-sun"
+      />
+    </div>
+  </footer>
+</template>

components/home/Hero.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup></script>
+
+<template>
+  <header class="mt-12 md:mt-18">
+    <h1 class="title text-5xl font-bold">
+      <span class="block">Hello, </span>
+      <span class="mt-2 block">I'm ntnyq.</span>
+    </h1>
+    <div class="mt-6 flex flex-col gap-2">
+      <div>
+        <span>Front-end developer</span>
+      </div>
+      <div>
+        <span>Current working at home</span>
+      </div>
+      <div>
+        <span>Current learning TypeScript and Flutter</span>
+      </div>
+    </div>
+  </header>
+</template>

components/home/ProjectItem.vue

@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div></div>
+</template>

components/home/SocialItem.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+interface SocialItem {
+  icon?: string
+  link?: string
+  class?: string
+  text?: string
+}
+
+defineProps<{
+  item: SocialItem
+}>()
+</script>
+
+<template>
+  <a
+    :class="item.class"
+    :href="item.link"
+    class="mr-2 mt-2 inline-flex items-center rounded-md bg-gray-50 px-3 py-2 decoration-none transition-colors dark:bg-gray-50/10 hover:text-white"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <div
+      v-if="item.icon"
+      class="text-xl"
+    >
+      <div :class="item.icon"></div>
+    </div>
+    <div
+      v-if="item.text"
+      class="ml-1 text-sm"
+    >
+      {{ item.text }}
+    </div>
+  </a>
+</template>

components/home/Socials.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+const socialList = shallowRef([
+  {
+    text: 'GitHub',
+    link: 'https://github.com/ntnyq',
+    icon: 'i-ri-github-fill',
+    class: 'hover:bg-gray-700 dark:hover:bg-white dark:hover:text-gray-900',
+  },
+  {
+    text: '',
+    link: 'https://twitter.com/ntnyq',
+    icon: 'i-fa-brands-twitter',
+    class: 'hover:bg-[#00ACEE]',
+  },
+  {
+    text: '',
+    link: 'https://space.bilibili.com/40199161',
+    icon: 'i-ri-bilibili-fill',
+    class: 'hover:bg-[#fb7299]',
+  },
+])
+</script>
+
+<template>
+  <div class="mt-4">
+    <SocialItem
+      v-for="item in socialList"
+      :key="item.text"
+      :item="item"
+    />
+  </div>
+</template>

composables/useDark.ts

@@ -0,0 +1,55 @@
+/**
+ * @file useDark
+ */
+
+export const isDark = useDark()
+
+export interface ViewTransition {
+  ready: Promise<void>
+  finished: Promise<void>
+  updateCallbackDone: Promise<void>
+}
+declare global {
+  interface Document {
+    startViewTransition?: (callback: () => Promise<void> | void) => ViewTransition
+  }
+}
+
+const isAppearanceTransition =
+  typeof document !== 'undefined' &&
+  document.startViewTransition &&
+  !window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+/**
+ * Credit to [@hooray](https://github.com/hooray)
+ * @see https://github.com/vuejs/vitepress/pull/2347
+ */
+export function toggleDark(event?: MouseEvent) {
+  if (!isAppearanceTransition || !event) {
+    isDark.value = !isDark.value
+    return
+  }
+
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
+  // @ts-expect-error: Transition API
+  const transition = document.startViewTransition(async () => {
+    isDark.value = !isDark.value
+    await nextTick()
+  })
+
+  transition.ready.then(() => {
+    const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
+    document.documentElement.animate(
+      {
+        clipPath: isDark.value ? [...clipPath].reverse() : clipPath,
+      },
+      {
+        duration: 400,
+        easing: 'ease-in',
+        pseudoElement: isDark.value ? '::view-transition-old(root)' : '::view-transition-new(root)',
+      },
+    )
+  })
+}