enable about page

Author: TheAlbertDev

.vscode/settings.json

@@ -1,5 +1,7 @@
 {
   "typescript.inlayHints.parameterNames.enabled": "all",
   "editor.formatOnSave": false,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[astro]": { "editor.formatOnSave": true },
+  "[typescript]": { "editor.formatOnSave": true },
 }

src/components/Navbar.astro

@@ -50,9 +50,10 @@ const translatePath = useTranslatedPath(lang);
       <li>
         <a href={translatePath("/posts", lang)}>{t("nav.posts")}</a>
       </li>
-      <!-- <li>
+      <li>
         <a href={translatePath("/acerca-de", lang)}>{t("nav.about")}</a>
       </li>
+      <!-- 
       <li>
         <a href={translatePath("/contactar", lang)}>{t("nav.contact")}</a>
       </li> -->

src/content/config.ts

@@ -28,6 +28,11 @@ const postsCollection = defineCollection({
   }),
 });
 
+const pagesCollection = defineCollection({
+  type: "content",
+  schema: z.object({}),
+});
+
 const categoriesCollection = defineCollection({
   type: "data",
   schema: z.object({
@@ -37,18 +42,15 @@ const categoriesCollection = defineCollection({
 
 const authorsCollection = defineCollection({
   type: "data",
-  schema: 
-    z.object({
-      name: z.string(),
-      surname: z.string().optional(),
-      image: z.string(),
-      email: z.string().optional(),
-      socialMedia: z
-        .array(
-          z.object({ name: z.string(), icon: z.string(), link: z.string() }),
-        )
-        .optional(),
-    }),
+  schema: z.object({
+    name: z.string(),
+    surname: z.string().optional(),
+    image: z.string(),
+    email: z.string().optional(),
+    socialMedia: z
+      .array(z.object({ name: z.string(), icon: z.string(), link: z.string() }))
+      .optional(),
+  }),
 });
 
 const publicationsCollection = defineCollection({
@@ -73,6 +75,7 @@ const publicationsCollection = defineCollection({
 
 export const collections = {
   posts: postsCollection,
+  pages: pagesCollection,
   authors: authorsCollection,
   publications: publicationsCollection,
   categories: categoriesCollection,

src/content/pages/en/about.mdx

@@ -0,0 +1,3 @@
+---
+---
+Shit

src/content/pages/es/acerca-de.mdx

@@ -0,0 +1,3 @@
+---
+---
+Caca

src/i18n/utils.ts

@@ -6,6 +6,15 @@ export function getLangFromUrl(url: URL) {
   return defaultLang;
 }
 
+export function getUrlWithoutLang(url: URL): string {
+  const pathParts = url.pathname.split("/").filter(Boolean);
+  const lang = pathParts.length > 0 ? pathParts[0] : undefined;
+  if (lang && lang in ui) {
+    return pathParts.slice(1).join("/");
+  }
+  return url.pathname.startsWith("/") ? url.pathname.slice(1) : url.pathname;
+}
+
 export function useTranslations(lang: keyof typeof ui) {
   return function t(key: keyof (typeof ui)[typeof defaultLang]) {
     // @ts-ignore

src/pages/[...lang]/[...about].astro

@@ -1,15 +1,18 @@
 ---
 import Layout from "../../layouts/Layout.astro";
+import { getEntry } from "astro:content";
 import { languages, defaultLang } from "../../i18n/ui";
 import {
   getLangFromUrl,
+  getUrlWithoutLang,
   useTranslatedPath,
   useTranslations,
 } from "../../i18n/utils";
 
 export function getStaticPaths() {
   return Object.keys(languages).map((lang) => {
     const translatePath = useTranslatedPath(lang as keyof typeof languages);
+    let pipi = translatePath("acerca-de").split("/").pop();
     return {
       params: {
         lang: lang !== defaultLang ? lang : undefined,
@@ -20,8 +23,9 @@ export function getStaticPaths() {
 }
 
 const lang = getLangFromUrl(Astro.url);
-
+const slug = getUrlWithoutLang(Astro.url);
 const t = useTranslations((lang ?? defaultLang) as keyof typeof languages);
+const page = (await getEntry("pages", `${lang}/${slug}`))!;
 ---
 
-<Layout title={t("nav.contact")}>Hola</Layout>
+<Layout title={t("nav.about")}>{page.body}</Layout>