feat: add projects

.vscode/settings.json

@@ -1,4 +1,20 @@
 {
+  "eslint.enable": true,
+  "prettier.enable": true,
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "vue",
+    "yaml",
+    "html",
+    "json",
+    "jsonc",
+    "json5",
+    "markdown",
+    "javascript",
+    "typescript",
+    "javascriptreact",
+    "typescriptreact"
+  ],
   "cSpell.words": [
     "Attributify",
     "bilibili",

app.vue

@@ -6,7 +6,7 @@
 
     <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>
+        <div class="i-ri:loader-4-fill animate-spin"></div>
         Loading...
       </div>
     </template>

components/home/Footer.vue

@@ -7,14 +7,7 @@
       @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 class="i-radix-icons:sun dark:i-radix-icons:moon" />
     </div>
   </footer>
 </template>

components/home/ProjectItem.vue

@@ -1,5 +1,29 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { IProject } from '~/types'
+
+defineProps<{
+  item: IProject
+}>()
+</script>
 
 <template>
-  <div></div>
+  <a
+    :href="item.url"
+    class="rounded-md bg-gray-50 px-4 py-3 decoration-none transition-colors dark:bg-gray-50/10 hover:bg-gray-100 dark:hover:bg-gray-50/20"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <div class="h-full flex items-center justify-center">
+      <div
+        v-if="item.icon"
+        class="mr-4 text-4xl"
+      >
+        <div :class="item.icon" />
+      </div>
+      <div class="flex-1">
+        <h3 class="text-sm font-medium">{{ item.name }}</h3>
+        <p class="text-sm font-normal op-50">{{ item.description }}</p>
+      </div>
+    </div>
+  </a>
 </template>

components/home/Projects.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import type { IProject } from '~/types'
+
+const projects = shallowRef<IProject[]>([
+  {
+    name: 'Prettier Now',
+    url: 'https://github.com/ntnyq/prettier-now',
+    description: 'Yet another @prettier browser extension',
+    icon: 'i-fluent-emoji-flat:toolbox',
+  },
+  {
+    name: 'Filter Now',
+    url: 'https://github.com/ntnyq/filter-now',
+    description: 'An offline tool help user to add CSS based filter to image',
+    icon: 'i-fluent-emoji-flat:framed-picture',
+  },
+])
+</script>
+
+<template>
+  <div class="mb-4 mt-10">
+    <h2 class="mb-4 text-3xl font-bold">Projects</h2>
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <ProjectItem
+        v-for="project in projects"
+        :key="project.name"
+        :item="project"
+      />
+    </div>
+  </div>
+</template>

components/home/SocialItem.vue

@@ -1,13 +1,8 @@
 <script lang="ts" setup>
-interface SocialItem {
-  icon?: string
-  link?: string
-  class?: string
-  text?: string
-}
+import type { ISocial } from '~/types'
 
 defineProps<{
-  item: SocialItem
+  item: ISocial
 }>()
 </script>
 
@@ -23,7 +18,7 @@ defineProps<{
       v-if="item.icon"
       class="text-xl"
     >
-      <div :class="item.icon"></div>
+      <div :class="item.icon" />
     </div>
     <div
       v-if="item.text"

components/home/Socials.vue

@@ -1,21 +1,23 @@
 <script lang="ts" setup>
-const socialList = shallowRef([
+import type { ISocial } from '~/types'
+
+const socialList = shallowRef<ISocial[]>([
   {
     text: 'GitHub',
     link: 'https://github.com/ntnyq',
-    icon: 'i-ri-github-fill',
+    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',
+    icon: 'i-fa-brands:twitter',
     class: 'hover:bg-[#00ACEE]',
   },
   {
     text: '',
     link: 'https://space.bilibili.com/40199161',
-    icon: 'i-ri-bilibili-fill',
+    icon: 'i-ri:bilibili-fill',
     class: 'hover:bg-[#fb7299]',
   },
 ])

nuxt.config.ts

@@ -6,12 +6,7 @@
 export default defineNuxtConfig({
   modules: ['@vueuse/nuxt', '@unocss/nuxt', '@nuxt/content'],
 
-  css: [
-    '@unocss/reset/tailwind.css',
-    '~/styles/font.css',
-    '~/styles/vars.css',
-    '~/styles/index.css',
-  ],
+  css: ['@unocss/reset/tailwind.css', '~/styles/vars.css', '~/styles/index.css'],
 
   imports: {
     dirs: [
@@ -61,4 +56,6 @@ export default defineNuxtConfig({
       },
     },
   },
+
+  compatibilityDate: '2024-07-25',
 })

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "version": "0.0.0",
   "private": true,
-  "packageManager": "pnpm@9.4.0",
+  "packageManager": "pnpm@9.6.0",
   "description": "__TODO__",
   "keywords": [],
   "scripts": {
@@ -19,29 +19,29 @@
     "typecheck": "nuxt typecheck"
   },
   "dependencies": {
-    "@iconify/json": "^2.2.224",
-    "@nuxt/content": "^2.13.0",
-    "@unocss/nuxt": "^0.61.0",
+    "@iconify/json": "^2.2.230",
+    "@nuxt/content": "^2.13.2",
+    "@unocss/nuxt": "^0.61.5",
     "@vueuse/nuxt": "^10.11.0",
     "floating-vue": "^5.2.2",
-    "nuxt": "^3.12.2"
+    "nuxt": "^3.12.4"
   },
   "devDependencies": {
-    "@ntnyq/eslint-config": "^2.4.0",
+    "@ntnyq/eslint-config": "^2.7.1",
     "@ntnyq/prettier-config": "^1.21.2",
     "@types/prompts": "^2.4.9",
-    "@unocss/reset": "^0.61.0",
+    "@unocss/reset": "^0.61.5",
     "bumpp": "^9.4.1",
     "consola": "^3.2.3",
-    "eslint": "^9.6.0",
-    "husky": "^9.0.11",
+    "eslint": "^9.7.0",
+    "husky": "^9.1.1",
     "nano-staged": "^0.8.0",
-    "npm-run-all2": "^6.2.0",
-    "prettier": "^3.3.2",
+    "npm-run-all2": "^6.2.2",
+    "prettier": "^3.3.3",
     "prompts": "^2.4.2",
-    "tsx": "^4.16.0",
-    "typescript": "^5.5.3",
-    "unocss": "^0.61.0",
+    "tsx": "^4.16.2",
+    "typescript": "^5.5.4",
+    "unocss": "^0.61.5",
     "vue-tsx": "^1.0.13"
   },
   "pnpm": {

pages/index.vue

@@ -4,6 +4,7 @@
   <div class="mx-auto max-w-[76ch] px-6 py-[8vh] xl:text-lg dark:prose-invert">
     <Hero />
     <Socials />
+    <Projects />
     <Footer />
   </div>
 </template>