add announcement

src/components/Announcement.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+const { $trpc } = useNuxtApp()
+const announce = await $trpc.announcement.get.query()
+
+const appConfig = useAppConfig()
+function getColor() {
+  return `bg-${appConfig.ui.primary}-500`
+}
+</script>
+
+<template>
+  <div v-if="announce" class="w-full flex justify-center mt-8">
+    <div class="relative">
+      <h1 class="px-4 py-2 bg-white dark:bg-zinc-900 rounded-md border border-zinc-100 dark:border-zinc-300/10" v-html="announce.content" />
+      <span class="absolute -top-1 -right-1 flex h-3 w-3">
+        <span span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" :class="getColor()" />
+        <span class="relative inline-flex rounded-full h-3 w-3" :class="getColor()" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<style>
+
+</style>

src/pages/index.vue

@@ -6,6 +6,7 @@ useHead({
 
 <template>
   <section>
+    <Announcement />
     <MainBanner />
   </section>
 </template>

src/pages/talents.vue

@@ -9,9 +9,7 @@ const { getCategories, talents, isFavorite, toggleFavorite, switchCategory, pend
 getCategories.value?.forEach(category => categories.value.push({ label: category.name, slug: category.slug }))
 
 const appConfig = useAppConfig()
-function getColor() {
-  return `text-${appConfig.ui.primary}-500`
-}
+const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
 </script>
 
 <template>
@@ -43,8 +41,8 @@ function getColor() {
     <div v-if="getCategories" class="flex gap-2 w-full items-center justify-between pb-2 border-b border-zinc-100 dark:border-zinc-700/40 mb-4">
       <div class="flex gap-2 overflow-x-scroll sm:overflow-x-hidden bg-gray-100 dark:bg-gray-800 rounded-lg p-1 relative">
         <div
-          class="category"
-          :class="{ 'current-category': isCategory('all') }"
+          class="relative px-3 py-1 text-sm font-medium rounded-md h-8 text-gray-500 dark:text-gray-400 min-w-fit flex items-center justify-center w-full focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white"
+          :class="{ 'text-gray-900 dark:text-white relative !bg-white dark:!bg-stone-900 rounded-md shadow-sm': isCategory('all') }"
           @click.prevent="switchCategory('all')"
         >
           All
@@ -52,8 +50,8 @@ function getColor() {
         <div
           v-for="category in getCategories"
           :key="category.slug"
-          class="category"
-          :class="{ 'current-category': isCategory(category.slug) }"
+          class="relative px-3 py-1 text-sm font-medium rounded-md h-8 text-gray-500 dark:text-gray-400 min-w-fit flex items-center justify-center w-full focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white"
+          :class="{ 'text-gray-900 dark:text-white relative !bg-white dark:!bg-stone-900 rounded-md shadow-sm': isCategory(category.slug) }"
           @click.prevent="switchCategory(category.slug)"
         >
           <p class="w-full">
@@ -122,7 +120,7 @@ function getColor() {
               {{ category.category.name }}
             </UBadge>
           </div>
-          <p class="relative z-10 mt-4 flex text-sm font-medium items-center" :class="getColor()">
+          <p class="relative z-10 mt-4 flex text-sm font-medium items-center" :class="getColor">
             <UIcon name="i-ph-link-bold" />
             <span class="ml-2">{{ talent.website.replace('https://', '') }}</span>
           </p>
@@ -144,15 +142,3 @@ function getColor() {
   </section>
 </template>
 
-<style lang="scss">
-.category {
-  @apply relative px-3 py-1 text-sm font-medium rounded-md h-8 text-gray-500 dark:text-gray-400 min-w-fit flex items-center justify-center w-full focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors duration-200 ease-out cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white
-}
-.current-category {
-  @apply text-gray-900 dark:text-white relative dark:bg-gray-900 rounded-md shadow-sm;
-  background-color: white !important;
-  @media (prefers-color-scheme: dark) {
-    background-color: rgb(23 23 23) !important;
-  }
-}
-</style>

src/pages/work.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 const appConfig = useAppConfig()
-function getColor() {
-  return `text-${appConfig.ui.primary}-500`
-}
+const getColor = computed(() => appConfig.ui.primary)
 
 useHead({
   title: 'My work • Arthur Danjou',
@@ -54,7 +52,7 @@ const { data: projects } = await useProjects()
               {{ tag }}
             </UBadge>
           </div>
-          <p class="relative z-10 mt-6 flex text-sm font-medium items-center" :class="getColor()">
+          <p class="relative z-10 mt-6 flex text-sm font-medium items-center" :class="getColor">
             <UIcon name="i-ph-link-bold" />
             <span class="ml-2">{{ project.link.replace('https://', '') }}</span>
           </p>

src/pages/writing/index.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 const appConfig = useAppConfig()
-function getColor() {
-  return `text-${appConfig.ui.primary}-500`
-}
+const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
 
 useHead({
   title: 'My Shelf • Arthur Danjou',
@@ -45,7 +43,7 @@ const { data: posts } = await usePosts()
                 <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
                   {{ post.description }}
                 </p>
-                <div class="relative z-10 mt-4 flex items-center gap-2 justify-center text-sm font-medium" :class="getColor()">
+                <div class="relative z-10 mt-4 flex items-center gap-2 justify-center text-sm font-medium" :class="getColor">
                   <p>Read article</p>
                   <UIcon name="i-ph-arrow-circle-right-bold" class="duration-300 group-hover:ml-2" />
                 </div>