feat: enhance routing metadata to include suffix option for titles

Author: BloomyInDev

src/main.ts

@@ -21,7 +21,12 @@ export const createApp = ViteSSG(
                 path: "/about",
                 component: () => import("@views/AboutView.vue"),
                 meta: {
-                    title: { default: false, composed: false, content: "À propos" },
+                    title: {
+                        default: false,
+                        composed: false,
+                        content: "À propos",
+                        withSuffix: false,
+                    },
                     description: { default: true },
                     dontPregenerate: false,
                 } satisfies CustomRouteMetadata,
@@ -30,7 +35,12 @@ export const createApp = ViteSSG(
                 path: "/projects",
                 component: () => import("@views/ProjectsView.vue"),
                 meta: {
-                    title: { default: false, composed: false, content: "Projets" },
+                    title: {
+                        default: false,
+                        composed: false,
+                        content: "Projets",
+                        withSuffix: false,
+                    },
                     description: {
                         default: false,
                         composed: false,
@@ -51,6 +61,7 @@ export const createApp = ViteSSG(
                             const params = args as { projectName: string }
                             return `Projet "${params.projectName}"`
                         },
+                        withSuffix: false,
                     },
                     description: {
                         default: false,
@@ -67,7 +78,12 @@ export const createApp = ViteSSG(
                 path: "/404",
                 component: () => import("@views/NotFoundView.vue"),
                 meta: {
-                    title: { default: false, composed: false, content: "Page non trouvée" },
+                    title: {
+                        default: false,
+                        composed: false,
+                        content: "Page non trouvée",
+                        withSuffix: false,
+                    },
                     description: { default: true },
                     dontPregenerate: false,
                 } satisfies CustomRouteMetadata,

src/script/routing.ts

@@ -8,6 +8,10 @@ const DEFAULTS = {
     description: "Portfolio de Bastien Luben - Développeur",
 }
 
+const addSuffixIfNeeded = (title: string, withSuffix: boolean) => {
+    return withSuffix ? `${title} - ${DEFAULTS.title}` : title
+}
+
 export function usePageHead(args: unknown = {}) {
     const route = useRoute()
 
@@ -18,8 +22,8 @@ export function usePageHead(args: unknown = {}) {
 
         const t = meta.value.title
         if (t.default) return DEFAULTS.title
-        if (t.composed) return `${t.content(args)} - ${DEFAULTS.title}`
-        return `${t.content} - ${DEFAULTS.title}`
+        else if (t.composed) return addSuffixIfNeeded(t.content(args), t.withSuffix)
+        return addSuffixIfNeeded(t.content, t.withSuffix)
     })
 
     const description = computed(() => {

src/types.ts

@@ -5,7 +5,16 @@ export interface ITimeline {
     dateToString: string
 }
 
-type ComposedOrNotComposed = { composed: true; content: (args: unknown) => string } | { composed: false; content: string }
-type DefaultOrCustom = { default: true } | ({ default: false } & ComposedOrNotComposed)
+type ComposedOrNotComposed<T extends object = object> =
+    | ({ composed: true; content: (args: unknown) => string } & T)
+    | ({ composed: false; content: string } & T)
 
-export type CustomRouteMetadata = { title: DefaultOrCustom, description: DefaultOrCustom, dontPregenerate: boolean }
+type ComposedOrNotComposedAndWithWithoutSuffix = ComposedOrNotComposed<{ withSuffix: boolean }>
+
+type DefaultOrCustom<T extends ComposedOrNotComposed> = { default: true } | ({ default: false } & T)
+
+export type CustomRouteMetadata = {
+    title: DefaultOrCustom<ComposedOrNotComposedAndWithWithoutSuffix>
+    description: DefaultOrCustom<ComposedOrNotComposed>
+    dontPregenerate: boolean
+}