From d787a956577ec0d65e7dc2c5723b62b50a575e96 Mon Sep 17 00:00:00 2001 From: mauro-balades Date: Mon, 2 Sep 2024 21:04:05 +0200 Subject: [PATCH] feat: Add language switcher component to footer --- messages/README-LANGUAGES.md | 121 --------- messages/de.json | 249 ------------------ messages/en.json | 249 ------------------ next.config.js | 5 +- package-lock.json | 97 +------ package.json | 1 - .../{[locale] => }/branding-assets/page.tsx | 0 src/app/{[locale] => }/create-theme/page.tsx | 0 src/app/{[locale] => }/download/page.tsx | 0 src/app/{[locale] => }/globals.css | 0 src/app/{[locale] => }/layout.tsx | 37 ++- src/app/{[locale] => }/not-found.tsx | 0 src/app/{[locale] => }/page.tsx | 0 .../privacy-policy/markdown.css | 0 .../{[locale] => }/privacy-policy/page.tsx | 0 .../release-notes/[version]/page.tsx | 0 src/app/{[locale] => }/release-notes/page.tsx | 0 .../{[locale] => }/themes/[theme]/page.tsx | 0 src/app/{[locale] => }/themes/page.tsx | 0 src/app/{[locale] => }/welcome/page.tsx | 0 src/components/footer.tsx | 3 - src/components/locale-switcher.tsx | 30 --- src/components/mobile-nav.tsx | 21 +- src/components/navigation.tsx | 65 ++--- src/components/theme-page.tsx | 2 +- src/i18n.ts | 12 - src/i18n/routing.ts | 17 -- src/middleware.ts | 9 - wrangler.toml | 2 +- 29 files changed, 53 insertions(+), 867 deletions(-) delete mode 100644 messages/README-LANGUAGES.md delete mode 100644 messages/de.json delete mode 100644 messages/en.json rename src/app/{[locale] => }/branding-assets/page.tsx (100%) rename src/app/{[locale] => }/create-theme/page.tsx (100%) rename src/app/{[locale] => }/download/page.tsx (100%) rename src/app/{[locale] => }/globals.css (100%) rename src/app/{[locale] => }/layout.tsx (56%) rename src/app/{[locale] => }/not-found.tsx (100%) rename src/app/{[locale] => }/page.tsx (100%) rename src/app/{[locale] => }/privacy-policy/markdown.css (100%) rename src/app/{[locale] => }/privacy-policy/page.tsx (100%) rename src/app/{[locale] => }/release-notes/[version]/page.tsx (100%) rename src/app/{[locale] => }/release-notes/page.tsx (100%) rename src/app/{[locale] => }/themes/[theme]/page.tsx (100%) rename src/app/{[locale] => }/themes/page.tsx (100%) rename src/app/{[locale] => }/welcome/page.tsx (100%) delete mode 100644 src/components/locale-switcher.tsx delete mode 100644 src/i18n.ts delete mode 100644 src/i18n/routing.ts delete mode 100644 src/middleware.ts diff --git a/messages/README-LANGUAGES.md b/messages/README-LANGUAGES.md deleted file mode 100644 index a1e84d0..0000000 --- a/messages/README-LANGUAGES.md +++ /dev/null @@ -1,121 +0,0 @@ -# Contributing Translations - -Translation is handled by the [next-intl](https://next-intl-docs.vercel.app/) library. - -To contribute to the translation of your language you must modify the JSON in `/messages` that is named corresponding to the [ISO Language Code](https://www.w3schools.com/tags/ref_language_codes.asp) of your given language. - -When modifying the key-value pairs in the JSON files, ensure you only change the value and not the key. - -Syntax: `"key": "value",` - -If you do not see a JSON for your language then may add the language by following the instructions below. - -## Dev Environment -Ensure you have Node.js and Git installed - -1) Fork the project repository by clicking the 'Fork' button then 'Create Fork' - -2) Clone your fork of the repo using the web url (or any other methods) -``` bash copy -git clone https://github.com/YOUR-GITHUB-USERNAME/www.git -``` -3) Change your current directory to the project directory -``` bash copy -cd www -``` -4) Install the project dependancies using npm -``` bash copy -npm install -``` -5) Start the development server using npm -``` bash copy -npm run dev -``` -6) Open a browser and go to http://localhost:3000/ - -7) Test translations by changing your browsers default language setting - -## Adding a language - -1. Add the language to the `const SUPPORTED_LANGUAGES = ['en', 'de'];` variable in the `./src/i18n.ts` file. -2. Create a new `.json` file in the `./messages` directory named after the [ISO Language Code](https://www.w3schools.com/tags/ref_language_codes.asp) of the language (all lower case so language code es-ES should be es-es.json). -3. Copy the contents of the `en.json` file, make your way down the key-value pairs changing **only the values** to the translated equivalent. - -## Usage - -The key-value pairs are organised into parent keys called **namespaces**. - -In the JSON define the namespaces and their key-value pairs: -```json -{ - "home-page": { - "home-hero-text": "Zen is the best way to browse the web.", - "home-hero-subtext": "Beautifully designed, privacy-focused, and packed with features. We care about your experience, not your data.", -``` - -... then reference these key-value pairs in the TSX instead of using static text: - -```jsx -import { useTranslations } from "next-intl"; - -function HomePage() { - const t = useTranslations('home-page'); - - return ( - <> -

