From a4bf972b1dff38446c9b32f38fdb004bffc4b8b7 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 17 Jul 2023 21:46:58 -0400
Subject: [PATCH] Localization of steps + taxonomy

---
 l10n/bundle.l10n.json                         |  45 +++++
 .../components/SnippetsView/NewForm.tsx       |  32 ++--
 .../components/SnippetsView/Snippets.tsx      |  32 ++--
 .../components/Steps/StepsToGetStarted.tsx    |  45 ++---
 .../TaxonomyView/TaxonomyActions.tsx          |  30 ++--
 .../TaxonomyView/TaxonomyLookup.tsx           |   4 +-
 src/localization/localization.enum.ts         | 160 ++++++++++++++++++
 7 files changed, 282 insertions(+), 66 deletions(-)

diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json
index 9dca1e66..6ba3d8cf 100644
--- a/l10n/bundle.l10n.json
+++ b/l10n/bundle.l10n.json
@@ -8,7 +8,10 @@
   "common.menu": "Menu",
   "common.insert": "Insert",
   "common.insert.snippet": "Insert snippet",
+  "common.title": "Title",
   "common.update": "Update",
+  "common.information": "Info",
+  "common.important": "Important",
   "common.error.message": "Sorry, something went wrong.",
 
   "field.required": "Required field",
@@ -183,6 +186,48 @@
   "dashboard.snippetsView.item.alert.title": "Delete snippet: {0}",
   "dashboard.snippetsView.item.alert.description": "Are you sure you want to delete the {0} snippet?",
 
+  "dashboard.snippetsView.newForm.snippetInput.title.placeholder": "Snippet title",
+  "dashboard.snippetsView.newForm.snippetInput.description.label": "Description",
+  "dashboard.snippetsView.newForm.snippetInput.description.placeholder": "Snippet description",
+  "dashboard.snippetsView.newForm.snippetInput.snippet.label": "Snippet",
+  "dashboard.snippetsView.newForm.snippetInput.snippet.placeholder": "Snippet content",
+  "dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.label": "Is a media snippet?",
+  "dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.checkbox.label": "Media snippet",
+  "dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.checkbox.description": "Use the current snippet for inserting media files into your content.",
+  "dashboard.snippetsView.newForm.snippetInput.docsButton.title": "Read more on using media snippet placeholders",
+  "dashboard.snippetsView.newForm.snippetInput.docsButton.description": "Check our media snippet placeholders documentation to know which placeholders you can use.",
+
+  "dashboard.snippetsView.snippets.ariaLabel": "Snippets header",
+  "dashboard.snippetsView.snippets.button.create": "Create new snippet",
+  "dashboard.snippetsView.snippets.select.description": "Select the snippet to add to your content.",
+  "dashboard.snippetsView.snippets.empty.message": "No snippets found",
+  "dashboard.snippetsView.snippets.readMore": "Read more to get started with snippets",
+  "dashboard.snippetsView.snippets.formDialog.title": "Create a snippet",
+
+  "dashboard.steps.stepsToGetStarted.button.addFolder.title": "Add as a content folder to Front Matter",
+  "dashboard.steps.stepsToGetStarted.initializeProject.name": "Initialize project",
+  "dashboard.steps.stepsToGetStarted.initializeProject.description": "Initialize the project will create the required files and folders for using the Front Matter CMS. Start by clicking on this action.",
+  "dashboard.steps.stepsToGetStarted.framework.name": "Framework presets",
+  "dashboard.steps.stepsToGetStarted.framework.description": "Select your site-generator or framework to prefill some of the recommended settings.",
+  "dashboard.steps.stepsToGetStarted.framework.select": "Select your framework",
+  "dashboard.steps.stepsToGetStarted.framework.select.other": "other",
+  "dashboard.steps.stepsToGetStarted.contentFolders.name": "Register content folder(s)",
+  "dashboard.steps.stepsToGetStarted.contentFolders.description": "Add one of the folders we found in your project as a content folder. Once a folder is set, Front Matter can be used to list all contents and allow you to create content.",
+  "dashboard.steps.stepsToGetStarted.contentFolders.label": "Folders containing content:",
+  "dashboard.steps.stepsToGetStarted.contentFolders.information.description": "You can also perform this action by right-clicking on the folder in the explorer view, and selecting register folder",
+  "dashboard.steps.stepsToGetStarted.tags.name": "Import all tags and categories (optional)",
+  "dashboard.steps.stepsToGetStarted.tags.description": "Now that Front Matter knows all the content folders. Would you like to import all tags and categories from the available content?",
+  "dashboard.steps.stepsToGetStarted.showDashboard.name": "Show the dashboard",
+  "dashboard.steps.stepsToGetStarted.showDashboard.description": "Once all actions are completed, the dashboard can be loaded.",
+
+  "dashboard.taxonomyView.button.add.title": "Add {0} to taxonomy settings",
+  "dashboard.taxonomyView.button.edit.title": "Edit {0}",
+  "dashboard.taxonomyView.button.merge.title": "Merge {0}",
+  "dashboard.taxonomyView.button.move.title": "Move to another taxonomy type",
+  "dashboard.taxonomyView.button.delete.title": "Delete {0}",
+
+  "dashboard.taxonomyView.taxonomyLookup.button.title": "Show contents with {0} in {1}",
+
   "panel.actions.title": "Actions",
   "panel.actions.openDashboard": "Open dashboard",
   "panel.actions.openPreview": "Open preview",
