chore: separate frontend from backend

app/composables/useApi.ts

@@ -0,0 +1,32 @@
+import type { FetchOptions } from 'ofetch';
+
+export const useApi = () => {
+  const config = useRuntimeConfig();
+  const apiFetch = $fetch.create({
+    baseURL: config.public.apiBase,
+  });
+
+  const get = <T>(url: string, options?: FetchOptions) => apiFetch<T>(url, { method: 'GET', ...options });
+
+  const post = <ResultT, PayloadT = Record<string, string | number | boolean>>(
+    url: string,
+    body?: PayloadT,
+    options?: FetchOptions,
+  ) => apiFetch<ResultT>(url, { method: 'POST', body, ...options });
+
+  const put = <ResultT, PayloadT = Record<string, string | number | boolean>>(
+    url: string,
+    body?: PayloadT,
+    options?: FetchOptions,
+  ) => apiFetch<ResultT>(url, { method: 'PUT', body, ...options });
+
+  const patch = <ResultT, PayloadT = Record<string, string | number | boolean>>(
+    url: string,
+    body?: PayloadT,
+    options?: FetchOptions,
+  ) => apiFetch<ResultT>(url, { method: 'PATCH', body, ...options });
+
+  const del = <T>(url: string, options?: FetchOptions) => apiFetch<T>(url, { method: 'DELETE', ...options });
+
+  return { get, post, put, patch, del };
+};

app/composables/useBackend.ts

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

app/composables/useDataJson.ts

@@ -0,0 +1,64 @@
+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 getData = async <T>(
+    collectionPrefix: string,
+    options: {
+      useFilter?: boolean;
+      fallbackToEnglish?: boolean;
+      extractMeta?: boolean;
+    } = {},
+  ) => {
+    const { useFilter = false, fallbackToEnglish = false, extractMeta = false } = options;
+    const { data } = await useAsyncData(
+      key.value,
+      async () => {
+        const collection = (collectionPrefix + locale.value) as keyof Collections;
+
+        let content;
+        if (useFilter) {
+          // For data collections, use .all() and filter
+          const allData = await queryCollection(collection).all();
+          content = allData.filter((source) => source.meta.path == slug.value)[0];
+        } else {
+          // For page collections, use .path().first()
+          content = await queryCollection(collection).path(slug.value).first();
+          if (!content && fallbackToEnglish && locale.value !== 'en') {
+            content = await queryCollection('content_en').path(slug.value).first();
+          }
+        }
+
+        return extractMeta ? content?.meta : content;
+      },
+      {
+        watch: [locale], // Automatically refresh when locale changes
+      },
+    );
+    return data as Ref<T | null>;
+  };
+
+  const getJsonData = async (collectionPrefix: string = 'content_data_') => {
+    return getData(collectionPrefix, { useFilter: true, extractMeta: true });
+  };
+
+  const getPageContent = async (collectionPrefix: string = 'content_', fallbackToEnglish: boolean = true) => {
+    return getData(collectionPrefix, { fallbackToEnglish });
+  };
+
+  const getCachedData = () => {
+    const { data } = useNuxtData(key.value);
+    return data;
+  };
+
+  return { getJsonData, getPageContent, getCachedData };
+};

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,
+  });
+};