Merge pull request #627 from estruyf/dev

This should fix the error:

```sh
$ref 'gobalconfiguration' in 'vscode://schemas/settings/configurationDefaults' can not be resolved.```

.frontmatter/database/taxonomyDb.json

@@ -0,0 +1 @@
+{}

.gitignore

@@ -9,3 +9,6 @@ todo.md
 e2e/storage
 e2e/extensions
 e2e/sample
+
+localization.log
+localization.md

CHANGELOG.md

@@ -1,5 +1,62 @@
 # Change Log
 
+## [9.0.0] - 2023-08-21 - [Release notes](https://beta.frontmatter.codes/updates/v9.0.0)
+
+### 🌎 Multilingual support
+
+- German (translated via OpenAI)
+- Japanese (thanks to [mayumihara](https://github.com/mayumih387))
+
+### 🧪 Experimental features
+
+- External UI script support for dashboards and Front Matter panel
+- Front matter AI 🤖
+
+> **Info**: To enable the experimental features you need to set the `frontMatter.experimental` setting to `true`.
+
+### ✨ New features
+
+- Added description AI suggestion for GitHub sponsors
+- The Visual Studio Code theme support is now released in the stable version
+- [#424](https://github.com/estruyf/vscode-front-matter/issues/424): Snippet wrapping to allow easier updates or changes to previously set snippets in the content
+- [#585](https://github.com/estruyf/vscode-front-matter/issues/585): New content relationship field type (`contentRelationship`)
+- [#598](https://github.com/estruyf/vscode-front-matter/issues/598): Multilingual support
+- [#615](https://github.com/estruyf/vscode-front-matter/issues/615): Added support for `astro:assets` - [Astro Assets](https://docs.astro.build/en/guides/assets/)
+
+### 🎨 Enhancements
+
+- [#558](https://github.com/estruyf/vscode-front-matter/issues/558): Moved the tags and categories to a `.frontmatter/database/taxonomyDb.json` file
+- [#566](https://github.com/estruyf/vscode-front-matter/issues/566): Keep the panel context on the live preview
+- [#568](https://github.com/estruyf/vscode-front-matter/issues/568): Update the preview URL if the slug changes
+- [#569](https://github.com/estruyf/vscode-front-matter/issues/569): Remove the page bundle folder on content removal
+- [#586](https://github.com/estruyf/vscode-front-matter/issues/586): Allow to specify the content card fields
+- [#588](https://github.com/estruyf/vscode-front-matter/issues/588): Added extensibility support to override card fields
+- [#591](https://github.com/estruyf/vscode-front-matter/issues/591): Support for date format in the `datetime` field
+- [#593](https://github.com/estruyf/vscode-front-matter/issues/593): Add support for date formatting in the preview path
+- [#599](https://github.com/estruyf/vscode-front-matter/issues/599): Add a placeholder when the base panel view is empty
+- [#602](https://github.com/estruyf/vscode-front-matter/issues/602): Find content outside the Front Matter workspace folder
+- [#611](https://github.com/estruyf/vscode-front-matter/issues/611): Fix typo in the `frontMatter.global.disabledNotifications` setting
+- [#619](https://github.com/estruyf/vscode-front-matter/issues/619): Added the `fmWebviewUrl` property to be used in the `registerCardImage` extensibility library
+
+### ⚡️ Optimizations
+
+- [#584](https://github.com/estruyf/vscode-front-matter/issues/584): Ignore type field in content-type validation
+
+### 🐞 Fixes
+
+- [#564](https://github.com/estruyf/vscode-front-matter/issues/564): Fix to only pass strings to the taxonomy dashboard
+- [#567](https://github.com/estruyf/vscode-front-matter/issues/567): Fix taxonomy filters that are incorrectly positioned
+- [#572](https://github.com/estruyf/vscode-front-matter/issues/572): Fix the media snippet placeholder link
+- [#577](https://github.com/estruyf/vscode-front-matter/issues/577): Fix in the `dataFile` field where data entries get overwritten
+- [#590](https://github.com/estruyf/vscode-front-matter/issues/590): Fix for image fields inside a sub-block
+- [#595](https://github.com/estruyf/vscode-front-matter/issues/595): Fix for media metadata now showing up
+- [#596](https://github.com/estruyf/vscode-front-matter/issues/596): Fix for number field in block data
+- [#603](https://github.com/estruyf/vscode-front-matter/issues/603): Fix problem with page bundles and path placeholders
+- [#616](https://github.com/estruyf/vscode-front-matter/issues/616): Fix content filtering
+- [#617](https://github.com/estruyf/vscode-front-matter/issues/617): Fix insert media snippet dialog by using a slideover instead of a dialog
+- [#620](https://github.com/estruyf/vscode-front-matter/issues/620): Fix in array field of data files
+- [#621](https://github.com/estruyf/vscode-front-matter/issues/621): Create data file if it does not exist yet
+
 ## [8.4.0] - 2023-04-03 - [Release notes](https://beta.frontmatter.codes/updates/v8.4.0)
 
 ### 🧪 Experimental features

README.beta.md

@@ -10,12 +10,12 @@
 
 <p align="center">
   <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter" title="Check it out on the Visual Studio Marketplace">
-    <img src="https://vsmarketplacebadges.dev/version/eliostruyf.vscode-front-matter.svg" alt="Visual Studio Marketplace" style="display: inline-block" />
+    <img src="https://vscode-marketplace-badge.vercel.app/api/badge/version/eliostruyf.vscode-front-matter" alt="Visual Studio Marketplace" style="display: inline-block" />
   </a>
 
-  <img src="https://vsmarketplacebadges.dev/installs/eliostruyf.vscode-front-matter.svg" alt="Number of installs"  style="display: inline-block;margin-left:10px" />
-  
-  <img src="https://vsmarketplacebadges.dev/rating/eliostruyf.vscode-front-matter.svg" alt="Ratings" style="display: inline-block;margin-left:10px" />
+  <img src="https://vscode-marketplace-badge.vercel.app/api/badge/installs/eliostruyf.vscode-front-matter" alt="Number of installs"  style="display: inline-block;margin-left:10px" />
+
+  <img src="https://vscode-marketplace-badge.vercel.app/api/badge/rating/eliostruyf.vscode-front-matter" alt="Ratings" style="display: inline-block;margin-left:10px" />
 
   <a href="https://github.com/sponsors/estruyf" title="Become a sponsor" style="margin-left:10px">
     <img src="https://img.shields.io/github/sponsors/estruyf?color=%23CE2E7C&logo=github&style=flat" alt="Sponsor the project" style="display: inline-block" />
@@ -54,6 +54,10 @@ A couple of our extension highlights that hopefully get you interested in giving
 
 > If you see something missing in your article creation flow, please feel free to reach out.
 
+**Version 9**
+
+The extension is now available in multiple languages: English, German, and Japanese. Want to add your language? Check out the [localization the extension](https://frontmatter.codes/docs/contributing#translating-the-extension).
+
 **Version 8**
 
 The taxonomy dashboard got introduced on which you can manage your tags, categories, and custom taxonomy.
@@ -117,7 +121,7 @@ You can get the extension via:
 If you have the courage to test out the beta features, we made available a beta version as well. You can install this via:
 
 - Uninstall the main Front Matter version
-- Install the beta version 
+- Install the beta version
   - VS Code marketplace: [VS Code Marketplace - Front Matter BETA](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter-beta).
   - The extension CLI: `ext install eliostruyf.vscode-front-matter-beta`
   - Or by clicking on the following link: <a href="" title="open extension in VS Code" data-vscode="vscode:extension/eliostruyf.vscode-front-matter-beta">open extension in VS Code</a>
@@ -193,4 +197,4 @@ You can open showcase issues for the following things:
   <a href="https://visitorbadge.io">
     <img src="https://api.visitorbadge.io/api/VisitorHit?user=estruyf&repo=vscode-front-matter&countColor=%23F05450&labelColor=%230E131F" height="25px" />
   </a>
-</p>
+</p>

README.md

@@ -8,12 +8,12 @@
 
 <p align="center">
   <a href="https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-front-matter" title="Check it out on the Visual Studio Marketplace">
-    <img src="https://vsmarketplacebadges.dev/version/eliostruyf.vscode-front-matter.svg" alt="Visual Studio Marketplace" style="display: inline-block" />
+    <img src="https://vscode-marketplace-badge.vercel.app/api/badge/version/eliostruyf.vscode-front-matter" alt="Visual Studio Marketplace" style="display: inline-block" />
   </a>
 
-  <img src="https://vsmarketplacebadges.dev/installs/eliostruyf.vscode-front-matter.svg" alt="Number of installs"  style="display: inline-block;margin-left:10px" />
+  <img src="https://vscode-marketplace-badge.vercel.app/api/badge/installs/eliostruyf.vscode-front-matter" alt="Number of installs"  style="display: inline-block;margin-left:10px" />
 
-  <img src="https://vsmarketplacebadges.dev/rating/eliostruyf.vscode-front-matter.svg" alt="Ratings" style="display: inline-block;margin-left:10px" />
+  <img src="https://vscode-marketplace-badge.vercel.app/api/badge/rating/eliostruyf.vscode-front-matter" alt="Ratings" style="display: inline-block;margin-left:10px" />
 
   <a href="https://github.com/sponsors/estruyf" title="Become a sponsor" style="margin-left:10px">
     <img src="https://img.shields.io/github/sponsors/estruyf?color=%23CE2E7C&logo=github&style=flat" alt="Sponsor the project" style="display: inline-block" />
@@ -52,6 +52,10 @@ A couple of our extension highlights that hopefully get you interested in giving
 
 > If you see something missing in your article creation flow, please feel free to reach out.
 
+**Version 9**
+
+The extension is now available in multiple languages: English, German, and Japanese. Want to add your language? Check out the [localization the extension](https://frontmatter.codes/docs/contributing#translating-the-extension).
+
 **Version 8**
 
 The taxonomy dashboard got introduced on which you can manage your tags, categories, and custom taxonomy.

frontmatter.json

@@ -33,7 +33,7 @@
           "type": "string",
           "name": "year",
           "title": "Year",
-          "default": "2022"
+          "default": "{{year}}"
         },
         {
           "type": "string",

l10n/bundle.l10n.de.json

@@ -0,0 +1,336 @@
+{
+  "common.add": "Hinzufügen",
+  "common.edit": "Bearbeiten",
+  "common.delete": "Löschen",
+  "common.cancel": "Abbrechen",
+  "common.clear": "Löschen",
+  "common.clear.value": "Wert löschen",
+  "common.search": "Suchen",
+  "common.save": "Speichern",
+  "common.menu": "Menü",
+  "common.insert": "Einfügen",
+  "common.insert.snippet": "Snippet einfügen",
+  "common.title": "Titel",
+  "common.description": "Beschreibung",
+  "common.retry": "Erneut versuchen",
+  "common.update": "Aktualisieren",
+  "common.information": "Info",
+  "common.important": "Wichtig",
+  "common.sync": "Synchronisieren",
+  "common.slug": "Slug",
+  "common.support": "Support",
+  "common.remove.value": "{0} entfernen",
+  "common.error.message": "Entschuldigung, etwas ist schiefgelaufen.",
+  "developer.title": "Entwicklermodus",
+  "developer.reload.title": "Dashboard neu laden",
+  "developer.reload.label": "Neu laden",
+  "developer.devTools.title": "Entwicklertools öffnen",
+  "developer.devTools.label": "DevTools",
+  "field.required": "Pflichtfeld",
+  "field.unknown": "Unbekanntes Feld",
+  "dashboard.chatbot.answer.answer": "Antwort",
+  "dashboard.chatbot.answer.resources": "Ressourcen",
+  "dashboard.chatbot.answer.warning": "Warnung: Antworten können falsch sein. Im Zweifelsfall konsultieren Sie bitte die Dokumentation.",
+  "dashboard.chatbot.chatbot.loading": "Assistent wird vorbereitet",
+  "dashboard.chatbot.chatbot.ready": "Ich bin bereit, was möchtest du wissen?",
+  "dashboard.chatbot.chatbox.placeholder": "Wie kann ich Front Matter konfigurieren?",
+  "dashboard.chatbot.header.heading": "Frag den Front Matter AI",
+  "dashboard.chatbot.header.description": "Unser KI-System, powered by mendable.ai, hat die Dokumentation verarbeitet und kann Ihnen bei Fragen zu Front Matter behilflich sein. Legen Sie los und fragen Sie!",
+  "dashboard.common.choiceButton.open": "Optionen öffnen",
+  "dashboard.contents.contentActions.actionMenuButton.title": "Menü",
+  "dashboard.contents.contentActions.menuItem.view": "Anzeigen",
+  "dashboard.contents.contentActions.alert.title": "Löschen: {0}",
+  "dashboard.contents.contentActions.alert.description": "Möchten Sie den Inhalt \"{0}\" wirklich löschen?",
+  "dashboard.contents.item.invalidTitle": "<ungültiger Titel>",
+  "dashboard.contents.item.invalidDescription": "<ungültige Beschreibung>",
+  "dashboard.contents.list.title": "Titel",
+  "dashboard.contents.list.date": "Datum",
+  "dashboard.contents.list.status": "Status",
+  "dashboard.contents.overview.noMarkdown": "Kein Markdown vorhanden",
+  "dashboard.contents.overview.noFolders": "Stellen Sie sicher, dass Sie einen Inhaltsordner in Ihrem Projekt registriert haben, damit Front Matter die Inhalte finden kann.",
+  "dashboard.contents.status.draft": "Entwurf",
+  "dashboard.contents.status.published": "Veröffentlicht",
+  "dashboard.dataView.dataForm.modify": "Daten bearbeiten",
+  "dashboard.dataView.dataForm.add": "Neue Daten hinzufügen",
+  "dashboard.dataView.dataView.select": "Wählen Sie Ihren Datentyp",
+  "dashboard.dataView.dataView.title": "Ihre {0} Dateneinträge",
+  "dashboard.dataView.dataView.add": "Neuen Eintrag hinzufügen",
+  "dashboard.dataView.dataView.empty": "Keine {0} Dateneinträge gefunden",
+  "dashboard.dataView.dataView.createOrModify": "Erstellen oder bearbeiten Sie Ihre {0} Daten",
+  "dashboard.dataView.dataView.getStarted": "Wählen Sie einen Datentyp, um zu beginnen",
+  "dashboard.dataView.dataView.noDataFiles": "Keine Datendateien gefunden",
+  "dashboard.dataView.dataView.getStarted.link": "Lesen Sie mehr, um zu erfahren, wie Sie Datenfiles verwenden können",
+  "dashboard.dataView.emptyView.heading": "Wählen Sie zuerst Ihren Datentyp aus",
+  "dashboard.dataView.sortableItem.editButton.title": "\"{0}\" bearbeiten",
+  "dashboard.dataView.sortableItem.deleteButton.title": "\"{0}\" löschen",
+  "dashboard.dataView.sortableItem.alert.title": "Daten-Eintrag löschen",
+  "dashboard.dataView.sortableItem.alert.description": "Sind Sie sicher, dass Sie den Daten-Eintrag löschen möchten?",
+  "dashboard.errorView.description": "Bitte schließen Sie das Dashboard und versuchen Sie es erneut.",
+  "dashboard.header.breadcrumb.home": "Startseite",
+  "dashboard.header.clearFilters.title": "Filter, Gruppierung und Sortierung zurücksetzen",
+  "dashboard.header.filter.default": "Kein Filter",
+  "dashboard.header.folders.default": "Alle Typen",
+  "dashboard.header.folders.menuButton.showing": "Anzeige",
+  "dashboard.header.grouping.option.none": "Keine",
+  "dashboard.header.grouping.option.year": "Jahr",
+  "dashboard.header.grouping.option.draft": "Entwurf/Veröffentlicht",
+  "dashboard.header.grouping.menuButton.label": "Gruppieren nach",
+  "dashboard.header.navigation.allArticles": "Alle Artikel",
+  "dashboard.header.navigation.published": "Veröffentlicht",
+  "dashboard.header.navigation.draft": "Im Entwurf",
+  "dashboard.header.header.createContent": "Inhalt erstellen",
+  "dashboard.header.header.createByContentType": "Nach Inhaltstyp erstellen",
+  "dashboard.header.header.createByTemplate": "Nach Vorlage erstellen",
+  "dashboard.header.pagination.first": "Erste",
+  "dashboard.header.pagination.previous": "Vorherige",
+  "dashboard.header.pagination.next": "Nächste",
+  "dashboard.header.pagination.last": "Letzte",
+  "dashboard.header.paginationStatus.text": "Zeige {0} bis {1} von {2} Ergebnissen",
+  "dashboard.header.projectSwitcher.label": "Projekt",
+  "dashboard.header.refreshDashboard.label": "Dashboard aktualisieren",
+  "dashboard.header.sorting.lastModified.asc": "Zuletzt geändert (aufsteigend)",
+  "dashboard.header.sorting.lastModified.desc": "Zuletzt geändert (absteigend)",
+  "dashboard.header.sorting.filename.asc": "Nach Dateiname (aufsteigend)",
+  "dashboard.header.sorting.filename.desc": "Nach Dateiname (absteigend)",
+  "dashboard.header.sorting.published.asc": "Veröffentlicht (aufsteigend)",
+  "dashboard.header.sorting.published.desc": "Veröffentlicht (absteigend)",
+  "dashboard.header.sorting.size.asc": "Größe (aufsteigend)",
+  "dashboard.header.sorting.size.desc": "Größe (absteigend)",
+  "dashboard.header.sorting.caption.asc": "Beschriftung (aufsteigend)",
+  "dashboard.header.sorting.caption.desc": "Beschriftung (absteigend)",
+  "dashboard.header.sorting.alt.asc": "Alt-Text (aufsteigend)",
+  "dashboard.header.sorting.alt.desc": "Alt-Text (absteigend)",
+  "dashboard.header.sorting.label": "Sortieren nach",
+  "dashboard.header.startup.label": "Beim Start öffnen?",
+  "dashboard.header.tabs.contents": "Inhalte",
+  "dashboard.header.tabs.media": "Medien",
+  "dashboard.header.tabs.snippets": "Snippets",
+  "dashboard.header.tabs.data": "Daten",
+  "dashboard.header.tabs.taxonomies": "Taxonomien",
+  "dashboard.header.viewSwitch.toGrid": "Zur Rasteransicht wechseln",
+  "dashboard.header.viewSwitch.toList": "Zur Listenansicht wechseln",
+  "dashboard.layout.sponsor.support.msg": "Unterstützen Sie Front Matter",
+  "dashboard.layout.sponsor.review.label": "Bewerten",
+  "dashboard.layout.sponsor.review.msg": "Bewerten Sie Front Matter",
+  "dashboard.media.common.title": "Titel",
+  "dashboard.media.common.caption": "Beschriftung",
+  "dashboard.media.common.alt": "Alternativer Text",
+  "dashboard.media.common.size": "Größe",
+  "dashboard.media.dialog.title": "Details anzeigen",
+  "dashboard.media.panel.close": "Panel schließen",
+  "dashboard.media.metadata.panel.title": "Metadaten aktualisieren",
+  "dashboard.media.metadata.panel.description": "Geben Sie die Metadaten für die Datei ein.",
+  "dashboard.media.metadata.panel.field.fileName": "Dateiname",
+  "dashboard.media.metadata.panel.form.metadata.title": "Metadaten",
+  "dashboard.media.metadata.panel.form.information.title": "Informationen",
+  "dashboard.media.metadata.panel.form.information.createdDate": "Erstellt am",
+  "dashboard.media.metadata.panel.form.information.modifiedDate": "Zuletzt geändert",
+  "dashboard.media.metadata.panel.form.information.dimensions": "Abmessungen",
+  "dashboard.media.metadata.panel.form.information.folder": "Ordner",
+  "dashboard.media.folderCreation.hexo.create": "Post-Asset-Ordner erstellen",
+  "dashboard.media.folderCreation.folder.create": "Neuen Ordner erstellen",
+  "dashboard.media.item.quickAction.insert.field": "Bild in Ihrem Feld \"{0}\" einfügen",
+  "dashboard.media.item.quickAction.insert.markdown": "Bild mit Markdown-Markup einfügen",
+  "dashboard.media.item.quickAction.copy.path": "Medienpfad kopieren",
+  "dashboard.media.item.quickAction.delete": "Medien-Datei löschen",
+  "dashboard.media.item.menuItem.edit.metadata": "Metadaten bearbeiten",
+  "dashboard.media.item.menuItem.insert.image": "Bild einfügen",
+  "dashboard.media.item.menuItem.reveal.media": "Medien anzeigen",
+  "dashboard.media.item.infoDialog.snippet.description": "Wählen Sie das Media-Snippet aus, das für die aktuelle Mediendatei verwendet werden soll.",
+  "dashboard.media.item.alert.delete.description": "Sind Sie sicher, dass Sie die Datei aus dem Ordner {0} löschen möchten?",
+  "dashboard.media.media.description": "Wählen Sie die Medien-Datei aus, die Sie Ihrem Inhalt hinzufügen möchten.",
+  "dashboard.media.media.dragAndDrop": "Sie können Bilder auch per Drag & Drop von Ihrem Desktop auswählen, nachdem sie hochgeladen wurden.",
+  "dashboard.media.media.folder.upload": "Zu {0} hochladen",
+  "dashboard.media.media.folder.default": "Kein Ordner ausgewählt, die Dateien, die Sie ablegen, werden dem Ordner {0} hinzugefügt",
+  "dashboard.media.media.placeholder": "Keine Medien-Dateien vorhanden. Sie können neue Dateien per Drag & Drop unter Verwendung der [Shift]-Taste hinzufügen.",
+  "dashboard.media.media.contentFolder": "Inhaltsordner",
+  "dashboard.media.media.publicFolder": "Öffentlicher Ordner",
+  "dashboard.media.mediaHeaderTop.searchbox.placeholder": "In Ordner suchen",
+  "dashboard.media.mediaSnippetForm.formDialog.title": "Medien einfügen: {0}",
+  "dashboard.media.mediaSnippetForm.formDialog.description": "Fügen Sie die {0}-Mediendatei in den aktuellen Artikel ein",
+  "dashboard.preview.input.placeholder": "Geben Sie eine URL ein",
+  "dashboard.preview.button.navigate.title": "Navigieren",
+  "dashboard.preview.button.refresh.title": "Aktualisieren",
+  "dashboard.preview.button.open.title": "Öffnen",
+  "dashboard.snippetsView.item.quickAction.editSnippet": "Snippet bearbeiten",
+  "dashboard.snippetsView.item.quickAction.deleteSnippet": "Snippet löschen",
+  "dashboard.snippetsView.item.quickAction.viewSnippet": "Snippet-Datei anzeigen",
+  "dashboard.snippetsView.item.insert.formDialog.title": "Snippet einfügen: {0}",
+  "dashboard.snippetsView.item.insert.formDialog.description": "Fügen Sie das {0}-Snippet in den aktuellen Artikel ein",
+  "dashboard.snippetsView.item.edit.formDialog.title": "Snippet bearbeiten: {0}",
+  "dashboard.snippetsView.item.edit.formDialog.description": "Bearbeiten Sie das {0}-Snippet",
+  "dashboard.snippetsView.item.alert.title": "Snippet löschen: {0}",
+  "dashboard.snippetsView.item.alert.description": "Sind Sie sicher, dass Sie das {0}-Snippet löschen möchten?",
+  "dashboard.snippetsView.newForm.snippetInput.title.placeholder": "Titel des Schnipsels",
+  "dashboard.snippetsView.newForm.snippetInput.description.label": "Beschreibung",
+  "dashboard.snippetsView.newForm.snippetInput.description.placeholder": "Beschreibung des Schnipsels",
+  "dashboard.snippetsView.newForm.snippetInput.snippet.label": "Schnipsel",
+  "dashboard.snippetsView.newForm.snippetInput.snippet.placeholder": "Inhalt des Schnipsels",
+  "dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.label": "Ist ein Medienschnipsel?",
+  "dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.checkbox.label": "Medienschnipsel",
+  "dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.checkbox.description": "Verwende diesen Schnipsel, um Medieninhalte in deine Seiten einzufügen.",
+  "dashboard.snippetsView.newForm.snippetInput.docsButton.title": "Erfahre mehr über die Verwendung von Platzhaltern für Medienschnipsel",
+  "dashboard.snippetsView.newForm.snippetInput.docsButton.description": "In unserer Dokumentation zu Medienschnipsel-Platzhaltern erfährst du, welche Platzhalter du verwenden kannst.",
+  "dashboard.snippetsView.snippets.ariaLabel": "Überschrift der Schnipsel",
+  "dashboard.snippetsView.snippets.button.create": "Neuen Schnipsel erstellen",
+  "dashboard.snippetsView.snippets.select.description": "Wähle den Schnipsel aus, den du deinem Inhalt hinzufügen möchtest.",
+  "dashboard.snippetsView.snippets.empty.message": "Keine Schnipsel gefunden",
+  "dashboard.snippetsView.snippets.readMore": "Erfahre mehr über die Verwendung von Schnipseln",
+  "dashboard.snippetsView.snippets.formDialog.title": "Einen Schnipsel erstellen",
+  "dashboard.steps.stepsToGetStarted.button.addFolder.title": "Als Inhaltsordner zu Front Matter hinzufügen",
+  "dashboard.steps.stepsToGetStarted.initializeProject.name": "Projekt initialisieren",
+  "dashboard.steps.stepsToGetStarted.initializeProject.description": "Mit der Projektinitialisierung werden die erforderlichen Dateien und Ordner für die Verwendung des Front Matter CMS erstellt. Starte mit einem Klick auf diese Aktion.",
+  "dashboard.steps.stepsToGetStarted.framework.name": "Vorlagen für Frameworks",
+  "dashboard.steps.stepsToGetStarted.framework.description": "Wähle deinen Site-Generator oder dein Framework aus, um einige der empfohlenen Einstellungen vorzubelegen.",
+  "dashboard.steps.stepsToGetStarted.framework.select": "Wähle dein Framework aus",
+  "dashboard.steps.stepsToGetStarted.framework.select.other": "andere",
+  "dashboard.steps.stepsToGetStarted.contentFolders.name": "Inhaltsordner registrieren",
+  "dashboard.steps.stepsToGetStarted.contentFolders.description": "Füge einen der in deinem Projekt gefundenen Ordner als Inhaltsordner hinzu. Sobald ein Ordner festgelegt ist, kann Front Matter alle Inhalte auflisten und das Erstellen von Inhalten ermöglichen.",
+  "dashboard.steps.stepsToGetStarted.contentFolders.label": "Ordner mit Inhalten:",
+  "dashboard.steps.stepsToGetStarted.contentFolders.information.description": "Du kannst diese Aktion auch aus der Explorer-Ansicht durchführen, indem du mit der rechten Maustaste auf den Ordner klickst und 'Ordner registrieren' auswählst.",
+  "dashboard.steps.stepsToGetStarted.tags.name": "Alle Tags und Kategorien importieren (optional)",
+  "dashboard.steps.stepsToGetStarted.tags.description": "Jetzt, da Front Matter alle Inhaltsordner kennt, möchtest du alle Tags und Kategorien aus den verfügbaren Inhalten importieren?",
+  "dashboard.steps.stepsToGetStarted.showDashboard.name": "Dashboard anzeigen",
+  "dashboard.steps.stepsToGetStarted.showDashboard.description": "Sobald alle Aktionen abgeschlossen sind, kann das Dashboard geladen werden.",
+  "dashboard.taxonomyView.button.add.title": "{0} zur Taxonomie hinzufügen",
+  "dashboard.taxonomyView.button.edit.title": "{0} bearbeiten",
+  "dashboard.taxonomyView.button.merge.title": "{0} zusammenführen",
+  "dashboard.taxonomyView.button.move.title": "In eine andere Taxonomie verschieben",
+  "dashboard.taxonomyView.button.delete.title": "{0} löschen",
+  "dashboard.taxonomyView.taxonomyLookup.button.title": "Inhalte mit {0} in {1} anzeigen",
+  "dashboard.taxonomyView.taxonomyManager.description": "{0} deiner Website erstellen, bearbeiten und verwalten",
+  "dashboard.taxonomyView.taxonomyManager.button.create": "Neuen {0}-Wert erstellen",
+  "dashboard.taxonomyView.taxonomyManager.table.heading.name": "Name",
+  "dashboard.taxonomyView.taxonomyManager.table.heading.count": "Anzahl",
+  "dashboard.taxonomyView.taxonomyManager.table.heading.action": "Aktion",
+  "dashboard.taxonomyView.taxonomyManager.table.row.empty": "Keine {0} gefunden",
+  "dashboard.taxonomyView.taxonomyManager.table.unmapped.title": "In den Einstellungen nicht gefunden",
+  "dashboard.taxonomyView.taxonomyView.navigationBar.title": "Taxonomie auswählen",
+  "dashboard.taxonomyView.taxonomyView.button.import": "Taxonomie importieren",
+  "dashboard.taxonomyView.taxonomyView.navigationItem.tags": "Tags",
+  "dashboard.taxonomyView.taxonomyView.navigationItem.categories": "Kategorien",
+  "dashboard.unkownView.title": "Ansicht existiert nicht",
+  "dashboard.unkownView.description": "Du hast anscheinend eine Ansicht geöffnet, die nicht existiert. Bitte öffne das Dashboard erneut.",
+  "dashboard.welcomeScreen.title": "Verwalte deine statische Website mit Front Matter",
+  "dashboard.welcomeScreen.thanks": "Vielen Dank, dass du Front Matter verwendest!",
+  "dashboard.welcomeScreen.description": "Wir bemühen uns, Front Matter so benutzerfreundlich wie möglich zu gestalten, aber wenn du Fragen oder Vorschläge hast, zögere bitte nicht, uns auf GitHub zu kontaktieren.",
+  "dashboard.welcomeScreen.link.github.title": "GitHub",
+  "dashboard.welcomeScreen.link.github.label": "GitHub / Dokumentation",
+  "dashboard.welcomeScreen.link.sponsor.title": "Werde Sponsor",
+  "dashboard.welcomeScreen.link.sponsor.label": "Sponsor",
+  "dashboard.welcomeScreen.link.review.title": "Eine Bewertung schreiben",
+  "dashboard.welcomeScreen.link.review.label": "Bewertung schreiben",
+  "dashboard.welcomeScreen.actions.heading": "Führe die nächsten Schritte aus, um mit der Erweiterung zu beginnen",
+  "dashboard.welcomeScreen.actions.description": "Du kannst die Erweiterung auch über das Front Matter-Seitenpanel verwenden. Dort findest du die Aktionen, die speziell für deine Seiten ausgeführt werden können.",
+  "dashboard.welcomeScreen.actions.thanks": "Wir hoffen, dass du Freude an Front Matter hast!",
+  "panel.contentType.contentTypeValidator.title": "Inhaltstyp",
+  "panel.contentType.contentTypeValidator.hint": "Wir haben Unterschiede zwischen dem Inhaltstyp und den Front-Matter-Daten festgestellt. Möchtest du den Inhaltstyp für diesen Inhalt erstellen, aktualisieren oder festlegen?",
+  "panel.contentType.contentTypeValidator.button.create": "Inhaltstyp erstellen",
+  "panel.contentType.contentTypeValidator.button.add": "Fehlende Felder zum Inhaltstyp hinzufügen",
+  "panel.contentType.contentTypeValidator.button.change": "Inhaltstyp der Datei ändern",
+  "panel.dataBlock.dataBlockField.group.selected.edit": "Bearbeiten: {0}",
+  "panel.dataBlock.dataBlockField.group.selected.create": "Neuen {0} erstellen",
+  "panel.dataBlock.dataBlockField.group.select": "Gruppe auswählen",
+  "panel.dataBlock.dataBlockField.add": "{0} hinzufügen",
+  "panel.dataBlock.dataBlockRecord.edit": "Datensatz bearbeiten",
+  "panel.dataBlock.dataBlockRecord.delete": "Datensatz löschen",
+  "panel.dataBlock.dataBlockRecords.label": "Datensätze",
+  "panel.dataBlock.dataBlockSelector.label": "Blocktyp",
+  "panel.errorBoundary.fieldBoundary.label": "Fehler beim Anzeigen des Felds",
+  "panel.fields.choiceField.select": "{0} auswählen",
+  "panel.fields.choiceField.clear": "Wert löschen",
+  "panel.fields.contentTypeRelationshipField.loading": "Lade mögliche Werte...",
+  "panel.fields.dateTimeField.button.pick": "Wähle dein Datum",
+  "panel.fields.dateTimeField.time": "Uhrzeit",
+  "panel.fields.fieldMessage.required": "Das Feld {0} ist erforderlich",
+  "panel.fields.fileField.delete": "Datei löschen",
+  "panel.fields.fileField.add": "Ihre {0} hinzufügen",
+  "panel.fields.imageFallback.label": "Das Bild konnte nicht geladen werden",
+  "panel.fields.listField.edit": "Eintrag bearbeiten",
+  "panel.fields.listField.delete": "Eintrag löschen",
+  "panel.fields.previewImage.remove": "Bild entfernen",
+  "panel.fields.previewImageField.add": "Ihre {0} hinzufügen",
+  "panel.fields.slugField.update": "Aktualisierung verfügbar",
+  "panel.fields.slugField.generate": "Slug generieren",
+  "panel.fields.textField.ai.message": "Verwenden Sie Front Matter AI, um {0} vorzuschlagen",
+  "panel.fields.textField.ai.generate": "Vorschlag wird generiert...",
+  "panel.fields.textField.loading": "Feld wird geladen",
+  "panel.fields.textField.limit": "Feldgrenze erreicht {0}",
+  "panel.fields.wrapperField.unknown": "Unbekannter Feldtyp: {0}",
+  "panel.actions.title": "Aktionen",
+  "panel.articleDetails.title": "Weitere Details",
+  "panel.articleDetails.type": "Typ",
+  "panel.articleDetails.total": "Gesamt",
+  "panel.articleDetails.headings": "Überschriften",
+  "panel.articleDetails.paragraphs": "Absätze",
+  "panel.articleDetails.internalLinks": "Interne Links",
+  "panel.articleDetails.externalLinks": "Externe Links",
+  "panel.articleDetails.images": "Bilder",
+  "panel.baseView.initialize": "Projekt initialisieren",
+  "panel.baseView.actions.title": "Aktionen",
+  "panel.baseView.action.openDashboard": "Dashboard öffnen",
+  "panel.baseView.action.openPreview": "Vorschau öffnen",
+  "panel.baseView.action.createContent": "Inhalt erstellen",
+  "panel.baseView.empty": "Öffnen Sie eine Datei, um weitere Aktionen anzuzeigen",
+  "panel.fileList.label.singular": "Datei",
+  "panel.fileList.label.plural": "Dateien",
+  "panel.folderAndFiles.title": "Zuletzt geändert",
+  "panel.globalSettings.title": " Globale Einstellungen",
+  "panel.globalSettings.action.modifiedDate.label": "Änderungsdatum",
+  "panel.globalSettings.action.modifiedDate.description": "Änderungsdatum automatisch aktualisieren",
+  "panel.globalSettings.action.frontMatter.label": "Front Matter hervorheben",
+  "panel.globalSettings.action.frontMatter.description": "Front Matter hervorheben",
+  "panel.globalSettings.action.preview.label": "Lokale Vorschau",
+  "panel.globalSettings.action.preview.placeholder": "Beispiel: {0}",
+  "panel.globalSettings.action.server.label": "Lokaler Serverbefehl",
+  "panel.globalSettings.action.server.placeholder": "Beispiel: {0}",
+  "panel.metadata.title": "Metadaten",
+  "panel.otherActions.title": "Weitere Aktionen",
+  "panel.otherActions.writingSettings.enabled": "Schreib-Einstellungen aktiviert",
+  "panel.otherActions.writingSettings.disabled": "Schreib-Einstellungen aktivieren",
+  "panel.otherActions.centerMode": "Zentriermodus umschalten",
+  "panel.otherActions.createTemplate": "Vorlage erstellen",
+  "panel.otherActions.revealFile": "Datei im Ordner anzeigen",
+  "panel.otherActions.openProject": "Projektordner anzeigen",
+  "panel.otherActions.documentation": "Dokumentation öffnen",
+  "panel.otherActions.settings": "Einstellungen anzeigen",
+  "panel.otherActions.issue": "Problem melden",
+  "panel.preview.title": "Vorschau öffnen",
+  "panel.publishAction.publish": "Veröffentlichen",
+  "panel.publishAction.unpublish": "Zurück zu Entwurf",
+  "panel.seoDetails.recommended": "Empfohlen",
+  "panel.seoKeywordInfo.density": "Stichwortdichte {0} *",
+  "panel.seoKeywordInfo.validInfo.label": "Verwendet in Überschrift(en)",
+  "panel.seoKeywordInfo.validInfo.content": "Inhalt",
+  "panel.seoKeywords.title": "Stichwörter",
+  "panel.seoKeywords.header.keyword": "Stichwort",
+  "panel.seoKeywords.header.details": "Details",
+  "panel.seoKeywords.density": "* Eine Stichwortdichte von 1-1,5 % ist in den meisten Fällen ausreichend.",
+  "panel.seoStatus.title": "Empfehlungen",
+  "panel.seoStatus.header.property": "Eigenschaft",
+  "panel.seoStatus.header.length": "Länge",
+  "panel.seoStatus.header.valid": "Gültig",
+  "panel.seoStatus.seoFieldInfo.characters": "{0} Zeichen",
+  "panel.seoStatus.seoFieldInfo.words": "{0} Wörter",
+  "panel.seoStatus.seoFieldInfo.article": "Artikellänge",
+  "panel.seoStatus.collapsible.title": "SEO-Status",
+  "panel.seoStatus.required": "{0} oder {1} ist erforderlich.",
+  "panel.slugAction.title": "Slug optimieren",
+  "panel.spinner.loading": "Laden...",
+  "panel.startServerbutton.start": "Server starten",
+  "panel.startServerbutton.stop": "Server stoppen",
+  "panel.tag.add": "{0} zu Ihren Einstellungen hinzufügen",
+  "panel.tagPicker.inputPlaceholder.empty": "{0} auswählen",
+  "panel.tagPicker.inputPlaceholder.disabled": "Sie haben das Limit von {0} erreicht",
+  "panel.tagPicker.ai.suggest": "Front Matter AI verwenden, um {0} vorzuschlagen",
+  "panel.tagPicker.ai.generating": "Vorschläge werden generiert...",
+  "panel.tagPicker.limit": "Max.: {0}",
+  "panel.tagPicker.unkown": "Unbekanntes Tag hinzufügen",
+  "panel.tags.tag.warning": "Achtung, dieses Tag \"{0}\" wird nicht in Ihren Einstellungen gespeichert. Sobald es entfernt ist, wird es unwiederbringlich verloren sein.",
+  "panel.viewPanel.mediaInsert": "Fahren Sie mit dem Medien-Dashboard fort, um das Bild auszuwählen, das Sie einfügen möchten.",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.name": "Wo befindet sich Ihr Assets-Ordner?",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.description": "Wählen Sie den Ordner aus, der Ihre Assets enthält. In diesem Ordner werden alle Ihre Mediendateien für Ihre Artikel gespeichert.",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.public.title": "Verwende den 'public'-Ordner",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.assets.title": "Verwende den Astro-Assets-Ordner (src/assets)",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.other.description": "Wenn Sie einen anderen Ordner konfigurieren möchten, können Sie dies manuell in der frontmatter.json-Datei tun."
+}

l10n/bundle.l10n.ja.json

@@ -0,0 +1,336 @@
+{
+  "common.add": "追加",
+  "common.edit": "編集",
+  "common.delete": "削除",
+  "common.cancel": "キャンセル",
+  "common.clear": "クリア",
+  "common.clear.value": "値をクリア",
+  "common.search": "検索",
+  "common.save": "保存",
+  "common.menu": "メニュー",
+  "common.insert": "挿入",
+  "common.insert.snippet": "スニペットを挿入",
+  "common.title": "タイトル",
+  "common.description": "概要",
+  "common.retry": "再読み込み",
+  "common.update": "更新",
+  "common.information": "確認",
+  "common.important": "重要",
+  "common.sync": "同期",
+  "common.slug": "スラッグ",
+  "common.support": "サポート",
+  "common.remove.value": "{0}を削除",
+  "common.error.message": "申し訳ありません。エラーが発生しました。",
+  "developer.title": "開発モード",
+  "developer.reload.title": "ダッシュボードを再読み込み",
+  "developer.reload.label": "再読み込み",
+  "developer.devTools.title": "開発ツールを開く",
+  "developer.devTools.label": "開発ツール",
+  "field.required": "必須フィールド",
+  "field.unknown": "不明なフィールド",
+  "dashboard.chatbot.answer.answer": "回答",
+  "dashboard.chatbot.answer.resources": "参考",
+  "dashboard.chatbot.answer.warning": "回答が正しくない場合もあります。内容がおかしいと思われる場合には、公式ドキュメントを確認してください。",
+  "dashboard.chatbot.chatbot.loading": "アシスタントを起動中",
+  "dashboard.chatbot.chatbot.ready": "準備ができました。何について知りたいですか？",
+  "dashboard.chatbot.chatbox.placeholder": "Front Matterの設定方法は？",
+  "dashboard.chatbot.header.heading": "Front Matter AIに質問する",
+  "dashboard.chatbot.header.description": "このAIはmendable.aiをベースに公式ドキュメントがチューニングされており、Front Matter関連のクエリを理解してあなたをアシストします。何でも聞いてください！",
+  "dashboard.common.choiceButton.open": "オプションを開く",
+  "dashboard.contents.contentActions.actionMenuButton.title": "メニュー",
+  "dashboard.contents.contentActions.menuItem.view": "開く",
+  "dashboard.contents.contentActions.alert.title": "削除: {0}",
+  "dashboard.contents.contentActions.alert.description": "本当に\"{0}\"を削除しますか？",
+  "dashboard.contents.item.invalidTitle": "<無効なタイトル>",
+  "dashboard.contents.item.invalidDescription": "<無効なディスクリプション>",
+  "dashboard.contents.list.title": "タイトル",
+  "dashboard.contents.list.date": "日付",
+  "dashboard.contents.list.status": "ステータス",
+  "dashboard.contents.overview.noMarkdown": "Markdownファイルはありません",
+  "dashboard.contents.overview.noFolders": "プロジェクト内の記事用フォルダーを登録して、Front Matterが記事を見つけられるようにしてください。",
+  "dashboard.contents.status.draft": "下書き",
+  "dashboard.contents.status.published": "公開済み",
+  "dashboard.dataView.dataForm.modify": "エントリーを編集",
+  "dashboard.dataView.dataForm.add": "エントリーを作成",
+  "dashboard.dataView.dataView.select": "データタイプを選択",
+  "dashboard.dataView.dataView.title": "\"{0}\"のエントリー",
+  "dashboard.dataView.dataView.add": "新規エントリーを追加",
+  "dashboard.dataView.dataView.empty": "\"{0}\"データにはエントリーがありません",
+  "dashboard.dataView.dataView.createOrModify": "\"{0}\"のエントリーを作成、または編集する",
+  "dashboard.dataView.dataView.getStarted": "データタイプを選択して開始する",
+  "dashboard.dataView.dataView.noDataFiles": "データファイルが見つかりませんでした",
+  "dashboard.dataView.dataView.getStarted.link": "データファイルの利用方法について確認する",
+  "dashboard.dataView.emptyView.heading": "最初にデータタイプを選んでください",
+  "dashboard.dataView.sortableItem.editButton.title": "\"{0}\"を編集する",
+  "dashboard.dataView.sortableItem.deleteButton.title": "\"{0}\"を削除する",
+  "dashboard.dataView.sortableItem.alert.title": "データアイテムを削除",
+  "dashboard.dataView.sortableItem.alert.description": "本当にこのデータアイテムを削除しますか？",
+  "dashboard.errorView.description": "ダッシュボードを一旦閉じてからやり直してください。",
+  "dashboard.header.breadcrumb.home": "ホーム",
+  "dashboard.header.clearFilters.title": "フィルター・グループ・並べ替えを解除",
+  "dashboard.header.filter.default": "なし",
+  "dashboard.header.folders.default": "全ての記事タイプ",
+  "dashboard.header.folders.menuButton.showing": "表示",
+  "dashboard.header.grouping.option.none": "なし",
+  "dashboard.header.grouping.option.year": "公開年",
+  "dashboard.header.grouping.option.draft": "下書き/公開済み",
+  "dashboard.header.grouping.menuButton.label": "グループ",
+  "dashboard.header.navigation.allArticles": "全ての記事",
+  "dashboard.header.navigation.published": "公開済み",
+  "dashboard.header.navigation.draft": "下書き",
+  "dashboard.header.header.createContent": "新しい記事を作成",
+  "dashboard.header.header.createByContentType": "記事タイプから作成",
+  "dashboard.header.header.createByTemplate": "テンプレートから作成",
+  "dashboard.header.pagination.first": "最初",
+  "dashboard.header.pagination.previous": "前へ",
+  "dashboard.header.pagination.next": "次へ",
+  "dashboard.header.pagination.last": "最後",
+  "dashboard.header.paginationStatus.text": "{0}～{1}件目（全{2}件中）を表示中",
+  "dashboard.header.projectSwitcher.label": "プロジェクト",
+  "dashboard.header.refreshDashboard.label": "ダッシュボードを再読み込み",
+  "dashboard.header.sorting.lastModified.asc": "最終更新日（昇順）",
+  "dashboard.header.sorting.lastModified.desc": "最終更新日（降順）",
+  "dashboard.header.sorting.filename.asc": "ファイル名（昇順）",
+  "dashboard.header.sorting.filename.desc": "ファイル名（降順）",
+  "dashboard.header.sorting.published.asc": "公開日（昇順）",
+  "dashboard.header.sorting.published.desc": "公開日（降順）",
+  "dashboard.header.sorting.size.asc": "サイズ（昇順）",
+  "dashboard.header.sorting.size.desc": "サイズ（降順）",
+  "dashboard.header.sorting.caption.asc": "キャプション（昇順）",
+  "dashboard.header.sorting.caption.desc": "キャプション（降順）",
+  "dashboard.header.sorting.alt.asc": "代替テキスト（昇順）",
+  "dashboard.header.sorting.alt.desc": "代替テキスト（降順）",
+  "dashboard.header.sorting.label": "並べ替え",
+  "dashboard.header.startup.label": "起動時に表示",
+  "dashboard.header.tabs.contents": "記事",
+  "dashboard.header.tabs.media": "メディア",
+  "dashboard.header.tabs.snippets": "スニペット",
+  "dashboard.header.tabs.data": "データ",
+  "dashboard.header.tabs.taxonomies": "タクソノミー",
+  "dashboard.header.viewSwitch.toGrid": "グリッド表示",
+  "dashboard.header.viewSwitch.toList": "リスト表示",
+  "dashboard.layout.sponsor.support.msg": "Front Matterをサポートする",
+  "dashboard.layout.sponsor.review.label": "評価する",
+  "dashboard.layout.sponsor.review.msg": "Front Matterを評価する",
+  "dashboard.media.common.title": "タイトル",
+  "dashboard.media.common.caption": "キャプション",
+  "dashboard.media.common.alt": "代替テキスト",
+  "dashboard.media.common.size": "サイズ",
+  "dashboard.media.dialog.title": "ファイルの詳細",
+  "dashboard.media.panel.close": "パネルを閉じる",
+  "dashboard.media.metadata.panel.title": "メタデータを編集",
+  "dashboard.media.metadata.panel.description": "ファイルにメタデータを設定してください。",
+  "dashboard.media.metadata.panel.field.fileName": "ファイル名",
+  "dashboard.media.metadata.panel.form.metadata.title": "メタデータ",
+  "dashboard.media.metadata.panel.form.information.title": "詳細",
+  "dashboard.media.metadata.panel.form.information.createdDate": "作成日",
+  "dashboard.media.metadata.panel.form.information.modifiedDate": "最終更新日",
+  "dashboard.media.metadata.panel.form.information.dimensions": "ディメンション",
+  "dashboard.media.metadata.panel.form.information.folder": "フォルダー",
+  "dashboard.media.folderCreation.hexo.create": "Assetフォルダーを作成",
+  "dashboard.media.folderCreation.folder.create": "新規フォルダーを作成",
+  "dashboard.media.item.quickAction.insert.field": "この画像を\"{0}\"フィールドに追加",
+  "dashboard.media.item.quickAction.insert.markdown": "画像をMarkdown記法で挿入",
+  "dashboard.media.item.quickAction.copy.path": "ファイルパスをコピー",
+  "dashboard.media.item.quickAction.delete": "ファイルを削除",
+  "dashboard.media.item.menuItem.edit.metadata": "メタデータを編集",
+  "dashboard.media.item.menuItem.insert.image": "画像を挿入",
+  "dashboard.media.item.menuItem.reveal.media": "メディアの場所を表示",
+  "dashboard.media.item.infoDialog.snippet.description": "このメディアに適用するメディア用スニペットを選択してください。",
+  "dashboard.media.item.alert.delete.description": "本当にこのファイルを {0} から削除しますか？",
+  "dashboard.media.media.description": "記事に挿入するメディアファイルを選択してください。",
+  "dashboard.media.media.dragAndDrop": "デスクトップから画像をドラッグ＆ドロップして、アップロード後に選択することもできます。",
+  "dashboard.media.media.folder.upload": "{0}にアップロードする",
+  "dashboard.media.media.folder.default": "フォルダーが選択されていません。ここにドロップされた画像は、{0}へ追加されます。",
+  "dashboard.media.media.placeholder": "メディアファイルはありません。Shiftキーを押しながら、新規ファイルをドラック＆ドロップで追加することができます。",
+  "dashboard.media.media.contentFolder": "記事フォルダー",
+  "dashboard.media.media.publicFolder": "Publicフォルダー",
+  "dashboard.media.mediaHeaderTop.searchbox.placeholder": "フォルダー内を検索",
+  "dashboard.media.mediaSnippetForm.formDialog.title": "メディアを挿入: {0}",
+  "dashboard.media.mediaSnippetForm.formDialog.description": "メディアファイル\"{0}\"を現在の記事に挿入する",
+  "dashboard.preview.input.placeholder": "URLを入力",
+  "dashboard.preview.button.navigate.title": "ナビゲーション",
+  "dashboard.preview.button.refresh.title": "更新",
+  "dashboard.preview.button.open.title": "開く",
+  "dashboard.snippetsView.item.quickAction.editSnippet": "スニペットを編集",
+  "dashboard.snippetsView.item.quickAction.deleteSnippet": "スニペットを削除",
+  "dashboard.snippetsView.item.quickAction.viewSnippet": "スニペットファイルの表示",
+  "dashboard.snippetsView.item.insert.formDialog.title": "\"{0}\"スニペットの追加",
+  "dashboard.snippetsView.item.insert.formDialog.description": "\"{0}\"スニペットを現在の記事に追加します",
+  "dashboard.snippetsView.item.edit.formDialog.title": "\"{0}\"スニペットの編集",
+  "dashboard.snippetsView.item.edit.formDialog.description": "\"{0}\"スニペットの編集",
+  "dashboard.snippetsView.item.alert.title": "\"{0}\"スニペットを削除",
+  "dashboard.snippetsView.item.alert.description": "本当に\"{0}\"スニペットを削除しますか？",
+  "dashboard.snippetsView.newForm.snippetInput.title.placeholder": "スニペットのタイトル",
+  "dashboard.snippetsView.newForm.snippetInput.description.label": "概要",
+  "dashboard.snippetsView.newForm.snippetInput.description.placeholder": "スニペットの概要",
+  "dashboard.snippetsView.newForm.snippetInput.snippet.label": "スニペット",
+  "dashboard.snippetsView.newForm.snippetInput.snippet.placeholder": "スニペットのコード",
+  "dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.label": "メディア用スニペットですか？",
+  "dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.checkbox.label": "メディア用スニペット",
+  "dashboard.snippetsView.newForm.snippetInput.isMediaSnippet.checkbox.description": "このスニペットをメディアファイル挿入時に利用",
+  "dashboard.snippetsView.newForm.snippetInput.docsButton.title": "メディア用スニペットのプレースホルダーについて読む",
+  "dashboard.snippetsView.newForm.snippetInput.docsButton.description": "スニペットに設定可能なプレースホルダーをドキュメントで確認",
+  "dashboard.snippetsView.snippets.ariaLabel": "スニペット ヘッダー",
+  "dashboard.snippetsView.snippets.button.create": "新規スニペットを作成",
+  "dashboard.snippetsView.snippets.select.description": "挿入するスニペットを選択してください。",
+  "dashboard.snippetsView.snippets.empty.message": "スニペットはありません",
+  "dashboard.snippetsView.snippets.readMore": "スニペットの使い方を読む",
+  "dashboard.snippetsView.snippets.formDialog.title": "新規スニペットを作成",
+  "dashboard.steps.stepsToGetStarted.button.addFolder.title": "Front Matterに記事フォルダーとして登録",
+  "dashboard.steps.stepsToGetStarted.initializeProject.name": "プロジェクトの初期設定",
+  "dashboard.steps.stepsToGetStarted.initializeProject.description": "Front Matter CMSに必要な設定ファイルを作成します。クリックして開始してください。",
+  "dashboard.steps.stepsToGetStarted.framework.name": "フレームワークを設定",
+  "dashboard.steps.stepsToGetStarted.framework.description": "静的サイトジェネレーターまたはフレームワークを選択して、必要なセッティングを追加します。",
+  "dashboard.steps.stepsToGetStarted.framework.select": "フレームワークを選択",
+  "dashboard.steps.stepsToGetStarted.framework.select.other": "その他",
+  "dashboard.steps.stepsToGetStarted.contentFolders.name": "記事ファイルのフォルダーを登録",
+  "dashboard.steps.stepsToGetStarted.contentFolders.description": "記事ファイルの保存フォルダーを追加してください。フォルダーが設定されると、フォルダー内の記事ファイルがFront Matterでリスト化され、新規記事ファイルを追加できるようになります。",
+  "dashboard.steps.stepsToGetStarted.contentFolders.label": "記事ファイルを含むフォルダー",
+  "dashboard.steps.stepsToGetStarted.contentFolders.information.description": "フォルダーの登録は、エクスプローラーでフォルダー名を右クリックして「フォルダーを登録」を選択することでも可能です。",
+  "dashboard.steps.stepsToGetStarted.tags.name": "全てのタグとカテゴリーをインポート（オプション）",
+  "dashboard.steps.stepsToGetStarted.tags.description": "Front Matterに記事用フォルダーが登録されました。記事から全てのタグとカテゴリーをインポートしますか？",
+  "dashboard.steps.stepsToGetStarted.showDashboard.name": "ダッシュボードを開く",
+  "dashboard.steps.stepsToGetStarted.showDashboard.description": "全ての設定が終わると、ダッシュボードが表示できるようになります。",
+  "dashboard.taxonomyView.button.add.title": "\"{0}\"をタクソノミーに追加",
+  "dashboard.taxonomyView.button.edit.title": "\"{0}\"を編集",
+  "dashboard.taxonomyView.button.merge.title": "\"{0}\"をマージ",
+  "dashboard.taxonomyView.button.move.title": "他のタクソノミーへ移行",
+  "dashboard.taxonomyView.button.delete.title": "\"{0}\"を削除",
+  "dashboard.taxonomyView.taxonomyLookup.button.title": "{1}\"{0}\"の記事一覧を表示",
+  "dashboard.taxonomyView.taxonomyManager.description": "サイト内{0}の新規作成・編集・コマンド",
+  "dashboard.taxonomyView.taxonomyManager.button.create": "新規{0}を作成",
+  "dashboard.taxonomyView.taxonomyManager.table.heading.name": "名前",
+  "dashboard.taxonomyView.taxonomyManager.table.heading.count": "投稿数",
+  "dashboard.taxonomyView.taxonomyManager.table.heading.action": "コマンド",
+  "dashboard.taxonomyView.taxonomyManager.table.row.empty": "{0}はありません",
+  "dashboard.taxonomyView.taxonomyManager.table.unmapped.title": "設定ファイルに見つかりません",
+  "dashboard.taxonomyView.taxonomyView.navigationBar.title": "タクソノミーを選択",
+  "dashboard.taxonomyView.taxonomyView.button.import": "タクソノミーをインポート",
+  "dashboard.taxonomyView.taxonomyView.navigationItem.tags": "タグ",
+  "dashboard.taxonomyView.taxonomyView.navigationItem.categories": "カテゴリー",
+  "dashboard.unkownView.title": "表示出来る画面がありません",
+  "dashboard.unkownView.description": "存在しない画面で終了してしまったようです。ダッシュボードを再度開きなおしてください。",
+  "dashboard.welcomeScreen.title": "Front Matterで静的サイトを管理しよう",
+  "dashboard.welcomeScreen.thanks": "Front Matterをお使いいただきありがとうございます！",
+  "dashboard.welcomeScreen.description": "私たちはFront Matterをより使いやすくするため、日々努力しています。ご質問やご提案など、GitHubまでお気軽にお問い合わせください。",
+  "dashboard.welcomeScreen.link.github.title": "GitHub",
+  "dashboard.welcomeScreen.link.github.label": "GitHub / ドキュメント",
+  "dashboard.welcomeScreen.link.sponsor.title": "スポンサーになる",
+  "dashboard.welcomeScreen.link.sponsor.label": "スポンサー",
+  "dashboard.welcomeScreen.link.review.title": "評価する",
+  "dashboard.welcomeScreen.link.review.label": "評価する",
+  "dashboard.welcomeScreen.actions.heading": "以下の手順に従って、この拡張機能をスタートさせてください。",
+  "dashboard.welcomeScreen.actions.description": "サイドパネルからもFront Matterを利用できます。サイドパネルでは、各コンテンツに合った具体的なコマンドが実行可能です。",
+  "dashboard.welcomeScreen.actions.thanks": "Front Matterをお楽しみください！",
+  "panel.contentType.contentTypeValidator.title": "記事タイプ",
+  "panel.contentType.contentTypeValidator.hint": "記事タイプのフィールドは設定と異なります。この記事の記事タイプを、作成・更新または設定しますか？",
+  "panel.contentType.contentTypeValidator.button.create": "新しい記事タイプを作成",
+  "panel.contentType.contentTypeValidator.button.add": "この記事タイプの設定にないフィールドを追加",
+  "panel.contentType.contentTypeValidator.button.change": "このファイルの記事タイプを変更",
+  "panel.dataBlock.dataBlockField.group.selected.edit": "編集: {0}",
+  "panel.dataBlock.dataBlockField.group.selected.create": "新規{0}を作成",
+  "panel.dataBlock.dataBlockField.group.select": "グループを選択",
+  "panel.dataBlock.dataBlockField.add": "{0}を追加",
+  "panel.dataBlock.dataBlockRecord.edit": "レコードを編集",
+  "panel.dataBlock.dataBlockRecord.delete": "レコードを削除",
+  "panel.dataBlock.dataBlockRecords.label": "レコード",
+  "panel.dataBlock.dataBlockSelector.label": "ブロックタイプ",
+  "panel.errorBoundary.fieldBoundary.label": "フィールドの表示に失敗しました",
+  "panel.fields.choiceField.select": "{0}を選択",
+  "panel.fields.choiceField.clear": "値をクリア",
+  "panel.fields.contentTypeRelationshipField.loading": "読み込み中...",
+  "panel.fields.dateTimeField.button.pick": "日付を選択",
+  "panel.fields.dateTimeField.time": "時刻",
+  "panel.fields.fieldMessage.required": "{0}は必須フィールドです",
+  "panel.fields.fileField.delete": "ファイルを削除",
+  "panel.fields.fileField.add": "{0}を追加",
+  "panel.fields.imageFallback.label": "画像を読み込めませんでした。",
+  "panel.fields.listField.edit": "レコードを編集",
+  "panel.fields.listField.delete": "レコードを削除",
+  "panel.fields.previewImage.remove": "画像を削除",
+  "panel.fields.previewImageField.add": "{0}を追加",
+  "panel.fields.slugField.update": "更新が可能",
+  "panel.fields.slugField.generate": "スラッグを生成",
+  "panel.fields.textField.ai.message": "Front Matter AIに{0}を提案してもらう",
+  "panel.fields.textField.ai.generate": "提案を生成中...",
+  "panel.fields.textField.loading": "読み込み中",
+  "panel.fields.textField.limit": "値が上限を超えています。{0}",
+  "panel.fields.wrapperField.unknown": "不明なフィールド: {0}",
+  "panel.actions.title": "コマンド",
+  "panel.articleDetails.title": "詳細",
+  "panel.articleDetails.type": "項目",
+  "panel.articleDetails.total": "数",
+  "panel.articleDetails.headings": "見出し",
+  "panel.articleDetails.paragraphs": "パラグラフ",
+  "panel.articleDetails.internalLinks": "内部リンク",
+  "panel.articleDetails.externalLinks": "外部リンク",
+  "panel.articleDetails.images": "画像",
+  "panel.baseView.initialize": "プロジェクトの初期設定",
+  "panel.baseView.actions.title": "コマンド",
+  "panel.baseView.action.openDashboard": "ダッシュボードを開く",
+  "panel.baseView.action.openPreview": "プレビューを開く",
+  "panel.baseView.action.createContent": "新しい記事を作成",
+  "panel.baseView.empty": "他の操作を見るには、ファイルを開いてください。",
+  "panel.fileList.label.singular": "ファイル",
+  "panel.fileList.label.plural": "ファイル",
+  "panel.folderAndFiles.title": "最近の更新",
+  "panel.globalSettings.title": "一般設定",
+  "panel.globalSettings.action.modifiedDate.label": "最終更新日",
+  "panel.globalSettings.action.modifiedDate.description": "最終更新日を自動で更新",
+  "panel.globalSettings.action.frontMatter.label": "Front Matterのハイライト",
+  "panel.globalSettings.action.frontMatter.description": "Front Matterをハイライトする",
+  "panel.globalSettings.action.preview.label": "ローカルプレビュー",
+  "panel.globalSettings.action.preview.placeholder": "例: {0}",
+  "panel.globalSettings.action.server.label": "ローカルサーバーのコマンド",
+  "panel.globalSettings.action.server.placeholder": "例: {0}",
+  "panel.metadata.title": "メタデータ",
+  "panel.otherActions.title": "他のコマンド",
+  "panel.otherActions.writingSettings.enabled": "ライティング設定が有効",
+  "panel.otherActions.writingSettings.disabled": "ライティング設定を有効化",
+  "panel.otherActions.centerMode": "センターモードの切り替え",
+  "panel.otherActions.createTemplate": "テンプレートを作成",
+  "panel.otherActions.revealFile": "ファイルをフォルダーで表示",
+  "panel.otherActions.openProject": "プロジェクトフォルダーを表示",
+  "panel.otherActions.documentation": "ドキュメントを開く",
+  "panel.otherActions.settings": "設定方法の概要",
+  "panel.otherActions.issue": "問題を報告",
+  "panel.preview.title": "プレビューを表示",
+  "panel.publishAction.publish": "公開",
+  "panel.publishAction.unpublish": "下書きに戻す",
+  "panel.seoDetails.recommended": "🚧: Recommended",
+  "panel.seoKeywordInfo.density": "キーワード出現率 {0} *",
+  "panel.seoKeywordInfo.validInfo.label": "見出しへの利用",
+  "panel.seoKeywordInfo.validInfo.content": "本文",
+  "panel.seoKeywords.title": "キーワード",
+  "panel.seoKeywords.header.keyword": "キーワード",
+  "panel.seoKeywords.header.details": "詳細",
+  "panel.seoKeywords.density": "* キーワード出現率は通常1~1.5%で十分です。",
+  "panel.seoStatus.title": "推奨項目",
+  "panel.seoStatus.header.property": "項目",
+  "panel.seoStatus.header.length": "長さ",
+  "panel.seoStatus.header.valid": "有効",
+  "panel.seoStatus.seoFieldInfo.characters": "{0} 文字",
+  "panel.seoStatus.seoFieldInfo.words": "{0} 語",
+  "panel.seoStatus.seoFieldInfo.article": "記事の長さ",
+  "panel.seoStatus.collapsible.title": "SEO対策",
+  "panel.seoStatus.required": "{0}か{1}は必須です。",
+  "panel.slugAction.title": "スラッグを最適化",
+  "panel.spinner.loading": "読み込み中...",
+  "panel.startServerbutton.start": "サーバーを起動",
+  "panel.startServerbutton.stop": "サーバーを停止",
+  "panel.tag.add": "\"{0}\"を設定に追加",
+  "panel.tagPicker.inputPlaceholder.empty": "{0}を選択",
+  "panel.tagPicker.inputPlaceholder.disabled": "{0}の上限数に達しました",
+  "panel.tagPicker.ai.suggest": "Front Matter AIに{0}を提案してもらう",
+  "panel.tagPicker.ai.generating": "提案を生成中...",
+  "panel.tagPicker.limit": "上限数: {0}",
+  "panel.tagPicker.unkown": "不明なタグを追加",
+  "panel.tags.tag.warning": "\"{0}\"は設定に保存されていません。削除すると復元できませんのでご注意ください。",
+  "panel.viewPanel.mediaInsert": "ダッシュボードのメディア管理画面から、利用したい画像を選択してください。",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.name": "アセットフォルダーの場所はどこですか？",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.description": "記事のメディアファイルを保存するためのフォルダーを選択してください。",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.public.title": "'public'フォルダーを使用する",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.assets.title": "Astroアセットフォルダー(src/assets)を使用する",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.other.description": "別のフォルダを設定する場合は、frontmatter.jsonファイルで手動で行うことができます。"
+}

l10n/bundle.l10n.json

@@ -0,0 +1,426 @@
+{
+  "common.add": "Add",
+  "common.edit": "Edit",
+  "common.delete": "Delete",
+  "common.cancel": "Cancel",
+  "common.clear": "Clear",
+  "common.clear.value": "Clear value",
+  "common.search": "Search",
+  "common.save": "Save",
+  "common.menu": "Menu",
+  "common.insert": "Insert",
+  "common.insert.snippet": "Insert snippet",
+  "common.title": "Title",
+  "common.description": "Description",
+  "common.retry": "Retry",
+  "common.update": "Update",
+  "common.information": "Info",
+  "common.important": "Important",
+  "common.sync": "Sync",
+  "common.slug": "Slug",
+  "common.support": "Support",
+  "common.remove.value": "Remove {0}",
+  "common.error.message": "Sorry, something went wrong.",
+
+  "developer.title": "Developer mode",
+  "developer.reload.title": "Reload the dashboard",
+  "developer.reload.label": "Reload",
+  "developer.devTools.title": "Open the DevTools",
+  "developer.devTools.label": "DevTools",
+
+  "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.navigation.allArticles": "All articles",
+  "dashboard.header.navigation.published": "Published",
+  "dashboard.header.navigation.draft": "In draft",
+
+  "dashboard.header.header.createContent": "Create content",
+  "dashboard.header.header.createByContentType": "Create by content type",
+  "dashboard.header.header.createByTemplate": "Create by template",
+
+  "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.tabs.contents": "Contents",
+  "dashboard.header.tabs.media": "Media",
+  "dashboard.header.tabs.snippets": "Snippets",
+  "dashboard.header.tabs.data": "data",
+  "dashboard.header.tabs.taxonomies": "Taxonomies",
+
+  "dashboard.header.viewSwitch.toGrid": "Change to grid",
+  "dashboard.header.viewSwitch.toList": "Change to list",
+
+  "dashboard.layout.sponsor.support.msg": "Support Front Matter",
+  "dashboard.layout.sponsor.review.label": "Review",
+  "dashboard.layout.sponsor.review.msg": "Review Front Matter",
+
+  "dashboard.media.common.title": "Title",
+  "dashboard.media.common.caption": "Caption",
+  "dashboard.media.common.alt": "Alternate text",
+  "dashboard.media.common.size": "Size",
+
+  "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.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.hexo.create": "Create post asset folder",
+  "dashboard.media.folderCreation.folder.create": "Create new folder",
+
+  "dashboard.media.item.quickAction.insert.field": "Insert image for your \"{0}\" field",
+  "dashboard.media.item.quickAction.insert.markdown": "Insert image with markdown markup",
+  "dashboard.media.item.quickAction.copy.path": "Copy media path",
+  "dashboard.media.item.quickAction.delete": "Delete media file",
+  "dashboard.media.item.menuItem.edit.metadata": "Edit metadata",
+  "dashboard.media.item.menuItem.insert.image": "Insert image",
+  "dashboard.media.item.menuItem.reveal.media": "Reveal media",
+  "dashboard.media.item.infoDialog.snippet.description": "Select the media snippet to use for the current media file.",
+  "dashboard.media.item.alert.delete.description": "Are you sure you want to delete the file from the {0} folder?",
+
+  "dashboard.media.media.description": "Select the media file to add to your content.",
+  "dashboard.media.media.dragAndDrop": "You can also drag and drop images from your desktop and select them once uploaded.",
+  "dashboard.media.media.folder.upload": "Upload to {0}",
+  "dashboard.media.media.folder.default": "No folder selected, files you drop will be added to the {0} folder",
+  "dashboard.media.media.placeholder": "No media files to show. You can drag &amp; drop new files by holding your [shift] key.",
+  "dashboard.media.media.contentFolder": "Content folder",
+  "dashboard.media.media.publicFolder": "Public folder",
+
+  "dashboard.media.mediaHeaderTop.searchbox.placeholder": "Search in folder",
+
+  "dashboard.media.mediaSnippetForm.formDialog.title": "Insert media: {0}",
+  "dashboard.media.mediaSnippetForm.formDialog.description": "Insert the {0} media file into the current article",
+
+  "dashboard.preview.input.placeholder": "Enter a URL",
+  "dashboard.preview.button.navigate.title": "Navigate",
+  "dashboard.preview.button.refresh.title": "Refresh",
+  "dashboard.preview.button.open.title": "Open",
+
+  "dashboard.snippetsView.item.quickAction.editSnippet": "Edit snippet",
+  "dashboard.snippetsView.item.quickAction.deleteSnippet": "Delete snippet",
+  "dashboard.snippetsView.item.quickAction.viewSnippet": "View snippet file",
+  "dashboard.snippetsView.item.insert.formDialog.title": "Insert snippet: {0}",
+  "dashboard.snippetsView.item.insert.formDialog.description": "Insert the {0} snippet into the current article",
+  "dashboard.snippetsView.item.edit.formDialog.title": "Edit snippet: {0}",
+  "dashboard.snippetsView.item.edit.formDialog.description": "Edit the {0} snippet",
+  "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.assetsFolder.name": "What is your assets folder?",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.description": "Select the folder containing your assets. This folder will be used to store all your media files for your articles.",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.public.title": "Use the 'public' folder",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.assets.title": "Use the Astro assets folder (src/assets)",
+  "dashboard.steps.stepsToGetStarted.assetsFolder.other.description": "In case you want to configure another folder, you can do this manually in the frontmatter.json file.",
+  "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}",
+
+  "dashboard.taxonomyView.taxonomyManager.description": "Create, edit, and manage the {0} of your site",
+  "dashboard.taxonomyView.taxonomyManager.button.create": "Create a new {0} value",
+  "dashboard.taxonomyView.taxonomyManager.table.heading.name": "Name",
+  "dashboard.taxonomyView.taxonomyManager.table.heading.count": "Count",
+  "dashboard.taxonomyView.taxonomyManager.table.heading.action": "Action",
+  "dashboard.taxonomyView.taxonomyManager.table.row.empty": "No {0} found",
+  "dashboard.taxonomyView.taxonomyManager.table.unmapped.title": "Missing in your settings",
+
+  "dashboard.taxonomyView.taxonomyView.navigationBar.title": "Select the taxonomy",
+  "dashboard.taxonomyView.taxonomyView.button.import": "Import taxonomy",
+  "dashboard.taxonomyView.taxonomyView.navigationItem.tags": "Tags",
+  "dashboard.taxonomyView.taxonomyView.navigationItem.categories": "Categories",
+
+  "dashboard.unkownView.title": "View does not exist",
+  "dashboard.unkownView.description": "You seem to have ended up on a view that doesn't exist. Please re-open the dashboard.",
+
+  "dashboard.welcomeScreen.title": "Manage your static site with Front Matter",
+  "dashboard.welcomeScreen.thanks": "Thank you for using Front Matter!",
+  "dashboard.welcomeScreen.description": "We try to aim to make Front Matter as easy to use as possible, but if you have any questions or suggestions. Please don't hesitate to reach out to us on GitHub.",
+  "dashboard.welcomeScreen.link.github.title": "GitHub",
+  "dashboard.welcomeScreen.link.github.label": "GitHub / Documentation",
+  "dashboard.welcomeScreen.link.sponsor.title": "Become a sponsor",
+  "dashboard.welcomeScreen.link.sponsor.label": "Sponsor",
+  "dashboard.welcomeScreen.link.review.title": "Write a review",
+  "dashboard.welcomeScreen.link.review.label": "Review",
+  "dashboard.welcomeScreen.actions.heading": "Perform the next steps to get you started with the extension",
+  "dashboard.welcomeScreen.actions.description": "You can also use the extension from the Front Matter side panel. There you will find the actions you can perform specifically for your pages.",
+  "dashboard.welcomeScreen.actions.thanks": "We hope you enjoy Front Matter!",
+
+  "panel.contentType.contentTypeValidator.title": "Content-type",
+  "panel.contentType.contentTypeValidator.hint": "We noticed field differences between the content-type and the front matter data. \n Would you like to create, update, or set the content-type for this content?",
+  "panel.contentType.contentTypeValidator.button.create": "Create content-type",
+  "panel.contentType.contentTypeValidator.button.add": "Add missing fields to content-type",
+  "panel.contentType.contentTypeValidator.button.change": "Change content-type of the file",
+
+  "panel.dataBlock.dataBlockField.group.selected.edit": "Editing: {0}",
+  "panel.dataBlock.dataBlockField.group.selected.create": "Create a new {0}",
+  "panel.dataBlock.dataBlockField.group.select": "Select a group",
+  "panel.dataBlock.dataBlockField.add": "Add {0}",
+
+  "panel.dataBlock.dataBlockRecord.edit": "Edit record",
+  "panel.dataBlock.dataBlockRecord.delete": "Delete record",
+
+  "panel.dataBlock.dataBlockRecords.label": "Records",
+
+  "panel.dataBlock.dataBlockSelector.label": "Block type",
+
+  "panel.errorBoundary.fieldBoundary.label": "Failed viewing the field",
+
+  "panel.fields.choiceField.select": "Select {0}",
+  "panel.fields.choiceField.clear": "Clear value",
+
+  "panel.fields.contentTypeRelationshipField.loading": "Fetching possible values...",
+
+  "panel.fields.dateTimeField.button.pick": "Pick your date",
+  "panel.fields.dateTimeField.time": "Time:",
+
+  "panel.fields.fieldMessage.required": "The {0} field is required",
+
+  "panel.fields.fileField.delete": "Delete file",
+  "panel.fields.fileField.add": "Add your {0}",
+
+  "panel.fields.imageFallback.label": "The image coundn't be loaded",
+
+  "panel.fields.listField.edit": "Edit record",
+  "panel.fields.listField.delete": "Delete record",
+
+  "panel.fields.previewImage.remove": "Remove image",
+
+  "panel.fields.previewImageField.add": "Add your {0}",
+
+  "panel.fields.slugField.update": "Update available",
+  "panel.fields.slugField.generate": "Generate slug",
+
+  "panel.fields.textField.ai.message": "Use Front Matter AI to suggest {0}",
+  "panel.fields.textField.ai.generate": "Generating suggestion...",
+  "panel.fields.textField.loading": "Loading field",
+  "panel.fields.textField.limit": "Field limit reached {0}",
+
+  "panel.fields.wrapperField.unknown": "Unkown field type: {0}",
+
+  "panel.actions.title": "Actions",
+
+  "panel.articleDetails.title": "More details",
+  "panel.articleDetails.type": "Type",
+  "panel.articleDetails.total": "Total",
+  "panel.articleDetails.headings": "Headings",
+  "panel.articleDetails.paragraphs": "Paragraphs",
+  "panel.articleDetails.internalLinks": "Internal links",
+  "panel.articleDetails.externalLinks": "External links",
+  "panel.articleDetails.images": "Images",
+
+  "panel.baseView.initialize": "Initialize project",
+  "panel.baseView.actions.title": "Actions",
+  "panel.baseView.action.openDashboard": "Open dashboard",
+  "panel.baseView.action.openPreview": "Open preview",
+  "panel.baseView.action.createContent": "Create content",
+  "panel.baseView.empty": "Open a file to see more actions",
+
+  "panel.fileList.label.singular": "file",
+  "panel.fileList.label.plural": "files",
+
+  "panel.folderAndFiles.title": "Recently modified",
+
+  "panel.globalSettings.title": "Global settings",
+  "panel.globalSettings.action.modifiedDate.label": "Modified date",
+  "panel.globalSettings.action.modifiedDate.description": "Auto-update modified date",
+  "panel.globalSettings.action.frontMatter.label": "Front Matter highlight",
+  "panel.globalSettings.action.frontMatter.description": "Highlight Front Matter",
+  "panel.globalSettings.action.preview.label": "Local preview",
+  "panel.globalSettings.action.preview.placeholder": "Example: {0}",
+  "panel.globalSettings.action.server.label": "Local server command",
+  "panel.globalSettings.action.server.placeholder": "Example: {0}",
+
+  "panel.metadata.title": "Metadata",
+
+  "panel.otherActions.title": "Other actions",
+  "panel.otherActions.writingSettings.enabled": "Writing settings enabled",
+  "panel.otherActions.writingSettings.disabled": "Enable writing settings",
+  "panel.otherActions.centerMode": "Toggle center mode",
+  "panel.otherActions.createTemplate": "Create template",
+  "panel.otherActions.revealFile": "Reveal file in folder",
+  "panel.otherActions.openProject": "Reveal project folder",
+  "panel.otherActions.documentation": "Open documentation",
+  "panel.otherActions.settings": "Settings overview",
+  "panel.otherActions.issue": "Report an issue",
+
+  "panel.preview.title": "Open preview",
+
+  "panel.publishAction.publish": "Publish",
+  "panel.publishAction.unpublish": "Revert to draft",
+
+  "panel.seoDetails.recommended": "Recommended",
+
+  "panel.seoKeywordInfo.density": "Keyword usage {0} *",
+  "panel.seoKeywordInfo.validInfo.label": "Used in heading(s)",
+  "panel.seoKeywordInfo.validInfo.content": "Content",
+
+  "panel.seoKeywords.title": "Keywords",
+  "panel.seoKeywords.header.keyword": "Keyword",
+  "panel.seoKeywords.header.details": "Details",
+  "panel.seoKeywords.density": "* A keyword density of 1-1.5% is sufficient in most cases.",
+
+  "panel.seoStatus.title": "Recommendations",
+  "panel.seoStatus.header.property": "Property",
+  "panel.seoStatus.header.length": "Length",
+  "panel.seoStatus.header.valid": "Valid",
+  "panel.seoStatus.seoFieldInfo.characters": "{0} chars",
+  "panel.seoStatus.seoFieldInfo.words": "{0} words",
+  "panel.seoStatus.seoFieldInfo.article": "Article length",
+  "panel.seoStatus.collapsible.title": "SEO Status",
+  "panel.seoStatus.required": "{0} or {1} is required.",
+
+  "panel.slugAction.title": "Optimize slug",
+
+  "panel.spinner.loading": "Loading...",
+
+  "panel.startServerbutton.start": "Start server",
+  "panel.startServerbutton.stop": "Stop server",
+
+  "panel.tag.add": "Add {0} to your settings",
+
+  "panel.tagPicker.inputPlaceholder.empty": "Pick your {0}",
+  "panel.tagPicker.inputPlaceholder.disabled": "You have reached the limit of {0}",
+  "panel.tagPicker.ai.suggest": "Use Front Matter AI to suggest {0}",
+  "panel.tagPicker.ai.generating": "Generating suggestions...",
+  "panel.tagPicker.limit": "Max.: {0}",
+  "panel.tagPicker.unkown": "Add the unknown tag",
+
+  "panel.tags.tag.warning": "Be aware, this tag \"{0}\" is not saved in your settings. Once removed, it will be gone forever.",
+
+  "panel.viewPanel.mediaInsert": "Continue in the media dashboard to select the image you want to insert."
+}

package.nls.de.json

@@ -0,0 +1,243 @@
+{
+  "command.frontMatter.project.switch": "Projekt wechseln",
+  "command.frontMatter.config.reload": "Konfiguration neu laden",
+  "command.frontMatter.authenticate": "Authentifizieren",
+  "command.frontMatter.contenttype.generate": "Content-Typ aus aktueller Datei generieren",
+  "command.frontMatter.contenttype.addMissingFields": "Fehlende Felder aus Front Matter zum Content-Typ hinzufügen",
+  "command.frontMatter.contenttype.setContentType": "Content-Typ für aktuelle Datei festlegen",
+  "command.frontMatter.markup.blockquote": "Blockzitat",
+  "command.frontMatter.markup.bold": "Fett",
+  "command.frontMatter.dashboard.close": "Dashboard schließen",
+  "command.frontMatter.markup.code": "Code",
+  "command.frontMatter.markup.codeblock": "Codeblock",
+  "command.frontMatter.markup.hyperlink": "Hyperlink",
+  "command.frontMatter.collapseSections": "Abschnitte ausblenden",
+  "command.frontMatter.initTemplate": "Template-Ordner initialisieren",
+  "command.frontMatter.createTemplate": "Template aus aktueller Datei erstellen",
+  "command.frontMatter.createCategory": "Kategorie erstellen",
+  "command.frontMatter.createContent": "Neuen Inhalt aus definiertem Content-Typ oder Template erstellen",
+  "command.frontMatter.createTag": "Tag erstellen",
+  "command.frontMatter.diagnostics": "Diagnoseprotokollierung",
+  "command.frontMatter.exportTaxonomy": "Alle Tags und Kategorien in Ihre Einstellungen exportieren",
+  "command.frontMatter.createFromTemplate": "Neuer Artikel aus Template",
+  "command.frontMatter.registerFolder": "Ordner registrieren",
+  "command.frontMatter.unregisterFolder": "Ordner deregistrieren",
+  "command.frontMatter.generateSlug": "Slug basierend auf Titel generieren",
+  "command.frontMatter.markup.heading": "Überschrift",
+  "command.frontMatter.init": "Projekt initialisieren",
+  "command.frontMatter.insertCategories": "Kategorien einfügen",
+  "command.frontMatter.insertMedia": "Medien in Ihren Inhalt einfügen",
+  "command.frontMatter.insertSnippet": "Snippet in Ihren Inhalt einfügen",
+  "command.frontMatter.insertTags": "Tags einfügen",
+  "command.frontMatter.markup.italic": "Kursiv",
+  "command.frontMatter.dashboard": "Dashboard öffnen",
+  "command.frontMatter.dashboard.data": "Daten-Dashboard öffnen",
+  "command.frontMatter.dashboard.media": "Medien-Dashboard öffnen",
+  "command.frontMatter.dashboard.snippets": "Snippets-Dashboard öffnen",
+  "command.frontMatter.dashboard.taxonomy": "Taxonomie-Dashboard öffnen",
+  "command.frontMatter.markup.orderedlist": "Geordnete Liste",
+  "command.frontMatter.markup.options": "Weitere Markup-Optionen",
+  "command.frontMatter.preview": "Inhalt anzeigen",
+  "command.frontMatter.chatbot": "Fragen Sie den Front Matter AI um Hilfe",
+  "command.frontMatter.promoteSettings": "Einstellungen von lokal auf Team-Ebene übertragen",
+  "command.frontMatter.remap": "Tag/Kategorie in allen Artikeln neu zuordnen oder entfernen",
+  "command.frontMatter.setLastModifiedDate": "Letztes Änderungsdatum festlegen",
+  "command.frontMatter.markup.strikethrough": "Durchgestrichen",
+  "command.frontMatter.mode.switch": "Modus wechseln",
+  "command.frontMatter.markup.tasklist": "Aufgabenliste",
+  "command.frontMatter.markup.unorderedlist": "Ungeordnete Liste",
+  "command.frontMatter.git.sync": "Synchronisieren",
+  "command.frontMatter.cache.clear": "Cache löschen",
+  "settings.configuration.title": "Front Matter: Verwendung von frontmatter.json für gemeinsame Team-Einstellungen",
+  "setting.frontMatter.projects.markdownDescription": "Geben Sie die Liste der Projekte an, die in Front Matter CMS geladen werden sollen. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.projects)",
+  "setting.frontMatter.projects.items.properties.name.markdownDescription": "Geben Sie den Namen des Projekts an.",
+  "setting.frontMatter.projects.items.properties.default.markdownDescription": "Geben Sie an, ob dieses Projekt das Standardprojekt zum Laden ist.",
+  "setting.frontMatter.sponsors.ai.enabled.markdownDescription": "Geben Sie an, ob Sie KI-Vorschläge aktivieren möchten. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.sponsors.ai.enabled)",
+  "setting.frontMatter.extensibility.scripts.markdownDescription": "Geben Sie die Liste der Skripte an, die in Front Matter CMS geladen werden sollen. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.extensibility.scripts)",
+  "setting.frontMatter.experimental.markdownDescription": "Geben Sie an, ob Sie experimentelle Funktionen aktivieren möchten. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.experimental)",
+  "setting.frontMatter.extends.markdownDescription": "Geben Sie die Liste der Pfade/URLs an, um die Front Matter CMS-Konfiguration zu erweitern. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.extends)",
+  "setting.frontMatter.content.autoUpdateDate.markdownDescription": "Geben Sie an, ob Sie das Änderungsdatum Ihres Artikels/seite automatisch aktualisieren möchten (nur für Inhalte im Inhaltsordner). [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.autoupdatedate)",
+  "setting.frontMatter.content.defaultFileType.markdownDescription": "Geben Sie den Standarddateityp für den zu erstellenden Inhalt an. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.defaultfiletype)",
+  "setting.frontMatter.content.defaultSorting.markdownDescription": "Geben Sie die Standard-Sortierungsoption für das Inhaltsdashboard an. Sie können einen der Werte aus dem Enum verwenden oder Ihre eigene ID definieren. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.defaultsorting)",
+  "setting.frontMatter.content.draftField.markdownDescription": "Definieren Sie das Entwurfsfeld, das Sie zum Verwalten Ihres Inhalts verwenden möchten. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.draftfield)",
+  "setting.frontMatter.content.draftField.properties.type.description": "Typ des Entwurfsfelds, das Sie verwenden möchten",
+  "setting.frontMatter.content.draftField.properties.name.description": "Name des zu verwendenden Felds",
+  "setting.frontMatter.content.draftField.properties.invert.description": "Standardmäßig ist das Entwurfsfeld auf 'true' gesetzt, wenn der Inhalt ein Entwurf ist. Setzen Sie dies auf 'true', um es auf 'false' zu setzen.",
+  "setting.frontMatter.content.draftField.properties.choices.description": "Liste der Auswahlmöglichkeiten für das Feld",
+  "setting.frontMatter.content.fmHighlight.markdownDescription": "Geben Sie an, ob Sie das Front Matter in der Markdown-Datei hervorheben möchten. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.fmhighlight)",
+  "setting.frontMatter.content.hideFm.markdownDescription": "Geben Sie an, ob Sie das Front Matter in der Markdown-Datei ausblenden möchten. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.hidefm)",
+  "setting.frontMatter.content.hideFmMessage.markdownDescription": "Geben Sie die Meldung an, die angezeigt werden soll, wenn das Front Matter ausgeblendet ist. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.hidefmMessage)",
+  "setting.frontMatter.content.pageFolders.markdownDescription": "Dieses Array von Ordnern definiert, wo die Erweiterung Seiten abrufen oder erstellen kann. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.pagefolders)",
+  "setting.frontMatter.content.pageFolders.items.properties.title.description": "Name des Ordners",
+  "setting.frontMatter.content.pageFolders.items.properties.path.description": "Pfad des Ordners",
+  "setting.frontMatter.content.pageFolders.items.properties.excludeSubdir.description": "Unterordner ausschließen",
+  "setting.frontMatter.content.pageFolders.items.properties.previewPath.description": "Definiert einen benutzerdefinierten Vorschau-Pfad für den Ordner.",
+  "setting.frontMatter.content.pageFolders.items.properties.filePrefix.description": "Definiert ein Präfix für den Dateinamen.",
+  "setting.frontMatter.content.pageFolders.items.properties.contentTypes.description": "Definiert, welche Inhaltstypen für den aktuellen Speicherort verwendet werden können. Wenn nicht definiert, stehen alle Inhaltstypen zur Verfügung.",
+  "setting.frontMatter.content.placeholders.markdownDescription": "Dieses Array von Platzhaltern definiert die Platzhalter, die Sie in Ihren Inhaltstypen und Vorlagen verwenden können, um das Front Matter Ihres Inhalts automatisch zu befüllen. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.placeholders)",
+  "setting.frontMatter.content.placeholders.items.properties.id.description": "ID des Platzhalters, den Sie in Ihrem Inhaltstyp oder Ihrer Vorlage wie folgt verwenden: {{placeholder}}",
+  "setting.frontMatter.content.placeholders.items.properties.value.description": "Der Wert des Platzhalters",
+  "setting.frontMatter.content.placeholders.items.properties.script.description": "Das Skript, das ausgeführt wird, um den Wert des Platzhalters zu erhalten",
+  "setting.frontMatter.content.publicFolder.markdownDescription": "Geben Sie den Ordnernamen an, in dem sich alle Ihre Ressourcen befinden. Beispielsweise ist dies im Falle von Hugo der Ordner `static`. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.publicfolder)",
+  "setting.frontMatter.content.publicFolder.properties.path.description": "Geben Sie den Pfad des Assets-Ordners an.",
+  "setting.frontMatter.content.publicFolder.properties.relative.description": "Definiert, ob der Pfad zu Ihren Medien-Dateien relativ zur Inhaltsdatei sein soll.",
+  "setting.frontMatter.snippets.wrapper.enabled.markdownDescription": "Geben Sie an, ob Sie die Snippets umschließen möchten. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontMatter.snippets.wrapper.enabled)",
+  "setting.frontMatter.content.snippets.markdownDescription": "Definieren Sie die Snippets, die Sie in Ihrem Inhalt verwenden möchten. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.snippets)",
+  "setting.frontMatter.content.sorting.markdownDescription": "Definieren Sie die Sortieroptionen für Ihren Dashboard-Inhalt. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.sorting)",
+  "setting.frontMatter.content.sorting.items.properties.id.description": "Die ID der Sortierungsoption. Diese wird für das Speichern der zuletzt verwendeten Sortierungsoption oder der Standardoption verwendet.",
+  "setting.frontMatter.content.sorting.items.properties.title.description": "Name der Sortierbezeichnung",
+  "setting.frontMatter.content.sorting.items.properties.name.description": "Name des Metadatenfelds, nach dem sortiert werden soll",
+  "setting.frontMatter.content.sorting.items.properties.order.description": "Sortierreihenfolge",
+  "setting.frontMatter.content.sorting.items.properties.type.description": "Typ des Feldwerts",
+  "setting.frontMatter.content.supportedFileTypes.markdownDescription": "Geben Sie die Dateitypen an, die Sie in Front Matter verwenden möchten. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.supportedfiletypes)",
+  "setting.frontMatter.content.wysiwyg.markdownDescription": "Gibt an, ob Sie die Markdown-Steuerelemente für What You See, Is What You Get (WYSIWYG) aktivieren/deaktivieren möchten. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.content.wysiwyg)",
+  "setting.frontMatter.custom.scripts.markdownDescription": "Geben Sie den Pfad zu einem Node.js-Skript an, das ausgeführt werden soll. Der aktuelle Dateipfad wird als Argument bereitgestellt. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.custom.scripts)",
+  "setting.frontMatter.custom.scripts.items.properties.id.description": "ID des Skripts.",
+  "setting.frontMatter.custom.scripts.items.properties.title.description": "Titel, den Sie Ihrem Skript geben möchten. Wird als Titel der Schaltfläche angezeigt.",
+  "setting.frontMatter.custom.scripts.items.properties.script.description": "Pfad zum auszuführenden Skript",
+  "setting.frontMatter.custom.scripts.items.properties.nodeBin.description": "Pfad zum Node-Ausführbaren. Dies ist erforderlich, wenn NVM verwendet wird, um Verwirrung über die zu verwendende Node-Version zu vermeiden. (veraltet: stattdessen die Eigenschaft 'command' verwenden)",
+  "setting.frontMatter.custom.scripts.items.properties.bulk.description": "Das Skript für alle Inhaltsdateien ausführen",
+  "setting.frontMatter.custom.scripts.items.properties.output.description": "Definieren Sie, wo Sie Ihre Skriptausgabe anzeigen möchten. Standardmäßig handelt es sich um eine Benachrichtigung, aber Sie können angeben, dass sie in einem Editorfenster angezeigt wird.",
+  "setting.frontMatter.custom.scripts.items.properties.outputType.description": "Der Ausgabetyp für das Editorfenster. Kann beispielsweise auf 'markdown' geändert werden",
+  "setting.frontMatter.custom.scripts.items.properties.type.description": "Der Typ, für den das Skript verwendet wird.",
+  "setting.frontMatter.custom.scripts.items.properties.command.description": "Der Typ des auszuführenden Skripts.",
+  "setting.frontMatter.custom.scripts.items.properties.hidden.description": "Die Aktion in der Benutzeroberfläche ausblenden",
+  "setting.frontMatter.custom.scripts.items.properties.environments.items.properties.type.description": "Der Umgebungstyp, für den das Skript verwendet werden soll",
+  "setting.frontMatter.custom.scripts.items.properties.environments.items.properties.script.description": "Pfad zum auszuführenden Skript",
+  "setting.frontMatter.dashboard.content.pagination.markdownDescription": "Geben Sie an, ob Sie die Seitennummerierung für Ihren Inhalt aktivieren/deaktivieren möchten. Sie können Ihre Seitenzahl bis zu 52 definieren. Die Standardanzahl von Elementen pro Seite beträgt `16`. Die Deaktivierung der Seitennummerierung erfolgt durch Festlegung auf `false`. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.content.pagination)",
+  "setting.frontMatter.dashboard.content.cardTags.markdownDescription": "Geben Sie den Namen des Metadatenfelds an, das verwendet wird, um die Tags auf der Inhaltskarte anzuzeigen. Wenn leer oder null, werden die Tags auf der Karte ausgeblendet. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.content.cardtags)",
+  "setting.frontMatter.dashboard.content.card.fields.state.markdownDescription": "Geben Sie an, ob der Zustand/der Entwurfsstatus in der Ansicht der Inhaltskarte angezeigt werden soll. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.state)",
+  "setting.frontMatter.dashboard.content.card.fields.date.markdownDescription": "Geben Sie an, ob das Datum in der Ansicht der Inhaltskarte angezeigt werden soll. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.date)",
+  "setting.frontMatter.dashboard.content.card.fields.description.markdownDescription": "Geben Sie den Namen des Metadatenfelds an, das verwendet wird, um die Beschreibung auf der Inhaltskarte anzuzeigen. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.description)",
+  "setting.frontMatter.dashboard.content.card.fields.title.markdownDescription": "Geben Sie den Namen des Metadatenfelds an, das verwendet wird, um den Titel auf der Inhaltskarte anzuzeigen. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.title)",
+  "setting.frontMatter.dashboard.mediaSnippet.markdownDescription": "Geben Sie das Snippet für Ihre benutzerdefinierte Medieneinfügemarkierung an. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.mediasnippet)",
+  "setting.frontMatter.dashboard.mediaSnippet.items.description": "Verwenden Sie die Platzhalter `{mediaUrl}`, `{caption}`, `{alt}`, `{filename}`, `{mediaHeight}` und `{mediaWidth}` in Ihrem Snippet, um automatisch die Mediainformationen einzufügen.",
+  "setting.frontMatter.dashboard.openOnStart.markdownDescription": "Geben Sie an, ob das Dashboard beim Start von VS Code geöffnet werden soll.  [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.openonstart)",
+  "setting.frontMatter.data.files.markdownDescription": "Geben Sie die Datendateien an, die Sie für Ihre Website verwenden möchten. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.data.files)",
+  "setting.frontMatter.data.files.items.properties.id.description": "Ihre eindeutige ID, die Sie für Ihre Datendatei verwenden möchten.",
+  "setting.frontMatter.data.files.items.properties.title.description": "Titel, den Sie Ihrer Datendatei geben möchten.",
+  "setting.frontMatter.data.files.items.properties.labelField.description": "Das Feld, das Sie als Bezeichnung für Ihre Dateneinträge verwenden möchten.",
+  "setting.frontMatter.data.files.items.properties.file.description": "Pfad zur zu ladenden Datei. Es werden nur JSON- oder YAML-Dateien unterstützt.",
+  "setting.frontMatter.data.files.items.properties.fileType.description": "Definiert, wie die Datei geparst werden soll. JSON ist der Standard.",
+  "setting.frontMatter.data.files.items.properties.schema.description": "Das JSON-Schema für Ihre Daten, das zur Darstellung des Datenformulars verwendet wird.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.title.description": "Titel des Formulars.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.type.description": "Definiert den Typ des Formulars. Standardmäßig 'object'.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.required.description": "Definiert die erforderlichen Felder für das Formular.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.properties.description": "Definiert die Felder des Formulars.",
+  "setting.frontMatter.data.files.items.properties.type.description": "Wenn Sie Datentypen verwenden, können Sie Ihre Typ-ID angeben.",
+  "setting.frontMatter.data.files.items.properties.singleEntry.description": "Wenn Sie eine einzelne Eingabe für Ihre Datendatei verwenden möchten.",
+  "setting.frontMatter.data.folders.markdownDescription": "Geben Sie die Datenspeicherorte an, die Sie für Ihre Website verwenden möchten. [Dokumentation prüfen](https://frontmatter.codes/docs/settings/overview#frontmatter.data.folders)",
+  "setting.frontMatter.data.folders.items.properties.id.description": "Ihre eindeutige ID, die Sie für Ihren Datenordner verwenden möchten.",
+  "setting.frontMatter.data.folders.items.properties.labelField.description": "Das Feld, das Sie als Bezeichnung für Ihre Dateneinträge verwenden möchten.",
+  "setting.frontMatter.data.folders.items.properties.path.description": "Pfad zum Ordner, um Dateien zu laden.",
+  "setting.frontMatter.data.folders.items.properties.type.description": "Wenn Sie Datentypen verwenden, können Sie Ihre Typ-ID angeben.",
+  "setting.frontMatter.data.folders.items.properties.singleEntry.description": "Wenn Sie für Ihre Daten Dateien im Ordner nur einen Eintrag verwenden möchten.",
+  "setting.frontMatter.data.types.markdownDescription": "Definieren Sie die Datentypen. Diese Typen können in Ihren Datendateien verwendet werden. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.data.types)",
+  "setting.frontMatter.data.types.items.properties.id.description": "Ihre eindeutige ID, die Sie für Ihren Datentyp verwenden möchten.",
+  "setting.frontMatter.file.preserveCasing.markdownDescription": "Gibt an, ob die Groß- und Kleinschreibung der Dateinamen aus dem Titel beibehalten werden soll. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.file.preservecasing)",
+  "setting.frontMatter.framework.id.markdownDescription": "Gibt die ID Ihres statischen Site-Generators oder Frameworks an, das Sie für Ihre Website verwenden. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.framework.id)",
+  "setting.frontMatter.framework.startCommand.markdownDescription": "Gibt den Befehl an, den Sie zum Starten Ihres statischen Site-Generators oder Frameworks verwenden möchten. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.framework.startcommand)",
+  "setting.frontMatter.git.enabled.markdownDescription": "Gibt an, ob Sie die Git-Funktionen für Ihre Website verwenden möchten. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.git.enabled)",
+  "setting.frontMatter.git.commitMessage.markdownDescription": "Gibt die Commit-Nachricht an, die Sie für die Synchronisierung verwenden möchten. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.git.commitmessage)",
+  "setting.frontMatter.git.submodule.pull.markdownDescription": "Gibt an, ob Sie beim Synchronisieren Submodule aktualisieren möchten. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.pull)",
+  "setting.frontMatter.git.submodule.push.markdownDescription": "Gibt an, ob Sie beim Synchronisieren Submodule pushen möchten. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.push)",
+  "setting.frontMatter.git.submodule.branch.markdownDescription": "Gibt den Branch des Submoduls an, der ausgecheckt werden soll. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.branch)",
+  "setting.frontMatter.git.submodule.folder.markdownDescription": "Gibt den Submodulordner Ihrer Inhalte an. Dies kann nützlich sein, wenn Sie mehrere Submodule verwenden. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.folder)",
+  "setting.frontMatter.global.activeMode.markdownDescription": "Gibt den aktivierten Modus für Front Matter an. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.global.activemode)",
+  "setting.frontMatter.global.modes.markdownDescription": "Definieren Sie die Modi, die Sie für Front Matter verwenden möchten. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.global.modes)",
+  "setting.frontMatter.global.modes.items.properties.id.description": "Die ID Ihres Modus.",
+  "setting.frontMatter.global.modes.items.properties.features.description": "Die Funktionen, die Sie für Ihren Modus verwenden möchten.",
+  "setting.frontMatter.global.notifications.markdownDescription": "Legt fest, welche Benachrichtigungen angezeigt werden sollen. Standardmäßig werden alle Benachrichtigungstypen angezeigt. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.global.notifications)",
+  "setting.frontMatter.global.disabledNotifications.markdownDescription": "Dies ist ein Array mit den Benachrichtigungstypen, die für Front Matter CMS deaktiviert werden können. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.global.disablednotifications)",
+  "setting.frontMatter.media.defaultSorting.markdownDescription": "Gibt die Standard-Sortieroption für das Medien-Dashboard an. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.media.defaultsorting)",
+  "setting.frontMatter.media.supportedMimeTypes.markdownDescription": "Gibt die MIME-Typen an, die für die Mediadateien unterstützt werden sollen. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.media.supportedmimetypes)",
+  "setting.frontMatter.panel.freeform.markdownDescription": "Gibt an, ob Sie sich selbst das Eingeben unbekannter Tags/Kategorien im Tag-Picker ermöglichen möchten (wenn aktiviert, haben Sie anschließend die Möglichkeit, sie zu speichern). Standard: true. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.freeform)",
+  "setting.frontMatter.preview.host.markdownDescription": "Gibt die Host-URL (Beispiel: http://localhost:1313) an, die beim Öffnen der Vorschau verwendet werden soll. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.preview.host)",
+  "setting.frontMatter.preview.pathName.markdownDescription": "Gibt den Pfad an, den Sie nach dem Host und vor Ihrem Slug hinzufügen möchten. Dies kann zum Beispiel verwendet werden, um das Jahr/Monat wie z. B. `yyyy/MM` einzuschließen. Das Datum wird basierend auf dem Wert des Datumsfelds des Artikels generiert. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.preview.pathname)",
+  "setting.frontMatter.site.baseURL.markdownDescription": "Gibt die Basis-URL Ihrer Website an, die für SEO-Überprüfungen verwendet wird. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.site.baseurl)",
+  "setting.frontMatter.taxonomy.alignFilename.markdownDescription": "Richtet den Dateinamen mit dem neuen Slug aus, wenn dieser generiert wird. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.alignfilename)",
+  "setting.frontMatter.taxonomy.categories.markdownDescription": "Gibt die Kategorien an, die in der Front Matter verwendet werden können. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.categories)",
+  "setting.frontMatter.taxonomy.commaSeparatedFields.markdownDescription": "Gibt die Feldnamen an, die von Front Matter als kommaseparierte Arrays behandelt werden sollen. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.commaseparatedfields)",
+  "setting.frontMatter.taxonomy.commaSeparatedFields.items.description": "Name der Felder, die Sie als kommaseparierte Arrays verwenden möchten.",
+  "setting.frontMatter.taxonomy.contentTypes.markdownDescription": "Gibt den Typ der Inhalte an, die Sie für Ihre Artikel/Seiten/etc. verwenden möchten. Stellen Sie sicher, dass der `type` in Ihrer Front Matter korrekt gesetzt ist. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.contenttypes)",
+  "setting.frontMatter.taxonomy.contentTypes.items.description": "Definieren Sie die Content-Typen, die Sie in Front Matter verwenden möchten.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.name.description": "Definiert den Typ des Feldes",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fileType.description": "Gibt den Typ des Inhalts an, den Sie erstellen möchten.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.description": "Definiert die Felder des Content-Typs",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.description": "Definieren Sie die Content-Typen, die Sie in Front Matter verwenden möchten.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.type.description": "Definiert den Typ des Feldes",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.name.description": "Name des zu verwendenden Feldes",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.title.description": "Titel, der in der Benutzeroberfläche angezeigt werden soll",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.description.description": "Beschreibung, die in der Benutzeroberfläche angezeigt werden soll",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.default.description": "Standardwert",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.choices.description": "Definieren Sie Ihre Auswahlmöglichkeiten",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.choices.items.properties.id.description": "Die Auswahl-ID",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.choices.items.properties.title.description": "Der Auswahl-Titel",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.single.description": "Ist ein Einzelzeilenfeld",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.wysiwyg.description": "Ist ein WYSIWYG-Feld (HTML-Ausgabe)",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.multiple.description": "Erlauben Sie die Auswahl mehrerer Werte?",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPreviewImage.description": "Gibt an, ob das Bildfeld als Vorschau verwendet werden kann. Beachten Sie, dass pro Content-Typ nur ein Vorschau-Bild möglich ist.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.hidden.description": "Möchten Sie das Feld im Metadaten-Bereich verbergen?",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyId.description": "Die ID Ihres Taxonomiefeldes. Es darf nicht den Wert \"tags\" oder \"categories\" enthalten.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fileExtensions.description": "Gibt die Dateierweiterungen an, die für den Dateipicker zugelassen sind",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fieldGroup.description": "Die ID(s) Ihrer Feldgruppe(n), die in der Einstellung `frontMatter.taxonomy.fieldGroups` definiert sind",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataType.description": "Die ID(s) Ihrer Datentyp(en), die in der Einstellung `frontMatter.data.types` definiert sind",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.description": "Gibt die Optionen für das Zahlenfeld an",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.isDecimal.description": "Gibt an, ob die Zahl eine Dezimalzahl ist",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.min.description": "Der Mindestwert",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.max.description": "Der Maximalwert",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.step.description": "Der Schrittwert",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyLimit.description": "Begrenzen Sie die Anzahl der auszuwählenden Taxonomien. Setzen Sie den Wert auf 0, um unbegrenzt zuzulassen.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPublishDate.description": "Gibt an, ob das Feld das Feld für das Veröffentlichungsdatum ist",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isModifiedDate.description": "Gibt an, ob das Feld das Feld für das Änderungsdatum ist",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileId.description": "Gibt die ID der Datendatei an, die für dieses Feld verwendet werden soll",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileKey.description": "Gibt den Schlüssel der Datendatei an, die für dieses Feld verwendet werden soll",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileValue.description": "Gibt den Eigenschaftsnamen an, der verwendet wird, um den Wert für das Feld anzuzeigen",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.editable.description": "Gibt an, ob das Feld bearbeitbar ist",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.encodeEmoji.description": "Gibt an, ob das Feld Emojis kodieren soll",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dateFormat.description": "Gibt das Datumsformat an, das verwendet werden soll.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.required.description": "Gibt an, ob das Feld erforderlich ist.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeName.description": "Gibt den Namen des Content-Typs an, um Inhalte für das contentRelationship-Feld zu filtern.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeValue.description": "Gibt den Wert an, der für das contentRelationship-Feld eingefügt werden soll.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.description": "Gibt die Bedingungen an, unter denen das Feld angezeigt werden soll.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.fieldRef.description": "Die Feld-ID, die verwendet werden soll.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.operator.description": "Der Operator, der verwendet werden soll.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.value.description": "Der Wert, mit dem verglichen werden soll.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.caseSensitive.description": "Gibt an, ob der Vergleich eine Groß-/Kleinschreibung beachtet. Standard: true.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.pageBundle.description": "Gibt an, ob beim Erstellen neuer Inhalte ein Ordner erstellt werden soll.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.previewPath.description": "Definiert einen benutzerdefinierten Vorschau-Pfad für den Content-Typ.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.template.description": "Eine optionale Vorlage, die zum Erstellen neuer Inhalte verwendet werden kann.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.postScript.description": "Ein optionaler Post-Skript, der nach der Erstellung neuer Inhalte verwendet werden kann.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.filePrefix.description": "Definiert ein Präfix für den Dateinamen.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.defaultFileName.description": "Standard-Dateiname, der beim Erstellen neuer Inhalte verwendet werden soll.",
+  "setting.frontMatter.taxonomy.customTaxonomy.markdownDescription": "Gibt die Daten für das benutzerdefinierte Taxonomiefeld an. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.tags)",
+  "setting.frontMatter.taxonomy.customTaxonomy.items.properties.id.description": "ID für Ihr Taxonomiefeld. Es darf nicht den Wert \"tags\" oder \"categories\" enthalten.",
+  "setting.frontMatter.taxonomy.customTaxonomy.items.properties.options.description": "Optionen, aus denen Sie auswählen können.",
+  "setting.frontMatter.taxonomy.dateField.markdownDescription": "Diese Einstellung wird verwendet, um das Veröffentlichungsdatum-Feld Ihrer Artikel zu definieren. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.datefield)",
+  "setting.frontMatter.taxonomy.dateFormat.markdownDescription": "Gibt das Datumsformat für Ihre Artikel an. Weitere Informationen finden Sie unter [date-fns formatierung](https://date-fns.org/v2.0.1/docs/format). [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.dateformat)",
+  "setting.frontMatter.taxonomy.fieldGroups.markdownDescription": "Definiert die Feldgruppen, die Sie für Ihre Blockfelder verwenden möchten. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.fieldgroups)",
+  "setting.frontMatter.taxonomy.fieldGroups.items.properties.id.description": "Der Name der Feldgruppe",
+  "setting.frontMatter.taxonomy.fieldGroups.items.properties.labelField.description": "Der Name des Feldes, das als Anzeigewert verwendet werden soll",
+  "setting.frontMatter.taxonomy.frontMatterType.markdownDescription": "Gibt den Typ von Front Matter an, der verwendet werden soll. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.frontmattertype)",
+  "setting.frontMatter.taxonomy.indentArrays.markdownDescription": "Gibt an, ob Arrays in der Front Matter eingerückt werden sollen. Standard: true. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.indentarrays)",
+  "setting.frontMatter.taxonomy.modifiedField.markdownDescription": "Diese Einstellung wird verwendet, um das Änderungsdatum-Feld Ihrer Artikel zu definieren. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.modifiedfield)",
+  "setting.frontMatter.taxonomy.noPropertyValueQuotes.markdownDescription": "Gibt die Eigenschaften an, bei denen Anführungszeichen entfernt werden sollen. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.nopropertyvaluequotes)",
+  "setting.frontMatter.taxonomy.noPropertyValueQuotes.items.description": "Name der Eigenschaften, von denen Sie Anführungszeichen entfernen möchten.",
+  "setting.frontMatter.taxonomy.seoContentLengh.markdownDescription": "Gibt die optimale Mindestlänge für Ihre Artikel an. Zwischen 1.760 Wörtern – 2.400 ist die absolut ideale Artikelänge für SEO im Jahr 2021. (auf `-1` setzen, um es auszuschalten). [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seocontentlengh)",
+  "setting.frontMatter.taxonomy.seoDescriptionField.markdownDescription": "Gibt den Namen des SEO-Beschreibungsfeldes für Ihre Seite an. Standard ist 'description'. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seodescriptionfield)",
+  "setting.frontMatter.taxonomy.seoDescriptionLength.markdownDescription": "Gibt die optimale Beschreibungslänge für SEO an (auf `-1` setzen, um es auszuschalten). [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seodescriptionlength)",
+  "setting.frontMatter.taxonomy.seoSlugLength.markdownDescription": "Gibt die optimale Schlagwortlänge für SEO an (auf `-1` setzen, um es auszuschalten). [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seosluglength)",
+  "setting.frontMatter.taxonomy.seoTitleField.markdownDescription": "Gibt den Namen des SEO-Titelfelds für Ihre Seite an. Standard ist 'title'. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seotitlefield)",
+  "setting.frontMatter.taxonomy.seoTitleLength.markdownDescription": "Gibt die optimale Titellänge für SEO an (auf `-1` setzen, um es auszuschalten). [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seotitlelength)",
+  "setting.frontMatter.taxonomy.slugPrefix.markdownDescription": "Gibt ein Präfix für den Schlagwort an. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.slugprefix)",
+  "setting.frontMatter.taxonomy.slugSuffix.markdownDescription": "Gibt ein Suffix für den Schlagwort an. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.slugsuffix)",
+  "setting.frontMatter.taxonomy.tags.markdownDescription": "Gibt die Schlagwörter an, die in der Front Matter verwendet werden können. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.tags)",
+  "setting.frontMatter.telemetry.disable.markdownDescription": "Gibt an, ob die Telemetrie deaktiviert werden soll. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.telemetry.disable)",
+  "setting.frontMatter.templates.enabled.markdownDescription": "Gibt an, ob Vorlagen verwendet werden sollen. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.enabled)",
+  "setting.frontMatter.templates.folder.markdownDescription": "Gibt den Ordner an, der für Ihre Artikelvorlagen verwendet werden soll. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.folder)",
+  "setting.frontMatter.templates.prefix.markdownDescription": "Gibt das Präfix an, das Sie für die Dateinamen Ihrer neuen Artikel hinzufügen möchten. [Weitere Informationen in der Dokumentation](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.prefix)",
+  "setting.frontMatter.dashboard.mediaSnippet.deprecationMessage": "Diese Einstellung ist veraltet und wird in der nächsten Hauptversion entfernt. Bitte definieren Sie Ihr Medien-Snippet in der `frontMatter.content.snippet` Einstellung.",
+  "setting.frontMatter.taxonomy.dateField.deprecationMessage": "Diese Einstellung ist veraltet und wird in der nächsten Hauptversion entfernt. Bitte verwenden Sie stattdessen die neuen `isPublishDate`-Einstellungen in den Datumsfeldern Ihrer Content-Typen.",
+  "setting.frontMatter.taxonomy.modifiedField.deprecationMessage": "Diese Einstellung ist veraltet und wird in der nächsten Hauptversion entfernt. Bitte verwenden Sie stattdessen die neuen `isModifiedDate`-Einstellungen in den Datumsfeldern Ihrer Content-Typen.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.customType.description": "🚧: Specify the name of the custom field type to use."
+}

package.nls.ja.json

@@ -0,0 +1,244 @@
+{
+  "command.frontMatter.project.switch": "プロジェクトの切り替え",
+  "command.frontMatter.config.reload": "構成を再読み込み",
+  "command.frontMatter.authenticate": "認証",
+  "command.frontMatter.contenttype.generate": "表示中のファイルをもとに記事タイプを作成",
+  "command.frontMatter.contenttype.addMissingFields": "この記事タイプの設定にないフィールドをfront matterから追加",
+  "command.frontMatter.contenttype.setContentType": "表示中のファイルに記事タイプを設定",
+  "command.frontMatter.markup.blockquote": "引用",
+  "command.frontMatter.markup.bold": "太字",
+  "command.frontMatter.dashboard.close": "ダッシュボードを閉じる",
+  "command.frontMatter.markup.code": "コード",
+  "command.frontMatter.markup.codeblock": "コードブロック",
+  "command.frontMatter.markup.hyperlink": "ハイパーリンク",
+  "command.frontMatter.collapseSections": "メニューを折りたたむ",
+  "command.frontMatter.initTemplate": "テンプレートフォルダーを初期化",
+  "command.frontMatter.createTemplate": "現在のファイルからテンプレートを作成",
+  "command.frontMatter.createCategory": "新規カテゴリーを追加",
+  "command.frontMatter.createContent": "記事タイプまたはテンプレートから新しい記事を作成",
+  "command.frontMatter.createTag": "新規タグを作成",
+  "command.frontMatter.diagnostics": "診断ログ",
+  "command.frontMatter.exportTaxonomy": "全てのタグとカテゴリーを設定にエクスポート",
+  "command.frontMatter.createFromTemplate": "新しい記事をテンプレートから作成",
+  "command.frontMatter.registerFolder": "フォルダーを登録",
+  "command.frontMatter.unregisterFolder": "フォルダーの登録を解除",
+  "command.frontMatter.generateSlug": "記事タイトルからスラッグを生成",
+  "command.frontMatter.markup.heading": "見出し",
+  "command.frontMatter.init": "プロジェクトの初期設定",
+  "command.frontMatter.insertCategories": "カテゴリーを追加",
+  "command.frontMatter.insertMedia": "メディアを挿入",
+  "command.frontMatter.insertSnippet": "スニペットを挿入",
+  "command.frontMatter.insertTags": "タグを追加",
+  "command.frontMatter.markup.italic": "イタリック",
+  "command.frontMatter.dashboard": "ダッシュボードを開く",
+  "command.frontMatter.dashboard.data": "データのダッシュボードを開く",
+  "command.frontMatter.dashboard.media": "メディアのダッシュボードを開く",
+  "command.frontMatter.dashboard.snippets": "スニペットのダッシュボードを開く",
+  "command.frontMatter.dashboard.taxonomy": "タクソノミーのダッシュボードを開く",
+  "command.frontMatter.markup.orderedlist": "順序付きリスト",
+  "command.frontMatter.markup.options": "他のマークアップオプション",
+  "command.frontMatter.preview": "記事のプレビューを開く",
+  "command.frontMatter.chatbot": "Front Matter AIに質問する",
+  "command.frontMatter.promoteSettings": "ローカル設定をチームレベルへ昇格させる",
+  "command.frontMatter.remap": "全ての記事のタグまたはカテゴリーを再配置または削除する",
+  "command.frontMatter.setLastModifiedDate": "最終更新日を設定する",
+  "command.frontMatter.markup.strikethrough": "取り消し線",
+  "command.frontMatter.mode.switch": "モードの切り替え",
+  "command.frontMatter.markup.tasklist": "タスクリスト",
+  "command.frontMatter.markup.unorderedlist": "順序なしリスト",
+  "command.frontMatter.git.sync": "同期",
+  "command.frontMatter.cache.clear": "キャッシュをクリア",
+  "settings.configuration.title": "Front Matter: チームで作業する場合はfrontmatter.jsonで設定してください。",
+  "setting.frontMatter.projects.markdownDescription": "Front Matter CMSを利用するプロジェクトを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.projects)",
+  "setting.frontMatter.projects.items.properties.name.markdownDescription": "🚧: Specify the name of the project.",
+  "setting.frontMatter.projects.items.properties.default.markdownDescription": "🚧: Specify if this project is the default project to load.",
+  "setting.frontMatter.sponsors.ai.enabled.markdownDescription": "AIによる提案を利用します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.sponsors.ai.enabled)",
+  "setting.frontMatter.extensibility.scripts.markdownDescription": "Front Matter CMSで読み込むスクリプトのリストを指定します。. [ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.extensibility.scripts)",
+  "setting.frontMatter.experimental.markdownDescription": "実験的な機能をオンにします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.experimental)",
+  "setting.frontMatter.extends.markdownDescription": "Front Matter CMSの構成を拡張するパス/URLのリストを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.extends)",
+  "setting.frontMatter.content.autoUpdateDate.markdownDescription": "記事やページの最終編集日を自動で更新します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.autoupdatedate)",
+  "setting.frontMatter.content.defaultFileType.markdownDescription": "新しい記事を作成する際の既定のファイル形式を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.defaultfiletype)",
+  "setting.frontMatter.content.defaultSorting.markdownDescription": "ダッシュボード上に表示される記事一覧の既定の並び順を設定します。Enum（列挙型）や任意のIDを指定してください。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.defaultsorting)",
+  "setting.frontMatter.content.draftField.markdownDescription": "記事の下書きステータスを管理するフィールドを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.draftfield)",
+  "setting.frontMatter.content.draftField.properties.type.description": "🚧: Type of the draft field you want to use",
+  "setting.frontMatter.content.draftField.properties.name.description": "🚧: Name of the field to use",
+  "setting.frontMatter.content.draftField.properties.invert.description": "🚧: By default the draft field is set to true when the content is a draft. Set this to true to set it to false.",
+  "setting.frontMatter.content.draftField.properties.choices.description": "🚧: List of choices for the field",
+  "setting.frontMatter.content.fmHighlight.markdownDescription": "Markdownファイル内のfront matterをハイライトします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.fmhighlight)",
+  "setting.frontMatter.content.hideFm.markdownDescription": "Markdownファイル内のfront matterを非表示にします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.hidefm)",
+  "setting.frontMatter.content.hideFmMessage.markdownDescription": "front matterが非表示の際に、編集画面に表示するメッセージを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.hidefmmessage)",
+  "setting.frontMatter.content.pageFolders.markdownDescription": "フォルダーを配列で定義して、この拡張機能が記事を取得したり新しい記事を作成できるようにします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.pagefolders)",
+  "setting.frontMatter.content.pageFolders.items.properties.title.description": "🚧: Name of the folder",
+  "setting.frontMatter.content.pageFolders.items.properties.path.description": "🚧: Path of the folder",
+  "setting.frontMatter.content.pageFolders.items.properties.excludeSubdir.description": "🚧: Exclude sub-directories",
+  "setting.frontMatter.content.pageFolders.items.properties.previewPath.description": "🚧: Defines a custom preview path for the folder.",
+  "setting.frontMatter.content.pageFolders.items.properties.filePrefix.description": "🚧: Defines a prefix for the file name.",
+  "setting.frontMatter.content.pageFolders.items.properties.contentTypes.description": "🚧: Defines which content types can be used for the current location. If not defined, all content types will be available.",
+  "setting.frontMatter.content.placeholders.markdownDescription": "記事タイプとテンプレートで使用するプレースホルダーを配列で定義して、記事のfront matterを自動で入力できるようにします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.placeholders)",
+  "setting.frontMatter.content.placeholders.items.properties.id.description": "🚧: ID of the placeholder, in your content type or template, use it as follows: {{placeholder}}",
+  "setting.frontMatter.content.placeholders.items.properties.value.description": "🚧: The placeholder its value",
+  "setting.frontMatter.content.placeholders.items.properties.script.description": "🚧: The script to execute to get the value of the placeholder",
+  "setting.frontMatter.content.publicFolder.markdownDescription": "アセットが保存されているフォルダーを設定します。例えば、Hugoでは`static`フォルダーです。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.publicfolder)",
+  "setting.frontMatter.content.publicFolder.properties.path.description": "アセットフォルダーのパスを指定します。",
+  "setting.frontMatter.content.publicFolder.properties.relative.description": "メディアファイルへのパスがコンテンツファイルに対して相対的であるかを定義します。",
+  "setting.frontMatter.snippets.wrapper.enabled.markdownDescription": "スニペット挿入時にコメントでラップします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontMatter.snippets.wrapper.enabled)",
+  "setting.frontMatter.content.snippets.markdownDescription": "記事中に使用するスニペットを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.snippets)",
+  "setting.frontMatter.content.sorting.markdownDescription": "ダッシュボード上での記事の並べ替えオプションを追加します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.sorting)",
+  "setting.frontMatter.content.sorting.items.properties.id.description": "🚧: The ID of the sorting option. This will be used for the storing the last used sorting option or the default option.",
+  "setting.frontMatter.content.sorting.items.properties.title.description": "🚧: Name of the sorting label",
+  "setting.frontMatter.content.sorting.items.properties.name.description": "🚧: Name of the metadata field to sort by",
+  "setting.frontMatter.content.sorting.items.properties.order.description": "🚧: Order of the sorting",
+  "setting.frontMatter.content.sorting.items.properties.type.description": "🚧: Type of the field value",
+  "setting.frontMatter.content.supportedFileTypes.markdownDescription": "Front Matterでサポートされるファイル形式を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.supportedfiletypes)",
+  "setting.frontMatter.content.wysiwyg.markdownDescription": "What You See, Is What You Get（WYSIWYG）Markdownコントロールを有効にします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.wysiwyg)",
+  "setting.frontMatter.custom.scripts.markdownDescription": "実行するNode.jsスクリプトのパスを指定します。現在のファイルのパスが引数として渡されます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.custom.scripts)",
+  "setting.frontMatter.custom.scripts.items.properties.id.description": "🚧: ID of the script.",
+  "setting.frontMatter.custom.scripts.items.properties.title.description": "🚧: Title you want to give to your script. Will be shown as the title of the button.",
+  "setting.frontMatter.custom.scripts.items.properties.script.description": "🚧: Path to the script to execute",
+  "setting.frontMatter.custom.scripts.items.properties.nodeBin.description": "🚧: Path to the node executable. This is required when using NVM, so that there is no confusion of which node version to use. (deprecated: use the command property instead)",
+  "setting.frontMatter.custom.scripts.items.properties.bulk.description": "🚧: Run the script for all content files",
+  "setting.frontMatter.custom.scripts.items.properties.output.description": "🚧: Define where you want to output your script output. Default is a notification, but you can specify to show it in an editor panel.",
+  "setting.frontMatter.custom.scripts.items.properties.outputType.description": "🚧: The type of output for the editor panel. Can be used to change it to 'markdown' for example",
+  "setting.frontMatter.custom.scripts.items.properties.type.description": "🚧: The type for which the script will be used.",
+  "setting.frontMatter.custom.scripts.items.properties.command.description": "🚧: The type of script you want to execute.",
+  "setting.frontMatter.custom.scripts.items.properties.hidden.description": "🚧: Hide the action from the UI",
+  "setting.frontMatter.custom.scripts.items.properties.environments.items.properties.type.description": "🚧: The environment type for which the script needs to be used",
+  "setting.frontMatter.custom.scripts.items.properties.environments.items.properties.script.description": "🚧: Path to the script to execute",
+  "setting.frontMatter.dashboard.content.pagination.markdownDescription": "ページネーションの有効/無効を設定します。ページ数は最大52まで設定できます。規定値は`16`です。ページ分割を無効にするには`false`を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.content.pagination)",
+  "setting.frontMatter.dashboard.content.cardTags.markdownDescription": "記事一覧をカード型で表示する際、どのメタデータフィールドをタグとして使うかを指定します。空欄またはnull値の場合、タグは表示されなくなります。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.content.cardtags)",
+  "setting.frontMatter.dashboard.content.card.fields.state.markdownDescription": "記事一覧をカード型で表示する際、下書き・公開済みのステータスを表示します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.state)",
+  "setting.frontMatter.dashboard.content.card.fields.date.markdownDescription": "記事一覧をカード型で表示する際、日付を表示します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.date)",
+  "setting.frontMatter.dashboard.content.card.fields.description.markdownDescription": "記事一覧をカード型で表示する際、どのメタデータフィールドをディスクリプションとして使うかを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.description)",
+  "setting.frontMatter.dashboard.content.card.fields.title.markdownDescription": "記事一覧をカード型で表示する際、どのメタデータフィールドをタイトルとして使うかを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.title)",
+  "setting.frontMatter.dashboard.mediaSnippet.markdownDescription": "🚧: Specify the a snippet for your custom media insert markup. [ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.mediasnippet)",
+  "setting.frontMatter.dashboard.mediaSnippet.items.description": "スニペット内で `{mediaUrl}`, `{caption}`, `{alt}`, `{filename}`, `{mediaHeight}`, `{mediaWidth}` のプレースホルダーを使用して、メディア情報を自動的に挿入します。",
+  "setting.frontMatter.dashboard.openOnStart.markdownDescription": "VS Codeの起動時にダッシュボードを表示します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.openonstart)",
+  "setting.frontMatter.data.files.markdownDescription": "ウェブサイトに使用するデータのファイルを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.data.files)",
+  "setting.frontMatter.data.files.items.properties.id.description": "🚧: Your unique ID you want to use for your data file.",
+  "setting.frontMatter.data.files.items.properties.title.description": "🚧: Title you want to give to your data file.",
+  "setting.frontMatter.data.files.items.properties.labelField.description": "🚧: The field you want to use as label for your data entries.",
+  "setting.frontMatter.data.files.items.properties.file.description": "🚧: Path to the file to load. Only JSON or YAML files are supported.",
+  "setting.frontMatter.data.files.items.properties.fileType.description": "🚧: Defines how you want to parse the file. JSON is the default.",
+  "setting.frontMatter.data.files.items.properties.schema.description": "🚧: The JSON schema for your data which will be used to render the data form.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.title.description": "🚧: Title of the form.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.type.description": "🚧: Defines the type of the form. Default is 'object'.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.required.description": "🚧: Defines the required fields for the form.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.properties.description": "🚧: Defines the fields of the form.",
+  "setting.frontMatter.data.files.items.properties.type.description": "🚧: If you are using data types, you can specify your type ID.",
+  "setting.frontMatter.data.files.items.properties.singleEntry.description": "🚧: If you want to use a single entry for your data file.",
+  "setting.frontMatter.data.folders.markdownDescription": "ウェブサイトに使用するデータのフォルダーを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.data.folders)",
+  "setting.frontMatter.data.folders.items.properties.id.description": "🚧: Your unique ID you want to use for your data folder.",
+  "setting.frontMatter.data.folders.items.properties.labelField.description": "🚧: The field you want to use as label for your data entries.",
+  "setting.frontMatter.data.folders.items.properties.path.description": "🚧: Path to the folder to load files.",
+  "setting.frontMatter.data.folders.items.properties.type.description": "🚧: If you are using data types, you can specify your type ID.",
+  "setting.frontMatter.data.folders.items.properties.singleEntry.description": "🚧: If you want to use a single entry for your data files in the folder.",
+  "setting.frontMatter.data.types.markdownDescription": "データタイプを指定します。これらのタイプは、データファイルで使用できます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.data.types)",
+  "setting.frontMatter.data.types.items.properties.id.description": "🚧: Your unique ID you want to use for your data type.",
+  "setting.frontMatter.file.preserveCasing.markdownDescription": "タイトルからファイル名の大文字と小文字を区別します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.file.preservecasing)",
+  "setting.frontMatter.framework.id.markdownDescription": "ウェブサイトに使用している静的サイトジェネレーターまたはフレームワークのIDを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.framework.id)",
+  "setting.frontMatter.framework.startCommand.markdownDescription": "静的サイト・ジェネレーターまたはフレームワークを起動させるコマンドを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.framework.startcommand)",
+  "setting.frontMatter.git.enabled.markdownDescription": "ウェブサイトにGit Actionsを使用するかどうかを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.git.enabled)",
+  "setting.frontMatter.git.commitMessage.markdownDescription": "同期に使用するコミットメッセージを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.git.commitmessage)",
+  "setting.frontMatter.git.submodule.pull.markdownDescription": "同期の際にサブモジュールをpullするかどうかを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.pull)",
+  "setting.frontMatter.git.submodule.push.markdownDescription": "同期の際にサブモジュールをpushするかどうかを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.push)",
+  "setting.frontMatter.git.submodule.branch.markdownDescription": "チェックアウトするサブモジュールのブランチを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.branch)",
+  "setting.frontMatter.git.submodule.folder.markdownDescription": "コンテンツのサブモジュールフォルダーを指定します。複数のサブモジュールを使用する場合に便利です。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.folder)",
+  "setting.frontMatter.global.activeMode.markdownDescription": "Front Matterで有効なモードを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.global.activemode)",
+  "setting.frontMatter.global.modes.markdownDescription": "Front Matterで利用するモードを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.global.modes)",
+  "setting.frontMatter.global.modes.items.properties.id.description": "🚧: The ID of your mode.",
+  "setting.frontMatter.global.modes.items.properties.features.description": "🚧: The features you want to use for your mode.",
+  "setting.frontMatter.global.notifications.markdownDescription": "表示したい通知を設定します。既定では全ての通知が表示されます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.global.notifications)",
+  "setting.frontMatter.global.disabledNotificaitons.markdownDescription": "表示しない通知を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.global.disablednotifications)",
+  "setting.frontMatter.media.defaultSorting.markdownDescription": "ダッシュボードのメディア一覧での既定の並び順を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.media.defaultsorting)",
+  "setting.frontMatter.media.supportedMimeTypes.markdownDescription": "メディアファイルでサポートされるMIMEタイプを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.media.supportedmimetypes)",
+  "setting.frontMatter.panel.freeform.markdownDescription": "未登録のタグ/カテゴリーをタグピッカーに入力することを許可するかどうかを設定します（有効にすると、後で保存するオプションが使えます）。規定値はtrue。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.freeform)",
+  "setting.frontMatter.preview.host.markdownDescription": "プレビュー表示に使用するホストのURLを設定します（例：`http://localhost:1313`）。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.preview.host)",
+  "setting.frontMatter.preview.pathName.markdownDescription": "ホストパスとスラッグの間に追加したいパスを設定します。例えば、パスに`yyyy/MM`などの日付を含めたい場合等に使えます。日付は記事の日付フィールドの値に基づいて生成されます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.preview.pathname)",
+  "setting.frontMatter.site.baseURL.markdownDescription": "ベースURLを設定します。これはSEOチェックに利用されます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.site.baseurl)",
+  "setting.frontMatter.taxonomy.alignFilename.markdownDescription": "ファイル生成時にファイル名をスラッグに合わせる[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.alignfilename)",
+  "setting.frontMatter.taxonomy.categories.markdownDescription": "Front Matterで利用するカテゴリーを管理します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.categories)",
+  "setting.frontMatter.taxonomy.commaSeparatedFields.markdownDescription": "カンマ区切りで配列を管理するフィールド名を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.commaseparatedfields)",
+  "setting.frontMatter.taxonomy.commaSeparatedFields.items.description": "コンマ区切りの配列として使用するフィールドの名前。",
+  "setting.frontMatter.taxonomy.contentTypes.markdownDescription": "記事・ページ・その他で利用したい記事タイプを設定します。front matterで正しく`type`が設定されていることを確認してください。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.contenttypes)",
+  "setting.frontMatter.taxonomy.contentTypes.items.description": "Front Matterで使用するコンテンツタイプを定義します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.name.description": "🚧: Define the type of field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fileType.description": "🚧: Specifies the type of content you want to create.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.description": "🚧: Define the fields of the content type",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.description": "Front Matterで使用するコンテンツタイプを定義します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.type.description": "🚧: Define the type of field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.name.description": "🚧: Name of the field to use",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.title.description": "🚧: Title to show in the UI",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.description.description": "🚧: Description to show in the UI",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.default.description": "🚧: Default value",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.choices.description": "🚧: Define your choices",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.choices.items.properties.id.description": "🚧: The choice ID",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.choices.items.properties.title.description": "🚧: The choice title",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.single.description": "🚧: Is a single line field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.wysiwyg.description": "🚧: Is a WYSIWYG field (HTML output)",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.multiple.description": "🚧: Do you allow to select multiple values?",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPreviewImage.description": "🚧: Specify if the image field can be used as preview. Be aware, you can only have one preview image per content type.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.hidden.description": "🚧: Do you want to hide the field from the metadata section?",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyId.description": "🚧: The ID of your taxonomy field. It cannot contain the \"tags\" or \"categories\" value.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fileExtensions.description": "🚧: Specify the file extensions to allow for the file picker",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fieldGroup.description": "🚧: The ID(s) of your field group(s) defined in the `frontMatter.taxonomy.fieldGroups` setting",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataType.description": "🚧: The ID(s) of your data type(s) defined in the `frontMatter.data.types` setting",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.description": "🚧: Specify the options for the number field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.isDecimal.description": "🚧: Specify if the number is a decimal",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.min.description": "🚧: The minimum value",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.max.description": "🚧: The maximum value",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.step.description": "🚧: The step value",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyLimit.description": "🚧: Limit the number of taxonomies to select. Set to 0 to allow unlimited.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPublishDate.description": "🚧: Specify if the field is the publish date field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isModifiedDate.description": "🚧: Specify if the field is the modified date field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileId.description": "🚧: Specify the ID of the data file to use for this field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileKey.description": "🚧: Specify the key of the data file to use for this field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileValue.description": "🚧: Specify the property name that will be used to show the value for the field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.editable.description": "🚧: Specify if the field is editable",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.encodeEmoji.description": "🚧: Specify if the field should encode emoji",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dateFormat.description": "🚧: Specify the date format to use",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.required.description": "🚧: Specify if the field is required",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeName.description": "🚧: Specify the content type name to filter content for the contentRelationship field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeValue.description": "🚧: Specify the value to insert for the contentRelationship field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.description": "🚧: Specify the conditions to show the field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.fieldRef.description": "🚧: The field ID to use",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.operator.description": "🚧: The operator to use",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.value.description": "🚧: The value to compare",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.caseSensitive.description": "🚧: Specify if the comparison is case sensitive. Default: true",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.pageBundle.description": "🚧: Specify if you want to create a folder when creating new content.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.previewPath.description": "🚧: Defines a custom preview path for the content type.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.template.description": "🚧: An optional template that can be used for creating new content.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.postScript.description": "🚧: An optional post script that can be used after new content creation.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.filePrefix.description": "🚧: Defines a prefix for the file name.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.defaultFileName.description": "🚧: Default file name to use when creating new content.",
+  "setting.frontMatter.taxonomy.customTaxonomy.markdownDescription": "カスタムタクソノミーのフィールドデータを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.tags)",
+  "setting.frontMatter.taxonomy.customTaxonomy.items.properties.id.description": "🚧: ID for your taxonomy field. It cannot contain the \"tags\" or \"categories\" value.",
+  "setting.frontMatter.taxonomy.customTaxonomy.items.properties.options.description": "🚧: Options from which you can pick.",
+  "setting.frontMatter.taxonomy.dateField.markdownDescription": "🚧: This setting is used to define the publishing date field of your articles. [ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.datefield)",
+  "setting.frontMatter.taxonomy.dateFormat.markdownDescription": "記事の日付フォーマットを指定します。詳しくは[date-fns formatting](https://date-fns.org/v2.0.1/docs/format)を確認してください。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.dateformat)",
+  "setting.frontMatter.taxonomy.fieldGroups.markdownDescription": "ブロックフィールドで使用したいフィールドグループを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.fieldgroups)",
+  "setting.frontMatter.taxonomy.fieldGroups.items.properties.id.description": "🚧: The name of the field group",
+  "setting.frontMatter.taxonomy.fieldGroups.items.properties.labelField.description": "🚧: The name of the field to be used as display value",
+  "setting.frontMatter.taxonomy.frontMatterType.markdownDescription": "front matterの形式を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.frontmattertype)",
+  "setting.frontMatter.taxonomy.indentArrays.markdownDescription": "front matterメタデータが配列の場合はインデント（字下げ）させます。規定値はtrueです。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.indentarrays)",
+  "setting.frontMatter.taxonomy.modifiedField.markdownDescription": "🚧: This setting is used to define the modified date field of your articles. [ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.modifiedfield)",
+  "setting.frontMatter.taxonomy.noPropertyValueQuotes.markdownDescription": "引用符を付与しないメタデータを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.nopropertyvaluequotes)",
+  "setting.frontMatter.taxonomy.noPropertyValueQuotes.items.description": "引用符を削除したいプロパティの名前。",
+  "setting.frontMatter.taxonomy.seoContentLengh.markdownDescription": "最適な記事の長さを指定します。2021年のSEOでは、1,760語から2,400語の間が最も理想的とされています。（-1に設定するとオフになります。）[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seocontentlengh)",
+  "setting.frontMatter.taxonomy.seoDescriptionField.markdownDescription": "ページのSEO情報のディスクリプションに使うフィールドの名前を指定します。規定値は'description'です。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seodescriptionfield)",
+  "setting.frontMatter.taxonomy.seoDescriptionLength.markdownDescription": "SEOに適したディスクリプションの文字数を設定します。（`-1`に設定するとオフになります。）[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seodescriptionlength)",
+  "setting.frontMatter.taxonomy.seoSlugLength.markdownDescription": "SEOに適したスラッグの文字数を設定します。（`-1`に設定するとオフになります。）[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seosluglength)",
+  "setting.frontMatter.taxonomy.seoTitleField.markdownDescription": "ページのSEO情報のタイトルに使うフィールドの名前を指定します。規定値は'title'です。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seotitlefield)",
+  "setting.frontMatter.taxonomy.seoTitleLength.markdownDescription": "SEOに適したタイトルの文字数を設定します。（`-1`に設定するとオフになります。）[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seotitlelength)",
+  "setting.frontMatter.taxonomy.slugPrefix.markdownDescription": "スラッグに付与する接頭辞を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.slugprefix)",
+  "setting.frontMatter.taxonomy.slugSuffix.markdownDescription": "スラッグに付与する接尾辞を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.slugsuffix)",
+  "setting.frontMatter.taxonomy.tags.markdownDescription": "Front Matterで利用するタグを管理します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.tags)",
+  "setting.frontMatter.telemetry.disable.markdownDescription": "利用状況の送信をオフにします。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.telemetry.disable)",
+  "setting.frontMatter.templates.enabled.markdownDescription": "テンプレート機能を利用します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.enabled)",
+  "setting.frontMatter.templates.folder.markdownDescription": "テンプレートを保存するフォルダーを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.folder)",
+  "setting.frontMatter.templates.prefix.markdownDescription": "新しい記事の作成時、ファイル名に付与する接頭辞を設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.prefix)",
+  "setting.frontMatter.dashboard.mediaSnippet.deprecationMessage": "🚧: This setting is deprecated and will be removed in the next major version. Please define your media snippet in the `frontMatter.content.snippet` setting.",
+  "setting.frontMatter.taxonomy.dateField.deprecationMessage": "🚧: This setting is deprecated and will be removed in the next major version. Please use the new `isPublishDate` settings instead in your content types date fields.",
+  "setting.frontMatter.taxonomy.modifiedField.deprecationMessage": "🚧: This setting is deprecated and will be removed in the next major version. Please use the new `isModifiedDate` settings instead in your content types date fields.",
+  "setting.frontMatter.global.disabledNotifications.markdownDescription": "🚧: This is an array with the notifications types that can be disabled for Front Matter CMS. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.global.disablednotifications)",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.customType.description": "🚧: Specify the name of the custom field type to use."
+}

package.nls.json

@@ -0,0 +1,243 @@
+{
+  "command.frontMatter.project.switch": "Switch project",
+  "command.frontMatter.config.reload": "Reload config",
+  "command.frontMatter.authenticate": "Authenticate",
+  "command.frontMatter.contenttype.generate": "Generate content type from current file",
+  "command.frontMatter.contenttype.addMissingFields": "Add missing fields from front matter to content type",
+  "command.frontMatter.contenttype.setContentType": "Set the content type to use for the current file",
+  "command.frontMatter.markup.blockquote": "Blockquote",
+  "command.frontMatter.markup.bold": "Bold",
+  "command.frontMatter.dashboard.close": "Close dashboard",
+  "command.frontMatter.markup.code": "Code",
+  "command.frontMatter.markup.codeblock": "Codeblock",
+  "command.frontMatter.markup.hyperlink": "Hyperlink",
+  "command.frontMatter.collapseSections": "Collapse sections",
+  "command.frontMatter.initTemplate": "Initialize the template folder",
+  "command.frontMatter.createTemplate": "Create template from current file",
+  "command.frontMatter.createCategory": "Create category",
+  "command.frontMatter.createContent": "Create new content from defined content type or template",
+  "command.frontMatter.createTag": "Create tag",
+  "command.frontMatter.diagnostics": "Diagnostic logging",
+  "command.frontMatter.exportTaxonomy": "Export all tags & categories to your settings",
+  "command.frontMatter.createFromTemplate": "New article from template",
+  "command.frontMatter.registerFolder": "Register folder",
+  "command.frontMatter.unregisterFolder": "Unregister folder",
+  "command.frontMatter.generateSlug": "Generate slug based on content title",
+  "command.frontMatter.markup.heading": "Heading",
+  "command.frontMatter.init": "Initialize project",
+  "command.frontMatter.insertCategories": "Insert categories",
+  "command.frontMatter.insertMedia": "Insert media into your content",
+  "command.frontMatter.insertSnippet": "Insert snippet into your content",
+  "command.frontMatter.insertTags": "Insert tags",
+  "command.frontMatter.markup.italic": "Italic",
+  "command.frontMatter.dashboard": "Open dashboard",
+  "command.frontMatter.dashboard.data": "Open data dashboard",
+  "command.frontMatter.dashboard.media": "Open media dashboard",
+  "command.frontMatter.dashboard.snippets": "Open snippets dashboard",
+  "command.frontMatter.dashboard.taxonomy": "Open taxonomies dashboard",
+  "command.frontMatter.markup.orderedlist": "Ordered list",
+  "command.frontMatter.markup.options": "Other markup options",
+  "command.frontMatter.preview": "Preview content",
+  "command.frontMatter.chatbot": "Ask the Front Matter AI for help",
+  "command.frontMatter.promoteSettings": "Promote settings from local to team level",
+  "command.frontMatter.remap": "Remap or remove tag/category in all articles",
+  "command.frontMatter.setLastModifiedDate": "Set lastmod date",
+  "command.frontMatter.markup.strikethrough": "Strikethrough",
+  "command.frontMatter.mode.switch": "Switch mode",
+  "command.frontMatter.markup.tasklist": "Task list",
+  "command.frontMatter.markup.unorderedlist": "Unordered list",
+  "command.frontMatter.git.sync": "Sync",
+  "command.frontMatter.cache.clear": "Clear cache",
+  "settings.configuration.title": "Front Matter: use frontmatter.json for shared team settings",
+  "setting.frontMatter.projects.markdownDescription": "Specify the list of projects to load in the Front Matter CMS. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.projects)",
+  "setting.frontMatter.projects.items.properties.name.markdownDescription": "Specify the name of the project.",
+  "setting.frontMatter.projects.items.properties.default.markdownDescription": "Specify if this project is the default project to load.",
+  "setting.frontMatter.sponsors.ai.enabled.markdownDescription": "Specify if you want to enable AI suggestions. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.sponsors.ai.enabled)",
+  "setting.frontMatter.extensibility.scripts.markdownDescription": "Specify the list of scripts to load in the Front Matter CMS. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.extensibility.scripts)",
+  "setting.frontMatter.experimental.markdownDescription": "Specify if you want to enable the experimental features. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.experimental)",
+  "setting.frontMatter.extends.markdownDescription": "Specify the list of paths/URLs to extend the Front Matter CMS config. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.extends)",
+  "setting.frontMatter.content.autoUpdateDate.markdownDescription": "Specify if you want to automatically update the modified date of your article/page (only content located in your content folder). [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.autoupdatedate)",
+  "setting.frontMatter.content.defaultFileType.markdownDescription": "Specify the default file type for the content to create. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.defaultfiletype)",
+  "setting.frontMatter.content.defaultSorting.markdownDescription": "Specify the default sorting option for the content dashboard. You can use one of the values from the enum or define your own ID. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.defaultsorting)",
+  "setting.frontMatter.content.draftField.markdownDescription": "Define the draft field you want to use to manage your content. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.draftfield)",
+  "setting.frontMatter.content.draftField.properties.type.description": "Type of the draft field you want to use",
+  "setting.frontMatter.content.draftField.properties.name.description": "Name of the field to use",
+  "setting.frontMatter.content.draftField.properties.invert.description": "By default the draft field is set to true when the content is a draft. Set this to true to set it to false.",
+  "setting.frontMatter.content.draftField.properties.choices.description": "List of choices for the field",
+  "setting.frontMatter.content.fmHighlight.markdownDescription": "Specify if you want to highlight the Front Matter in the Markdown file. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.fmhighlight)",
+  "setting.frontMatter.content.hideFm.markdownDescription": "Specify if you want to hide the Front Matter in the Markdown file. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.hidefm)",
+  "setting.frontMatter.content.hideFmMessage.markdownDescription": "Specify the message to display when the Front Matter is hidden. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.hidefmMessage)",
+  "setting.frontMatter.content.pageFolders.markdownDescription": "This array of folders defines where the extension can retrieve or create new pages. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.pagefolders)",
+  "setting.frontMatter.content.pageFolders.items.properties.title.description": "Name of the folder",
+  "setting.frontMatter.content.pageFolders.items.properties.path.description": "Path of the folder",
+  "setting.frontMatter.content.pageFolders.items.properties.excludeSubdir.description": "Exclude sub-directories",
+  "setting.frontMatter.content.pageFolders.items.properties.previewPath.description": "Defines a custom preview path for the folder.",
+  "setting.frontMatter.content.pageFolders.items.properties.filePrefix.description": "Defines a prefix for the file name.",
+  "setting.frontMatter.content.pageFolders.items.properties.contentTypes.description": "Defines which content types can be used for the current location. If not defined, all content types will be available.",
+  "setting.frontMatter.content.placeholders.markdownDescription": "This array of placeholders defines the placeholders that you can use in your content types and templates for automatically populating your content its front matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.placeholders)",
+  "setting.frontMatter.content.placeholders.items.properties.id.description": "ID of the placeholder, in your content type or template, use it as follows: {{placeholder}}",
+  "setting.frontMatter.content.placeholders.items.properties.value.description": "The placeholder its value",
+  "setting.frontMatter.content.placeholders.items.properties.script.description": "The script to execute to get the value of the placeholder",
+  "setting.frontMatter.content.publicFolder.markdownDescription": "Specify the folder name where all your assets are located. For instance in Hugo this is the `static` folder. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.publicfolder)",
+  "setting.frontMatter.content.publicFolder.properties.path.description": "Specify the path of the assets folder",
+  "setting.frontMatter.content.publicFolder.properties.relative.description": "Defines if the path to your media files be relative to the content file?",
+  "setting.frontMatter.snippets.wrapper.enabled.markdownDescription": "Specify if you want to wrap the snippets. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontMatter.snippets.wrapper.enabled)",
+  "setting.frontMatter.content.snippets.markdownDescription": "Define the snippets you want to use in your content. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.snippets)",
+  "setting.frontMatter.content.sorting.markdownDescription": "Define the sorting options for your dashboard content. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.sorting)",
+  "setting.frontMatter.content.sorting.items.properties.id.description": "The ID of the sorting option. This will be used for the storing the last used sorting option or the default option.",
+  "setting.frontMatter.content.sorting.items.properties.title.description": "Name of the sorting label",
+  "setting.frontMatter.content.sorting.items.properties.name.description": "Name of the metadata field to sort by",
+  "setting.frontMatter.content.sorting.items.properties.order.description": "Order of the sorting",
+  "setting.frontMatter.content.sorting.items.properties.type.description": "Type of the field value",
+  "setting.frontMatter.content.supportedFileTypes.markdownDescription": "Specify the file types that you want to use in Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.supportedfiletypes)",
+  "setting.frontMatter.content.wysiwyg.markdownDescription": "Specifies if you want to enable/disable the What You See, Is What You Get (WYSIWYG) markdown controls. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.wysiwyg)",
+  "setting.frontMatter.custom.scripts.markdownDescription": "Specify the path to a Node.js script to execute. The current file path will be provided as an argument. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.custom.scripts)",
+  "setting.frontMatter.custom.scripts.items.properties.id.description": "ID of the script.",
+  "setting.frontMatter.custom.scripts.items.properties.title.description": "Title you want to give to your script. Will be shown as the title of the button.",
+  "setting.frontMatter.custom.scripts.items.properties.script.description": "Path to the script to execute",
+  "setting.frontMatter.custom.scripts.items.properties.nodeBin.description": "Path to the node executable. This is required when using NVM, so that there is no confusion of which node version to use. (deprecated: use the command property instead)",
+  "setting.frontMatter.custom.scripts.items.properties.bulk.description": "Run the script for all content files",
+  "setting.frontMatter.custom.scripts.items.properties.output.description": "Define where you want to output your script output. Default is a notification, but you can specify to show it in an editor panel.",
+  "setting.frontMatter.custom.scripts.items.properties.outputType.description": "The type of output for the editor panel. Can be used to change it to 'markdown' for example",
+  "setting.frontMatter.custom.scripts.items.properties.type.description": "The type for which the script will be used.",
+  "setting.frontMatter.custom.scripts.items.properties.command.description": "The type of script you want to execute.",
+  "setting.frontMatter.custom.scripts.items.properties.hidden.description": "Hide the action from the UI",
+  "setting.frontMatter.custom.scripts.items.properties.environments.items.properties.type.description": "The environment type for which the script needs to be used",
+  "setting.frontMatter.custom.scripts.items.properties.environments.items.properties.script.description": "Path to the script to execute",
+  "setting.frontMatter.dashboard.content.pagination.markdownDescription": "Specify if you want to enable/disable pagination for your content. You can define your page number up to 52. Default items per page is `16`. Disabling the pagination can be done by setting it to `false`. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.content.pagination)",
+  "setting.frontMatter.dashboard.content.cardTags.markdownDescription": "Specify the name of the metadata field that will be used to show the tags on the content card. When empty or null, it will hide the tags from the card. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.content.cardtags)",
+  "setting.frontMatter.dashboard.content.card.fields.state.markdownDescription": "Specify if you want to show the state/draft status on the content card view. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.state)",
+  "setting.frontMatter.dashboard.content.card.fields.date.markdownDescription": "Specify if you want to show the date on the content card view. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.date)",
+  "setting.frontMatter.dashboard.content.card.fields.description.markdownDescription": "Specify the name of the metadata field that will be used to show the description on the content card. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.description)",
+  "setting.frontMatter.dashboard.content.card.fields.title.markdownDescription": "Specify the name of the metadata field that will be used to show the title on the content card. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontMatter.dashboard.content.card.fields.title)",
+  "setting.frontMatter.dashboard.mediaSnippet.markdownDescription": "Specify the a snippet for your custom media insert markup. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.mediasnippet)",
+  "setting.frontMatter.dashboard.mediaSnippet.items.description": "Use the `{mediaUrl}`, `{caption}`, `{alt}`, `{filename}`, `{mediaHeight}`, and `{mediaWidth}` placeholders in your snippet to automatically insert the media information.",
+  "setting.frontMatter.dashboard.openOnStart.markdownDescription": "Specify if you want to open the dashboard when you start VS Code.  [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.openonstart)",
+  "setting.frontMatter.data.files.markdownDescription": "Specify the data files you want to use for your website. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.data.files)",
+  "setting.frontMatter.data.files.items.properties.id.description": "Your unique ID you want to use for your data file.",
+  "setting.frontMatter.data.files.items.properties.title.description": "Title you want to give to your data file.",
+  "setting.frontMatter.data.files.items.properties.labelField.description": "The field you want to use as label for your data entries.",
+  "setting.frontMatter.data.files.items.properties.file.description": "Path to the file to load. Only JSON or YAML files are supported.",
+  "setting.frontMatter.data.files.items.properties.fileType.description": "Defines how you want to parse the file. JSON is the default.",
+  "setting.frontMatter.data.files.items.properties.schema.description": "The JSON schema for your data which will be used to render the data form.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.title.description": "Title of the form.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.type.description": "Defines the type of the form. Default is 'object'.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.required.description": "Defines the required fields for the form.",
+  "setting.frontMatter.data.files.items.properties.schema.properties.properties.description": "Defines the fields of the form.",
+  "setting.frontMatter.data.files.items.properties.type.description": "If you are using data types, you can specify your type ID.",
+  "setting.frontMatter.data.files.items.properties.singleEntry.description": "If you want to use a single entry for your data file.",
+  "setting.frontMatter.data.folders.markdownDescription": "Specify the data folders you want to use for your website. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.data.folders)",
+  "setting.frontMatter.data.folders.items.properties.id.description": "Your unique ID you want to use for your data folder.",
+  "setting.frontMatter.data.folders.items.properties.labelField.description": "The field you want to use as label for your data entries.",
+  "setting.frontMatter.data.folders.items.properties.path.description": "Path to the folder to load files.",
+  "setting.frontMatter.data.folders.items.properties.type.description": "If you are using data types, you can specify your type ID.",
+  "setting.frontMatter.data.folders.items.properties.singleEntry.description": "If you want to use a single entry for your data files in the folder.",
+  "setting.frontMatter.data.types.markdownDescription": "Specify the data types. These types can be used in for your data files. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.data.types)",
+  "setting.frontMatter.data.types.items.properties.id.description": "Your unique ID you want to use for your data type.",
+  "setting.frontMatter.file.preserveCasing.markdownDescription": "Specify if you want to preserve the casing of your file names from the title. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.file.preservecasing)",
+  "setting.frontMatter.framework.id.markdownDescription": "Specify the ID of your static site generator or framework you are using for your website. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.framework.id)",
+  "setting.frontMatter.framework.startCommand.markdownDescription": "Specify the command you want to use to start your static site generator or framework. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.framework.startcommand)",
+  "setting.frontMatter.git.enabled.markdownDescription": "Specify if you want to use the Git actions for your website. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.enabled)",
+  "setting.frontMatter.git.commitMessage.markdownDescription": "Specify the commit message you want to use for the sync. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.commitmessage)",
+  "setting.frontMatter.git.submodule.pull.markdownDescription": "Specify if you want to pull submodules when syncing. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.pull)",
+  "setting.frontMatter.git.submodule.push.markdownDescription": "Specify if you want to push submodules when syncing. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.push)",
+  "setting.frontMatter.git.submodule.branch.markdownDescription": "Specify the submodule branch to checkout. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.branch)",
+  "setting.frontMatter.git.submodule.folder.markdownDescription": "Specify the submodule folder of your content, this can be handy when you are using multiple submodules. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.submodule.folder)",
+  "setting.frontMatter.global.activeMode.markdownDescription": "Specify the activated mode of Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.global.activemode)",
+  "setting.frontMatter.global.modes.markdownDescription": "Specify the modes you want to use for Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.global.modes)",
+  "setting.frontMatter.global.modes.items.properties.id.description": "The ID of your mode.",
+  "setting.frontMatter.global.modes.items.properties.features.description": "The features you want to use for your mode.",
+  "setting.frontMatter.global.notifications.markdownDescription": "Specifies the notifications you want to see. By default, all notifications types will be shown. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.global.notifications)",
+  "setting.frontMatter.global.disabledNotifications.markdownDescription": "This is an array with the notifications types that can be disabled for Front Matter CMS. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.global.disablednotifications)",
+  "setting.frontMatter.media.defaultSorting.markdownDescription": "Specify the default sorting option for the media dashboard. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.media.defaultsorting)",
+  "setting.frontMatter.media.supportedMimeTypes.markdownDescription": "Specify the mime types to support for the media files. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.media.supportedmimetypes)",
+  "setting.frontMatter.panel.freeform.markdownDescription": "Specifies if you want to allow yourself from entering unknown tags/categories in the tag picker (when enabled, you will have the option to store them afterwards). Default: true. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.freeform)",
+  "setting.frontMatter.preview.host.markdownDescription": "Specify the host URL (example: http://localhost:1313) to be used when opening the preview. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.preview.host)",
+  "setting.frontMatter.preview.pathName.markdownDescription": "Specify the path you want to add after the host and before your slug. This can be used for instance to include the year/month like: `yyyy/MM`. The date will be generated based on the article its date field value. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.preview.pathname)",
+  "setting.frontMatter.site.baseURL.markdownDescription": "Specify the base URL of your site, this will be used for SEO checks. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.site.baseurl)",
+  "setting.frontMatter.taxonomy.alignFilename.markdownDescription": "Align the filename with the new slug when it gets generated. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.alignfilename)",
+  "setting.frontMatter.taxonomy.categories.markdownDescription": "Specifies the categories which can be used in the Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.categories)",
+  "setting.frontMatter.taxonomy.commaSeparatedFields.markdownDescription": "Specify the fields names that Front Matter should treat as a comma-separated array. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.commaseparatedfields)",
+  "setting.frontMatter.taxonomy.commaSeparatedFields.items.description": "Name of the fields you want to use as comma-separated arrays.",
+  "setting.frontMatter.taxonomy.contentTypes.markdownDescription": "Specify the type of contents you want to use for your articles/pages/etc. Make sure the `type` is correctly set in your front matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.contenttypes)",
+  "setting.frontMatter.taxonomy.contentTypes.items.description": "Define the content types you want to use in Front Matter.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.name.description": "Define the type of field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fileType.description": "Specifies the type of content you want to create.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.description": "Define the fields of the content type",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.description": "Define the content types you want to use in Front Matter.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.type.description": "Define the type of field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.name.description": "Name of the field to use",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.title.description": "Title to show in the UI",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.description.description": "Description to show in the UI",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.default.description": "Default value",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.choices.description": "Define your choices",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.choices.items.properties.id.description": "The choice ID",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.choices.items.properties.title.description": "The choice title",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.single.description": "Is a single line field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.wysiwyg.description": "Is a WYSIWYG field (HTML output)",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.multiple.description": "Do you allow to select multiple values?",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPreviewImage.description": "Specify if the image field can be used as preview. Be aware, you can only have one preview image per content type.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.hidden.description": "Do you want to hide the field from the metadata section?",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyId.description": "The ID of your taxonomy field. It cannot contain the \"tags\" or \"categories\" value.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fileExtensions.description": "Specify the file extensions to allow for the file picker",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fieldGroup.description": "The ID(s) of your field group(s) defined in the `frontMatter.taxonomy.fieldGroups` setting",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataType.description": "The ID(s) of your data type(s) defined in the `frontMatter.data.types` setting",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.description": "Specify the options for the number field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.isDecimal.description": "Specify if the number is a decimal",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.min.description": "The minimum value",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.max.description": "The maximum value",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.step.description": "The step value",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyLimit.description": "Limit the number of taxonomies to select. Set to 0 to allow unlimited.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPublishDate.description": "Specify if the field is the publish date field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isModifiedDate.description": "Specify if the field is the modified date field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileId.description": "Specify the ID of the data file to use for this field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileKey.description": "Specify the key of the data file to use for this field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileValue.description": "Specify the property name that will be used to show the value for the field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.editable.description": "Specify if the field is editable",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.encodeEmoji.description": "Specify if the field should encode emoji",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dateFormat.description": "Specify the date format to use",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.required.description": "Specify if the field is required",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeName.description": "Specify the content type name to filter content for the contentRelationship field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeValue.description": "Specify the value to insert for the contentRelationship field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.description": "Specify the conditions to show the field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.fieldRef.description": "The field ID to use",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.operator.description": "The operator to use",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.value.description": "The value to compare",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.caseSensitive.description": "Specify if the comparison is case sensitive. Default: true",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.pageBundle.description": "Specify if you want to create a folder when creating new content.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.previewPath.description": "Defines a custom preview path for the content type.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.template.description": "An optional template that can be used for creating new content.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.postScript.description": "An optional post script that can be used after new content creation.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.filePrefix.description": "Defines a prefix for the file name.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.defaultFileName.description": "Default file name to use when creating new content.",
+  "setting.frontMatter.taxonomy.customTaxonomy.markdownDescription": "Specify the custom taxonomy field data. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.tags)",
+  "setting.frontMatter.taxonomy.customTaxonomy.items.properties.id.description": "ID for your taxonomy field. It cannot contain the \"tags\" or \"categories\" value.",
+  "setting.frontMatter.taxonomy.customTaxonomy.items.properties.options.description": "Options from which you can pick.",
+  "setting.frontMatter.taxonomy.dateField.markdownDescription": "This setting is used to define the publishing date field of your articles. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.datefield)",
+  "setting.frontMatter.taxonomy.dateFormat.markdownDescription": "Specify the date format for your articles. Check [date-fns formating](https://date-fns.org/v2.0.1/docs/format) for more information. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.dateformat)",
+  "setting.frontMatter.taxonomy.fieldGroups.markdownDescription": "Define the field groups you want to use for your block fields. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.fieldgroups)",
+  "setting.frontMatter.taxonomy.fieldGroups.items.properties.id.description": "The name of the field group",
+  "setting.frontMatter.taxonomy.fieldGroups.items.properties.labelField.description": "The name of the field to be used as display value",
+  "setting.frontMatter.taxonomy.frontMatterType.markdownDescription": "Specify the type of Front Matter to use. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.frontmattertype)",
+  "setting.frontMatter.taxonomy.indentArrays.markdownDescription": "Specify if arrays in front matter are indented. Default: true. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.indentarrays)",
+  "setting.frontMatter.taxonomy.modifiedField.markdownDescription": "This setting is used to define the modified date field of your articles. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.modifiedfield)",
+  "setting.frontMatter.taxonomy.noPropertyValueQuotes.markdownDescription": "Specify the properties from which quotes need to be removed. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.nopropertyvaluequotes)",
+  "setting.frontMatter.taxonomy.noPropertyValueQuotes.items.description": "Name of the properties you want to remove quotes from.",
+  "setting.frontMatter.taxonomy.seoContentLengh.markdownDescription": "Specifies the optimal minimum length for your articles. Between 1,760 words – 2,400 is the absolute ideal article length for SEO in 2021. (set to `-1` to turn it off). [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seocontentlengh)",
+  "setting.frontMatter.taxonomy.seoDescriptionField.markdownDescription": "Specifies the name of the SEO description field for your page. Default is 'description'. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seodescriptionfield)",
+  "setting.frontMatter.taxonomy.seoDescriptionLength.markdownDescription": "Specifies the optimal description length for SEO (set to `-1` to turn it off). [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seodescriptionlength)",
+  "setting.frontMatter.taxonomy.seoSlugLength.markdownDescription": "Specifies the optimal slug length for SEO (set to `-1` to turn it off). [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seosluglength)",
+  "setting.frontMatter.taxonomy.seoTitleField.markdownDescription": "Specifies the name of the SEO title field for your page. Default is 'title'. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seotitlefield)",
+  "setting.frontMatter.taxonomy.seoTitleLength.markdownDescription": "Specifies the optimal title length for SEO (set to `-1` to turn it off). [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.seotitlelength)",
+  "setting.frontMatter.taxonomy.slugPrefix.markdownDescription": "Specify a prefix for the slug. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.slugprefix)",
+  "setting.frontMatter.taxonomy.slugSuffix.markdownDescription": "Specify a suffix for the slug. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.slugsuffix)",
+  "setting.frontMatter.taxonomy.tags.markdownDescription": "Specifies the tags which can be used in the Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.tags)",
+  "setting.frontMatter.telemetry.disable.markdownDescription": "Specify if you want to disable the telemetry. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.telemetry.disable)",
+  "setting.frontMatter.templates.enabled.markdownDescription": "Specify if you want to use templates. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.enabled)",
+  "setting.frontMatter.templates.folder.markdownDescription": "Specify the folder to use for your article templates. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.folder)",
+  "setting.frontMatter.templates.prefix.markdownDescription": "Specify the prefix you want to add for your new article filenames. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.templates.prefix)",
+  "setting.frontMatter.dashboard.mediaSnippet.deprecationMessage": "This setting is deprecated and will be removed in the next major version. Please define your media snippet in the `frontMatter.content.snippet` setting.",
+  "setting.frontMatter.taxonomy.dateField.deprecationMessage": "This setting is deprecated and will be removed in the next major version. Please use the new `isPublishDate` settings instead in your content types date fields.",
+  "setting.frontMatter.taxonomy.modifiedField.deprecationMessage": "This setting is deprecated and will be removed in the next major version. Please use the new `isModifiedDate` settings instead in your content types date fields.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.customType.description": "Specify the name of the custom field type to use."
+}

scripts/find-localization.js

@@ -0,0 +1,60 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const cheerio = require('cheerio');
+
+const files = glob.sync('src/**/*.ts*');
+console.log('Total files:', files.length);
+
+const enumFile = fs.createWriteStream(path.join(__dirname, '../localization.log'));
+
+// for (const file of files) {
+//   // Get the file and its contents
+//   const fileContent = fs.readFileSync(path.join(__dirname, "../", file), 'utf8');
+
+//   const regex = />[A-Za-z]{1,}/g;
+
+//   const matches = fileContent.match(regex);
+
+//   if (matches && matches.length > 0) {
+//     enumFile.write(`File: ${path.join(__dirname, "../", file)}\n`);
+//     enumFile.write(`Matches: ${matches.toString()}\n`);
+//     enumFile.write(`\n`);
+//   }
+// }
+
+for (const file of files) {
+  const fileContent = fs.readFileSync(path.join(__dirname, "../", file), 'utf8');
+
+  const $ = cheerio.load(fileContent, {
+    recognizeSelfClosing: true,
+    xmlMode: true,
+  });
+
+  const matches = [];
+
+  $('*').each(function () {
+    const node = $(this);
+
+    let text = node.contents().first().text();
+    text = text.trim();
+
+    if (text &&
+      !text.startsWith('{') &&
+      !text.includes(`{`) &&
+      !text.includes(`}`) &&
+      !text.includes(`(`) &&
+      !text.includes(`)`) &&
+      text.split('\n').length === 1) {
+      matches.push(`Text: ${text}\n`);
+    }
+  });
+
+  if (matches && matches.length > 0) {
+    enumFile.write(`File: ${path.join(__dirname, "../", file)}\n`);
+    enumFile.write(`${matches.join('')}\n`);
+    enumFile.write(`\n`);
+  }
+}
+
+enumFile.close();

scripts/generate-localization-enum.js

@@ -0,0 +1,41 @@
+const fs = require('fs');
+const path = require('path');
+
+const camlCase = (str) => {
+  const words = str.split('.');
+  const firstWord = words.shift();
+  const rest = words.map((word) => {
+    return word.charAt(0).toUpperCase() + word.slice(1);
+  });
+  return firstWord + rest.join('');
+};
+
+(async () => {
+  // Get the EN file
+  const enFile = fs.readFileSync(path.join(__dirname, '../l10n/bundle.l10n.json'), 'utf8');
+
+  // Parse the EN file
+  const en = JSON.parse(enFile);
+
+  const keys = Object.keys(en);
+
+  // Create an enum file
+  const enumFile = fs.createWriteStream(path.join(__dirname, '../src/localization/localization.enum.ts'));
+
+  // Write the enum file header
+  enumFile.write(`export enum LocalizationKey {\n`);
+
+  // Write the enum values
+  keys.forEach((key, index) => {
+    enumFile.write(`  /**\n`);
+    enumFile.write(`   * ${en[key]}\n`);
+    enumFile.write(`   */\n`);
+    enumFile.write(`  ${camlCase(key)} = '${key}'${index === keys.length - 1 ? '' : ','}\n`);
+  });
+
+  // Write the enum file footer
+  enumFile.write(`}\n`);
+
+  // Close the enum file
+  enumFile.close();
+})();

scripts/settings-export.js

@@ -16,7 +16,7 @@ for (const key of Object.keys(packageJson.contributes.configuration.properties))
 // frontMatter.content.draftField - object
 // frontMatter.content.supportedFileTypes - array
 // frontMatter.global.notifications - array
-// frontMatter.global.disabledNotificaitons - array
+// frontMatter.global.disabledNotifications - array
 // frontMatter.media.supportedMimeTypes - array
 // frontMatter.taxonomy.commaSeparatedFields - array
 

scripts/sync-localization.js

@@ -0,0 +1,70 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+
+(async () => {
+  // Get all the files from the l10n directory
+  const files = fs.readdirSync(path.join(__dirname, '../l10n'));
+
+  // Get the EN file
+  const enFile = fs.readFileSync(path.join(__dirname, '../l10n/bundle.l10n.json'), 'utf8');
+  const enContent = JSON.parse(enFile);
+  const enKeys = Object.keys(enContent);
+
+  for (const file of files) {
+    if (file.endsWith(`bundle.l10n.json`)) {
+      continue;
+    }
+
+    // Get the file content
+    const fileContent = fs.readFileSync(path.join(__dirname, `../l10n/${file}`), 'utf8');
+    let content = {};
+
+    try {
+      content = JSON.parse(fileContent);
+    } catch (e) {
+      // Ignore the error
+    }
+
+    // Loop through the EN keys
+    for (const key of enKeys) {
+      // If the key does not exist in the file, add it
+      if (!content[key]) {
+        content[key] = `🚧: ${enContent[key]}`;
+      }
+    }
+
+    // Write the file
+    fs.writeFileSync(path.join(__dirname, `../l10n/${file}`), JSON.stringify(content, null, 2), 'utf8');
+  }
+
+
+  // Package JSON
+  const enPkgFile = fs.readFileSync(path.join(__dirname, '../package.nls.json'), 'utf8');
+  const enPkgContent = JSON.parse(enPkgFile);
+  const enPkgKeys = Object.keys(enPkgContent);
+
+  const pkgFiles = glob.sync(path.join(__dirname, '../package.nls.*.json'));
+
+  for (const file of pkgFiles) {
+    const fileContent = fs.readFileSync(file, 'utf8');
+    let content = {};
+
+    try {
+      content = JSON.parse(fileContent);
+    } catch (e) {
+      // Ignore the error
+    }
+
+    // Loop through the EN keys
+    for (const key of enPkgKeys) {
+      // If the key does not exist in the file, add it
+      if (!content[key]) {
+        content[key] = `🚧: ${enPkgContent[key]}`;
+      }
+    }
+
+    // Write the file
+    fs.writeFileSync(file, JSON.stringify(content, null, 2), 'utf8');
+  }
+})();

scripts/watch-localization.js

@@ -0,0 +1,13 @@
+const fs = require('fs');
+const { exec } = require('node:child_process');
+const { join } = require('path');
+
+const localFile = '../l10n/bundle.l10n.json';
+
+console.log(`Watching for file changes on ${localFile}`);
+exec(`npm run localization:generate`)
+
+fs.watchFile(join(__dirname, localFile), (curr, prev) => {
+  console.log(`update enum`)
+  exec(`npm run localization:generate`)
+});

src/commands/Article.ts

@@ -15,11 +15,11 @@ import {
 import * as vscode from 'vscode';
 import { CustomPlaceholder, Field, TaxonomyType } from '../models';
 import { format } from 'date-fns';
-import { ArticleHelper, Settings, SlugHelper } from '../helpers';
+import { ArticleHelper, Settings, SlugHelper, TaxonomyHelper } from '../helpers';
 import { Notifications } from '../helpers/Notifications';
 import { extname, basename, parse, dirname } from 'path';
 import { COMMAND_NAME, DefaultFields } from '../constants';
-import { DashboardData } from '../models/DashboardData';
+import { DashboardData, SnippetRange } from '../models/DashboardData';
 import { DateHelper } from '../helpers/DateHelper';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { Telemetry } from '../helpers/Telemetry';
@@ -27,6 +27,8 @@ import { ParsedFrontMatter } from '../parsers';
 import { MediaListener } from '../listeners/panel';
 import { NavigationType } from '../dashboardWebView/models';
 import { processKnownPlaceholders } from '../helpers/PlaceholderHelper';
+import { Position } from 'vscode';
+import { SNIPPET } from '../constants/Snippet';
 
 export class Article {
   /**
@@ -66,7 +68,7 @@ export class Article {
     }
 
     // Add all the known options to the selection list
-    const crntOptions = Settings.getTaxonomy(type);
+    const crntOptions = (await TaxonomyHelper.get(type)) || [];
     if (crntOptions && crntOptions.length > 0) {
       for (const crntOpt of crntOptions) {
         if (!options.find((o) => o.label === crntOpt)) {
@@ -366,10 +368,12 @@ export class Article {
   /**
    * Format the date to the defined format
    */
-  public static formatDate(dateValue: Date): string {
+  public static formatDate(dateValue: Date, fieldDateFormat?: string): string {
     const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
 
-    if (dateFormat && typeof dateFormat === 'string') {
+    if (fieldDateFormat) {
+      return format(dateValue, DateHelper.formatUpdate(fieldDateFormat) as string);
+    } else if (dateFormat && typeof dateFormat === 'string') {
       return format(dateValue, DateHelper.formatUpdate(dateFormat) as string);
     } else {
       return typeof dateValue.toISOString === 'function'
@@ -418,9 +422,54 @@ export class Article {
       return;
     }
 
-    const position = editor.selection.active;
+    let position = editor.selection.active;
     const selectionText = editor.document.getText(editor.selection);
 
+    // Check for snippet wrapper
+    const selectionStart = editor.selection.start;
+    const docText = editor.document.getText();
+    const docTextLines = docText.split(`\n`);
+    const snippetEndAfterPos = docTextLines.findIndex((value: string, idx: number) => {
+      return value.includes(SNIPPET.wrapper.end) && idx >= selectionStart.line;
+    });
+
+    const snippetStartAfterPos = docTextLines.findIndex((value: string, idx: number) => {
+      return value.includes(SNIPPET.wrapper.start) && idx > selectionStart.line;
+    });
+
+    const linesBeforeSelection = docTextLines.slice(0, selectionStart.line + 1);
+
+    let snippetStartBeforePos = linesBeforeSelection
+      .reverse()
+      .findIndex((r) => r.includes(SNIPPET.wrapper.start));
+
+    if (snippetStartBeforePos > -1) {
+      snippetStartBeforePos = linesBeforeSelection.length - snippetStartBeforePos - 1;
+    }
+
+    let snippetInfo: { id: string; fields: any[] } | undefined = undefined;
+    let range: SnippetRange | undefined = undefined;
+    if (
+      snippetEndAfterPos > -1 &&
+      (snippetStartAfterPos > snippetEndAfterPos || snippetStartAfterPos === -1) &&
+      snippetStartBeforePos
+    ) {
+      // Content was within a snippet block, get all the text
+      const snippetBlock = docTextLines.slice(snippetStartBeforePos, snippetEndAfterPos + 1);
+      const firstLine = snippetBlock[0];
+
+      range = {
+        start: new Position(snippetStartBeforePos, 0),
+        end: new Position(snippetEndAfterPos, snippetBlock[snippetBlock.length - 1].length)
+      };
+
+      const data = firstLine
+        .replace(`<!-- ${SNIPPET.wrapper.start} data:`, '')
+        .replace(' -->', '')
+        .replace(/'/g, '"');
+      snippetInfo = JSON.parse(data);
+    }
+
     const article = ArticleHelper.getFrontMatter(editor);
 
     await vscode.commands.executeCommand(COMMAND_NAME.dashboard, {
@@ -430,7 +479,9 @@ export class Article {
         filePath: editor.document.uri.fsPath,
         fieldName: basename(editor.document.uri.fsPath),
         position,
-        selection: selectionText
+        range,
+        selection: selectionText,
+        snippetInfo
       }
     } as DashboardData);
   }

src/commands/Backers.ts

@@ -3,9 +3,9 @@ import { COMMAND_NAME, CONTEXT } from '../constants';
 import { Extension } from '../helpers';
 import { Credentials } from '../services/Credentials';
 import fetch from 'node-fetch';
-import { ExplorerView } from '../explorerView/ExplorerView';
 import { Dashboard } from './Dashboard';
 import { SettingsListener } from '../listeners/panel';
+import { PanelProvider } from '../panelWebView/PanelProvider';
 
 export class Backers {
   private static creds: Credentials | null = null;
@@ -61,8 +61,8 @@ export class Backers {
       await ext.setState(CONTEXT.backer, true, 'global');
 
       if (!prevData) {
-        const explorerView = ExplorerView.getInstance();
-        if (explorerView.visible) {
+        const PanelView = PanelProvider.getInstance();
+        if (PanelView.visible) {
           SettingsListener.getSettings();
         }
 

src/commands/Dashboard.ts

@@ -22,7 +22,8 @@ import {
   ExtensionListener,
   SnippetListener,
   TaxonomyListener,
-  LogListener
+  LogListener,
+  LocalizationListener
 } from '../listeners/dashboard';
 import { MediaListener as PanelMediaListener } from '../listeners/panel';
 import { GitListener, ModeListener } from '../listeners/general';
@@ -166,6 +167,7 @@ export class Dashboard {
     Dashboard.webview.webview.onDidReceiveMessage(async (msg) => {
       Logger.info(`Receiving message from webview: ${msg.command}`);
 
+      LocalizationListener.process(msg);
       DashboardListener.process(msg);
       ExtensionListener.process(msg);
       MediaListener.process(msg);
@@ -186,6 +188,9 @@ export class Dashboard {
    * @returns The webview
    */
   public static getWebview() {
+    if (Dashboard.isDisposed) {
+      return undefined;
+    }
     return Dashboard.webview?.webview;
   }
 
@@ -265,6 +270,14 @@ export class Dashboard {
       }`
     ];
 
+    const frontMatterUri = webView
+      .asWebviewUri(
+        SettingsHelper.projectConfigPath ? Uri.file(SettingsHelper.projectConfigPath) : Uri.file('')
+      )
+      .toString();
+
+    const webviewUrl = frontMatterUri.replace(`/${SettingsHelper.globalFile}`, '');
+
     return `
       <!DOCTYPE html>
       <html lang="en" style="width:100%;height:100%;margin:0;padding:0;">
@@ -280,7 +293,9 @@ export class Dashboard {
       isBeta ? 'BETA' : 'main'
     }" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${
       version.usedVersion ? '' : `data-showWelcome="true"`
-    } ${experimental ? `data-experimental="${experimental}"` : ''} ></div>
+    } ${
+      experimental ? `data-experimental="${experimental}"` : ''
+    } data-webview-url="${webviewUrl}" ></div>
 
         ${(scriptsToLoad || [])
           .map((script) => {

src/commands/Folders.ts

@@ -9,7 +9,7 @@ import {
 } from './../constants';
 import { commands, Uri, workspace, window } from 'vscode';
 import { basename, dirname, join, relative, sep } from 'path';
-import { ContentFolder, FileInfo, FolderInfo } from '../models';
+import { ContentFolder, FileInfo, FolderInfo, StaticFolder } from '../models';
 import uniqBy = require('lodash.uniqby');
 import { Template } from './Template';
 import { Notifications } from '../helpers/Notifications';
@@ -172,26 +172,32 @@ export class Folders {
    * @returns
    */
   public static getStaticFolderRelativePath(): string | undefined {
-    let staticFolder = Settings.get<string>(SETTING_CONTENT_STATIC_FOLDER);
+    const staticFolder = Settings.get<string | StaticFolder>(SETTING_CONTENT_STATIC_FOLDER);
+
+    let assetFolder: string | undefined;
+
+    if (staticFolder && typeof staticFolder !== 'string' && staticFolder.path) {
+      assetFolder = staticFolder.path;
+    } else if (staticFolder && typeof staticFolder === 'string') {
+      assetFolder = staticFolder;
+    }
 
     if (
-      staticFolder &&
-      (staticFolder.includes(WORKSPACE_PLACEHOLDER) ||
-        staticFolder === '/' ||
-        staticFolder === './')
+      assetFolder &&
+      (assetFolder.includes(WORKSPACE_PLACEHOLDER) || assetFolder === '/' || assetFolder === './')
     ) {
-      staticFolder =
-        staticFolder === '/' || staticFolder === './'
-          ? Folders.getAbsFilePath('[[workspace]]')
-          : Folders.getAbsFilePath(staticFolder);
+      assetFolder =
+        assetFolder === '/' || assetFolder === './'
+          ? Folders.getAbsFilePath(WORKSPACE_PLACEHOLDER)
+          : Folders.getAbsFilePath(assetFolder);
       const wsFolder = Folders.getWorkspaceFolder();
       if (wsFolder) {
-        const relativePath = relative(parseWinPath(wsFolder.fsPath), parseWinPath(staticFolder));
+        const relativePath = relative(parseWinPath(wsFolder.fsPath), parseWinPath(assetFolder));
         return relativePath === '' ? '/' : relativePath;
       }
     }
 
-    return staticFolder;
+    return assetFolder;
   }
 
   /**
@@ -272,26 +278,23 @@ export class Folders {
       for (const folder of folders) {
         try {
           const folderPath = parseWinPath(folder.path);
-          let projectStart = parseWinPath(folder.path).replace(wsFolder, '');
-
-          if (typeof projectStart === 'string') {
-            projectStart = projectStart.replace(/\\/g, '/');
-            projectStart = projectStart.startsWith('/') ? projectStart.substring(1) : projectStart;
 
+          if (typeof folderPath === 'string') {
             let files: Uri[] = [];
 
             for (const fileType of supportedFiles || DEFAULT_FILE_TYPES) {
               let filePath = join(
-                projectStart,
+                folderPath,
                 folder.excludeSubdir ? '/' : '**',
                 `*${fileType.startsWith('.') ? '' : '.'}${fileType}`
               );
 
-              if (projectStart === '' && folder.excludeSubdir) {
+              if (folderPath === '' && folder.excludeSubdir) {
                 filePath = `*${fileType.startsWith('.') ? '' : '.'}${fileType}`;
               }
 
-              let foundFiles = await workspace.findFiles(filePath, '**/node_modules/**');
+              let foundFiles = await Folders.findFiles(filePath);
+
               // Make sure these file are coming from the folder path (this could be an issue in multi-root workspaces)
               foundFiles = foundFiles.filter((f) => parseWinPath(f.fsPath).startsWith(folderPath));
 
@@ -460,7 +463,13 @@ export class Folders {
   private static absWsFolder(folder: ContentFolder, wsFolder?: Uri) {
     const isWindows = process.platform === 'win32';
     let absPath = folder.path.replace(WORKSPACE_PLACEHOLDER, parseWinPath(wsFolder?.fsPath || ''));
+
+    if (absPath.includes('../')) {
+      absPath = join(absPath);
+    }
+
     absPath = isWindows ? absPath.split('/').join('\\') : absPath;
+
     return parseWinPath(absPath);
   }
 
@@ -577,4 +586,18 @@ export class Folders {
       });
     });
   }
+
+  /**
+   * Find all files
+   * @param pattern
+   * @returns
+   */
+  private static async findFiles(pattern: string): Promise<Uri[]> {
+    return new Promise((resolve) => {
+      glob(pattern, { ignore: '**/node_modules/**' }, (err, files) => {
+        const allFiles = files.map((file) => Uri.file(file));
+        resolve(allFiles);
+      });
+    });
+  }
 }

src/commands/Preview.ts

@@ -11,8 +11,8 @@ import {
   SETTING_DATE_FORMAT
 } from './../constants';
 import { ArticleHelper } from './../helpers/ArticleHelper';
-import { join } from 'path';
-import { commands, env, Uri, ViewColumn, window } from 'vscode';
+import { join, parse } from 'path';
+import { commands, env, Uri, ViewColumn, window, WebviewPanel } from 'vscode';
 import { Extension, parseWinPath, processKnownPlaceholders, Settings } from '../helpers';
 import { ContentFolder, ContentType, PreviewSettings } from '../models';
 import { format } from 'date-fns';
@@ -21,8 +21,13 @@ import { Article } from '.';
 import { urlJoin } from 'url-join-ts';
 import { WebviewHelper } from '@estruyf/vscode';
 import { Folders } from './Folders';
+import { DataListener } from '../listeners/panel';
+import { ParsedFrontMatter } from '../parsers';
 
 export class Preview {
+  public static filePath: string | undefined = undefined;
+  public static webviews: { [filePath: string]: WebviewPanel } = {};
+
   /**
    * Init the preview
    */
@@ -42,106 +47,16 @@ export class Preview {
     }
 
     const editor = window.activeTextEditor;
+    const crntFilePath = editor?.document.uri.fsPath;
+    this.filePath = crntFilePath;
+
+    if (crntFilePath && this.webviews[crntFilePath]) {
+      this.webviews[crntFilePath].reveal();
+      return;
+    }
+
     const article = editor ? ArticleHelper.getFrontMatter(editor) : null;
-    let slug = article?.data ? article.data.slug : '';
-
-    let pathname = settings.pathname;
-
-    let selectedFolder: ContentFolder | undefined | null = null;
-    const filePath = parseWinPath(editor?.document.uri.fsPath);
-
-    let contentType: ContentType | undefined = undefined;
-    if (article?.data) {
-      contentType = ArticleHelper.getContentType(article.data);
-    }
-
-    // Check if there is a pathname defined on content folder level
-    const folders = Folders.get();
-    if (folders.length > 0) {
-      const foldersWithPath = folders.filter((folder) => folder.previewPath);
-
-      for (const folder of foldersWithPath) {
-        const folderPath = parseWinPath(folder.path);
-        if (filePath.startsWith(folderPath)) {
-          if (!selectedFolder || selectedFolder.path.length < folderPath.length) {
-            selectedFolder = folder;
-          }
-        }
-      }
-
-      if (!selectedFolder && article?.data && contentType && !contentType.previewPath) {
-        // Try to find the folder by content type
-        const crntFolders = folders.filter((folder) =>
-          folder.contentTypes?.includes((contentType as ContentType).name)
-        );
-
-        if (crntFolders && crntFolders.length === 1) {
-          selectedFolder = crntFolders[0];
-        } else if (crntFolders && crntFolders.length > 1) {
-          selectedFolder = await Preview.askUserToPickFolder(crntFolders);
-        } else {
-          selectedFolder = await Preview.askUserToPickFolder(folders.filter((f) => f.previewPath));
-        }
-      }
-
-      if (selectedFolder && selectedFolder.previewPath) {
-        pathname = selectedFolder.previewPath;
-      }
-    }
-
-    // Check if there is a pathname defined on content type level
-    if (article?.data) {
-      if (contentType && contentType.previewPath) {
-        pathname = contentType.previewPath;
-      }
-    }
-
-    if (!slug) {
-      slug = Article.getSlug();
-    }
-
-    if (pathname) {
-      // Known placeholders
-      const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
-      pathname = processKnownPlaceholders(pathname, article?.data?.title, dateFormat);
-
-      // Custom placeholders
-      pathname = await ArticleHelper.processCustomPlaceholders(
-        pathname,
-        article?.data?.title,
-        filePath
-      );
-
-      // Process the path placeholders - {{pathToken.<integer>}}
-      if (filePath) {
-        const wsFolder = Folders.getWorkspaceFolder();
-        // Get relative file path
-        const folderPath = wsFolder ? parseWinPath(wsFolder.fsPath) : '';
-        const relativePath = filePath.replace(folderPath, '');
-        pathname = processPathPlaceholders(pathname, relativePath, filePath, selectedFolder);
-      }
-
-      // Support front matter placeholders - {{fm.<field>}}
-      pathname = processFmPlaceholders(pathname, article?.data);
-
-      try {
-        const articleDate = ArticleHelper.getDate(article);
-        slug = join(
-          format(articleDate || new Date(), DateHelper.formatUpdate(pathname) as string),
-          slug
-        );
-      } catch (error) {
-        slug = join(pathname, slug);
-      }
-    }
-
-    // Make sure there are no backslashes in the slug
-    slug = parseWinPath(slug);
-
-    // Verify if the slug doesn't end with _index or index
-    if (slug.endsWith('_index') || slug.endsWith('index')) {
-      slug = slug.substring(0, slug.endsWith('_index') ? slug.length - 6 : slug.length - 5);
-    }
+    const slug = await this.getContentSlug(article, editor?.document.uri.fsPath);
 
     // Create the preview webview
     const webView = window.createWebviewPanel(
@@ -156,16 +71,38 @@ export class Preview {
       }
     );
 
+    if (crntFilePath) {
+      this.webviews[crntFilePath] = webView;
+    }
+
     webView.iconPath = {
       dark: Uri.file(join(extensionPath, 'assets/icons/frontmatter-short-dark.svg')),
       light: Uri.file(join(extensionPath, 'assets/icons/frontmatter-short-light.svg'))
     };
 
-    const crntUrl = settings.host.startsWith('http') ? settings.host : `http://${settings.host}`;
-    const localhostUrl = await env.asExternalUri(Uri.parse(crntUrl));
+    const localhostUrl = await this.getLocalServerUrl();
 
     const cspSource = webView.webview.cspSource;
 
+    webView.onDidDispose(() => {
+      this.filePath = undefined;
+      if (crntFilePath) {
+        delete this.webviews[crntFilePath];
+      }
+      webView.dispose();
+    });
+
+    webView.onDidChangeViewState(async (e) => {
+      if (e.webviewPanel.visible) {
+        this.filePath = crntFilePath;
+
+        if (crntFilePath) {
+          const article = await ArticleHelper.getFrontMatterByPath(crntFilePath);
+          DataListener.pushMetadata(article?.data);
+        }
+      }
+    });
+
     webView.webview.onDidReceiveMessage((message) => {
       switch (message.command) {
         case PreviewCommands.toVSCode.open:
@@ -243,6 +180,159 @@ export class Preview {
     Telemetry.send(TelemetryEvent.openPreview);
   }
 
+  /**
+   * Update the url of the preview webview
+   * @param filePath
+   * @param slug
+   */
+  public static async updatePageUrl(filePath: string, slug?: string) {
+    const webView = this.webviews[filePath];
+    if (webView) {
+      const localhost = await this.getLocalServerUrl();
+      const article = await ArticleHelper.getFrontMatterByPath(filePath);
+      const slug = await this.getContentSlug(article, filePath);
+
+      webView.webview.postMessage({
+        command: PreviewCommands.toWebview.updateUrl,
+        payload: urlJoin(localhost.toString(), slug || '')
+      });
+    }
+  }
+
+  /**
+   * Retrieve the slug of the content
+   * @param article
+   * @param filePath
+   * @returns
+   */
+  private static async getContentSlug(
+    article: ParsedFrontMatter | null,
+    filePath?: string
+  ): Promise<string | undefined> {
+    if (!filePath) {
+      return;
+    }
+
+    let slug = article?.data ? article.data.slug : '';
+
+    const settings = this.getSettings();
+    let pathname = settings.pathname;
+
+    let selectedFolder: ContentFolder | undefined | null = null;
+    filePath = parseWinPath(filePath);
+
+    let contentType: ContentType | undefined = undefined;
+    if (article?.data) {
+      contentType = ArticleHelper.getContentType(article.data);
+    }
+
+    // Check if there is a pathname defined on content folder level
+    const folders = Folders.get();
+    if (folders.length > 0) {
+      const foldersWithPath = folders.filter((folder) => folder.previewPath);
+
+      for (const folder of foldersWithPath) {
+        const folderPath = parseWinPath(folder.path);
+        if (filePath.startsWith(folderPath)) {
+          if (!selectedFolder || selectedFolder.path.length < folderPath.length) {
+            selectedFolder = folder;
+          }
+        }
+      }
+
+      if (!selectedFolder && article?.data && contentType && !contentType.previewPath) {
+        // Try to find the folder by content type
+        const crntFolders = folders.filter((folder) =>
+          folder.contentTypes?.includes((contentType as ContentType).name)
+        );
+
+        if (crntFolders && crntFolders.length === 1) {
+          selectedFolder = crntFolders[0];
+        } else if (crntFolders && crntFolders.length > 1) {
+          selectedFolder = await Preview.askUserToPickFolder(crntFolders);
+        } else {
+          selectedFolder = await Preview.askUserToPickFolder(folders.filter((f) => f.previewPath));
+        }
+      }
+
+      if (selectedFolder && selectedFolder.previewPath) {
+        pathname = selectedFolder.previewPath;
+      }
+    }
+
+    // Check if there is a pathname defined on content type level
+    if (article?.data) {
+      if (contentType && contentType.previewPath) {
+        pathname = contentType.previewPath;
+      }
+    }
+
+    if (!slug) {
+      slug = Article.getSlug();
+    }
+
+    if (pathname) {
+      // Known placeholders
+      const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
+      pathname = processKnownPlaceholders(pathname, article?.data?.title, dateFormat);
+
+      // Custom placeholders
+      pathname = await ArticleHelper.processCustomPlaceholders(
+        pathname,
+        article?.data?.title,
+        filePath
+      );
+
+      // Process the path placeholders - {{pathToken.<integer>}}
+      if (filePath) {
+        const wsFolder = Folders.getWorkspaceFolder();
+        // Get relative file path
+        const folderPath = wsFolder ? parseWinPath(wsFolder.fsPath) : '';
+        const relativePath = filePath.replace(folderPath, '');
+        pathname = processPathPlaceholders(pathname, relativePath, filePath, selectedFolder);
+
+        const file = parse(filePath);
+        if (file.name.toLowerCase() === 'index' && pathname.endsWith(slug)) {
+          slug = '';
+        }
+      }
+
+      // Support front matter placeholders - {{fm.<field>}}
+      pathname = processFmPlaceholders(pathname, article?.data);
+
+      try {
+        const articleDate = ArticleHelper.getDate(article);
+        slug = join(
+          format(articleDate || new Date(), DateHelper.formatUpdate(pathname) as string),
+          slug
+        );
+      } catch (error) {
+        slug = join(pathname, slug);
+      }
+    }
+
+    // Make sure there are no backslashes in the slug
+    slug = parseWinPath(slug);
+
+    // Verify if the slug doesn't end with _index or index
+    if (slug.endsWith('_index') || slug.endsWith('index')) {
+      slug = slug.substring(0, slug.endsWith('_index') ? slug.length - 6 : slug.length - 5);
+    }
+
+    return slug;
+  }
+
+  /**
+   * Retrieve the localhost url
+   * @returns
+   */
+  private static async getLocalServerUrl() {
+    const settings = Preview.getSettings();
+    const crntUrl = settings?.host?.startsWith('http') ? settings.host : `http://${settings.host}`;
+    const localhostUrl = await env.asExternalUri(Uri.parse(crntUrl));
+    return localhostUrl;
+  }
+
   /**
    * Retrieve all settings related to the preview command
    */

src/commands/Project.ts

@@ -5,7 +5,14 @@ import { join } from 'path';
 import { Notifications } from '../helpers/Notifications';
 import { Template } from './Template';
 import { Folders } from './Folders';
-import { Extension, FrameworkDetector, Logger, MediaLibrary, Settings } from '../helpers';
+import {
+  Extension,
+  FrameworkDetector,
+  Logger,
+  MediaLibrary,
+  Settings,
+  TaxonomyHelper
+} from '../helpers';
 import {
   COMMAND_NAME,
   SETTING_CONTENT_DEFAULT_FILETYPE,
@@ -41,6 +48,7 @@ categories: []
     // If it has a project file, initialize the media library
     if (hasProjectFile) {
       MediaLibrary.getInstance();
+      TaxonomyHelper.initDb();
     }
     return hasProjectFile;
   }
@@ -64,6 +72,9 @@ categories: []
       // Initialize the media library
       MediaLibrary.getInstance();
 
+      // Initialize the taxonomy database
+      TaxonomyHelper.initDb();
+
       Telemetry.send(TelemetryEvent.initialization);
 
       // Check if you can find the framework

src/commands/Settings.ts

@@ -1,8 +1,8 @@
 import { TaxonomyHelper } from './../helpers/TaxonomyHelper';
 import * as vscode from 'vscode';
 import { TaxonomyType } from '../models';
-import { SETTING_TAXONOMY_TAGS, SETTING_TAXONOMY_CATEGORIES, EXTENSION_NAME } from '../constants';
-import { ArticleHelper, Settings as SettingsHelper, FilesHelper } from '../helpers';
+import { EXTENSION_NAME } from '../constants';
+import { ArticleHelper, FilesHelper } from '../helpers';
 import { FrontMatterParser } from '../parsers';
 import { Notifications } from '../helpers/Notifications';
 
@@ -22,12 +22,7 @@ export class Settings {
     });
 
     if (newOption) {
-      const configSetting =
-        type === TaxonomyType.Tag ? SETTING_TAXONOMY_TAGS : SETTING_TAXONOMY_CATEGORIES;
-      let options = SettingsHelper.get(configSetting, true) as string[];
-      if (!options) {
-        options = [];
-      }
+      let options = (await TaxonomyHelper.get(type)) || [];
 
       if (options.find((o) => o === newOption)) {
         Notifications.info(
@@ -37,7 +32,7 @@ export class Settings {
       }
 
       options.push(newOption);
-      await SettingsHelper.updateTaxonomy(type, options);
+      TaxonomyHelper.update(type, options);
 
       // Ask if the new term needs to be added to the page
       const addToPage = await vscode.window.showQuickPick(['yes', 'no'], {
@@ -128,7 +123,7 @@ export class Settings {
         }
 
         // Retrieve the currently known tags, and add the new ones
-        let crntTags: string[] = SettingsHelper.get(SETTING_TAXONOMY_TAGS, true) as string[];
+        let crntTags: string[] = (await TaxonomyHelper.get(TaxonomyType.Tag)) || [];
         if (!crntTags) {
           crntTags = [];
         }
@@ -136,13 +131,10 @@ export class Settings {
         // Update the tags and filter out the duplicates
         crntTags = [...new Set(crntTags)];
         crntTags = crntTags.sort().filter((t) => !!t);
-        await SettingsHelper.update(SETTING_TAXONOMY_TAGS, crntTags, true);
+        TaxonomyHelper.update(TaxonomyType.Tag, crntTags);
 
         // Retrieve the currently known tags, and add the new ones
-        let crntCategories: string[] = SettingsHelper.get(
-          SETTING_TAXONOMY_CATEGORIES,
-          true
-        ) as string[];
+        let crntCategories: string[] = (await TaxonomyHelper.get(TaxonomyType.Category)) || [];
         if (!crntCategories) {
           crntCategories = [];
         }
@@ -150,7 +142,7 @@ export class Settings {
         // Update the categories and filter out the duplicates
         crntCategories = [...new Set(crntCategories)];
         crntCategories = crntCategories.sort().filter((c) => !!c);
-        await SettingsHelper.update(SETTING_TAXONOMY_CATEGORIES, crntCategories, true);
+        TaxonomyHelper.update(TaxonomyType.Category, crntCategories);
 
         // Done
         Notifications.info(
@@ -176,7 +168,7 @@ export class Settings {
     }
 
     const type = taxType === 'Tag' ? TaxonomyType.Tag : TaxonomyType.Category;
-    const options = SettingsHelper.getTaxonomy(type);
+    const options = (await TaxonomyHelper.get(type)) || [];
 
     if (!options || options.length === 0) {
       Notifications.info(`No ${type === TaxonomyType.Tag ? 'tags' : 'categories'} configured.`);

src/commands/StatusListener.ts

@@ -9,12 +9,13 @@ import {
 } from './../constants';
 import * as vscode from 'vscode';
 import { ArticleHelper, Notifications, SeoHelper, Settings } from '../helpers';
-import { ExplorerView } from '../explorerView/ExplorerView';
+import { PanelProvider } from '../panelWebView/PanelProvider';
 import { DefaultFields } from '../constants';
 import { ContentType } from '../helpers/ContentType';
 import { DataListener } from '../listeners/panel';
 import { commands } from 'vscode';
 import { Field } from '../models';
+import { Preview } from './Preview';
 
 export class StatusListener {
   /**
@@ -36,11 +37,22 @@ export class StatusListener {
     }
 
     const editor = vscode.window.activeTextEditor;
-    if (editor && ArticleHelper.isSupportedFile()) {
+    let document = editor?.document;
+
+    if (!document) {
+      const filePath = Preview.filePath;
+      if (filePath) {
+        document = await vscode.workspace.openTextDocument(vscode.Uri.file(filePath));
+      }
+    }
+
+    if (document && ArticleHelper.isSupportedFile(document)) {
       try {
         commands.executeCommand('setContext', CONTEXT.isValidFile, true);
 
-        const article = ArticleHelper.getFrontMatter(editor);
+        const article = editor
+          ? ArticleHelper.getFrontMatter(editor)
+          : await ArticleHelper.getFrontMatterByPath(document.uri.fsPath);
 
         // Update the StatusBar based on the article draft state
         if (article && typeof article.data['draft'] !== 'undefined') {
@@ -65,19 +77,21 @@ export class StatusListener {
           const descriptionField =
             (Settings.get(SETTING_SEO_DESCRIPTION_FIELD) as string) || DefaultFields.Description;
 
-          if (article.data[titleField] && titleLength > -1) {
+          if (editor && article.data[titleField] && titleLength > -1) {
             SeoHelper.checkLength(editor, collection, article, titleField, titleLength);
           }
 
-          if (article.data[descriptionField] && descLength > -1) {
+          if (editor && article.data[descriptionField] && descLength > -1) {
             SeoHelper.checkLength(editor, collection, article, descriptionField, descLength);
           }
 
           // Check the required fields
-          StatusListener.verifyRequiredFields(editor, article, collection);
+          if (editor) {
+            StatusListener.verifyRequiredFields(editor, article, collection);
+          }
         }
 
-        const panel = ExplorerView.getInstance();
+        const panel = PanelProvider.getInstance();
         if (panel && panel.visible) {
           DataListener.pushMetadata(article?.data);
         }
@@ -89,7 +103,7 @@ export class StatusListener {
     } else {
       commands.executeCommand('setContext', CONTEXT.isValidFile, false);
 
-      const panel = ExplorerView.getInstance();
+      const panel = PanelProvider.getInstance();
       if (panel && panel.visible) {
         DataListener.pushMetadata(null);
       }

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>
       )}

src/components/uniforms-frontmatter/ListAddField.tsx

@@ -15,21 +15,17 @@ export type ListAddFieldProps = HTMLFieldProps<
 function ListAdd({ disabled, initialCount, name, readOnly, value, ...props }: ListAddFieldProps) {
   const nameParts = joinName(null, name);
   const parentName = joinName(nameParts.slice(0, -1));
-  const parent = {
-    maxCount: 0,
-    value: [] as ValueType[],
-    ...useField<ParentFieldType, ValueType[]>(
-      parentName,
-      { initialCount },
-      { absoluteName: true }
-    )[0]
-  };
 
-  const limitNotReached = !disabled && !(parent.maxCount <= parent.value.length);
+  const parent = useField<
+    { initialCount?: number; maxCount?: number },
+    unknown[]
+  >(parentName, { initialCount }, { absoluteName: true })[0];
+
+  const limitNotReached = !disabled && !(parent.maxCount! <= parent.value!.length);
 
   function onAction(event: React.KeyboardEvent | React.MouseEvent) {
     if (limitNotReached && !readOnly && (!('key' in event) || event.key === 'Enter')) {
-      parent.onChange(parent.value.concat([value]));
+      parent.onChange(parent.value!.concat([value]));
     }
   }
 

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>
   );
 }

src/constants/FrameworkDetectors.ts

@@ -3,7 +3,7 @@ export const FrameworkDetectors = [
     framework: {
       name: 'astro',
       dist: 'dist',
-      static: 'public',
+      static: ['public', 'src/assets'],
       build: 'npm run build',
       server: 'http://localhost:3000'
     },

src/constants/GeneralCommands.ts

@@ -2,10 +2,12 @@ export const GeneralCommands = {
   toWebview: {
     setMode: 'setMode',
     gitSyncingStart: 'gitSyncingStart',
-    gitSyncingEnd: 'gitSyncingEnd'
+    gitSyncingEnd: 'gitSyncingEnd',
+    setLocalization: 'setLocalization'
   },
   toVSCode: {
     openLink: 'openLink',
-    gitSync: 'gitSync'
+    gitSync: 'gitSync',
+    getLocalization: 'getLocalization'
   }
 };

src/constants/LocalStore.ts

@@ -3,5 +3,6 @@ export const LocalStore = {
   contentFolder: 'content',
   databaseFolder: 'database',
   templatesFolder: 'templates',
-  mediaDatabaseFile: 'mediaDb.json'
+  mediaDatabaseFile: 'mediaDb.json',
+  taxonomyDatabaseFile: 'taxonomyDb.json'
 };

src/constants/PreviewCommands.ts

@@ -2,5 +2,7 @@ export const PreviewCommands = {
   toVSCode: {
     open: `preview.open`
   },
-  fromVSCode: {}
+  toWebview: {
+    updateUrl: `preview.updateUrl`
+  }
 };

src/constants/SentryIgnore.ts

@@ -0,0 +1,5 @@
+export const SentryIgnore = [
+  `ResizeObserver loop limit exceeded`,
+  `Cannot read properties of undefined (reading 'unobserve')`,
+  `TypeError: Cannot read properties of undefined (reading 'unobserve')`
+];

src/constants/Snippet.ts

@@ -0,0 +1,6 @@
+export const SNIPPET = {
+  wrapper: {
+    start: `FM:Snippet:Start`,
+    end: `FM:Snippet:End`
+  }
+};

src/constants/TelemetryEvent.ts

@@ -26,7 +26,7 @@ export const TelemetryEvent = {
   insertMediaToContent: 'insertMediaToContent',
   insertFileToContent: 'insertFileToContent',
   updateMediaMetadata: 'updateMediaMetadata',
-  openExplorerView: 'openExplorerView',
+  openPanelWebview: 'openPanelWebview',
 
   // Chatbot
   openChatbot: 'openChatbot',

src/constants/index.ts

@@ -12,6 +12,8 @@ export * from './LocalStore';
 export * from './Navigation';
 export * from './NotificationType';
 export * from './PreviewCommands';
+export * from './SentryIgnore';
+export * from './Snippet';
 export * from './StaticFolderPlaceholder';
 export * from './TelemetryEvent';
 export * from './charCode';

src/constants/settings.ts

@@ -76,6 +76,13 @@ export const SETTING_DASHBOARD_OPENONSTART = 'dashboard.openOnStart';
 export const SETTING_DASHBOARD_CONTENT_TAGS = 'dashboard.content.cardTags';
 export const SETTING_DASHBOARD_CONTENT_PAGINATION = 'dashboard.content.pagination';
 
+// Content cards
+export const SETTING_DASHBOARD_CONTENT_CARD_STATE = 'dashboard.content.card.fields.state';
+export const SETTING_DASHBOARD_CONTENT_CARD_DATE = 'dashboard.content.card.fields.date';
+export const SETTING_DASHBOARD_CONTENT_CARD_TITLE = 'dashboard.content.card.fields.title';
+export const SETTING_DASHBOARD_CONTENT_CARD_DESCRIPTION =
+  'dashboard.content.card.fields.description';
+
 export const SETTING_DATA_FILES = 'data.files';
 export const SETTING_DATA_FOLDERS = 'data.folders';
 export const SETTING_DATA_TYPES = 'data.types';
@@ -94,6 +101,8 @@ export const SETTING_GIT_SUBMODULE_PUSH = 'git.submodule.push';
 export const SETTING_GIT_SUBMODULE_BRANCH = 'git.submodule.branch';
 export const SETTING_GIT_SUBMODULE_FOLDER = 'git.submodule.folder';
 
+export const SETTING_SNIPPETS_WRAPPER = 'snippets.wrapper.enabled';
+
 /**
  * Sponsors only settings
  */

src/dashboardWebView/DashboardMessage.ts

@@ -12,6 +12,7 @@ export enum DashboardMessage {
   initializeProject = 'initializeProject',
   setFramework = 'setFramework',
   addFolder = 'addFolder',
+  addAssetsFolder = 'addAssetsFolder',
 
   // Content dashboard
   getData = 'getData',

src/dashboardWebView/components/App.tsx

@@ -19,6 +19,8 @@ import { UnknownView } from './UnknownView';
 import { ErrorBoundary } from '@sentry/react';
 import { ErrorView } from './ErrorView';
 import { DashboardMessage } from '../DashboardMessage';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../localization';
 
 export interface IAppProps {
   showWelcome: boolean;
@@ -27,7 +29,7 @@ export interface IAppProps {
 export const App: React.FunctionComponent<IAppProps> = ({
   showWelcome
 }: React.PropsWithChildren<IAppProps>) => {
-  const { loading, pages, settings } = useMessages();
+  const { loading, pages, settings, localeReady } = useMessages();
   const view = useRecoilValue(DashboardViewSelector);
   const mode = useRecoilValue(ModeAtom);
   const [isDevMode, setIsDevMode] = useState(false);
@@ -67,7 +69,7 @@ export const App: React.FunctionComponent<IAppProps> = ({
     }
   }, []);
 
-  if (!settings) {
+  if (!settings || !localeReady) {
     return <Spinner />;
   }
 
@@ -96,19 +98,21 @@ Stack: ${componentStack}`
         {
           isDevMode && (
             <div className="relative p-2 flex justify-center items-center bg-[var(--vscode-statusBar-debuggingBackground)] text-[var(--vscode-statusBar-debuggingForeground)]">
-              <span className='absolute left-2'>Development mode</span>
+              <span className='absolute left-2'>
+                {l10n.t(LocalizationKey.developerTitle)}
+              </span>
 
               <a
                 className="ml-2 px-2 hover:text-[var(--vscode-statusBar-debuggingForeground)] hover:bg-[var(--vscode-statusBarItem-hoverBackground)] hover:outline-none focus:outline-none"
                 href={`command:workbench.action.webview.reloadWebviewAction`}
-                title="Reload the dashboard">
-                Reload
+                title={l10n.t(LocalizationKey.developerReloadTitle)}>
+                {l10n.t(LocalizationKey.developerReloadLabel)}
               </a>
               <a
                 className="ml-2 px-2 hover:text-[var(--vscode-statusBar-debuggingForeground)] hover:bg-[var(--vscode-statusBarItem-hoverBackground)] hover:outline-none focus:outline-none"
                 href={`command:workbench.action.webview.openDeveloperTools`}
-                title="Open DevTools">
-                DevTools
+                title={l10n.t(LocalizationKey.developerDevToolsTitle)}>
+                {l10n.t(LocalizationKey.developerDevToolsLabel)}
               </a>
             </div>
           )

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>
   );

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>
           )
         }

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}

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>
   );

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>
 

src/dashboardWebView/components/Common/DateField.tsx

@@ -30,7 +30,7 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({
   }
 
   return (
-    <span className={`${className || ''} text-xs ${getColors(`text-vulcan-100 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)}`}>
+    <span className={`date__field ${className || ''} text-xs ${getColors(`text-vulcan-100 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)}`}>
       {dateValue}
     </span>
   );

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}
         />

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 { messageHandler } from '@estruyf/vscode/dist/client';
+import useExtensibility from '../../hooks/useExtensibility';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IItemProps extends Page { }
 
@@ -28,25 +30,56 @@ export const Item: React.FunctionComponent<IItemProps> = ({
   const view = useRecoilValue(ViewSelector);
   const settings = useRecoilValue(SettingsSelector);
   const draftField = useMemo(() => settings?.draftField, [settings]);
-  const [imageHtml, setImageHtml] = useState<string | undefined>(undefined);
-  const [footerHtml, setFooterHtml] = useState<string | undefined>(undefined);
+  const cardFields = useMemo(() => settings?.dashboardState?.contents?.cardFields, [settings?.dashboardState?.contents?.cardFields]);
+  const { titleHtml, descriptionHtml, dateHtml, statusHtml, tagsHtml, imageHtml, footerHtml } = useExtensibility({
+    fmFilePath,
+    date,
+    title,
+    description,
+    type,
+    pageData
+  });
   const { getColors } = useThemeColors();
 
   const escapedTitle = useMemo(() => {
-    if (title && typeof title !== 'string') {
-      return '<invalid title>';
+    let value = title;
+
+    if (cardFields?.title) {
+      if (cardFields.title === "description") {
+        value = description;
+      } else if (cardFields?.title !== "title") {
+        value = pageData[cardFields?.title] || title;
+      }
+    } else if (cardFields?.title === null) {
+      return null;
     }
 
-    return title;
-  }, [title]);
+    if (value && typeof value !== 'string') {
+      return l10n.t(LocalizationKey.dashboardContentsItemInvalidTitle);
+    }
+
+    return value;
+  }, [title, description, cardFields?.title, pageData]);
 
   const escapedDescription = useMemo(() => {
-    if (description && typeof description !== 'string') {
-      return '<invalid description>';
+    let value = description;
+
+    if (cardFields?.description) {
+      if (cardFields.description === "title") {
+        value = title;
+      } else if (cardFields?.description !== "description") {
+        value = pageData[cardFields?.description] || description;
+      }
+    } else if (cardFields?.description === null) {
+      return null;
     }
 
-    return description;
-  }, [description]);
+    if (value && typeof value !== 'string') {
+      return l10n.t(LocalizationKey.dashboardContentsItemInvalidDescription);
+    }
+
+    return value;
+  }, [description, title, cardFields?.description, pageData]);
 
   const openFile = () => {
     Messenger.send(DashboardMessage.openFile, fmFilePath);
@@ -77,41 +110,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     return [];
   }, [settings, pageData]);
 
-  useEffect(() => {
-    if (window.fmExternal && window.fmExternal.getCardFooter) {
-      window.fmExternal.getCardFooter(fmFilePath, {
-        fmFilePath,
-        date,
-        title,
-        description,
-        type,
-        ...pageData
-      }).then(htmlContent => {
-        if (htmlContent) {
-          setFooterHtml(htmlContent);
-        } else {
-          setFooterHtml(undefined);
-        }
-      });
-    }
-
-    if (window.fmExternal && window.fmExternal.getCardImage) {
-      window.fmExternal.getCardImage(fmFilePath, {
-        fmFilePath,
-        date,
-        title,
-        description,
-        type,
-        ...pageData
-      }).then(htmlContent => {
-        if (htmlContent) {
-          setImageHtml(htmlContent);
-        } else {
-          setImageHtml(undefined);
-        }
-      });
-    }
-  }, []);
+  const hasDraftOrDate = useMemo(() => {
+    return cardFields && (cardFields.state || cardFields.date);
+  }, [cardFields]);
 
   if (view === DashboardViewType.Grid) {
     return (
@@ -137,7 +138,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                 pageData[PREVIEW_IMAGE_FIELD] ? (
                   <img
                     src={`${pageData[PREVIEW_IMAGE_FIELD]}`}
-                    alt={escapedTitle}
+                    alt={escapedTitle || ""}
                     className="absolute inset-0 h-full w-full object-cover group-hover:brightness-75"
                     loading="lazy"
                   />
@@ -160,46 +161,77 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           </button>
 
           <div className="relative p-4 w-full grow">
-            <div className={`flex justify-between items-center`}>
-              {draftField && draftField.name && <Status draft={pageData[draftField.name]} />}
+            <div className={`flex justify-between items-center ${hasDraftOrDate ? `mb-2` : ``}`}>
+              {
+                statusHtml ? (
+                  <div dangerouslySetInnerHTML={{ __html: statusHtml }} />
+                ) : (
+                  cardFields?.state && draftField && draftField.name && <Status draft={pageData[draftField.name]} />
+                )
+              }
 
-              <DateField className={`mr-4`} value={date} />
-
-              <ContentActions
-                title={title}
-                path={fmFilePath}
-                scripts={settings?.scripts}
-                onOpen={openFile}
-              />
+              {
+                dateHtml ? (
+                  <div className='mr-4' dangerouslySetInnerHTML={{ __html: dateHtml }} />
+                ) : (
+                  cardFields?.date && <DateField className={`mr-4`} value={date} />
+                )
+              }
             </div>
 
+            <ContentActions
+              title={title}
+              path={fmFilePath}
+              scripts={settings?.scripts}
+              onOpen={openFile}
+            />
+
             <button onClick={openFile} className={`text-left block`}>
-              <h2 className="mt-2 mb-2 font-bold">{escapedTitle}</h2>
+              {
+                titleHtml ? (
+                  <div dangerouslySetInnerHTML={{ __html: titleHtml }} />
+                ) : (
+                  <h2 className="mb-2 font-bold">
+                    {escapedTitle}
+                  </h2>
+                )
+              }
             </button>
 
             <button onClick={openFile} className={`text-left block`}>
-              <p className={`text-xs ${getColors('text-vulcan-200 dark:text-whisper-800', 'text-[vara(--vscode-titleBar-activeForeground)]')}`}>{escapedDescription}</p>
+              {
+                descriptionHtml ? (
+                  <div dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
+                ) : (
+                  <p className={`text-xs ${getColors('text-vulcan-200 dark:text-whisper-800', 'text-[vara(--vscode-titleBar-activeForeground)]')}`}>{escapedDescription}</p>
+                )
+              }
             </button>
 
-            {tags && tags.length > 0 && (
-              <div className="mt-2">
-                {tags.map(
-                  (tag, index) =>
-                    tag && (
-                      <span
-                        key={index}
-                        className={`inline-block mr-1 mt-1 text-xs ${getColors(
-                          `text-[#5D561D] dark:text-[#F0ECD0]`,
-                          `text-[var(--vscode-textPreformat-foreground)]`
-                        )
-                          }`}
-                      >
-                        #{tag}
-                      </span>
-                    )
-                )}
-              </div>
-            )}
+            {
+              tagsHtml ? (
+                <div className="mt-2" dangerouslySetInnerHTML={{ __html: tagsHtml }} />
+              ) : (
+                tags && tags.length > 0 && (
+                  <div className="mt-2">
+                    {tags.map(
+                      (tag, index) => tag && (
+                        <span
+                          key={index}
+                          className={`inline-block mr-1 mt-1 text-xs ${getColors(
+                            `text-[#5D561D] dark:text-[#F0ECD0]`,
+                            `text-[var(--vscode-textPreformat-foreground)]`
+                          )
+                            }`}
+                        >
+                          #{tag}
+                        </span>
+                      )
+                    )}
+                  </div>
+                )
+              )
+            }
           </div>
 
           {
@@ -226,7 +258,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             </button>
 
             <ContentActions
-              title={escapedTitle}
+              title={escapedTitle || ""}
               path={fmFilePath}
               scripts={settings?.scripts}
               onOpen={openFile}

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>
       )}

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>

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;
@@ -42,7 +44,7 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
 
   return (
     <span
-      className={`
+      className={`draft__status
         inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs 
         ${getColors(`text-whisper-200 dark:text-vulcan-500`, ``)} 
         ${draftValue ?
@@ -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>
   );
 };

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

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>
   );

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 >
   );
 };

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>
   );
 };

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);

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>
   );
 };

src/dashboardWebView/components/Header/Breadcrumb.tsx

@@ -2,15 +2,17 @@ import { CollectionIcon } from '@heroicons/react/outline';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
+import { HOME_PAGE_NAVIGATION_ID, STATIC_FOLDER_PLACEHOLDER } 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>

src/dashboardWebView/components/Header/ClearFilters.tsx

@@ -13,20 +13,21 @@ import {
   DEFAULT_TAG_STATE,
   DEFAULT_CATEGORY_STATE
 } from '../../state';
-
 import { DefaultValue } from 'recoil';
 import { useEffect } from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+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 +65,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>
   );
 };

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,14 +12,14 @@ export interface IFilterProps {
   onClick: (item: string | null) => void;
 }
 
-const DEFAULT_VALUE = 'No filter';
-
 export const Filter: React.FunctionComponent<IFilterProps> = ({
   label,
   activeItem,
   items,
   onClick
 }: React.PropsWithChildren<IFilterProps>) => {
+  const DEFAULT_VALUE = l10n.t(LocalizationKey.dashboardHeaderFilterDefault);
+
   if (!items || items.length === 0) {
     return null;
   }

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)}

src/dashboardWebView/components/Header/Folders.tsx

@@ -3,14 +3,15 @@ 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 {}
-
-const DEFAULT_TYPE = 'All types';
+export interface IFoldersProps { }
 
 export const Folders: React.FunctionComponent<
   IFoldersProps
-> = ({}: React.PropsWithChildren<IFoldersProps>) => {
+> = ({ }: React.PropsWithChildren<IFoldersProps>) => {
+  const DEFAULT_TYPE = l10n.t(LocalizationKey.dashboardHeaderFoldersDefault);
   const [crntFolder, setCrntFolder] = useRecoilState(FolderAtom);
   const settings = useRecoilValue(SettingsSelector);
   const contentFolders = settings?.contentFolders || [];
@@ -22,7 +23,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

src/dashboardWebView/components/Header/Grouping.tsx

@@ -4,26 +4,28 @@ 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 const GROUP_OPTIONS = [
-  { name: 'None', id: GroupOption.none },
-  { name: 'Year', id: GroupOption.Year },
-  { name: 'Draft/Published', id: GroupOption.Draft }
-];
+export interface IGroupingProps { }
 
 export const Grouping: React.FunctionComponent<
   IGroupingProps
-> = ({}: React.PropsWithChildren<IGroupingProps>) => {
+> = ({ }: React.PropsWithChildren<IGroupingProps>) => {
   const [group, setGroup] = useRecoilState(GroupingAtom);
 
+  const GROUP_OPTIONS = [
+    { name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionNone), id: GroupOption.none },
+    { name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionYear), id: GroupOption.Year },
+    { name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionDraft), id: GroupOption.Draft }
+  ];
+
   const crntGroup = GROUP_OPTIONS.find((x) => x.id === group);
 
   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) => (

src/dashboardWebView/components/Header/Header.tsx

@@ -29,6 +29,8 @@ import useThemeColors from '../../hooks/useThemeColors';
 import { Startup } from './Startup';
 import { Navigation } from './Navigation';
 import { ProjectSwitcher } from './ProjectSwitcher';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IHeaderProps {
   header?: React.ReactNode;
@@ -97,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,
@@ -107,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,
@@ -168,7 +170,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
               <SyncButton />
 
               <ChoiceButton
-                title={`Create content`}
+                title={l10n.t(LocalizationKey.dashboardHeaderHeaderCreateContent)}
                 choices={choiceOptions}
                 onClick={createContent}
                 disabled={!settings?.initialized}

src/dashboardWebView/components/Header/Navigation.tsx

@@ -3,6 +3,8 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { Tab } from '../../constants/Tab';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SettingsAtom, TabAtom, TabInfoAtom } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface INavigationProps {
   totalPages: number;
@@ -14,12 +16,6 @@ export interface INavigationItemProps {
   onClick: () => void;
 }
 
-export const tabs = [
-  { name: 'All articles', id: Tab.All },
-  { name: 'Published', id: Tab.Published },
-  { name: 'In draft', id: Tab.Draft }
-];
-
 const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
   tabId,
   isCrntTab,
@@ -31,15 +27,15 @@ const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
   return (
     <button
       className={`${isCrntTab
-          ?
-          getColors(
-            'border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300',
-            'border-[var(--vscode-textLink-foreground)] text-[var(--vscode-textLink-foreground)]'
-          ) :
-          getColors(
-            `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`,
-            `border-transparent text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-textLink-activeForeground)] hover:border-[var(--vscode-textLink-activeForeground)]`
-          )
+        ?
+        getColors(
+          'border-teal-900 dark:border-teal-300 text-teal-900 dark:text-teal-300',
+          'border-[var(--vscode-textLink-foreground)] text-[var(--vscode-textLink-foreground)]'
+        ) :
+        getColors(
+          `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`,
+          `border-transparent text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-textLink-activeForeground)] hover:border-[var(--vscode-textLink-activeForeground)]`
+        )
         } whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
       aria-current={isCrntTab ? 'page' : undefined}
       onClick={onClick}
@@ -56,6 +52,12 @@ export const Navigation: React.FunctionComponent<INavigationProps> = ({
   const tabInfo = useRecoilValue(TabInfoAtom);
   const settings = useRecoilValue(SettingsAtom);
 
+  const tabs = [
+    { name: l10n.t(LocalizationKey.dashboardHeaderNavigationAllArticles), id: Tab.All },
+    { name: l10n.t(LocalizationKey.dashboardHeaderNavigationPublished), id: Tab.Published },
+    { name: l10n.t(LocalizationKey.dashboardHeaderNavigationDraft), id: Tab.Draft }
+  ];
+
   return (
     <nav className="flex-1 -mb-px flex space-x-6 xl:space-x-8" aria-label="Tabs">
       {settings?.draftField?.type === 'boolean' ? (

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)}
       />

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>
   );

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} />

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>
   );
 };

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}

src/dashboardWebView/components/Header/Sorting.tsx

@@ -11,93 +11,14 @@ 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;
   view: NavigationType;
 }
 
-export const sortOptions: SortingOption[] = [
-  {
-    name: 'Last modified (asc)',
-    id: SortOption.LastModifiedAsc,
-    order: SortOrder.asc,
-    type: SortType.date
-  },
-  {
-    name: 'Last modified (desc)',
-    id: SortOption.LastModifiedDesc,
-    order: SortOrder.desc,
-    type: SortType.date
-  },
-  {
-    name: 'By filename (asc)',
-    id: SortOption.FileNameAsc,
-    order: SortOrder.asc,
-    type: SortType.string
-  },
-  {
-    name: 'By filename (desc)',
-    id: SortOption.FileNameDesc,
-    order: SortOrder.desc,
-    type: SortType.string
-  }
-];
-
-const contentSortOptions: SortingOption[] = [
-  {
-    name: 'Published (asc)',
-    id: SortOption.PublishedAsc,
-    order: SortOrder.asc,
-    type: SortType.date
-  },
-  {
-    name: 'Published (desc)',
-    id: SortOption.PublishedDesc,
-    order: SortOrder.desc,
-    type: SortType.date
-  }
-];
-
-const mediaSortOptions: SortingOption[] = [
-  {
-    name: 'Size (asc)',
-    id: SortOption.SizeAsc,
-    order: SortOrder.asc,
-    type: SortType.number
-  },
-  {
-    name: 'Size (desc)',
-    id: SortOption.SizeDesc,
-    order: SortOrder.desc,
-    type: SortType.number
-  },
-  {
-    name: 'Caption (asc)',
-    id: SortOption.CaptionAsc,
-    order: SortOrder.asc,
-    type: SortType.string
-  },
-  {
-    name: 'Caption (desc)',
-    id: SortOption.CaptionDesc,
-    order: SortOrder.desc,
-    type: SortType.string
-  },
-  {
-    name: 'Alt (asc)',
-    id: SortOption.AltAsc,
-    order: SortOrder.asc,
-    type: SortType.string
-  },
-  {
-    name: 'Alt (desc)',
-    id: SortOption.AltDesc,
-    order: SortOrder.desc,
-    type: SortType.string
-  }
-];
-
 export const Sorting: React.FunctionComponent<ISortingProps> = ({
   disableCustomSorting,
   view
@@ -106,13 +27,93 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
   const searchValue = useRecoilValue(SearchSelector);
   const settings = useRecoilValue(SettingsSelector);
 
+  const sortOptions: SortingOption[] = [
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingLastModifiedAsc),
+      id: SortOption.LastModifiedAsc,
+      order: SortOrder.asc,
+      type: SortType.date
+    },
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingLastModifiedDesc),
+      id: SortOption.LastModifiedDesc,
+      order: SortOrder.desc,
+      type: SortType.date
+    },
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingFilenameAsc),
+      id: SortOption.FileNameAsc,
+      order: SortOrder.asc,
+      type: SortType.string
+    },
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingFilenameDesc),
+      id: SortOption.FileNameDesc,
+      order: SortOrder.desc,
+      type: SortType.string
+    }
+  ];
+
+  const contentSortOptions: SortingOption[] = [
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingPublishedAsc),
+      id: SortOption.PublishedAsc,
+      order: SortOrder.asc,
+      type: SortType.date
+    },
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingPublishedDesc),
+      id: SortOption.PublishedDesc,
+      order: SortOrder.desc,
+      type: SortType.date
+    }
+  ];
+
+  const mediaSortOptions: SortingOption[] = [
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingSizeAsc),
+      id: SortOption.SizeAsc,
+      order: SortOrder.asc,
+      type: SortType.number
+    },
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingSizeDesc),
+      id: SortOption.SizeDesc,
+      order: SortOrder.desc,
+      type: SortType.number
+    },
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingCaptionAsc),
+      id: SortOption.CaptionAsc,
+      order: SortOrder.asc,
+      type: SortType.string
+    },
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingCaptionDesc),
+      id: SortOption.CaptionDesc,
+      order: SortOrder.desc,
+      type: SortType.string
+    },
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingAltAsc),
+      id: SortOption.AltAsc,
+      order: SortOrder.asc,
+      type: SortType.string
+    },
+    {
+      name: l10n.t(LocalizationKey.dashboardHeaderSortingAltDesc),
+      id: SortOption.AltDesc,
+      order: SortOrder.desc,
+      type: SortType.string
+    }
+  ];
+
   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}
         />

src/dashboardWebView/components/Header/Startup.tsx

@@ -4,6 +4,8 @@ import { Settings } from '../../models';
 import useThemeColors from '../../hooks/useThemeColors';
 import { DashboardMessage } from '../../DashboardMessage';
 import { SETTING_DASHBOARD_OPENONSTART } from '../../../constants';
+import * as l10n from "@vscode/l10n"
+import { LocalizationKey } from '../../../localization';
 
 export interface IStartupProps {
   settings: Settings | null;
@@ -54,7 +56,7 @@ export const Startup: React.FunctionComponent<IStartupProps> = ({
           )
             }`}
         >
-          Open on startup?
+          {l10n.t(LocalizationKey.dashboardHeaderStartupLabel)}
         </label>
       </div>
     </div>

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.commonSync)}</span>
       </button>
     </div>
   );

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>

src/dashboardWebView/components/Header/ViewSwitch.tsx

@@ -6,6 +6,8 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { DashboardViewType } from '../../models';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IViewSwitchProps { }
 
@@ -34,18 +36,26 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
       <button
         className={`flex items-center px-2 py-1 rounded-l-sm ${view === DashboardViewType.Grid ? getColors('bg-teal-500 text-vulcan-500', 'bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]') : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
           }`}
+        title={l10n.t(LocalizationKey.dashboardHeaderViewSwitchToGrid)}
+        type={`button`}
         onClick={toggleView}
       >
         <ViewGridIcon className={`w-4 h-4`} />
-        <span className={`sr-only`}>Change to grid</span>
+        <span className={`sr-only`}>
+          {l10n.t(LocalizationKey.dashboardHeaderViewSwitchToGrid)}
+        </span>
       </button>
       <button
         className={`flex items-center px-2 py-1 rounded-r-sm ${view === DashboardViewType.List ? getColors('bg-teal-500 text-vulcan-500', 'bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]') : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
           }`}
+        title={l10n.t(LocalizationKey.dashboardHeaderViewSwitchToList)}
+        type={`button`}
         onClick={toggleView}
       >
         <ViewListIcon className={`w-4 h-4`} />
-        <span className={`sr-only`}>Change to list</span>
+        <span className={`sr-only`}>
+          {l10n.t(LocalizationKey.dashboardHeaderViewSwitchToList)}
+        </span>
       </button>
     </div>
   );

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.commonSupport)}</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>
         </>
       )}

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>
@@ -146,7 +148,6 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                               'text-[var(--vscode-foreground)]'
                             )
                               }`}>
-                              <span className="sr-only">Details for </span>
                               {media.filename}
                             </h2>
                             <p className={`text-sm font-medium ${getColors(
@@ -169,14 +170,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 +186,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 +203,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                   'text-[var(--vscode-editor-foreground)]'
                                 )
                                   }`}>
-                                  Title
+                                  {l10n.t(LocalizationKey.dashboardMediaCommonTitle)}
                                 </label>
                                 <div className="mt-1">
                                   <DetailsInput value={title || ""} onChange={(e) => setTitle(e.target.value)} />
@@ -217,7 +218,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                       'text-[var(--vscode-editor-foreground)]'
                                     )
                                       }`}>
-                                      Caption
+                                      {l10n.t(LocalizationKey.dashboardMediaCommonCaption)}
                                     </label>
                                     <div className="mt-1">
                                       <DetailsInput value={caption || ""} onChange={(e) => setCaption(e.target.value)} isTextArea />
@@ -229,7 +230,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                       'text-[var(--vscode-editor-foreground)]'
                                     )
                                       }`}>
-                                      Alt tag value
+                                      {l10n.t(LocalizationKey.dashboardMediaCommonAlt)}
                                     </label>
                                     <div className="mt-1">
                                       <DetailsInput value={alt || ""} onChange={(e) => setAlt(e.target.value)} isTextArea />
@@ -250,7 +251,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                 onClick={onSubmitMetadata}
                                 disabled={!filename}
                               >
-                                Save
+                                {l10n.t(LocalizationKey.commonSave)}
                               </button>
                               <button
                                 type="button"
@@ -261,7 +262,7 @@ export const DetailsSlideOver: React.FunctionComponent<IDetailsSlideOverProps> =
                                   }`}
                                 onClick={onEditClose}
                               >
-                                Cancel
+                                {l10n.t(LocalizationKey.commonCancel)}
                               </button>
                             </div>
                           </>
@@ -274,10 +275,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 +286,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.dashboardMediaCommonTitle)} details={media.title || ""} />
 
                               {isImageFile && (
                                 <>
-                                  <DetailsItem title={`Caption`} details={media.caption || ''} />
-                                  <DetailsItem title={`Alternate text`} details={media.alt || ''} />
+                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonCaption)} details={media.caption || ''} />
+                                  <DetailsItem title={l10n.t(LocalizationKey.dashboardMediaCommonAlt)} details={media.alt || ''} />
                                 </>
                               )}
                             </dl>
@@ -306,7 +307,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 +315,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>

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.dashboardMediaFolderCreationHexoCreate)}
           onClick={onAssetFolderCreation}
         >
           <FolderAddIcon className={`mr-2 h-6 w-6`} />
-          <span className={``}>Create post asset folder</span>
+          <span className={``}>{l10n.t(LocalizationKey.dashboardMediaFolderCreationHexoCreate)}</span>
         </button>
       );
     }
@@ -97,7 +99,7 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
       <div className="flex flex-1 justify-end">
         {renderPostAssetsButton}
         <ChoiceButton
-          title={`Create new folder`}
+          title={l10n.t(LocalizationKey.dashboardMediaFolderCreationFolderCreate)}
           choices={scripts.map((s) => ({
             title: s.title,
             icon: <LightningBoltIcon className="w-4 h-4 mr-2" />,
@@ -119,11 +121,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 new folder`}
+        title={l10n.t(LocalizationKey.dashboardMediaFolderCreationFolderCreate)}
         onClick={onFolderCreation}
       >
         <FolderAddIcon className={`mr-2 h-6 w-6`} />
-        <span className={``}>Create new folder</span>
+        <span className={``}>{l10n.t(LocalizationKey.dashboardMediaFolderCreationFolderCreate)}</span>
       </button>
     </div>
   );

src/dashboardWebView/components/Media/FolderItem.tsx

@@ -1,4 +1,4 @@
-import { DocumentIcon, FolderIcon } from '@heroicons/react/solid';
+import { FolderIcon } from '@heroicons/react/solid';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
@@ -28,12 +28,11 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
 
   return (
     <li
-      className={`group relative p-4 ${
-        getColors(
-          'hover:bg-gray-200 dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800',
-          'hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
-        )
-      }`}
+      className={`group relative p-4 ${getColors(
+        'hover:bg-gray-200 dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800',
+        'hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
+      )
+        }`}
     >
       <button
         title={isContentFolder ? 'Content directory folder' : 'Public directory folder'}
@@ -43,12 +42,11 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
         <div className="relative mr-4">
           <FolderIcon className={`h-12 w-12`} />
           {isContentFolder && (
-            <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 ${
-              getColors(
-                `text-whisper-800 dark:text-vulcan-500`,
-                `text-[var(--vscode-foreground)]`
-              )
-            }`}>
+            <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 ${getColors(
+              `text-whisper-800 dark:text-vulcan-500`,
+              `text-[var(--vscode-foreground)]`
+            )
+              }`}>
               C
             </span>
           )}

src/dashboardWebView/components/Media/Item.tsx

@@ -38,6 +38,8 @@ import { DetailsSlideOver } from './DetailsSlideOver';
 import { usePopper } from 'react-popper';
 import { MediaSnippetForm } from './MediaSnippetForm';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IItemProps {
   media: MediaInfo;
@@ -68,7 +70,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
   const [referenceElement, setReferenceElement] = useState<any>(null);
   const [popperElement, setPopperElement] = useState<any>(null);
-  const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: 'bottom-end',
     strategy: 'fixed'
   });
@@ -510,8 +512,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                       <QuickAction
                         title={
                           viewData.data.metadataInsert && viewData.data.fieldName
-                            ? `Insert image for your "${viewData.data.fieldName}" field`
-                            : `Insert image with markdown markup`
+                            ? l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertField, viewData.data.fieldName)
+                            : l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertMarkdown)
                         }
                         onClick={insertToArticle}
                       >
@@ -519,26 +521,26 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                       </QuickAction>
 
                       {viewData?.data?.position && mediaSnippets.length > 0 && (
-                        <QuickAction title="Insert snippet" onClick={insertSnippet}>
+                        <QuickAction title={l10n.t(LocalizationKey.commonInsertSnippet)} onClick={insertSnippet}>
                           <CodeIcon className={`w-4 h-4`} aria-hidden="true" />
                         </QuickAction>
                       )}
                     </>
                   ) : (
                     <>
-                      <QuickAction title="Copy media path" onClick={copyToClipboard}>
+                      <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionCopyPath)} onClick={copyToClipboard}>
                         <ClipboardIcon className={`w-4 h-4`} aria-hidden="true" />
                       </QuickAction>
                     </>
                   )}
 
-                  <QuickAction title="Delete media file" onClick={deleteMedia}>
+                  <QuickAction title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionDelete)} onClick={deleteMedia}>
                     <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
                   </QuickAction>
                 </div>
 
                 <div ref={setReferenceElement} className={`flex`}>
-                  <ActionMenuButton title={`Menu`} />
+                  <ActionMenuButton title={l10n.t(LocalizationKey.commonMenu)} />
                 </div>
 
                 <div
@@ -552,7 +554,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                       title={
                         <div className="flex items-center">
                           <PencilIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                          <span>Edit metadata</span>
+                          <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)}</span>
                         </div>
                       }
                       onClick={updateMetadata}
@@ -564,7 +566,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                           title={
                             <div className="flex items-center">
                               <PlusIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                              <span>Insert image</span>
+                              <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemInsertImage)}</span>
                             </div>
                           }
                           onClick={insertToArticle}
@@ -599,7 +601,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                                 className="mr-2 h-5 w-5 flex-shrink-0"
                                 aria-hidden={true}
                               />{' '}
-                              <span>Copy media path</span>
+                              <span>{l10n.t(LocalizationKey.dashboardMediaItemQuickActionCopyPath)}</span>
                             </div>
                           }
                           onClick={copyToClipboard}
@@ -613,7 +615,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                       title={
                         <div className="flex items-center">
                           <EyeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                          <span>Reveal media</span>
+                          <span>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemRevealMedia)}</span>
                         </div>
                       }
                       onClick={revealMedia}
@@ -623,7 +625,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                       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={deleteMedia}
@@ -638,25 +640,33 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           </p>
           {!isImageFile && media.title && (
             <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
-              <b className={`mr-2`}>Title:</b>
+              <b className={`mr-2`}>
+                {l10n.t(LocalizationKey.dashboardMediaCommonTitle)}:
+              </b>
               <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.title}</span>
             </p>
           )}
           {media.caption && (
             <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
-              <b className={`mr-2`}>Caption:</b>
+              <b className={`mr-2`}>
+                {l10n.t(LocalizationKey.dashboardMediaCommonCaption)}:
+              </b>
               <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.caption}</span>
             </p>
           )}
           {!media.caption && media.alt && (
             <p className={`mt-2 text-xs font-medium pointer-events-none  flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
-              <b className={`mr-2`}>Alt:</b>
+              <b className={`mr-2`}>
+                {l10n.t(LocalizationKey.dashboardMediaCommonAlt)}:
+              </b>
               <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.alt}</span>
             </p>
           )}
           {(media?.size || media?.dimensions) && (
             <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
-              <b className={`mr-1`}>Size:</b>
+              <b className={`mr-1`}>
+                {l10n.t(LocalizationKey.dashboardMediaCommonSize)}:
+              </b>
               <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>
                 {getMediaDetails()}
               </span>
@@ -668,8 +678,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({
       {showSnippetSelection && (
         <InfoDialog
           icon={<CodeIcon className="h-6 w-6" aria-hidden="true" />}
-          title="Insert snippet"
-          description="Select the media snippet to use for the current media file."
+          title={l10n.t(LocalizationKey.commonInsertSnippet)}
+          description={l10n.t(LocalizationKey.dashboardMediaItemInfoDialogSnippetDescription)}
           dismiss={() => setShowSnippetSelection(false)}
         >
           <ul className="flex justify-center">
@@ -711,10 +721,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
       {showAlert && (
         <Alert
-          title={`Delete: ${basename(parseWinPath(media.fsPath) || '')}`}
-          description={`Are you sure you want to delete the file from the ${getFolder()} folder?`}
-          okBtnText={`Delete`}
-          cancelBtnText={`Cancel`}
+          title={`${l10n.t(LocalizationKey.commonDelete)}: ${basename(parseWinPath(media.fsPath) || '')}`}
+          description={l10n.t(LocalizationKey.dashboardMediaItemAlertDeleteDescription, getFolder())}
+          okBtnText={l10n.t(LocalizationKey.commonDelete)}
+          cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
           dismiss={() => setShowAlert(false)}
           trigger={confirmDeletion}
         />

src/dashboardWebView/components/Media/Lightbox.tsx

@@ -7,7 +7,7 @@ import { LightboxAtom } from '../../state';
 export interface ILightboxProps { }
 
 export const Lightbox: React.FunctionComponent<ILightboxProps> = (
-  props: React.PropsWithChildren<ILightboxProps>
+  _: React.PropsWithChildren<ILightboxProps>
 ) => {
   const [lightbox, setLightbox] = useRecoilState(LightboxAtom);
   const { getColors } = useThemeColors();

src/dashboardWebView/components/Media/Media.tsx

@@ -26,11 +26,13 @@ import { parseWinPath } from '../../../helpers/parseWinPath';
 import { basename, extname, join } from 'path';
 import { MediaInfo } from '../../../models';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IMediaProps { }
 
 export const Media: React.FunctionComponent<IMediaProps> = (
-  props: React.PropsWithChildren<IMediaProps>
+  _: React.PropsWithChildren<IMediaProps>
 ) => {
   const { media } = useMedia();
   const settings = useRecoilValue(SettingsSelector);
@@ -166,9 +168,9 @@ export const Media: React.FunctionComponent<IMediaProps> = (
       <div className="w-full h-full pb-6" {...getRootProps()}>
         {viewData?.data?.filePath && (
           <div className={`text-lg text-center mb-6`}>
-            <p>Select the media file to add to your content.</p>
+            <p>{l10n.t(LocalizationKey.dashboardMediaMediaDescription)}</p>
             <p className={`opacity-80 text-base`}>
-              You can also drag and drop images from your desktop and select them once uploaded.
+              {l10n.t(LocalizationKey.dashboardMediaMediaDragAndDrop)}
             </p>
           </div>
         )}
@@ -182,9 +184,8 @@ export const Media: React.FunctionComponent<IMediaProps> = (
             <UploadIcon className={`h-32`} />
             <p className={`text-xl max-w-md text-center`}>
               {selectedFolder
-                ? `Upload to ${selectedFolder}`
-                : `No folder selected, files you drop will be added to the ${currentStaticFolder || 'public'
-                } folder.`}
+                ? l10n.t(LocalizationKey.dashboardMediaMediaFolderUpload, selectedFolder)
+                : l10n.t(LocalizationKey.dashboardMediaMediaFolderDefault, currentStaticFolder || 'public')}
             </p>
           </div>
         )}
@@ -198,8 +199,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
               />
 
               <p className={`text-xl font-medium`}>
-                No media files to show. You can drag &amp; drop new files by holding your [shift]
-                key.
+                {l10n.t(LocalizationKey.dashboardMediaMediaPlaceholder)}
               </p>
             </div>
           </div>
@@ -213,7 +213,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
               group.folders.length > 0 && (
                 <div key={`group-${idx}`} className={`mb-8`}>
                   <h2 className="text-lg mb-8 first-letter:uppercase">
-                    Content folder: <b>{group.title}</b>
+                    {l10n.t(LocalizationKey.dashboardMediaMediaContentFolder)}: <b>{group.title}</b>
                   </h2>
 
                   <List gap={0}>
@@ -234,7 +234,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
           <div className={`mb-8`}>
             {contentFolders && contentFolders.length > 0 && (
               <h2 className="text-lg mb-8">
-                Public folder
+                {l10n.t(LocalizationKey.dashboardMediaMediaPublicFolder)}
                 {currentStaticFolder && (
                   <span>
                     : <b>{currentStaticFolder}</b>

src/dashboardWebView/components/Media/MediaHeaderBottom.tsx

@@ -10,7 +10,7 @@ import { Pagination } from '../Header/Pagination';
 export interface IMediaHeaderBottomProps { }
 
 export const MediaHeaderBottom: React.FunctionComponent<IMediaHeaderBottomProps> = (
-  props: React.PropsWithChildren<IMediaHeaderBottomProps>
+  _: React.PropsWithChildren<IMediaHeaderBottomProps>
 ) => {
   const settings = useRecoilValue(SettingsAtom);
   const { getColors } = useThemeColors();

src/dashboardWebView/components/Media/MediaHeaderTop.tsx

@@ -17,6 +17,8 @@ import {
 import { Searchbox } from '../Header';
 import { PaginationStatus } from '../Header/PaginationStatus';
 import { FolderCreation } from './FolderCreation';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IMediaHeaderTopProps { }
 
@@ -88,7 +90,7 @@ export const MediaHeaderTop: React.FunctionComponent<
         }`}
       aria-label="Pagination"
     >
-      <Searchbox placeholder={`Search in folder`} />
+      <Searchbox placeholder={l10n.t(LocalizationKey.dashboardMediaMediaHeaderTopSearchboxPlaceholder)} />
 
       <PaginationStatus />
 

src/dashboardWebView/components/Media/MediaSnippetForm.tsx

@@ -3,8 +3,10 @@ import { useRef } from 'react';
 import { useRecoilValue } from 'recoil';
 import { MediaInfo, Snippet } from '../../../models';
 import { ViewDataSelector } from '../../state';
-import { FormDialog } from '../Modals/FormDialog';
 import SnippetForm, { SnippetFormHandle } from '../SnippetsView/SnippetForm';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+import { SnippetSlideOver } from './SnippetSlideOver';
 
 export interface IMediaSnippetFormProps {
   media: MediaInfo;
@@ -30,16 +32,14 @@ export const MediaSnippetForm: React.FunctionComponent<IMediaSnippetFormProps> =
   };
 
   return (
-    <FormDialog
-      title={`Insert media: ${media.title || media.filename}`}
-      description={`Insert the ${
-        media.title || media.filename
-      } media file into the current article`}
+    <SnippetSlideOver
+      title={l10n.t(LocalizationKey.dashboardMediaMediaSnippetFormFormDialogTitle, media.title || media.filename)}
+      description={l10n.t(LocalizationKey.dashboardMediaMediaSnippetFormFormDialogDescription, media.title || media.filename)}
       isSaveDisabled={false}
       trigger={insertToArticle}
       dismiss={onDismiss}
-      okBtnText="Insert"
-      cancelBtnText="Cancel"
+      okBtnText={l10n.t(LocalizationKey.commonInsert)}
+      cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
     >
       <SnippetForm
         ref={formRef}
@@ -48,6 +48,6 @@ export const MediaSnippetForm: React.FunctionComponent<IMediaSnippetFormProps> =
         selection={viewData?.data?.selection}
         onInsert={onInsert}
       />
-    </FormDialog>
+    </SnippetSlideOver>
   );
 };

src/dashboardWebView/components/Media/SnippetSlideOver.tsx

@@ -0,0 +1,104 @@
+import { Dialog, Transition } from '@headlessui/react';
+import { XIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { Fragment, useRef } from 'react';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+
+export interface ISnippetSlideOverProps {
+  title: string;
+  description: string;
+  okBtnText: string;
+  cancelBtnText: string;
+  isSaveDisabled: boolean;
+
+  dismiss: () => void;
+  trigger: () => void;
+}
+
+export const SnippetSlideOver: React.FunctionComponent<ISnippetSlideOverProps> = ({
+  title,
+  description,
+  okBtnText,
+  cancelBtnText,
+  isSaveDisabled,
+  dismiss,
+  trigger,
+  children
+}: React.PropsWithChildren<ISnippetSlideOverProps>) => {
+  const cancelButtonRef = useRef(null);
+
+  return (
+    <Transition.Root show={true} as={Fragment}>
+      <Dialog onClose={dismiss} as={'div' as any} className="fixed inset-0 overflow-hidden z-50">
+        <div className="absolute inset-0 overflow-hidden">
+          <Dialog.Overlay className={`absolute inset-0 transition-opacity bg-[var(--vscode-editor-background)] opacity-75`} />
+
+          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
+            <Transition.Child
+              as={Fragment}
+              enter="transform transition ease-in-out duration-500 sm:duration-700"
+              enterFrom="translate-x-full"
+              enterTo="translate-x-0"
+              leave="transform transition ease-in-out duration-500 sm:duration-700"
+              leaveFrom="translate-x-0"
+              leaveTo="translate-x-full"
+            >
+              <div className="pointer-events-auto w-screen max-w-md">
+                <div className={`flex h-full flex-col overflow-y-scroll border-l pb-6 shadow-xl bg-[var(--vscode-sideBar-background)] border-[var(--frontmatter-border)]`}>
+                  <div className="py-6 sticky top-0 z-10 px-4 sm:px-6 bg-[var(--vscode-sideBar-background)]">
+                    <div className="flex items-start justify-between">
+                      <Dialog.Title className={`text-lg font-medium text-[var(--vscode-editor-foreground)]`}>
+                        {title}
+                      </Dialog.Title>
+                      <div className="ml-3 flex h-7 items-center">
+                        <button
+                          type="button"
+                          className={`focus:outline-none text-[var(--vscode-titleBar-inactiveForeground)] hover:text-[var(--vscode-titleBar-activeForeground)]`}
+                          onClick={dismiss}
+                        >
+                          <span className="sr-only">{l10n.t(LocalizationKey.dashboardMediaPanelClose)}</span>
+                          <XIcon className="h-6 w-6" aria-hidden="true" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="relative flex-1 px-4 sm:px-6">
+                    <div className="space-y-4">
+                      <p className="text-sm">{description}</p>
+
+                      <div>
+                        {children}
+                      </div>
+
+                      <div className="my-6 sm:my-4 sm:flex sm:flex-row-reverse">
+                        <button
+                          type="button"
+                          className={`w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm sm:ml-3 bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]`}
+                          onClick={() => trigger()}
+                          disabled={isSaveDisabled}
+                        >
+                          {okBtnText}
+                        </button>
+
+                        <button
+                          type="button"
+                          className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm bg-[var(--vscode-button-secondaryBackground)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]`}
+                          onClick={() => dismiss()}
+                          ref={cancelButtonRef}
+                        >
+                          {cancelBtnText}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};

src/dashboardWebView/components/Menu/MenuButton.tsx

@@ -17,7 +17,7 @@ export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
   const { getColors } = useThemeColors();
 
   return (
-    <div className={`group inline-flex items-center ${disabled ? 'opacity-50' : ''}`}>
+    <div className={`group flex items-center ${disabled ? 'opacity-50' : ''}`}>
       <div className={`mr-2 font-medium flex items-center ${getColors('text-gray-500 dark:text-whisper-700', 'text-[var(--vscode-tab-inactiveForeground)]')}`}>{label}:</div>
 
       <Menu.Button

src/dashboardWebView/components/Modals/FormDialog.tsx

@@ -30,7 +30,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
   return (
     <Transition.Root show={true} as={Fragment}>
       <Dialog
-        className="fixed z-10 inset-0 overflow-y-auto"
+        className="fixed z-50 inset-0 overflow-y-auto"
         initialFocus={cancelButtonRef}
         onClose={() => dismiss()}
       >
@@ -65,7 +65,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${getColors(
+            <div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${getColors(
               'bg-white dark:bg-vulcan-500 border-whisper-900',
               'bg-[var(--vscode-sideBar-background)] border-[var(--frontmatter-border)]'
             )

src/dashboardWebView/components/Preview/Preview.tsx

@@ -4,6 +4,9 @@ import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { PreviewCommands } from '../../../constants';
 import useThemeColors from '../../hooks/useThemeColors';
+import { EventData } from '@estruyf/vscode/dist/models';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IPreviewProps {
   url: string | null;
@@ -35,10 +38,24 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
     iframeRef.current!.src = navUrl;
   };
 
+  const msgListener = (message: MessageEvent<EventData<any>>) => {
+    if (message.data.command === PreviewCommands.toWebview.updateUrl) {
+      setCrntUrl(message.data.payload);
+    }
+  };
+
   useEffect(() => {
     setCrntUrl(url);
   }, [url]);
 
+  useEffect(() => {
+    Messenger.listen(msgListener);
+
+    return () => {
+      Messenger.unlisten(msgListener);
+    };
+  })
+
   return (
     <div className="w-full h-full bg-white">
       <div
@@ -53,7 +70,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
               navigateToUrl();
             }
           }}
-          placeholder="Enter a URL"
+          placeholder={l10n.t(LocalizationKey.dashboardPreviewInputPlaceholder)}
           className="w-full m-[1px] h-full border-1 border-transparent text-xs py-1 px-2 focus:border-color-blue-500 bg-[var(--vscode-tab-activeBackground)] text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] focus:text-[var(--vscode-tab-activeForeground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-[var(--vscode-focusBorder)"
         />
 
@@ -61,15 +78,24 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
           className={`actions flex items-center space-x-2 px-2 ${getColors('text-vulcan-500 dark:text-whisper-100', 'text-[var(--vscode-list-activeSelectionForeground)]')
             }`}
         >
-          <button title="Navigate" onClick={navigateToUrl} className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
+          <button
+            title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
+            onClick={navigateToUrl}
+            className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
             <ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
           </button>
 
-          <button title="Refresh" onClick={onRefresh} className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
+          <button
+            title={l10n.t(LocalizationKey.dashboardPreviewButtonRefreshTitle)}
+            onClick={onRefresh}
+            className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
             <RefreshIcon className="w-4 h-4" aria-hidden="true" />
           </button>
 
-          <button title="Open" onClick={openInBrowser} className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
+          <button
+            title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
+            onClick={openInBrowser}
+            className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
             <ExternalLinkIcon className="w-4 h-4" aria-hidden="true" />
           </button>
         </div>
@@ -77,7 +103,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
 
       <iframe
         ref={iframeRef}
-        src={url || ''}
+        src={crntUrl || url || ''}
         className={`w-full border-0`}
         style={{
           height: 'calc(100% - 30px)',

src/dashboardWebView/components/SnippetsView/Item.tsx

@@ -24,6 +24,8 @@ import { Alert } from '../Modals/Alert';
 import { FormDialog } from '../Modals/FormDialog';
 import { NewForm } from './NewForm';
 import SnippetForm, { SnippetFormHandle } from './SnippetForm';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
 export interface IItemProps {
   snippetKey: string;
@@ -32,7 +34,7 @@ export interface IItemProps {
 
 export const Item: React.FunctionComponent<IItemProps> = ({
   snippetKey,
-  snippet
+  snippet,
 }: React.PropsWithChildren<IItemProps>) => {
   const viewData = useRecoilValue(ViewDataSelector);
   const settings = useRecoilValue(SettingsSelector);
@@ -143,6 +145,22 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     setShowAlert(false);
   }, [settings?.snippets, snippetKey]);
 
+  React.useEffect(() => {
+    if (viewData?.data?.snippetInfo?.id && snippetKey && viewData.data.snippetInfo.id === snippetKey) {
+      if (snippet) {
+        setSnippetTitle(snippet.title || viewData?.data?.snippetInfo?.id);
+        setSnippetDescription(snippet.description);
+        setSnippetOriginalBody(
+          typeof snippet.body === 'string'
+            ? snippet.body
+            : snippet.body.join(`\n`)
+        );
+        setMediaSnippet(!!snippet.isMediaSnippet);
+        setShowInsertDialog(true);
+      }
+    }
+  }, [viewData?.data?.snippetInfo?.id, snippetKey, snippet]);
+
   return (
     <>
       <li className={`group relative overflow-hidden shadow-md hover:shadow-xl dark:shadow-none border p-4 space-y-2 rounded ${getColors(
@@ -187,7 +205,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                   </div>
 
                   <div className="hidden group-hover:flex">
-                    <QuickAction title={`Insert snippet`} onClick={() => setShowInsertDialog(true)}>
+                    <QuickAction
+                      title={l10n.t(LocalizationKey.commonInsertSnippet)}
+                      onClick={() => setShowInsertDialog(true)}>
                       <PlusIcon className={`w-4 h-4`} aria-hidden="true" />
                     </QuickAction>
                   </div>
@@ -209,7 +229,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
               <div className="hidden group-hover:flex">
                 {insertToContent && !snippet.isMediaSnippet && (
                   <>
-                    <QuickAction title={`Insert snippet`} onClick={() => setShowInsertDialog(true)}>
+                    <QuickAction title={l10n.t(LocalizationKey.commonInsertSnippet)} onClick={() => setShowInsertDialog(true)}>
                       <PlusIcon className={`w-4 h-4`} aria-hidden="true" />
                     </QuickAction>
                   </>
@@ -217,16 +237,22 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
                 {!snippet.sourcePath ? (
                   <>
-                    <QuickAction title={`Edit snippet`} onClick={onOpenEdit}>
+                    <QuickAction
+                      title={l10n.t(LocalizationKey.dashboardSnippetsViewItemQuickActionEditSnippet)}
+                      onClick={onOpenEdit}>
                       <PencilIcon className={`w-4 h-4`} aria-hidden="true" />
                     </QuickAction>
 
-                    <QuickAction title={`Delete snippet`} onClick={() => setShowAlert(true)}>
+                    <QuickAction
+                      title={l10n.t(LocalizationKey.dashboardSnippetsViewItemQuickActionDeleteSnippet)}
+                      onClick={() => setShowAlert(true)}>
                       <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
                     </QuickAction>
                   </>
                 ) : (
-                  <QuickAction title={`View snippet file`} onClick={showFile}>
+                  <QuickAction
+                    title={l10n.t(LocalizationKey.dashboardSnippetsViewItemQuickActionViewSnippet)}
+                    onClick={showFile}>
                     <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
                   </QuickAction>
                 )}
@@ -244,29 +270,32 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
       {showInsertDialog && (
         <FormDialog
-          title={`Insert snippet: ${snippet.title || snippetKey}`}
-          description={`Insert the ${(
-            snippet.title || snippetKey
-          ).toLowerCase()} snippet into the current article`}
+          title={l10n.t(LocalizationKey.dashboardSnippetsViewItemInsertFormDialogTitle, snippet.title || snippetKey)}
+          description={l10n.t(LocalizationKey.dashboardSnippetsViewItemInsertFormDialogDescription, (snippet.title || snippetKey).toLowerCase())}
           isSaveDisabled={!insertToContent}
           trigger={insertToArticle}
           dismiss={() => setShowInsertDialog(false)}
-          okBtnText="Insert"
-          cancelBtnText="Cancel"
+          okBtnText={l10n.t(LocalizationKey.commonInsert)}
+          cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
         >
-          <SnippetForm ref={formRef} snippet={snippet} selection={viewData?.data?.selection} />
+          <SnippetForm
+            ref={formRef}
+            snippetKey={snippetKey}
+            snippet={snippet}
+            fieldInfo={viewData?.data?.snippetInfo?.fields}
+            selection={viewData?.data?.selection} />
         </FormDialog>
       )}
 
       {showEditDialog && (
         <FormDialog
-          title={`Edit snippet: ${snippet.title || snippetKey}`}
-          description={`Edit the ${(snippet.title || snippetKey).toLowerCase()} snippet`}
+          title={l10n.t(LocalizationKey.dashboardSnippetsViewItemEditFormDialogTitle, snippet.title || snippetKey)}
+          description={l10n.t(LocalizationKey.dashboardSnippetsViewItemEditFormDialogDescription, (snippet.title || snippetKey).toLowerCase())}
           isSaveDisabled={!snippetTitle || !snippetOriginalBody}
           trigger={onSnippetUpdate}
           dismiss={reset}
-          okBtnText="Update"
-          cancelBtnText="Cancel"
+          okBtnText={l10n.t(LocalizationKey.commonUpdate)}
+          cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
         >
           <NewForm
             title={snippetTitle}
@@ -283,12 +312,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
       {showAlert && (
         <Alert
-          title={`Delete snippet: ${snippet.title || snippetKey}`}
-          description={`Are you sure you want to delete the ${(
-            snippet.title || snippetKey
-          ).toLowerCase()} snippet?`}
-          okBtnText={`Delete`}
-          cancelBtnText={`Cancel`}
+          title={l10n.t(LocalizationKey.dashboardSnippetsViewItemAlertTitle, snippet.title || snippetKey)}
+          description={l10n.t(LocalizationKey.dashboardSnippetsViewItemAlertDescription, (snippet.title || snippetKey).toLowerCase())}
+          okBtnText={l10n.t(LocalizationKey.commonDelete)}
+          cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
           dismiss={() => setShowAlert(false)}
           trigger={onDelete}
         />

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;
@@ -31,7 +33,7 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
   const openLink = () => {
     Messenger.send(
       GeneralCommands.toVSCode.openLink,
-      'https://frontmatter.codes/docs/markdown#placeholders'
+      'https://frontmatter.codes/docs/snippets#placeholders'
     );
   };
 
@@ -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>

src/dashboardWebView/components/SnippetsView/SnippetForm.tsx

@@ -4,15 +4,18 @@ import { useCallback, useEffect, useImperativeHandle, useMemo, useState } from '
 import { useRecoilValue } from 'recoil';
 import { processKnownPlaceholders } from '../../../helpers/PlaceholderHelper';
 import { SnippetParser } from '../../../helpers/SnippetParser';
-import { Snippet, SnippetField, SnippetSpecialPlaceholders } from '../../../models';
+import { Snippet, SnippetField, SnippetInfoField, SnippetSpecialPlaceholders } from '../../../models';
 import { DashboardMessage } from '../../DashboardMessage';
 import useThemeColors from '../../hooks/useThemeColors';
 import { SettingsAtom, ViewDataSelector } from '../../state';
 import { SnippetInputField } from './SnippetInputField';
+import { SNIPPET } from '../../../constants/Snippet';
 
 export interface ISnippetFormProps {
+  snippetKey?: string;
   snippet: Snippet;
   selection: string | undefined;
+  fieldInfo?: SnippetInfoField[];
   mediaData?: any;
   onInsert?: (mediaData: any) => void;
 }
@@ -22,7 +25,7 @@ export interface SnippetFormHandle {
 }
 
 const SnippetForm: React.ForwardRefRenderFunction<SnippetFormHandle, ISnippetFormProps> = (
-  { snippet, selection, mediaData, onInsert },
+  { snippetKey, snippet, selection, fieldInfo, mediaData, onInsert },
   ref
 ) => {
   const viewData = useRecoilValue(ViewDataSelector);
@@ -94,11 +97,29 @@ const SnippetForm: React.ForwardRefRenderFunction<SnippetFormHandle, ISnippetFor
         return;
       }
 
+      const snippetInfo = {
+        id: snippetKey,
+        fields: fields.map(f => ({
+          name: f.name,
+          value: f.value
+        }))
+      }
+
       if (!onInsert) {
-        Messenger.send(DashboardMessage.insertSnippet, {
-          file: viewData?.data?.filePath,
-          snippet: snippetBody
-        });
+        if (!snippetKey || settings?.snippetsWrapper === false) {
+          Messenger.send(DashboardMessage.insertSnippet, {
+            file: viewData?.data?.filePath,
+            snippet: snippetBody
+          });
+        } else {
+          Messenger.send(DashboardMessage.insertSnippet, {
+            file: viewData?.data?.filePath,
+            range: viewData?.data?.range,
+            snippet: `<!-- ${SNIPPET.wrapper.start} data:${JSON.stringify(snippetInfo)} -->
+${snippetBody}
+<!-- ${SNIPPET.wrapper.end} -->`
+          });
+        }
       } else {
         onInsert(snippetBody);
       }
@@ -165,7 +186,7 @@ const SnippetForm: React.ForwardRefRenderFunction<SnippetFormHandle, ISnippetFor
                   {field.title || field.name}
                 </label>
                 <div className="mt-1">
-                  <SnippetInputField field={field} onValueChange={onTextChange} />
+                  <SnippetInputField field={field} fieldInfo={fieldInfo} onValueChange={onTextChange} />
                 </div>
               </div>
             )

src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx

@@ -1,31 +1,42 @@
 import * as React from 'react';
 import { ChevronDownIcon } from '@heroicons/react/outline';
-import { Choice, SnippetField } from '../../../models';
+import { Choice, SnippetField, SnippetInfoField } from '../../../models';
 import useThemeColors from '../../hooks/useThemeColors';
+import { useEffect } from 'react';
 
 export interface ISnippetInputFieldProps {
   field: SnippetField;
+  fieldInfo?: SnippetInfoField[];
   onValueChange: (field: SnippetField, value: string) => void;
 }
 
 export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps> = ({
   field,
+  fieldInfo,
   onValueChange
 }: React.PropsWithChildren<ISnippetInputFieldProps>) => {
   const { getColors } = useThemeColors();
-  
+
+  useEffect(() => {
+    if (fieldInfo) {
+      const info = fieldInfo.find((f) => f.name === field.name);
+      if (info) {
+        onValueChange(field, info.value || '');
+      }
+    }
+  }, [fieldInfo]);
+
   if (field.type === 'choice') {
     return (
       <div className="relative">
         <select
           name={field.name}
           value={field.value || ''}
-          className={`block w-full sm:text-sm ${
-            getColors(
-              '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-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
-            )
-          }`}
+          className={`block w-full sm:text-sm ${getColors(
+            '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-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+          )
+            }`}
           onChange={(e) => onValueChange(field, e.target.value)}
         >
           {(field.choices || [])?.map((option: string | Choice, index: number) =>
@@ -51,12 +62,11 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
       <textarea
         name={field.name}
         value={field.value || ''}
-        className={`block w-full sm:text-sm h-auto ${
-          getColors(
-            '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-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
-          )
-        }`}
+        className={`block w-full sm:text-sm h-auto ${getColors(
+          '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-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+        )
+          }`}
         onChange={(e) => onValueChange(field, e.currentTarget.value)}
         rows={4}
       />
@@ -68,12 +78,11 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
       type="text"
       name={field.name}
       value={field.value || ''}
-      className={`block w-full sm:text-sm ${
-        getColors(
-          '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-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
-        )
-      }`}
+      className={`block w-full sm:text-sm ${getColors(
+        '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-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+      )
+        }`}
       onChange={(e) => onValueChange(field, e.currentTarget.value)}
     />
   );

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);
@@ -51,8 +53,6 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
       // Contains in key or description, values included in key are ranked higher (sort and fuzzy search)
       return keyValue.includes(value) || descriptionValue.includes(value);
     });
-
-
   }, [settings?.snippets, snippetFilter, viewData?.data?.filePath]);
 
   const onSnippetAdd = useCallback(() => {
@@ -94,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}
@@ -112,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>
@@ -126,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>
         )}
 
@@ -144,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>
@@ -160,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}

src/dashboardWebView/components/Steps/SelectItem.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { CheckCircleIcon } from '@heroicons/react/outline';
+import { CheckCircleIcon as CheckCircleIconSolid } from '@heroicons/react/solid';
+
+export interface ISelectItemProps {
+  title: string;
+  buttonTitle: string;
+  isSelected: boolean;
+  onClick: () => void;
+}
+
+export const SelectItem: React.FunctionComponent<ISelectItemProps> = ({
+  title,
+  buttonTitle,
+  isSelected,
+  onClick
+}: React.PropsWithChildren<ISelectItemProps>) => {
+  return (
+    <div
+      className={`text-sm flex items-center ${isSelected ? 'text-[var(--vscode-textLink-foreground)]' : ''}`}
+    >
+      <button
+        onClick={onClick}
+        className={`mr-2 flex gap-2 items-center hover:text-[var(--vscode-textLink-activeForeground)]`}
+        title={buttonTitle}
+      >
+        {isSelected ? (
+          <CheckCircleIconSolid className={`h-4 w-4`} />
+        ) : (
+          <CheckCircleIcon className={`h-4 w-4`} />
+        )}
+        <span>{title}</span>
+      </button>
+    </div>
+  );
+};

src/dashboardWebView/components/Steps/StepsToGetStarted.tsx

@@ -7,12 +7,14 @@ import { Step } from './Step';
 import { useMemo, useState } from 'react';
 import { Menu } from '@headlessui/react';
 import { MenuItem } from '../Menu';
-import { ContentFolder, Framework } from '../../../models';
-import { CheckCircleIcon, ChevronDownIcon } from '@heroicons/react/outline';
-import { CheckCircleIcon as CheckCircleIconSolid } from '@heroicons/react/solid';
+import { ContentFolder, Framework, StaticFolder } from '../../../models';
+import { ChevronDownIcon } from '@heroicons/react/outline';
 import { FrameworkDetectors } from '../../../constants/FrameworkDetectors';
 import { join } from 'path';
 import useThemeColors from '../../hooks/useThemeColors';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+import { SelectItem } from './SelectItem';
 
 export interface IStepsToGetStartedProps {
   settings: Settings;
@@ -29,7 +31,6 @@ const Folder = ({
   folders: ContentFolder[];
   addFolder: (folder: string) => void;
 }) => {
-  const { getColors } = useThemeColors();
 
   const isAdded = useMemo(
     () => folders.find((f) => f.path.toLowerCase() === join(wsFolder, folder).toLowerCase()),
@@ -37,23 +38,11 @@ const Folder = ({
   );
 
   return (
-    <div
-      className={`text-sm flex items-center ${isAdded ? getColors('text-teal-800', 'text-[var(--vscode-textLink-foreground)]') : getColors('text-vulcan-300 dark:text-whisper-800', '')
-        }`}
-    >
-      <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`}
-      >
-        {isAdded ? (
-          <CheckCircleIconSolid className={`h-4 w-4`} />
-        ) : (
-          <CheckCircleIcon className={`h-4 w-4`} />
-        )}
-        <span>{folder}</span>
-      </button>
-    </div>
+    <SelectItem
+      title={folder}
+      buttonTitle={l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedButtonAddFolderTitle)}
+      isSelected={!!isAdded}
+      onClick={() => addFolder(folder)} />
   );
 };
 
@@ -75,6 +64,10 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
     Messenger.send(DashboardMessage.addFolder, folder);
   };
 
+  const addAssetFolder = (folder: string | StaticFolder) => {
+    Messenger.send(DashboardMessage.addAssetsFolder, folder);
+  }
+
   const reload = () => {
     const crntState: any = Messenger.getState() || {};
 
@@ -94,13 +87,9 @@ 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)}</>,
+      show: true,
       status: settings.initialized ? Status.Completed : Status.NotStarted,
       onClick: settings.initialized
         ? undefined
@@ -110,11 +99,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 +113,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 +134,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)}
@@ -167,22 +156,52 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
           </Menu>
         </div>
       ),
+      show: true,
       status: settings.crntFramework ? Status.Completed : Status.NotStarted,
       onClick: undefined
     },
+    {
+      id: `welcome-assets`,
+      name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedAssetsFolderName),
+      description: (
+        <div className='mt-4'>
+          <div className="text-sm">{l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedAssetsFolderDescription)}</div>
+          <div className="mt-1 space-y-1">
+            <SelectItem
+              title={l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedAssetsFolderPublicTitle)}
+              buttonTitle={l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedAssetsFolderPublicTitle)}
+              isSelected={settings.staticFolder === "public"}
+              onClick={() => addAssetFolder(`public`)} />
+
+            <SelectItem
+              title={l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedAssetsFolderAssetsTitle)}
+              buttonTitle={l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedAssetsFolderAssetsTitle)}
+              isSelected={settings.staticFolder === "src/assets"}
+              onClick={() => addAssetFolder({
+                "path": "src/assets",
+                "relative": true
+              })} />
+
+            <p className='text-sm'>
+              <b>{l10n.t(LocalizationKey.commonInformation)}</b>: {l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedAssetsFolderOtherDescription)}</p>
+          </div>
+        </div>
+      ),
+      show: settings.crntFramework === 'astro' || framework === 'astro',
+      status: !settings.staticFolder ? Status.NotStarted : Status.Completed,
+    },
     {
       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,12 +217,11 @@ 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>
         </>
       ),
+      show: true,
       status:
         settings.contentFolders && settings.contentFolders.length > 0
           ? Status.Completed
@@ -211,21 +229,18 @@ 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)}</>,
+      show: true,
       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)}</>,
+      show: true,
       status:
         settings.initialized && settings.contentFolders && settings.contentFolders.length > 0
           ? Status.Active
@@ -247,19 +262,21 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
     <nav aria-label="Progress">
       <ol role="list">
         {steps.map((step, stepIdx) => (
-          <li
-            key={step.id}
-            className={`${stepIdx !== steps.length - 1 ? 'pb-10' : ''} relative`}
-            data-test={step.id}
-          >
-            <Step
-              name={step.name}
-              description={step.description}
-              status={step.status}
-              showLine={stepIdx !== steps.length - 1}
-              onClick={step.onClick}
-            />
-          </li>
+          step.show && (
+            <li
+              key={step.id}
+              className={`${stepIdx !== steps.length - 1 ? 'pb-10' : ''} relative`}
+              data-test={step.id}
+            >
+              <Step
+                name={step.name}
+                description={step.description}
+                status={step.status}
+                showLine={stepIdx !== steps.length - 1}
+                onClick={step.onClick}
+              />
+            </li>
+          )
         ))}
       </ol>
     </nav>

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>
   );

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 || `-`}