diff --git a/src/dashboardWebView/components/SnippetsView/NewForm.tsx b/src/dashboardWebView/components/SnippetsView/NewForm.tsx
index 32a41d25..8eaff3e9 100644
--- a/src/dashboardWebView/components/SnippetsView/NewForm.tsx
+++ b/src/dashboardWebView/components/SnippetsView/NewForm.tsx
@@ -3,6 +3,8 @@ import * as React from 'react';
 import { GeneralCommands } from '../../../constants';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SnippetInput } from './SnippetInput';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface INewFormProps {
   title: string;
@@ -39,7 +41,8 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
     <div className="space-y-4">
       <div>
         <label htmlFor={`title`} className="block text-sm font-medium capitalize">
-          Title{' '}
+          {l10n.t(LocalizationKey.commonTitle)}
+          {' '}
           <span className={getColors(`text-red-400`, `text-[var(--vscode-notificationsErrorIcon-foreground)]`)} title="Required field">
             *
           </span>
@@ -48,7 +51,7 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
           <SnippetInput
             name='title'
             value={title}
-            placeholder='Snippet title'
+            placeholder={l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputTitlePlaceholder)}
             onChange={(e) => onTitleUpdate(e.currentTarget.value)}
           />
         </div>
@@ -56,13 +59,13 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
 
       <div>
         <label htmlFor={`description`} className="block text-sm font-medium capitalize">
-          Description
+          {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputDescriptionLabel)}
         </label>
         <div className="mt-1">
           <SnippetInput
             name='description'
             value={description}
-            placeholder='Snippet description'
+            placeholder={l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputDescriptionPlaceholder)}
             onChange={(e) => onDescriptionUpdate(e.currentTarget.value)}
           />
         </div>
@@ -70,7 +73,8 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
 
       <div>
         <label htmlFor={`snippet`} className="block text-sm font-medium capitalize">
-          Snippet{' '}
+          {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputSnippetLabel)}
+          {' '}
           <span className="text-red-400" title="Required field">
             *
           </span>
@@ -79,7 +83,7 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
           <SnippetInput
             name='snippet'
             value={body}
-            placeholder='Snippet content'
+            placeholder={l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputSnippetPlaceholder)}
             onChange={(e) => onBodyUpdate(e.currentTarget.value)}
             isTextArea
           />
@@ -87,8 +91,8 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
       </div>
 
       <div>
-        <label htmlFor={`snippet`} className="block text-sm font-medium">
-          Is a media snippet?
+        <label htmlFor={`isMediaSnippet`} className="block text-sm font-medium">
+          {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputIsMediaSnippetLabel)}
         </label>
         <div className="mt-1 relative flex items-start">
           <div className="flex items-center h-5">
