chore: update

app.vue

@@ -34,13 +34,11 @@ useHead({
 </script>
 
 <template>
-  <div>
-    <NuxtLoadingIndicator
-      :height="1"
-      color="repeating-linear-gradient(to right,rgba(192,132,252,1) 0%,rgba(248,113,113,1) 50%,rgba(45,212,191,1) 100%)"
-    />
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </div>
+  <NuxtLoadingIndicator
+    :height="1"
+    color="repeating-linear-gradient(to right,rgba(192,132,252,1) 0%,rgba(248,113,113,1) 50%,rgba(45,212,191,1) 100%)"
+  />
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>

components/ImgBlurHash.vue

@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { decode } from 'blurhash'
+
+// Props
+interface Props {
+  mode?: string
+  blurhash?: string
+  src: string
+  srcset?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'img',
+})
+
+// Refs and state
+const placeholderSrc = ref<string>()
+const isLoaded = ref(false)
+const isImgMode = props.mode === 'img'
+const attrs = useAttrs()
+const url = computed(() => isLoaded.value || !placeholderSrc.value ? props.src : placeholderSrc.value)
+
+// Utility function for creating a data URL from an array of pixels
+function getDataUrlFromArr(arr: Uint8ClampedArray, w: number, h: number) {
+  if (typeof w === 'undefined' || typeof h === 'undefined')
+    w = h = Math.sqrt(arr.length / 4)
+
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')!
+
+  canvas.width = w
+  canvas.height = h
+
+  const imgData = ctx.createImageData(w, h)
+  imgData.data.set(arr)
+  ctx.putImageData(imgData, 0, 0)
+
+  return canvas.toDataURL()
+}
+
+onMounted(() => {
+  // Create a temporary image to check when the image has loaded
+  const img = document.createElement('img')
+  img.onload = () => {
+    isLoaded.value = true
+  }
+  img.src = props.src
+  if (props.srcset)
+    img.srcset = props.srcset
+
+  // Fallback to mark as loaded after a timeout in case the image takes too long
+  setTimeout(() => {
+    isLoaded.value = true
+  }, 3000)
+
+  // Decode the blurhash if available
+  if (props.blurhash) {
+    const pixels = decode(props.blurhash, 32, 32)
+    placeholderSrc.value = getDataUrlFromArr(pixels, 32, 32)
+  }
+})
+</script>
+
+<template>
+  <img v-if="isImgMode" v-bind="attrs" :src="url" :srcset>
+  <div v-else v-bind="attrs" :style="{ backgroundImage: `url(${url})`, backgroundSize: 'cover' }" />
+</template>

components/nav/NavFooter.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer backdrop-blur py-2 fbc min-w-65ch w-fit ma gap-6>
+  <footer backdrop-blur py-2 fbc min-w-65ch w-fit mxa gap-6>
     <div font-dank text="xs gray4" fsc flex-wrap gap-3>
       <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2022005364号</a>
       <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>

components/nav/NavHeader.vue

@@ -1,16 +1,22 @@
 <script lang="ts" setup>
-const routes = reactive<{ icon?: string, path: string, text?: string }[]>([
-  // { path: '/posts', text: 'Blog' },
-  { path: '/projects', text: 'Projects' },
-  // { path: '/talks', text: 'Talks' },
+interface Menu {
+  icon?: string
+  path: string
+  text?: string
+}
+
+const routes = reactive<Menu[]>([
+  { path: '/posts', icon: 'i-ri-blogger-line' },
+  { path: '/projects', icon: 'i-ri-dashboard-line' },
+  { path: '/talks', icon: 'i-ri-file-ppt-line' },
 ])
 
 const route = useRoute()
 const inHome = computed(() => route.path === '/')
 </script>
 
 <template>
-  <header fixed z-9999 top-0 inset-x-0 trans backdrop-blur fcc px-8 pl-4>
+  <header sticky z-999 top-0 trans backdrop-blur fcc px-6>
     <nav w-full :class="inHome ? 'fcc' : 'fbc'">
       <div v-show="!inHome">
         <NuxtLink to="/" title="Home">
@@ -24,7 +30,7 @@ const inHome = computed(() => route.path === '/')
           :title="_route.path.slice(1, 2).toUpperCase() + _route.path.slice(2).toLowerCase()"
         >
           <span v-if="_route.text" icon-text>{{ _route.text }}</span>
-          <div v-if="_route.icon" icon-btn :class="_route.icon" />
+          <i v-if="_route.icon" icon-btn :class="_route.icon" />
         </NuxtLink>
 
         <a title="Twitter" href="https://twitter.com/chris_zyyv" target="_blank" icon-link i-ri:twitter-line />

components/repo/RepoCard.vue

@@ -19,7 +19,7 @@ defineProps<{
     dark-hover="bg-white bg-op-3"
   >
     <a :href="repo.homepage || repo.html_url" target="_blank" decoration-none flex="~ col gap-3" h-full>
-      <h5 m0 fsc gap-1 text-sm>
+      <h5 fsc gap-1 text-sm>
         <i i-ri:git-repository-line />
         <span>{{ repo.name }}</span>
         <span
@@ -32,10 +32,10 @@ defineProps<{
           {{ repo.is_template ? 'Template' : '' }}
         </span>
       </h5>
-      <p m0 flex-1>
+      <p flex-1>
         {{ repo.description }}
       </p>
-      <p fsc gap-4 m0>
+      <p fsc gap-4>
         <span v-if="repo.language" fsc gap-1>
           <i
             w-3

layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <NavHeader />
-  <main>
+  <main flex="~ col 1">
     <!-- <router-view v-slot="{ Component, route }">
         <transition
           enter-active-class="animate-fade-in animate-duration-500"

nuxt.config.ts

@@ -21,10 +21,6 @@ export default defineNuxtConfig({
     '~/styles/vars.css',
   ],
 
-  devtools: {
-    enabled: false,
-  },
-
   // content: {
   //   highlight: {
   //     theme: 'vitesse-dark',
@@ -36,9 +32,10 @@ export default defineNuxtConfig({
   //   },
   //   documentDriven: true,
   // },
-  app: {
-    keepalive: true,
-  },
+
+  // app: {
+  //   keepalive: true,
+  // },
 
   vite: {
     define: {

package.json

@@ -5,7 +5,6 @@
   "packageManager": "pnpm@9.11.0",
   "description": "Chris' blog build with Nuxt3.",
   "author": "Chris <https://github.com/zyyv>",
-  "license": "MIT",
   "homepage": "https://github.com/zyyv/chris.me#readme",
   "repository": {
     "type": "git",

pages/index.vue

@@ -5,7 +5,7 @@ useHead({
 </script>
 
 <template>
-  <div fcc size-screen>
+  <div flex-1 fccc>
     <PersonInfo />
     <!-- <p>
       I have diverse interests, including watching anime, mountain climbing, music appreciation, foreign language acquisition, gaming,

pages/posts.vue

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

pages/projects.vue

@@ -22,8 +22,15 @@ useHead({
 </script>
 
 <template>
-  <div prose ma pt-18>
+  <div ma max-w-65ch>
     <PageHeader title="Projects" description="List of projects that I am proud of." />
-    <RepoPanel v-for="(repos, key) in repoGroup" :key="key" :label="key" :data="repos" />
+    <template v-for="(repos, key) in repoGroup" :key="key">
+      <h4>
+        {{ key }}
+      </h4>
+      <div grid="~ cols-1 md:cols-2 gap-4">
+        <RepoCard v-for="repo in repos" :key="repo.id" :repo="repo" />
+      </div>
+    </template>
   </div>
 </template>

pages/talks.vue

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

server/api/contribution.ts

@@ -6,5 +6,6 @@ export default defineEventHandler(async (event) => {
 
   const { name, year } = getQuery(event)
   const API = `https://github-contributions-api.jogruber.de/v4/${name}?y=${year}`
+
   return $fetch<ContributeData>(API)
 })

server/api/repos.ts

@@ -1,13 +1,12 @@
-// import { OctokitCtx } from '../constants'
 import type { Repo } from '~/types'
+import { useOctokit } from '../utils/github'
 
 export default defineEventHandler(async () => {
-  // const { data } = await OctokitCtx.rest.repos.listForAuthenticatedUser({
-  //   per_page: 100,
-  //   type: 'owner',
-  //   sort: 'updated',
-  // })
-  const data = await $fetch<Repo[]>('https://api.github.com/users/zyyv/repos?per_page=100&type=owner&sort=updated')
+  const { data } = await useOctokit().request('GET /user/repos', {
+    per_page: 100,
+    type: 'owner',
+    sort: 'updated',
+  })
 
   const publicRepos = data.filter(repo => !repo.private && !repo.archived)
   const publicAndNotForkRepos = publicRepos.filter(repo => !repo.fork)

server/api/user.ts

@@ -1,16 +1,6 @@
-// import { OctokitCtx } from '../constants'
-
-import type { User } from '~/types'
+import { useOctokit } from '../utils/github'
 
 export default defineEventHandler(async () => {
-  // const {
-  //   data,
-  // } = await OctokitCtx.rest.users.getAuthenticated()
-
-  // return data
-
-  if (import.meta.dev)
-    return (await import('~/mock/user.json')).default as User
-
-  return $fetch<User>('https://api.github.com/users/zyyv')
+  const { data } = await useOctokit().request('GET /user')
+  return data
 })