feat: Translating only navbar as POC
This commit is contained in:
Waled Khatiz
@@ -1,18 +1,82 @@
|
||||
# Contributing Translations
|
||||
|
||||
To contribute to the translation of your language you must modify the json in `/messages` that is named corresponding to the ISO Language Code of your given language.
|
||||
Translation is handled by the [next-intl](https://next-intl-docs.vercel.app/) library.
|
||||
|
||||
If you do not see a JSON for your language then add the language.
|
||||
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.
|
||||
|
||||
## Adding a language
|
||||
|
||||
1. To add a language you must add the language to the `const SUPPORTED_LANGUAGES = ['en', 'de'];` variable in the `./src/i18n.ts` file.
|
||||
2. You must create a new `.json` file in the `./messages` directory
|
||||
3. Copy the contents of the `en.json` file, make your way down the key-value pairs and change **only the values** to the translated equivalent.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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.
|
||||
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 (
|
||||
<>
|
||||
<h1>{t('home-hero-text')}</h1>
|
||||
<p>{t('home-hero-subtext')}</p>
|
||||
</>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
## 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:
|
||||
```
|
||||
<button>Click Me</button>
|
||||
```
|
||||
|
||||
Translated:
|
||||
```
|
||||
<button>{t('translated-click-me')}
|
||||
```
|
||||
|
||||
The JSON is organized by the file names in the `/components` directory. Find the `.tsx` file that generates the untranslated text and modify it to use the translated value.
|
||||
|
||||
### Documentation
|
||||
|
||||
If the error persists consult the [next-intl documentation](https://next-intl-docs.vercel.app/docs/getting-started).
|
||||
|
||||
|
||||
|
||||
248
messages/de.json
248
messages/de.json
@@ -1,7 +1,249 @@
|
||||
{
|
||||
"branding-assets": {
|
||||
"branding-heading-text": "Branding Assets",
|
||||
"branding-subheading-text": "Download Zen Browser branding assets for your website or project.",
|
||||
"branding-logos-heading-text": "Logos",
|
||||
"branding-logos-subheading-text": "Download the Zen Browser logo in different colors.",
|
||||
"branding-logos-black": "black",
|
||||
"branding-logos-blue": "blue",
|
||||
"branding-logos-brown": "brown",
|
||||
"branding-logos-buff": "buff",
|
||||
"branding-logos-indigo": "indigo",
|
||||
"branding-logos-mantis": "mantis",
|
||||
"branding-logos-orchid": "orchid",
|
||||
"branding-logos-pink": "pink",
|
||||
"branding-logos-tangerine": "tangerine",
|
||||
"branding-logos-turqoise": "turqoise",
|
||||
"branding-logos-white": "white",
|
||||
"branding-logos-yellow": "yellow",
|
||||
"branding-empty-heading-text": "Empty Logos",
|
||||
"branding-empty-subheading-text": "Download the Zen Browser logo in different colors without a filled Zen letter.",
|
||||
"branding-empty-black": "black",
|
||||
"branding-empty-blue": "blue",
|
||||
"branding-empty-brown": "brown",
|
||||
"branding-empty-buff": "buff",
|
||||
"branding-empty-indigo": "indigo",
|
||||
"branding-empty-mantis": "mantis",
|
||||
"branding-empty-orchid": "orchid",
|
||||
"branding-empty-pink": "pink",
|
||||
"branding-empty-tangerine": "tangerine",
|
||||
"branding-empty-turqoise": "turqoise",
|
||||
"branding-empty-white": "white",
|
||||
"branding-empty-yellow": "yellow",
|
||||
"branding-license-heading-text": "License",
|
||||
"branding-license-text-part-1": "All branding assets are licensed under the",
|
||||
"branding-license-text-part-2": "CC BY-SA 4.0",
|
||||
"branding-license-text-part-3": "Thanks to",
|
||||
"branding-license-text-part-4": "Donno (mr. Logos)",
|
||||
"branding-license-text-part-5": "for the assets.",
|
||||
"branding-license-text-part-6": "These logos however shall not be modified in a way that suggests the licensor endorses you or your use.",
|
||||
"branding-license-text-part-7": "You are free to share and adapt the assets for any purpose, even commercially."
|
||||
},
|
||||
"create-theme": {
|
||||
"create-theme-heading-text": "Create your theme",
|
||||
"create-theme-subheading-text": "Create your own theme for Zen Browser and share it with the community.",
|
||||
"create-theme-instruction-text": "If the color is chosen from the palette, the accent color will be set to the user's selection in the preferences. However, if the color is chosen from the color picker, the accent color will be the color selected.",
|
||||
"create-theme-or": "or",
|
||||
"create-theme-primary-color": "Primary color",
|
||||
"create-theme-secondary-color": "Secondary color",
|
||||
"create-theme-tertiary-color": "Tertiary color",
|
||||
"create-theme-border-color": "Border color",
|
||||
"create-theme-dialog-color": "Dialog background color",
|
||||
"create-theme-disclaimer": "Right now, we aren't taking more color themes for the browser, until we find a way to make it more accessible for everyone. However, you can still create your own theme and share it with the community.",
|
||||
"create-theme-theme-data": "Theme data",
|
||||
"create-theme-theme-data-instructions": "Copy the following JSON object and paste it into your Zen Browser theme format.",
|
||||
"create-theme-copy-clipboard": "Copy to clipboard",
|
||||
"create-theme-submit-theme": "Submit theme",
|
||||
"create-theme-button-text": "Button"
|
||||
},
|
||||
"download": {
|
||||
"download-downloaded-text": "Downloaded! ❤️",
|
||||
"download-downloaded-message": "Zen Browser has been downloaded successfully. Enjoy browsing the web with Zen!",
|
||||
"download-source-code": "Source Code",
|
||||
"download-donate": "Donate",
|
||||
"download-release-notes": "Release Notes",
|
||||
"download-installation-instructions": "Installation Instructions",
|
||||
"download-installation-macos-warning": "To install Zen on MacOS, the process is a bit different. Please follow the instructions below:",
|
||||
"download-download-macOS-button-text": "Download Zen for MacOS",
|
||||
"download-download-prompt": "Download ",
|
||||
"download-device-selection-message": "We're thrilled for you to experience Zen Browser. First, let us know which device you're using. This will only take a moment, we promise.",
|
||||
"download-platform-heading-text": "Platform",
|
||||
"download-platform-subheading-text": "Choose the platform you want to download Zen for.",
|
||||
"download-windows-option": "Windows",
|
||||
"download-linux-option": "Linux",
|
||||
"download-macos-option": "MacOS",
|
||||
"download-architecture-heading": "Select Architecture",
|
||||
"download-architecture-subheading": "Choose the architecture of your device, either optimized or generic.",
|
||||
"download-architecture-optimized": "Optimized",
|
||||
"download-architecture-optimized-desc": "Blazing fast and compatible with modern devices",
|
||||
"download-architecture-generic": "Generic",
|
||||
"download-architecture-generic-desc": "Slow but compatible with older devices.",
|
||||
"download-macos-heading": "Download Zen for MacOS",
|
||||
"download-macos-subheading": "Click the button below to download Zen for MacOS.",
|
||||
"download-macos-aarch64": "AArch64",
|
||||
"download-macos-aarch64-desc": "64-bit ARM architecture, for Apple's M Series Chips",
|
||||
"download-macos-intel": "Intel",
|
||||
"download-macos-intel-desc": "64-bit Intel architecture, for older Macs",
|
||||
"download-windows-heading": "Download Zen for Windows",
|
||||
"download-windows-subheading": "Choose the type of download you want for Zen for Windows.",
|
||||
"download-windows-installer": "Installer",
|
||||
"download-windows-installer-desc": "Install Zen with a setup wizard",
|
||||
"download-windows-portable": "Portable",
|
||||
"download-windows-portable-desc": "Download Zen as a ZIP file",
|
||||
"download-linux-heading": "Download Zen for Linux",
|
||||
"download-linux-subheading": "Choose the type of download you want for Zen for Linux.",
|
||||
"download-linux-appimage": "AppImage",
|
||||
"download-linux-appimage-desc": "Install Zen with a setup wizard",
|
||||
"download-linux-portable": "Portable",
|
||||
"download-linux-portable-desc": "Download Zen as a ZIP file",
|
||||
"download-linux-flatpak": "Flatpak",
|
||||
"download-linux-flatpak-desc": "Install Zen from the Flatpak repository.",
|
||||
"download-button-back": "Back",
|
||||
"download-button-download": "Download 🥳",
|
||||
"download-button-continue": "Continue",
|
||||
"download-sysreq-question": "Confused about which build to choose?",
|
||||
"download-sysreq-link": "System requirements"
|
||||
},
|
||||
"features": {
|
||||
"features-your-browser-heading": "Your Browser, your way",
|
||||
"features-your-browser-body": "With Zen's Theme Store, you can customize your browsing experience to reflect your unique style and preferences. Choose from a wide array of themes, colors, and layouts to make Zen truly your own, transforming your browser into a personalized digital space.",
|
||||
"features-your-browser-button": "View Theme Store",
|
||||
"features-community-heading": "Community driven and Open Source",
|
||||
"features-community-body": "Zen thrives on the contributions of its vibrant community. As an open-source project, Zen encourages collaboration and innovation, allowing users and developers alike to shape the future of the browser.",
|
||||
"features-community-button": "GitHub Page",
|
||||
"features-community-checkbox-1": "Firefox Based",
|
||||
"features-community-checkbox-2": "Fully Open Source",
|
||||
"features-community-checkbox-3": "Automated Releases To Ensure Security",
|
||||
"features-community-checkbox-4": "Community-driven",
|
||||
"features-community-checkbox-5": "Constantly Improving",
|
||||
"features-simplicity-heading": "Built for simplicity",
|
||||
"features-simplicity-body": "Zen Browser is designed to be simple and easy to use. It's built with the user in mind, so you can focus on what matters most.",
|
||||
"features-simplicity-checkbox-1": "Completely Customizable",
|
||||
"features-simplicity-checkbox-2": "Vertical Tabs",
|
||||
"features-simplicity-checkbox-3": "Thoughtful Design",
|
||||
"features-splitview-heading": "Split View",
|
||||
"features-splitview-body": "Zen Browser allows you to split your view into multiple panes, so you can work on multiple things at once. It's perfect for multitasking.",
|
||||
"features-splitview-button": "Download Now",
|
||||
"features-tabmgmt-heading": "Better tab management",
|
||||
"features-tabmgmt-body": "Better tab management helps you stay organized and focused, reducing clutter and enhancing productivity",
|
||||
"features-tabmgmt-checkbox-1": "Workspaces",
|
||||
"features-tabmgmt-checkbox-2": "Fast profile switcher",
|
||||
"features-tabmgmt-checkbox-3": "Container Tabs",
|
||||
"features-tabmgmt-checkbox-4": "Tab Groups (Coming Soon)",
|
||||
"features-security-heading-part-1": "Security And Privacy is",
|
||||
"features-security-heading-part-2": "important",
|
||||
"features-security-heading-part-3": "to us",
|
||||
"features-security-body": "Zen is based on Firefox, ensuring that your browsing experience prioritizes security and privacy. With advanced tracking protection and minimal data collection, Zen keeps your online activity safe and secure, giving you peace of mind as you explore the web.",
|
||||
"features-security-in-zen": "Security in Zen",
|
||||
"features-your-privacy": "Your Privacy",
|
||||
"features-sidebar-heading": "Sidebar",
|
||||
"features-sidebar-body": "Zen Browser has a built-in sidebar that lets you quickly access your favorite websites, bookmarks, and more. It's the perfect way to stay organized.",
|
||||
"features-sidebar-checkbox-1": "Quick Access",
|
||||
"features-sidebar-checkbox-2": "Customizable",
|
||||
"features-sidebar-checkbox-3": "Easy to Use",
|
||||
"features-compact-heading": "Introducing Compact Mode",
|
||||
"features-compact-body": "Zen Browser's compact mode gives you more screen real estate by hiding the title bar and tabs. It's perfect for when you need to focus on your work.",
|
||||
"features-compact-button": "What are you waiting for?",
|
||||
"features-convinced-heading": "Convinced?",
|
||||
"features-convinced-body": "Download Zen Browser now and experience the future of browsing.",
|
||||
"features-convinced-button": "Download Now",
|
||||
"features-more-convinced-heading": "Even more convinced?",
|
||||
"features-more-convinced-body": "Help support the development of Zen Browser by donating to our cause.",
|
||||
"features-patreon-link": "Patreon",
|
||||
"features-ko-fi-link": "Ko-fi"
|
||||
},
|
||||
"footer": {
|
||||
"footer-text-part-1": "Zen Browser © ",
|
||||
"footer-text-part-2": "Made with ❤️ by the Zen team.",
|
||||
"footer-source-code-link": "Source Code"
|
||||
},
|
||||
"header": {
|
||||
"header-alpha-button": "Introducing Zen Alpha",
|
||||
"header-hero-heading-line-1": "Zen is the best way",
|
||||
"header-hero-heading-line-2": "to browse the web.",
|
||||
"header-hero-subheading-line-1": "Beautifully designed, privacy-focused, and packed with features.",
|
||||
"header-hero-subheading-line-2": "We care about your experience, not your data.",
|
||||
"header-download-button": "Download Zen Now",
|
||||
"header-exploring-button": "Start Exploring"
|
||||
},
|
||||
"logo": {
|
||||
"logo-text": "zen"
|
||||
},
|
||||
"marketplace": {
|
||||
"marketplace-heading": "Themes Store"
|
||||
},
|
||||
"mobile-nav": {
|
||||
"mobile-menu-button": "Menü umschalten",
|
||||
"mobile-download-link": "Herunterladen",
|
||||
"mobile-theme-store-link": "Theme Store",
|
||||
"mobile-release-notes-link": "Versionshinweise",
|
||||
"mobile-donate-link": "Spenden"
|
||||
},
|
||||
"mode-toggle": {
|
||||
"toggle-button-text": "Thema umschalten"
|
||||
},
|
||||
"navigation": {
|
||||
"getting-started": "Erste Schritte",
|
||||
"donate": "Spenden",
|
||||
"useful-links": "Nützliche Links"
|
||||
"nav-components-privacy-policy": "Datenschutzbestimmungen",
|
||||
"nav-components-privacy-policy-text": "Erfahren Sie, wie wir Ihre Daten behandeln. Keine Sorge, wir sammeln nichts!",
|
||||
"nav-components-discord": "Discord",
|
||||
"nav-components-discord-text": "Treten Sie unserem Discord-Server bei, um mit der Community zu chatten.",
|
||||
"nav-components-source-code": "Quellcode",
|
||||
"nav-components-source-code-text": "Sehen Sie sich unseren Quellcode auf GitHub an und hinterlassen Sie ein Sternchen!",
|
||||
"nav-components-branding-assets": "Branding-Ressourcen",
|
||||
"nav-components-branding-assets-text": "Laden Sie Branding-Ressourcen von Zen Browser für Ihre Website oder Ihr Projekt herunter.",
|
||||
"nav-components-documentation": "Dokumentation",
|
||||
"nav-components-documentation-text": "Erfahren Sie, wie Sie Zen Browser verwenden und Ihre eigenen Themes erstellen.",
|
||||
"nav-getting-started": "Erste Schritte",
|
||||
"nav-gs-zen-heading": "Zen Browser",
|
||||
"nav-gs-zen-text": "Auf Firefox basierter Browser mit Fokus auf Datenschutz und Anpassung.",
|
||||
"nav-gs-download-li": "Herunterladen",
|
||||
"nav-gs-download-li-text": "Beginnen Sie noch heute mit der Verwendung von Zen Browser – nur wenige Klicks.",
|
||||
"nav-gs-themes-li": "Theme Store",
|
||||
"nav-gs-themes-li-text": "Passen Sie Ihren Browser mit einer Vielzahl von Themes an!",
|
||||
"nav-gs-release-li": "Versionshinweise",
|
||||
"nav-gs-release-text": "Bleiben Sie auf dem Laufenden über die neuesten Änderungen.",
|
||||
"nav-donate": "Spenden",
|
||||
"nav-donate-patreon-li": "Patreon",
|
||||
"nav-donate-patreon-li-text": "Unterstützen Sie uns auf Patreon und erhalten Sie exklusive Belohnungen, um das Projekt am Leben zu erhalten.",
|
||||
"nav-donate-ko-fi-li": "Ko-fi",
|
||||
"nav-donate-ko-fi-li-text": "Ko-fi ist eine Möglichkeit, uns mit einer einmaligen Spende zu unterstützen und das Projekt am Leben zu halten.",
|
||||
"nav-useful-links": "Nützliche Links"
|
||||
},
|
||||
"release-notes": {
|
||||
"release-notes-heading": "Release notes for ",
|
||||
"release-notes-report-issue-part-1": "If you encounter any issues, please report them on",
|
||||
"release-notes-report-issue-part-2": "the issues page",
|
||||
"release-notes-report-issue-part-3": ". Thanks everyone for your feedback! ❤️",
|
||||
"release-notes-breaking-change-heading": "Breaking changes",
|
||||
"release-notes-breaking-change-subheading": "The following changes may break existing functionality:",
|
||||
"release-notes-features-heading": "Features",
|
||||
"release-notes-features-subheading": "The following features have been added:",
|
||||
"release-notes-fixed-heading": "Fixed",
|
||||
"release-notes-fixes-subheading": "The following issues have been fixed:",
|
||||
"release-notes-download-button": "Download Zen now!"
|
||||
},
|
||||
"theme-card": {
|
||||
"theme-card-homepage": "Homepage",
|
||||
"theme-card-author": "Author"
|
||||
},
|
||||
"theme-page": {
|
||||
"theme-page-go-back": "Go back",
|
||||
"theme-page-visit-homepage": "Visit Homepage",
|
||||
"theme-page-install": "Install Theme 🎉",
|
||||
"theme-page-uninstall": "Uninstall Theme",
|
||||
"theme-citation-prefix": "Theme by"
|
||||
},
|
||||
"theme-provider": {
|
||||
|
||||
},
|
||||
"themes-search": {
|
||||
"themes-search-placeholder": "Search themes",
|
||||
"themes-search-submit": "Submit a theme",
|
||||
"themes-search-create": "Create your theme"
|
||||
},
|
||||
"welcome": {
|
||||
"welcome-heading": "Welcome to Zen Browser!",
|
||||
"welcome-subheading-line-1": "A Firefox based browser with a focus on privacy and customization.",
|
||||
"welcome-subheading-line-2": "Start using it by clicking on the sidebar icon or trying out the split view feature!"
|
||||
}
|
||||
}
|
||||
248
messages/en.json
248
messages/en.json
@@ -1,7 +1,249 @@
|
||||
{
|
||||
"branding-assets": {
|
||||
"branding-heading-text": "Branding Assets",
|
||||
"branding-subheading-text": "Download Zen Browser branding assets for your website or project.",
|
||||
"branding-logos-heading-text": "Logos",
|
||||
"branding-logos-subheading-text": "Download the Zen Browser logo in different colors.",
|
||||
"branding-logos-black": "black",
|
||||
"branding-logos-blue": "blue",
|
||||
"branding-logos-brown": "brown",
|
||||
"branding-logos-buff": "buff",
|
||||
"branding-logos-indigo": "indigo",
|
||||
"branding-logos-mantis": "mantis",
|
||||
"branding-logos-orchid": "orchid",
|
||||
"branding-logos-pink": "pink",
|
||||
"branding-logos-tangerine": "tangerine",
|
||||
"branding-logos-turqoise": "turqoise",
|
||||
"branding-logos-white": "white",
|
||||
"branding-logos-yellow": "yellow",
|
||||
"branding-empty-heading-text": "Empty Logos",
|
||||
"branding-empty-subheading-text": "Download the Zen Browser logo in different colors without a filled Zen letter.",
|
||||
"branding-empty-black": "black",
|
||||
"branding-empty-blue": "blue",
|
||||
"branding-empty-brown": "brown",
|
||||
"branding-empty-buff": "buff",
|
||||
"branding-empty-indigo": "indigo",
|
||||
"branding-empty-mantis": "mantis",
|
||||
"branding-empty-orchid": "orchid",
|
||||
"branding-empty-pink": "pink",
|
||||
"branding-empty-tangerine": "tangerine",
|
||||
"branding-empty-turqoise": "turqoise",
|
||||
"branding-empty-white": "white",
|
||||
"branding-empty-yellow": "yellow",
|
||||
"branding-license-heading-text": "License",
|
||||
"branding-license-text-part-1": "All branding assets are licensed under the",
|
||||
"branding-license-text-part-2": "CC BY-SA 4.0",
|
||||
"branding-license-text-part-3": "Thanks to",
|
||||
"branding-license-text-part-4": "Donno (mr. Logos)",
|
||||
"branding-license-text-part-5": "for the assets.",
|
||||
"branding-license-text-part-6": "These logos however shall not be modified in a way that suggests the licensor endorses you or your use.",
|
||||
"branding-license-text-part-7": "You are free to share and adapt the assets for any purpose, even commercially."
|
||||
},
|
||||
"create-theme": {
|
||||
"create-theme-heading-text": "Create your theme",
|
||||
"create-theme-subheading-text": "Create your own theme for Zen Browser and share it with the community.",
|
||||
"create-theme-instruction-text": "If the color is chosen from the palette, the accent color will be set to the user's selection in the preferences. However, if the color is chosen from the color picker, the accent color will be the color selected.",
|
||||
"create-theme-or": "or",
|
||||
"create-theme-primary-color": "Primary color",
|
||||
"create-theme-secondary-color": "Secondary color",
|
||||
"create-theme-tertiary-color": "Tertiary color",
|
||||
"create-theme-border-color": "Border color",
|
||||
"create-theme-dialog-color": "Dialog background color",
|
||||
"create-theme-disclaimer": "Right now, we aren't taking more color themes for the browser, until we find a way to make it more accessible for everyone. However, you can still create your own theme and share it with the community.",
|
||||
"create-theme-theme-data": "Theme data",
|
||||
"create-theme-theme-data-instructions": "Copy the following JSON object and paste it into your Zen Browser theme format.",
|
||||
"create-theme-copy-clipboard": "Copy to clipboard",
|
||||
"create-theme-submit-theme": "Submit theme",
|
||||
"create-theme-button-text": "Button"
|
||||
},
|
||||
"download": {
|
||||
"download-downloaded-text": "Downloaded! ❤️",
|
||||
"download-downloaded-message": "Zen Browser has been downloaded successfully. Enjoy browsing the web with Zen!",
|
||||
"download-source-code": "Source Code",
|
||||
"download-donate": "Donate",
|
||||
"download-release-notes": "Release Notes",
|
||||
"download-installation-instructions": "Installation Instructions",
|
||||
"download-installation-macos-warning": "To install Zen on MacOS, the process is a bit different. Please follow the instructions below:",
|
||||
"download-download-macOS-button-text": "Download Zen for MacOS",
|
||||
"download-download-prompt": "Download ",
|
||||
"download-device-selection-message": "We're thrilled for you to experience Zen Browser. First, let us know which device you're using. This will only take a moment, we promise.",
|
||||
"download-platform-heading-text": "Platform",
|
||||
"download-platform-subheading-text": "Choose the platform you want to download Zen for.",
|
||||
"download-windows-option": "Windows",
|
||||
"download-linux-option": "Linux",
|
||||
"download-macos-option": "MacOS",
|
||||
"download-architecture-heading": "Select Architecture",
|
||||
"download-architecture-subheading": "Choose the architecture of your device, either optimized or generic.",
|
||||
"download-architecture-optimized": "Optimized",
|
||||
"download-architecture-optimized-desc": "Blazing fast and compatible with modern devices",
|
||||
"download-architecture-generic": "Generic",
|
||||
"download-architecture-generic-desc": "Slow but compatible with older devices.",
|
||||
"download-macos-heading": "Download Zen for MacOS",
|
||||
"download-macos-subheading": "Click the button below to download Zen for MacOS.",
|
||||
"download-macos-aarch64": "AArch64",
|
||||
"download-macos-aarch64-desc": "64-bit ARM architecture, for Apple's M Series Chips",
|
||||
"download-macos-intel": "Intel",
|
||||
"download-macos-intel-desc": "64-bit Intel architecture, for older Macs",
|
||||
"download-windows-heading": "Download Zen for Windows",
|
||||
"download-windows-subheading": "Choose the type of download you want for Zen for Windows.",
|
||||
"download-windows-installer": "Installer",
|
||||
"download-windows-installer-desc": "Install Zen with a setup wizard",
|
||||
"download-windows-portable": "Portable",
|
||||
"download-windows-portable-desc": "Download Zen as a ZIP file",
|
||||
"download-linux-heading": "Download Zen for Linux",
|
||||
"download-linux-subheading": "Choose the type of download you want for Zen for Linux.",
|
||||
"download-linux-appimage": "AppImage",
|
||||
"download-linux-appimage-desc": "Install Zen with a setup wizard",
|
||||
"download-linux-portable": "Portable",
|
||||
"download-linux-portable-desc": "Download Zen as a ZIP file",
|
||||
"download-linux-flatpak": "Flatpak",
|
||||
"download-linux-flatpak-desc": "Install Zen from the Flatpak repository.",
|
||||
"download-button-back": "Back",
|
||||
"download-button-download": "Download 🥳",
|
||||
"download-button-continue": "Continue",
|
||||
"download-sysreq-question": "Confused about which build to choose?",
|
||||
"download-sysreq-link": "System requirements"
|
||||
},
|
||||
"features": {
|
||||
"features-your-browser-heading": "Your Browser, your way",
|
||||
"features-your-browser-body": "With Zen's Theme Store, you can customize your browsing experience to reflect your unique style and preferences. Choose from a wide array of themes, colors, and layouts to make Zen truly your own, transforming your browser into a personalized digital space.",
|
||||
"features-your-browser-button": "View Theme Store",
|
||||
"features-community-heading": "Community driven and Open Source",
|
||||
"features-community-body": "Zen thrives on the contributions of its vibrant community. As an open-source project, Zen encourages collaboration and innovation, allowing users and developers alike to shape the future of the browser.",
|
||||
"features-community-button": "GitHub Page",
|
||||
"features-community-checkbox-1": "Firefox Based",
|
||||
"features-community-checkbox-2": "Fully Open Source",
|
||||
"features-community-checkbox-3": "Automated Releases To Ensure Security",
|
||||
"features-community-checkbox-4": "Community-driven",
|
||||
"features-community-checkbox-5": "Constantly Improving",
|
||||
"features-simplicity-heading": "Built for simplicity",
|
||||
"features-simplicity-body": "Zen Browser is designed to be simple and easy to use. It's built with the user in mind, so you can focus on what matters most.",
|
||||
"features-simplicity-checkbox-1": "Completely Customizable",
|
||||
"features-simplicity-checkbox-2": "Vertical Tabs",
|
||||
"features-simplicity-checkbox-3": "Thoughtful Design",
|
||||
"features-splitview-heading": "Split View",
|
||||
"features-splitview-body": "Zen Browser allows you to split your view into multiple panes, so you can work on multiple things at once. It's perfect for multitasking.",
|
||||
"features-splitview-button": "Download Now",
|
||||
"features-tabmgmt-heading": "Better tab management",
|
||||
"features-tabmgmt-body": "Better tab management helps you stay organized and focused, reducing clutter and enhancing productivity",
|
||||
"features-tabmgmt-checkbox-1": "Workspaces",
|
||||
"features-tabmgmt-checkbox-2": "Fast profile switcher",
|
||||
"features-tabmgmt-checkbox-3": "Container Tabs",
|
||||
"features-tabmgmt-checkbox-4": "Tab Groups (Coming Soon)",
|
||||
"features-security-heading-part-1": "Security And Privacy is",
|
||||
"features-security-heading-part-2": "important",
|
||||
"features-security-heading-part-3": "to us",
|
||||
"features-security-body": "Zen is based on Firefox, ensuring that your browsing experience prioritizes security and privacy. With advanced tracking protection and minimal data collection, Zen keeps your online activity safe and secure, giving you peace of mind as you explore the web.",
|
||||
"features-security-in-zen": "Security in Zen",
|
||||
"features-your-privacy": "Your Privacy",
|
||||
"features-sidebar-heading": "Sidebar",
|
||||
"features-sidebar-body": "Zen Browser has a built-in sidebar that lets you quickly access your favorite websites, bookmarks, and more. It's the perfect way to stay organized.",
|
||||
"features-sidebar-checkbox-1": "Quick Access",
|
||||
"features-sidebar-checkbox-2": "Customizable",
|
||||
"features-sidebar-checkbox-3": "Easy to Use",
|
||||
"features-compact-heading": "Introducing Compact Mode",
|
||||
"features-compact-body": "Zen Browser's compact mode gives you more screen real estate by hiding the title bar and tabs. It's perfect for when you need to focus on your work.",
|
||||
"features-compact-button": "What are you waiting for?",
|
||||
"features-convinced-heading": "Convinced?",
|
||||
"features-convinced-body": "Download Zen Browser now and experience the future of browsing.",
|
||||
"features-convinced-button": "Download Now",
|
||||
"features-more-convinced-heading": "Even more convinced?",
|
||||
"features-more-convinced-body": "Help support the development of Zen Browser by donating to our cause.",
|
||||
"features-patreon-link": "Patreon",
|
||||
"features-ko-fi-link": "Ko-fi"
|
||||
},
|
||||
"footer": {
|
||||
"footer-text-part-1": "Zen Browser © ",
|
||||
"footer-text-part-2": "Made with ❤️ by the Zen team.",
|
||||
"footer-source-code-link": "Source Code"
|
||||
},
|
||||
"header": {
|
||||
"header-alpha-button": "Introducing Zen Alpha",
|
||||
"header-hero-heading-line-1": "Zen is the best way",
|
||||
"header-hero-heading-line-2": "to browse the web.",
|
||||
"header-hero-subheading-line-1": "Beautifully designed, privacy-focused, and packed with features.",
|
||||
"header-hero-subheading-line-2": "We care about your experience, not your data.",
|
||||
"header-download-button": "Download Zen Now",
|
||||
"header-exploring-button": "Start Exploring"
|
||||
},
|
||||
"logo": {
|
||||
"logo-text": "zen"
|
||||
},
|
||||
"marketplace": {
|
||||
"marketplace-heading": "Themes Store"
|
||||
},
|
||||
"mobile-nav": {
|
||||
"mobile-menu-button": "Toggle Menu",
|
||||
"mobile-download-link": "Download",
|
||||
"mobile-theme-store-link": "Theme Store",
|
||||
"mobile-release-notes-link": "Release Notes",
|
||||
"mobile-donate-link": "Donate"
|
||||
},
|
||||
"mode-toggle": {
|
||||
"toggle-button-text": "Toggle Theme"
|
||||
},
|
||||
"navigation": {
|
||||
"getting-started": "Getting Started",
|
||||
"donate": "Donate",
|
||||
"useful-links": "Useful Links"
|
||||
"nav-components-privacy-policy": "Privacy Policy",
|
||||
"nav-components-privacy-policy-text": "Learn how we handle your data. Don't worry, we don't collect anything!",
|
||||
"nav-components-discord": "Discord",
|
||||
"nav-components-discord-text": "Join our Discord server to chat with the community.",
|
||||
"nav-components-source-code": "Source Code",
|
||||
"nav-components-source-code-text": "Check out our source code on GitHub and leave a star!",
|
||||
"nav-components-branding-assets": "Branding Assets",
|
||||
"nav-components-branding-assets-text": "Download Zen Browser branding assets for your website or project.",
|
||||
"nav-components-documentation": "Documentation",
|
||||
"nav-components-documentation-text": "Learn how to use Zen Browser and build your own themes.",
|
||||
"nav-getting-started": "Getting started",
|
||||
"nav-gs-zen-heading": "Zen Browser",
|
||||
"nav-gs-zen-text": "Firefox based browser with a focus on privacy and customization.",
|
||||
"nav-gs-download-li": "Download",
|
||||
"nav-gs-download-li-text": "Start using Zen Browser today with just a few clicks.",
|
||||
"nav-gs-themes-li": "Themes Store",
|
||||
"nav-gs-themes-li-text": "Customize your browser with a variety of themes!",
|
||||
"nav-gs-release-li": "Release Notes",
|
||||
"nav-gs-release-text": "Stay up to date with the latest changes.",
|
||||
"nav-donate": "Donate",
|
||||
"nav-donate-patreon-li": "Patreon",
|
||||
"nav-donate-patreon-li-text": "Support us on Patreon and get exclusive rewards and keep the project alive.",
|
||||
"nav-donate-ko-fi-li": "Ko-fi",
|
||||
"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.",
|
||||
"nav-useful-links": "Useful Links"
|
||||
},
|
||||
"release-notes": {
|
||||
"release-notes-heading": "Release notes for ",
|
||||
"release-notes-report-issue-part-1": "If you encounter any issues, please report them on",
|
||||
"release-notes-report-issue-part-2": "the issues page",
|
||||
"release-notes-report-issue-part-3": ". Thanks everyone for your feedback! ❤️",
|
||||
"release-notes-breaking-change-heading": "Breaking changes",
|
||||
"release-notes-breaking-change-subheading": "The following changes may break existing functionality:",
|
||||
"release-notes-features-heading": "Features",
|
||||
"release-notes-features-subheading": "The following features have been added:",
|
||||
"release-notes-fixed-heading": "Fixed",
|
||||
"release-notes-fixes-subheading": "The following issues have been fixed:",
|
||||
"release-notes-download-button": "Download Zen now!"
|
||||
},
|
||||
"theme-card": {
|
||||
"theme-card-homepage": "Homepage",
|
||||
"theme-card-author": "Author"
|
||||
},
|
||||
"theme-page": {
|
||||
"theme-page-go-back": "Go back",
|
||||
"theme-page-visit-homepage": "Visit Homepage",
|
||||
"theme-page-install": "Install Theme 🎉",
|
||||
"theme-page-uninstall": "Uninstall Theme",
|
||||
"theme-citation-prefix": "Theme by"
|
||||
},
|
||||
"theme-provider": {
|
||||
|
||||
},
|
||||
"themes-search": {
|
||||
"themes-search-placeholder": "Search themes",
|
||||
"themes-search-submit": "Submit a theme",
|
||||
"themes-search-create": "Create your theme"
|
||||
},
|
||||
"welcome": {
|
||||
"welcome-heading": "Welcome to Zen Browser!",
|
||||
"welcome-subheading-line-1": "A Firefox based browser with a focus on privacy and customization.",
|
||||
"welcome-subheading-line-2": "Start using it by clicking on the sidebar icon or trying out the split view feature!"
|
||||
}
|
||||
}
|
||||
@@ -11,9 +11,18 @@ import { ScrollArea } from './ui/scroll-area'
|
||||
import Logo from './logo'
|
||||
import { ny } from '@/lib/utils'
|
||||
import { components } from './navigation'
|
||||
import { useTranslations } from 'next-intl'
|
||||
|
||||
export function MobileNav() {
|
||||
const [open, setOpen] = React.useState(false)
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const t = useTranslations('mobile-nav');
|
||||
const t2 = useTranslations('navigation');
|
||||
|
||||
const translatedComponents = components.map(component => ({
|
||||
title: t2(component.titleKey),
|
||||
href: component.href,
|
||||
description: t2(component.descriptionKey),
|
||||
}));
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={setOpen}>
|
||||
@@ -25,7 +34,7 @@ export function MobileNav() {
|
||||
className="mr-2 px-0 ml-auto text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0"
|
||||
>
|
||||
<SidebarOpen className="size-6" />
|
||||
<span className="sr-only">Toggle Menu</span>
|
||||
<span className="sr-only">{t('mobile-menu-button')}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</SheetTrigger>
|
||||
@@ -43,27 +52,27 @@ export function MobileNav() {
|
||||
href="/download"
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
Download
|
||||
{t('mobile-download-link')}
|
||||
</MobileLink>
|
||||
<MobileLink
|
||||
href="/themes"
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
Theme Store
|
||||
{t('mobile-theme-store-link')}
|
||||
</MobileLink>
|
||||
<MobileLink
|
||||
href="/release-notes"
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
Release Notes
|
||||
{t('mobile-release-notes-link')}
|
||||
</MobileLink>
|
||||
<MobileLink
|
||||
href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
Donate {"<"}3
|
||||
{t('mobile-donate-link')} {"<"}3
|
||||
</MobileLink>
|
||||
{components.map(({title, href, description}) => (
|
||||
{translatedComponents.map(({title, href, description}) => (
|
||||
<MobileLink
|
||||
href={href}
|
||||
key={href}
|
||||
|
||||
@@ -20,31 +20,31 @@ import { HeartIcon } from "lucide-react"
|
||||
import { HeartFilledIcon } from "@radix-ui/react-icons"
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export const components: { title: string; href: string; description: string }[] = [
|
||||
export const components: { titleKey: string; href: string; descriptionKey: string }[] = [
|
||||
{
|
||||
title: "Privacy Policy",
|
||||
titleKey: "nav-components-privacy-policy",
|
||||
href: "/privacy-policy",
|
||||
description: "Learn how we handle your data. Don't worry, we don't collect anything!",
|
||||
descriptionKey: "nav-components-privacy-policy-text",
|
||||
},
|
||||
{
|
||||
title: "Discord",
|
||||
titleKey: "nav-components-discord",
|
||||
href: "https://discord.gg/nnShMQzR4b",
|
||||
description: "Join our Discord server to chat with the community."
|
||||
descriptionKey: "nav-components-discord-text"
|
||||
},
|
||||
{
|
||||
title: "Source Code",
|
||||
titleKey: "nav-components-source-code",
|
||||
href: "https://github.com/zen-browser",
|
||||
description: "Check out our source code on GitHub and leave a star!"
|
||||
descriptionKey: "nav-components-source-code-text"
|
||||
},
|
||||
{
|
||||
title: "Branding Assets",
|
||||
titleKey: "nav-components-branding-assets",
|
||||
href: "/branding-assets",
|
||||
description: "Download Zen Browser branding assets for your website or project."
|
||||
descriptionKey: "nav-components-branding-assets-text"
|
||||
},
|
||||
{
|
||||
title: "Documentation",
|
||||
titleKey: "nav-components-documentation",
|
||||
href: "https://docs.zen-browser.app/",
|
||||
description: "Learn how to use Zen Browser and build your own themes."
|
||||
descriptionKey: "nav-components-documentation-text"
|
||||
}
|
||||
]
|
||||
|
||||
@@ -52,6 +52,14 @@ export function Navigation() {
|
||||
|
||||
const t = useTranslations('navigation');
|
||||
|
||||
const translatedComponents = components.map(component => ({
|
||||
title: t(component.titleKey),
|
||||
href: component.href,
|
||||
description: t(component.descriptionKey),
|
||||
}));
|
||||
|
||||
console.log(translatedComponents);
|
||||
|
||||
return (
|
||||
<div className="bg-background z-40 top-0 left-0 w-full flex fixed border-b border-grey p-2 items-center justify-center">
|
||||
<MobileNav />
|
||||
@@ -63,7 +71,7 @@ export function Navigation() {
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>{t('getting-started')}</NavigationMenuTrigger>
|
||||
<NavigationMenuTrigger>{t('nav-getting-started')}</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
|
||||
<li className="row-span-3">
|
||||
@@ -74,23 +82,22 @@ export function Navigation() {
|
||||
>
|
||||
<Logo />
|
||||
<div className="mb-2 mt-4 text-lg font-medium">
|
||||
Zen Browser
|
||||
{t('nav-gs-zen-heading')}
|
||||
</div>
|
||||
<p className="text-sm leading-tight text-muted-foreground">
|
||||
Firefox based browser with a focus on privacy and
|
||||
customization.
|
||||
{t('nav-gs-zen-text')}
|
||||
</p>
|
||||
</a>
|
||||
</NavigationMenuLink>
|
||||
</li>
|
||||
<ListItem href="/download" title="Download">
|
||||
Start using Zen Browser today with just a few clicks.
|
||||
<ListItem href="/download" title={t('nav-gs-download-li')}>
|
||||
{t('nav-gs-download-li-text')}
|
||||
</ListItem>
|
||||
<ListItem href="/themes" title="Themes Store">
|
||||
Customize your browser with a variety of themes!
|
||||
<ListItem href="/themes" title={t('nav-gs-themes-li')}>
|
||||
{t('nav-gs-themes-li-text')}
|
||||
</ListItem>
|
||||
<ListItem href="/release-notes" title="Release Notes">
|
||||
Stay up to date with the latest changes.
|
||||
<ListItem href="/release-notes" title={t('nav-gs-release-li')}>
|
||||
{t('nav-gs-release-text')}
|
||||
</ListItem>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
@@ -98,30 +105,30 @@ export function Navigation() {
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>
|
||||
<HeartFilledIcon className="text-red-500" />
|
||||
<span className="ml-2">{t('donate')}</span>
|
||||
<span className="ml-2">{t('nav-donate')}</span>
|
||||
</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
|
||||
<ListItem
|
||||
title="Patreon"
|
||||
title={t('nav-donate-patreon-li')}
|
||||
href="https://patreon.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
|
||||
>
|
||||
Support us on Patreon and get exclusive rewards and keep the project alive.
|
||||
{t('nav-donate-patreon-li-text')}
|
||||
</ListItem>
|
||||
<ListItem
|
||||
title="Ko-fi"
|
||||
title={t('nav-donate-ko-fi-li')}
|
||||
href="https://ko-fi.com/zen_browser?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
|
||||
>
|
||||
Ko-fi is a way to support us with a one-time donation and help us keep the project alive.
|
||||
{t('nav-donate-ko-fi-li-text')}
|
||||
</ListItem>
|
||||
</ul>
|
||||
</NavigationMenuContent>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuTrigger>{t('useful-links')}</NavigationMenuTrigger>
|
||||
<NavigationMenuTrigger>{t('nav-useful-links')}</NavigationMenuTrigger>
|
||||
<NavigationMenuContent>
|
||||
<ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
|
||||
{components.map((component) => (
|
||||
{translatedComponents.map((component) => (
|
||||
<ListItem
|
||||
key={component.title}
|
||||
title={component.title}
|
||||
|
||||
Reference in New Issue
Block a user