From 5fa49f6d87be4eae0f2ec2f34c08ae6265f38467 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Wed, 19 Jul 2023 10:07:31 -0400 Subject: [PATCH] Localization dashboard webview --- l10n/bundle.l10n.json | 39 ++++++ src/dashboardWebView/components/App.tsx | 14 +- .../components/Header/Navigation.tsx | 26 ++-- .../TaxonomyView/TaxonomyManager.tsx | 22 +-- .../components/TaxonomyView/TaxonomyView.tsx | 12 +- .../components/UnknownView/UnknownView.tsx | 10 +- .../components/WelcomeView/WelcomeScreen.tsx | 36 ++--- src/localization/localization.enum.ts | 132 ++++++++++++++++++ 8 files changed, 242 insertions(+), 49 deletions(-) diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json index 6ba3d8cf..a51122d3 100644 --- a/l10n/bundle.l10n.json +++ b/l10n/bundle.l10n.json @@ -84,6 +84,10 @@ "dashboard.header.grouping.option.draft": "Draft/Published", "dashboard.header.grouping.menuButton.label": "Group by", + "dashboard.header.navigation.allArticles": "All articles", + "dashboard.header.navigation.published": "Published", + "dashboard.header.navigation.draft": "In draft", + "dashboard.header.header.createContent": "Create content", "dashboard.header.header.createByContentType": "Create by content type", "dashboard.header.header.createByTemplate": "Create by template", @@ -228,6 +232,41 @@ "dashboard.taxonomyView.taxonomyLookup.button.title": "Show contents with {0} in {1}", + "dashboard.taxonomyView.taxonomyManager.description": "Create, edit, and manage the {0} of your site", + "dashboard.taxonomyView.taxonomyManager.button.create": "Create a new {0} value", + "dashboard.taxonomyView.taxonomyManager.table.heading.name": "Name", + "dashboard.taxonomyView.taxonomyManager.table.heading.count": "Count", + "dashboard.taxonomyView.taxonomyManager.table.heading.action": "Action", + "dashboard.taxonomyView.taxonomyManager.table.row.empty": "No {0} found", + "dashboard.taxonomyView.taxonomyManager.table.unmapped.title": "Missing in your settings", + + "dashboard.taxonomyView.taxonomyView.navigationBar.title": "Select the taxonomy", + "dashboard.taxonomyView.taxonomyView.button.import": "Import taxonomy", + "dashboard.taxonomyView.taxonomyView.navigationItem.tags": "Tags", + "dashboard.taxonomyView.taxonomyView.navigationItem.categories": "Categories", + + "dashboard.unkownView.title": "View does not exist", + "dashboard.unkownView.description": "You seem to have ended up on a view that doesn't exist. Please re-open the dashboard.", + + "dashboard.welcomeScreen.title": "Manage your static site with Front Matter", + "dashboard.welcomeScreen.thanks": "Thank you for using Front Matter!", + "dashboard.welcomeScreen.description": "We try to aim to make Front Matter as easy to use as possible, but if you have any questions or suggestions. Please don't hesitate to reach out to us on GitHub.", + "dashboard.welcomeScreen.link.github.title": "GitHub", + "dashboard.welcomeScreen.link.github.label": "GitHub / Documentation", + "dashboard.welcomeScreen.link.sponsor.title": "Become a sponsor", + "dashboard.welcomeScreen.link.sponsor.label": "Sponsor", + "dashboard.welcomeScreen.link.review.title": "Write a review", + "dashboard.welcomeScreen.link.review.label": "Review", + "dashboard.welcomeScreen.actions.heading": "Perform the next steps to get you started with the extension", + "dashboard.welcomeScreen.actions.description": "You can also use the extension from the Front Matter side panel. There you will find the actions you can perform specifically for your pages.", + "dashboard.welcomeScreen.actions.thanks": "We hope you enjoy Front Matter!", + + "dashboard.app.developer.title": "Developer mode", + "dashboard.app.developer.reload.title": "Reload the dashboard", + "dashboard.app.developer.reload.label": "Reload", + "dashboard.app.developer.devTools.title": "Open the DevTools", + "dashboard.app.developer.devTools.label": "DevTools", + "panel.actions.title": "Actions", "panel.actions.openDashboard": "Open dashboard", "panel.actions.openPreview": "Open preview", diff --git a/src/dashboardWebView/components/App.tsx b/src/dashboardWebView/components/App.tsx index 685e7b0f..ed45ca69 100644 --- a/src/dashboardWebView/components/App.tsx +++ b/src/dashboardWebView/components/App.tsx @@ -19,6 +19,8 @@ import { UnknownView } from './UnknownView'; import { ErrorBoundary } from '@sentry/react'; import { ErrorView } from './ErrorView'; import { DashboardMessage } from '../DashboardMessage'; +import * as l10n from '@vscode/l10n'; +import { LocalizationKey } from '../../localization'; export interface IAppProps { showWelcome: boolean; @@ -96,19 +98,21 @@ Stack: ${componentStack}` { isDevMode && (
- Development mode + + {l10n.t(LocalizationKey.dashboardAppDeveloperTitle)} + - Reload + title={l10n.t(LocalizationKey.dashboardAppDeveloperReloadTitle)}> + {l10n.t(LocalizationKey.dashboardAppDeveloperReloadLabel)} - DevTools + title={l10n.t(LocalizationKey.dashboardAppDeveloperDevToolsTitle)}> + {l10n.t(LocalizationKey.dashboardAppDeveloperDevToolsLabel)}
) diff --git a/src/dashboardWebView/components/Header/Navigation.tsx b/src/dashboardWebView/components/Header/Navigation.tsx index adfc377c..538dd79f 100644 --- a/src/dashboardWebView/components/Header/Navigation.tsx +++ b/src/dashboardWebView/components/Header/Navigation.tsx @@ -3,6 +3,8 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import { Tab } from '../../constants/Tab'; import useThemeColors from '../../hooks/useThemeColors'; import { SettingsAtom, TabAtom, TabInfoAtom } from '../../state'; +import * as l10n from '@vscode/l10n'; +import { LocalizationKey } from '../../../localization'; export interface INavigationProps { totalPages: number; @@ -15,9 +17,9 @@ export interface INavigationItemProps { } export const tabs = [ - { name: 'All articles', id: Tab.All }, - { name: 'Published', id: Tab.Published }, - { name: 'In draft', id: Tab.Draft } + { name: l10n.t(LocalizationKey.dashboardHeaderNavigationAllArticles), id: Tab.All }, + { name: l10n.t(LocalizationKey.dashboardHeaderNavigationPublished), id: Tab.Published }, + { name: l10n.t(LocalizationKey.dashboardHeaderNavigationDraft), id: Tab.Draft } ]; const NavigationItem: React.FunctionComponent = ({ @@ -31,15 +33,15 @@ const NavigationItem: React.FunctionComponent = ({ return ( @@ -148,19 +154,19 @@ export const TaxonomyManager: React.FunctionComponent = ( scope="col" className={`px-6 py-3 text-left text-xs font-medium uppercase ${getColors('text-gray-500 dark:text-whisper-900', 'text-[var(--frontmatter-secondary-text)]')}`} > - Name + {l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyManagerTableHeadingName)} - Count + {l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyManagerTableHeadingCount)} - Action + {l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyManagerTableHeadingAction)} @@ -187,7 +193,7 @@ export const TaxonomyManager: React.FunctionComponent = ( className={`px-6 py-4 whitespace-nowrap text-sm font-medium ${getColors(`text-gray-800 dark:text-gray-200`, `text-[var(--frontmatter-text)]`)}`} colSpan={4} > - No {taxonomy} found + {l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyManagerTableRowEmpty, taxonomy)} ))} @@ -198,7 +204,7 @@ export const TaxonomyManager: React.FunctionComponent = ( {item} diff --git a/src/dashboardWebView/components/TaxonomyView/TaxonomyView.tsx b/src/dashboardWebView/components/TaxonomyView/TaxonomyView.tsx index b23f6a7c..b37653a6 100644 --- a/src/dashboardWebView/components/TaxonomyView/TaxonomyView.tsx +++ b/src/dashboardWebView/components/TaxonomyView/TaxonomyView.tsx @@ -12,6 +12,8 @@ import { NavigationBar, NavigationItem } from '../Layout'; import { PageLayout } from '../Layout/PageLayout'; import { SponsorMsg } from '../Layout/SponsorMsg'; import { TaxonomyManager } from './TaxonomyManager'; +import * as l10n from '@vscode/l10n'; +import { LocalizationKey } from '../../../localization'; export interface ITaxonomyViewProps { pages: Page[]; @@ -46,15 +48,15 @@ export const TaxonomyView: React.FunctionComponent = ({
- Import taxonomy + {l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyViewButtonImport)} } > @@ -63,7 +65,7 @@ export const TaxonomyView: React.FunctionComponent = ({ onClick={() => setSelectedTaxonomy(`tags`)} > - Tags + {l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyViewNavigationItemTags)} = ({ onClick={() => setSelectedTaxonomy(`categories`)} > - Categories + {l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyViewNavigationItemCategories)} {taxonomySettings?.customTaxonomy && diff --git a/src/dashboardWebView/components/UnknownView/UnknownView.tsx b/src/dashboardWebView/components/UnknownView/UnknownView.tsx index 64d14616..3f2beb1f 100644 --- a/src/dashboardWebView/components/UnknownView/UnknownView.tsx +++ b/src/dashboardWebView/components/UnknownView/UnknownView.tsx @@ -1,11 +1,13 @@ import { StopIcon } from '@heroicons/react/outline'; import * as React from 'react'; import useThemeColors from '../../hooks/useThemeColors'; +import * as l10n from '@vscode/l10n'; +import { LocalizationKey } from '../../../localization'; export interface IUnknownViewProps { } export const UnknownView: React.FunctionComponent = ( - props: React.PropsWithChildren + _: React.PropsWithChildren ) => { const { getColors } = useThemeColors(); @@ -13,9 +15,11 @@ export const UnknownView: React.FunctionComponent = (
-

View does not exist

+

+ {l10n.t(LocalizationKey.dashboardUnkownViewTitle)} +

- You seem to have ended up on a view that doesn't exist. Please re-open the dashboard. + {l10n.t(LocalizationKey.dashboardUnkownViewDescription)}

diff --git a/src/dashboardWebView/components/WelcomeView/WelcomeScreen.tsx b/src/dashboardWebView/components/WelcomeView/WelcomeScreen.tsx index 6c133f45..50605d9c 100644 --- a/src/dashboardWebView/components/WelcomeView/WelcomeScreen.tsx +++ b/src/dashboardWebView/components/WelcomeView/WelcomeScreen.tsx @@ -9,6 +9,8 @@ import { Settings } from '../../models/Settings'; import { StepsToGetStarted } from '../Steps/StepsToGetStarted'; import useThemeColors from '../../hooks/useThemeColors'; import { WelcomeLink } from './WelcomeLink'; +import * as l10n from '@vscode/l10n'; +import { LocalizationKey } from '../../../localization'; export interface IWelcomeScreenProps { settings: Settings; @@ -43,9 +45,7 @@ export const WelcomeScreen: React.FunctionComponent = ({

- Manage your static site with{' '} - Front Matter + {l10n.t(LocalizationKey.dashboardWelcomeScreenTitle)}

= ({ 'text-[var(--vscode-editor-foreground)]' ) }`}> - Thank you for using Front Matter! + {l10n.t(LocalizationKey.dashboardWelcomeScreenThanks)}

