Localization updates

2026-03-28 17:42:40 +01:00 · 2023-07-17 01:47:15 +02:00
parent 7864e9d2b9
commit c35dace7c7
39 changed files with 517 additions and 212 deletions
--- a/l10n/bundle.l10n.json
+++ b/l10n/bundle.l10n.json
@@ -1,7 +1,143 @@
 {
-  "dashboard.header.createContent": "Create content",
+  "common.edit": "Edit",
+  "common.delete": "Delete",
+  "common.cancel": "Cancel",
+  "common.clear": "Clear",
+  "common.search": "Search",
+  "common.save": "Save",
+  "common.error.message": "Sorry, something went wrong.",
+
+  "field.required": "Required field",
+  "field.unknown": "Unknown field",
+
+  "dashboard.chatbot.answer.answer": "Answer",
+  "dashboard.chatbot.answer.resources": "Resources",
+  "dashboard.chatbot.answer.warning": "Warning: Anwers might be wrong. In case of doubt, please consult the docs.",
+
+  "dashboard.chatbot.chatbot.loading": "Assistent is getting ready",
+  "dashboard.chatbot.chatbot.ready": "I'm ready, what do you want to know?",
+
+  "dashboard.chatbot.chatbox.placeholder": "How can I configure Front Matter?",
+
+  "dashboard.chatbot.header.heading": "Ask Front Matter AI",
+  "dashboard.chatbot.header.description": "Our AI, powered by mendable.ai, has processed the documentation and can assist you with any queries regarding Front Matter. Go ahead and ask away!",
+
+  "dashboard.common.choiceButton.open": "Open options",
+
+  "dashboard.contents.contentActions.actionMenuButton.title": "Menu",
+  "dashboard.contents.contentActions.menuItem.view": "View",
+  "dashboard.contents.contentActions.alert.title": "Delete: {0}",
+  "dashboard.contents.contentActions.alert.description": "Are you sure you want to delete the \"{0}\" content?",
+
+  "dashboard.contents.item.invalidTitle": "<invalid title>",
+  "dashboard.contents.item.invalidDescription": "<invalid description>",
+
+  "dashboard.contents.list.title": "Title",
+  "dashboard.contents.list.date": "Date",
+  "dashboard.contents.list.status": "Status",
+
+  "dashboard.contents.overview.noMarkdown": "No Markdown to show",
+  "dashboard.contents.overview.noFolders": "Make sure you registered a content folder in your project to let Front Matter find the contents.",
+
+  "dashboard.contents.status.draft": "Draft",
+  "dashboard.contents.status.published": "Published",
+
+  "dashboard.dataView.dataForm.modify": "Modify the data",
+  "dashboard.dataView.dataForm.add": "Add new data",
+
+  "dashboard.dataView.dataView.select": "Select your data type",
+  "dashboard.dataView.dataView.title": "Your {0} data items",
+  "dashboard.dataView.dataView.add": "Add a new entry",
+  "dashboard.dataView.dataView.empty": "No {0} data entries found",
+  "dashboard.dataView.dataView.createOrModify": "Create or modify your {0} data",
+  "dashboard.dataView.dataView.getStarted": "Select a data type to get started",
+  "dashboard.dataView.dataView.noDataFiles": "No data files found",
+  "dashboard.dataView.dataView.getStarted.link": "Read more to get started using data files",
+
+  "dashboard.dataView.emptyView.heading": "Select your date type first",
+
+  "dashboard.dataView.sortableItem.editButton.title": "Edit \"{0}\"",
+  "dashboard.dataView.sortableItem.deleteButton.title": "Delete \"{0}\"",
+  "dashboard.dataView.sortableItem.alert.title": "Delete data entry",
+  "dashboard.dataView.sortableItem.alert.description": "Are you sure you want to delete the data entry?",
+
+  "dashboard.errorView.description": "Please close the dashboard and try again.",
+
+  "dashboard.header.breadcrumb.home": "Home",
+
+  "dashboard.header.clearFilters.title": "Clear filters, grouping, and sorting",
+
+  "dashboard.header.filter.default": "No filter",
+
+  "dashboard.header.folders.default": "All types",
+  "dashboard.header.folders.menuButton.showing": "Showing",
+
+  "dashboard.header.grouping.option.none": "None",
+  "dashboard.header.grouping.option.year": "Year",
+  "dashboard.header.grouping.option.draft": "Draft/Published",
+  "dashboard.header.grouping.menuButton.label": "Group by",
+
+  "dashboard.header.header.createContent": "Create content",
+  "dashboard.header.header.createByContentType": "Create by content type",
+  "dashboard.header.header.createByTemplate": "Create by template",
+
+  "dashboard.header.pagination.first": "First",
+  "dashboard.header.pagination.previous": "Previous",
+  "dashboard.header.pagination.next": "next",
+  "dashboard.header.pagination.last": "Last",
+
+  "dashboard.header.paginationStatus.text": "Showing {0} to {1} of {2} results",
+
+  "dashboard.header.projectSwitcher.label": "project",
+
+  "dashboard.header.refreshDashboard.label": "Refresh dashboard",
+
+  "dashboard.header.sorting.lastModified.asc": "Last modified (asc)",
+  "dashboard.header.sorting.lastModified.desc": "Last modified (desc)",
+  "dashboard.header.sorting.filename.asc": "By filename (asc)",
+  "dashboard.header.sorting.filename.desc": "By filename (desc)",
+  "dashboard.header.sorting.published.asc": "Published (asc)",
+  "dashboard.header.sorting.published.desc": "Published (desc)",
+  "dashboard.header.sorting.size.asc": "Size (asc)",
+  "dashboard.header.sorting.size.desc": "Size (desc)",
+  "dashboard.header.sorting.caption.asc": "Caption (asc)",
+  "dashboard.header.sorting.caption.desc": "Caption (desc)",
+  "dashboard.header.sorting.alt.asc": "Alt (asc)",
+  "dashboard.header.sorting.alt.desc": "Alt (desc)",
+  "dashboard.header.sorting.label": "Sort by",
+  
  "dashboard.header.startup.label": "Open on startup?",

+  "dashboard.header.syncButton.label": "Sync",
+
+  "dashboard.header.tabs.contents": "Contents",
+  "dashboard.header.tabs.media": "Media",
+  "dashboard.header.tabs.snippets": "Snippets",
+  "dashboard.header.tabs.data": "data",
+  "dashboard.header.tabs.taxonomies": "Taxonomies",
+
+  "dashboard.layout.sponsor.support.label": "Support",
+  "dashboard.layout.sponsor.support.msg": "Support Front Matter",
+  "dashboard.layout.sponsor.review.label": "Review",
+  "dashboard.layout.sponsor.review.msg": "Review Front Matter",
+
+  "dashboard.media.dialog.title": "View details",
+  "dashboard.media.panel.close": "Close panel",
+  "dashboard.media.metadata.panel.title": "Update metadata",
+  "dashboard.media.metadata.panel.description": "Please specify the metadata you want to set for the file.",
+  "dashboard.media.metadata.panel.field.fileName": "Filename",
+  "dashboard.media.metadata.panel.field.title": "Title",
+  "dashboard.media.metadata.panel.field.caption": "Caption",
+  "dashboard.media.metadata.panel.field.alt": "Alternate text",
+  "dashboard.media.metadata.panel.form.metadata.title": "Metadata",
+  "dashboard.media.metadata.panel.form.information.title": "Information",
+  "dashboard.media.metadata.panel.form.information.createdDate": "Created",
+  "dashboard.media.metadata.panel.form.information.modifiedDate": "Last modified",
+  "dashboard.media.metadata.panel.form.information.dimensions": "Dimensions",
+  "dashboard.media.metadata.panel.form.information.folder": "Folder",
+
+  "dashboard.media.folderCreation.button.create": "Create post asset folder",
+
  "panel.actions.title": "Actions",
  "panel.actions.openDashboard": "Open dashboard",
  "panel.actions.openPreview": "Open preview",
--- a/src/components/uniforms-frontmatter/LabelField.tsx
+++ b/src/components/uniforms-frontmatter/LabelField.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
 import './LabelField.css';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../localization';

 export interface ILabelFieldProps {
  id: string;
@@ -17,7 +19,7 @@ export const LabelField: React.FunctionComponent<ILabelFieldProps> = ({
    <label className="autoform__label" htmlFor={id}>
      {label}
      {required && (
-        <span title="Required field" className="autoform__label__required">
+        <span title={l10n.t(LocalizationKey.fieldRequired)} className="autoform__label__required">
          *
        </span>
      )}
--- a/src/components/uniforms-frontmatter/UnknownField.tsx
+++ b/src/components/uniforms-frontmatter/UnknownField.tsx
@@ -2,6 +2,8 @@ import { Ref } from 'react';
 import * as React from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
 import { LabelField } from './LabelField';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../localization';

 export type UnknownFieldProps = HTMLFieldProps<
  string,
@@ -27,7 +29,7 @@ function UnknownField({
    <div {...filterDOMProps(props)}>
      <LabelField label={label} id={id} required={props.required} />

-      <div className={`text-[var(--vscode-errorForeground)]`}>Unknown field</div>
+      <div className={`text-[var(--vscode-errorForeground)]`}>{l10n.t(LocalizationKey.fieldUnknown)}</div>
    </div>
  );
 }
--- a/src/dashboardWebView/components/Chatbot/Answer.tsx
+++ b/src/dashboardWebView/components/Chatbot/Answer.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { Feedback } from './Feedback';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IAnswerProps {
  answer: string;
@@ -21,7 +23,7 @@ export const Answer: React.FunctionComponent<IAnswerProps> = ({
  return (
    <li className='answer'>
      <div className='text-lg flex justify-between'>
-        <p>Answer</p>
+        <p>{l10n.t(LocalizationKey.dashboardChatbotAnswerAnswer)}</p>

        <Feedback answerId={answerId} />
      </div>
@@ -31,7 +33,7 @@ export const Answer: React.FunctionComponent<IAnswerProps> = ({
      {
        sources && sources.length > 0 && (
          <div>
-            <p className='text-lg'>Resources</p>
+            <p className='text-lg'>{l10n.t(LocalizationKey.dashboardChatbotAnswerResources)}</p>
            <ul className={`space-y-2 list-disc pl-4`}>
              {sources.map((source, idx) => (
                <li key={`source-${idx}`} className={`text-sm`}>
@@ -46,7 +48,7 @@ export const Answer: React.FunctionComponent<IAnswerProps> = ({
      <div className={`-mx-4 -mb-4 py-2 px-4 bg-[var(--vscode-sideBar-background)] text-[var(--vscode-sideBarTitle-foreground)] text-xs rounded-b`} style={{
        fontFamily: "var(--vscode-editor-font-family)",
      }}>
-        Warning: Anwers might be wrong. In case of doubt, please consult the docs.
+        {l10n.t(LocalizationKey.dashboardChatbotAnswerWarning)}
      </div>
    </li>
  );
--- a/src/dashboardWebView/components/Chatbot/Chatbot.tsx
+++ b/src/dashboardWebView/components/Chatbot/Chatbot.tsx
@@ -7,6 +7,8 @@ import { QuestionAnswer } from './QuestionAnswer';
 import { Placeholder } from './Placeholder';
 import { useSettingsContext } from '../../providers/SettingsProvider';
 import { AiInitResponse } from './models/AiInitResponse';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IChatbotProps { }

@@ -141,7 +143,7 @@ export const Chatbot: React.FunctionComponent<IChatbotProps> = ({ }: React.Props
              sources={sources[idx]} />
          )) : (
            <Placeholder>
-              {loading ? <div className='dots'>Assistent is getting ready</div> : `I'm ready, what do you want to know?`}
+              {loading ? <div className='dots'>{l10n.t(LocalizationKey.dashboardChatbotChatbotLoading)}</div> : l10n.t(LocalizationKey.dashboardChatbotChatbotReady)}
            </Placeholder>
          )
        }
--- a/src/dashboardWebView/components/Chatbot/Chatbox.tsx
+++ b/src/dashboardWebView/components/Chatbot/Chatbox.tsx
@@ -2,6 +2,8 @@ import { PaperAirplaneIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useCallback } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IChatboxProps {
  isLoading: boolean;
@@ -32,7 +34,7 @@ export const Chatbox: React.FunctionComponent<IChatboxProps> = ({ isLoading, onT
              'focus:outline-none border-gray-300 text-vulcan-500',
              'border-transparent bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-none focus:border-transparent'
            )}`}
-            placeholder='How can I configure Front Matter?'
+            placeholder={l10n.t(LocalizationKey.dashboardChatbotChatboxPlaceholder)}
            autoFocus={true}
            value={message}
            cols={30}
--- a/src/dashboardWebView/components/Chatbot/Header.tsx
+++ b/src/dashboardWebView/components/Chatbot/Header.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { ChatIcon } from '../../../components/icons/ChatIcon';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IHeaderProps { }

@@ -8,7 +10,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = (props: React.Props
    <header className={`w-full max-w-xl m-4 px-4`}>
      <h1 className='text-2xl flex items-center space-x-4'>
        <ChatIcon className='h-6 w-6' />
-        <span>Ask Front Matter AI</span>
+        <span>{l10n.t(LocalizationKey.dashboardChatbotHeaderHeading)}</span>
      </h1>
      <h2
        className='mt-2 text-sm text-[var(--frontmatter-secondary-text)]'
@@ -16,7 +18,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = (props: React.Props
          fontFamily: "var(--vscode-editor-font-family)",
        }}
      >
-        Our AI, powered by <a className={`text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]`} href={`https://www.mendable.ai/`} title={`mendable.ai`}>mendable.ai</a>, has processed the documentation and can assist you with any queries regarding Front Matter. Go ahead and ask away!
+        {l10n.t(LocalizationKey.dashboardChatbotHeaderDescription)}
      </h2>
    </header>
  );
--- a/src/dashboardWebView/components/Common/ChoiceButton.tsx
+++ b/src/dashboardWebView/components/Common/ChoiceButton.tsx
@@ -3,6 +3,8 @@ import { ChevronDownIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
 import { MenuItem, MenuItems } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IChoiceButtonProps {
  title: string;
@@ -50,7 +52,7 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
              }`}
            disabled={disabled}
          >
-            <span className="sr-only">Open options</span>
+            <span className="sr-only">{l10n.t(LocalizationKey.dashboardCommonChoiceButtonOpen)}</span>
            <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
          </Menu.Button>

--- a/src/dashboardWebView/components/Contents/ContentActions.tsx
+++ b/src/dashboardWebView/components/Contents/ContentActions.tsx
@@ -9,6 +9,8 @@ import { Alert } from '../Modals/Alert';
 import { usePopper } from 'react-popper';
 import { useState } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IContentActionsProps {
  title: string;
@@ -110,7 +112,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
            )}

            <div ref={setReferenceElement} className={`flex`}>
-              <ActionMenuButton title={`Menu`} />
+              <ActionMenuButton title={l10n.t(LocalizationKey.dashboardContentsContentActionsActionMenuButtonTitle)} />
            </div>

            <div
@@ -128,10 +130,10 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
                  title={
                    <div className="flex items-center">
                      <EyeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                      <span>View</span>
+                      <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)}</span>
                    </div>
                  }
-                  onClick={(value, e) => onView(e)}
+                  onClick={(_, e) => onView(e)}
                />

                {customScriptActions}
@@ -140,10 +142,10 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
                  title={
                    <div className="flex items-center">
                      <TrashIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                      <span>Delete</span>
+                      <span>{l10n.t(LocalizationKey.commonDelete)}</span>
                    </div>
                  }
-                  onClick={(value, e) => onDelete(e)}
+                  onClick={(_, e) => onDelete(e)}
                />
              </MenuItems>
            </div>
@@ -153,10 +155,10 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({

      {showDeletionAlert && (
        <Alert
-          title={`Delete: ${title}`}
-          description={`Are you sure you want to delete the "${title}" content?`}
-          okBtnText={`Delete`}
-          cancelBtnText={`Cancel`}
+          title={l10n.t(LocalizationKey.dashboardContentsContentActionsAlertTitle, title)}
+          description={l10n.t(LocalizationKey.dashboardContentsContentActionsAlertDescription, title)}
+          okBtnText={l10n.t(LocalizationKey.commonDelete)}
+          cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
          dismiss={() => setShowDeletionAlert(false)}
          trigger={onDeleteConfirm}
        />
--- a/src/dashboardWebView/components/Contents/Item.tsx
+++ b/src/dashboardWebView/components/Contents/Item.tsx
@@ -7,11 +7,13 @@ import { DateField } from '../Common/DateField';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardViewType } from '../../models';
 import { ContentActions } from './ContentActions';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
 import { Status } from './Status';
 import * as React from 'react';
 import useExtensibility from '../../hooks/useExtensibility';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IItemProps extends Page { }

@@ -53,7 +55,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
    }

    if (value && typeof value !== 'string') {
-      return '<invalid title>';
+      return l10n.t(LocalizationKey.dashboardContentsItemInvalidTitle);
    }

    return value;
@@ -73,7 +75,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
    }

    if (value && typeof value !== 'string') {
-      return '<invalid description>';
+      return l10n.t(LocalizationKey.dashboardContentsItemInvalidDescription);
    }

    return value;
--- a/src/dashboardWebView/components/Contents/List.tsx
+++ b/src/dashboardWebView/components/Contents/List.tsx
@@ -3,6 +3,8 @@ import { useRecoilValue } from 'recoil';
 import useThemeColors from '../../hooks/useThemeColors';
 import { DashboardViewType } from '../../models';
 import { ViewSelector } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IListProps { }

@@ -25,9 +27,9 @@ export const List: React.FunctionComponent<IListProps> = ({
        <li className={`px-5 relative uppercase py-2 border-b ${getColors('text-vulcan-100 dark:text-whisper-900 border-vulcan-50', 'text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]')
          }`}>
          <div className={`grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8`}>
-            <div className="col-span-8">Title</div>
-            <div className="col-span-2">Date</div>
-            <div className="col-span-2">Status</div>
+            <div className="col-span-8">{l10n.t(LocalizationKey.dashboardContentsListTitle)}</div>
+            <div className="col-span-2">{l10n.t(LocalizationKey.dashboardContentsListDate)}</div>
+            <div className="col-span-2">{l10n.t(LocalizationKey.dashboardContentsListStatus)}</div>
          </div>
        </li>
      )}
--- a/src/dashboardWebView/components/Contents/Overview.tsx
+++ b/src/dashboardWebView/components/Contents/Overview.tsx
@@ -13,6 +13,8 @@ import { Item } from './Item';
 import { List } from './List';
 import usePagination from '../../hooks/usePagination';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IOverviewProps {
  pages: Page[];
@@ -52,19 +54,13 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
      <div className={`flex items-center justify-center h-full`}>
        <div className={`max-w-xl text-center`}>
          <FrontMatterIcon
-            className={`h-32 mx-auto opacity-90 mb-8 ${
-              getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
-            }`}
+            className={`h-32 mx-auto opacity-90 mb-8 ${getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
+              }`}
          />
          {settings && settings?.contentFolders?.length > 0 ? (
-            <p className={`text-xl font-medium`}>No Markdown to show</p>
+            <p className={`text-xl font-medium`}>{l10n.t(LocalizationKey.dashboardContentsOverviewNoMarkdown)}</p>
          ) : (
-            <>
-              <p className={`text-lg font-medium`}>
-                Make sure you registered a content folder in your project to let Front Matter find
-                the contents.
-              </p>
-            </>
+            <p className={`text-lg font-medium`}>{l10n.t(LocalizationKey.dashboardContentsOverviewNoFolders)}</p>
          )}
        </div>
      </div>
--- a/src/dashboardWebView/components/Contents/Status.tsx
+++ b/src/dashboardWebView/components/Contents/Status.tsx
@@ -3,6 +3,8 @@ import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SettingsAtom } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IStatusProps {
  draft: boolean | string;
@@ -50,7 +52,7 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
          getColors(`bg-teal-500`, 'bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)]')
        }`}
    >
-      {draftValue ? 'Draft' : 'Published'}
+      {draftValue ? l10n.t(LocalizationKey.dashboardContentsStatusDraft) : l10n.t(LocalizationKey.dashboardContentsStatusPublished)}
    </span>
  );
 };
--- a/src/dashboardWebView/components/DataView/DataForm.tsx
+++ b/src/dashboardWebView/components/DataView/DataForm.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
-import Ajv, { FormatDefinition } from 'ajv';
+import Ajv from 'ajv';
 import { useEffect, useState } from 'react';
 import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
 import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter';
 import { ErrorBoundary } from '@sentry/react';
 import { DataFormControls } from './DataFormControls';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IDataFormProps {
  schema: any;
@@ -79,9 +81,13 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({
    <ErrorBoundary>
      <div className="autoform">
        {model ? (
-          <h2 className={getColors(`text - gray - 500 dark: text - whisper - 900`, `text - [var(--frontmatter - secondary - text)]`)}>Modify the data</h2>
+          <h2 className={getColors(`text - gray - 500 dark: text - whisper - 900`, `text - [var(--frontmatter - secondary - text)]`)}>
+            {l10n.t(LocalizationKey.dashboardDataViewDataFormModify)}
+          </h2>
        ) : (
-          <h2 className={getColors(`text - gray - 500 dark: text - whisper - 900`, `text - [var(--frontmatter - secondary - text)]`)}>Add new data</h2>
+          <h2 className={getColors(`text - gray - 500 dark: text - whisper - 900`, `text - [var(--frontmatter - secondary - text)]`)}>
+            {l10n.t(LocalizationKey.dashboardDataViewDataFormAdd)}
+          </h2>
        )}

        <AutoForm
--- a/src/dashboardWebView/components/DataView/DataFormControls.tsx
+++ b/src/dashboardWebView/components/DataView/DataFormControls.tsx
@@ -3,6 +3,8 @@ import { useForm } from 'uniforms';
 import { SubmitField } from 'uniforms-unstyled';
 import useThemeColors from '../../hooks/useThemeColors';
 import { Button } from '../Common/Button';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IDataFormControlsProps {
  model: any | null;
@@ -30,7 +32,7 @@ export const DataFormControls: React.FunctionComponent<IDataFormControlsProps> =
          formRef.reset();
        }}
      >
-        Cancel
+        {l10n.t(LocalizationKey.commonCancel)}
      </Button>
    </div>
  );
--- a/src/dashboardWebView/components/DataView/DataView.tsx
+++ b/src/dashboardWebView/components/DataView/DataView.tsx
@@ -22,6 +22,8 @@ import { DataType } from '../../../models/DataType';
 import { TelemetryEvent } from '../../../constants';
 import { NavigationItem } from '../Layout';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IDataViewProps { }

@@ -186,7 +188,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                `text-[var(--frontmatter-text)]`
              )
                }`}>
-                Select your data type
+                {l10n.t(LocalizationKey.dashboardDataViewDataViewSelect)}
              </h2>

              <nav className={`flex-1 py-4 -mx-4`}>
@@ -230,7 +232,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                      `text-[var(--frontmatter-text)]`
                    )
                      }`}>
-                      Your {selectedData?.title?.toLowerCase() || ''} data items
+                      {l10n.t(LocalizationKey.dashboardDataViewDataViewTitle, selectedData?.title?.toLowerCase() || '')}
                    </h2>

                    <div className="py-4">
@@ -250,13 +252,13 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                            ))}
                          </Container>
                          <Button className="mt-4" onClick={() => setSelectedIndex(null)}>
-                            Add a new entry
+                            {l10n.t(LocalizationKey.dashboardDataViewDataViewAdd)}
                          </Button>
                        </>
                      ) : (
                        <div className={`flex flex-col items-center justify-center`}>
                          <p className={getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}>
-                            No {selectedData.title.toLowerCase()} data entries found
+                            {l10n.t(LocalizationKey.dashboardDataViewDataViewEmpty, selectedData.title.toLowerCase())}
                          </p>
                        </div>
                      )}
@@ -268,7 +270,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                    } py-6 px-4 overflow-auto`}
                >
                  <h2 className={`text-lg ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}`}>
-                    Create or modify your {selectedData.title.toLowerCase()} data
+                    {l10n.t(LocalizationKey.dashboardDataViewDataViewCreateOrModify, selectedData.title.toLowerCase())}
                  </h2>
                  {selectedData ? (
                    <DataForm
@@ -278,7 +280,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                      onClear={() => setSelectedIndex(null)}
                    />
                  ) : (
-                    <p>Select a data type to get started</p>
+                    <p>{l10n.t(LocalizationKey.dashboardDataViewDataViewGetStarted)}</p>
                  )}
                </div>
              </>
@@ -295,14 +297,14 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
          )
            }`}>
            <DatabaseIcon className="w-32 h-32" />
-            <p className="text-3xl mt-2">No data files found</p>
+            <p className="text-3xl mt-2">{l10n.t(LocalizationKey.dashboardDataViewDataViewNoDataFiles)}</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/dashboard#data-files-view`}
-                title={`Read more to get started using data files`}
+                title={l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
              >
-                Read more to get started using data files
+                {l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
              </a>
            </p>
          </div>
@@ -318,7 +320,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (

      <ToastContainer />

-      <img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=dataview" alt="DataView metrics" />
+      <img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=DataView" alt="DataView metrics" />
    </div >
  );
 };
--- a/src/dashboardWebView/components/DataView/EmptyView.tsx
+++ b/src/dashboardWebView/components/DataView/EmptyView.tsx
@@ -1,6 +1,8 @@
 import { ExclamationCircleIcon } 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 IEmptyViewProps { }

@@ -12,7 +14,9 @@ export const EmptyView: React.FunctionComponent<IEmptyViewProps> = (
  return (
    <div className="flex flex-col items-center justify-center w-full">
      <ExclamationCircleIcon className={`w-1/12 opacity-90 ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}`} />
-      <h2 className={`text-xl ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}`}>Select your date type first</h2>
+      <h2 className={`text-xl ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}`}>
+        {l10n.t(LocalizationKey.dashboardDataViewEmptyViewHeading)}
+      </h2>
    </div>
  );
 };
--- a/src/dashboardWebView/components/DataView/SortableItem.tsx
+++ b/src/dashboardWebView/components/DataView/SortableItem.tsx
@@ -1,9 +1,11 @@
-import { PencilIcon, SelectorIcon, TrashIcon, XIcon } from '@heroicons/react/outline';
+import { PencilIcon, SelectorIcon, TrashIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { SortableHandle, SortableElement } from 'react-sortable-hoc';
 import useThemeColors from '../../hooks/useThemeColors';
 import { LinkButton } from '../Common/LinkButton';
 import { Alert } from '../Modals/Alert';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface ISortableItemProps {
  value: string;
@@ -52,27 +54,27 @@ export const SortableItem = SortableElement(

          <div className={`space-x-2 flex items-center`}>
            <LinkButton
-              title={`Edit "${value}"`}
+              title={l10n.t(LocalizationKey.dashboardDataViewSortableItemEditButtonTitle)}
              onClick={() => onSelectedIndexChange(crntIndex)}>
              <PencilIcon className="w-4 h-4" />
-              <span className="sr-only">Edit</span>
+              <span className="sr-only">{l10n.t(LocalizationKey.commonEdit)}</span>
            </LinkButton>

            <LinkButton
-              title={`Delete "${value}"`}
+              title={l10n.t(LocalizationKey.dashboardDataViewSortableItemDeleteButtonTitle)}
              onClick={() => deleteItemConfirm()}>
              <TrashIcon className="w-4 h-4" />
-              <span className="sr-only">Delete</span>
+              <span className="sr-only">{l10n.t(LocalizationKey.commonDelete)}</span>
            </LinkButton>
          </div>
        </li>

        {showAlert && (
          <Alert
-            title={`Delete data entry`}
-            description={`Are you sure you want to delete the data entry?`}
-            okBtnText={`Delete`}
-            cancelBtnText={`Cancel`}
+            title={l10n.t(LocalizationKey.dashboardDataViewSortableItemAlertTitle)}
+            description={l10n.t(LocalizationKey.dashboardDataViewSortableItemAlertDescription)}
+            okBtnText={l10n.t(LocalizationKey.commonDelete)}
+            cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
            dismiss={() => setShowAlert(false)}
            trigger={() => {
              setShowAlert(false);
--- a/src/dashboardWebView/components/ErrorView/index.tsx
+++ b/src/dashboardWebView/components/ErrorView/index.tsx
@@ -1,19 +1,21 @@
 import { ExclamationIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

-export interface IErrorViewProps {}
+export interface IErrorViewProps { }

 export const ErrorView: React.FunctionComponent<IErrorViewProps> = (
-  props: React.PropsWithChildren<IErrorViewProps>
+  _: React.PropsWithChildren<IErrorViewProps>
 ) => {
  const { getColors } = useThemeColors();
-  
+
  return (
    <main className={`h-full w-full flex flex-col justify-center items-center space-y-2`}>
      <ExclamationIcon className={`w-24 h-24 ${getColors(`text-red-500`, `text-[var(--vscode-editorError-foreground)]`)}`} />
-      <p className="text-xl">Sorry, something went wrong.</p>
-      <p className="text-base">Please close the dashboard and try again.</p>
+      <p className="text-xl">{l10n.t(LocalizationKey.commonErrorMessage)}</p>
+      <p className="text-base">{l10n.t(LocalizationKey.dashboardErrorViewDescription)}</p>
    </main>
  );
 };
--- a/src/dashboardWebView/components/Header/Breadcrumb.tsx
+++ b/src/dashboardWebView/components/Header/Breadcrumb.tsx
@@ -6,11 +6,13 @@ import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
 import { parseWinPath } from '../../../helpers/parseWinPath';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SearchAtom, SelectedMediaFolderAtom, SettingsAtom } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

-export interface IBreadcrumbProps {}
+export interface IBreadcrumbProps { }

 export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
-  props: React.PropsWithChildren<IBreadcrumbProps>
+  _: React.PropsWithChildren<IBreadcrumbProps>
 ) => {
  const [selectedFolder, setSelectedFolder] = useRecoilState(SelectedMediaFolderAtom);
  const [, setSearchValue] = useRecoilState(SearchAtom);
@@ -90,7 +92,7 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
            )}
          >
            <CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
-            <span className="sr-only">Home</span>
+            <span className="sr-only">{l10n.t(LocalizationKey.dashboardHeaderBreadcrumbHome)}</span>
          </button>
        </div>
      </li>
@@ -99,12 +101,11 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
        <li key={folder} className="flex">
          <div className="flex items-center">
            <svg
-              className={`flex-shrink-0 h-5 w-5 ${
-                getColors(
-                  `text-gray-300 dark:text-whisper-900`,
-                  `text-[var(--vscode-tab-inactiveForeground)]`
-                )
-              }`}
+              className={`flex-shrink-0 h-5 w-5 ${getColors(
+                `text-gray-300 dark:text-whisper-900`,
+                `text-[var(--vscode-tab-inactiveForeground)]`
+              )
+                }`}
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 20 20"
@@ -115,12 +116,11 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (

            <button
              onClick={() => updateFolder(folder)}
-              className={`ml-4 text-sm font-medium ${
-                getColors(
-                  `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
-                  `text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
-                )
-              }`}
+              className={`ml-4 text-sm font-medium ${getColors(
+                `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
+                `text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
+              )
+                }`}
            >
              {basename(folder)}
            </button>
--- a/src/dashboardWebView/components/Header/ClearFilters.tsx
+++ b/src/dashboardWebView/components/Header/ClearFilters.tsx
@@ -17,16 +17,18 @@ import {
 import { DefaultValue } from 'recoil';
 import { useEffect } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import { l10n } from 'vscode';
+import { LocalizationKey } from '../../../localization';

 export const guardRecoilDefaultValue = (candidate: any): candidate is DefaultValue => {
  if (candidate instanceof DefaultValue) return true;
  return false;
 };

-export interface IClearFiltersProps {}
+export interface IClearFiltersProps { }

 export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
-  props: React.PropsWithChildren<IClearFiltersProps>
+  _: React.PropsWithChildren<IClearFiltersProps>
 ) => {
  const [show, setShow] = React.useState(false);
  const { getColors } = useThemeColors();
@@ -64,18 +66,16 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (

  return (
    <button
-      className={`flex items-center ${
-        getColors(
-          'hover:text-teal-600',
-          'hover:text-[var(--vscode-textLink-activeForeground)]'
-        )
-      }`}
+      className={`flex items-center ${getColors(
+        'hover:text-teal-600',
+        'hover:text-[var(--vscode-textLink-activeForeground)]'
+      )
+        }`}
      onClick={reset}
-      title={`Clear filters, grouping, and sorting`}
+      title={l10n.t(LocalizationKey.dashboardHeaderClearFiltersTitle)}
    >
      <XCircleIcon className={`inline-block w-5 h-5 mr-1`} />
-      <span>Clear</span>
-      <span className={`sr-only`}> filters and grouping</span>
+      <span>{l10n.t(LocalizationKey.commonClear)}</span>
    </button>
  );
 };
--- a/src/dashboardWebView/components/Header/Filter.tsx
+++ b/src/dashboardWebView/components/Header/Filter.tsx
@@ -2,6 +2,8 @@ import { Menu } from '@headlessui/react';
 import { FilterIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IFilterProps {
  label: string;
@@ -10,7 +12,7 @@ export interface IFilterProps {
  onClick: (item: string | null) => void;
 }

-const DEFAULT_VALUE = 'No filter';
+const DEFAULT_VALUE = l10n.t(LocalizationKey.dashboardHeaderFilterDefault);

 export const Filter: React.FunctionComponent<IFilterProps> = ({
  label,
--- a/src/dashboardWebView/components/Header/FilterInput.tsx
+++ b/src/dashboardWebView/components/Header/FilterInput.tsx
@@ -1,6 +1,8 @@
 import { SearchIcon, XCircleIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IFilterInputProps {
  placeholder: string;
@@ -20,12 +22,12 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
  onChange
 }: React.PropsWithChildren<IFilterInputProps>) => {
  const { getColors } = useThemeColors();
-  
+
  return (
    <div className="flex space-x-4 flex-1">
      <div className="min-w-0">
        <label htmlFor="search" className="sr-only">
-          Search
+          {l10n.t(LocalizationKey.commonSearch)}
        </label>
        <div className="relative flex justify-center">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -35,13 +37,12 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
          <input
            type="text"
            name="search"
-            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${
-              getColors(
-                'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
-                'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
-              )
-            }`}
-            placeholder={placeholder || 'Search'}
+            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${getColors(
+              'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
+              'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+            )
+              }`}
+            placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
            value={value}
            autoFocus={autoFocus}
            onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.value)}
--- a/src/dashboardWebView/components/Header/Folders.tsx
+++ b/src/dashboardWebView/components/Header/Folders.tsx
@@ -3,14 +3,16 @@ import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { FolderAtom, SettingsSelector } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

-export interface IFoldersProps {}
+export interface IFoldersProps { }

-const DEFAULT_TYPE = 'All types';
+const DEFAULT_TYPE = l10n.t(LocalizationKey.dashboardHeaderFoldersDefault);

 export const Folders: React.FunctionComponent<
  IFoldersProps
-> = ({}: React.PropsWithChildren<IFoldersProps>) => {
+> = ({ }: React.PropsWithChildren<IFoldersProps>) => {
  const [crntFolder, setCrntFolder] = useRecoilState(FolderAtom);
  const settings = useRecoilValue(SettingsSelector);
  const contentFolders = settings?.contentFolders || [];
@@ -22,7 +24,7 @@ export const Folders: React.FunctionComponent<
  return (
    <div className="flex items-center">
      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={`Showing`} title={crntFolder || DEFAULT_TYPE} />
+        <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderFoldersMenuButtonShowing)} title={crntFolder || DEFAULT_TYPE} />

        <MenuItems disablePopper>
          <MenuItem
--- a/src/dashboardWebView/components/Header/Grouping.tsx
+++ b/src/dashboardWebView/components/Header/Grouping.tsx
@@ -4,18 +4,20 @@ import { useRecoilState } from 'recoil';
 import { GroupOption } from '../../constants/GroupOption';
 import { GroupingAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

-export interface IGroupingProps {}
+export interface IGroupingProps { }

 export const GROUP_OPTIONS = [
-  { name: 'None', id: GroupOption.none },
-  { name: 'Year', id: GroupOption.Year },
-  { name: 'Draft/Published', id: GroupOption.Draft }
+  { name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionNone), id: GroupOption.none },
+  { name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionYear), id: GroupOption.Year },
+  { name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionDraft), id: GroupOption.Draft }
 ];

 export const Grouping: React.FunctionComponent<
  IGroupingProps
-> = ({}: React.PropsWithChildren<IGroupingProps>) => {
+> = ({ }: React.PropsWithChildren<IGroupingProps>) => {
  const [group, setGroup] = useRecoilState(GroupingAtom);

  const crntGroup = GROUP_OPTIONS.find((x) => x.id === group);
@@ -23,7 +25,7 @@ export const Grouping: React.FunctionComponent<
  return (
    <div className="flex items-center">
      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={`Group by`} title={crntGroup?.name || ''} />
+        <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderGroupingMenuButtonLabel)} title={crntGroup?.name || ''} />

        <MenuItems disablePopper>
          {GROUP_OPTIONS.map((option) => (
--- a/src/dashboardWebView/components/Header/Header.tsx
+++ b/src/dashboardWebView/components/Header/Header.tsx
@@ -99,7 +99,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
          title: (
            <div className="flex items-center">
              <PlusIcon className="w-4 h-4 mr-2" />
-              <span>Create by content type</span>
+              <span>{l10n.t(LocalizationKey.dashboardHeaderHeaderCreateByContentType)}</span>
            </div>
          ),
          onClick: createByContentType,
@@ -109,7 +109,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
          title: (
            <div className="flex items-center">
              <PlusIcon className="w-4 h-4 mr-2" />
-              <span>Create by template</span>
+              <span>{l10n.t(LocalizationKey.dashboardHeaderHeaderCreateByTemplate)}</span>
            </div>
          ),
          onClick: createByTemplate,
@@ -170,7 +170,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
              <SyncButton />

              <ChoiceButton
-                title={l10n.t(LocalizationKey.dashboardHeaderCreateContent)}
+                title={l10n.t(LocalizationKey.dashboardHeaderHeaderCreateContent)}
                choices={choiceOptions}
                onClick={createContent}
                disabled={!settings?.initialized}
--- a/src/dashboardWebView/components/Header/Pagination.tsx
+++ b/src/dashboardWebView/components/Header/Pagination.tsx
@@ -5,6 +5,8 @@ import usePagination from '../../hooks/usePagination';
 import useThemeColors from '../../hooks/useThemeColors';
 import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
 import { PaginationButton } from './PaginationButton';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IPaginationProps {
  totalPages?: number;
@@ -48,7 +50,7 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
  return (
    <div className="flex justify-between items-center sm:justify-end space-x-2 text-sm">
      <PaginationButton
-        title="First"
+        title={l10n.t(LocalizationKey.dashboardHeaderPaginationFirst)}
        disabled={page === 0}
        onClick={() => {
          if (page > 0) {
@@ -58,7 +60,7 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
      />

      <PaginationButton
-        title="Previous"
+        title={l10n.t(LocalizationKey.dashboardHeaderPaginationPrevious)}
        disabled={page === 0}
        onClick={() => {
          if (page > 0) {
@@ -74,27 +76,26 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
          onClick={() => {
            setPage(button);
          }}
-          className={`max-h-8 rounded ${
-            page === button
-              ? `px-2 ${getColors('bg-gray-200  text-vulcan-500', 'bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]')}`
-              : getColors(
-                `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
-                `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`
-              )
-          }`}
+          className={`max-h-8 rounded ${page === button
+            ? `px-2 ${getColors('bg-gray-200  text-vulcan-500', 'bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]')}`
+            : getColors(
+              `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
+              `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`
+            )
+            }`}
        >
          {button + 1}
        </button>
      ))}

      <PaginationButton
-        title="Next"
+        title={l10n.t(LocalizationKey.dashboardHeaderPaginationNext)}
        disabled={page >= totalPagesNr}
        onClick={() => setPage(page + 1)}
      />

      <PaginationButton
-        title="Last"
+        title={l10n.t(LocalizationKey.dashboardHeaderPaginationLast)}
        disabled={page >= totalPagesNr}
        onClick={() => setPage(totalPagesNr)}
      />
--- a/src/dashboardWebView/components/Header/PaginationStatus.tsx
+++ b/src/dashboardWebView/components/Header/PaginationStatus.tsx
@@ -4,6 +4,8 @@ import { useRecoilValue } from 'recoil';
 import usePagination from '../../hooks/usePagination';
 import useThemeColors from '../../hooks/useThemeColors';
 import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IPaginationStatusProps {
  totalPages?: number;
@@ -32,15 +34,18 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =

  return (
    <div className="hidden sm:flex">
-      <p className={`text-sm ${
-        getColors(
-          'text-gray-500 dark:text-whisper-900',
-          'text-[var(--vscode-tab-inactiveForeground)]'
-        )
-      }`}>
-        Showing <span className="font-medium">{page * pageSetNr + 1}</span> to{' '}
-        <span className="font-medium">{totelItemsOnPage}</span> of{' '}
-        <span className="font-medium">{totalItems}</span> results
+      <p className={`text-sm ${getColors(
+        'text-gray-500 dark:text-whisper-900',
+        'text-[var(--vscode-tab-inactiveForeground)]'
+      )
+        }`}>
+        {
+          l10n.t(LocalizationKey.dashboardHeaderPaginationStatusText,
+            (page * pageSetNr + 1),
+            totelItemsOnPage,
+            totalItems
+          )
+        }
      </p>
    </div>
  );
--- a/src/dashboardWebView/components/Header/ProjectSwitcher.tsx
+++ b/src/dashboardWebView/components/Header/ProjectSwitcher.tsx
@@ -6,6 +6,8 @@ import { useRecoilValue } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
 import { SettingsSelector } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IProjectSwitcherProps { }

@@ -36,7 +38,7 @@ export const ProjectSwitcher: React.FunctionComponent<IProjectSwitcherProps> = (
          label={(
            <div className="inline-flex items-center">
              <SwitchHorizontalIcon className="h-4 w-4 mr-2" />
-              <span>project</span>
+              <span>{l10n.t(LocalizationKey.dashboardHeaderProjectSwitcherLabel)}</span>
            </div>
          )}
          title={crntProject} />
--- a/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
+++ b/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
@@ -17,8 +17,10 @@ import {
  SortingAtom,
  TagAtom
 } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

-export interface IRefreshDashboardDataProps {}
+export interface IRefreshDashboardDataProps { }

 export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardDataProps> = (
  props: React.PropsWithChildren<IRefreshDashboardDataProps>
@@ -62,17 +64,16 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData

  return (
    <button
-      className={`mr-2 ${
-        getColors(
-          'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500',
-          'text-[var(--vscode-foreground)] hover:text-[var(--vscode-textLink-foreground)]'
-        )
-      }`}
-      title="Refresh dashboard"
+      className={`mr-2 ${getColors(
+        'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500',
+        'text-[var(--vscode-foreground)] hover:text-[var(--vscode-textLink-foreground)]'
+      )
+        }`}
+      title={l10n.t(LocalizationKey.dashboardHeaderRefreshDashboardLabel)}
      onClick={refresh}
    >
      <RefreshIcon className={`h-5 w-5`} />
-      <span className="sr-only">Refresh dashboard</span>
+      <span className="sr-only">{l10n.t(LocalizationKey.dashboardHeaderRefreshDashboardLabel)}</span>
    </button>
  );
 };
--- a/src/dashboardWebView/components/Header/Searchbox.tsx
+++ b/src/dashboardWebView/components/Header/Searchbox.tsx
@@ -5,6 +5,8 @@ import { useDebounce } from '../../../hooks/useDebounce';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SearchAtom, SearchReadyAtom } from '../../state';
 import { RefreshDashboardData } from './RefreshDashboardData';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface ISearchboxProps {
  placeholder?: string;
@@ -42,7 +44,7 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
    <div className="flex space-x-4 flex-1">
      <div className="min-w-0">
        <label htmlFor="search" className="sr-only">
-          Search
+          {l10n.t(LocalizationKey.commonSearch)}
        </label>
        <div className="relative flex justify-center">
          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
@@ -52,13 +54,12 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
          <input
            type="text"
            name="search"
-            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${
-              getColors(
-                'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
-                'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
-              )
-            }`}
-            placeholder={placeholder || 'Search'}
+            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${getColors(
+              'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
+              'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+            )
+              }`}
+            placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
            value={value}
            onChange={handleChange}
            disabled={!searchReady}
--- a/src/dashboardWebView/components/Header/Sorting.tsx
+++ b/src/dashboardWebView/components/Header/Sorting.tsx
@@ -11,6 +11,8 @@ import { SortingOption } from '../../models/SortingOption';
 import { SearchSelector, SettingsSelector, SortingAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 import { Sorting as SortingHelpers } from '../../../helpers/Sorting';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface ISortingProps {
  disableCustomSorting?: boolean;
@@ -19,25 +21,25 @@ export interface ISortingProps {

 export const sortOptions: SortingOption[] = [
  {
-    name: 'Last modified (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingLastModifiedAsc),
    id: SortOption.LastModifiedAsc,
    order: SortOrder.asc,
    type: SortType.date
  },
  {
-    name: 'Last modified (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingLastModifiedDesc),
    id: SortOption.LastModifiedDesc,
    order: SortOrder.desc,
    type: SortType.date
  },
  {
-    name: 'By filename (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingFilenameAsc),
    id: SortOption.FileNameAsc,
    order: SortOrder.asc,
    type: SortType.string
  },
  {
-    name: 'By filename (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingFilenameDesc),
    id: SortOption.FileNameDesc,
    order: SortOrder.desc,
    type: SortType.string
@@ -46,13 +48,13 @@ export const sortOptions: SortingOption[] = [

 const contentSortOptions: SortingOption[] = [
  {
-    name: 'Published (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingPublishedAsc),
    id: SortOption.PublishedAsc,
    order: SortOrder.asc,
    type: SortType.date
  },
  {
-    name: 'Published (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingPublishedDesc),
    id: SortOption.PublishedDesc,
    order: SortOrder.desc,
    type: SortType.date
@@ -61,37 +63,37 @@ const contentSortOptions: SortingOption[] = [

 const mediaSortOptions: SortingOption[] = [
  {
-    name: 'Size (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingSizeAsc),
    id: SortOption.SizeAsc,
    order: SortOrder.asc,
    type: SortType.number
  },
  {
-    name: 'Size (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingSizeDesc),
    id: SortOption.SizeDesc,
    order: SortOrder.desc,
    type: SortType.number
  },
  {
-    name: 'Caption (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingCaptionAsc),
    id: SortOption.CaptionAsc,
    order: SortOrder.asc,
    type: SortType.string
  },
  {
-    name: 'Caption (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingCaptionDesc),
    id: SortOption.CaptionDesc,
    order: SortOrder.desc,
    type: SortType.string
  },
  {
-    name: 'Alt (asc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingAltAsc),
    id: SortOption.AltAsc,
    order: SortOrder.asc,
    type: SortType.string
  },
  {
-    name: 'Alt (desc)',
+    name: l10n.t(LocalizationKey.dashboardHeaderSortingAltDesc),
    id: SortOption.AltDesc,
    order: SortOrder.desc,
    type: SortType.string
@@ -108,11 +110,10 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({

  const updateSorting = (value: SortingOption) => {
    Messenger.send(DashboardMessage.setState, {
-      key: `${
-        view === NavigationType.Contents
-          ? ExtensionState.Dashboard.Contents.Sorting
-          : ExtensionState.Dashboard.Media.Sorting
-      }`,
+      key: `${view === NavigationType.Contents
+        ? ExtensionState.Dashboard.Contents.Sorting
+        : ExtensionState.Dashboard.Media.Sorting
+        }`,
      value: value
    });

@@ -170,7 +171,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
    <div className="flex items-center">
      <Menu as="div" className="relative z-10 inline-block text-left">
        <MenuButton
-          label={`Sort by`}
+          label={l10n.t(LocalizationKey.dashboardHeaderSortingLabel)}
          title={crntSort?.title || crntSort?.name || ''}
          disabled={!!searchValue}
        />
--- a/src/dashboardWebView/components/Header/SyncButton.tsx
+++ b/src/dashboardWebView/components/Header/SyncButton.tsx
@@ -7,11 +7,13 @@ import { useRecoilValue } from 'recoil';
 import { GeneralCommands } from '../../../constants';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SettingsSelector } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface ISyncButtonProps { }

 export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
-  props: React.PropsWithChildren<ISyncButtonProps>
+  _: React.PropsWithChildren<ISyncButtonProps>
 ) => {
  const settings = useRecoilValue(SettingsSelector);
  const [isSyncing, setIsSyncing] = useState(false);
@@ -22,7 +24,7 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
  };

  const messageListener = (message: MessageEvent<EventData<any>>) => {
-    const { command, payload } = message.data;
+    const { command } = message.data;

    if (command === GeneralCommands.toWebview.gitSyncingStart) {
      setIsSyncing(true);
@@ -59,7 +61,7 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
          className={`w-4 h-4 mr-2 ${isSyncing ? 'animate-reverse-spin' : ''}`}
          aria-hidden="true"
        />
-        <span>Sync</span>
+        <span>{l10n.t(LocalizationKey.dashboardHeaderSyncButtonLabel)}</span>
      </button>
    </div>
  );
--- a/src/dashboardWebView/components/Header/Tabs.tsx
+++ b/src/dashboardWebView/components/Header/Tabs.tsx
@@ -7,6 +7,8 @@ import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIco
 import { NavigationType } from '../../models';
 import { ModeAtom } from '../../state';
 import { Tab } from './Tab';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface ITabsProps {
  onNavigate: (navigationType: NavigationType) => void;
@@ -26,20 +28,20 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
      <li className="mr-2" role="presentation">
        <Tab navigationType={NavigationType.Contents} onNavigate={onNavigate}>
          <MarkdownIcon className={`h-6 w-auto mr-2`} />
-          <span>Contents</span>
+          <span>{l10n.t(LocalizationKey.dashboardHeaderTabsContents)}</span>
        </Tab>
      </li>
      <li className="mr-2" role="presentation">
        <Tab navigationType={NavigationType.Media} onNavigate={onNavigate}>
          <PhotographIcon className={`h-6 w-auto mr-2`} />
-          <span>Media</span>
+          <span>{l10n.t(LocalizationKey.dashboardHeaderTabsMedia)}</span>
        </Tab>
      </li>
      <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.view}>
        <li className="mr-2" role="presentation">
          <Tab navigationType={NavigationType.Snippets} onNavigate={onNavigate}>
            <ScissorsIcon className={`h-6 w-auto mr-2`} />
-            <span>Snippets</span>
+            <span>{l10n.t(LocalizationKey.dashboardHeaderTabsSnippets)}</span>
          </Tab>
        </li>
      </FeatureFlag>
@@ -47,7 +49,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
        <li className="mr-2" role="presentation">
          <Tab navigationType={NavigationType.Data} onNavigate={onNavigate}>
            <DatabaseIcon className={`h-6 w-auto mr-2`} />
-            <span>Data</span>
+            <span>{l10n.t(LocalizationKey.dashboardHeaderTabsData)}</span>
          </Tab>
        </li>
      </FeatureFlag>
@@ -55,7 +57,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
        <li className="mr-2" role="presentation">
          <Tab navigationType={NavigationType.Taxonomy} onNavigate={onNavigate}>
            <TagIcon className={`h-6 w-auto mr-2`} />
-            <span>Taxonomies</span>
+            <span>{l10n.t(LocalizationKey.dashboardHeaderTabsTaxonomies)}</span>
          </Tab>
        </li>
      </FeatureFlag>
--- a/src/dashboardWebView/components/Layout/SponsorMsg.tsx
+++ b/src/dashboardWebView/components/Layout/SponsorMsg.tsx
@@ -3,6 +3,8 @@ import * as React from 'react';
 import { REVIEW_LINK, SPONSOR_LINK } from '../../../constants';
 import { VersionInfo } from '../../../models';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface ISponsorMsgProps {
  beta: boolean | undefined;
@@ -57,18 +59,20 @@ export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = ({
      ) : (
        <>
          <SponsorLink
-            title={`Support Front Matter`}
+            title={l10n.t(LocalizationKey.dashboardLayoutSponsorSupportMsg)}
            href={SPONSOR_LINK}>
-            <span>Support</span> <HeartIcon className={`h-5 w-5 group-hover:fill-current`} />
+            <span>{l10n.t(LocalizationKey.dashboardLayoutSponsorSupportLabel)}</span>{` `}
+            <HeartIcon className={`h-5 w-5 group-hover:fill-current`} />
          </SponsorLink>
          <span>
            Front Matter
            {version ? ` (v${version.installedVersion}${!!beta ? ` BETA` : ''})` : ''}
          </span>
          <SponsorLink
-            title={`Review Front Matter`}
+            title={l10n.t(LocalizationKey.dashboardLayoutSponsorReviewMsg)}
            href={REVIEW_LINK}>
-            <StarIcon className={`h-5 w-5 group-hover:fill-current`} /> <span>Review</span>
+            <StarIcon className={`h-5 w-5 group-hover:fill-current`} />{` `}
+            <span>{l10n.t(LocalizationKey.dashboardLayoutSponsorReviewLabel)}</span>
          </SponsorLink>
        </>
      )}
--- a/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
+++ b/src/dashboardWebView/components/Media/DetailsSlideOver.tsx
@@ -13,6 +13,8 @@ import { PageSelector, SelectedMediaFolderSelector } from '../../state';
 import useThemeColors from '../../hooks/useThemeColors';
 import { DetailsItem } from './DetailsItem';
 import { DetailsInput } from './DetailsInput';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IDetailsSlideOverProps {
  imgSrc: string;
@@ -108,7 +110,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                        'text-[var(--vscode-editor-foreground)]'
                      )
                        }`}>
-                        View details
+                        {l10n.t(LocalizationKey.dashboardMediaDialogTitle)}
                      </Dialog.Title>
                      <div className="ml-3 flex h-7 items-center">
                        <button
@@ -120,7 +122,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                            }`}
                          onClick={onDismiss}
                        >
-                          <span className="sr-only">Close panel</span>
+                          <span className="sr-only">{l10n.t(LocalizationKey.dashboardMediaPanelClose)}</span>
                          <XIcon className="h-6 w-6" aria-hidden="true" />
                        </button>
                      </div>
@@ -169,14 +171,14 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                              'text-[var(--vscode-editor-foreground)]'
                            )
                              }`}>
-                              Update metadata
+                              {l10n.t(LocalizationKey.dashboardMediaMetadataPanelTitle)}
                            </h3>
                            <p className={`text-sm font-medium ${getColors(
                              'text-vulcan-100 dark:text-whisper-900',
                              'text-[var(--vscode-editor-foreground)]'
                            )
                              }`}>
-                              Please specify the metadata you want to set for the file.
+                              {l10n.t(LocalizationKey.dashboardMediaMetadataPanelDescription)}
                            </p>
                            <div className="flex flex-col py-3 space-y-3">
                              <div>
@@ -185,7 +187,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                  'text-[var(--vscode-editor-foreground)]'
                                )
                                  }`}>
-                                  Filename
+                                  {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldFileName)}
                                </label>
                                <div className="relative mt-1">
                                  <DetailsInput value={name || ""} onChange={(e) => setFilename(`${e.target.value}.${extension}`)} />
@@ -202,7 +204,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                  'text-[var(--vscode-editor-foreground)]'
                                )
                                  }`}>
-                                  Title
+                                  {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldTitle)}
                                </label>
                                <div className="mt-1">
                                  <DetailsInput value={title || ""} onChange={(e) => setTitle(e.target.value)} />
@@ -217,7 +219,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                      'text-[var(--vscode-editor-foreground)]'
                                    )
                                      }`}>
-                                      Caption
+                                      {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldCaption)}
                                    </label>
                                    <div className="mt-1">
                                      <DetailsInput value={caption || ""} onChange={(e) => setCaption(e.target.value)} isTextArea />
@@ -229,7 +231,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                      'text-[var(--vscode-editor-foreground)]'
                                    )
                                      }`}>
-                                      Alt tag value
+                                      {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldAlt)}
                                    </label>
                                    <div className="mt-1">
                                      <DetailsInput value={alt || ""} onChange={(e) => setAlt(e.target.value)} isTextArea />
@@ -250,7 +252,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                onClick={onSubmitMetadata}
                                disabled={!filename}
                              >
-                                Save
+                                {l10n.t(LocalizationKey.commonSave)}
                              </button>
                              <button
                                type="button"
@@ -261,7 +263,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                  }`}
                                onClick={onEditClose}
                              >
-                                Cancel
+                                {l10n.t(LocalizationKey.commonCancel)}
                              </button>
                            </div>
                          </>
@@ -274,10 +276,10 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                              'text-[var(--vscode-foreground)]'
                            )
                              }`}>
-                              <span>Metadata</span>
+                              <span>{l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormMetadataTitle)}</span>
                              <button onClick={onEdit}>
                                <PencilAltIcon className="w-4 h-4 ml-2" aria-hidden="true" />
-                                <span className="sr-only">Edit</span>
+                                <span className="sr-only">{l10n.t(LocalizationKey.commonEdit)}</span>
                              </button>
                            </h3>
                            <dl className={`mt-2 border-t border-b divide-y ${getColors(
@@ -285,13 +287,13 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                              'border-[var(--frontmatter-border)] divide-[var(--frontmatter-border)]'
                            )
                              }`}>
-                              <DetailsItem title={`Filename`} details={media.filename} />
-                              <DetailsItem title={`Title`} details={media.title || ""} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldFileName)} details={media.filename} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldTitle)} details={media.title || ""} />

                              {isImageFile && (
                                <>
-                                  <DetailsItem title={`Caption`} details={media.caption || ''} />
-                                  <DetailsItem title={`Alternate text`} details={media.alt || ''} />
+                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldCaption)} details={media.caption || ''} />
+                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFieldAlt)} details={media.alt || ''} />
                                </>
                              )}
                            </dl>
@@ -306,7 +308,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                            'text-[var(--vscode-foreground)]'
                          )
                            }`}>
-                            Information
+                            {l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormInformationTitle)}
                          </h3>
                          <dl className={`mt-2 border-t border-b divide-y ${getColors(
                            'border-gray-200 dark:border-vulcan-200 divide-gray-200 dark:divide-vulcan-200',
@@ -314,19 +316,19 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                          )
                            }`}>
                            {createdDate && (
-                              <DetailsItem title={`Created`} details={format(createdDate, 'MMM dd, yyyy')} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormInformationCreatedDate)} details={format(createdDate, 'MMM dd, yyyy')} />
                            )}

                            {modifiedDate && (
-                              <DetailsItem title={`Last modified`} details={format(modifiedDate, 'MMM dd, yyyy')} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormInformationModifiedDate)} details={format(modifiedDate, 'MMM dd, yyyy')} />
                            )}

                            {dimensions && (
-                              <DetailsItem title={`Dimensions`} details={dimensions} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormInformationDimensions)} details={dimensions} />
                            )}

                            {folder && (
-                              <DetailsItem title={`Folder`} details={folder} />
+                              <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaMetadataPanelFormInformationFolder)} details={folder} />
                            )}
                          </dl>
                        </div>
--- a/src/dashboardWebView/components/Media/FolderCreation.tsx
+++ b/src/dashboardWebView/components/Media/FolderCreation.tsx
@@ -17,6 +17,8 @@ import { useCallback, useMemo } from 'react';
 import { extname } from 'path';
 import { parseWinPath } from '../../../helpers/parseWinPath';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';

 export interface IFolderCreationProps { }

@@ -81,11 +83,11 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
            `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
          )
            }`}
-          title={`Create post asset folder`}
+          title={l10n.t(LocalizationKey.dashboardMediaFolderCreationButtonCreate)}
          onClick={onAssetFolderCreation}
        >
          <FolderAddIcon className={`mr-2 h-6 w-6`} />
-          <span className={``}>Create post asset folder</span>
+          <span className={``}>{l10n.t(LocalizationKey.dashboardMediaFolderCreationButtonCreate)}</span>
        </button>
      );
    }
--- a/src/localization/localization.enum.ts
+++ b/src/localization/localization.enum.ts
@@ -1,6 +1,109 @@
 export enum LocalizationKey {
-  dashboardHeaderCreateContent = 'dashboard.header.createContent',
+  commonEdit = 'common.edit',
+  commonDelete = 'common.delete',
+  commonCancel = 'common.cancel',
+  commonClear = 'common.clear',
+  commonSearch = 'common.search',
+  commonSave = 'common.save',
+  commonErrorMessage = 'common.error.message',
+  fieldRequired = 'field.required',
+  fieldUnknown = 'field.unknown',
+  dashboardChatbotAnswerAnswer = 'dashboard.chatbot.answer.answer',
+  dashboardChatbotAnswerResources = 'dashboard.chatbot.answer.resources',
+  dashboardChatbotAnswerWarning = 'dashboard.chatbot.answer.warning',
+  dashboardChatbotChatbotLoading = 'dashboard.chatbot.chatbot.loading',
+  dashboardChatbotChatbotReady = 'dashboard.chatbot.chatbot.ready',
+  dashboardChatbotChatboxPlaceholder = 'dashboard.chatbot.chatbox.placeholder',
+  dashboardChatbotHeaderHeading = 'dashboard.chatbot.header.heading',
+  dashboardChatbotHeaderDescription = 'dashboard.chatbot.header.description',
+  dashboardCommonChoiceButtonOpen = 'dashboard.common.choiceButton.open',
+  dashboardContentsContentActionsActionMenuButtonTitle = 'dashboard.contents.contentActions.actionMenuButton.title',
+  dashboardContentsContentActionsMenuItemView = 'dashboard.contents.contentActions.menuItem.view',
+  dashboardContentsContentActionsAlertTitle = 'dashboard.contents.contentActions.alert.title',
+  dashboardContentsContentActionsAlertDescription = 'dashboard.contents.contentActions.alert.description',
+  dashboardContentsItemInvalidTitle = 'dashboard.contents.item.invalidTitle',
+  dashboardContentsItemInvalidDescription = 'dashboard.contents.item.invalidDescription',
+  dashboardContentsListTitle = 'dashboard.contents.list.title',
+  dashboardContentsListDate = 'dashboard.contents.list.date',
+  dashboardContentsListStatus = 'dashboard.contents.list.status',
+  dashboardContentsOverviewNoMarkdown = 'dashboard.contents.overview.noMarkdown',
+  dashboardContentsOverviewNoFolders = 'dashboard.contents.overview.noFolders',
+  dashboardContentsStatusDraft = 'dashboard.contents.status.draft',
+  dashboardContentsStatusPublished = 'dashboard.contents.status.published',
+  dashboardDataViewDataFormModify = 'dashboard.dataView.dataForm.modify',
+  dashboardDataViewDataFormAdd = 'dashboard.dataView.dataForm.add',
+  dashboardDataViewDataViewSelect = 'dashboard.dataView.dataView.select',
+  dashboardDataViewDataViewTitle = 'dashboard.dataView.dataView.title',
+  dashboardDataViewDataViewAdd = 'dashboard.dataView.dataView.add',
+  dashboardDataViewDataViewEmpty = 'dashboard.dataView.dataView.empty',
+  dashboardDataViewDataViewCreateOrModify = 'dashboard.dataView.dataView.createOrModify',
+  dashboardDataViewDataViewGetStarted = 'dashboard.dataView.dataView.getStarted',
+  dashboardDataViewDataViewNoDataFiles = 'dashboard.dataView.dataView.noDataFiles',
+  dashboardDataViewDataViewGetStartedLink = 'dashboard.dataView.dataView.getStarted.link',
+  dashboardDataViewEmptyViewHeading = 'dashboard.dataView.emptyView.heading',
+  dashboardDataViewSortableItemEditButtonTitle = 'dashboard.dataView.sortableItem.editButton.title',
+  dashboardDataViewSortableItemDeleteButtonTitle = 'dashboard.dataView.sortableItem.deleteButton.title',
+  dashboardDataViewSortableItemAlertTitle = 'dashboard.dataView.sortableItem.alert.title',
+  dashboardDataViewSortableItemAlertDescription = 'dashboard.dataView.sortableItem.alert.description',
+  dashboardErrorViewDescription = 'dashboard.errorView.description',
+  dashboardHeaderBreadcrumbHome = 'dashboard.header.breadcrumb.home',
+  dashboardHeaderClearFiltersTitle = 'dashboard.header.clearFilters.title',
+  dashboardHeaderFilterDefault = 'dashboard.header.filter.default',
+  dashboardHeaderFoldersDefault = 'dashboard.header.folders.default',
+  dashboardHeaderFoldersMenuButtonShowing = 'dashboard.header.folders.menuButton.showing',
+  dashboardHeaderGroupingOptionNone = 'dashboard.header.grouping.option.none',
+  dashboardHeaderGroupingOptionYear = 'dashboard.header.grouping.option.year',
+  dashboardHeaderGroupingOptionDraft = 'dashboard.header.grouping.option.draft',
+  dashboardHeaderGroupingMenuButtonLabel = 'dashboard.header.grouping.menuButton.label',
+  dashboardHeaderHeaderCreateContent = 'dashboard.header.header.createContent',
+  dashboardHeaderHeaderCreateByContentType = 'dashboard.header.header.createByContentType',
+  dashboardHeaderHeaderCreateByTemplate = 'dashboard.header.header.createByTemplate',
+  dashboardHeaderPaginationFirst = 'dashboard.header.pagination.first',
+  dashboardHeaderPaginationPrevious = 'dashboard.header.pagination.previous',
+  dashboardHeaderPaginationNext = 'dashboard.header.pagination.next',
+  dashboardHeaderPaginationLast = 'dashboard.header.pagination.last',
+  dashboardHeaderPaginationStatusText = 'dashboard.header.paginationStatus.text',
+  dashboardHeaderProjectSwitcherLabel = 'dashboard.header.projectSwitcher.label',
+  dashboardHeaderRefreshDashboardLabel = 'dashboard.header.refreshDashboard.label',
+  dashboardHeaderSortingLastModifiedAsc = 'dashboard.header.sorting.lastModified.asc',
+  dashboardHeaderSortingLastModifiedDesc = 'dashboard.header.sorting.lastModified.desc',
+  dashboardHeaderSortingFilenameAsc = 'dashboard.header.sorting.filename.asc',
+  dashboardHeaderSortingFilenameDesc = 'dashboard.header.sorting.filename.desc',
+  dashboardHeaderSortingPublishedAsc = 'dashboard.header.sorting.published.asc',
+  dashboardHeaderSortingPublishedDesc = 'dashboard.header.sorting.published.desc',
+  dashboardHeaderSortingSizeAsc = 'dashboard.header.sorting.size.asc',
+  dashboardHeaderSortingSizeDesc = 'dashboard.header.sorting.size.desc',
+  dashboardHeaderSortingCaptionAsc = 'dashboard.header.sorting.caption.asc',
+  dashboardHeaderSortingCaptionDesc = 'dashboard.header.sorting.caption.desc',
+  dashboardHeaderSortingAltAsc = 'dashboard.header.sorting.alt.asc',
+  dashboardHeaderSortingAltDesc = 'dashboard.header.sorting.alt.desc',
+  dashboardHeaderSortingLabel = 'dashboard.header.sorting.label',
  dashboardHeaderStartupLabel = 'dashboard.header.startup.label',
+  dashboardHeaderSyncButtonLabel = 'dashboard.header.syncButton.label',
+  dashboardHeaderTabsContents = 'dashboard.header.tabs.contents',
+  dashboardHeaderTabsMedia = 'dashboard.header.tabs.media',
+  dashboardHeaderTabsSnippets = 'dashboard.header.tabs.snippets',
+  dashboardHeaderTabsData = 'dashboard.header.tabs.data',
+  dashboardHeaderTabsTaxonomies = 'dashboard.header.tabs.taxonomies',
+  dashboardLayoutSponsorSupportLabel = 'dashboard.layout.sponsor.support.label',
+  dashboardLayoutSponsorSupportMsg = 'dashboard.layout.sponsor.support.msg',
+  dashboardLayoutSponsorReviewLabel = 'dashboard.layout.sponsor.review.label',
+  dashboardLayoutSponsorReviewMsg = 'dashboard.layout.sponsor.review.msg',
+  dashboardMediaDialogTitle = 'dashboard.media.dialog.title',
+  dashboardMediaPanelClose = 'dashboard.media.panel.close',
+  dashboardMediaMetadataPanelTitle = 'dashboard.media.metadata.panel.title',
+  dashboardMediaMetadataPanelDescription = 'dashboard.media.metadata.panel.description',
+  dashboardMediaMetadataPanelFieldFileName = 'dashboard.media.metadata.panel.field.fileName',
+  dashboardMediaMetadataPanelFieldTitle = 'dashboard.media.metadata.panel.field.title',
+  dashboardMediaMetadataPanelFieldCaption = 'dashboard.media.metadata.panel.field.caption',
+  dashboardMediaMetadataPanelFieldAlt = 'dashboard.media.metadata.panel.field.alt',
+  dashboardMediaMetadataPanelFormMetadataTitle = 'dashboard.media.metadata.panel.form.metadata.title',
+  dashboardMediaMetadataPanelFormInformationTitle = 'dashboard.media.metadata.panel.form.information.title',
+  dashboardMediaMetadataPanelFormInformationCreatedDate = 'dashboard.media.metadata.panel.form.information.createdDate',
+  dashboardMediaMetadataPanelFormInformationModifiedDate = 'dashboard.media.metadata.panel.form.information.modifiedDate',
+  dashboardMediaMetadataPanelFormInformationDimensions = 'dashboard.media.metadata.panel.form.information.dimensions',
+  dashboardMediaMetadataPanelFormInformationFolder = 'dashboard.media.metadata.panel.form.information.folder',
+  dashboardMediaFolderCreationButtonCreate = 'dashboard.media.folderCreation.button.create',
  panelActionsTitle = 'panel.actions.title',
  panelActionsOpenDashboard = 'panel.actions.openDashboard',
  panelActionsOpenPreview = 'panel.actions.openPreview',
--- a/src/services/PagesParser.ts
+++ b/src/services/PagesParser.ts
@@ -30,6 +30,7 @@ export class PagesParser {
  public static cachedPages: Page[] | undefined = undefined;
  private static parser: Promise<void> | undefined;
  private static initialized: boolean = false;
+  private static pagesStatusBar = window.createStatusBarItem(StatusBarAlignment.Left);

  /**
   * Start the page parser
@@ -75,11 +76,10 @@ export class PagesParser {
    // Update the dashboard with the fresh data
    const folderInfo = await Folders.getInfo();
    const pages: Page[] = [];
-    const statusBar = window.createStatusBarItem(StatusBarAlignment.Left);

    if (folderInfo) {
-      statusBar.text = '$(sync~spin) Processing pages...';
-      statusBar.show();
+      PagesParser.pagesStatusBar.text = '$(sync~spin) Processing pages...';
+      PagesParser.pagesStatusBar.show();

      for (const folder of folderInfo) {
        for (const file of folder.lastModified) {
@@ -118,7 +118,7 @@ export class PagesParser {
    this.parser = undefined;
    this.initialized = true;
    PagesParser.allPages = [...pages];
-    statusBar.hide();
+    PagesParser.pagesStatusBar.hide();
  }

  /**