All pages i18n

src/components/Sidebar.astro

@@ -1,24 +1,29 @@
 ---
+import { getRelativeLocaleUrl } from 'astro:i18n';
+import { useTranslations } from '../i18n/utils';
+
 import ThemeIcon from './ThemeIcon.astro';
 type Props = Record<string, never>;
+const currentLocale = Astro.currentLocale ? Astro.currentLocale : 'es';
+const t = useTranslations(currentLocale);
 ---
 <nav class="sidebar sidebar-toggle">
   <div class="sidebar-content">
     <div>
-      <a aria-current="page" class="sidebar-home-link" href="/">
+      <a aria-current="page" class="sidebar-home-link" href={getRelativeLocaleUrl(currentLocale, '/')}>
         <svg width="128px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" class="sidebar-logo"><g stroke-linecap="round" stroke-linejoin="round" transform="matrix(2.5992 0 0 2.6021 2.21 -2612.5)"><path stroke="#009aa9" stroke-opacity="0.945" stroke-width="0.029" d="M22.549 1027.2h.082z"></path><ellipse cx="23.983" cy="1028.4" fill="#eee" stroke="#222" stroke-width="1.737" rx="23.114" ry="23.112"></ellipse><path stroke="#000" stroke-width="1.5" d="M38.549 1012.3c-3.642-.873-8.025-2.035-11.815-2.19v-3.066c5.12.414 10.803 3.76 11.815 5.256z"></path><path stroke="#222" stroke-width="0.31" d="M2.056 1025.7c.411-7.09 5.913-19.414 22.074-19.598l.135 5.042-1.633.04c-5.773.827-11.159 3.45-11.22 9.222.103 2.929 2.299 4.404 4.396 5.777-4.388-.228-9.802.026-13.72 0zm24.113 18.968c11.435-1.042 17.27-9.616 8.038-16.383 4.375-.01 7.622-.048 11.997-.054.84 13.29-10.061 22.795-19.923 23.26z"></path><path stroke="#000" stroke-width="1.5" d="m23.742 1044.8.067 5.797c-6.459-.21-14.178-5.153-17.122-9.267 1.837 2.53 13.91 3.29 17.055 3.47z"></path></g><path fill="#999" fill-rule="evenodd" stroke="#69bfc8" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.502" d="M8.847 60.481h114.32m-55.244 59.511V4.482"></path><ellipse cx="64.227" cy="63.833" fill="none" stroke="#009aa9" stroke-linecap="round" stroke-linejoin="round" stroke-width="5.721" opacity="0.99" rx="60.078" ry="60.141"></ellipse><path fill="none" stroke="#009aa9" stroke-linecap="round" stroke-linejoin="round" stroke-width="6.502" d="M12.808 93.614s78.093 25.717 86.601-8.86c5.983-24.314-32.906-24.406-32.906-24.406S18.548 57.069 37.579 31.54c19.216-18.928 49.484-9.47 73.241-5.04"></path></svg>
         <p class="sidebar-title">Sergio Carlos Orozco Torres</p>
         <p class="sidebar-subtitle">Software developer</p>
       </a>
       <hr class="sidebar-separator">
     </div>
     <div class="sidebar-links">
-      <a href="/about/">Sobre mi</a>
-      <a href="/charla/">Charlas</a>
-      <a href="/blog/">Blog</a>
-      <a href="/trabajo/">Trabajo</a>
-      <a href="/comunidad/">Comunidad</a>
-      <a href="/proyecto/">Proyectos</a>
+      <a href={getRelativeLocaleUrl(currentLocale, 'about')}>{t('nav.about')}</a>
+      <a href={getRelativeLocaleUrl(currentLocale, 'charla')}>{t('nav.talks')}</a>
+      <a href={getRelativeLocaleUrl(currentLocale, 'blog')}>{t('nav.blog')}</a>
+      <a href={getRelativeLocaleUrl(currentLocale, 'trabajo')}>{t('nav.work')}</a>
+      <a href={getRelativeLocaleUrl(currentLocale, 'comunidad')}>{t('nav.community')}</a>
+      <a href={getRelativeLocaleUrl(currentLocale, 'proyecto')}>{t('nav.projects')}</a>
     </div>
     <ThemeIcon />
   </div>

