Merge pull request #199 from ethereum/translation-banner-logic

Translation banner logic for non-markdown pages

Author: pettinarip

src/layouts/RootLayout.tsx

@@ -3,7 +3,7 @@ import { join } from "path"
 import { useRouter } from "next/router"
 import { Container } from "@chakra-ui/react"
 
-import { Root } from "@/lib/interfaces"
+import type { Root } from "@/lib/types"
 
 import FeedbackWidget from "@/components/FeedbackWidget"
 import Footer from "@/components/Footer"
@@ -37,12 +37,10 @@ export const RootLayout = ({
     asPath.includes(`/terms-of-use/`) ||
     asPath.includes(`/style-guide/`)
 
-  const isPageTranslationOutdated = contentIsOutdated ?? false
   const isPageLanguageEnglish = locale === DEFAULT_LOCALE
 
   const shouldShowTranslationBanner =
-    (isPageTranslationOutdated ||
-      (contentNotTranslated && !isPageLanguageEnglish)) &&
+    (contentIsOutdated || (contentNotTranslated && !isPageLanguageEnglish)) &&
     !isLegal
   const shouldShowLegalTranslationBanner = isLegal && !isPageLanguageEnglish
   const originalPagePath = toPosixPath(join(DEFAULT_LOCALE, asPath))

src/lib/interfaces.ts

@@ -102,8 +102,8 @@ interface ImageInfo {
 
 export interface UpgradeFrontmatter
   extends SharedFrontmatter,
-    SummaryPointsNumbered,
-    ImageInfo {}
+  SummaryPointsNumbered,
+  ImageInfo { }
 
 export interface RoadmapFrontmatter extends SharedFrontmatter, ImageInfo {
   buttons: {
@@ -116,15 +116,15 @@ export interface RoadmapFrontmatter extends SharedFrontmatter, ImageInfo {
 
 export interface UseCasesFrontmatter
   extends SharedFrontmatter,
-    SummaryPointsNumbered,
-    ImageInfo {
+  SummaryPointsNumbered,
+  ImageInfo {
   emoji: string
 }
 
 export interface StakingFrontmatter
   extends SharedFrontmatter,
-    SummaryPoints,
-    ImageInfo {
+  SummaryPoints,
+  ImageInfo {
   emoji: string
 }
 
@@ -146,13 +146,6 @@ export interface TutorialFrontmatter extends SharedFrontmatter {
   showPostMergeBanner?: boolean
 }
 
-export interface Root {
-  children: ReactNode
-  contentIsOutdated: boolean
-  contentNotTranslated: boolean
-  lastDeployDate: string
-}
-
 export interface MdPageContent {
   slug: string
   content: string

src/lib/types.ts

@@ -2,6 +2,7 @@ import type { Options } from "mdast-util-toc"
 import type { NextPage } from "next"
 import type { AppProps } from "next/app"
 import { StaticImageData } from "next/image"
+import { SSRConfig } from "next-i18next"
 import type { ReactElement, ReactNode } from "react"
 
 import type {
@@ -15,7 +16,6 @@ import type {
 } from "@/lib/interfaces"
 
 import type { CallToActionProps } from "@/components/Hero/CallToAction"
-import { ImageProps } from "@/components/Image"
 
 import { layoutMapping } from "@/pages/[...slug]"
 
@@ -29,6 +29,15 @@ export type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout
 }
 
+export type Root = {
+  children: ReactNode
+  contentIsOutdated: boolean
+  contentNotTranslated: boolean
+  lastDeployDate: string
+}
+
+export type BasePageProps = SSRConfig & Pick<Root, "contentNotTranslated" | "lastDeployDate">
+
 export type Frontmatter = RoadmapFrontmatter &
   UpgradeFrontmatter &
   StaticFrontmatter &

src/lib/utils/existsNamespace.ts

@@ -0,0 +1,16 @@
+import { existsSync } from "fs"
+import { join } from "path"
+
+/**
+ * Checks if a namespace .json file exists for the given locale
+ * @param locale Path locale
+ * @param namespace Namespace for the page
+ * @returns false if the namespace .json file exists, true otherwise
+ */
+export const existsNamespace = (
+  locale: string,
+  namespace: string,
+): boolean => {
+  const nsJsonPathForLocale = join("../intl", locale, namespace + ".json")
+  return existsSync(nsJsonPathForLocale)
+}

src/lib/utils/translations.ts

@@ -130,7 +130,6 @@ const getRequiredNamespacesForPath = (path: string) => {
   if (path.startsWith("/developers/learning-tools")) {
     requiredNamespaces = [
       ...requiredNamespaces,
-      "page-developers-index",
       "page-developers-learning-tools",
     ]
   }

src/pages/404.tsx

@@ -1,31 +1,31 @@
-import React from "react"
-import type { GetStaticProps, NextPage } from "next"
-import type { SSRConfig } from "next-i18next"
+import type { GetStaticProps } from "next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { Box, Flex, Heading, Text } from "@chakra-ui/react"
 
+import { BasePageProps } from "@/lib/types"
+
+import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
 import InlineLink from "../components/Link"
 import Translation from "../components/Translation"
 
-type Props = SSRConfig
+export const getStaticProps = (async ({ locale }) => {
+  const requiredNamespaces = getRequiredNamespacesForPage("/")
 
-export const getStaticProps = (async (context) => {
-  const { locale } = context
+  const contentNotTranslated = !existsNamespace(locale!, requiredNamespaces[0])
 
-  // load i18n required namespaces for the given page
-  const requiredNamespaces = getRequiredNamespacesForPage("/")
   const lastDeployDate = getLastDeployDate()
 
   return {
     props: {
       ...(await serverSideTranslations(locale!, requiredNamespaces)),
+      contentNotTranslated,
       lastDeployDate,
     },
   }
-}) satisfies GetStaticProps<Props>
+}) satisfies GetStaticProps<BasePageProps>
 
 const NotFoundPage = () => (
   <Flex flexDir="column" align="center" w="full" mt={16} mb={0} mx="auto">

src/pages/[...slug].tsx

@@ -156,7 +156,6 @@ export const getStaticProps = (async (context) => {
     ? getCrowdinContributors(mdPath, locale as Lang)
     : []
 
-  // load i18n required namespaces for the given page
   const requiredNamespaces = getRequiredNamespacesForPage(slug, layout)
 
   return {

src/pages/assets.tsx

@@ -1,5 +1,5 @@
 import type { GetStaticProps } from "next/types"
-import { type SSRConfig, useTranslation } from "next-i18next"
+import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import {
   Box,
@@ -12,7 +12,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react"
 
-import type { ChildOnlyProp } from "@/lib/types"
+import type { BasePageProps, ChildOnlyProp } from "@/lib/types"
 
 import AssetDownload from "@/components/AssetDownload"
 import FeedbackCard from "@/components/FeedbackCard"
@@ -21,6 +21,7 @@ import InlineLink from "@/components/Link"
 import OldHeading from "@/components/OldHeading"
 import PageMetadata from "@/components/PageMetadata"
 
+import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 // import efLogo from "@/public/ef-logo.png"
 // import efLogoWhite from "@/public/ef-logo-white.png"
@@ -115,19 +116,21 @@ const H3 = (props: ChildOnlyProp) => (
   />
 )
 
-export const getStaticProps = (async (context) => {
-  const { locale } = context
-  // load i18n required namespaces for the given page
+export const getStaticProps = (async ({ locale }) => {
   const requiredNamespaces = getRequiredNamespacesForPage("assets")
+
+  const contentNotTranslated = !existsNamespace(locale!, requiredNamespaces[1])
+
   const lastDeployDate = getLastDeployDate()
 
   return {
     props: {
       ...(await serverSideTranslations(locale!, requiredNamespaces)),
+      contentNotTranslated,
       lastDeployDate,
     },
   }
-}) satisfies GetStaticProps<SSRConfig>
+}) satisfies GetStaticProps<BasePageProps>
 
 const AssetsPage = () => {
   const { t } = useTranslation("page-assets")

src/pages/bug-bounty.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router"
 import type { GetStaticProps } from "next/types"
-import { type SSRConfig, useTranslation } from "next-i18next"
+import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import {
   Box,
@@ -10,7 +10,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/react"
 
-import type { ChildOnlyProp } from "@/lib/types"
+import type { BasePageProps, ChildOnlyProp } from "@/lib/types"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
 import BugBountyCards from "@/components/BugBountyCards"
@@ -28,6 +28,7 @@ import Text from "@/components/OldText"
 import PageMetadata from "@/components/PageMetadata"
 import Translation from "@/components/Translation"
 
+import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
@@ -321,20 +322,21 @@ const sortBountyHuntersFn = (a: BountyHuntersArg, b: BountyHuntersArg) => {
   return b.score - a.score
 }
 
-export const getStaticProps = (async (context) => {
-  const { locale } = context
-
-  // load i18n required namespaces for the given page
+export const getStaticProps = (async ({ locale }) => {
   const requiredNamespaces = getRequiredNamespacesForPage("bug-bounty")
+
+  const contentNotTranslated = !existsNamespace(locale!, requiredNamespaces[1])
+
   const lastDeployDate = getLastDeployDate()
 
   return {
     props: {
       ...(await serverSideTranslations(locale!, requiredNamespaces)),
+      contentNotTranslated,
       lastDeployDate,
     },
   }
-}) satisfies GetStaticProps<SSRConfig>
+}) satisfies GetStaticProps<BasePageProps>
 
 const BugBountiesPage = () => {
   const { pathname } = useRouter()

src/pages/community.tsx

@@ -1,5 +1,5 @@
 import { GetStaticProps } from "next"
-import { SSRConfig, useTranslation } from "next-i18next"
+import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import {
   Box,
@@ -10,9 +10,10 @@ import {
   useTheme,
 } from "@chakra-ui/react"
 
-import { ChildOnlyProp, CommonHeroProps } from "@/lib/types"
+import { BasePageProps, ChildOnlyProp, CommonHeroProps } from "@/lib/types"
 import { ICard, IGetInvolvedCard } from "@/lib/interfaces"
 
+import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
@@ -39,23 +40,21 @@ import communityHeroImg from "@/public/heroes/community-hero.png"
 import upgradesCoreImg from "@/public/upgrades/core.png"
 import whatIsEthereumImg from "@/public/what-is-ethereum.png"
 
-type Props = SSRConfig & {
-  lastDeployDate: string
-}
-
-export const getStaticProps = (async (context) => {
-  const { locale } = context
-  // load i18n required namespaces for the given page
+export const getStaticProps = (async ({ locale }) => {
   const requiredNamespaces = getRequiredNamespacesForPage("/community")
+
+  const contentNotTranslated = !existsNamespace(locale!, requiredNamespaces[1])
+
   const lastDeployDate = getLastDeployDate()
 
   return {
     props: {
       ...(await serverSideTranslations(locale!, requiredNamespaces)),
+      contentNotTranslated,
       lastDeployDate,
     },
   }
-}) satisfies GetStaticProps<Props>
+}) satisfies GetStaticProps<BasePageProps>
 
 const CardContainer = ({ children }: ChildOnlyProp) => {
   return (