feat: fill pages

frontend/app/composables/useApi.ts

@@ -0,0 +1,37 @@
+export function useApi() {
+  const config = useRuntimeConfig();
+  const backend = config.public.apiBase;
+  const commonBaseOptions = { baseURL: backend };
+
+  const get = (endpoint, options = {}) =>
+    useFetch(endpoint, {
+      method: 'GET',
+      ...commonBaseOptions,
+      ...options,
+    });
+
+  const post = (endpoint, body, options = {}) =>
+    $fetch(endpoint, {
+      method: 'POST',
+      body,
+      ...commonBaseOptions,
+      ...options,
+    });
+
+  const put = (endpoint, body, options = {}) =>
+    $fetch(endpoint, {
+      body,
+      method: 'PUT',
+      ...commonBaseOptions,
+      ...options,
+    });
+
+  const del = (endpoint, options = {}) =>
+    $fetch(endpoint, {
+      method: 'DELETE',
+      ...commonBaseOptions,
+      ...options,
+    });
+
+  return { get, post, put, del };
+}

frontend/app/composables/useBackend.ts

@@ -0,0 +1,8 @@
+export const useBackend = () => {
+  const api = useApi();
+
+  const getMeta = (options = {}) => api.get('/meta', options);
+  const postContact = (contact: ContactRequest, options = {}) =>
+    api.post('/contact', contact, options);
+  return { getMeta, postContact };
+};

frontend/app/composables/useDataJson.ts

@@ -0,0 +1,33 @@
+import { withLeadingSlash } from 'ufo';
+import type { Collections } from '@nuxt/content';
+
+export const useDataJson = (prefix: string) => {
+  const route = useRoute();
+  const { locale } = useI18n();
+
+  const slug = computed(() => {
+    // Use route.params.slug for dynamic routes, or route.path for static routes
+    const slugValue = route.params.slug || route.path;
+    return withLeadingSlash(String(slugValue));
+  });
+  const key = computed(() => prefix + '-' + slug.value);
+
+  const getJsonData = async (collectionPrefix: string = 'content_data_') => {
+    const { data } = await useAsyncData(key.value, async () => {
+      const collection = (collectionPrefix + locale.value) as keyof Collections;
+      const allData = await queryCollection(collection).all();
+      const filtered = allData.filter((source) => source.meta.path == slug.value)[0];
+      return filtered?.meta;
+    }, {
+      watch: [locale], // Automatically refresh when locale changes
+    });
+    return data;
+  };
+
+  const getCachedData = () => {
+    const { data } = useNuxtData(key.value);
+    return data;
+  };
+
+  return { getJsonData, getCachedData };
+};

frontend/app/composables/useMeta.ts

@@ -0,0 +1,27 @@
+export interface MetaImageOptions {
+  url: string;
+  alt: string;
+}
+
+export interface MetaOptions {
+  title: string;
+  description: string;
+  image?: MetaImageOptions;
+}
+
+export const useMeta = (options: MetaOptions) => {
+  const titleSuffix = " – Lucien Cartier-Tilet";
+  useSeoMeta({
+    title: () => options.title + titleSuffix,
+    ogTitle: () => options.title + titleSuffix,
+    twitterTitle: () => options.title + titleSuffix,
+    description: () => options.description,
+    ogDescription: () => options.description,
+    twitterDescription: () => options.description,
+    twitterCard: options.image ? 'summary_large_image' : 'summary',
+    ogImage: () => options.image?.url,
+    ogImageAlt: () => options.image?.alt,
+    twitterImage: () => options.image?.url,
+    twitterImageAlt: () => options.image?.alt,
+  })
+}