src/i18n/ui.ts

@@ -0,0 +1,19 @@
+export const defaultLang = 'en';
+
+export const ui = {
+  en: {
+    'nav.about': 'About',
+    'nav.blog': 'Blog',
+    'nav.work': 'Work',
+    'nav.talks': 'Talks',
+    'nav.community': 'Community',
+    'nav.projects': 'Projects'
+  },
+  es: {
+    'nav.about': 'Sobre mi',
+    'nav.work': 'Trabajo',
+    'nav.talks': 'Charlas',
+    'nav.community': 'Comunidad',
+    'nav.projects': 'Proyectos'
+  },
+} as const;

src/i18n/utils.ts

@@ -0,0 +1,8 @@
+import { ui, defaultLang } from './ui';
+
+export function useTranslations(lang: string = 'es') {
+  return function t(key: keyof typeof ui[typeof defaultLang]) {
+    // @ts-ignore
+    return ui[lang][key] || ui[defaultLang][key];
+  }
+}

src/layouts/SiteLayout.astro

@@ -6,11 +6,10 @@ import Sidebar from '../components/Sidebar.astro';
 interface Props {
   pageTitle: string
 }
-const {pageTitle} = Astro.props
-const pageLang = Astro.currentLocale ? Astro.currentLocale : 'en';
+const {pageTitle} = Astro.props;
 ---
 
-<html lang={pageLang}>
+<html lang={Astro.currentLocale}>
   <head>
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

src/pages/en/about.astro

@@ -0,0 +1,12 @@
+---
+import BaseLayout from '@layouts/BaseLayout.astro';
+import { getEntry } from 'astro:content';
+
+const pageTitle = "About";
+const aboutContent = await getEntry('blocks', 'about');
+const { Content } = await aboutContent.render();
+---
+
+<BaseLayout pageTitle={pageTitle}>
+  <Content />
+</BaseLayout>

src/pages/en/blog/[...slug].astro

@@ -0,0 +1,33 @@
+---
+import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
+import { getCollection } from 'astro:content';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import BlogTags from '@components/BlogTags.astro';
+import { dateFormat } from 'src/scripts/dateFormat';
+
+export const getStaticPaths = (async () => {
+  const blogEntries = await getCollection('blog');
+  return blogEntries.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}) satisfies GetStaticPaths
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+---
+<BaseLayout pageTitle={entry.data.title}>
+  <p>{dateFormat.format(entry.data.date)}</p>
+  {entry.data.image &&
+    <img src={entry.data.image} width="300" alt="Featured image" />
+  }
+  <BlogTags route="/en/blog/tags/" tags={entry.data.tags} />
+  <Content />
+
+  {entry.data.gist &&
+    <script src={`${entry.data.gist}.js`} is:inline></script>
+  }
+
+</BaseLayout>

src/pages/en/blog/index.astro

@@ -0,0 +1,17 @@
+---
+import BaseLayout from '@layouts/BaseLayout.astro'
+import BlogPost from '@components/BlogPost.astro';
+import { getCollection } from 'astro:content';
+import BlogTags from '@components/BlogTags.astro';
+import { enDateFormat } from 'src/scripts/dateFormat';
+
+const allPosts = (await getCollection('blog')).reverse();
+const tags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
+const pageTitle = "Blog";
+---
+<BaseLayout pageTitle={pageTitle}>
+  <BlogTags route="/en/blog/tags/" tags={tags} />
+  <div class="post-list">
+    {allPosts.map((post) => <BlogPost url={`/en/blog/${post.slug}`} title={post.data.title} date={enDateFormat.format(post.data.date)} />)}
+  </div>
+</BaseLayout>

