feat: update environment variables and API endpoints for improved configuration

.env.example

@@ -1,2 +1,5 @@
 NUXT_PUBLIC_I18N_BASE_URL=
-NUXT_ARTAPI=
+NUXT_API_URL=
+
+STUDIO_GITHUB_CLIENT_ID=
+STUDIO_GITHUB_CLIENT_SECRET=

app/components/home/Activity.vue

@@ -7,7 +7,7 @@ const { locale, locales, t } = useI18n({
   useScope: 'local',
 })
 
-const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch<Activity>('/api/activity'))
+const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'))
 
 useIntervalFn(async () => await refresh(), 5000)
 const codingActivity = computed(() => {
@@ -75,7 +75,7 @@ const getActivity = computed(() => {
   <ClientOnly>
     <div
       v-if="getActivity"
-      class="flex items-start gap-2"
+      class="flex items-start gap-2 mt-4"
     >
       <UTooltip :text="isActive ? t('tooltip.online') : t('tooltip.idling')">
         <div class="relative flex h-3 w-3 mt-2">

app/components/home/CatchPhrase.vue

@@ -9,10 +9,10 @@ const { t } = useI18n({
   <ClientOnly>
     <div
       v-if="width > 1024"
-      class="group text-[12px] italic flex items-center gap-1"
+      class="text-[12px] italic flex items-center gap-1 mt-4"
     >
       <UIcon
-        class="transform -rotate-12 duration-300 group-hover:animate-wave"
+        class="transform -rotate-12 duration-300 animate-wave"
         name="i-ph-hand-pointing-duotone"
       />
       <p>{{ t('quote') }}</p>

app/components/home/Quote.vue

@@ -11,7 +11,7 @@ const { t } = useI18n({
         <UTooltip text="It's me 👋">
           <UAvatar
             alt="Avatar"
-            class="hover:rotate-[360deg] duration-500 transform-gpu rounded-full"
+            class="hover:rotate-360 duration-500 transform-gpu rounded-full"
             size="xl"
             src="/favicon.webp"
           />

app/components/home/Stats.vue

@@ -7,10 +7,10 @@ const { locale, locales, t } = useI18n({
 })
 const currentLocale = computed(() => locales.value.find(l => l.code === locale.value))
 
-const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch())
+const { data: stats } = await useAsyncData<Stats>('stats', () => $fetch('/api/stats'))
 
-const time = useTimeAgo(new Date(stats.value!.coding.data.range.start) ?? new Date()).value.split(' ')[0]
-const date = useDateFormat(new Date(stats.value!.coding.data.range.start ?? new Date()), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
+const time = useTimeAgo(new Date(stats.value!.coding.data.range.start)).value.split(' ')[0]
+const date = useDateFormat(new Date(stats.value!.coding.data.range.start), 'DD MMMM YYYY', { locales: currentLocale.value?.code ?? 'en' })
 const hours = usePrecision(stats.value!.coding.data.grand_total.total_seconds_including_other_language / 3600, 0)
 </script>
 

app/pages/index.vue

@@ -16,9 +16,9 @@ const { data: page } = await useAsyncData(`/home/${locale.value}`, () => {
 <template>
   <main class="max-w-none! prose dark:prose-invert">
     <ContentRenderer v-if="page" :value="page" class="mt-8 md:mt-16" />
-    <!-- <HomeStats />
-    <HomeActivity />
+    <HomeStats />
+    <HomeActivity /> 
     <HomeQuote />
-    <HomeCatchPhrase /> -->
+    <HomeCatchPhrase />
   </main>
 </template>

nuxt.config.ts

@@ -101,7 +101,9 @@ export default defineNuxtConfig({
   },
 
   runtimeConfig: {
-    artapi: '',
+    api: {
+      url: ''
+    },
     public: {
       i18n: {
         baseUrl: '',

server/api/activity.get.ts

@@ -0,0 +1,4 @@
+export default defineEventHandler(async (event) => {
+    const config = useRuntimeConfig(event)
+    return await $fetch(`${config.api.url}/api/activity`)
+})

server/api/stats.get.ts

@@ -0,0 +1,4 @@
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig(event)
+  return await $fetch(`${config.api.url}/api/stats`)
+})