{t('home-hero-text')}

-

{t('home-hero-subtext')}

- - ) -} -``` - -## Troubleshooting - -### Missing Key In JSON - -Each language JSON should have the same set of keys as all the others. If a language is missing a key then you will see the name of the *key* in place of the value on the website. - -You will also be able to see errors on the console in the browser developer tools. -``` -❌ Error: MISSING_MESSAGE: Could not resolve `home-hero-text` in messages for locale `en`. -``` -This means that en.json is missing the 'home-hero-text' key. - -If this occurs then find the key that is missing and add it to the JSON. - -### Key Is Not Referenced In The TSX - -Translations only work if the developer chooses to use the translated value in place of the static value in their HTML. - -Not translated: -``` - -``` - -Translated: -``` - @@ -52,27 +43,27 @@ export function MobileNav() { href="/download" onOpenChange={setOpen} > - {t('mobile-download-link')} + Download - {t('mobile-theme-store-link')} + Theme Store - {t('mobile-release-notes-link')} + Release Notes - {t('mobile-donate-link')} {"<"}3 + Donate {"<"}3 - {translatedComponents.map(({title, href, description}) => ( + {components.map(({title, href, description}) => ( ({ - title: t(component.titleKey), - href: component.href, - description: t(component.descriptionKey), - })); - return (
@@ -68,7 +58,7 @@ export function Navigation() { - {t('nav-getting-started')} + Getting Started
  • @@ -79,22 +69,23 @@ export function Navigation() { >
    - {t('nav-gs-zen-heading')} + Zen Browser

    - {t('nav-gs-zen-text')} + Firefox based browser with a focus on privacy and + customization.

    • - - {t('nav-gs-download-li-text')} + + Start using Zen Browser today with just a few clicks. - - {t('nav-gs-themes-li-text')} + + Customize your browser with a variety of themes! - - {t('nav-gs-release-text')} + + Stay up to date with the latest changes.
@@ -102,30 +93,30 @@ export function Navigation() { - {t('nav-donate')} + Donate
    - {t('nav-donate-patreon-li-text')} + Support us on Patreon and get exclusive rewards and keep the project alive. - {t('nav-donate-ko-fi-li-text')} + Ko-fi is a way to support us with a one-time donation and help us keep the project alive.
- {t('nav-useful-links')} + {"Useful Links"}
    - {translatedComponents.map((component) => ( + {components.map((component) => ( { - // Validate that the incoming `locale` parameter is valid - if (!routing.locales.includes(locale as any)) notFound(); - - return { - messages: (await import(`../messages/${locale}.json`)).default - }; -}); \ No newline at end of file diff --git a/src/i18n/routing.ts b/src/i18n/routing.ts deleted file mode 100644 index d4456d2..0000000 --- a/src/i18n/routing.ts +++ /dev/null @@ -1,17 +0,0 @@ -import {defineRouting} from 'next-intl/routing'; -import {createSharedPathnamesNavigation} from 'next-intl/navigation'; -export const SUPPORTED_LANGUAGES = ['en', 'de']; - -export const routing = defineRouting({ - // A list of all locales that are supported - locales: SUPPORTED_LANGUAGES, - - // Used when no locale matches - defaultLocale: 'en', - localePrefix: "always", -}); - -// Lightweight wrappers around Next.js' navigation APIs -// that will consider the routing configuration -export const {Link, redirect, usePathname, useRouter} = - createSharedPathnamesNavigation(routing); \ No newline at end of file diff --git a/src/middleware.ts b/src/middleware.ts deleted file mode 100644 index 789f2e0..0000000 --- a/src/middleware.ts +++ /dev/null @@ -1,9 +0,0 @@ -import createMiddleware from 'next-intl/middleware'; -import {routing} from './i18n/routing'; - -export default createMiddleware(routing); - -export const config = { - // Match only internationalized pathnames and all paths that dont start with static - matcher: ['/', '/:path((?!_next|next|static).*)*'], -}; \ No newline at end of file diff --git a/wrangler.toml b/wrangler.toml index 643c4bc..3ebc000 100644 --- a/wrangler.toml +++ b/wrangler.toml @@ -1,4 +1,4 @@ name = "zenbrowser-www" compatibility_date = "2024-07-29" compatibility_flags = ["nodejs_compat"] -pages_build_output_dir = ".vercel/output/static" \ No newline at end of file +pages_build_output_dir = "out" \ No newline at end of file