= ({ 'text-[var(--vscode-editor-foreground)]' ) }`}> - We try to aim to make Front Matter as easy to use as possible, but if you have any - questions or suggestions. Please don't hesitate to reach out to us on GitHub. + {l10n.t(LocalizationKey.dashboardWelcomeScreenDescription)}

- + - GitHub / Documentation + + {l10n.t(LocalizationKey.dashboardWelcomeScreenLinkGithubLabel)} + - + - Sponsor + + {l10n.t(LocalizationKey.dashboardWelcomeScreenLinkSponsorLabel)} + - + - Review + + {l10n.t(LocalizationKey.dashboardLayoutSponsorReviewLabel)} +
@@ -98,7 +103,7 @@ export const WelcomeScreen: React.FunctionComponent = ({

- Perform the next steps to get you started with the extension + {l10n.t(LocalizationKey.dashboardWelcomeScreenActionsHeading)}

@@ -110,14 +115,13 @@ export const WelcomeScreen: React.FunctionComponent = ({ 'text-[var(--vscode-editor-foreground)]' ) }`}> - You can also use the extension from the Front Matter side panel. There you - will find the actions you can perform specifically for your pages. + {l10n.t(LocalizationKey.dashboardWelcomeScreenActionsDescription)}

- We hope you enjoy Front Matter! + {l10n.t(LocalizationKey.dashboardWelcomeScreenActionsThanks)}