src/pages/en/blog/tags/[tag].astro

@@ -0,0 +1,34 @@
+---
+import type { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths } from 'astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import BlogPost from '@components/BlogPost.astro';
+import { getCollection } from 'astro:content';
+import { enDateFormat } from 'src/scripts/dateFormat';
+import BlogTags from '@components/BlogTags.astro';
+
+export const getStaticPaths = (async () => {
+  const allPosts = (await getCollection('blog')).reverse();
+  const uniqueTags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
+
+  return uniqueTags.map((tag) => {
+    const filteredPosts = allPosts.filter((post) => post.data.tags.includes(tag));
+    return {
+      params: { tag },
+      props: { posts: filteredPosts, tags: uniqueTags },
+    };
+  });
+}) satisfies GetStaticPaths
+
+type Params = InferGetStaticParamsType<typeof getStaticPaths>;
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { tag } = Astro.params as Params;
+const { posts, tags } = Astro.props as Props;
+---
+<BaseLayout pageTitle={tag}>
+  <BlogTags route="/en/blog/tags/" tags={tags} current={tag}/>
+  <p>Blog tagged with {tag}</p>
+  <div class="post-list">
+    {posts.map((post) => <BlogPost url={`/en/blog/${post.slug}`} title={post.data.title} date={enDateFormat.format(post.data.date)} />)}
+  </div>
+</BaseLayout>

src/pages/en/charla/[...slug].astro

@@ -0,0 +1,54 @@
+---
+import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
+import { getCollection } from 'astro:content';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import BlogTags from '@components/BlogTags.astro';
+import ResponsiveIframe from '@components/ResponsiveIframe.astro';
+import { enDateFormat } from 'src/scripts/dateFormat';
+
+export const getStaticPaths = (async () => {
+  const blogEntries = await getCollection('talk');
+  return blogEntries.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}) satisfies GetStaticPaths
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+---
+<BaseLayout pageTitle={entry.data.title}>
+  {entry.data.video &&
+    <ResponsiveIframe
+      width="100%"
+      height="600"
+      src={entry.data.video}
+      frameBorder="0"
+      allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+      title={`Video of talk ${entry.data.title}`}
+    />
+  }
+  <p>{enDateFormat.format(entry.data.date)}</p>
+
+  <Content />
+  {entry.data.slide &&
+    <ResponsiveIframe
+      src={entry.data.slide}
+      width="100%"
+      height="600"
+      frameBorder="0"
+      title={`Slides of talk ${entry.data.title}`}
+    />
+
+  }
+
+  {entry.data.gist &&
+    <script src={`${entry.data.gist}.js`} is:inline></script>
+  }
+
+<BlogTags route="/en/charla/tags/" tags={entry.data.tags} />
+
+</BaseLayout>

src/pages/en/charla/index.astro

@@ -0,0 +1,24 @@
+---
+import BaseLayout from '@layouts/BaseLayout.astro'
+import BlogPost from '@components/BlogPost.astro';
+import { getCollection } from 'astro:content';
+import BlogTags from '@components/BlogTags.astro';
+import { enDateFormat } from 'src/scripts/dateFormat';
+
+const allPosts = (await getCollection('talk')).reverse();
+const tags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
+const pageTitle = "Talks";
+---
+<BaseLayout pageTitle={pageTitle}>
+  <BlogTags route="/en/charla/tags/" tags={tags} />
+  <div class="post-list">
+    {allPosts.map((post) =>
+      <BlogPost
+        image={post.data.image}
+        url={`/en/charla/${post.slug}`}
+        title={post.data.title}
+        date={enDateFormat.format(post.data.date)}
+      />
+    )}
+  </div>
+</BaseLayout>

src/pages/en/charla/tags/[tag].astro

