adding localization for posts content

Author: ajolipa

src/layouts/Header.astro

@@ -68,7 +68,7 @@ const {
     <LanguagePicker
       locales={locales}
       currentLocale={currentLocale}
-      currentUrl={currentUrl}
+      currentUrl={currentUrl.pathname}
     />
   </MobileHeader>
 </div>

src/pages/[lang]/posts/[slug].astro

@@ -1,17 +1,22 @@
 ---
-import PostContent from '@apps/posts/PostContent';
-import { getTranslations } from '@backend/i18n';
-import { fetchPost, fetchPosts } from '@backend/tina';
-import Container from '@components/Container.astro';
-import config from '@config';
-import Layout from '@layouts/Layout.astro';
-import { hasPostsContent } from '@utils/config';
-import _ from 'underscore';
+import PostContent from "@apps/posts/PostContent";
+import { getTranslations } from "@backend/i18n";
+import { fetchPost, fetchPosts } from "@backend/tina";
+import Container from "@components/Container.astro";
+import config from "@config";
+import { getLocalizedContent } from "@i18n/utils";
+import Layout from "@layouts/Layout.astro";
+import { hasPostsContent } from "@utils/config";
+import _ from "underscore";
 
 const { slug } = Astro.params;
 const post = await fetchPost(slug);
 
-const { t } = await getTranslations(Astro.currentLocale);
+const locale = Astro.currentLocale;
+
+const localePost = getLocalizedContent(post, locale.replaceAll("-", "_")); //this is to deal with Tina's field naming restrictions
+
+const { t } = await getTranslations(locale);
 
 export const getStaticPaths = async () => {
   if (!hasPostsContent(config)) {
@@ -25,32 +30,27 @@ export const getStaticPaths = async () => {
 
   _.each(locales, (lang) => {
     _.each(posts, (post) => {
-      staticPaths.push({ params: {
-        lang,
-        slug: post?._sys.filename
-      }});
+      staticPaths.push({
+        params: {
+          lang,
+          slug: post?._sys.filename,
+        },
+      });
     });
   });
 
   return staticPaths;
 };
 ---
 
-<Layout
-  footer
-  t={t}
-  tab='posts'
-  title={slug}
->
-  <Container
-    className='pb-16 w-full'
-  >
+<Layout footer t={t} tab="posts" title={localePost?.title}>
+  <Container className="pb-16 w-full">
     <PostContent
       content={post?.body}
       title={post?.title}
       author={post?.author}
       date={post?.date}
-      client:only='react'
+      client:only="react"
     />
   </Container>
 </Layout>

src/pages/[lang]/posts/index.astro

@@ -5,6 +5,7 @@ import Card from '@components/Card.astro';
 import Cards from '@components/Cards.astro';
 import Container from '@components/Container.astro';
 import config from '@config';
+import { getLocalizedContent } from '@i18n/utils';
 import Layout from '@layouts/Layout.astro';
 import { hasPostsContent } from '@utils/config';
 import { getRelativeLocaleUrl } from 'astro:i18n';
@@ -21,6 +22,10 @@ export const getStaticPaths = () => {
   return _.map(config.i18n.locales, (lang) => ({ params: { lang }}));
 }
 
+//Localize the post titles
+const localeField = Astro.currentLocale.replaceAll('-', '_') //this is to deal with Tina's field naming conventions
+const localizedPosts = _.map(posts, (post: any) => (getLocalizedContent(post, localeField)))
+
 ---
 
 <Layout
@@ -38,7 +43,7 @@ export const getStaticPaths = () => {
       { t('posts') }
     </h1>
     <Cards>
-      { _.map(posts, (post) => (
+      { _.map(localizedPosts, (post) => (
         <Card
           imageUrl={post?.cardImage}
           alt={post?.imageAlt}

tina/config.ts

@@ -5,7 +5,7 @@ import Branding from './content/branding';
 import I18n from './content/i18n';
 import PagesCollection from './content/pages';
 import PathsCollection from './content/paths';
-import PostsCollection from './content/posts';
+import { getPostsCollection } from './content/posts';
 import Settings from './content/settings';
 import { CustomAuthProvider } from './auth-provider';
 import { TinaUserCollection, UsernamePasswordAuthJSProvider } from 'tinacms-authjs/dist/tinacms';
@@ -14,6 +14,11 @@ const isLocal = process.env.TINA_PUBLIC_IS_LOCAL === 'true';
 const localContentPath = process.env.TINA_LOCAL_CONTENT_PATH;
 const useSSO = process.env.TINA_PUBLIC_AUTH_USE_KEYCLOAK === 'true';
 
+//deal with localizing the Posts collection
+const defaultLocale = config.i18n.default_locale;
+const otherLocales = config.i18n.locales.filter((loc) => (loc !== defaultLocale))
+const PostsCollection = getPostsCollection(otherLocales)
+
 export default defineConfig({
   authProvider: isLocal
     ? new LocalAuthProvider()

tina/content/paths.ts

@@ -1,6 +1,7 @@
-import TinaMediaPicker from '../components/TinaMediaPicker';
 import TinaPlacePicker from '../components/TinaPlacePicker';
 import { Collection } from '@tinacms/schema-tools';
+import { pathTemplates } from './templates';
+import type { RichTextTemplate } from '@tinacms/schema-tools';
 
 const Paths: Collection = {
   name: 'path',
@@ -40,79 +41,7 @@ const Paths: Collection = {
       label: 'Description',
       type: 'rich-text',
       isBody: true,
-      templates: [
-        {
-          name: 'iframe',
-          label: 'AV Embed',
-          fields: [
-            {
-              name: 'src',
-              label: 'Embed Link',
-              type: 'string',
-              required: true
-            },
-            {
-              name: 'width',
-              label: 'Width (pixels)',
-              type: 'number',
-              ui: {
-                parse: (val?: number)=>val || 0,
-                format: (val?: number)=> val === 0 ? null : val
-              }
-            },
-            {
-              name: 'height',
-              label: 'Height (pixels)',
-              type: 'number',
-              ui: {
-                parse: (val?: number)=>val || 0,
-                format: (val?: number)=> val === 0 ? null : val
-              }
-            }
-          ]
-        },
-        {
-          name: "media",
-          label: "Media",
-          fields: [
-            {
-              name: "media",
-              label: "Media",
-              type: "object",
-              fields: [
-                {
-                  name: "title",
-                  label: "Title",
-                  type: "string",
-                },
-                {
-                  name: "uuid",
-                  label: "UUID",
-                  type: "string"
-                },
-                {
-                  name: "manifest_url",
-                  label: "Manifest URL",
-                  type: "string"
-                },
-                {
-                  name: "content_url",
-                  label: "Content URL",
-                  type: "string"
-                },
-                {
-                  name: "content_preview_url",
-                  label: "Content Preview URL",
-                  type: "string"
-                }
-              ],
-              ui: {
-                component: TinaMediaPicker
-              }
-            }
-          ]
-        }
-      ]
+      templates: pathTemplates as RichTextTemplate<false>[]
     },
     {
       name: 'path',
@@ -167,38 +96,7 @@ const Paths: Collection = {
           name: 'blurb',
           label: 'Blurb',
           type: 'rich-text',
-          templates: [
-            {
-              name: 'iframe',
-              label: 'AV Embed',
-              fields: [
-                {
-                  name: 'src',
-                  label: 'Embed Link',
-                  type: 'string',
-                  required: true
-                },
-                {
-                  name: 'width',
-                  label: 'Width (pixels)',
-                  type: 'number',
-                  ui: {
-                    parse: (val?: number)=>val || 0,
-                    format: (val?: number)=> val === 0 ? null : val
-                  }
-                },
-                {
-                  name: 'height',
-                  label: 'Height (pixels)',
-                  type: 'number',
-                  ui: {
-                    parse: (val?: number)=>val || 0,
-                    format: (val?: number)=> val === 0 ? null : val
-                  }
-                }
-              ]
-            }
-          ]
+          templates: pathTemplates as RichTextTemplate<false>[]
         }
       ]
     }