wip

HugoRCD · Jan 13, 2025 · c0c9734 · c0c9734
1 parent 41ab948
commit c0c9734
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 49 deletions.
diff --git a/app/app.vue b/app/app.vue
@@ -12,7 +12,7 @@ const { locale } = useI18n()
   >
     <Body>
       <LayoutScrollToTop />
-      <!--      <FolioMeta /> -->
+      <FolioMeta />
       <NuxtLayout>
         <UApp :locale="locales[locale]">
           <NuxtPage />

diff --git a/app/assets/style/main.css b/app/assets/style/main.css
@@ -76,7 +76,7 @@ html, body, #__nuxt, #__layout {
 }
 
 .writing {
-  @apply antialiased font-geist text-neutral-700/90 dark:text-neutral-400/80 leading-relaxed;
+  @apply font-geist text-neutral-700/90 dark:text-neutral-300 leading-relaxed;
 
   h1 {
     @apply text-2xl sm:text-3xl text-zinc-900 dark:text-zinc-100 italic font-[600] mb-6 mt-8;

diff --git a/app/components/content/Works.vue b/app/components/content/Works.vue
@@ -1,14 +1,9 @@
 <script setup lang="ts">
-import { withLeadingSlash } from 'ufo'
-import type { Collections } from '@nuxt/content'
-
-const route = useRoute()
 const { locale } = useI18n()
 
-const slug = computed(() => withLeadingSlash(String(route.params.slug)))
-const { data: projects } = await useAsyncData('projects-' + slug.value, async () => {
-  const collection = ('projects_' + locale.value) as keyof Collections
-  return await queryCollection(collection).path(slug.value).first()
+const { data: projects } = await useAsyncData('projects', async () => {
+  const collection = ('projects_' + locale.value)
+  return await queryCollection(collection).all()
 }, {
   watch: [locale],
 })

diff --git a/app/components/content/Writing.vue b/app/components/content/Writing.vue
@@ -10,20 +10,20 @@ const route = useRoute()
 const { locale } = useI18n()
 
 const slug = computed(() => withLeadingSlash(String(route.params.slug)))
-const { data } = await useAsyncData('articles-' + slug.value, async () => {
+const { data: articles } = await useAsyncData('articles-' + slug.value, async () => {
   const collection = ('articles_' + locale.value) as keyof Collections
-  return await queryCollection(collection).path(slug.value).first()
+  return await queryCollection(collection).all()
 }, {
   watch: [locale],
 })
+console.log(articles.value)
 
-if (!data.value)
+if (!articles.value)
   throw createError({ statusCode: 404, statusMessage: 'Page not found' })
 
-const articles = computed(() => data.value)
-/* const tags = computed(() =>
+const tags = computed(() =>
   Array.from(new Set(articles.value.flatMap(article => article.tags))),
-) */
+)
 
 const filteredArticles = computed(() =>
   articles.value.filter(article =>
@@ -73,7 +73,7 @@ const toggleTag = (tag: string) => {
           :placeholder="$t('writing.search_article')"
         />
       </div>
-      <!--      <div
+      <div
         v-if="tags.length > 0"
         class="mb-4 flex flex-wrap gap-2"
       >
@@ -88,7 +88,7 @@ const toggleTag = (tag: string) => {
             {{ tag }}
           </div>
         </div>
-      </div> -->
+      </div>
     </div>
     <TransitionGroup
       v-if="filteredArticles.length"
@@ -98,13 +98,13 @@ const toggleTag = (tag: string) => {
     >
       <li
         v-for="article of filteredArticles"
-        :key="article._path"
+        :key="article.path"
       >
         <ArticleCard
           :title="article.title!"
           :date="article.date"
           :image="article.image"
-          :path="article._path!"
+          :path="article.path"
         />
       </li>
     </TransitionGroup>

diff --git a/app/components/home/Projects.vue b/app/components/home/Projects.vue
@@ -1,9 +1,15 @@
 <script setup lang="ts">
+import type { Collections } from '@nuxt/content'
+
 const { locale } = useI18n()
 
-const { data: projects } = await useAsyncData('projects', () => queryContent('/projects').locale(locale.value).sort({ release: -1 }).find(), {
+const { data: projects } = await useAsyncData('projects', async () => {
+  const collection = ('projects_' + locale.value) as keyof Collections
+  return await queryCollection(collection).all()
+}, {
   watch: [locale],
 })
+console.log(projects.value)
 </script>
 
 <template>

diff --git a/app/components/project/Card.vue b/app/components/project/Card.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
-import type { Project } from '~/data/projects'
-
-defineProps({
+defineProps<{
   project: {
-    type: Object as PropType<Project>,
-    required: true,
-  },
-})
+    name: string
+    release: string
+    image: string
+    link: string
+  }
+}>()
 const img = useImage()
 </script>
 
@@ -37,14 +36,6 @@ const img = useImage()
       <div class="rounded-t-lg border-x border-t border-white/10 border-b-transparent px-4 py-[5px] shadow-md backdrop-blur-md sm:w-2/3">
         <div class="flex items-center justify-between gap-2">
           <div class="flex items-center gap-2">
-            <component
-              :is="project.logo"
-              v-if="project.name !== 'Sekoïa'"
-              :alt="project.name + ' logo'"
-              :aria-label="project.name + ' logo'"
-              :font-controlled="false"
-              class="size-5 text-white/90"
-            />
             <div class="flex items-center gap-2">
               <span class="whitespace-nowrap text-sm font-semibold text-white/90">
                 {{ project.name }}

diff --git a/app/pages/articles/[...slug].vue b/app/pages/articles/[...slug].vue
@@ -1,15 +1,18 @@
 <script lang="ts" setup>
-const { t, locale } = useI18n()
+import type { Collections } from '@nuxt/content'
 
 const route = useRoute()
+const { locale, t, localeProperties } = useI18n()
 
-const { data: page } = await useAsyncData(route.path, () => queryContent(route.path).locale(locale.value).findOne(), {
+const { data: page } = await useAsyncData(route.path, async () => {
+  const collection = ('articles_' + locale.value) as keyof Collections
+  return await queryCollection(collection).path(route.path).first()
+}, {
   watch: [locale],
 })
 
-if (!page.value) throw createError({ statusCode: 404, statusMessage: 'Page not found' })
-
-useContentHead(page.value)
+if (!page.value)
+  throw createError({ statusCode: 404, statusMessage: 'Page not found' })
 
 const { copy } = useClipboard()
 
@@ -65,14 +68,18 @@ defineOgImage({
           :shortcuts="['⌘', 'K']"
         >
           <p
-            class="flex cursor-pointer select-none items-center gap-1 transition-colors duration-200"
+            class="flex cursor-pointer select-none items-center gap-1 transition-colors duration-200 hover:text-primary"
             @click="copyArticleLink"
           >
             {{ $t("writing.share") }}
           </p>
         </UTooltip>
       </div>
-      <ContentRenderer :value="page" />
+      <ContentRenderer
+        v-if="page"
+        :dir="localeProperties?.dir ?? 'ltr'"
+        :value="page"
+      />
     </article>
   </div>
 </template>

diff --git a/content.config.ts b/content.config.ts
@@ -6,12 +6,22 @@ const commonContentSchema = z.object({
   date: z.string().nonempty(),
 })
 
+const commonArticleSchema = z.object({
+  title: z.string().nonempty(),
+  description: z.string().nonempty(),
+  date: z.string().nonempty(),
+  image: z.string().url(),
+  readingTime: z.string().nonempty(),
+  tags: z.array(z.string().nonempty()),
+})
+
 const commonProjectSchema = z.object({
   name: z.string().nonempty(),
   image: z.string().url(),
   link: z.string().url(),
   release: z.string().nonempty(),
   date: z.string().nonempty(),
+  featured: z.boolean(),
 })
 
 const commonFaqSchema = z.object({
@@ -49,13 +59,19 @@ export const collections = {
   }),
   articles_en: defineCollection({
     type: 'page',
-    source: 'en/articles/*.md',
-    schema: commonContentSchema,
+    source: {
+      include: 'en/articles/*.md',
+      prefix: '/articles',
+    },
+    schema: commonArticleSchema,
   }),
   articles_fr: defineCollection({
     type: 'page',
-    source: 'fr/articles/*.md',
-    schema: commonContentSchema,
+    source: {
+      include: 'fr/articles/*.md',
+      prefix: '/articles',
+    },
+    schema: commonArticleSchema,
   }),
   projects_en: defineCollection({
     type: 'data',

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -37,6 +37,9 @@ export default defineNuxtConfig({
   },
 
   content: {
+    renderer: {
+      anchorLinks: false,
+    },
     studio: {
       enabled: true,
       dev: true,
@@ -89,7 +92,7 @@ export default defineNuxtConfig({
       { code: 'en', name: 'English', language: 'en-US', dir: 'ltr' },
       { code: 'fr', name: 'French', language: 'fr-FR' },
     ],
-    strategy: 'no_prefix',
+    strategy: 'prefix_except_default',
     defaultLocale: 'en',
     vueI18n: '~/i18n.config.ts',
   },