fix seo meta

HugoRCD · Jan 13, 2025 · 5ffc736 · 5ffc736
1 parent 72b82a3
commit 5ffc736
Show file tree

Hide file tree

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

diff --git a/app/components/FolioMeta.vue b/app/components/FolioMeta.vue
@@ -1,45 +1,48 @@
 <script setup lang="ts">
+import type { ContentEnCollectionItem, ContentFrCollectionItem } from '@nuxt/content'
+
 useScriptPlausibleAnalytics({
   domain: 'canvas.hrcd.fr',
   scriptInput: {
     src: 'https://analytics.hrcd.fr/js/script.js',
   },
 })
 
+const { page, isWriting } = defineProps<{
+  page: ContentEnCollectionItem | ContentFrCollectionItem
+  isWriting: boolean
+}>()
+
 const route = useRoute()
 const { link, seo, profile } = useAppConfig()
 
-const getPageSEO = () => ({
-  title: seo.title,
-  description: seo.description,
-})
-
-const isWriting = computed(() => route.path.includes('/articles/'))
+const pageSEO = computed(() => ({
+  title: isWriting ? page?.title : page?.title || seo.title,
+  description: isWriting ? page?.description : page?.description || seo.description,
+}))
 
 const getTitleTemplate = (title: string | undefined) => {
   if (route.path === '/') return title || `${seo.title}`
-  if (isWriting.value) return title
+  if (isWriting) return title
   return `${title} | ${seo.title}`
 }
 