@@ -112,21 +116,19 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
               className={`font-medium ${getColors(`text-vulcan-100 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
                 }`}
             >
-              Media snippet
+              {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputIsMediaSnippetCheckboxLabel)}
             </label>
             <p id="isMediaSnippet-description" className={getColors('text-vulcan-300 dark:text-whisper-500', `text-[var(--vscode-foreground)]`)}>
-              Use the current snippet for inserting media files into your content.
+              {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputIsMediaSnippetCheckboxDescription)}
             </p>
             <p>
-              Check our{' '}
               <button
                 className={getColors('text-teal-700 hover:text-teal-500', 'text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]')}
                 onClick={openLink}
-                title="media snippet placeholders"
+                title={l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputDocsButtonTitle)}
               >
-                media snippet placeholders
-              </button>{' '}
-              documentation to know which placeholders you can use.
+                {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputDocsButtonDescription)}
+              </button>
             </p>
           </div>
         </div>
diff --git a/src/dashboardWebView/components/SnippetsView/Snippets.tsx b/src/dashboardWebView/components/SnippetsView/Snippets.tsx
index 7876c20d..75e96b05 100644
--- a/src/dashboardWebView/components/SnippetsView/Snippets.tsx
+++ b/src/dashboardWebView/components/SnippetsView/Snippets.tsx
@@ -16,11 +16,13 @@ import { FormDialog } from '../Modals/FormDialog';
 import { SponsorMsg } from '../Layout/SponsorMsg';
 import { Item } from './Item';
 import { NewForm } from './NewForm';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface ISnippetsProps { }
 
 export const Snippets: React.FunctionComponent<ISnippetsProps> = (
-  props: React.PropsWithChildren<ISnippetsProps>
+  _: React.PropsWithChildren<ISnippetsProps>
 ) => {
   const settings = useRecoilValue(SettingsSelector);
   const viewData = useRecoilValue(ViewDataSelector);
@@ -92,10 +94,10 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
           <div
             className={`py-3 px-4 flex items-center justify-between border-b ${getColors(`border-gray-300 dark:border-vulcan-100`, `border-[var(--frontmatter-border)]`)
               }`}
-            aria-label="snippets header"
+            aria-label={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsAriaLabel)}
           >
             <FilterInput
-              placeholder="Search"
+              placeholder={l10n.t(LocalizationKey.commonSearch)}
               isReady={true}
               autoFocus={(snippetKeys && snippetKeys.length > 0)}
               value={snippetFilter}
@@ -110,11 +112,13 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
                   `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
                 )
                   }`}
-                title={`Create new snippet`}
+                title={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsButtonCreate)}
                 onClick={() => setShowCreateDialog(true)}
               >
                 <PlusSmIcon className={`mr-2 h-6 w-6`} />
-                <span className={`text-sm`}>Create new snippet</span>
+                <span className={`text-sm`}>
+                  {l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsButtonCreate)}
+                </span>
               </button>
             </div>
           </div>
@@ -124,7 +128,9 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
       <div className="flex flex-col h-full">
         {viewData?.data?.filePath && (
           <div className={`text-xl text-center mb-6`}>
-            <p>Select the snippet to add to your content.</p>
+            <p>
+              {l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsSelectDescription)}
+            </p>
           </div>
         )}
 
@@ -142,14 +148,16 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
             <div className={`flex flex-col items-center ${getColors('text-gray-500 dark:text-whisper-900', 'text-[var(--frontmatter-text)]')
               }`}>
               <CodeIcon className="w-32 h-32" />
-              <p className="text-3xl mt-2">No snippets found</p>
+              <p className="text-3xl mt-2">
+                {l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsEmptyMessage)}
+              </p>
               <p className="text-xl mt-4">
                 <a
                   className={getColors(`text-teal-700 hover:text-teal-900`, `text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`)}
                   href={`https://frontmatter.codes/docs/snippets`}
-                  title={`Read more to get started with snippets`}
+                  title={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsReadMore)}
                 >
-                  Read more to get started with snippets
+                  {l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsReadMore)}
                 </a>
               </p>
             </div>
