I18n locales translations (#85)

* feat: landing page setup for multiple language switching

* feat: setup i18n config and translations for spanish

* feat: landing page translations

* feat: use translations for explore page

* feat: about page language routes and translations

* feat: add zh, pt translations, complete es translation

* fix: cleanup back links

* feat: translations on search page

* feat: translations on transcript page

* feat: mobile nav transalations

* fix: absolute route on result card

* fix: cleanups

* feat: website available-in languages

* fix: language links for types and categories card on homepage

* fix: og-image for sources account for languages and nesting

* fix: restrict back cta width, cleanups

Author: Emmanuel-Develops

contentlayer.config.ts

@@ -17,6 +17,7 @@ import {
   Source as ContentSourceType,
 } from "./.contentlayer/generated/types";
 import { LanguageCode, OtherSupportedLanguages } from "./src/config";
+import { getTopicTitle } from "./src/utils/topic";
 
 const Resources = defineNestedType(() => ({
   name: "Resources",
@@ -437,21 +438,11 @@ export const Transcript = defineDocumentType(() => ({
         const topicsStore = doc?.tags as any || [];
         const topics = (topicsStore?._array as string[]) ?? [];
 
+        const topicIndex = getTopics() as Topic[];
+
         const topicsWithTitles = topics.map((topic) => {
-          const currentTopic = getTopics().find(
-            (topicData: FieldCountItem) => topicData.slug === topic
-          );
-
-          if(currentTopic?.title && currentTopic?.title.includes("(Miscellaneous)")) {
-            return {
-              name: currentTopic?.title.replace("(Miscellaneous)",""),
-              slug: currentTopic.slug,
-            }
-          }
-          return {
-              name: currentTopic?.title || topic,
-              slug: currentTopic?.slug || topic,
-          };
+          const topicTitle = getTopicTitle(topic, topicIndex);
+          return { name: topicTitle, slug: topic };
         });
         return topicsWithTitles;
       },

next.config.mjs

@@ -4,42 +4,10 @@ const nextConfig = {
   rewrites: async () => {
     return {
       fallback: [
-        // {
-        //   source: "/:path*.:ext([a-zA-Z0-9_+]{1,4})", // Match extensions that are 1-4 AlphaNumeric characters long
-        //   destination: "/gh-pages/:path*.:ext", // Rewrite to gh-pages/[path_here].ext
-        // },
-        // {
-        //   source: "/tags/:path",
-        //   destination: "/gh-pages/tags/:path/index.html",
-        // },
-        // {
-        //   source: "/speakers/:path",
-        //   destination: "/gh-pages/speakers/:path/index.html",
-        // },
-        // {
-        //   source: "/es",
-        //   destination: "/gh-pages/es/index.html",
-        // },
-        // {
-        //   source: "/zh",
-        //   destination: "/gh-pages/zh/index.html",
-        // },
-        // {
-        //   source: "/pt",
-        //   destination: "/gh-pages/pt/index.html",
-        // },
-        // {
-        //   source: "/topics",
-        //   destination: "/en/topics"
-        // },
         {
           source: "/:path((?!.*\\.[a-zA-Z0-9]{1,4}$).*)", // Matches paths without a valid file extension
           destination: "/transcript/:path*", // Rewrite to /transcripts/[path...]
         },
-        // {
-        //   source: "/:path*",
-        //   destination: "/gh-pages/:path*/index.html",
-        // },
       ],
     };
   },

package-lock.json

@@ -12,7 +12,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@bitcoin-dev-project/bdp-ui": "^1.5.2",
+    "@bitcoin-dev-project/bdp-ui": "^1.5.3",
     "@elastic/elasticsearch": "^8.16.2",
     "@tanstack/react-query": "^5.62.0",
     "@uiw/react-markdown-preview": "^5.1.3",

package.json

@@ -6,14 +6,13 @@ import { ContentTreeArray, previewImageDimensions } from "@/utils/data";
 import LinkIcon from "/public/svgs/link-icon.svg";
 import WorldIcon from "/public/svgs/world-icon.svg";
 import allSources from "@/public/sources-data.json";
-import allSourcesCount from "@/public/source-count-data.json";
 import {
   constructSlugPaths,
+  convertSlugToLanguageSlug,
   deriveAlternateLanguages,
   deriveSourcesList,
   fetchTranscriptDetails,
   loopArrOrObject,
-  unsluggify,
 } from "@/utils";
 import { ArrowLinkRight } from "@bitcoin-dev-project/bdp-ui/icons";
 import {
@@ -28,6 +27,8 @@ import { LanguageCode, LanguageCodes, OtherSupportedLanguages } from "@/config";
 import { SourceTree } from "@/types";
 import { arrayWithoutElementAtIndex, traverseSourceTree } from "@/utils/sources";
 import { parseLanguageString } from "@/utils/locale";
+import useTranslations from "@/hooks/useTranslations";
+import { buildMetadata } from "@/utils/metadata";
 
 // forces 404 for paths not generated from `generateStaticParams` function.
 export const dynamicParams = false;
@@ -54,18 +55,22 @@ export function generateStaticParams() {
   return combineSlugs;
 }
 
-const checkIfSourcesLanguageRoute = (slug: string[]) => slug.length === 2 && OtherSupportedLanguages.includes(slug[0] as LanguageCode) && slug[1] === "sources";
+export const generateMetadata = async ({params}: { params: { slug: string[] } }): Promise<Metadata> => {
+
+  const slug = params.slug ?? [];
 
+  const slugUrl = slug.join("/");
 
-export const generateMetadata = async ({params}: { params: { slug: string[] } }): Promise<Metadata> => {
+  // convert the slug to language slug, ensuring that the language code is included as the first element of the array
+  const languagePath = convertSlugToLanguageSlug(slug);
 
-  const isSourcesLanguageRoute = checkIfSourcesLanguageRoute(params.slug);
+  const language = languagePath[0];
 
-  const id = params.slug[0]
-  const foundSource = allSourcesCount.find((source) => source.slug === id);
+  // is it base source path, e.g [ 'sources' ] (which is converted to [ 'en', 'sources' ]) or [ '{language}', 'sources' ] (which is not converted)
+  const isSourcesLanguageRoute = languagePath.length === 2 && languagePath[1] === "sources";
 
   if (isSourcesLanguageRoute) {
-    const languageCode = params.slug[0] as LanguageCode;
+    const languageCode = languagePath[0] as LanguageCode;
     const { alternateLanguages, metadataLanguages } = deriveAlternateLanguages({
         languageCode,
         languages: LanguageCodes,
@@ -78,33 +83,16 @@ export const generateMetadata = async ({params}: { params: { slug: string[] } })
         canonical: "/sources",
         languages: metadataLanguages // Add custom metadata for languages
       },
-      openGraph:{
-        images:[{
-          url:`/api/og-image/${foundSource?.slug}`,
-          width: previewImageDimensions.width,
-          height: previewImageDimensions.height,
-          alt: `${foundSource?.name} OG Image`
-        }]
-      },
-      twitter:{
-        images:[{
-          url:`/api/og-image/${foundSource?.slug}`,
-          width: previewImageDimensions.width,
-          height: previewImageDimensions.height,
-          alt: `${foundSource?.name} OG Image`
-        }]
-      },
       other: {
         alternateLanguages,
         language: languageCode
       }
     };
   }
 
-
-  const slug = params.slug ?? [];
   const contentTree = allSources as SourceTree;
   const { slugPaths } = constructSlugPaths(slug);
+
   let current: any = contentTree;
 
   for (const part of slugPaths) {
@@ -115,8 +103,7 @@ export const generateMetadata = async ({params}: { params: { slug: string[] } })
     }
   }
 
-  const language = slugPaths[1];
-
+  // for e.g [ 'advancing-bitcoin', 'en' ], [ 'advancing-bitcoin', 'es' ] etc
   if (slugPaths.length === 2) {
     // returns all language keys for the current source
     const languages = Object.keys(contentTree[slugPaths[0]]);
@@ -127,19 +114,21 @@ export const generateMetadata = async ({params}: { params: { slug: string[] } })
       return acc;
     }, {} as Record<string, string>);
 
-    return {
+    return buildMetadata({
       title: current.metadata.title,
-      alternates: {
-        canonical: "/",
-        languages: metadataLanguages // Add custom metadata for languages
+      alternateLanguages: otherLanguages,
+      metadataLanguages,
+      language,
+      canonical: "/",
+      generateOpenGraphImage: {
+        url: `/api/opengraph-image/${slugUrl}`,
+        alt: `${current.metadata.title} OG Image`,
       },
-      other: {
-        alternateLanguages: otherLanguages,
-        language
-      }
-    };
+    });
   }
 
+  // catch every other source (nested sources)
+
   const alternateLanguages = LanguageCodes.filter(lang => lang !== language).map(language => {
     const slugPathTocheckForData = slugPaths.filter(path => path !== "data");
     slugPathTocheckForData[1] = language;
@@ -157,17 +146,17 @@ export const generateMetadata = async ({params}: { params: { slug: string[] } })
     return acc;
   }, {} as Record<string, string>);
 
-  return {
+  return buildMetadata({
     title: current.metadata.title,
-    alternates: {
-      canonical: "/",
-      languages: metadataLanguages // Add custom metadata for languages
+    alternateLanguages,
+    metadataLanguages,
+    language,
+    canonical: "/",
+    generateOpenGraphImage: {
+      url: `/api/opengraph-image/${slugUrl}`,
+      alt: `${current.metadata.title} OG Image`,
     },
-    other: {
-      alternateLanguages,
-      language
-    }
-  }
+  });
 };
 
 const page = ({ params }: { params: { slug: string[] } }) => {
@@ -181,8 +170,6 @@ const page = ({ params }: { params: { slug: string[] } }) => {
   // catch language code followed by sources e.g ["es", "sources"]. English is omitted
   const isRouteForLanguage = slug.length === 2 && OtherSupportedLanguages.includes(slug[0] as LanguageCode) && slug[1] === "sources";
 
-  // console.log({isRouteForLanguage})
-
   if (isRouteForLanguage) {
     const language = slug[0];
     const sourcesAndLanguage = Object.keys(allSources);
@@ -200,9 +187,8 @@ const page = ({ params }: { params: { slug: string[] } }) => {
     return (
       <div className="flex flex-col text-black">
         <TranscriptContentPage
-          header="Sources"
+          header='sources'
           data={languageTreeArray}
-          description='Sources help you find transcripts within a specific talk, meetup, conference, and the likes.'
           type='alphabet'
           linkName='sources'
           languageCode={language as LanguageCode}
@@ -222,19 +208,22 @@ const page = ({ params }: { params: { slug: string[] } }) => {
       }
     }
 
+    const slugPathsCopy = [...slugPaths].filter(item => item !== "data")
+    const language = slugPathsCopy.splice(1,1)[0] as LanguageCode
+
     const metadata = current.metadata;
     const data = loopArrOrObject(current?.data);
     const isRoot = Array.isArray(current.data);
     const { transcripts } = fetchTranscriptDetails(allTranscripts, data, isRoot);
 
     const constructBackLink = () => {
-      const slugPathsCopy = [...slugPaths].filter(item => item !== "data")
-      const language = slugPathsCopy.splice(1,1)[0]
       const indexPath = language === "en" ? "" : `/${language}`
       const backRoute = slugPathsCopy.slice(0, -1).length ? slugPathsCopy.slice(0, -1).join("/") : ""
       return backRoute ? `${indexPath}/${backRoute}` : `${indexPath}/sources`
     }
 
+    const t = useTranslations(language);
+
     return (
       <div className="flex items-start lg:gap-[50px]">
         <div className="flex flex-col w-full gap-6 md:gap-8 2xl:gap-10 no-scrollbar">
@@ -249,9 +238,9 @@ const page = ({ params }: { params: { slug: string[] } }) => {
               <SourcesBreadCrumbs slugPaths={slugPaths} current={contentTree} />
             </>
             <div className='flex flex-col'>
-              <Link href={constructBackLink()} className='flex gap-1 items-center'>
+              <Link href={constructBackLink()} className='flex gap-1 items-center max-w-fit'>
                 <ArrowLinkRight className='rotate-180 w-5 md:w-6' />
-                <p>Back</p>
+                <p>{t("explore.back")}</p>
               </Link>
 
               <h3 className="text-xl 2xl:text-2xl font-medium pt-6 md:pt-3">

public/images/hero-desktop-image.webp

@@ -57,9 +57,8 @@ const CategoriesPage = ({params}: {params: { languageCode: LanguageCode}}) => {
   return (
     <div className="flex flex-col text-black">
       <TranscriptContentPage
-        header="Categories"
+        header="categories"
         data={reStructuredCategories}
-        description="Explore the main areas of focus within the Bitcoin technical ecosystem."
         type="words"
         linkName="tags"
         languageCode={languageCode}

src/app/(explore)/[...slug]/page.tsx

@@ -56,9 +56,8 @@ const SpeakerPage = ({ params }: { params: { languageCode: string } }) => {
   return (
     <div className="flex flex-col text-black">
       <TranscriptContentPage
-        header="Speakers"
+        header="speakers"
         data={speakers}
-        description="Discover insights from key figures of the Bitcoin community."
         type="alphabet"
         linkName="speakers"
         languageCode={languageCode}

src/app/(explore)/[languageCode]/categories/page.tsx

@@ -56,9 +56,8 @@ const TopicsPage = ({ params }: { params: { languageCode: string } }) => {
   return (
     <div className="flex flex-col  text-black">
       <TranscriptContentPage
-        header="Topics"
+        header="topics"
         data={topics}
-        description="Bitcoin is made up of an endless amount of topics, and there’s no shortage of rabbit holes to go down. "
         type="alphabet"
         linkName="tags"
         languageCode={languageCode}

src/app/(explore)/[languageCode]/speakers/page.tsx

@@ -58,9 +58,8 @@ const TypesPage = ({params}: {params: { languageCode: LanguageCode}}) => {
   return (
     <div className="flex flex-col text-black">
       <TranscriptContentPage
-        header="Types"
+        header="types"
         data={reStructuredTypes}
-        description="Sources tend to fall into discrete types, from podcasts to meetups. Find transcripts in your preferred format of communication."
         type="words"
         linkName="sources"
         languageCode={languageCode}