-const pageSEO = getPageSEO()
-
 useSeoMeta({
   ogSiteName: seo.title,
-  ogTitle: pageSEO.title,
-  ogDescription: pageSEO.description,
-  ogType: 'website',
+  ogTitle: pageSEO.value.title,
+  ogDescription: pageSEO.value.description,
+  ogType: isWriting ? 'article' : 'website',
   ogUrl: seo.url,
   author: profile.name,
-  title: pageSEO.title,
-  description: pageSEO.description,
-  twitterTitle: pageSEO.title,
-  twitterDescription: pageSEO.description,
+  title: pageSEO.value.title,
+  description: pageSEO.value.description,
+  twitterTitle: pageSEO.value.title,
+  twitterDescription: pageSEO.value.description,
   twitterCard: 'summary_large_image',
 })
 
 useHead({
-  title: seo.title,
+  title: pageSEO.value.title,
   titleTemplate: getTitleTemplate,
   meta: [
     { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },

diff --git a/app/pages/[...slug].vue b/app/pages/[...slug].vue
@@ -30,9 +30,14 @@ defineShortcuts({
 </script>
 
 <template>
-  <ContentRenderer
-    v-if="page"
-    :dir="localeProperties?.dir ?? 'ltr'"
-    :value="page"
-  />
+  <div v-if="page">
+    <FolioMeta
+      :page
+      :is-writing="route.path.includes('/articles/')"
+    />
+    <ContentRenderer
+      :dir="localeProperties?.dir ?? 'ltr'"
+      :value="page"
+    />
+  </div>
 </template>
diff --git a/app/pages/articles/[...slug].vue b/app/pages/articles/[...slug].vue
@@ -37,7 +37,11 @@ defineOgImage({
 </script>
 
 <template>
-  <div>
+  <div v-if="page">
+    <FolioMeta
+      :page
+      :is-writing="route.path.includes('/articles/')"
+    />
     <NuxtLink
       to="/writing"
       class="mx-auto my-8 flex cursor-pointer items-center gap-2 px-4 text-muted hover:text-primary transition-colors duration-200 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl"

diff --git a/content/en/2.works.md b/content/en/2.works.md
@@ -1,5 +1,6 @@
 ---
 title: Projects
+description: A list of projects I've worked on
 ---
 
 ::works

diff --git a/content/en/3.writing.md b/content/en/3.writing.md
@@ -1,5 +1,6 @@
 ---
 title: Writing
+description: Some writings on topics that are close to my heart
 ---
 
 ::writing

diff --git a/content/en/4.about.md b/content/en/4.about.md
@@ -1,5 +1,6 @@
 ---
 title: About
+description: Developer and art director based in Nice, France. With over 6 years of experience in the field, I enjoy blending beauty, design and technology to create unique, bespoke web experiences that exceed my clients' expectations.
 ---
 
 ::about

diff --git a/content/en/5.contact.md b/content/en/5.contact.md
@@ -1,5 +1,8 @@
 ---
 title: Contact
+description: I'm always open to new projects, opportunities, and collaborations.
+  If you have a project in mind, and you think I can help you, or even if you
+  just want to ask me something, feel free to reach out to me.
 ---
 
 ::contact

diff --git a/content/en/articles/5-amazing-raycast-nuxt-snippets.md b/content/en/articles/5-amazing-raycast-nuxt-snippets.md
@@ -29,22 +29,22 @@ The `!comp` snippet is a basic yet powerful template for creating new Vue compon
 
 **Usage Example:** Use `!comp` to quickly create new Vue components, ensuring consistency and saving time on setup.
 
-```vue
+```vue [MyComponent.vue]
 <script setup lang="ts">
 import type { PropType } from "vue";
 
 const props = defineProps({
-  item: {
-    type: String,
-    required: true
-  }
+ item: {
+  type: String, 
+  required: true
+ }
 });
 </script>
 
 <template>
-  <div>
-    <h1>{{ item }}</h1>
-  </div>
+  <div>
+    <h1>{{ item }}</h1>
+  </div>
 </template>
 
 <style scoped>
@@ -58,7 +58,7 @@ Handling API requests is a common task in modern web applications. The `!api` sn
 
 **Usage Example:** Implement the `!api` snippet for creating efficient API routes in your Nuxt application, especially when dealing with CRUD operations.
 
-```ts
+```ts [~/server/api/MyHandler.ts]
 import { H3Event } from "h3";
 
 export default defineEventHandler(async (event: H3Event) => {
@@ -73,7 +73,7 @@ State management is crucial in large-scale applications. The `!store` snippet ut
 
 **Usage Example:** Utilize `!store` for setting up store modules in your Nuxt/Vue app, managing state more effectively and cleanly. the { clipboard } while be replaced by your actual clipboard.
 
-```ts
+```ts [~/store/{clipboard}.ts]
 import { defineStore } from 'pinia';
 
 type {clipboard}Store = { 
@@ -103,7 +103,7 @@ Composable functions in Vue 3 bring reusability and organization to your code. T
 
 **Usage Example:** Use `!cps` for creating reusable composable functions that can be shared across components, enhancing code reusability and maintainability.
 
-```ts
+```ts [~/composables/useComposables.ts]
 export function use{clipboard}() {
   const {clipboard} = ref(null);
 
@@ -119,7 +119,7 @@ The `!fcomp` snippet is designed for fetching data using Vue's Composition API.
 
 **Usage Example:** Implement `!fcomp` in scenarios where you need to fetch data from an API, providing a robust structure for data fetching and state management.
 
-```vue
+```vue [MyComponent.vue]
 <script setup lang="ts">
 const { data, pending, error, refresh } = useFetch("your_url", { 
   immediate: false,

diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
+    "typecheck": "tsc --noEmit",
     "start": "node .output/server/index.mjs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"

diff --git a/server/api/sendEmail.ts b/server/api/sendEmail.ts
@@ -1,12 +1,11 @@
 import { Resend } from 'resend'
 import type { H3Event } from 'h3'
-import type { ContactEmail } from '~/types/ContactEmail'
 
 const resend = new Resend(process.env.NUXT_PRIVATE_RESEND_API_KEY)
 
 export default defineEventHandler(async (event: H3Event) => {
   try {
-    const body = (await readBody(event)) as ContactEmail
+    const body = (await readBody(event))
     const { email, subject, message, phone, fullname } = body
     return await resend.emails.send({
       from: 'HR Folio <[email protected]>',