@@ -158,13 +166,13 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
 
         {showCreateDialog && (
           <FormDialog
-            title={`Create a snippet`}
+            title={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsFormDialogTitle)}
             description={``}
             isSaveDisabled={!snippetTitle || !snippetBody}
             trigger={onSnippetAdd}
             dismiss={reset}
-            okBtnText="Save"
-            cancelBtnText="Cancel"
+            okBtnText={l10n.t(LocalizationKey.commonSave)}
+            cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
           >
             <NewForm
               title={snippetTitle}
diff --git a/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx b/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx
index 46762cd1..895067d4 100644
--- a/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx
+++ b/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx
@@ -13,6 +13,8 @@ import { CheckCircleIcon as CheckCircleIconSolid } from '@heroicons/react/solid'
 import { FrameworkDetectors } from '../../../constants/FrameworkDetectors';
 import { join } from 'path';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IStepsToGetStartedProps {
   settings: Settings;
@@ -44,7 +46,7 @@ const Folder = ({
       <button
         onClick={() => addFolder(folder)}
         className={`mr-2 flex gap-2 items-center ${getColors('hover:text-teal-500', 'hover:text-[var(--vscode-textLink-activeForeground)]')}`}
-        title={`Add as a content folder to Front Matter`}
+        title={l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedButtonAddFolderTitle)}
       >
         {isAdded ? (
           <CheckCircleIconSolid className={`h-4 w-4`} />
@@ -94,13 +96,8 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
   const steps = [
     {
       id: `welcome-init`,
-      name: 'Initialize project',
-      description: (
-        <>
-          Initialize the project will create the required files and folders for using the Front
-          Matter CMS. <b>Start by clicking on this action</b>.
-        </>
-      ),
+      name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedInitializeProjectName),
+      description: <>{l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedInitializeProjectDescription)}</>,
       status: settings.initialized ? Status.Completed : Status.NotStarted,
       onClick: settings.initialized
         ? undefined
@@ -110,11 +107,11 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
     },
     {
       id: `welcome-framework`,
-      name: 'Framework presets',
+      name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedFrameworkName),
       description: (
         <div>
           <div>
-            Select your site-generator or framework to prefill some of the recommended settings.
+            {l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedFrameworkDescription)}
           </div>
 
           <Menu as="div" className="relative inline-block text-left mt-4">
@@ -124,7 +121,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
                 'text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'
               )
                 }`}>
-                {framework ? framework : 'Select your framework'}
+                {framework ? framework : l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedFrameworkSelect)}
                 <ChevronDownIcon
                   className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5 ${getColors(
                     'text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700',
@@ -145,7 +142,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
             >
               <div className="py-1">
                 <MenuItem
-                  title={`other`}
+                  title={l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedFrameworkSelectOther)}
                   value={`other`}
                   isCurrent={!framework}
                   onClick={(value: string) => setFrameworkAndSendMessage(value)}
@@ -172,17 +169,16 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
     },
     {
       id: `welcome-content-folders`,
-      name: 'Register content folder(s)',
+      name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersName),
       description: (
         <>
           <p>
-            Add one of the folders we found in your project as a content folder. Once a folder is
-            set, Front Matter can be used to list all contents and allow you to create content.
+            {l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersDescription)}
           </p>
 
           {settings?.dashboardState?.welcome?.contentFolders?.length > 0 && (
             <div className="mt-4">
-              <div className="text-sm">Folders containing content:</div>
+              <div className="text-sm">{l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersLabel)}</div>
               <div className="mt-1 space-y-1">
                 {settings?.dashboardState?.welcome?.contentFolders?.map((folder: string) => (
                   <Folder
@@ -198,9 +194,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
           )}
 
           <p className={`mt-4 ${getColors('text-vulcan-300 dark:text-gray-400', '')}`}>
-            <b>IMPORTANT</b>: You can perform this action by{' '}
-            <b>right-clicking on the folder in the explorer view</b>, and selecting{' '}
-            <b>register folder</b>.
+            <b>{l10n.t(LocalizationKey.commonInformation)}</b>: {l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersInformationDescription)}.
           </p>
         </>
       ),
@@ -211,21 +205,16 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
     },
     {
       id: `welcome-import`,
-      name: 'Import all tags and categories (optional)',
-      description: (
-        <>
-          Now that Front Matter knows all the content folders. Would you like to import all tags and
-          categories from the available content?
-        </>
-      ),
+      name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedTagsName),
+      description: <>{l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedTagsDescription)}</>,
       status: taxImported ? Status.Completed : Status.NotStarted,
       onClick:
         settings.contentFolders && settings.contentFolders.length > 0 ? importTaxonomy : undefined
     },
     {
       id: `welcome-show-dashboard`,
-      name: 'Show the dashboard',
-      description: <>Once all actions are completed, the dashboard can be loaded.</>,
+      name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedShowDashboardName),
+      description: <>{l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedShowDashboardDescription)}</>,
       status:
         settings.initialized && settings.contentFolders && settings.contentFolders.length > 0
           ? Status.Active
diff --git a/src/dashboardWebView/components/TaxonomyView/TaxonomyActions.tsx b/src/dashboardWebView/components/TaxonomyView/TaxonomyActions.tsx
index 5abc5092..f37de8fa 100644
--- a/src/dashboardWebView/components/TaxonomyView/TaxonomyActions.tsx
+++ b/src/dashboardWebView/components/TaxonomyView/TaxonomyActions.tsx
@@ -10,6 +10,8 @@ import { useCallback } from 'react';
 import { MergeIcon } from '../../../components/icons/MergeIcon';
 import { DashboardMessage } from '../../DashboardMessage';
 import { LinkButton } from '../Common/LinkButton';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface ITaxonomyActionsProps {
   field: string | null;
@@ -61,39 +63,47 @@ export const TaxonomyActions: React.FunctionComponent<ITaxonomyActionsProps> = (
     <div className={`space-x-2`}>
       {unmapped && (
         <LinkButton
-          title={`Add ${value} to taxonomy settings`}
+          title={l10n.t(LocalizationKey.dashboardTaxonomyViewButtonAddTitle, value)}
           onClick={onAdd}>
           <PlusIcon className={`w-4 h-4`} aria-hidden={true} />
-          <span className="sr-only">Add to settings</span>
+          <span className="sr-only">
+            {l10n.t(LocalizationKey.dashboardTaxonomyViewButtonAddTitle, value)}
+          </span>
         </LinkButton>
       )}
 
       <LinkButton
-        title={`Edit ${value}`}
+        title={l10n.t(LocalizationKey.dashboardTaxonomyViewButtonEditTitle, value)}
         onClick={onEdit}>
         <PencilIcon className={`w-4 h-4`} aria-hidden={true} />
-        <span className="sr-only">Edit</span>
+        <span className="sr-only">{l10n.t(LocalizationKey.commonEdit)}</span>
       </LinkButton>
 
       <LinkButton
-        title={`Merge ${value}`}
+        title={l10n.t(LocalizationKey.dashboardTaxonomyViewButtonMergeTitle, value)}
         onClick={onMerge}>
         <MergeIcon className={`w-4 h-4`} aria-hidden={true} />
-        <span className="sr-only">Merge</span>
+        <span className="sr-only">
+          {l10n.t(LocalizationKey.dashboardTaxonomyViewButtonMergeTitle, value)}
+        </span>
       </LinkButton>
 
       <LinkButton
-        title={`Move to another taxonomy type`}
+        title={l10n.t(LocalizationKey.dashboardTaxonomyViewButtonMoveTitle)}
         onClick={onMove}>
         <ArrowCircleUpIcon className={`w-4 h-4`} aria-hidden={true} />
-        <span className="sr-only">Move to another taxonomy type</span>
+        <span className="sr-only">
+          {l10n.t(LocalizationKey.dashboardTaxonomyViewButtonMoveTitle)}
+        </span>
       </LinkButton>
 
       <LinkButton
-        title={`Delete ${value}`}
+        title={l10n.t(LocalizationKey.dashboardTaxonomyViewButtonDeleteTitle, value)}
         onClick={onDelete}>
         <TrashIcon className={`w-4 h-4`} aria-hidden={true} />
-        <span className="sr-only">Delete</span>
+        <span className="sr-only">
+          {l10n.t(LocalizationKey.dashboardTaxonomyViewButtonDeleteTitle, value)}
+        </span>
       </LinkButton>
     </div>
   );
diff --git a/src/dashboardWebView/components/TaxonomyView/TaxonomyLookup.tsx b/src/dashboardWebView/components/TaxonomyView/TaxonomyLookup.tsx
index b6e5af88..5cdf1d69 100644
--- a/src/dashboardWebView/components/TaxonomyView/TaxonomyLookup.tsx
+++ b/src/dashboardWebView/components/TaxonomyView/TaxonomyLookup.tsx
@@ -7,6 +7,8 @@ import { getTaxonomyField } from '../../../helpers/getTaxonomyField';
 import { useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface ITaxonomyLookupProps {
   taxonomy: string | null;
@@ -57,7 +59,7 @@ export const TaxonomyLookup: React.FunctionComponent<ITaxonomyLookupProps> = ({
     return (
       <button
         className={total ? `font-bold ${getColors(`text-teal-900 hover:text-teal-600 `, `text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`)}` : ``}
-        title={total ? `Show contents with ${value} in ${taxonomy}` : ``}
+        title={total ? l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyLookupButtonTitle, value, taxonomy) : ``}
         onClick={onNavigate}
       >
         {total || `-`}
diff --git a/src/localization/localization.enum.ts b/src/localization/localization.enum.ts
index cc1c2a9f..ac8f0427 100644
--- a/src/localization/localization.enum.ts
+++ b/src/localization/localization.enum.ts
@@ -35,10 +35,22 @@ export enum LocalizationKey {
    * Insert snippet
    */
   commonInsertSnippet = 'common.insert.snippet',
+  /**
+   * Title
+   */
+  commonTitle = 'common.title',
   /**
    * Update
    */
   commonUpdate = 'common.update',
+  /**
+   * Info
+   */
+  commonInformation = 'common.information',
+  /**
+   * Important
+   */
+  commonImportant = 'common.important',
   /**
    * Sorry, something went wrong.
    */
@@ -571,6 +583,154 @@ export enum LocalizationKey {
    * Are you sure you want to delete the {0} snippet?
    */
   dashboardSnippetsViewItemAlertDescription = 'dashboard.snippetsView.item.alert.description',
+  /**
+   * Snippet title
+   */
+  dashboardSnippetsViewNewFormSnippetInputTitlePlaceholder = 'dashboard.snippetsView.newForm.snippetInput.title.placeholder',
+  /**
+   * Description
+   */
+  dashboardSnippetsViewNewFormSnippetInputDescriptionLabel = 'dashboard.snippetsView.newForm.snippetInput.description.label',
+  /**
+   * Snippet description
+   */
+  dashboardSnippetsViewNewFormSnippetInputDescriptionPlaceholder = 'dashboard.snippetsView.newForm.snippetInput.description.placeholder',
+  /**
+   * Snippet
+   */
+  dashboardSnippetsViewNewFormSnippetInputSnippetLabel = 'dashboard.snippetsView.newForm.snippetInput.snippet.label',
+  /**
+   * Snippet content
+   */
+  dashboardSnippetsViewNewFormSnippetInputSnippetPlaceholder = 'dashboard.snippetsView.newForm.snippetInput.snippet.placeholder',
+  /**
+   * Is a media snippet?
+   */
+  dashboardSnippetsViewNewFormSnippetInputIsMediaSnippetLabel = 'dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.label',
+  /**
+   * Media snippet
+   */
+  dashboardSnippetsViewNewFormSnippetInputIsMediaSnippetCheckboxLabel = 'dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.checkbox.label',
+  /**
+   * Use the current snippet for inserting media files into your content.
+   */
+  dashboardSnippetsViewNewFormSnippetInputIsMediaSnippetCheckboxDescription = 'dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.checkbox.description',
+  /**
+   * Read more on using media snippet placeholders
+   */
+  dashboardSnippetsViewNewFormSnippetInputDocsButtonTitle = 'dashboard.snippetsView.newForm.snippetInput.docsButton.title',
+  /**
+   * Check our media snippet placeholders documentation to know which placeholders you can use.
+   */
+  dashboardSnippetsViewNewFormSnippetInputDocsButtonDescription = 'dashboard.snippetsView.newForm.snippetInput.docsButton.description',
+  /**
+   * Snippets header
+   */
+  dashboardSnippetsViewSnippetsAriaLabel = 'dashboard.snippetsView.snippets.ariaLabel',
+  /**
+   * Create new snippet
+   */
+  dashboardSnippetsViewSnippetsButtonCreate = 'dashboard.snippetsView.snippets.button.create',
+  /**
+   * Select the snippet to add to your content.
+   */
+  dashboardSnippetsViewSnippetsSelectDescription = 'dashboard.snippetsView.snippets.select.description',
+  /**
+   * No snippets found
+   */
+  dashboardSnippetsViewSnippetsEmptyMessage = 'dashboard.snippetsView.snippets.empty.message',
+  /**
+   * Read more to get started with snippets
+   */
+  dashboardSnippetsViewSnippetsReadMore = 'dashboard.snippetsView.snippets.readMore',
+  /**
+   * Create a snippet
+   */
+  dashboardSnippetsViewSnippetsFormDialogTitle = 'dashboard.snippetsView.snippets.formDialog.title',
+  /**
+   * Add as a content folder to Front Matter
+   */
+  dashboardStepsStepsToGetStartedButtonAddFolderTitle = 'dashboard.steps.stepsToGetStarted.button.addFolder.title',
+  /**
+   * Initialize project
+   */
+  dashboardStepsStepsToGetStartedInitializeProjectName = 'dashboard.steps.stepsToGetStarted.initializeProject.name',
+  /**
+   * Initialize the project will create the required files and folders for using the Front Matter CMS. Start by clicking on this action.
+   */
+  dashboardStepsStepsToGetStartedInitializeProjectDescription = 'dashboard.steps.stepsToGetStarted.initializeProject.description',
+  /**
+   * Framework presets
+   */
+  dashboardStepsStepsToGetStartedFrameworkName = 'dashboard.steps.stepsToGetStarted.framework.name',
+  /**
+   * Select your site-generator or framework to prefill some of the recommended settings.
+   */
+  dashboardStepsStepsToGetStartedFrameworkDescription = 'dashboard.steps.stepsToGetStarted.framework.description',
+  /**
+   * Select your framework
+   */
+  dashboardStepsStepsToGetStartedFrameworkSelect = 'dashboard.steps.stepsToGetStarted.framework.select',
+  /**
+   * other
+   */
+  dashboardStepsStepsToGetStartedFrameworkSelectOther = 'dashboard.steps.stepsToGetStarted.framework.select.other',
+  /**
+   * Register content folder(s)
+   */
+  dashboardStepsStepsToGetStartedContentFoldersName = 'dashboard.steps.stepsToGetStarted.contentFolders.name',
+  /**
+   * Add one of the folders we found in your project as a content folder. Once a folder is set, Front Matter can be used to list all contents and allow you to create content.
+   */
+  dashboardStepsStepsToGetStartedContentFoldersDescription = 'dashboard.steps.stepsToGetStarted.contentFolders.description',
+  /**
+   * Folders containing content:
+   */
+  dashboardStepsStepsToGetStartedContentFoldersLabel = 'dashboard.steps.stepsToGetStarted.contentFolders.label',
+  /**
+   * You can also perform this action by right-clicking on the folder in the explorer view, and selecting register folder
+   */
+  dashboardStepsStepsToGetStartedContentFoldersInformationDescription = 'dashboard.steps.stepsToGetStarted.contentFolders.information.description',
+  /**
+   * Import all tags and categories (optional)
+   */
+  dashboardStepsStepsToGetStartedTagsName = 'dashboard.steps.stepsToGetStarted.tags.name',
+  /**
+   * Now that Front Matter knows all the content folders. Would you like to import all tags and categories from the available content?
+   */
+  dashboardStepsStepsToGetStartedTagsDescription = 'dashboard.steps.stepsToGetStarted.tags.description',
+  /**
+   * Show the dashboard
+   */
+  dashboardStepsStepsToGetStartedShowDashboardName = 'dashboard.steps.stepsToGetStarted.showDashboard.name',
+  /**
+   * Once all actions are completed, the dashboard can be loaded.
+   */
+  dashboardStepsStepsToGetStartedShowDashboardDescription = 'dashboard.steps.stepsToGetStarted.showDashboard.description',
+  /**
+   * Add {0} to taxonomy settings
+   */
+  dashboardTaxonomyViewButtonAddTitle = 'dashboard.taxonomyView.button.add.title',
+  /**
+   * Edit {0}
+   */
+  dashboardTaxonomyViewButtonEditTitle = 'dashboard.taxonomyView.button.edit.title',
+  /**
+   * Merge {0}
+   */
+  dashboardTaxonomyViewButtonMergeTitle = 'dashboard.taxonomyView.button.merge.title',
+  /**
+   * Move to another taxonomy type
+   */
+  dashboardTaxonomyViewButtonMoveTitle = 'dashboard.taxonomyView.button.move.title',
+  /**
+   * Delete {0}
+   */
+  dashboardTaxonomyViewButtonDeleteTitle = 'dashboard.taxonomyView.button.delete.title',
+  /**
+   * Show contents with {0} in {1}
+   */
+  dashboardTaxonomyViewTaxonomyLookupButtonTitle = 'dashboard.taxonomyView.taxonomyLookup.button.title',
   /**
    * Actions
    */