@@ -0,0 +1,41 @@
+---
+import type { InferGetStaticParamsType, InferGetStaticPropsType, GetStaticPaths } from 'astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import BlogPost from '@components/BlogPost.astro';
+import { getCollection } from 'astro:content';
+import { enDateFormat } from 'src/scripts/dateFormat';
+import BlogTags from '@components/BlogTags.astro';
+
+export const getStaticPaths = (async () => {
+  const allPosts = (await getCollection('talk')).reverse();
+  const uniqueTags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
+
+  return uniqueTags.map((tag) => {
+    const filteredPosts = allPosts.filter((post) => post.data.tags.includes(tag));
+    return {
+      params: { tag },
+      props: { posts: filteredPosts, tags: uniqueTags },
+    };
+  });
+}) satisfies GetStaticPaths
+
+type Params = InferGetStaticParamsType<typeof getStaticPaths>;
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { tag } = Astro.params as Params;
+const { posts, tags } = Astro.props as Props;
+---
+<BaseLayout pageTitle={tag}>
+  <BlogTags route="/en/charla/tags/" tags={tags} current={tag}/>
+  <p>Talks tagged with {tag}</p>
+  <div class="post-list">
+    {posts.map((post) =>
+      <BlogPost
+        image={post.data.image}
+        url={`/en/charla/${post.slug}`}
+        title={post.data.title}
+        date={enDateFormat.format(post.data.date)}
+      />
+    )}
+  </div>
+</BaseLayout>

src/pages/en/comunidad/[...slug].astro

@@ -0,0 +1,31 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import { Image } from "astro:assets";
+import Gallery from '@components/Gallery.astro';
+
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+  const entries = await getCollection('community');
+  return entries.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+---
+<BaseLayout pageTitle={entry.data.title}>
+  <Image src={entry.data.image} alt="featured image" />
+  <dl>
+    <dt>Role:</dt><dd>{entry.data.role}</dd>
+    <dt>Responsabilities:</dt><dd>{entry.data.responsibilities}</dd>
+  </dl>
+  <p><em>{entry.data.excerpt}</em></p>
+  <a href={entry.data.website}>Website</a>
+  <Content />
+  {entry.data.gallery &&
+    <Gallery items={entry.data.gallery}/>
+  }
+</BaseLayout>

src/pages/en/comunidad/index.astro

@@ -0,0 +1,20 @@
+---
+import BaseLayout from '@layouts/BaseLayout.astro'
+import BlogPost from '@components/BlogPost.astro';
+import { getCollection } from 'astro:content';
+const allPosts = await getCollection('community');
+const pageTitle = "Community";
+---
+<BaseLayout pageTitle={pageTitle}>
+  <div class="post-list">
+    {allPosts.map((post) =>
+      <BlogPost
+        url={`/en/comunidad/${post.slug}`}
+        title={post.data.title}
+      >
+        <p>{post.data.role}</p>
+        <p>{post.data.responsibilities}</p>
+      </BlogPost>
+    )}
+  </div>
+</BaseLayout>

src/pages/en/proyecto/[...slug].astro

@@ -0,0 +1,31 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import { Image } from "astro:assets";
+import Gallery from '@components/Gallery.astro';
+
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+  const entries = await getCollection('projects');
+  return entries.map(entry => ({
+    params: { slug: entry.slug }, props: { entry },
+  }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+
+---
+<BaseLayout pageTitle={entry.data.title}>
+  <Image src={entry.data.image} alt="featured image" />
+  <p><em>{entry.data.excerpt}</em></p>
+  <a href={entry.data.website}>Sitio web</a>
+  <dl>
+    <dt>Role:</dt><dd>{entry.data.role}</dd>
+    <dt>Responsabilities:</dt><dd>{entry.data.responsibilities}</dd>
+  </dl>
+  <Content />
+  {entry.data.gallery &&
+    <Gallery items={entry.data.gallery}/>
+  }
+</BaseLayout>