diff --git a/src/localization/localization.enum.ts b/src/localization/localization.enum.ts index ac8f0427..f5de8cc6 100644 --- a/src/localization/localization.enum.ts +++ b/src/localization/localization.enum.ts @@ -251,6 +251,18 @@ export enum LocalizationKey { * Group by */ dashboardHeaderGroupingMenuButtonLabel = 'dashboard.header.grouping.menuButton.label', + /** + * All articles + */ + dashboardHeaderNavigationAllArticles = 'dashboard.header.navigation.allArticles', + /** + * Published + */ + dashboardHeaderNavigationPublished = 'dashboard.header.navigation.published', + /** + * In draft + */ + dashboardHeaderNavigationDraft = 'dashboard.header.navigation.draft', /** * Create content */ @@ -731,6 +743,126 @@ export enum LocalizationKey { * Show contents with {0} in {1} */ dashboardTaxonomyViewTaxonomyLookupButtonTitle = 'dashboard.taxonomyView.taxonomyLookup.button.title', + /** + * Create, edit, and manage the {0} of your site + */ + dashboardTaxonomyViewTaxonomyManagerDescription = 'dashboard.taxonomyView.taxonomyManager.description', + /** + * Create a new {0} value + */ + dashboardTaxonomyViewTaxonomyManagerButtonCreate = 'dashboard.taxonomyView.taxonomyManager.button.create', + /** + * Name + */ + dashboardTaxonomyViewTaxonomyManagerTableHeadingName = 'dashboard.taxonomyView.taxonomyManager.table.heading.name', + /** + * Count + */ + dashboardTaxonomyViewTaxonomyManagerTableHeadingCount = 'dashboard.taxonomyView.taxonomyManager.table.heading.count', + /** + * Action + */ + dashboardTaxonomyViewTaxonomyManagerTableHeadingAction = 'dashboard.taxonomyView.taxonomyManager.table.heading.action', + /** + * No {0} found + */ + dashboardTaxonomyViewTaxonomyManagerTableRowEmpty = 'dashboard.taxonomyView.taxonomyManager.table.row.empty', + /** + * Missing in your settings + */ + dashboardTaxonomyViewTaxonomyManagerTableUnmappedTitle = 'dashboard.taxonomyView.taxonomyManager.table.unmapped.title', + /** + * Select the taxonomy + */ + dashboardTaxonomyViewTaxonomyViewNavigationBarTitle = 'dashboard.taxonomyView.taxonomyView.navigationBar.title', + /** + * Import taxonomy + */ + dashboardTaxonomyViewTaxonomyViewButtonImport = 'dashboard.taxonomyView.taxonomyView.button.import', + /** + * Tags + */ + dashboardTaxonomyViewTaxonomyViewNavigationItemTags = 'dashboard.taxonomyView.taxonomyView.navigationItem.tags', + /** + * Categories + */ + dashboardTaxonomyViewTaxonomyViewNavigationItemCategories = 'dashboard.taxonomyView.taxonomyView.navigationItem.categories', + /** + * View does not exist + */ + dashboardUnkownViewTitle = 'dashboard.unkownView.title', + /** + * You seem to have ended up on a view that doesn't exist. Please re-open the dashboard. + */ + dashboardUnkownViewDescription = 'dashboard.unkownView.description', + /** + * Manage your static site with Front Matter + */ + dashboardWelcomeScreenTitle = 'dashboard.welcomeScreen.title', + /** + * Thank you for using Front Matter! + */ + dashboardWelcomeScreenThanks = 'dashboard.welcomeScreen.thanks', + /** + * We try to aim to make Front Matter as easy to use as possible, but if you have any questions or suggestions. Please don't hesitate to reach out to us on GitHub. + */ + dashboardWelcomeScreenDescription = 'dashboard.welcomeScreen.description', + /** + * GitHub + */ + dashboardWelcomeScreenLinkGithubTitle = 'dashboard.welcomeScreen.link.github.title', + /** + * GitHub / Documentation + */ + dashboardWelcomeScreenLinkGithubLabel = 'dashboard.welcomeScreen.link.github.label', + /** + * Become a sponsor + */ + dashboardWelcomeScreenLinkSponsorTitle = 'dashboard.welcomeScreen.link.sponsor.title', + /** + * Sponsor + */ + dashboardWelcomeScreenLinkSponsorLabel = 'dashboard.welcomeScreen.link.sponsor.label', + /** + * Write a review + */ + dashboardWelcomeScreenLinkReviewTitle = 'dashboard.welcomeScreen.link.review.title', + /** + * Review + */ + dashboardWelcomeScreenLinkReviewLabel = 'dashboard.welcomeScreen.link.review.label', + /** + * Perform the next steps to get you started with the extension + */ + dashboardWelcomeScreenActionsHeading = 'dashboard.welcomeScreen.actions.heading', + /** + * You can also use the extension from the Front Matter side panel. There you will find the actions you can perform specifically for your pages. + */ + dashboardWelcomeScreenActionsDescription = 'dashboard.welcomeScreen.actions.description', + /** + * We hope you enjoy Front Matter! + */ + dashboardWelcomeScreenActionsThanks = 'dashboard.welcomeScreen.actions.thanks', + /** + * Developer mode + */ + dashboardAppDeveloperTitle = 'dashboard.app.developer.title', + /** + * Reload the dashboard + */ + dashboardAppDeveloperReloadTitle = 'dashboard.app.developer.reload.title', + /** + * Reload + */ + dashboardAppDeveloperReloadLabel = 'dashboard.app.developer.reload.label', + /** + * Open the DevTools + */ + dashboardAppDeveloperDevToolsTitle = 'dashboard.app.developer.devTools.title', + /** + * DevTools + */ + dashboardAppDeveloperDevToolsLabel = 'dashboard.app.developer.devTools.label', /** * Actions */