Working on home page

2026-01-26 17:40:25 +01:00 · 2024-08-22 16:14:29 +02:00
parent 30b734ca8e
commit e56c8bb1af
30 changed files with 1116 additions and 1495 deletions
--- a/app/app.vue
+++ b/app/app.vue
@@ -3,50 +3,38 @@ useHead({
  link: [{ rel: 'icon', type: 'image/png', href: '/favicon.ico' }],
 })

-const head = useLocaleHead({
-  addDirAttribute: true,
-  identifierAttribute: 'id',
-  addSeoAttributes: true,
+const date = ref<Date>(new Date())
+onMounted(() => {
+  setInterval(() => date.value = new Date(), 1000)
 })
+
+const apps = await queryContent('/').find()
+const nuxt = apps.filter(app => app._dir === 'nuxt')
+const perso = apps.filter(app => app._dir === 'perso')
+const maths = apps.filter(app => app._dir === 'maths')
+const social = apps.filter(app => app._dir === 'social')
 </script>

 <template>
-  <Html
-    :dir="head.htmlAttrs.dir"
-    :lang="head.htmlAttrs.lang"
-  >
-    <Head>
-      <template
-        v-for="link in head.link"
-        :key="link.id"
-      >
-        <Link
-          :id="link.id"
-          :href="link.href"
-          :hreflang="link.hreflang"
-          :rel="link.rel"
-        />
-      </template>
-      <template
-        v-for="meta in head.meta"
-        :key="meta.id"
-      >
-        <Meta
-          :id="meta.id"
-          :content="meta.content"
-          :property="meta.property"
-        />
-      </template>
-    </Head>
-    <Body>
-      <div>
-        <NuxtLoadingIndicator color="#808080" />
-        <UContainer>
-          <NuxtPage />
-        </UContainer>
+  <div>
+    <NuxtLoadingIndicator color="#808080" />
+    <UContainer class="my-8">
+      <div v-if="date" class="flex flex-col items-center">
+        <h1 class="text-6xl font-bold">
+          {{ useDateFormat(date, 'HH:mm') }}
+        </h1>
+        <h1 class="text-2xl">
+          {{ useDateFormat(date, 'dddd D MMMM YYYY', { locales: () => 'fr-FR' }) }}
+        </h1>
      </div>
-    </Body>
-  </Html>
+      <div v-if="apps" class="space-y-12">
+        <Application title="Personal" :apps="perso" />
+        <Application title="Social" :apps="social" />
+        <Application title="Nuxt" :apps="nuxt" />
+        <Application title="Mathematics" :apps="maths" />
+      </div>
+    </UContainer>
+  </div>
 </template>

 <style>
--- a/app/components/Application.vue
+++ b/app/components/Application.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { AppType } from '~~/types/types'
+
+defineProps<{
+  title: string
+  apps: AppType[]
+}>()
+</script>
+
+<template>
+  <div>
+    <h1 class="font-bold text-xl mb-4">
+      {{ title }}
+    </h1>
+    <div v-if="apps" class="grid grid-cols-5 gap-4">
+      <ULink v-for="app in apps" :key="app.name" :to="app.url" target="_blank">
+        <UCard :ui="{ body: { base: 'space-y-4' } }">
+          <div v-if="app.nuxt" class="text-xl flex gap-1 items-center">
+            <UIcon :name="app.icon" />
+            <div class="flex">
+              <p>{{ app.name }}</p>
+              <p :class="`text-${app.color}-400 font-medium`">
+                {{ app.nuxt }}
+              </p>
+            </div>
+          </div>
+          <div v-else class="text-xl flex gap-1 items-center" :class="`text-${app.color}-400 font-medium`">
+            <UIcon :name="app.icon" />
+            <p>{{ app.name }}</p>
+          </div>
+          <div class="flex gap-1">
+            <UBadge
+              v-for="tag in app.tags"
+              :key="tag.name"
+              variant="soft"
+              :label="tag.name"
+              :color="tag.color"
+              :ui="{ rounded: 'rounded-full' }"
+            />
+          </div>
+        </UCard>
+      </ULink>
+    </div>
+  </div>
+</template>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div>
-    <h1>Home</h1>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
--- a/app/tailwind.config.ts
+++ b/app/tailwind.config.ts
@@ -0,0 +1,25 @@
+import type { Config } from 'tailwindcss'
+import typography from '@tailwindcss/typography'
+
+export default <Partial<Config>>{
+  content: [
+    './components/**/*.{vue,js,ts}',
+    './layouts/**/*.vue',
+    './pages/**/*.vue',
+    './composables/**/*.{js,ts}',
+    './plugins/**/*.{js,ts}',
+    './utils/**/*.{js,ts}',
+    './App.{js,ts,vue}',
+    './app.{js,ts,vue}',
+    './Error.{js,ts,vue}',
+    './error.{js,ts,vue}',
+    './app.config.{js,ts}',
+    'content/**/*.md',
+  ],
+  theme: {
+    extend: {
+
+    },
+  },
+  plugins: [typography],
+}