Update commands

Use dropdown of shadcn

.frontmatter/database/pinnedItemsDb.json

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

.github/workflows/release-beta.yml

@@ -13,8 +13,8 @@ jobs:
       name: Beta
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
           registry-url: https://registry.npmjs.org/

.github/workflows/release.yml

@@ -13,8 +13,8 @@ jobs:
       name: Stable
 
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
           registry-url: https://registry.npmjs.org/

.vscode/settings.json

@@ -1,5 +1,11 @@
 // Place your settings in this file to overwrite default and user settings.
 {
+  "workbench.colorCustomizations": {
+    "titleBar.activeBackground": "#15c2cb",
+    "titleBar.inactiveBackground": "#44ffd299",
+    "titleBar.activeForeground": "#0E131F",
+    "titleBar.inactiveForeground": "#0E131F99"
+  },
   "files.exclude": {
     "out": false // set this to true to hide the "out" folder with the compiled JS files
   },
@@ -8,8 +14,6 @@
   },
   // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
   "typescript.tsc.autoDetect": "off",
-  "eliostruyf.writingstyleguide.terms.isDisabled": true,
-  "eliostruyf.writingstyleguide.biasFree.isDisabled": true,
   "squarl.groups": [
     {
       "id": "dashboard",

CHANGELOG.md

@@ -1,5 +1,76 @@
 # Change Log
 
+## [9.5.0] - 2024-xx-xx
+
+### ✨ New features
+
+- [#731](https://github.com/estruyf/vscode-front-matter/issues/731): Added the ability to map/unmap taxonomy to multiple pages at once
+- [#746](https://github.com/estruyf/vscode-front-matter/issues/746): Placeholder support added to to the `slug` field
+- [#749](https://github.com/estruyf/vscode-front-matter/issues/749): Ability to set your own filters on the content dashboard with the `frontMatter.content.filters` setting
+
+### 🎨 Enhancements
+
+- [#673](https://github.com/estruyf/vscode-front-matter/pull/673): Added git settings to the welcome view and settings view
+- [#727](https://github.com/estruyf/vscode-front-matter/pull/727): Updated Japanese translations thanks to [mayumihara](https://github.com/mayumih387)
+- [#737](https://github.com/estruyf/vscode-front-matter/issues/737): Optimize the grid layout of the content and media dashboards
+- [#739](https://github.com/estruyf/vscode-front-matter/pull/739): New Git settings to disable and require a commit message
+- [#741](https://github.com/estruyf/vscode-front-matter/issues/741): Added message on the content dashboard when content is processed
+- [#747](https://github.com/estruyf/vscode-front-matter/issues/747): The `@frontmatter/extensibility` dependency now supports scripts for placeholders
+- [#752](https://github.com/estruyf/vscode-front-matter/issues/752): Placeholder support in default `list` field values
+
+### ⚡️ Optimizations
+
+### 🐞 Fixes
+
+- [#721](https://github.com/estruyf/vscode-front-matter/issues/721): Fix keywords regex to support unicode characters
+- [#725](https://github.com/estruyf/vscode-front-matter/issues/725): Fix for opening menu of pinned items
+- [#730](https://github.com/estruyf/vscode-front-matter/issues/730): Add debounce to the input fields
+- [#738](https://github.com/estruyf/vscode-front-matter/issues/738): Fix when re-opening the preview after closing it
+- [#743](https://github.com/estruyf/vscode-front-matter/issues/743): Fix for storing data in YAML data files
+- [#745](https://github.com/estruyf/vscode-front-matter/issues/745): Fix for date field values in `block` field type
+
+## [9.4.0] - 2023-12-12 - [Release notes](https://beta.frontmatter.codes/updates/v9.4.0)
+
+### ✨ New features
+
+- Localization implemented for the whole extension
+
+### 🎨 Enhancements
+
+- [#273](https://github.com/estruyf/vscode-front-matter/issues/273): Allow single value arrays to be set as a string with the `singleValueAsString` field property
+- [#686](https://github.com/estruyf/vscode-front-matter/issues/686): Allow script authors to ask questions during script execution
+- [#688](https://github.com/estruyf/vscode-front-matter/issues/688): Allow to show the scheduled articles in the content dashboard (filter and group)
+- [#690](https://github.com/estruyf/vscode-front-matter/issues/690): Added the ability to filter values in the `contentRelationship` field
+- [#700](https://github.com/estruyf/vscode-front-matter/issues/700): Added the `{{pathToken.relPath}}` placeholder for the `previewPath` property
+- [#706](https://github.com/estruyf/vscode-front-matter/issues/706): Show the error of scripts failing in the Front Matter output panel
+- [#709](https://github.com/estruyf/vscode-front-matter/issues/709): Take "where clause" into account on content creation
+- [#710](https://github.com/estruyf/vscode-front-matter/issues/710): Hide child field when parent field its "when clause" is not met, also remove the fields from the content
+- [#713](https://github.com/estruyf/vscode-front-matter/issues/713): Add the ability to always use quotes around string values in front matter
+- [#722](https://github.com/estruyf/vscode-front-matter/issues/722): Allow to create sub-content which shows a dialog to select the parent folder
+
+### ⚡️ Optimizations
+
+- Dashboard layout grid optimizations
+- Added the content-type name to the metadata section in the panel
+- New implementation of the combobox for the `contentRelationship` field
+
+### 🐞 Fixes
+
+- [#685](https://github.com/estruyf/vscode-front-matter/issues/685): Fix when using non-string values in the tag picker
+- [#691](https://github.com/estruyf/vscode-front-matter/issues/691): Silent authentication retrieval for GitHub sponsors
+- [#694](https://github.com/estruyf/vscode-front-matter/issues/694): Start terminal session from the folder where the `frontmatter.json` file is located
+- [#696](https://github.com/estruyf/vscode-front-matter/issues/696): Close the local server terminal on restart
+- [#699](https://github.com/estruyf/vscode-front-matter/issues/699): Changing border theme variable for the dashboard header
+- [#703](https://github.com/estruyf/vscode-front-matter/issues/703): Fix retrieval of Astro Collections for `pnpm` projects
+- [#704](https://github.com/estruyf/vscode-front-matter/issues/704): Fix `zod` schema script for optional fields
+- [#707](https://github.com/estruyf/vscode-front-matter/issues/707): Fix `clearEmpty` issue with `draft` and `boolean` fields which are by default set to `true`
+- [#711](https://github.com/estruyf/vscode-front-matter/issues/711): Fix in character mapping in the slug field
+- [#712](https://github.com/estruyf/vscode-front-matter/issues/712): Keep the search context when deleting media files
+- [#714](https://github.com/estruyf/vscode-front-matter/issues/714): Fix for taxonomy filtering from taxonomy view to content view
+- [#717](https://github.com/estruyf/vscode-front-matter/issues/717): Fix in loading yaml data files
+- [#718](https://github.com/estruyf/vscode-front-matter/issues/718): Fix JSON schema for the `frontMatter.panel.actions.disabled` setting
+- [#719](https://github.com/estruyf/vscode-front-matter/issues/719): Fix styling on data view with objects views
+
 ## [9.3.1] - 2023-10-27
 
 ### 🐞 Fixes

CONTRIBUTING.md

@@ -25,9 +25,9 @@ Eager to start contributing? Great 🤩, you can contribute to the following pro
 
 - Start by forking this project;
 - Clone your fork to your local machine;
-- Run `pnpm i`;
+- Run `npm i`;
 - Open the project in VS Code;
-- To start developing, run `pnpm dev:ext` and press `f5` to start the debugging session.
+- To start developing, run `npm run dev:ext` and press `f5` to start the debugging session.
 
 ### Tips
 

assets/icons/i18n-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
+</svg>

assets/icons/i18n-light.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="#424242">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802" />
+</svg>

e2e/src/command.test.ts

@@ -1,78 +0,0 @@
-import { By, VSBrowser, EditorView, WebView, Workbench, Notification, StatusBar, NotificationType } from "vscode-extension-tester";
-import { expect } from "chai";
-import { sleep } from "./utils";
-import { join } from "path";
-
-// https://github.com/microsoft/vscode-java-dependency/blob/4256fa6adcaff5ec24dbdbb8d9a516fad21431c5/test/ui/index.ts
-// https://github.com/microsoft/vscode-java-dependency/blob/4256fa6adcaff5ec24dbdbb8d9a516fad21431c5/test/ui/command.test.ts
-
-describe("Initialization testing", function() {
-  this.timeout(2 * 60 * 1000 /*ms*/);
-
-  let workbench: Workbench;
-  let view: WebView;
-
-  before(async function() {
-    await VSBrowser.instance.openResources(join(__dirname, '../sample'));
-    await sleep(3000);
-    workbench = new Workbench();
-
-    await workbench.executeCommand("frontMatter.dashboard");
-    await sleep(3000);
-
-    await new EditorView().openEditor(`FrontMatter Dashboard`);
-
-    view = new WebView();
-    await view.switchToFrame();
-  });
-
-  it("1. Open welcome dashboard", async function() {
-    const element = await view.findWebElement(By.css('h1'));
-
-    const title = await element.getText();
-
-    expect(title).has.string(`Front Matter`);
-  });
-
-  it("2. Initialize project", async function() {
-    const btn = await view.findWebElement(By.css('[data-test="welcome-init"] button'));
-    expect(btn).to.exist;
-
-    await btn.click();
-
-    await sleep(1000);
-
-    await VSBrowser.instance.driver.wait(() => {
-      return notificationExists(workbench, 'Front Matter:');
-    }, 2000) as Notification;
-
-    const notifications = await workbench.getNotifications();
-
-    let notification!: Notification;
-    for (const not of notifications) {
-      console.log(not);
-
-      // const message = await not.get;
-      // console.log(message);
-      // if (message.includes('Front Matter:')) {
-      //   notification = not;
-      // }
-    }
-
-    expect(await notification.getMessage()).has.string(`Project initialized successfully.`);
-  });
-
-  it("3. Check if project file is created", async function() {});
-});
-
-
-async function notificationExists(workbench: Workbench, text: string): Promise<Notification | undefined> {
-  const notifications = await (await (new StatusBar()).openNotificationsCenter()).getNotifications(NotificationType.Info);
-
-  for (const notification of notifications) {
-    const message = await notification.getMessage();
-    if (message.indexOf(text) >= 0) {
-      return notification;
-    }
-  }
-}

e2e/src/runTests.ts

@@ -1,33 +0,0 @@
-import * as path from 'path'
-import * as semver from 'semver'
-import { ExTester, ReleaseQuality } from 'vscode-extension-tester'
-
-async function main(): Promise<void> {
-  const vsCodeVersion: semver.SemVer = new semver.SemVer(`1.66.0`)
-  const version = vsCodeVersion.version
-
-  const storageFolder = path.join(__dirname, '..', 'storage')
-  const extFolder = path.join(__dirname, '..', 'extensions')
-
-  try {
-    const testPath = path.join(__dirname, 'command.test.js')
-
-    const exTester = new ExTester(storageFolder, ReleaseQuality.Stable, extFolder)
-    await exTester.downloadCode(version)
-    await exTester.installVsix({ useYarn: false })
-    // await exTester.installFromMarketplace("eliostruyf.vscode-front-matter");
-    await exTester.downloadChromeDriver(version)
-    // await exTester.setupRequirements({vscodeVersion: version});
-    const result = await exTester.runTests(testPath, {
-      vscodeVersion: version,
-      resources: [storageFolder],
-    })
-
-    process.exit(result)
-  } catch (err) {
-    console.log(err)
-    process.exit(1)
-  }
-}
-
-main()

e2e/src/utils/index.ts

@@ -1 +0,0 @@
-export * from './sleep';

e2e/src/utils/sleep.ts

@@ -1,3 +0,0 @@
-export async function sleep(time: number) {
-  await new Promise((resolve) => setTimeout(resolve, time));
-}

l10n/bundle.l10n.es.json

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

l10n/bundle.l10n.ja.json

@@ -4,6 +4,7 @@
   "common.delete": "削除",
   "common.cancel": "キャンセル",
   "common.clear": "クリア",
+  "common.apply": "適用",
   "common.clear.value": "値をクリア",
   "common.search": "検索",
   "common.save": "保存",
@@ -20,38 +21,85 @@
   "common.slug": "スラッグ",
   "common.support": "サポート",
   "common.remove.value": "{0}を削除",
+  "common.filter": "絞り込み",
+  "common.filter.value": "{0}で絞り込み",
   "common.error.message": "申し訳ありません。エラーが発生しました。",
+  "common.openOnWebsite": "ウェブサイトで開く",
+  "common.settings": "設定",
+  "common.refreshSettings": "設定の再読み込み",
+  "common.pin": "ピン留めする",
+  "common.unpin": "ピン留めを外す",
+  "common.noResults": "結果なし",
+  "common.error": "申し訳ありません。エラーが発生しました。",
+  "common.yes": "はい",
+  "common.no": "いいえ",
+  "common.openSettings": "設定を開く",
+  "common.back": "戻る",
+
+  "notifications.outputChannel.link": "出力ウィンドウ",
+  "notifications.outputChannel.description": "詳細は{0}を確認してください。",
+
+  "settings.view.common": "一般",
+  "settings.view.contentFolders": "記事フォルダー",
+  "settings.view.astro": "Astro",
+  "settings.openOnStartup": "起動時にダッシュボードを開く",
+  "settings.contentTypes": "記事タイプ",
+  "settings.contentFolders": "記事フォルダー",
+  "settings.diagnostic": "診断",
+  "settings.diagnostic.description": "診断プログラムを実行して、Front Matter CMS構成全体を確認できます。",
+  "settings.diagnostic.link": "完全診断を実行する",
+
+  "settings.commonSettings.website.title": "ウェブサイトとSSGの設定",
+  "settings.commonSettings.previewUrl": "プレビュー用URL",
+  "settings.commonSettings.websiteUrl": "ウェブサイトのURL",
+  "settings.commonSettings.startCommand": "SSG/フレームワーク起動コマンド",
+
   "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.overview.pinned": "ピン留めアイテム",
+
   "dashboard.contents.status.draft": "下書き",
   "dashboard.contents.status.published": "公開済み",
+  "dashboard.contents.status.scheduled": "予約済み",
+
   "dashboard.dataView.dataForm.modify": "エントリーを編集",
   "dashboard.dataView.dataForm.add": "エントリーを作成",
+
   "dashboard.dataView.dataView.select": "データタイプを選択",
   "dashboard.dataView.dataView.title": "\"{0}\"のエントリー",
   "dashboard.dataView.dataView.add": "新規エントリーを追加",
@@ -60,34 +108,50 @@
   "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.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.scheduled": "予約済み",
   "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": "ファイル名（昇順）",
@@ -101,21 +165,27 @@
   "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": "メタデータを編集",
@@ -127,8 +197,10 @@
   "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": "ファイルパスをコピー",
@@ -138,6 +210,7 @@
   "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}にアップロードする",
@@ -145,13 +218,17 @@
   "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": "スニペットファイルの表示",
@@ -161,6 +238,7 @@
   "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": "スニペットの概要",
@@ -171,12 +249,14 @@
   "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に必要な設定ファイルを作成します。クリックして開始してください。",
@@ -184,20 +264,32 @@
   "dashboard.steps.stepsToGetStarted.framework.description": "静的サイトジェネレーターまたはフレームワークを選択して、必要なセッティングを追加します。",
   "dashboard.steps.stepsToGetStarted.framework.select": "フレームワークを選択",
   "dashboard.steps.stepsToGetStarted.framework.select.other": "その他",
+  "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ファイルへ手動で設定可能です。",
   "dashboard.steps.stepsToGetStarted.contentFolders.name": "記事ファイルのフォルダーを登録",
-  "dashboard.steps.stepsToGetStarted.contentFolders.description": "記事ファイルの保存フォルダーを追加してください。フォルダーが設定されると、フォルダー内の記事ファイルがFront Matterでリスト化され、新規記事ファイルを追加できるようになります。",
+  "dashboard.steps.stepsToGetStarted.contentFolders.description": "記事ファイルの保存フォルダーを追加してください。フォルダーが設定されると、フォルダー内の記事ファイルがFront Matterでリスト化され、新規の記事ファイルを追加できるようになります。",
   "dashboard.steps.stepsToGetStarted.contentFolders.label": "記事ファイルを含むフォルダー",
-  "dashboard.steps.stepsToGetStarted.contentFolders.information.description": "フォルダーの登録は、エクスプローラーでフォルダー名を右クリックして「フォルダーを登録」を選択することでも可能です。",
+  "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.steps.stepsToGetStarted.template.name": "設定用のテンプレートを使用する",
+  "dashboard.steps.stepsToGetStarted.template.description": "おすすめの設定のテンプレートを選択して、frontmatter.jsonに反映させます。",
+  "dashboard.steps.stepsToGetStarted.template.warning": "選択によりプロジェクトの構成にテンプレートが適用され、この設定画面は終了します。",
+  "dashboard.steps.stepsToGetStarted.astroContentTypes.name": "Astroコンテンツコレクションのコンテンツタイプを作成する",
+
   "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": "名前",
@@ -205,17 +297,25 @@
   "dashboard.taxonomyView.taxonomyManager.table.heading.action": "コマンド",
   "dashboard.taxonomyView.taxonomyManager.table.row.empty": "{0}はありません",
   "dashboard.taxonomyView.taxonomyManager.table.unmapped.title": "設定ファイルに見つかりません",
+  "dashboard.taxonomyView.taxonomyManager.filterInput.placeholder": "絞り込み",
+
+  "dashboard.taxonomyView.taxonomyTagging.pageTitle": "タクソノミー {0} をリマッピング",
+  "dashboard.taxonomyView.taxonomyTagging.checkbox": "ページにタクソノミー{0}を付ける",
+
   "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.github.label": "GitHub",
+  "dashboard.welcomeScreen.link.documentation.label": "ドキュメント",
   "dashboard.welcomeScreen.link.sponsor.title": "スポンサーになる",
   "dashboard.welcomeScreen.link.sponsor.label": "スポンサー",
   "dashboard.welcomeScreen.link.review.title": "評価する",
@@ -223,41 +323,66 @@
   "dashboard.welcomeScreen.actions.heading": "以下の手順に従って、この拡張機能をスタートさせてください。",
   "dashboard.welcomeScreen.actions.description": "サイドパネルからもFront Matterを利用できます。サイドパネルでは、各コンテンツに合った具体的なコマンドが実行可能です。",
   "dashboard.welcomeScreen.actions.thanks": "Front Matterをお楽しみください！",
+
+  "dashboard.media.detailsSlideOver.unmapped.description": "未割り当てのファイルのメタデータを再マップしますか？",
+
+  "dashboard.configuration.astro.astroContentTypes.empty": "Astroコンテンツコレクションが見つかりません。",
+  "dashboard.configuration.astro.astroContentTypes.description": "以下のAstroコンテンツコレクションは、コンテンツタイプを生成するために使用できます。",
+
   "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": "数",
@@ -266,15 +391,18 @@
   "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": "最終更新日を自動で更新",
@@ -284,7 +412,9 @@
   "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": "ライティング設定を有効化",
@@ -295,17 +425,23 @@
   "panel.otherActions.documentation": "ドキュメントを開く",
   "panel.otherActions.settings": "設定方法の概要",
   "panel.otherActions.issue": "問題を報告",
+
   "panel.preview.title": "プレビューを表示",
+
   "panel.publishAction.publish": "公開",
   "panel.publishAction.unpublish": "下書きに戻す",
+
   "panel.seoDetails.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": "長さ",
@@ -315,50 +451,270 @@
   "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ファイルで手動で行うことができます。",
-  "dashboard.steps.stepsToGetStarted.template.name": "設定テンプレートを使用する",
-  "dashboard.steps.stepsToGetStarted.template.description": "おすすめの設定でfrontmatter.jsonファイルを事前に埋めるテンプレートを選択します。",
+
+  "commands.article.setDate.error": "日付の表示形式の解析中に何らかの問題が発生しました。\"{0}\"の設定を確認してください。",
+  "commands.article.updateSlug.error": "ファイル名を変更できませんでした。: {0}",
+
+  "commands.cache.cleared": "キャッシュがクリアされました。",
+
+  "commands.chatbot.title": "何でも聞いてください",
+
+  "commands.content.option.contentType.label": "記事タイプから記事を作成",
+  "commands.content.option.contentType.description": "設定済みの記事タイプを選択して記事を作成",
+  "commands.content.option.template.label": "テンプレートから記事を作成",
+  "commands.content.option.template.description": "設定済みのテンプレートを選択して記事を作成",
+  "commands.content.quickPick.title": "記事の作成",
+  "commands.content.quickPick.placeholder": "記事の作成方法を選択してください。",
+
+  "commands.dashboard.title": "ダッシュボード",
+
+  "commands.folders.addMediaFolder.inputBox.title": "メディアフォルダーの追加",
+  "commands.folders.addMediaFolder.inputBox.prompt": "新規作成するフォルダー名を入力してください。(\"/\"で多階層のフォルダーを作成可能です)",
+  "commands.folders.addMediaFolder.noFolder.warning": "フォルダー名が入力されていません。",
+  "commands.folders.create.folderExists.warning": "フォルダーは既に登録済です。",
+  "commands.folders.create.input.title": "フォルダーを登録する",
+  "commands.folders.create.input.prompt": "登録するフォルダー名を指定してください。",
+  "commands.folders.create.input.placeholder": "フォルダー名",
+  "commands.folders.create.success": "フォルダーが登録されました。",
+  "commands.folders.getWorkspaceFolder.workspaceFolderPick.placeholder": "Front Matterを利用するメインのワークスペースのフォルダーを選択してください。",
+  "commands.folders.get.notificationError.title": "\"{0}\"フォルダーが存在しません。このフォルダーを設定から削除してください。",
+  "commands.folders.get.notificationError.remove.action": "フォルダー設定を削除",
+  "commands.folders.get.notificationError.create.action": "フォルダーを作成",
+
+  "commands.preview.panel.title": "プレビュー: {0}",
+  "commands.preview.askUserToPickFolder.title": "プレビュー用の記事フォルダーを選択してください。",
+
+  "commands.project.initialize.success": "プロジェクトが初期化されました。",
+  "commands.project.switchProject.title": "どのプロジェクトに切り替えますか？",
+  "commands.project.createSampleTemplate.info": "テンプレートサンプルを作成しました。",
+
+  "commands.settings.create.input.prompt": "設定に追加したい{0}の値を入力してください。",
+  "commands.settings.create.input.placeholder": "{0}の名前",
+  "commands.settings.create.warning": "入力された {0} は既に存在しています。",
+  "commands.settings.create.quickPick.placeholder": "新規{0}をページに追加しますか？",
+  "commands.settings.export.progress.title": "{0}: タグとカテゴリーをエクスポートしています。",
+  "commands.settings.export.progress.success": "エクスポートが完了しました。タグ: {0} - カテゴリー: {1}",
+  "commands.settings.remap.quickpick.title": "再構成",
+  "commands.settings.remap.quickpick.placeholder": "何を再構成しますか？",
+  "commands.settings.remap.noTaxonomy.warning": "編集可能な{0}が存在しません。",
+  "commands.settings.remap.selectTaxonomy.placeholder": "編集したい{0}を選択してください。",
+  "commands.settings.remap.newOption.input.prompt": "\"{1}\"を再構成します。変更したい{0}値を入力してください。全ての記事から{0}を削除する場合は空欄にしてください。",
+  "commands.settings.remap.newOption.input.placeholder": "{0}名",
+  "commands.settings.remap.delete.placeholder": "{1} {0}を削除しますか？",
+
+  "commands.statusListener.verifyRequiredFields.diagnostic.emptyField": "フィールド {0} は必須です。値を入力してください。",
+  "commands.statusListener.verifyRequiredFields.notification.error": "以下の必須のフィールドに値が入力されていません。: {0}",
+
+  "commands.template.generate.input.title": "テンプレート名",
+  "commands.template.generate.input.prompt": "テンプレート名を入力してください。",
+  "commands.template.generate.input.placeholder": "article",
+  "commands.template.generate.noTitle.warning": "テンプレート名が入力されていません。",
+  "commands.template.generate.keepContents.title": "記事本文の反映",
+  "commands.template.generate.keepContents.placeholder": "記事本文をテンプレートにそのまま残しますか？",
+  "commands.template.generate.keepContents.noOption.warning": "記事本文を残すかどうかの選択がされませんでした。",
+  "commands.template.generate.keepContents.success": "{0}フォルダー内にテンプレートが作成されました。",
+  "commands.template.getTemplates.warning": "テンプレートがありません。",
+  "commands.template.create.folderPath.warning": "取得されたプロジェクトフォルダーのパスが不正です。",
+  "commands.template.create.noTemplates.warning": "テンプレートがありません。",
+  "commands.template.create.selectTemplate.title": "テンプレートの選択",
+  "commands.template.create.selectTemplate.placeholder": "記事テンプレートを選択してください。",
+  "commands.template.create.selectTemplate.noTemplate.warning": "テンプレートが選択されていません。",
+  "commands.template.create.selectTemplate.notFound.warning": "記事テンプレートが見つかりません。",
+  "commands.template.create.success": "新規記事が有効になりました。",
+
+  "commands.wysiwyg.command.unorderedList.label": "順序なしリスト",
+  "commands.wysiwyg.command.unorderedList.detail": "順序なしリストを追加",
+  "commands.wysiwyg.command.orderedList.label": "順序付きリスト",
+  "commands.wysiwyg.command.orderedList.detail": "順序付きリストを追加",
+  "commands.wysiwyg.command.taskList.label": "タスクリスト",
+  "commands.wysiwyg.command.taskList.detail": "タスクリストを追加",
+  "commands.wysiwyg.command.code.label": "コード",
+  "commands.wysiwyg.command.code.detail": "インラインコードスニペットを追加",
+  "commands.wysiwyg.command.codeblock.label": "コードブロック",
+  "commands.wysiwyg.command.codeblock.detail": "コードブロックを追加",
+  "commands.wysiwyg.command.blockquote.label": "ブロック引用要素",
+  "commands.wysiwyg.command.blockquote.detail": "ブロック引用要素を追加",
+  "commands.wysiwyg.command.strikethrough.label": "取り消し線",
+  "commands.wysiwyg.command.strikethrough.detail": "取り消し線付きテキストを追加",
+  "commands.wysiwyg.quickPick.title": "WYSIWYG オプション",
+  "commands.wysiwyg.quickPick.placeholder": "どのマークアップ要素を挿入しますか？",
+  "commands.wysiwyg.addHyperlink.hyperlinkInput.title": "WYSIWYG ハイパーリンク",
+  "commands.wysiwyg.addHyperlink.hyperlinkInput.prompt": "URLを入力",
+  "commands.wysiwyg.addHyperlink.textInput.title": "WYSIWYG テキスト",
+  "commands.wysiwyg.addHyperlink.textInput.prompt": "ハイパーリンクのテキストを入力",
+  "commands.wysiwyg.insertText.heading.input.title": "見出し",
+  "commands.wysiwyg.insertText.heading.input.placeholder": "見出しのレベルを選択",
+
+  "helpers.articleHelper.createContent.pageBundle.error": "{0}という名称のページバンドルは、既に {1} に存在しています。",
+  "helpers.articleHelper.createContent.contentExists.warning": "同タイトルの記事が存在します。別のタイトルを付けてください。",
+  "helpers.articleHelper.processCustomPlaceholders.placeholder.error": "プレースホルダー{0}の生成中にエラーが発生しました。",
+  "helpers.articleHelper.parseFile.diagnostic.error": "{0}のfront matterの解析中にエラーが発生しました。",
+
+  "helpers.contentType.generate.noFrontMatter.error": "記事タイプの生成に必要なfront matterデータがありません。",
+  "helpers.contentType.generate.override.quickPick.title": "デフォルトの記事タイプを上書き",
+  "helpers.contentType.generate.override.quickPick.placeholder": "この記事のフィールド設定を、デフォルトの記事タイプのフィールド設定に上書きしますか？",
+  "helpers.contentType.generate.contentTypeInput.title": "記事タイプを生成",
+  "helpers.contentType.generate.contentTypeInput.prompt": "新規作成したい記事タイプ名を入力してください。",
+  "helpers.contentType.generate.contentTypeInput.validation.enterName": "記事タイプ名を入力してください。",
+  "helpers.contentType.generate.contentTypeInput.validation.nameExists": "この記事タイプ名は既に存在しています。",
+  "helpers.contentType.generate.noContentTypeName.warning": "記事タイプが選択されませんでした。",
+  "helpers.contentType.generate.pageBundle.quickPick.title": "ページバンドルとして使用",
+  "helpers.contentType.generate.pageBundle.quickPick.placeHolder": "この記事タイプをページバンドルとして使用しますか？",
+  "helpers.contentType.generate.updated.success": "記事タイプ {0} を更新しました。",
+  "helpers.contentType.generate.generated.success": "記事タイプ {0} を生成しました。",
+  "helpers.contentType.addMissingFields.noFrontMatter.warning": "追加すべきfront matterデータはありません。",
+  "helpers.contentType.addMissingFields.updated.success": "記事タイプ {0} を更新しました。",
+  "helpers.contentType.setContentType.noFrontMatter.warning": "記事タイプの設定が必要なfront matterデータが見つかりません。",
+  "helpers.contentType.setContentType.quickPick.title": "記事タイプを選択",
+  "helpers.contentType.setContentType.quickPick.placeholder": "どの記事タイプを使用しますか？",
+  "helpers.contentType.create.allowSubContent.title": "サブコンテンツとしての要否",
+  "helpers.contentType.create.allowSubContent.placeHolder": "新規記事をサブコンテンツとして作成しますか？",
+  "helpers.contentType.create.allowSubContent.showOpenDialog.openLabel": "フォルダーを選択",
+  "helpers.contentType.create.allowSubContent.showOpenDialog.title": "新規記事用のフォルダーを選択してください。",
+  "helpers.contentType.create.pageBundle.title": "ページバンドルとして要否",
+  "helpers.contentType.create.pageBundle.placeHolder": "ページバンドルとして記事を作成しますか？",
+  "helpers.contentType.create.progress.title": "{0}: 記事ファイルを作成中...",
+  "helpers.contentType.create.success": "記事ファイルを作成しました。",
+  "helpers.contentType.verify.warning": "記事タイプ・コマンドは、このモードでは有効になっていません。",
+
+  "helpers.customScript.executing": "実行中: {0}",
+  "helpers.customScript.singleRun.article.warning": "{0}: Article couldn't be retrieved.",
+  "helpers.customScript.bulkRun.noFiles.warning": "{0}: ファイルが見つかりません。",
+  "helpers.customScript.runMediaScript.noFolder.warning": "{0}: フォルダーまたはメディアへのパスの指定がされていません。",
+  "helpers.customScript.showOutput.frontMatter.success": "{0}: front matter updated.",
+  "helpers.customScript.showOutput.copyOutput.action": "出力結果をコピー",
+  "helpers.customScript.showOutput.success": "{0}: カスタムスクリプトを実行しました。",
+  "helpers.customScript.validateCommand.error": "不正なコマンド: {0}",
+
+  "helpers.dataFileHelper.process.error": "データファイルの実行中に何らかの問題が発生しました。",
+
+  "helpers.extension.getVersion.changelog": "変更履歴を確認する",
+  "helpers.extension.getVersion.starIt": "⭐️を付ける",
+  "helpers.extension.getVersion.update.notification": "{0} が v{1} に更新されました！新機能をチェックしてください！",
+  "helpers.extension.migrateSettings.deprecated.warning": "\"{0}\"及び\"{1}\"の設定は非推奨になりました。代わりに\"isPublishDate\"と\"isModifiedDate\"の日付フィールドを使用してください。",
+  "helpers.extension.migrateSettings.deprecated.warning.hide": "非表示にする",
+  "helpers.extension.migrateSettings.deprecated.warning.seeGuide": "移行ガイドを読む",
+  "helpers.extension.migrateSettings.templates.quickPick.title": "{0} - テンプレート",
+  "helpers.extension.migrateSettings.templates.quickPick.placeholder": "テンプレート機能の使用を継続しますか？",
+  "helpers.extension.checkIfExtensionCanRun.warning": "Front MatterのBETA版は安定版がインストールされている場合は利用できません。BETA版のみがインストールされていることを確認してください。",
+
+  "helpers.mediaHelper.saveFile.folder.error": "選択されたフォルダーが見つかりません。",
+  "helpers.mediaHelper.saveFile.file.uploaded.success": "ファイル{0}が{1}へアップロードされました。",
+  "helpers.mediaHelper.saveFile.file.uploaded.failed": "申し訳ありません、{0}のアップロード中にエラーが発生しました。",
+  "helpers.mediaHelper.deleteFile.file.deletion.failed": "申し訳ありません、{0}の削除中にエラーが発生しました。",
+
+  "helpers.mediaLibrary.remove.warning": "その場所にはファイル\"{0}\"が既に存在しています。",
+  "helpers.mediaLibrary.remove.error": "申し訳ありません、\"{0}\"を\"{1}\"へのアップロード中にエラーが発生しました。",
+
+  "helpers.openFileInEditor.error": "ファイルを開けません。",
+
+  "helpers.questions.contentTitle.aiInput.title": "タイトルまたはディスクリプション",
+  "helpers.questions.contentTitle.aiInput.prompt": "どんな内容について書きたいですか？",
+  "helpers.questions.contentTitle.aiInput.placeholder": "どんな内容について書きたいですか？",
+  "helpers.questions.contentTitle.aiInput.quickPick.title.separator": "タイトル/ディスクリプション",
+  "helpers.questions.contentTitle.aiInput.quickPick.ai.separator": "AI生成によるタイトル",
+  "helpers.questions.contentTitle.aiInput.select.title": "タイトルを選択",
+  "helpers.questions.contentTitle.aiInput.select.placeholder": "記事に付けるタイトルを選択",
+  "helpers.questions.contentTitle.aiInput.failed": "AIタイトルの取得に失敗しました。自分で作成するか、後からもう一度試してください。",
+  "helpers.questions.contentTitle.aiInput.warning": "記事タイトルの入力がされていません。",
+  "helpers.questions.contentTitle.titleInput.title": "記事タイトル",
+  "helpers.questions.contentTitle.titleInput.prompt": "新しい記事のタイトルを入力してください。",
+  "helpers.questions.contentTitle.titleInput.placeholder": "タイトル",
+  "helpers.questions.contentTitle.titleInput.warning": "記事タイトルの入力がされていません。",
+  "helpers.questions.selectContentFolder.quickPick.title": "フォルダーを選択",
+  "helpers.questions.selectContentFolder.quickPick.placeholder": "記事の保存先を選択してください。",
+  "helpers.questions.selectContentFolder.quickPick.noSelection.warning": "記事の保存先が選択されていません。",
+  "helpers.questions.selectContentType.noContentType.warning": "記事タイプが見つかりません。先に記事タイプを作成してから記事を作成してください。",
+  "helpers.questions.selectContentType.quickPick.title": "記事タイプ",
+  "helpers.questions.selectContentType.quickPick.placeholder": "新規作成する記事の記事タイプを選択してください。",
+  "helpers.questions.selectContentType.noSelection.warning": "記事タイプが選択されていません。",
+
+  "helpers.seoHelper.checkLength.diagnostic.message": "記事{0}の文字数が{1}文字を超えています（現在の文字数: {2}）。SEOの観点上、{1}文字以内に収めることが推奨されます。",
+
+  "helpers.settingsHelper.checkToPromote.message": "ローカル設定が存在します。この設定をグローバル設定(\"frontmatter.json\")に昇格させますか？",
+  "helpers.settingsHelper.promote.success": "全ての設定をチームレベルに昇格しました。",
+  "helpers.settingsHelper.readConfig.progress.title": "{0}: 動的な設定ファイルを読み込んでいます...",
+  "helpers.settingsHelper.readConfig.error": "設定の読み込みでエラーが発生しました。",
+  "helpers.settingsHelper.refreshConfig.success": "設定を再読み込みしました。",
+
+  "helpers.taxonomyHelper.rename.input.title": "タクソノミー名を変更 {0}",
+  "helpers.taxonomyHelper.rename.validate.equalValue": "現在のファイル名とは別のファイル名を入力してください。",
+  "helpers.taxonomyHelper.rename.validate.noValue": "新しいファイル名を入力してください。",
+  "helpers.taxonomyHelper.merge.quickPick.title": "\"{0}\"を別の{1}にマージ",
+  "helpers.taxonomyHelper.merge.quickPick.placeholder": "マージする{0}を選択してください。",
+  "helpers.taxonomyHelper.delete.quickPick.title": "\"{0}\"を{1}から削除",
+  "helpers.taxonomyHelper.delete.quickPick.placeholder": "本当に\"{0}\"を{1}から削除しますか？",
+  "helpers.taxonomyHelper.createNew.input.title": "{0}に新規タクソノミーを作成",
+  "helpers.taxonomyHelper.createNew.input.placeholder": "作成したいタクソノミー名を入力してください。",
+  "helpers.taxonomyHelper.createNew.input.validate.noValue": "タクソノミー名は必須です。",
+  "helpers.taxonomyHelper.createNew.input.validate.exists": "このタクソノミー名は既に存在しています。",
+  "helpers.taxonomyHelper.process.insert": "{0}: 選択した記事に \"{1}\" を追加しています。",
+  "helpers.taxonomyHelper.process.edit": "{0}: {2}内の\"{1}\"を{3}に変更しています。",
+  "helpers.taxonomyHelper.process.merge": "{0}: {2}内の\"{1}\"を{3}にマージしています。",
+  "helpers.taxonomyHelper.process.delete": "{0}: \"{1}\"を{2}から削除しています。",
+  "helpers.taxonomyHelper.process.insert.success": "追加しました。",
+  "helpers.taxonomyHelper.process.edit.success": "変更しました。",
+  "helpers.taxonomyHelper.process.merge.success": "マージしました。",
+  "helpers.taxonomyHelper.process.delete.success": "削除しました。",
+  "helpers.taxonomyHelper.move.quickPick.title": "\"{0}\"を別のタクソノミータイプに移行",
+  "helpers.taxonomyHelper.move.quickPick.placeholder": "移行先のタクソノミータイプを選択してください。",
+  "helpers.taxonomyHelper.move.progress.title": "{0}: \"{1}\"を{2}から\"${3}\"へ移行しています。",
+  "helpers.taxonomyHelper.move.success": "移行しました。",
+
+  "listeners.dashboard.dashboardListener.openConfig.notification": "設定内容を確認するには\"frontmatter.json\"を開いてください。",
+  "listeners.dashboard.dashboardListener.pinItem.noPath.error": "パスが指定されていません。",
+  "listeners.dashboard.dashboardListener.pinItem.coundNotPin.error": "ピン留めができませんでした。",
+  "listeners.dashboard.dashboardListener.pinItem.coundNotUnPin.error": "ピン留めの解除ができませんでした。",
+
   "listeners.dashboard.settingsListener.triggerTemplate.notification": "テンプレートファイルがコピーされました。",
-  "common.openOnWebsite": "ウェブサイトで開く",
-  "common.filter.value": "{0} でフィルタリング",
-  "dashboard.media.detailsSlideOver.unmapped.description": "未割り当てのファイルのメタデータを再マップしますか",
-  "common.settings": "設定",
-  "common.refreshSettings": "設定の更新",
-  "common.pin": "ピン",
-  "common.unpin": "解除",
-  "settings.view.common": "コモン",
-  "settings.view.contentFolders": "コンテンツ フォルダー",
-  "settings.view.astro": "アストロ",
-  "settings.openOnStartup": "起動時にダッシュボードを開く",
-  "settings.contentTypes": "コンテンツ タイプ",
-  "settings.contentFolders": "コンテンツ フォルダー",
-  "settings.diagnostic": "診断",
-  "settings.diagnostic.description": "診断プログラムを実行して、フロントマター CMS 構成全体を確認できます。",
-  "settings.diagnostic.link": "完全診断を実行する",
-  "settings.commonSettings.website.title": "ウェブサイトとSSGの設定",
-  "settings.commonSettings.previewUrl": "URL のプレビュー",
-  "settings.commonSettings.websiteUrl": "ウェブサイトの URL",
-  "settings.commonSettings.startCommand": "SSG/フレームワーク起動コマンド",
-  "dashboard.contents.overview.pinned": "固定",
-  "dashboard.steps.stepsToGetStarted.astroContentTypes.name": "Astroコンテンツコレクションのコンテンツタイプを作成する",
-  "dashboard.welcomeScreen.link.documentation.label": "ドキュメンテーション",
-  "dashboard.configuration.astro.astroContentTypes.empty": "Astroコンテンツコレクションが見つかりません。",
-  "dashboard.configuration.astro.astroContentTypes.description": "以下のAstroコンテンツコレクションは、コンテンツタイプを生成するために使用できます。"
+  "listeners.dashboard.settingsListener.triggerTemplate.progress.title": "テンプレートをダウンロードして初期化しています...",
+  "listeners.dashboard.settingsListener.triggerTemplate.download.error": "テンプレートのダウンロードに失敗しました。",
+  "listeners.dashboard.settingsListener.triggerTemplate.init.error": "テンプレートの初期化に失敗しました。",
+
+  "listeners.dashboard.snippetListener.addSnippet.missingFields.warning": "スニペットのタイトルまたはbodyが空です。",
+  "listeners.dashboard.snippetListener.addSnippet.exists.warning": "同じタイトルのスニペットが既に存在しています。",
+  "listeners.dashboard.snippetListener.updateSnippet.noSnippets.warning": "更新が必要なスニペットはありません。",
+
+  "listeners.general.gitListener.push.error": "submoduleのpushに失敗しました。",
+
+  "listeners.panel.dataListener.aiSuggestTaxonomy.noEditor.error": "アクティブなエディターがありません。",
+  "listeners.panel.dataListener.aiSuggestTaxonomy.noData.error": "記事データがありません。",
+  "listeners.panel.dataListener.getDataFileEntries.noDataFiles.error": "データファイルのエントリーが見つかりませんでした。",
+
+
+  "listeners.panel.taxonomyListener.aiSuggestTaxonomy.noEditor.error": "アクティブなエディターがありません。",
+  "listeners.panel.taxonomyListener.aiSuggestTaxonomy.noData.error": "記事データがありません。",
+
+  "services.modeSwitch.switchMode.quickPick.placeholder": "モードを選択してください。",
+  "services.modeSwitch.switchMode.quickPick.title": "{0}: モードの選択",
+  "services.modeSwitch.setText.mode": "モード: {0}",
+
+  "services.pagesParser.parsePages.statusBar.text": "読み込み中...",
+  "services.pagesParser.parsePages.file.error": "ファイルエラー: {0}",
+
+  "services.sponsorAi.getTitles.warning": "AIによるタイトル生成に時間がかかりすぎています。後でもう一度試してください。",
+  "services.sponsorAi.getDescription.warning": "AIによるディスクリプション生成に時間がかかりすぎています。後でもう一度試してください。",
+  "services.sponsorAi.getTaxonomySuggestions.warning": "AIによるタクソノミー生成に時間がかかりすぎています。後でもう一度試してください。",
+
+  "services.terminal.openLocalServerTerminal.terminalOption.message": "ローカルサーバーを起動"
 }

l10n/bundle.l10n.json

@@ -3,6 +3,7 @@
   "common.edit": "Edit",
   "common.delete": "Delete",
   "common.cancel": "Cancel",
+  "common.apply": "Apply",
   "common.clear": "Clear",
   "common.clear.value": "Clear value",
   "common.search": "Search",
@@ -20,6 +21,7 @@
   "common.slug": "Slug",
   "common.support": "Support",
   "common.remove.value": "Remove {0}",
+  "common.filter": "Back",
   "common.filter.value": "Filter by {0}",
   "common.error.message": "Sorry, something went wrong.",
   "common.openOnWebsite": "Open on website",
@@ -27,22 +29,47 @@
   "common.refreshSettings": "Refresh settings",
   "common.pin": "Pin",
   "common.unpin": "Unpin",
+  "common.noResults": "No results",
+  "common.error": "Sorry, something went wrong.",
+  "common.yes": "yes",
+  "common.no": "no",
+  "common.openSettings": "Open settings",
+  "common.back": "Back",
+  "common.open": "Open",
+  "common.openWithValue": "Open: {0}",
+
+  "loading.initPages": "Loading content",
+
+  "notifications.outputChannel.link": "output window",
+  "notifications.outputChannel.description": "Check the {0} for more details.",
 
   "settings.view.common": "Common",
   "settings.view.contentFolders": "Content folders",
   "settings.view.astro": "Astro",
+  "settings.view.integration": "Integration",
+
   "settings.openOnStartup": "Open dashboard on startup",
   "settings.contentTypes": "Content types",
   "settings.contentFolders": "Content folders",
   "settings.diagnostic": "Diagnostic",
   "settings.diagnostic.description": "You can run the diagnostics to check the whole Front Matter CMS configuration.",
   "settings.diagnostic.link": "Run full diagnostics",
+  "settings.git": "Git synchronization",
+  "settings.git.enabled": "Enable Git synchronization to easily sync your changes with your repository.",
+  "settings.git.commitMessage": "Commit message",
+  "settings.git.submoduleInfo": "When working with Git submodules, you can refer to the submodule settings in the documentation.",
+  "settings.git.submoduleLink": "Read more about Git submodules",
+  "settings.integration.title": "Integration",
 
   "settings.commonSettings.website.title": "Website and SSG settings",
   "settings.commonSettings.previewUrl": "Preview URL",
   "settings.commonSettings.websiteUrl": "Website URL",
   "settings.commonSettings.startCommand": "SSG/Framework start command",
 
+  "settings.integrationsView.deepl.title": "DeepL",
+  "settings.integrationsView.deepl.intput.label": "Authentication key",
+  "settings.integrationsView.deepl.intput.placeholder": "Enter your DeepL authentication key",
+
   "developer.title": "Developer mode",
   "developer.reload.title": "Reload the dashboard",
   "developer.reload.label": "Reload",
@@ -70,6 +97,8 @@
   "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.contentActions.translations.create": "Create translation",
+  "dashboard.contents.contentActions.translations.menu": "Translations",
 
   "dashboard.contents.item.invalidTitle": "<invalid title>",
   "dashboard.contents.item.invalidDescription": "<invalid description>",
@@ -84,6 +113,7 @@
 
   "dashboard.contents.status.draft": "Draft",
   "dashboard.contents.status.published": "Published",
+  "dashboard.contents.status.scheduled": "Scheduled",
 
   "dashboard.dataView.dataForm.modify": "Modify the data",
   "dashboard.dataView.dataForm.add": "Add new data",
@@ -96,6 +126,7 @@
   "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.dataView.update.message": "Updated your data entries",
 
   "dashboard.dataView.emptyView.heading": "Select your date type first",
 
@@ -106,6 +137,9 @@
 
   "dashboard.errorView.description": "Please close the dashboard and try again.",
 
+  "dashboard.filters.languageFilter.label": "Locale",
+  "dashboard.filters.languageFilter.all": "All",
+
   "dashboard.header.breadcrumb.home": "Home",
 
   "dashboard.header.clearFilters.title": "Clear filters, grouping, and sorting",
@@ -122,6 +156,7 @@
 
   "dashboard.header.navigation.allArticles": "All articles",
   "dashboard.header.navigation.published": "Published",
+  "dashboard.header.navigation.scheduled": "Scheduled",
   "dashboard.header.navigation.draft": "In draft",
 
   "dashboard.header.header.createContent": "Create content",
@@ -188,10 +223,14 @@
   "dashboard.media.folderCreation.hexo.create": "Create post asset folder",
   "dashboard.media.folderCreation.folder.create": "Create new folder",
 
+  "dashboard.media.item.buttom.insert.image": "Insert image",
+  "dashboard.media.item.buttom.insert.snippet": "Insert snippet",
+
   "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.view": "View media details",
   "dashboard.media.item.menuItem.edit.metadata": "Edit metadata",
   "dashboard.media.item.menuItem.insert.image": "Insert image",
   "dashboard.media.item.menuItem.reveal.media": "Reveal media",
@@ -202,7 +241,7 @@
   "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.placeholder": "No media files to show. You can drag&drop new files by holding your [shift] key.",
   "dashboard.media.media.contentFolder": "Content folder",
   "dashboard.media.media.publicFolder": "Public folder",
 
@@ -262,13 +301,17 @@
   "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.git.name": "Do you want to enable Git synchronization?",
+  "dashboard.steps.stepsToGetStarted.git.description": "Enable Git synchronization to eaily sync your changes with your repository.",
   "dashboard.steps.stepsToGetStarted.showDashboard.name": "Show the dashboard",
   "dashboard.steps.stepsToGetStarted.showDashboard.description": "Once all actions are completed, the dashboard can be loaded.",
   "dashboard.steps.stepsToGetStarted.template.name": "Use a configuration template",
   "dashboard.steps.stepsToGetStarted.template.description": "Select a template to prefill the frontmatter.json file with the recommended settings.",
+  "dashboard.steps.stepsToGetStarted.template.warning": "Selecting a template applies a whole configuration to your project and closes this configuration view.",
   "dashboard.steps.stepsToGetStarted.astroContentTypes.name": "Create Content-Types for your Astro Content Collections",
 
   "dashboard.taxonomyView.button.add.title": "Add {0} to taxonomy settings",
+  "dashboard.taxonomyView.button.tag.title": "Tag content",
   "dashboard.taxonomyView.button.edit.title": "Edit {0}",
   "dashboard.taxonomyView.button.merge.title": "Merge {0}",
   "dashboard.taxonomyView.button.move.title": "Move to another taxonomy type",
@@ -283,6 +326,10 @@
   "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.taxonomyManager.filterInput.placeholder": "Filter",
+
+  "dashboard.taxonomyView.taxonomyTagging.pageTitle": "Map your content with: {0}",
+  "dashboard.taxonomyView.taxonomyTagging.checkbox": "Tag page with {0}",
 
   "dashboard.taxonomyView.taxonomyView.navigationBar.title": "Select the taxonomy",
   "dashboard.taxonomyView.taxonomyView.button.import": "Import taxonomy",
@@ -309,7 +356,12 @@
   "dashboard.media.detailsSlideOver.unmapped.description": "Do you want to remap the metadata of unmapped files?",
 
   "dashboard.configuration.astro.astroContentTypes.empty": "No Astro Content Collections found.",
-  "dashboard.configuration.astro.astroContentTypes.description": "The following Astro Content Collections and can be used to generate a content-type.",
+  "dashboard.configuration.astro.astroContentTypes.description": "The following Astro Content Collections can be used to generate a content-type.",
+
+  "panel.git.gitAction.title": "Publish changes",
+  "panel.git.gitAction.branch.select": "Select branch",
+  "panel.git.gitAction.input.placeholder": "Commit message",
+  "panel.git.gitAction.button.fetch": "Fetch",
 
   "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?",
@@ -454,5 +506,261 @@
 
   "panel.viewPanel.mediaInsert": "Continue in the media dashboard to select the image you want to insert.",
 
-  "listeners.dashboard.settingsListener.triggerTemplate.notification": "Template files copied."
+  "commands.article.setDate.error": "Something failed while parsing the date format. Check your \"{0}\" setting.",
+  "commands.article.updateSlug.error": "Failed to rename file: {0}",
+
+  "commands.cache.cleared": "Cache cleared",
+
+  "commands.chatbot.title": "Ask me anything",
+
+  "commands.content.option.contentType.label": "Create content by content type",
+  "commands.content.option.contentType.description": "Select if you want to create new content by the available content type(s)",
+  "commands.content.option.template.label": "Create content by template",
+  "commands.content.option.template.description": "Select if you want to create new content by the available template(s)",
+  "commands.content.quickPick.title": "Create content",
+  "commands.content.quickPick.placeholder": "Select how you want to create your new content",
+
+  "commands.dashboard.title": "Dashboard",
+
+  "commands.folders.addMediaFolder.inputBox.title": "Add media folder",
+  "commands.folders.addMediaFolder.inputBox.prompt": "Which name would you like to give to your folder (use \"/\" to create multi-level folders)?",
+  "commands.folders.addMediaFolder.noFolder.warning": "No folder name was specified.",
+  "commands.folders.create.folderExists.warning": "Folder is already registered",
+  "commands.folders.create.input.title": "Register folder",
+  "commands.folders.create.input.prompt": "Which name would you like to specify for this folder?",
+  "commands.folders.create.input.placeholder": "Folder name",
+  "commands.folders.create.success": "Folder registered",
+  "commands.folders.getWorkspaceFolder.workspaceFolderPick.placeholder": "Please select the main workspace folder for Front Matter to use.",
+  "commands.folders.get.notificationError.title": "Folder \"{0}\" does not exist. Please remove it from the settings.",
+  "commands.folders.get.notificationError.remove.action": "Remove folder",
+  "commands.folders.get.notificationError.create.action": "Create folder",
+
+  "commands.i18n.create.warning.noFileSelected": "No file selected.",
+  "commands.i18n.create.warning.noFile": "The file could not be retrieved.",
+  "commands.i18n.create.warning.noContentType": "Content type could not be retrieved for the current file.",
+  "commands.i18n.create.warning.noConfig": "No i18n configuration found.",
+  "commands.i18n.create.warning.notDefaultLocale": "The current file cannot be used for i18n content creation.",
+  "commands.i18n.create.error.fileExists": "The i18n translation already exists.",
+  "commands.i18n.create.success.created": "Created \"{0}\" i18n content file.",
+  "commands.i18n.create.quickPick.title": "Create content for locale",
+  "commands.i18n.create.quickPick.placeHolder": "To which locale do you want to create a new content?",
+  "commands.i18n.translate.progress.title": "Translating content...",
+
+  "commands.preview.panel.title": "Preview: {0}",
+  "commands.preview.askUserToPickFolder.title": "Select the folder of the article to preview",
+
+  "commands.project.initialize.success": "Project initialized successfully.",
+  "commands.project.switchProject.title": "To which project do you want to switch?",
+  "commands.project.createSampleTemplate.info": "Sample template created.",
+
+  "commands.settings.create.input.prompt": "Insert the value of the {0} that you want to add to your configuration.",
+  "commands.settings.create.input.placeholder": "Name of the {0}",
+  "commands.settings.create.warning": "The provided {0} already exists.",
+  "commands.settings.create.quickPick.placeholder": "Do you want to add the new {0} to the page?",
+  "commands.settings.export.progress.title": "{0}: exporting tags and categories",
+  "commands.settings.export.progress.success": "Export completed. Tags: {0} - Categories: {1}.",
+  "commands.settings.remap.quickpick.title": "Remap",
+  "commands.settings.remap.quickpick.placeholder": "What do you want to remap?",
+  "commands.settings.remap.noTaxonomy.warning": "No {0} configured.",
+  "commands.settings.remap.selectTaxonomy.placeholder": "Select your {0} to insert.",
+  "commands.settings.remap.newOption.input.prompt": "Specify the value of the {0} with which you want to remap \"{1}\". Leave the input <blank> if you want to remove the {0} from all articles.",
+  "commands.settings.remap.newOption.input.placeholder": "Name of the {0}",
+  "commands.settings.remap.delete.placeholder": "Delete {0} {1}?",
+
+  "commands.statusListener.verifyRequiredFields.diagnostic.emptyField": "The {0} field is required. Please define a value for the field.",
+  "commands.statusListener.verifyRequiredFields.notification.error": "The following fields are required to contain a value: {0}",
+
+  "commands.template.generate.input.title": "Template title",
+  "commands.template.generate.input.prompt": "Which name would you like to give your template?",
+  "commands.template.generate.input.placeholder": "article",
+  "commands.template.generate.noTitle.warning": "You did not specify a template title.",
+  "commands.template.generate.keepContents.title": "Keep content",
+  "commands.template.generate.keepContents.placeholder": "Do you want to keep the contents for the template?",
+  "commands.template.generate.keepContents.noOption.warning": "You did not pick any of the options for keeping the template its content.",
+  "commands.template.generate.keepContents.success": "Template created and is now available in your {0} folder.",
+  "commands.template.getTemplates.warning": "No templates found.",
+  "commands.template.create.folderPath.warning": "Incorrect project folder path retrieved.",
+  "commands.template.create.noTemplates.warning": "No templates found.",
+  "commands.template.create.selectTemplate.title": "Select a template",
+  "commands.template.create.selectTemplate.placeholder": "Select the content template to use",
+  "commands.template.create.selectTemplate.noTemplate.warning": "No template selected.",
+  "commands.template.create.selectTemplate.notFound.warning": "Content template could not be found.",
+  "commands.template.create.success": "Your new content is now available.",
+
+  "commands.wysiwyg.command.unorderedList.label": "Unordered list",
+  "commands.wysiwyg.command.unorderedList.detail": "Add an unordered list",
+  "commands.wysiwyg.command.orderedList.label": "Ordered list",
+  "commands.wysiwyg.command.orderedList.detail": "Add an ordered list",
+  "commands.wysiwyg.command.taskList.label": "Task list",
+  "commands.wysiwyg.command.taskList.detail": "Add a task list",
+  "commands.wysiwyg.command.code.label": "Code",
+  "commands.wysiwyg.command.code.detail": "Add inline code snippet",
+  "commands.wysiwyg.command.codeblock.label": "Code block",
+  "commands.wysiwyg.command.codeblock.detail": "Add a code block",
+  "commands.wysiwyg.command.blockquote.label": "Blockquote",
+  "commands.wysiwyg.command.blockquote.detail": "Add a blockquote",
+  "commands.wysiwyg.command.strikethrough.label": "Strikethrough",
+  "commands.wysiwyg.command.strikethrough.detail": "Add strikethrough text",
+  "commands.wysiwyg.quickPick.title": "WYSIWYG Options",
+  "commands.wysiwyg.quickPick.placeholder": "Which type of markup would you like to insert?",
+  "commands.wysiwyg.addHyperlink.hyperlinkInput.title": "WYSIWYG Hyperlink",
+  "commands.wysiwyg.addHyperlink.hyperlinkInput.prompt": "Enter the URL",
+  "commands.wysiwyg.addHyperlink.textInput.title": "WYSIWYG Text",
+  "commands.wysiwyg.addHyperlink.textInput.prompt": "Enter the text for the hyperlink",
+  "commands.wysiwyg.insertText.heading.input.title": "Heading level",
+  "commands.wysiwyg.insertText.heading.input.placeholder": "Which heading level do you want to insert?",
+
+  "helpers.articleHelper.createContent.pageBundle.error": "A page bundle with the name {0} already exists in {1}.",
+  "helpers.articleHelper.createContent.contentExists.warning": "Content with the title already exists. Please specify a new title.",
+  "helpers.articleHelper.processCustomPlaceholders.placeholder.error": "Error while processing the {0} placeholder.",
+  "helpers.articleHelper.parseFile.diagnostic.error": "Error parsing the front matter of {0}.",
+
+  "helpers.contentType.generate.noFrontMatter.error": "No front matter data found to generate a content type.",
+  "helpers.contentType.generate.override.quickPick.title": "Override the default content type",
+  "helpers.contentType.generate.override.quickPick.placeholder": "Do you want to overwrite the default content type configuration with the fields used in the current field?",
+  "helpers.contentType.generate.contentTypeInput.title": "Generate Content Type",
+  "helpers.contentType.generate.contentTypeInput.prompt": "Enter the name of the content type to generate",
+  "helpers.contentType.generate.contentTypeInput.validation.enterName": "Please enter a name for the content type.",
+  "helpers.contentType.generate.contentTypeInput.validation.nameExists": "A content type with this name already exists.",
+  "helpers.contentType.generate.noContentTypeName.warning": "You didn't specify a name for the content type.",
+  "helpers.contentType.generate.pageBundle.quickPick.title": "Use as a page bundle",
+  "helpers.contentType.generate.pageBundle.quickPick.placeHolder": "Do you want to use this content type as a page bundle?",
+  "helpers.contentType.generate.updated.success": "Content type {0} has been updated.",
+  "helpers.contentType.generate.generated.success": "Content type {0} has been generated.",
+  "helpers.contentType.addMissingFields.noFrontMatter.warning": "No front matter data found to add missing fields.",
+  "helpers.contentType.addMissingFields.updated.success": "Content type {0} has been updated.",
+  "helpers.contentType.setContentType.noFrontMatter.warning": "No front matter data found to set the content type.",
+  "helpers.contentType.setContentType.quickPick.title": "Select the content type",
+  "helpers.contentType.setContentType.quickPick.placeholder": "Which content type would you like to use?",
+  "helpers.contentType.create.allowSubContent.title": "Do you want to create it as sub-content?",
+  "helpers.contentType.create.allowSubContent.placeHolder": "Do you want to create it as sub-content?",
+  "helpers.contentType.create.allowSubContent.showOpenDialog.openLabel": "Select folder",
+  "helpers.contentType.create.allowSubContent.showOpenDialog.title": "Select folder to create the content",
+  "helpers.contentType.create.pageBundle.title": "Create as a page bundle?",
+  "helpers.contentType.create.pageBundle.placeHolder": "Do you want to create the sub-content as a page bundle?",
+  "helpers.contentType.create.progress.title": "{0}: Creating content...",
+  "helpers.contentType.create.success": "Your new content has been created.",
+  "helpers.contentType.verify.warning": "The content type actions are not available in this mode.",
+
+  "helpers.customScript.executing": "Executing: {0}",
+  "helpers.customScript.singleRun.article.warning": "{0}: Article couldn't be retrieved.",
+  "helpers.customScript.bulkRun.noFiles.warning": "{0}: No files found",
+  "helpers.customScript.runMediaScript.noFolder.warning": "{0}: There was no folder or media path specified.",
+  "helpers.customScript.showOutput.frontMatter.success": "{0}: front matter updated.",
+  "helpers.customScript.showOutput.copyOutput.action": "Copy output",
+  "helpers.customScript.showOutput.success": "{0}: Executed your custom script.",
+  "helpers.customScript.validateCommand.error": "Invalid command: {0}",
+
+  "helpers.dataFileHelper.process.error": "Something went wrong while processing the data file.",
+
+  "helpers.extension.getVersion.changelog": "Check the changelog",
+  "helpers.extension.getVersion.starIt": "Give it a ⭐️",
+  "helpers.extension.getVersion.update.notification": "{0} has been updated to v{1} — check out what's new!",
+  "helpers.extension.migrateSettings.deprecated.warning": "The \"{0}\" and \"{1}\" settings have been deprecated. Please use the \"isPublishDate\" and \"isModifiedDate\" datetime field properties instead.",
+  "helpers.extension.migrateSettings.deprecated.warning.hide": "Hide",
+  "helpers.extension.migrateSettings.deprecated.warning.seeGuide": "See migration guide",
+  "helpers.extension.migrateSettings.templates.quickPick.title": "{0} - Templates",
+  "helpers.extension.migrateSettings.templates.quickPick.placeholder": "Do you want to keep on using the template functionality?",
+  "helpers.extension.checkIfExtensionCanRun.warning": "Front Matter BETA cannot be used while the stable version is installed. Please ensure that you have only over version installed.",
+
+  "helpers.mediaHelper.saveFile.folder.error": "We couldn't find your selected folder.",
+  "helpers.mediaHelper.saveFile.file.uploaded.success": "File {0} uploaded to: {1}",
+  "helpers.mediaHelper.saveFile.file.uploaded.failed": "Sorry, something went wrong uploading {0}",
+  "helpers.mediaHelper.deleteFile.file.deletion.failed": "Sorry, something went wrong deleting {0}",
+
+  "helpers.mediaLibrary.remove.warning": "The name \"{0}\" already exists at the file location.",
+  "helpers.mediaLibrary.remove.error": "Sorry, something went wrong updating \"{0}\" to \"{1}\".",
+
+  "helpers.openFileInEditor.error": "Couldn't open the file.",
+
+  "helpers.questions.contentTitle.aiInput.title": "Title or description",
+  "helpers.questions.contentTitle.aiInput.prompt": "What would you like to write about?",
+  "helpers.questions.contentTitle.aiInput.placeholder": "What would you like to write about?",
+  "helpers.questions.contentTitle.aiInput.quickPick.title.separator": "your title/description",
+  "helpers.questions.contentTitle.aiInput.quickPick.ai.separator": "AI generated title",
+  "helpers.questions.contentTitle.aiInput.select.title": "Select a title",
+  "helpers.questions.contentTitle.aiInput.select.placeholder": "Select a title for your content",
+  "helpers.questions.contentTitle.aiInput.failed": "Failed fetching the AI title. Please try to use your own title or try again later.",
+  "helpers.questions.contentTitle.aiInput.warning": "You did not specify a title for your content.",
+  "helpers.questions.contentTitle.titleInput.title": "Content title",
+  "helpers.questions.contentTitle.titleInput.prompt": "What would you like to use as a title for the content to create?",
+  "helpers.questions.contentTitle.titleInput.placeholder": "Content title",
+  "helpers.questions.contentTitle.titleInput.warning": "You did not specify a title for your content.",
+  "helpers.questions.selectContentFolder.quickPick.title": "Select a folder",
+  "helpers.questions.selectContentFolder.quickPick.placeholder": "Select where you want to create your content",
+  "helpers.questions.selectContentFolder.quickPick.noSelection.warning": "You didn't select a place where you wanted to create your content.",
+  "helpers.questions.selectContentType.noContentType.warning": "No content types found. Please create a content type first.",
+  "helpers.questions.selectContentType.quickPick.title": "Content type",
+  "helpers.questions.selectContentType.quickPick.placeholder": "Select the content type to create your new content",
+  "helpers.questions.selectContentType.noSelection.warning": "No content type was selected.",
+
+  "helpers.seoHelper.checkLength.diagnostic.message": "Article {0} is longer than {1} characters (current length: {2}). For SEO reasons, it would be better to make it less than {1} characters.",
+
+  "helpers.settingsHelper.checkToPromote.message": "You have local settings. Would you like to promote them to the global settings (\"frontmatter.json\")?",
+  "helpers.settingsHelper.promote.success": "All settings promoted to team level.",
+  "helpers.settingsHelper.readConfig.progress.title": "{0}: Reading dynamic config file...",
+  "helpers.settingsHelper.readConfig.error": "Error reading your configuration.",
+  "helpers.settingsHelper.refreshConfig.success": "Settings have been refreshed.",
+
+  "helpers.taxonomyHelper.rename.input.title": "Rename the {0}",
+  "helpers.taxonomyHelper.rename.validate.equalValue": "The new value must be different from the old one.",
+  "helpers.taxonomyHelper.rename.validate.noValue": "A new value must be provided.",
+  "helpers.taxonomyHelper.merge.quickPick.title": "Merge the \"{0}\" with another {1} value",
+  "helpers.taxonomyHelper.merge.quickPick.placeholder": "Select the {0} value to merge with",
+  "helpers.taxonomyHelper.delete.quickPick.title": "Delete the \"{0}\" {1} value",
+  "helpers.taxonomyHelper.delete.quickPick.placeholder": "Are you sure you want to delete the \"{0}\" {1} value?",
+  "helpers.taxonomyHelper.createNew.input.title": "Create a new {0} value",
+  "helpers.taxonomyHelper.createNew.input.placeholder": "Enter the value you want to add",
+  "helpers.taxonomyHelper.createNew.input.validate.noValue": "A value must be provided.",
+  "helpers.taxonomyHelper.createNew.input.validate.exists": "The value already exists.",
+  "helpers.taxonomyHelper.process.insert": "{0}: Inserting \"{1}\" to your selected pages.",
+  "helpers.taxonomyHelper.process.edit": "{0}: Renaming \"{1}\" from {2} to {3}.",
+  "helpers.taxonomyHelper.process.merge": "{0}: Merging \"{1}\" from {2} to {3}.",
+  "helpers.taxonomyHelper.process.delete": "{0}: Deleting \"{1}\" from {2}.",
+  "helpers.taxonomyHelper.process.insert.success": "Insert completed.",
+  "helpers.taxonomyHelper.process.edit.success": "Edit completed.",
+  "helpers.taxonomyHelper.process.merge.success": "Merge completed.",
+  "helpers.taxonomyHelper.process.delete.success": "Deletion completed.",
+  "helpers.taxonomyHelper.move.quickPick.title": "Move the \"{0}\" to another type",
+  "helpers.taxonomyHelper.move.quickPick.placeholder": "Select the type to move to",
+  "helpers.taxonomyHelper.move.progress.title": "{0}: Moving \"{1}\" from {2} to \"${3}\".",
+  "helpers.taxonomyHelper.move.success": "Move completed.",
+
+  "listeners.dashboard.dashboardListener.openConfig.notification": "Open the \"frontmatter.json\" file if you want to review the configuration.",
+  "listeners.dashboard.dashboardListener.pinItem.noPath.error": "No path provided.",
+  "listeners.dashboard.dashboardListener.pinItem.coundNotPin.error": "Could not pin item.",
+  "listeners.dashboard.dashboardListener.pinItem.coundNotUnPin.error": "Could not unpin item.",
+
+  "listeners.dashboard.settingsListener.triggerTemplate.notification": "Template files copied.",
+  "listeners.dashboard.settingsListener.triggerTemplate.progress.title": "Downloading and initializing the template...",
+  "listeners.dashboard.settingsListener.triggerTemplate.download.error": "Failed to download the template.",
+  "listeners.dashboard.settingsListener.triggerTemplate.init.error": "Failed to initialize the template.",
+  "listeners.dashboard.settingsListener.setSecretValue.message": "Setting has been updated.",
+
+  "listeners.dashboard.snippetListener.addSnippet.missingFields.warning": "Snippet missing title or body",
+  "listeners.dashboard.snippetListener.addSnippet.exists.warning": "Snippet with the same title already exists",
+  "listeners.dashboard.snippetListener.updateSnippet.noSnippets.warning": "No snippets to update",
+
+  "listeners.general.gitListener.push.error": "Failed to push submodules.",
+
+  "listeners.panel.dataListener.aiSuggestTaxonomy.noEditor.error": "No active editor",
+  "listeners.panel.dataListener.aiSuggestTaxonomy.noData.error": "No article data",
+  "listeners.panel.dataListener.getDataFileEntries.noDataFiles.error": "Couldn't find data file entries",
+
+
+  "listeners.panel.taxonomyListener.aiSuggestTaxonomy.noEditor.error": "No active editor",
+  "listeners.panel.taxonomyListener.aiSuggestTaxonomy.noData.error": "No article data",
+
+  "services.modeSwitch.switchMode.quickPick.placeholder": "Select the mode you want to use",
+  "services.modeSwitch.switchMode.quickPick.title": "{0}: Mode selection",
+  "services.modeSwitch.setText.mode": "Mode: {0}",
+
+  "services.pagesParser.parsePages.statusBar.text": "Processing...",
+  "services.pagesParser.parsePages.file.error": "File error: {0}",
+
+  "services.sponsorAi.getTitles.warning": "The AI title generation took too long. Please try again later.",
+  "services.sponsorAi.getDescription.warning": "The AI description generation took too long. Please try again later.",
+  "services.sponsorAi.getTaxonomySuggestions.warning": "The AI taxonomy generation took too long. Please try again later.",
+
+  "services.terminal.openLocalServerTerminal.terminalOption.message": "Starting local server"
 }

l10n/bundle.l10n.ko.json

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

l10n/bundle.l10n.pt-br.json

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

package.json

@@ -3,15 +3,14 @@
   "displayName": "Front Matter CMS",
   "description": "Front Matter is a CMS that runs within Visual Studio Code. It gives you the power and control of a full-blown CMS while also providing you the flexibility and speed of the static site generator of your choice like: Hugo, Jekyll, Docusaurus, NextJs, Gatsby, and many more...",
   "icon": "assets/frontmatter-teal-128x128.png",
-  "version": "9.3.1",
+  "version": "9.5.0",
   "preview": false,
   "publisher": "eliostruyf",
   "galleryBanner": {
     "color": "#0e131f",
     "theme": "dark"
   },
-  "badges": [
-    {
+  "badges": [{
       "description": "version",
       "url": "https://img.shields.io/github/package-json/v/estruyf/vscode-front-matter?color=green&label=vscode-front-matter&style=flat-square",
       "href": "https://github.com/estruyf/vscode-front-matter"
@@ -71,8 +70,7 @@
         "**/.frontmatter/config/*.json": "jsonc"
       }
     },
-    "keybindings": [
-      {
+    "keybindings": [{
         "command": "frontMatter.dashboard",
         "key": "alt+d"
       },
@@ -90,23 +88,19 @@
       }
     ],
     "viewsContainers": {
-      "activitybar": [
-        {
-          "id": "frontmatter-explorer",
-          "title": "FM",
-          "icon": "$(fm-logo)"
-        }
-      ]
+      "activitybar": [{
+        "id": "frontmatter-explorer",
+        "title": "FM",
+        "icon": "$(fm-logo)"
+      }]
     },
     "views": {
-      "frontmatter-explorer": [
-        {
-          "id": "frontMatter.explorer",
-          "name": "Front Matter",
-          "icon": "$(fm-logo)",
-          "type": "webview"
-        }
-      ]
+      "frontmatter-explorer": [{
+        "id": "frontMatter.explorer",
+        "name": "Front Matter",
+        "icon": "$(fm-logo)",
+        "type": "webview"
+      }]
     },
     "configuration": {
       "title": "%settings.configuration.title%",
@@ -174,8 +168,7 @@
         "frontMatter.content.defaultFileType": {
           "type": "string",
           "default": "md",
-          "oneOf": [
-            {
+          "oneOf": [{
               "enum": [
                 "md",
                 "mdx"
@@ -191,8 +184,7 @@
         "frontMatter.content.defaultSorting": {
           "type": "string",
           "default": "",
-          "oneOf": [
-            {
+          "oneOf": [{
               "enum": [
                 "LastModifiedAsc",
                 "LastModifiedDesc",
@@ -311,6 +303,17 @@
                 "type": "boolean",
                 "default": false,
                 "description": "%setting.frontMatter.content.pageFolders.items.properties.disableCreation.description%"
+              },
+              "defaultLocale": {
+                "type": "string",
+                "description": "%setting.frontMatter.content.pageFolders.items.properties.defaultLocale.description%"
+              },
+              "locales": {
+                "type": "array",
+                "description": "%setting.frontMatter.content.pageFolders.items.properties.locales.description%",
+                "items": {
+                  "$ref": "#i18n"
+                }
               }
             },
             "additionalProperties": false,
@@ -321,6 +324,34 @@
           },
           "scope": "Content"
         },
+        "frontMatter.content.i18n": {
+          "type": "array",
+          "default": [],
+          "markdownDescription": "%setting.frontMatter.content.i18n.markdownDescription%",
+          "items": {
+            "$id": "#i18n",
+            "type": "object",
+            "properties": {
+              "title": {
+                "type": "string",
+                "description": "%setting.frontMatter.content.i18n.items.properties.title.description%"
+              },
+              "locale": {
+                "type": "string",
+                "description": "%setting.frontMatter.content.i18n.items.properties.locale.description%"
+              },
+              "path": {
+                "type": "string",
+                "description": "%setting.frontMatter.content.i18n.items.properties.path.description%"
+              }
+            },
+            "additionalProperties": false,
+            "required": [
+              "locale"
+            ]
+          },
+          "scope": "Content"
+        },
         "frontMatter.content.placeholders": {
           "type": "array",
           "default": [],
@@ -492,6 +523,30 @@
           "markdownDescription": "%setting.frontMatter.content.wysiwyg.markdownDescription%",
           "scope": "Content"
         },
+        "frontMatter.content.filters": {
+          "type": "array",
+          "default": [
+            "pageFolders",
+            "tags",
+            "categories"
+          ],
+          "markdownDescription": "%setting.frontMatter.content.filters.markdownDescription%",
+          "items": [{
+              "type": "string"
+            },
+            {
+              "type": "object",
+              "properties": {
+                "title": {
+                  "type": "string"
+                },
+                "name": {
+                  "type": "string"
+                }
+              }
+            }
+          ]
+        },
         "frontMatter.custom.scripts": {
           "type": "array",
           "default": [],
@@ -544,8 +599,7 @@
               "command": {
                 "$id": "#scriptCommand",
                 "type": "string",
-                "anyOf": [
-                  {
+                "anyOf": [{
                     "enum": [
                       "node",
                       "bash",
@@ -752,8 +806,7 @@
               "title",
               "file"
             ],
-            "anyOf": [
-              {
+            "anyOf": [{
                 "required": [
                   "schema"
                 ]
@@ -807,8 +860,7 @@
               "id",
               "path"
             ],
-            "anyOf": [
-              {
+            "anyOf": [{
                 "required": [
                   "schema"
                 ]
@@ -874,6 +926,22 @@
           "markdownDescription": "%setting.frontMatter.git.commitMessage.markdownDescription%",
           "default": "Synced by Front Matter"
         },
+        "frontMatter.git.disableOnBranches": {
+          "type": "array",
+          "markdownDescription": "%setting.frontMatter.git.disableOnBranches.markdownDescription%",
+          "default": [],
+          "items": {
+            "type": "string"
+          }
+        },
+        "frontMatter.git.requiresCommitMessage": {
+          "type": "array",
+          "markdownDescription": "%setting.frontMatter.git.requiresCommitMessage.markdownDescription%",
+          "default": [],
+          "items": {
+            "type": "string"
+          }
+        },
         "frontMatter.git.submodule.pull": {
           "type": "boolean",
           "markdownDescription": "%setting.frontMatter.git.submodule.pull.markdownDescription%",
@@ -982,6 +1050,79 @@
           "markdownDescription": "%setting.frontMatter.media.defaultSorting.markdownDescription%",
           "scope": "Content"
         },
+        "frontMatter.media.contentTypes": {
+          "type": [
+            "array",
+            "null"
+          ],
+          "markdownDescription": "%setting.frontMatter.media.contentTypes.markdownDescription%",
+          "items": {
+            "type": "object",
+            "description": "%setting.frontMatter.media.contentTypes.items.description%",
+            "properties": {
+              "name": {
+                "type": "string",
+                "description": "%setting.frontMatter.media.contentTypes.items.properties.name.description%"
+              },
+              "fileTypes": {
+                "type": "array",
+                "description": "%setting.frontMatter.media.contentTypes.items.properties.fileTypes.description%",
+                "items": {
+                  "type": "string"
+                }
+              },
+              "fields": {
+                "type": "array",
+                "description": "%setting.frontMatter.media.contentTypes.items.properties.fields.description%",
+                "items": {
+                  "type": "object",
+                  "properties": {
+                    "title": {
+                      "type": "string",
+                      "description": "%setting.frontMatter.media.contentTypes.items.properties.fields.properties.title.description%"
+                    },
+                    "name": {
+                      "type": "string",
+                      "description": "%setting.frontMatter.media.contentTypes.items.properties.fields.properties.name.description%"
+                    },
+                    "type": {
+                      "type": "string",
+                      "enum": [
+                        "string"
+                      ],
+                      "description": "%setting.frontMatter.media.contentTypes.items.properties.fields.properties.type.description%"
+                    },
+                    "single": {
+                      "type": "boolean",
+                      "description": "%setting.frontMatter.media.contentTypes.items.properties.fields.properties.single.description%"
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "default": [{
+            "name": "default",
+            "fileTypes": null,
+            "fields": [{
+                "title": "Title",
+                "name": "title",
+                "type": "string"
+              },
+              {
+                "title": "Caption",
+                "name": "caption",
+                "type": "string"
+              },
+              {
+                "title": "Alt text",
+                "name": "alt",
+                "type": "string"
+              }
+            ]
+          }],
+          "scope": "Media"
+        },
         "frontMatter.media.supportedMimeTypes": {
           "type": "array",
           "default": [
@@ -1005,15 +1146,18 @@
           "type": "array",
           "default": [],
           "markdownDescription": "%setting.frontMatter.panel.actions.disabled.markdownDescription%",
-          "enum": [
-            "openDashboard",
-            "createContent",
-            "optimizeSlug",
-            "preview",
-            "openOnWebsite",
-            "startStopServer",
-            "customActions"
-          ]
+          "items": {
+            "type": "string",
+            "enum": [
+              "openDashboard",
+              "createContent",
+              "optimizeSlug",
+              "preview",
+              "openOnWebsite",
+              "startStopServer",
+              "customActions"
+            ]
+          }
         },
         "frontMatter.preview.host": {
           "type": "string",
@@ -1082,7 +1226,17 @@
               "clearEmpty": {
                 "type": "boolean",
                 "default": false,
-                "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.clearEmpty.description%"
+                "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.clearEmpty.description%"
+              },
+              "allowAsSubContent": {
+                "type": "boolean",
+                "default": false,
+                "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.allowAsSubContent.description%"
+              },
+              "isSubContent": {
+                "type": "boolean",
+                "default": false,
+                "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.isSubContent.description%"
               },
               "fields": {
                 "$id": "#contenttypefield",
@@ -1196,8 +1350,7 @@
                       "default": "",
                       "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyId.description%",
                       "not": {
-                        "anyOf": [
-                          {
+                        "anyOf": [{
                             "const": ""
                           },
                           {
@@ -1272,6 +1425,11 @@
                       "default": 0,
                       "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyLimit.description%"
                     },
+                    "singleValueAsString": {
+                      "type": "boolean",
+                      "default": false,
+                      "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.singleValueAsString.description%"
+                    },
                     "isPublishDate": {
                       "type": "boolean",
                       "default": false,
@@ -1386,8 +1544,7 @@
                     "type",
                     "name"
                   ],
-                  "allOf": [
-                    {
+                  "allOf": [{
                       "if": {
                         "properties": {
                           "type": {
@@ -1558,6 +1715,14 @@
                 "default": null,
                 "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.previewPath.description%"
               },
+              "slugTemplate": {
+                "type": [
+                  "null",
+                  "string"
+                ],
+                "default": null,
+                "description": "%setting.frontMatter.content.pageFolders.items.properties.slugTemplate.description%"
+              },
               "template": {
                 "type": "string",
                 "default": "",
@@ -1587,51 +1752,48 @@
               "fields"
             ]
           },
-          "default": [
-            {
-              "name": "default",
-              "pageBundle": false,
-              "fields": [
-                {
-                  "title": "Title",
-                  "name": "title",
-                  "type": "string"
-                },
-                {
-                  "title": "Description",
-                  "name": "description",
-                  "type": "string"
-                },
-                {
-                  "title": "Publishing date",
-                  "name": "date",
-                  "type": "datetime",
-                  "default": "{{now}}",
-                  "isPublishDate": true
-                },
-                {
-                  "title": "Content preview",
-                  "name": "preview",
-                  "type": "image"
-                },
-                {
-                  "title": "Is in draft",
-                  "name": "draft",
-                  "type": "boolean"
-                },
-                {
-                  "title": "Tags",
-                  "name": "tags",
-                  "type": "tags"
-                },
-                {
-                  "title": "Categories",
-                  "name": "categories",
-                  "type": "categories"
-                }
-              ]
-            }
-          ],
+          "default": [{
+            "name": "default",
+            "pageBundle": false,
+            "fields": [{
+                "title": "Title",
+                "name": "title",
+                "type": "string"
+              },
+              {
+                "title": "Description",
+                "name": "description",
+                "type": "string"
+              },
+              {
+                "title": "Publishing date",
+                "name": "date",
+                "type": "datetime",
+                "default": "{{now}}",
+                "isPublishDate": true
+              },
+              {
+                "title": "Content preview",
+                "name": "preview",
+                "type": "image"
+              },
+              {
+                "title": "Is in draft",
+                "name": "draft",
+                "type": "boolean"
+              },
+              {
+                "title": "Tags",
+                "name": "tags",
+                "type": "tags"
+              },
+              {
+                "title": "Categories",
+                "name": "categories",
+                "type": "categories"
+              }
+            ]
+          }],
           "scope": "Taxonomy"
         },
         "frontMatter.taxonomy.customTaxonomy": {
@@ -1644,8 +1806,7 @@
                 "type": "string",
                 "description": "%setting.frontMatter.taxonomy.customTaxonomy.items.properties.id.description%",
                 "not": {
-                  "anyOf": [
-                    {
+                  "anyOf": [{
                       "const": ""
                     },
                     {
@@ -1738,6 +1899,12 @@
           "markdownDescription": "%setting.frontMatter.taxonomy.modifiedField.markdownDescription%",
           "deprecationMessage": "%setting.frontMatter.taxonomy.modifiedField.deprecationMessage%"
         },
+        "frontMatter.taxonomy.quoteStringValues": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "%setting.frontMatter.taxonomy.quoteStringValues.markdownDescription%",
+          "scope": "Taxonomy"
+        },
         "frontMatter.taxonomy.noPropertyValueQuotes": {
           "type": "array",
           "default": [],
@@ -1794,6 +1961,11 @@
           "markdownDescription": "%setting.frontMatter.taxonomy.slugSuffix.markdownDescription%",
           "scope": "Taxonomy"
         },
+        "frontMatter.taxonomy.slugTemplate": {
+          "type": "string",
+          "markdownDescription": "%setting.frontMatter.taxonomy.slugTemplate.markdownDescription%",
+          "scope": "Taxonomy"
+        },
         "frontMatter.taxonomy.tags": {
           "type": "array",
           "markdownDescription": "%setting.frontMatter.taxonomy.tags.markdownDescription%",
@@ -1831,8 +2003,7 @@
         }
       }
     },
-    "commands": [
-      {
+    "commands": [{
         "command": "frontMatter.project.switch",
         "title": "%command.frontMatter.project.switch%",
         "category": "Front Matter",
@@ -2147,17 +2318,27 @@
         "command": "frontMatter.cache.clear",
         "title": "%command.frontMatter.cache.clear%",
         "category": "Front Matter"
-      }
-    ],
-    "submenus": [
+      },
       {
-        "id": "frontmatter.submenu",
-        "label": "Front Matter"
+        "command": "frontMatter.i18n.create",
+        "title": "%command.frontMatter.i18n.create%",
+        "category": "Front Matter",
+        "icon": {
+          "light": "assets/icons/i18n-light.svg",
+          "dark": "assets/icons/i18n-dark.svg"
+        }
       }
     ],
+    "submenus": [{
+      "id": "frontmatter.submenu",
+      "label": "Front Matter"
+    }],
     "menus": {
-      "editor/title": [
-        {
+      "webview/context": [{
+        "command": "workbench.action.webview.openDeveloperTools",
+        "when": "frontMatter:isDevelopment"
+      }],
+      "editor/title": [{
           "command": "frontMatter.markup.heading",
           "group": "navigation@-133",
           "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
@@ -2187,6 +2368,11 @@
           "group": "navigation@-128",
           "when": "frontMatter:file:isValid == true"
         },
+        {
+          "command": "frontMatter.i18n.create",
+          "group": "navigation@-127",
+          "when": "frontMatter:file:isValid && frontMatter:i18n:default"
+        },
         {
           "command": "frontMatter.markup.options",
           "group": "navigation@-126",
@@ -2238,14 +2424,11 @@
           "when": "resourceFilename == 'frontmatter.json'"
         }
       ],
-      "explorer/context": [
-        {
-          "submenu": "frontmatter.submenu",
-          "group": "frontmatter@1"
-        }
-      ],
-      "frontmatter.submenu": [
-        {
+      "explorer/context": [{
+        "submenu": "frontmatter.submenu",
+        "group": "frontmatter@1"
+      }],
+      "frontmatter.submenu": [{
           "command": "frontMatter.createFromTemplate",
           "when": "explorerResourceIsFolder",
           "group": "frontmatter@1"
@@ -2261,8 +2444,7 @@
           "group": "frontmatter@3"
         }
       ],
-      "commandPalette": [
-        {
+      "commandPalette": [{
           "command": "frontMatter.init",
           "when": "frontMatterCanInit"
         },
@@ -2270,14 +2452,6 @@
           "command": "frontMatter.project.switch",
           "when": "frontMatter:project:switch:enabled"
         },
-        {
-          "command": "frontMatter.createTemplate",
-          "when": "!frontMatterCanInit"
-        },
-        {
-          "command": "frontMatter.preview",
-          "when": "frontMatterCanOpenPreview"
-        },
         {
           "command": "frontMatter.dashboard.data",
           "when": "frontMatter:dashboard:data:enabled"
@@ -2290,10 +2464,26 @@
           "command": "frontMatter.git.sync",
           "when": "frontMatter:git:enabled"
         },
+        {
+          "command": "frontMatter.i18n.create",
+          "when": "frontMatter:i18n:default"
+        },
+        {
+          "command": "frontMatter.authenticate",
+          "when": "false"
+        },
         {
           "command": "frontMatter.collapseSections",
           "when": "false"
         },
+        {
+          "command": "frontMatter.insertTags",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.insertCategories",
+          "when": "false"
+        },
         {
           "command": "frontMatter.registerFolder",
           "when": "false"
@@ -2354,6 +2544,22 @@
           "command": "frontMatter.markup.options",
           "when": "false"
         },
+        {
+          "command": "frontMatter.markup.hyperlink",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.config.reload",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.initTemplate",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.createTemplate",
+          "when": "false"
+        },
         {
           "command": "frontMatter.insertSnippet",
           "when": "frontMatter:file:isValid == true && frontMatter:dashboard:snippets:enabled"
@@ -2374,14 +2580,6 @@
           "command": "frontMatter.insertCategories",
           "when": "frontMatter:file:isValid == true"
         },
-        {
-          "command": "frontMatter.insertTags",
-          "when": "frontMatter:file:isValid == true"
-        },
-        {
-          "command": "frontMatter.createTemplate",
-          "when": "frontMatter:file:isValid == true"
-        },
         {
           "command": "frontMatter.preview",
           "when": "frontMatter:file:isValid == true"
@@ -2407,8 +2605,7 @@
           "when": "frontMatter:file:isValid == true"
         }
       ],
-      "view/title": [
-        {
+      "view/title": [{
           "command": "frontMatter.chatbot",
           "group": "navigation@0",
           "when": "view == frontMatter.explorer"
@@ -2440,57 +2637,52 @@
         }
       ]
     },
-    "grammars": [
-      {
-        "path": "./syntaxes/hugo.tmLanguage.json",
-        "scopeName": "frontmatter.markdown.hugo",
-        "injectTo": [
-          "text.html.markdown"
-        ]
-      }
-    ],
-    "walkthroughs": [
-      {
-        "id": "frontmatter.welcome",
-        "title": "Get started with Front Matter",
-        "description": "Discover the features of Front Matter and learn how to use the CMS for your SSG or static site.",
-        "steps": [
-          {
-            "id": "frontmatter.welcome.init",
-            "title": "Get started",
-            "description": "Initial steps to get started.\n[Open dashboard](command:frontMatter.dashboard)",
-            "media": {
-              "markdown": "assets/walkthrough/get-started.md"
-            },
-            "completionEvents": [
-              "onContext:frontMatterInitialized"
-            ]
+    "grammars": [{
+      "path": "./syntaxes/hugo.tmLanguage.json",
+      "scopeName": "frontmatter.markdown.hugo",
+      "injectTo": [
+        "text.html.markdown"
+      ]
+    }],
+    "walkthroughs": [{
+      "id": "frontmatter.welcome",
+      "title": "Get started with Front Matter",
+      "description": "Discover the features of Front Matter and learn how to use the CMS for your SSG or static site.",
+      "steps": [{
+          "id": "frontmatter.welcome.init",
+          "title": "Get started",
+          "description": "Initial steps to get started.\n[Open dashboard](command:frontMatter.dashboard)",
+          "media": {
+            "markdown": "assets/walkthrough/get-started.md"
           },
-          {
-            "id": "frontmatter.welcome.documentation",
-            "title": "Documentation",
-            "description": "Check out the documentation for Front Matter.\n[View our documentation](https://frontmatter.codes/docs)",
-            "media": {
-              "markdown": "assets/walkthrough/documentation.md"
-            },
-            "completionEvents": [
-              "onLink:https://frontmatter.codes/docs"
-            ]
+          "completionEvents": [
+            "onContext:frontMatterInitialized"
+          ]
+        },
+        {
+          "id": "frontmatter.welcome.documentation",
+          "title": "Documentation",
+          "description": "Check out the documentation for Front Matter.\n[View our documentation](https://frontmatter.codes/docs)",
+          "media": {
+            "markdown": "assets/walkthrough/documentation.md"
           },
-          {
-            "id": "frontmatter.welcome.supporter",
-            "title": "Support the project",
-            "description": "Become a supporter.\n[Support the project](https://github.com/sponsors/estruyf)",
-            "media": {
-              "markdown": "assets/walkthrough/support-the-project.md"
-            },
-            "completionEvents": [
-              "onLink:https://github.com/sponsors/estruyf"
-            ]
-          }
-        ]
-      }
-    ]
+          "completionEvents": [
+            "onLink:https://frontmatter.codes/docs"
+          ]
+        },
+        {
+          "id": "frontmatter.welcome.supporter",
+          "title": "Support the project",
+          "description": "Become a supporter.\n[Support the project](https://github.com/sponsors/estruyf)",
+          "media": {
+            "markdown": "assets/walkthrough/support-the-project.md"
+          },
+          "completionEvents": [
+            "onLink:https://github.com/sponsors/estruyf"
+          ]
+        }
+      ]
+    }]
   },
   "scripts": {
     "dev:ext": "npm run clean && npm run localization:generate && npm-run-all --parallel watch:*",
@@ -2507,9 +2699,6 @@
     "prod:panel": "webpack --mode production --config ./webpack/panel.config.js",
     "test-compile": "tsc -p ./",
     "clean": "rimraf dist",
-    "start:site": "cd ./docs && npm run dev",
-    "clean:test": "rm ./e2e/sample/frontmatter.json || exit 0 && rm -rf ./e2e/sample/.frontmatter || exit 0",
-    "test": "pnpm lint; tsc -p tsconfig.e2e.json && npm run clean:test && pnpm i -g @vscode/vsce && node ./e2e/out/runTests.js",
     "lint": "eslint --max-warnings=0 ./src/{commands,components}",
     "prettier": "prettier --write ./src",
     "localization:watch": "node ./scripts/watch-localization.js",
@@ -2521,34 +2710,29 @@
     "@actions/core": "^1.10.0",
     "@bendera/vscode-webview-elements": "0.6.2",
     "@estruyf/vscode": "^1.1.0",
-    "@headlessui/react": "1.5.0",
-    "@heroicons/react": "1.0.4",
+    "@headlessui/react": "^1.7.18",
+    "@heroicons/react": "^2.1.1",
     "@iarna/toml": "2.2.3",
     "@octokit/rest": "^18.12.0",
-    "@popperjs/core": "^2.11.6",
     "@sentry/react": "^6.19.7",
     "@sentry/tracing": "^6.19.7",
     "@tailwindcss/forms": "^0.5.3",
-    "@types/chai": "^4.3.4",
     "@types/glob": "7.1.3",
     "@types/invariant": "^2.2.35",
-    "@types/js-yaml": "3.12.1",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash.omit": "^4.5.7",
     "@types/lodash.uniqby": "4.7.6",
     "@types/lodash.xor": "^4.5.7",
     "@types/mdast": "^3.0.10",
     "@types/mime-types": "^2.1.1",
-    "@types/mocha": "^5.2.7",
     "@types/mustache": "^4.2.2",
-    "@types/node": "10.17.48",
-    "@types/node-fetch": "^2.6.2",
+    "@types/node": "^18.17.1",
     "@types/react": "17.0.0",
     "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "17.0.0",
     "@types/vscode": "^1.73.0",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
-    "@vscode/codicons": "0.0.20",
     "@vscode/l10n": "^0.0.14",
     "@vscode/webview-ui-toolkit": "^1.2.2",
     "@webpack-cli/serve": "^1.7.0",
@@ -2556,8 +2740,8 @@
     "array-move": "^4.0.0",
     "assert": "^2.0.0",
     "autoprefixer": "^10.4.13",
-    "chai": "^4.3.7",
     "cheerio": "1.0.0-rc.12",
+    "clsx": "^2.1.0",
     "css-loader": "5.2.7",
     "date-fns": "2.23.0",
     "dotenv": "^16.3.1",
@@ -2579,9 +2763,7 @@
     "lodash.xor": "^4.5.0",
     "mdast-util-from-markdown": "1.0.0",
     "mime-types": "^2.1.35",
-    "mocha": "^10.2.0",
     "mustache": "^4.2.0",
-    "node-fetch": "^2.6.9",
     "node-json-db": "^2.2.0",
     "npm-run-all": "^4.1.5",
     "path-browserify": "^1.0.1",
@@ -2595,18 +2777,18 @@
     "react-dom": "17.0.1",
     "react-dropzone": "^11.7.1",
     "react-markdown": "^8.0.7",
-    "react-popper": "^2.3.0",
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.8.0",
     "react-sortable-hoc": "^2.0.0",
-    "react-toastify": "^8.2.0",
     "recoil": "^0.4.1",
     "remark-gfm": "^3.0.1",
     "rimraf": "^3.0.2",
     "semver": "^7.3.8",
     "simple-git": "^3.16.0",
     "style-loader": "2.0.0",
+    "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.2.4",
+    "tailwindcss-animate": "^1.0.7",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.5",
     "uniforms": "^3.10.2",
@@ -2614,7 +2796,6 @@
     "uniforms-bridge-json-schema": "^3.10.2",
     "uniforms-unstyled": "^3.10.2",
     "url-join-ts": "^1.0.5",
-    "vscode-extension-tester": "^5.3.0",
     "wc-react": "github:estruyf/wc-react",
     "webpack": "^5.75.0",
     "webpack-bundle-analyzer": "^4.7.0",
@@ -2626,5 +2807,8 @@
   },
   "vsce": {
     "dependencies": false
+  },
+  "dependencies": {
+    "@radix-ui/react-dropdown-menu": "^2.0.6"
   }
-}
+}

package.nls.ja.json

@@ -40,7 +40,7 @@
   "command.frontMatter.preview": "記事のプレビューを開く",
   "command.frontMatter.chatbot": "Front Matter AIに質問する",
   "command.frontMatter.promoteSettings": "ローカル設定をチームレベルへ昇格させる",
-  "command.frontMatter.remap": "全ての記事のタグまたはカテゴリーを再配置または削除する",
+  "command.frontMatter.remap": "全ての記事のタグまたはカテゴリーを再構成または削除する",
   "command.frontMatter.setLastModifiedDate": "最終更新日を設定する",
   "command.frontMatter.markup.strikethrough": "取り消し線",
   "command.frontMatter.mode.switch": "モードの切り替え",
@@ -53,7 +53,7 @@
   "setting.frontMatter.projects.items.properties.name.markdownDescription": "プロジェクトの名前を指定します。",
   "setting.frontMatter.projects.items.properties.default.markdownDescription": "このプロジェクトを読み込む既定のプロジェクトにするかどうかを指定します。",
   "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.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)",
@@ -62,25 +62,26 @@
   "setting.frontMatter.content.draftField.markdownDescription": "記事の下書きステータスを管理するフィールドを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.content.draftfield)",
   "setting.frontMatter.content.draftField.properties.type.description": "使用する下書きフィールドの種類",
   "setting.frontMatter.content.draftField.properties.name.description": "使用するフィールドの名前",
-  "setting.frontMatter.content.draftField.properties.invert.description": "既定では、コンテンツが下書きの場合、下書きフィールドは true に設定されます。これを true に設定すると、false に設定されます。",
+  "setting.frontMatter.content.draftField.properties.invert.description": "既定では、記事が下書きの場合、下書きフィールドは true に設定されます。これを true に設定すると、false に設定されます。",
   "setting.frontMatter.content.draftField.properties.choices.description": "フィールドの選択肢のリスト",
   "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": "フォルダの名前",
-  "setting.frontMatter.content.pageFolders.items.properties.path.description": "フォルダのパス",
+  "setting.frontMatter.content.pageFolders.items.properties.title.description": "フォルダーの名前",
+  "setting.frontMatter.content.pageFolders.items.properties.path.description": "フォルダーのパス",
   "setting.frontMatter.content.pageFolders.items.properties.excludeSubdir.description": "サブディレクトリを除外する",
   "setting.frontMatter.content.pageFolders.items.properties.previewPath.description": "フォルダーのカスタム プレビュー パスを定義します。",
-  "setting.frontMatter.content.pageFolders.items.properties.filePrefix.description": "ファイル名のプレフィックスを定義します。",
-  "setting.frontMatter.content.pageFolders.items.properties.contentTypes.description": "現在の場所に使用できるコンテンツ タイプを定義します。定義しない場合は、すべてのコンテンツ タイプを使用できます。",
+  "setting.frontMatter.content.pageFolders.items.properties.filePrefix.description": "ファイル名の接頭辞を定義します。",
+  "setting.frontMatter.content.pageFolders.items.properties.contentTypes.description": "現在の場所に使用できる記事タイプを定義します。定義しない場合は、全ての記事タイプを使用できます。",
+  "setting.frontMatter.content.pageFolders.items.properties.disableCreation.description": "フォルダー内の新しい記事の作成を無効にします。",
   "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 をコンテンツ タイプまたはテンプレートで、次のように使用します: {{placeholder}}",
+  "setting.frontMatter.content.placeholders.items.properties.id.description": "プレースホルダーのIDを記事タイプまたはテンプレートで、次のように使用します: {{placeholder}}",
   "setting.frontMatter.content.placeholders.items.properties.value.description": "プレースホルダーの値",
   "setting.frontMatter.content.placeholders.items.properties.script.description": "プレースホルダーの値を取得するために実行するスクリプト",
   "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.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)",
@@ -95,22 +96,23 @@
   "setting.frontMatter.custom.scripts.items.properties.id.description": "スクリプトの ID。",
   "setting.frontMatter.custom.scripts.items.properties.title.description": "スクリプトに付けるタイトル。ボタンのタイトルとして表示されます。",
   "setting.frontMatter.custom.scripts.items.properties.script.description": "実行するスクリプトへのパス",
-  "setting.frontMatter.custom.scripts.items.properties.nodeBin.description": "ノード実行可能ファイルへのパス。これは、使用するノードのバージョンが混同されないように、NVM を使用するときに必要です。(非推奨: 代わりにコマンド プロパティを使用してください)",
-  "setting.frontMatter.custom.scripts.items.properties.bulk.description": "すべてのコンテンツ ファイルに対してスクリプトを実行する",
-  "setting.frontMatter.custom.scripts.items.properties.output.description": "スクリプト出力を出力する場所を定義します。デフォルトは通知ですが、エディターパネルに表示するように指定できます。",
+  "setting.frontMatter.custom.scripts.items.properties.nodeBin.description": "実行可能なNode.jsへのパス。これは、NVMを使用する際に、Node.jsのバージョンが混同されないようにするために必要です。(非推奨: 代わりにコマンドプロパティを使用してください)",
+  "setting.frontMatter.custom.scripts.items.properties.bulk.description": "全ての記事ファイルに対してスクリプトを実行する",
+  "setting.frontMatter.custom.scripts.items.properties.output.description": "スクリプト出力を出力する場所を定義します。デフォルトは通知表示ですが、エディターパネルに表示するように指定できます。",
   "setting.frontMatter.custom.scripts.items.properties.outputType.description": "エディター・パネルの出力のタイプ。たとえば、「マークダウン」に変更するために使用できます",
   "setting.frontMatter.custom.scripts.items.properties.type.description": "スクリプトが使用される型。",
   "setting.frontMatter.custom.scripts.items.properties.command.description": "実行するスクリプトの種類。",
   "setting.frontMatter.custom.scripts.items.properties.hidden.description": "UI からアクションを非表示にする",
   "setting.frontMatter.custom.scripts.items.properties.environments.items.properties.type.description": "スクリプトを使用する必要がある環境タイプ",
   "setting.frontMatter.custom.scripts.items.properties.environments.items.properties.script.description": "実行するスクリプトへのパス",
+  "setting.frontMatter.custom.scripts.items.properties.contentTypes.description": "スクリプトを使用する記事タイプを定義します。何も定義されていない場合は、全ての型で使用できます。",
   "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": "カスタムメディア挿入マークアップのスニペットを指定します。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.dashboard.mediasnippet)",
+  "setting.frontMatter.dashboard.mediaSnippet.markdownDescription": "カスタムメディア挿入マークアップのスニペットを指定します。[ドキュメントを確認](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)",
@@ -148,23 +150,24 @@
   "setting.frontMatter.global.modes.items.properties.id.description": "モードの ID。",
   "setting.frontMatter.global.modes.items.properties.features.description": "モードに使用する機能。",
   "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.global.disabledNotifications.markdownDescription": "これは、Front Matter CMSで無効にできる通知タイプの配列です。[ドキュメントを確認](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.panel.freeform.markdownDescription": "未登録のタグ/カテゴリーをタグピッカーに入力可能にするかどうかを設定します（有効にすると、後で保存するオプションが使えます）。規定値はtrue。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.freeform)",
+  "setting.frontMatter.panel.actions.disabled.markdownDescription": "パネル内で非表示にしたいコマンドを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.actions.disabled)",
   "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.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.description": "Front Matterで使用する記事タイプを定義します。",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.name.description": "フィールドの種類を定義する",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fileType.description": "作成するコンテンツの種類を指定します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.description": "コンテンツ タイプのフィールドを定義する",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.description": "Front Matterで使用するコンテンツタイプを定義します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fileType.description": "作成する記事タイプを指定します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.description": "記事タイプのフィールドを定義する",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.description": "Front Matterで使用する記事タイプを定義します。",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.type.description": "フィールドの種類を定義する",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.name.description": "使用するフィールドの名前",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.title.description": "UI に表示するタイトル",
@@ -176,10 +179,10 @@
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.single.description": "単一行フィールドである",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.wysiwyg.description": "WYSIWYG フィールド (HTML 出力) である",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.multiple.description": "複数の値を選択できますか?",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPreviewImage.description": "画像フィールドをプレビューとして使用できるかどうかを指定します。コンテンツ タイプごとに使用できるプレビュー画像は 1 つだけです。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPreviewImage.description": "画像フィールドをプレビューとして使用できるかどうかを指定します。記事タイプごとに使用できるプレビュー画像は1つだけです。",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.hidden.description": "メタデータ セクションからフィールドを非表示にしますか?",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyId.description": "分類フィールドの ID。「タグ」または「カテゴリ」の値を含めることはできません。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fileExtensions.description": "ファイル ピッカーで許可するファイル拡張子を指定する",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyId.description": "分類フィールドのID。「タグ」または「カテゴリ」の値を含めることはできません。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fileExtensions.description": "ファイルピッカーで許可するファイル拡張子を指定する",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.fieldGroup.description": "'frontMatter.taxonomy.fieldGroups' 設定で定義されているフィールドグループの ID",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataType.description": "'frontMatter.data.types' 設定で定義されているデータ型の ID",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.description": "数値フィールドのオプションを指定する",
@@ -188,6 +191,7 @@
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.max.description": "最大値",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.numberOptions.properties.step.description": "ステップ値",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyLimit.description": "選択する分類の数を制限します。無制限を許可するには 0 に設定します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.singleValueAsString.description": "配列内の要素が1つだけの時、配列ではなく文字列として扱います。",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPublishDate.description": "フィールドが公開日フィールドであるかどうかを指定します",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isModifiedDate.description": "フィールドが変更日フィールドであるかどうかを指定します",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dataFileId.description": "このフィールドに使用するデータファイルのIDを指定します",
@@ -197,30 +201,31 @@
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.encodeEmoji.description": "フィールドが絵文字をエンコードするかどうかを指定します",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.dateFormat.description": "使用する日付形式を指定する",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.required.description": "フィールドが必須かどうかを指定します",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeName.description": "コンテンツ タイプ名を指定して、contentRelationship フィールドのコンテンツをフィルター処理します",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeName.description": "記事タイプを指定して、contentRelationship フィールドのコンテンツをフィルター処理します",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeValue.description": "コンテンツリレーションシップフィールドに挿入する値を指定します",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.description": "フィールドを表示する条件を指定する",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.fieldRef.description": "使用するフィールド ID",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.operator.description": "使用する演算子",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.value.description": "比較する値",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.caseSensitive.description": "比較で大文字と小文字を区別するかどうかを指定します。デフォルト: 真",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.pageBundle.description": "新しいコンテンツを作成するときにフォルダーを作成するかどうかを指定します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.previewPath.description": "コンテンツ タイプのカスタム プレビュー パスを定義します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.template.description": "新しいコンテンツの作成に使用できるオプションのテンプレート。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.postScript.description": "新しいコンテンツの作成後に使用できるオプションのポストスクリプト。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.filePrefix.description": "ファイル名のプレフィックスを定義します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.defaultFileName.description": "新しいコンテンツを作成するときに使用する既定のファイル名。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.caseSensitive.description": "比較で大文字と小文字を区別するかどうかを指定します。デフォルト: true",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.pageBundle.description": "新しい記事を作成するときにフォルダーを作成するかどうかを指定します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.previewPath.description": "記事タイプのカスタム プレビュー パスを定義します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.template.description": "新しい記事の作成に使用できるオプションのテンプレート。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.postScript.description": "新しい記事の作成後に使用できるオプションのポストスクリプト。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.filePrefix.description": "ファイル名の接頭辞を定義します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.defaultFileName.description": "新しい記事の作成時に使用する既定のファイル名。",
   "setting.frontMatter.taxonomy.customTaxonomy.markdownDescription": "カスタムタクソノミーのフィールドデータを設定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.tags)",
   "setting.frontMatter.taxonomy.customTaxonomy.items.properties.id.description": "分類フィールドの ID。「タグ」または「カテゴリ」の値を含めることはできません。",
   "setting.frontMatter.taxonomy.customTaxonomy.items.properties.options.description": "選択できるオプション。",
-  "setting.frontMatter.taxonomy.dateField.markdownDescription": "この設定は、記事の公開日フィールドを定義するために使用されます。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.datefield)",
+  "setting.frontMatter.taxonomy.dateField.markdownDescription": "この設定は、記事の公開日フィールドを定義するために使用されます。[ドキュメントを確認](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": "フィールドグループの名前",
   "setting.frontMatter.taxonomy.fieldGroups.items.properties.labelField.description": "表示値として使用するフィールドの名前",
   "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": "この設定は、記事の変更日フィールドを定義するために使用されます。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.modifiedfield)",
+  "setting.frontMatter.taxonomy.modifiedField.markdownDescription": "この設定は、記事の変更日フィールドを定義するために使用されます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.modifiedfield)",
+  "setting.frontMatter.taxonomy.quoteStringValues.markdownDescription": "front matterの文字列の値をクォーテーションで囲みます。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.quotestringvalues)",
   "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)",
@@ -237,14 +242,13 @@
   "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": "この設定は非推奨であり、次のメジャーバージョンで削除される予定です。メディア スニペットは 'frontMatter.content.snippet' 設定で定義してください。",
-  "setting.frontMatter.taxonomy.dateField.deprecationMessage": "この設定は非推奨であり、次のメジャーバージョンで削除される予定です。代わりに、コンテンツ タイプの日付フィールドで新しい 'isPublishDate' 設定を使用してください。",
-  "setting.frontMatter.taxonomy.modifiedField.deprecationMessage": "この設定は非推奨であり、次のメジャーバージョンで削除される予定です。代わりに、コンテンツ タイプの日付フィールドで新しい 'isModifiedDate' 設定を使用してください。",
-  "setting.frontMatter.global.disabledNotifications.markdownDescription": "これは、Front Matter CMS で無効にできる通知タイプの配列です。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.global.disablednotifications)",
+  "setting.frontMatter.taxonomy.dateField.deprecationMessage": "この設定は非推奨であり、次のメジャーバージョンで削除される予定です。代わりに、記事タイプの日付フィールドで新しい 'isPublishDate' 設定を使用してください。",
+  "setting.frontMatter.taxonomy.modifiedField.deprecationMessage": "この設定は非推奨であり、次のメジャーバージョンで削除される予定です。代わりに、記事タイプの日付フィールドで新しい 'isModifiedDate' 設定を使用してください。",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.customType.description": "使用するユーザー設定フィールド型の名前を指定します。",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.clearEmpty.description": "空の値をクリアするかどうかを指定します。",
-  "setting.frontMatter.website.host.markdownDescription": "ウェブサイトのホスト URL を指定します。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.website.url)",
-  "command.frontMatter.settings.refresh": "フロントマター設定の更新",
-  "setting.frontMatter.config.dynamicFilePath.markdownDescription": "動的構成ファイルへのパスを指定します (例: [[ワークスペース]]/config.js)。[ドキュメントをチェックイン](https://frontmatter.codes/docs/settings/overview#frontmatter.config.dynamicfilepath)",
-  "setting.frontMatter.content.pageFolders.items.properties.disableCreation.description": "フォルダー内の新しいコンテンツの作成を無効にします。",
-  "setting.frontMatter.custom.scripts.items.properties.contentTypes.description": "スクリプトを使用するコンテンツ タイプを定義します。何も定義されていない場合は、すべての型で使用できます。"
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.clearEmpty.description": "空の値をクリアするかどうかを指定します。",
+  "setting.frontMatter.website.host.markdownDescription": "ウェブサイトのホストURLを指定します。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.website.url)",
+  "command.frontMatter.settings.refresh": "Front Matterの設定の再読み込み",
+  "setting.frontMatter.config.dynamicFilePath.markdownDescription": "動的構成ファイルへのパスを指定します (例: [[ワークスペース]]/config.js)。[ドキュメントを確認](https://frontmatter.codes/docs/settings/overview#frontmatter.config.dynamicfilepath)",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.allowAsSubContent.description": "記事をサブコンテンツとして作成可能かどうかを設定します。",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.isSubContent.description": "記事をサブコンテンツとして作成するかどうかを設定します。"
 }

package.nls.json

@@ -48,6 +48,7 @@
   "command.frontMatter.markup.unorderedlist": "Unordered list",
   "command.frontMatter.git.sync": "Sync",
   "command.frontMatter.cache.clear": "Clear cache",
+  "command.frontMatter.i18n.create": "Create new translation",
   "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.",
@@ -75,6 +76,12 @@
   "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.pageFolders.items.properties.disableCreation.description": "Disable the creation of new content in the folder.",
+  "setting.frontMatter.content.pageFolders.items.properties.defaultLocale.description": "Set the default locale ID for the page folder. All content from this folder is translatable to the languages defined in the `frontMatter.content.i18n` setting.",
+  "setting.frontMatter.content.pageFolders.items.properties.locales.description": "Define the locales for the page folder. This will be used for the translation of the content.",
+  "setting.frontMatter.content.i18n.markdownDescription": "Specify the locales you want to use for your website. This setting can be overwritten on page folder level. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.i18n)",
+  "setting.frontMatter.content.i18n.items.properties.title.description": "Title of the locale",
+  "setting.frontMatter.content.i18n.items.properties.locale.description": "Locale code",
+  "setting.frontMatter.content.i18n.items.properties.path.description": "Relative path of the locale folder",
   "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",
@@ -92,6 +99,7 @@
   "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.content.filters.markdownDescription": "Specify the filters you want to use for your content dashboard. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.filters)",
   "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.",
@@ -153,6 +161,17 @@
   "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.media.contentTypes.markdownDescription": "Specify the media content types you want to use in Front Matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.media.contenttypes)",
+  "setting.frontMatter.media.contentTypes.items.description": "Define the media content types you want to use in Front Matter.",
+  "setting.frontMatter.media.contentTypes.items.properties.name.description": "Name of the media content type",
+  "setting.frontMatter.media.contentTypes.items.properties.fileTypes.description": "Specify the file types to allow for the media content type",
+  "setting.frontMatter.media.contentTypes.items.properties.fields.description": "Define the fields of the media content type",
+  "setting.frontMatter.media.contentTypes.items.properties.fields.properties.title.description": "Title to show in the UI",
+  "setting.frontMatter.media.contentTypes.items.properties.fields.properties.name.description": "Name of the field to use",
+  "setting.frontMatter.media.contentTypes.items.properties.fields.properties.type.description": "Define the type of field",
+  "setting.frontMatter.media.contentTypes.items.properties.fields.properties.single.description": "Is a single line field",
+
   "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.panel.actions.disabled.markdownDescription": "Specify the actions you want to disable in the panel. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.actions.disabled)",
   "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)",
@@ -191,6 +210,7 @@
   "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.singleValueAsString.description": "Specify if you want to store a single array value as a string instead of an array.",
   "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",
@@ -209,6 +229,7 @@
   "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.slugTemplate.description": "Defines a custom slug template 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.",
@@ -224,6 +245,7 @@
   "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.quoteStringValues.markdownDescription": "Specify if you want to quote string values in the front matter. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.quotestringvalues)",
   "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)",
@@ -234,6 +256,7 @@
   "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.slugTemplate.markdownDescription": "Defines a custom slug template for the content you will create. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.slugtemplate)",
   "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)",
@@ -243,8 +266,13 @@
   "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.",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.clearEmpty.description": "Specify if the empty values should be cleared.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.clearEmpty.description": "Specify if the empty values should be cleared.",
   "setting.frontMatter.website.host.markdownDescription": "Specify the host URL of your website. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.website.url)",
   "command.frontMatter.settings.refresh": "Refresh Front Matter Settings",
-  "setting.frontMatter.config.dynamicFilePath.markdownDescription": "Specify the path to the dynamic config file (ex: [[workspace]]/config.js). [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.config.dynamicfilepath)"
+  "setting.frontMatter.config.dynamicFilePath.markdownDescription": "Specify the path to the dynamic config file (ex: [[workspace]]/config.js). [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.config.dynamicfilepath)",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.allowAsSubContent.description": "Specify if the content type can be used as sub content.",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.isSubContent.description": "Specify if the content type is sub content.",
+
+  "setting.frontMatter.git.disableOnBranches.markdownDescription": "Specify the branches on which you want to disable the Git actions. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.disableonbranches)",
+  "setting.frontMatter.git.requiresCommitMessage.markdownDescription": "Specify if you want to require a commit message when publishing your changes for a specified branch. [Check in the docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.requirescommitmessage)"
 }

scripts/generate-localization-enum.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const path = require('path');
+const jsoncParser = require('jsonc-parser');
 
 const camlCase = (str) => {
   const words = str.split('.');
@@ -15,12 +16,14 @@ const camlCase = (str) => {
   const enFile = fs.readFileSync(path.join(__dirname, '../l10n/bundle.l10n.json'), 'utf8');
 
   // Parse the EN file
-  const en = JSON.parse(enFile);
+  const en = jsoncParser.parse(enFile);
 
   const keys = Object.keys(en);
 
   // Create an enum file
-  const enumFile = fs.createWriteStream(path.join(__dirname, '../src/localization/localization.enum.ts'));
+  const enumFile = fs.createWriteStream(
+    path.join(__dirname, '../src/localization/localization.enum.ts')
+  );
 
   // Write the enum file header
   enumFile.write(`export enum LocalizationKey {\n`);
@@ -38,4 +41,4 @@ const camlCase = (str) => {
 
   // Close the enum file
   enumFile.close();
-})();
+})();

src/commands/Article.ts

@@ -13,90 +13,31 @@ import {
   TelemetryEvent
 } from './../constants';
 import * as vscode from 'vscode';
-import { CustomPlaceholder, Field, TaxonomyType } from '../models';
+import { CustomPlaceholder, Field } from '../models';
 import { format } from 'date-fns';
-import { ArticleHelper, Settings, SlugHelper, TaxonomyHelper } from '../helpers';
+import {
+  ArticleHelper,
+  Settings,
+  SlugHelper,
+  processArticlePlaceholdersFromData,
+  processTimePlaceholders
+} from '../helpers';
 import { Notifications } from '../helpers/Notifications';
 import { extname, basename, parse, dirname } from 'path';
 import { COMMAND_NAME, DefaultFields } from '../constants';
-import { DashboardData, SnippetRange } from '../models/DashboardData';
+import { DashboardData, SnippetInfo, SnippetRange } from '../models/DashboardData';
 import { DateHelper } from '../helpers/DateHelper';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { Telemetry } from '../helpers/Telemetry';
 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';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
 
 export class Article {
-  /**
-   * Insert taxonomy
-   *
-   * @param type
-   */
-  public static async insert(type: TaxonomyType) {
-    const editor = vscode.window.activeTextEditor;
-    if (!editor) {
-      return;
-    }
-
-    const article = ArticleHelper.getCurrent();
-
-    if (!article) {
-      return;
-    }
-
-    let options: vscode.QuickPickItem[] = [];
-    const matterProp: string = type === TaxonomyType.Tag ? 'tags' : 'categories';
-
-    // Add the selected options to the options array
-    if (article.data[matterProp]) {
-      const propData = article.data[matterProp];
-      if (propData && propData.length > 0) {
-        options = [...propData]
-          .filter((p) => p)
-          .map(
-            (p) =>
-              ({
-                label: p,
-                picked: true
-              } as vscode.QuickPickItem)
-          );
-      }
-    }
-
-    // Add all the known options to the selection list
-    const crntOptions = (await TaxonomyHelper.get(type)) || [];
-    if (crntOptions && crntOptions.length > 0) {
-      for (const crntOpt of crntOptions) {
-        if (!options.find((o) => o.label === crntOpt)) {
-          options.push({
-            label: crntOpt
-          });
-        }
-      }
-    }
-
-    if (options.length === 0) {
-      Notifications.info(`No ${type === TaxonomyType.Tag ? 'tags' : 'categories'} configured.`);
-      return;
-    }
-
-    const selectedOptions = await vscode.window.showQuickPick(options, {
-      placeHolder: `Select your ${type === TaxonomyType.Tag ? 'tags' : 'categories'} to insert`,
-      canPickMany: true,
-      ignoreFocusOut: true
-    });
-
-    if (selectedOptions) {
-      article.data[matterProp] = selectedOptions.map((o) => o.label);
-    }
-
-    ArticleHelper.update(editor, article);
-  }
-
   /**
    * Sets the article date
    */
@@ -117,7 +58,7 @@ export class Article {
       ArticleHelper.update(editor, article);
     } catch (e) {
       Notifications.error(
-        `Something failed while parsing the date format. Check your "${CONFIG_KEY}${SETTING_DATE_FORMAT}" setting.`
+        l10n.t(LocalizationKey.commandsArticleSetDateError, `${CONFIG_KEY}${SETTING_DATE_FORMAT}`)
       );
     }
   }
@@ -127,7 +68,7 @@ export class Article {
    * @param article
    */
   public static updateDate(article: ParsedFrontMatter) {
-    article.data = ArticleHelper.updateDates(article.data);
+    article.data = ArticleHelper.updateDates(article);
     return article;
   }
 
@@ -180,7 +121,7 @@ export class Article {
       return cloneArticle;
     } catch (e: unknown) {
       Notifications.error(
-        `Something failed while parsing the date format. Check your "${CONFIG_KEY}${SETTING_DATE_FORMAT}" setting.`
+        l10n.t(LocalizationKey.commandsArticleSetDateError, `${CONFIG_KEY}${SETTING_DATE_FORMAT}`)
       );
     }
   }
@@ -188,7 +129,7 @@ export class Article {
   /**
    * Generate the new slug
    */
-  public static generateSlug(title: string) {
+  public static generateSlug(title: string, article?: ParsedFrontMatter, slugTemplate?: string) {
     if (!title) {
       return;
     }
@@ -196,13 +137,15 @@ export class Article {
     const prefix = Settings.get(SETTING_SLUG_PREFIX) as string;
     const suffix = Settings.get(SETTING_SLUG_SUFFIX) as string;
 
-    const slug = SlugHelper.createSlug(title);
+    if (article?.data) {
+      const slug = SlugHelper.createSlug(title, article?.data, slugTemplate);
 
-    if (slug) {
-      return {
-        slug,
-        slugWithPrefixAndSuffix: `${prefix}${slug}${suffix}`
-      };
+      if (slug) {
+        return {
+          slug,
+          slugWithPrefixAndSuffix: `${prefix}${slug}${suffix}`
+        };
+      }
     }
 
     return undefined;
@@ -227,12 +170,12 @@ export class Article {
     }
 
     let filePrefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
-    const contentType = ArticleHelper.getContentType(article.data);
+    const contentType = ArticleHelper.getContentType(article);
     filePrefix = ArticleHelper.getFilePrefix(filePrefix, editor.document.uri.fsPath, contentType);
 
     const titleField = 'title';
     const articleTitle: string = article.data[titleField];
-    const slugInfo = Article.generateSlug(articleTitle);
+    const slugInfo = Article.generateSlug(articleTitle, article, contentType.slugTemplate);
 
     if (slugInfo && slugInfo.slug && slugInfo.slugWithPrefixAndSuffix) {
       article.data['slug'] = slugInfo.slugWithPrefixAndSuffix;
@@ -256,9 +199,13 @@ export class Article {
           );
           for (const pField of customPlaceholderFields) {
             article.data[pField.name] = customPlaceholder.value;
-            article.data[pField.name] = processKnownPlaceholders(
+            article.data[pField.name] = processArticlePlaceholdersFromData(
+              article.data[pField.name],
+              article.data,
+              contentType
+            );
+            article.data[pField.name] = processTimePlaceholders(
               article.data[pField.name],
-              articleTitle,
               dateFormat
             );
           }
@@ -292,7 +239,12 @@ export class Article {
               overwrite: false
             });
           } catch (e: unknown) {
-            Notifications.error(`Failed to rename file: ${(e as Error).message || e}`);
+            Notifications.error(
+              l10n.t(
+                LocalizationKey.commandsArticleUpdateSlugError,
+                ((e as Error).message || e) as string
+              )
+            );
           }
         }
       }
@@ -393,7 +345,7 @@ export class Article {
 
     const article = ArticleHelper.getFrontMatter(editor);
     const contentType =
-      article && article.data ? ArticleHelper.getContentType(article.data) : DEFAULT_CONTENT_TYPE;
+      article && article.data ? ArticleHelper.getContentType(article) : DEFAULT_CONTENT_TYPE;
 
     const position = editor.selection.active;
     const selectionText = editor.document.getText(editor.selection);
@@ -422,7 +374,7 @@ export class Article {
       return;
     }
 
-    let position = editor.selection.active;
+    const position = editor.selection.active;
     const selectionText = editor.document.getText(editor.selection);
 
     // Check for snippet wrapper
@@ -447,7 +399,7 @@ export class Article {
       snippetStartBeforePos = linesBeforeSelection.length - snippetStartBeforePos - 1;
     }
 
-    let snippetInfo: { id: string; fields: any[] } | undefined = undefined;
+    let snippetInfo: SnippetInfo | undefined = undefined;
     let range: SnippetRange | undefined = undefined;
     if (
       snippetEndAfterPos > -1 &&
@@ -471,6 +423,7 @@ export class Article {
     }
 
     const article = ArticleHelper.getFrontMatter(editor);
+    const contentType = article ? ArticleHelper.getContentType(article) : undefined;
 
     await vscode.commands.executeCommand(COMMAND_NAME.dashboard, {
       type: NavigationType.Snippets,
@@ -478,6 +431,7 @@ export class Article {
         fileTitle: article?.data.title || '',
         filePath: editor.document.uri.fsPath,
         fieldName: basename(editor.document.uri.fsPath),
+        contentType,
         position,
         range,
         selection: selectionText,

src/commands/Backers.ts

@@ -1,77 +1,64 @@
-import { commands, ExtensionContext } from 'vscode';
+import { authentication, commands, ExtensionContext } from 'vscode';
 import { COMMAND_NAME, CONTEXT } from '../constants';
-import { Extension } from '../helpers';
-import { Credentials } from '../services/Credentials';
-import fetch from 'node-fetch';
+import { Extension, Logger } from '../helpers';
 import { Dashboard } from './Dashboard';
 import { SettingsListener } from '../listeners/panel';
 import { PanelProvider } from '../panelWebView/PanelProvider';
 
 export class Backers {
-  private static creds: Credentials | null = null;
-
   public static async init(context: ExtensionContext) {
-    Backers.creds = new Credentials();
-    await Backers.creds.initialize(context, Backers.tryUsernameCheck);
-
-    Backers.tryUsernameCheck();
+    Backers.checkSponsor();
 
     context.subscriptions.push(
       commands.registerCommand(COMMAND_NAME.authenticate, async () => {
-        Backers.tryUsernameCheck();
+        await authentication.getSession('github', ['read:user'], { createIfNone: true });
+        Backers.checkSponsor();
       })
     );
   }
 
-  public static async tryUsernameCheck() {
-    try {
-      const username = await Backers.getUsername();
-      Backers.validate(username || '');
-    } catch (e) {
-      Backers.validate('');
-    }
-  }
-
-  public static async getUsername() {
-    const octokit = await Backers.creds?.getOctokit();
-    const user = await octokit?.users.getAuthenticated();
-
-    if (user?.data?.login) {
-      return user?.data?.login;
-    }
-
-    return;
-  }
-
-  public static async validate(username: string) {
+  public static async checkSponsor() {
     const ext = Extension.getInstance();
+    const githubAuth = await authentication.getSession('github', ['read:user'], { silent: true });
+    if (githubAuth && githubAuth.accessToken) {
+      try {
+        const isBeta = ext.isBetaVersion();
+        const response = await fetch(
+          `https://${isBeta ? `beta.` : ``}frontmatter.codes/api/v2/backers`,
+          {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              accept: 'application/json'
+            },
+            body: JSON.stringify({
+              token: githubAuth.accessToken
+            })
+          }
+        );
 
-    if (!username) {
-      ext.setState(CONTEXT.backer, undefined, 'global');
-    }
+        if (response.ok) {
+          const prevData = await ext.getState<boolean>(CONTEXT.backer, 'global');
+          await ext.setState(CONTEXT.backer, true, 'global');
 
-    const isBeta = ext.isBetaVersion();
+          if (!prevData) {
+            const PanelView = PanelProvider.getInstance();
+            if (PanelView.visible) {
+              SettingsListener.getSettings();
+            }
 
-    const response = await fetch(
-      `https://${isBeta ? `beta.` : ``}frontmatter.codes/api/backers?backer=${username}`
-    );
-
-    if (response.ok) {
-      const prevData = await ext.getState<boolean>(CONTEXT.backer, 'global');
-      await ext.setState(CONTEXT.backer, true, 'global');
-
-      if (!prevData) {
-        const PanelView = PanelProvider.getInstance();
-        if (PanelView.visible) {
-          SettingsListener.getSettings();
-        }
-
-        if (Dashboard.isOpen) {
-          Dashboard.reload();
+            if (Dashboard.isOpen) {
+              Dashboard.reload();
+            }
+          }
+        } else {
+          ext.setState(CONTEXT.backer, false, 'global');
         }
+      } catch (e) {
+        Logger.error(`Failed to check if user is a sponsor: ${(e as Error).message}`);
       }
     } else {
-      ext.setState(CONTEXT.backer, false, 'global');
+      ext.setState(CONTEXT.backer, undefined, 'global');
     }
   }
 }

src/commands/Cache.ts

@@ -1,6 +1,8 @@
 import { commands } from 'vscode';
 import { COMMAND_NAME, ExtensionState } from '../constants';
-import { Extension, Notifications } from '../helpers';
+import { Extension, Logger, Notifications } from '../helpers';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
 
 export class Cache {
   public static async registerCommands() {
@@ -20,7 +22,7 @@ export class Cache {
     await Extension.getInstance().setState(key, data, type);
   }
 
-  public static async clear(showNotification: boolean = true) {
+  public static async clear(showNotification = true) {
     const ext = Extension.getInstance();
 
     await ext.setState(ExtensionState.Dashboard.Pages.Cache, undefined, 'workspace', true);
@@ -28,7 +30,9 @@ export class Cache {
     await ext.setState(ExtensionState.Settings.Extends, undefined, 'workspace', true);
 
     if (showNotification) {
-      Notifications.info('Cache cleared');
+      Notifications.info(l10n.t(LocalizationKey.commandsCacheCleared));
+    } else {
+      Logger.info(l10n.t(LocalizationKey.commandsCacheCleared));
     }
   }
 }

src/commands/Chatbot.ts

@@ -2,9 +2,11 @@ import { Telemetry } from './../helpers/Telemetry';
 import { TelemetryEvent, PreviewCommands, GeneralCommands } from './../constants';
 import { join } from 'path';
 import { commands, Uri, ViewColumn, window } from 'vscode';
-import { Extension, Settings } from '../helpers';
+import { Extension } from '../helpers';
 import { WebviewHelper } from '@estruyf/vscode';
 import { getLocalizationFile } from '../utils/getLocalizationFile';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
 
 export class Chatbot {
   /**
@@ -14,7 +16,7 @@ export class Chatbot {
     // Create the preview webview
     const webView = window.createWebviewPanel(
       'frontMatterChatbot',
-      'Front Matter AI - Ask me anything',
+      `Front Matter AI - ${l10n.t(LocalizationKey.commandsChatbotTitle)}`,
       {
         viewColumn: ViewColumn.Beside,
         preserveFocus: true

src/commands/Content.ts

@@ -1,6 +1,8 @@
 import { commands, QuickPickItem, window } from 'vscode';
 import { COMMAND_NAME, SETTING_TEMPLATES_ENABLED } from '../constants';
 import { Settings } from '../helpers';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
 
 export class Content {
   public static async create() {
@@ -12,18 +14,18 @@ export class Content {
 
     const options: QuickPickItem[] = [
       {
-        label: 'Create content by content type',
-        description: 'Select if you want to create new content by the available content type(s)'
+        label: l10n.t(LocalizationKey.commandsContentOptionContentTypeLabel),
+        description: l10n.t(LocalizationKey.commandsContentOptionContentTypeDescription)
       },
       {
-        label: 'Create content by template',
-        description: 'Select if you want to create new content by the available template(s)'
+        label: l10n.t(LocalizationKey.commandsContentOptionTemplateLabel),
+        description: l10n.t(LocalizationKey.commandsContentOptionTemplateDescription)
       } as QuickPickItem
     ];
 
     const selectedOption = await window.showQuickPick(options, {
-      title: 'Create content',
-      placeHolder: `Select how you want to create your new content`,
+      title: l10n.t(LocalizationKey.commandsContentQuickPickTitle),
+      placeHolder: l10n.t(LocalizationKey.commandsContentQuickPickPlaceholder),
       canPickMany: false,
       ignoreFocusOut: true
     });

src/commands/Dashboard.ts

@@ -3,11 +3,13 @@ import {
   CONTEXT,
   ExtensionState,
   SETTING_EXPERIMENTAL,
-  SETTING_EXTENSIBILITY_SCRIPTS
+  SETTING_EXTENSIBILITY_SCRIPTS,
+  COMMAND_NAME,
+  TelemetryEvent
 } from '../constants';
 import { join } from 'path';
 import { commands, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode';
-import { Logger, Settings as SettingsHelper } from '../helpers';
+import { DashboardSettings, Logger, Settings as SettingsHelper, Telemetry } from '../helpers';
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
 import { Extension } from '../helpers/Extension';
 import { WebviewHelper } from '@estruyf/vscode';
@@ -29,6 +31,10 @@ import {
 import { MediaListener as PanelMediaListener } from '../listeners/panel';
 import { GitListener, ModeListener } from '../listeners/general';
 import { Folders } from './Folders';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
+import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
+import { NavigationType } from '../dashboardWebView/models';
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
@@ -49,6 +55,56 @@ export class Dashboard {
     }
   }
 
+  public static registerCommands() {
+    const subscriptions = Extension.getInstance().subscriptions;
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboard, (data?: DashboardData) => {
+        Telemetry.send(TelemetryEvent.openContentDashboard);
+        if (!data) {
+          Dashboard.open({ type: NavigationType.Contents });
+        } else {
+          Dashboard.open(data);
+        }
+      })
+    );
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboardMedia, () => {
+        Telemetry.send(TelemetryEvent.openMediaDashboard);
+        Dashboard.open({ type: NavigationType.Media });
+      })
+    );
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboardSnippets, () => {
+        Telemetry.send(TelemetryEvent.openSnippetsDashboard);
+        Dashboard.open({ type: NavigationType.Snippets });
+      })
+    );
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboardData, () => {
+        Telemetry.send(TelemetryEvent.openDataDashboard);
+        Dashboard.open({ type: NavigationType.Data });
+      })
+    );
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboardTaxonomy, () => {
+        Telemetry.send(TelemetryEvent.openTaxonomyDashboard);
+        Dashboard.open({ type: NavigationType.Taxonomy });
+      })
+    );
+
+    subscriptions.push(
+      commands.registerCommand(COMMAND_NAME.dashboardClose, () => {
+        Telemetry.send(TelemetryEvent.closeDashboard);
+        Dashboard.close();
+      })
+    );
+  }
+
   /**
    * Open or reveal the dashboard
    */
@@ -119,7 +175,7 @@ export class Dashboard {
     // Create the preview webview
     Dashboard.webview = window.createWebviewPanel(
       'frontMatterDashboard',
-      'FrontMatter Dashboard',
+      `Front Matter ${l10n.t(LocalizationKey.commandsDashboardTitle)}`,
       ViewColumn.One,
       {
         enableScripts: true,
@@ -158,6 +214,7 @@ export class Dashboard {
       Dashboard.isDisposed = true;
       Dashboard._viewData = undefined;
       PanelMediaListener.getMediaSelection();
+      DashboardSettings.updateAfterClose();
       await commands.executeCommand('setContext', CONTEXT.isDashboardOpen, false);
     });
 
@@ -201,7 +258,7 @@ export class Dashboard {
    * @param msg
    */
   public static postWebviewMessage(msg: {
-    command: DashboardCommand;
+    command: DashboardCommand | DashboardMessage;
     requestId?: string;
     payload?: unknown;
     error?: unknown;

src/commands/Folders.ts

@@ -1,6 +1,7 @@
 import { STATIC_FOLDER_PLACEHOLDER } from './../constants/StaticFolderPlaceholder';
 import { Questions } from './../helpers/Questions';
 import {
+  SETTING_CONTENT_I18N,
   SETTING_CONTENT_PAGE_FOLDERS,
   SETTING_CONTENT_STATIC_FOLDER,
   SETTING_CONTENT_SUPPORTED_FILETYPES,
@@ -9,11 +10,11 @@ import {
 } from './../constants';
 import { commands, Uri, workspace, window } from 'vscode';
 import { basename, dirname, join, relative, sep } from 'path';
-import { ContentFolder, FileInfo, FolderInfo, StaticFolder } from '../models';
+import { ContentFolder, FileInfo, FolderInfo, I18nConfig, StaticFolder } from '../models';
 import uniqBy = require('lodash.uniqby');
 import { Template } from './Template';
 import { Notifications } from '../helpers/Notifications';
-import { Logger, processKnownPlaceholders, Settings } from '../helpers';
+import { Logger, Settings, processTimePlaceholders } from '../helpers';
 import { existsSync } from 'fs';
 import { format } from 'date-fns';
 import { Dashboard } from './Dashboard';
@@ -25,6 +26,8 @@ import { Telemetry } from '../helpers/Telemetry';
 import { glob } from 'glob';
 import { mkdirAsync } from '../utils/mkdirAsync';
 import { existsAsync } from '../utils';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
 
 export const WORKSPACE_PLACEHOLDER = `[[workspace]]`;
 
@@ -57,15 +60,15 @@ export class Folders {
     }
 
     const folderName = await window.showInputBox({
-      title: `Add media folder`,
-      prompt: `Which name would you like to give to your folder (use "/" to create multi-level folders)?`,
+      title: l10n.t(LocalizationKey.commandsFoldersAddMediaFolderInputBoxTitle),
+      prompt: l10n.t(LocalizationKey.commandsFoldersAddMediaFolderInputBoxPrompt),
       value: startPath,
       ignoreFocusOut: true,
       placeHolder: `${format(new Date(), `yyyy/MM`)}`
     });
 
     if (!folderName) {
-      Notifications.warning(`No folder name was specified.`);
+      Notifications.warning(l10n.t(LocalizationKey.commandsFoldersAddMediaFolderNoFolderWarning));
       return;
     }
 
@@ -126,15 +129,15 @@ export class Folders {
       );
 
       if (exists) {
-        Notifications.warning(`Folder is already registered`);
+        Notifications.warning(l10n.t(LocalizationKey.commandsFoldersCreateFolderExistsWarning));
         return;
       }
 
       if (!folderName) {
         folderName = await window.showInputBox({
-          title: `Register folder`,
-          prompt: `Which name would you like to specify for this folder?`,
-          placeHolder: `Folder name`,
+          title: l10n.t(LocalizationKey.commandsFoldersCreateInputTitle),
+          prompt: l10n.t(LocalizationKey.commandsFoldersCreateInputPrompt),
+          placeHolder: l10n.t(LocalizationKey.commandsFoldersCreateInputPlaceholder),
           value: basename(folder.fsPath),
           ignoreFocusOut: true
         });
@@ -154,7 +157,7 @@ export class Folders {
       folders = uniqBy(folders, (f) => f.path);
       await Folders.update(folders);
 
-      Notifications.info(`Folder registered`);
+      Notifications.info(l10n.t(LocalizationKey.commandsFoldersCreateSuccess));
 
       Telemetry.send(TelemetryEvent.registerFolder);
 
@@ -245,7 +248,9 @@ export class Folders {
       if (!projectFolder) {
         window
           .showWorkspaceFolderPick({
-            placeHolder: `Please select the main workspace folder for Front Matter to use.`
+            placeHolder: l10n.t(
+              LocalizationKey.commandsFoldersGetWorkspaceFolderWorkspaceFolderPickPlaceholder
+            )
           })
           .then(async (selectedFolder) => {
             if (selectedFolder) {
@@ -279,73 +284,39 @@ export class Folders {
   public static async getInfo(limit?: number): Promise<FolderInfo[] | null> {
     const supportedFiles = Settings.get<string[]>(SETTING_CONTENT_SUPPORTED_FILETYPES);
     const folders = Folders.get();
-    const wsFolder = parseWinPath(Folders.getWorkspaceFolder()?.fsPath || '');
 
     if (folders && folders.length > 0) {
       const folderInfo: FolderInfo[] = [];
 
       for (const folder of folders) {
-        try {
-          const folderPath = parseWinPath(folder.path);
+        const crntFolderInfo = await Folders.getFilesByFolder(folder, supportedFiles, limit);
+        if (crntFolderInfo) {
+          folderInfo.push(crntFolderInfo);
+        }
 
-          if (typeof folderPath === 'string') {
-            let files: Uri[] = [];
+        // Process localization folders
+        if (folder.defaultLocale) {
+          const i18nConfig = folder.locales || Settings.get<I18nConfig[]>(SETTING_CONTENT_I18N);
+          if (i18nConfig) {
+            for (const i18n of i18nConfig) {
+              if (i18n.locale !== folder.defaultLocale && i18n.path) {
+                const i18nFolder = {
+                  ...folder,
+                  path: join(folder.path, i18n.path),
+                  title: `${folder.title} (${i18n.title})`
+                } as ContentFolder;
 
-            for (const fileType of supportedFiles || DEFAULT_FILE_TYPES) {
-              let filePath = join(
-                folderPath,
-                folder.excludeSubdir ? '/' : '**',
-                `*${fileType.startsWith('.') ? '' : '.'}${fileType}`
-              );
-
-              if (folderPath === '' && folder.excludeSubdir) {
-                filePath = `*${fileType.startsWith('.') ? '' : '.'}${fileType}`;
-              }
-
-              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));
-
-              files = [...files, ...foundFiles];
-            }
-
-            if (files) {
-              let fileStats: FileInfo[] = [];
-
-              for (const file of files) {
-                try {
-                  const fileName = basename(file.fsPath);
-                  const folderName = dirname(file.fsPath).split(sep).pop();
-
-                  const stats = await workspace.fs.stat(file);
-
-                  fileStats.push({
-                    filePath: file.fsPath,
-                    fileName,
-                    folderName,
-                    ...stats
-                  });
-                } catch (error) {
-                  // Skip the file
+                const crntFolderInfo = await Folders.getFilesByFolder(
+                  i18nFolder,
+                  supportedFiles,
+                  limit
+                );
+                if (crntFolderInfo) {
+                  folderInfo.push(crntFolderInfo);
                 }
               }
-
-              fileStats = fileStats.sort((a, b) => b.mtime - a.mtime);
-
-              if (limit) {
-                fileStats = fileStats.slice(0, limit);
-              }
-
-              folderInfo.push({
-                title: folder.title,
-                files: files.length,
-                lastModified: fileStats
-              });
             }
           }
-        } catch (e) {
-          // Skip the current folder
         }
       }
 
@@ -361,7 +332,10 @@ export class Folders {
    */
   public static get(): ContentFolder[] {
     const wsFolder = Folders.getWorkspaceFolder();
-    const folders: ContentFolder[] = Settings.get(SETTING_CONTENT_PAGE_FOLDERS) as ContentFolder[];
+    let folders: ContentFolder[] = Settings.get(SETTING_CONTENT_PAGE_FOLDERS) as ContentFolder[];
+
+    // Filter out folders without a path
+    folders = folders.filter((f) => f.path);
 
     const contentFolders = folders.map((folder) => {
       if (!folder.title) {
@@ -371,18 +345,25 @@ export class Folders {
       let folderPath: string | undefined = Folders.absWsFolder(folder, wsFolder);
       if (folderPath.includes(`{{`) && folderPath.includes(`}}`)) {
         const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
-        folderPath = processKnownPlaceholders(folderPath, undefined, dateFormat);
+        folderPath = processTimePlaceholders(folderPath, dateFormat);
       } else {
         if (folderPath && !existsSync(folderPath)) {
           Notifications.errorShowOnce(
-            `Folder "${folder.title} (${folder.path})" does not exist. Please remove it from the settings.`,
-            'Remove folder',
-            'Create folder'
+            l10n.t(
+              LocalizationKey.commandsFoldersGetNotificationErrorTitle,
+              `${folder.title} (${folder.path})`
+            ),
+            l10n.t(LocalizationKey.commandsFoldersGetNotificationErrorRemoveAction),
+            l10n.t(LocalizationKey.commandsFoldersGetNotificationErrorCreateAction)
           ).then((answer) => {
-            if (answer === 'Remove folder') {
+            if (
+              answer === l10n.t(LocalizationKey.commandsFoldersGetNotificationErrorRemoveAction)
+            ) {
               const folders = Folders.get();
               Folders.update(folders.filter((f) => f.path !== folder.path));
-            } else if (answer === 'Create folder') {
+            } else if (
+              answer === l10n.t(LocalizationKey.commandsFoldersGetNotificationErrorCreateAction)
+            ) {
               mkdirAsync(folderPath as string, { recursive: true });
             }
           });
@@ -590,6 +571,97 @@ export class Folders {
     return;
   }
 
+  /**
+   * Retrieves the page folder that matches the given file path.
+   *
+   * @param filePath - The file path to match against the page folders.
+   * @returns The page folder that matches the file path, or undefined if no match is found.
+   */
+  public static getPageFolderByFilePath(filePath: string): ContentFolder | undefined {
+    const folders = Folders.get();
+    const parsedPath = parseWinPath(filePath);
+    const pageFolderMatches = folders
+      .filter((folder) => parsedPath && folder.path && parsedPath.includes(folder.path))
+      .sort((a, b) => b.path.length - a.path.length);
+
+    if (pageFolderMatches.length > 0 && pageFolderMatches[0]) {
+      return pageFolderMatches[0];
+    }
+
+    return;
+  }
+
+  private static async getFilesByFolder(
+    folder: ContentFolder,
+    supportedFiles: string[] | undefined,
+    limit?: number
+  ): Promise<FolderInfo | undefined> {
+    try {
+      const folderPath = parseWinPath(folder.path);
+
+      if (typeof folderPath === 'string') {
+        let files: Uri[] = [];
+
+        for (const fileType of supportedFiles || DEFAULT_FILE_TYPES) {
+          let filePath = join(
+            folderPath,
+            folder.excludeSubdir ? '/' : '**',
+            `*${fileType.startsWith('.') ? '' : '.'}${fileType}`
+          );
+
+          if (folderPath === '' && folder.excludeSubdir) {
+            filePath = `*${fileType.startsWith('.') ? '' : '.'}${fileType}`;
+          }
+
+          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));
+
+          files = [...files, ...foundFiles];
+        }
+
+        if (files) {
+          let fileStats: FileInfo[] = [];
+
+          for (const file of files) {
+            try {
+              const fileName = basename(file.fsPath);
+              const folderName = dirname(file.fsPath).split(sep).pop();
+
+              const stats = await workspace.fs.stat(file);
+
+              fileStats.push({
+                filePath: file.fsPath,
+                fileName,
+                folderName,
+                ...stats
+              });
+            } catch (error) {
+              // Skip the file
+            }
+          }
+
+          fileStats = fileStats.sort((a, b) => b.mtime - a.mtime);
+
+          if (limit) {
+            fileStats = fileStats.slice(0, limit);
+          }
+
+          return {
+            title: folder.title,
+            files: files.length,
+            lastModified: fileStats
+          };
+        }
+      }
+    } catch (e) {
+      // Skip the current folder
+    }
+
+    return;
+  }
+
   /**
    * Retrieve all content folders
    * @param pattern

src/commands/Preview.ts

@@ -14,7 +14,7 @@ import {
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { join, parse } from 'path';
 import { commands, env, Uri, ViewColumn, window, WebviewPanel, extensions } from 'vscode';
-import { Extension, parseWinPath, processKnownPlaceholders, Settings } from '../helpers';
+import { Extension, parseWinPath, processTimePlaceholders, Settings } from '../helpers';
 import { ContentFolder, ContentType, PreviewSettings } from '../models';
 import { format } from 'date-fns';
 import { DateHelper } from '../helpers/DateHelper';
@@ -24,6 +24,8 @@ import { WebviewHelper } from '@estruyf/vscode';
 import { Folders } from './Folders';
 import { ParsedFrontMatter } from '../parsers';
 import { getLocalizationFile } from '../utils/getLocalizationFile';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
 
 export class Preview {
   public static filePath: string | undefined = undefined;
@@ -71,7 +73,9 @@ export class Preview {
     // Create the preview webview
     const webView = window.createWebviewPanel(
       'frontMatterPreview',
-      article?.data?.title ? `Preview: ${article?.data?.title}` : 'FrontMatter Preview',
+      article?.data?.title
+        ? l10n.t(LocalizationKey.commandsPreviewPanelTitle, article?.data.title)
+        : 'Front Matter Preview',
       {
         viewColumn: ViewColumn.Beside,
         preserveFocus: true
@@ -93,6 +97,9 @@ export class Preview {
     const cspSource = webView.webview.cspSource;
 
     webView.onDidDispose(() => {
+      if (crntFilePath && this.webviews[crntFilePath]) {
+        delete this.webviews[crntFilePath];
+      }
       webView.dispose();
     });
 
@@ -192,7 +199,7 @@ export class Preview {
    * @param filePath
    * @param slug
    */
-  public static async updatePageUrl(filePath: string, slug?: string) {
+  public static async updatePageUrl(filePath: string, _: string) {
     const webView = this.webviews[filePath];
     if (webView) {
       const localhost = await this.getLocalServerUrl();
@@ -213,7 +220,7 @@ export class Preview {
    * @returns
    */
   public static async getContentSlug(
-    article: ParsedFrontMatter | null,
+    article: ParsedFrontMatter | null | undefined,
     filePath?: string
   ): Promise<string | undefined> {
     if (!filePath) {
@@ -230,7 +237,7 @@ export class Preview {
 
     let contentType: ContentType | undefined = undefined;
     if (article?.data) {
-      contentType = ArticleHelper.getContentType(article.data);
+      contentType = ArticleHelper.getContentType(article);
     }
 
     // Check if there is a pathname defined on content folder level
@@ -287,7 +294,7 @@ export class Preview {
     if (pathname) {
       // Known placeholders
       const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
-      pathname = processKnownPlaceholders(pathname, article?.data?.title, dateFormat);
+      pathname = processTimePlaceholders(pathname, dateFormat);
 
       // Custom placeholders
       pathname = await ArticleHelper.processCustomPlaceholders(
@@ -311,7 +318,7 @@ export class Preview {
       }
 
       // Support front matter placeholders - {{fm.<field>}}
-      pathname = processFmPlaceholders(pathname, article?.data);
+      pathname = article?.data ? processFmPlaceholders(pathname, article?.data) : pathname;
 
       try {
         const articleDate = ArticleHelper.getDate(article);
@@ -393,7 +400,7 @@ export class Preview {
     const folderNames = crntFolders.map((folder) => folder.title);
     const selectedFolderName = await window.showQuickPick(folderNames, {
       canPickMany: false,
-      title: 'Select the folder of the article to preview'
+      title: l10n.t(LocalizationKey.commandsPreviewAskUserToPickFolderTitle)
     });
 
     if (selectedFolderName) {

src/commands/Project.ts

@@ -21,6 +21,8 @@ import {
 } from '../constants';
 import { SettingsListener } from '../listeners/dashboard';
 import { existsAsync, writeFileAsync } from '../utils';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
 
 export class Project {
   private static content = `---
@@ -66,7 +68,7 @@ categories: []
       if (sampleTemplate !== undefined) {
         await Project.createSampleTemplate();
       } else {
-        Notifications.info('Project initialized successfully.');
+        Notifications.info(l10n.t(LocalizationKey.commandsProjectInitializeSuccess));
       }
 
       // Initialize the media library
@@ -89,10 +91,14 @@ categories: []
     } catch (error: unknown) {
       const err = error as Error;
       Logger.error(`Project::init: ${err?.message || err}`);
-      Notifications.error(`Sorry, something went wrong - ${err?.message || err}`);
+      Notifications.errorWithOutput(l10n.t(LocalizationKey.commonError));
     }
   }
 
+  /**
+   * Project switcher
+   * @returns
+   */
   public static async switchProject() {
     const projects = Settings.getProjects();
     const project = await window.showQuickPick(
@@ -100,7 +106,7 @@ categories: []
       {
         canPickMany: false,
         ignoreFocusOut: true,
-        title: 'Select a project to switch to'
+        title: l10n.t(LocalizationKey.commandsProjectSwitchProjectTitle)
       }
     );
 
@@ -136,7 +142,7 @@ categories: []
       await writeFileAsync(article.fsPath, Project.content, {
         encoding: 'utf-8'
       });
-      Notifications.info('Sample template created.');
+      Notifications.info(l10n.t(LocalizationKey.commandsProjectCreateSampleTemplateInfo));
     }
   }
 

src/commands/Settings.ts

@@ -5,6 +5,8 @@ import { EXTENSION_NAME } from '../constants';
 import { ArticleHelper, FilesHelper } from '../helpers';
 import { FrontMatterParser } from '../parsers';
 import { Notifications } from '../helpers/Notifications';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
 
 export class Settings {
   /**
@@ -13,21 +15,19 @@ export class Settings {
    * @param type
    */
   public static async create(type: TaxonomyType) {
+    const taxonomy = type === TaxonomyType.Tag ? 'tag' : 'category';
+
     const newOption = await vscode.window.showInputBox({
-      prompt: `Insert the value of the ${
-        type === TaxonomyType.Tag ? 'tag' : 'category'
-      } that you want to add to your configuration.`,
-      placeHolder: `Name of the ${type === TaxonomyType.Tag ? 'tag' : 'category'}`,
+      prompt: l10n.t(LocalizationKey.commandsSettingsCreateInputPrompt, taxonomy),
+      placeHolder: l10n.t(LocalizationKey.commandsSettingsCreateInputPlaceholder, taxonomy),
       ignoreFocusOut: true
     });
 
     if (newOption) {
-      let options = (await TaxonomyHelper.get(type)) || [];
+      const options = (await TaxonomyHelper.get(type)) || [];
 
       if (options.find((o) => o === newOption)) {
-        Notifications.info(
-          `The provided ${type === TaxonomyType.Tag ? 'tag' : 'category'} already exists.`
-        );
+        Notifications.warning(l10n.t(LocalizationKey.commandsSettingsCreateWarning, taxonomy));
         return;
       }
 
@@ -35,15 +35,16 @@ export class Settings {
       TaxonomyHelper.update(type, options);
 
       // Ask if the new term needs to be added to the page
-      const addToPage = await vscode.window.showQuickPick(['yes', 'no'], {
-        canPickMany: false,
-        placeHolder: `Do you want to add the new ${
-          type === TaxonomyType.Tag ? 'tag' : 'category'
-        } to the page?`,
-        ignoreFocusOut: true
-      });
+      const addToPage = await vscode.window.showQuickPick(
+        [l10n.t(LocalizationKey.commonYes), l10n.t(LocalizationKey.commonNo)],
+        {
+          canPickMany: false,
+          placeHolder: l10n.t(LocalizationKey.commandsSettingsCreateQuickPickPlaceholder, taxonomy),
+          ignoreFocusOut: true
+        }
+      );
 
-      if (addToPage && addToPage === 'yes') {
+      if (addToPage && addToPage === l10n.t(LocalizationKey.commonYes)) {
         const editor = vscode.window.activeTextEditor;
         if (!editor) {
           return;
@@ -54,7 +55,7 @@ export class Settings {
           return;
         }
 
-        const matterProp: string = type === TaxonomyType.Tag ? 'tags' : 'categories';
+        const matterProp: string = taxonomy;
         // Add the selected options to the options array
         if (article.data[matterProp]) {
           const propData: string[] = article.data[matterProp];
@@ -83,7 +84,7 @@ export class Settings {
     vscode.window.withProgress(
       {
         location: vscode.ProgressLocation.Notification,
-        title: `${EXTENSION_NAME}: exporting tags and categories`,
+        title: l10n.t(LocalizationKey.commandsSettingsExportProgressTitle, EXTENSION_NAME),
         cancellable: false
       },
       async (progress) => {
@@ -146,7 +147,11 @@ export class Settings {
 
         // Done
         Notifications.info(
-          `Export completed. Tags: ${crntTags.length} - Categories: ${crntCategories.length}.`
+          l10n.t(
+            LocalizationKey.commandsSettingsExportProgressSuccess,
+            crntTags.length,
+            crntCategories.length
+          )
         );
       }
     );
@@ -157,8 +162,8 @@ export class Settings {
    */
   public static async remap() {
     const taxType = await vscode.window.showQuickPick(['Tag', 'Category'], {
-      title: `Remap`,
-      placeHolder: `What do you want to remap?`,
+      title: l10n.t(LocalizationKey.commandsSettingsRemapQuickpickTitle),
+      placeHolder: l10n.t(LocalizationKey.commandsSettingsRemapQuickpickPlaceholder),
       canPickMany: false,
       ignoreFocusOut: true
     });
@@ -168,15 +173,18 @@ export class Settings {
     }
 
     const type = taxType === 'Tag' ? TaxonomyType.Tag : TaxonomyType.Category;
+    const taxonomy = type === TaxonomyType.Tag ? 'tags' : 'categories';
     const options = (await TaxonomyHelper.get(type)) || [];
 
     if (!options || options.length === 0) {
-      Notifications.info(`No ${type === TaxonomyType.Tag ? 'tags' : 'categories'} configured.`);
+      Notifications.warning(
+        l10n.t(LocalizationKey.commandsSettingsRemapNoTaxonomyWarning, taxonomy)
+      );
       return;
     }
 
     const selectedOption = await vscode.window.showQuickPick(options, {
-      placeHolder: `Select your ${type === TaxonomyType.Tag ? 'tags' : 'categories'} to insert`,
+      placeHolder: l10n.t(LocalizationKey.commandsSettingsRemapSelectTaxonomyPlaceholder, taxonomy),
       canPickMany: false,
       ignoreFocusOut: true
     });
@@ -186,19 +194,23 @@ export class Settings {
     }
 
     const newOptionValue = await vscode.window.showInputBox({
-      prompt: `Specify the value of the ${
-        type === TaxonomyType.Tag ? 'tag' : 'category'
-      } with which you want to remap "${selectedOption}". Leave the input <blank> if you want to remove the ${
-        type === TaxonomyType.Tag ? 'tag' : 'category'
-      } from all articles.`,
-      placeHolder: `Name of the ${type === TaxonomyType.Tag ? 'tag' : 'category'}`,
+      prompt: l10n.t(
+        LocalizationKey.commandsSettingsRemapNewOptionInputPrompt,
+        taxonomy,
+        selectedOption
+      ),
+      placeHolder: l10n.t(LocalizationKey.commandsSettingsRemapNewOptionInputPlaceholder, taxonomy),
       ignoreFocusOut: true
     });
 
     if (!newOptionValue) {
       const deleteAnswer = await vscode.window.showQuickPick(['yes', 'no'], {
         canPickMany: false,
-        placeHolder: `Delete ${selectedOption} ${type === TaxonomyType.Tag ? 'tag' : 'category'}?`,
+        placeHolder: l10n.t(
+          LocalizationKey.commandsSettingsRemapDeletePlaceholder,
+          selectedOption,
+          taxonomy
+        ),
         ignoreFocusOut: true
       });
       if (deleteAnswer === 'no') {

src/commands/StatusListener.ts

@@ -1,6 +1,7 @@
 import { ParsedFrontMatter } from './../parsers/FrontMatterParser';
 import {
   CONTEXT,
+  EXTENSION_NAME,
   NOTIFICATION_TYPE,
   SETTING_SEO_DESCRIPTION_FIELD,
   SETTING_SEO_DESCRIPTION_LENGTH,
@@ -16,6 +17,9 @@ import { DataListener } from '../listeners/panel';
 import { commands } from 'vscode';
 import { Field } from '../models';
 import { Preview } from './Preview';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
+import { i18n } from './i18n';
 
 export class StatusListener {
   /**
@@ -39,6 +43,10 @@ export class StatusListener {
       try {
         commands.executeCommand('setContext', CONTEXT.isValidFile, true);
 
+        // Check i18n
+        const isI18nDefault = await i18n.isDefaultLanguage(document.uri.fsPath);
+        commands.executeCommand('setContext', CONTEXT.isI18nDefault, isI18nDefault);
+
         const article = editor
           ? ArticleHelper.getFrontMatter(editor)
           : await ArticleHelper.getFrontMatterByPath(document.uri.fsPath);
@@ -80,6 +88,7 @@ export class StatusListener {
       }
     } else {
       commands.executeCommand('setContext', CONTEXT.isValidFile, false);
+      commands.executeCommand('setContext', CONTEXT.isI18nDefault, false);
 
       const panel = PanelProvider.getInstance();
       if (panel && panel.visible) {
@@ -135,12 +144,13 @@ export class StatusListener {
 
           const diagnostic: vscode.Diagnostic = {
             code: '',
-            message: `This ${fields
-              .map((f) => f.name)
-              .join('/')} field is required to contain a value.`,
+            message: l10n.t(
+              LocalizationKey.commandsStatusListenerVerifyRequiredFieldsDiagnosticEmptyField,
+              fields.map((f) => f.name).join('/')
+            ),
             range: new vscode.Range(posStart, posEnd),
             severity: vscode.DiagnosticSeverity.Error,
-            source: 'Front Matter'
+            source: EXTENSION_NAME
           };
 
           requiredDiagnostics.push(diagnostic);
@@ -158,7 +168,10 @@ export class StatusListener {
         Notifications.showIfNotDisabled(
           NOTIFICATION_TYPE.requiredFieldValidation,
           'ERROR_ONCE',
-          `The following fields are required to contain a value: ${fieldsToReport.join(', ')}`
+          l10n.t(
+            LocalizationKey.commandsStatusListenerVerifyRequiredFieldsNotificationError,
+            fieldsToReport.join(', ')
+          )
         );
       }
     }

src/commands/Template.ts

@@ -16,6 +16,8 @@ import { PagesListener } from '../listeners/dashboard';
 import { extname } from 'path';
 import { Telemetry } from '../helpers/Telemetry';
 import { writeFileAsync, copyFileAsync } from '../utils';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
 
 export class Template {
   /**
@@ -31,27 +33,30 @@ export class Template {
       const clonedArticle = Object.assign({}, article);
 
       const titleValue = await vscode.window.showInputBox({
-        title: `Template title`,
-        prompt: `What name would you like to give your template?`,
-        placeHolder: `article`,
+        title: l10n.t(LocalizationKey.commandsTemplateGenerateInputTitle),
+        prompt: l10n.t(LocalizationKey.commandsTemplateGenerateInputPrompt),
+        placeHolder: l10n.t(LocalizationKey.commandsTemplateGenerateInputPlaceholder),
         ignoreFocusOut: true
       });
 
       if (!titleValue) {
-        Notifications.warning(`You did not specify a template title.`);
+        Notifications.warning(l10n.t(LocalizationKey.commandsTemplateGenerateNoTitleWarning));
         return;
       }
 
-      const keepContents = await vscode.window.showQuickPick(['yes', 'no'], {
-        title: `Keep contents`,
-        canPickMany: false,
-        placeHolder: `Do you want to keep the contents for the template?`,
-        ignoreFocusOut: true
-      });
+      const keepContents = await vscode.window.showQuickPick(
+        [l10n.t(LocalizationKey.commonYes), l10n.t(LocalizationKey.commonNo)],
+        {
+          title: l10n.t(LocalizationKey.commandsTemplateGenerateKeepContentsTitle),
+          placeHolder: l10n.t(LocalizationKey.commandsTemplateGenerateKeepContentsPlaceholder),
+          canPickMany: false,
+          ignoreFocusOut: true
+        }
+      );
 
       if (!keepContents) {
         Notifications.warning(
-          `You did not pick any of the options for keeping the template its content.`
+          l10n.t(LocalizationKey.commandsTemplateGenerateKeepContentsNoOptionWarning)
         );
         return;
       }
@@ -60,14 +65,16 @@ export class Template {
       const templatePath = Project.templatePath();
       if (templatePath) {
         const fileContents = ArticleHelper.stringifyFrontMatter(
-          keepContents === 'no' ? '' : clonedArticle.content,
+          keepContents === l10n.t(LocalizationKey.commonNo) ? '' : clonedArticle.content,
           clonedArticle.data
         );
 
         const templateFile = path.join(templatePath.fsPath, `${titleValue}.${fileType}`);
         await writeFileAsync(templateFile, fileContents, { encoding: 'utf-8' });
 
-        Notifications.info(`Template created and is now available in your ${folder} folder.`);
+        Notifications.info(
+          l10n.t(LocalizationKey.commandsTemplateGenerateKeepContentsSuccess, folder)
+        );
       }
     }
   }
@@ -79,7 +86,7 @@ export class Template {
     const folder = Settings.get<string>(SETTING_TEMPLATES_FOLDER);
 
     if (!folder) {
-      Notifications.warning(`No templates found.`);
+      Notifications.warning(l10n.t(LocalizationKey.commandsTemplateGetTemplatesWarning));
       return;
     }
 
@@ -96,26 +103,28 @@ export class Template {
     const contentTypes = ContentType.getAll();
 
     if (!folderPath) {
-      Notifications.warning(`Incorrect project folder path retrieved.`);
+      Notifications.warning(l10n.t(LocalizationKey.commandsTemplateCreateFolderPathWarning));
       return;
     }
 
     const templates = await Template.getTemplates();
     if (!templates || templates.length === 0) {
-      Notifications.warning(`No templates found.`);
+      Notifications.warning(l10n.t(LocalizationKey.commandsTemplateCreateNoTemplatesWarning));
       return;
     }
 
     const selectedTemplate = await vscode.window.showQuickPick(
       templates.map((t) => path.basename(t.fsPath)),
       {
-        title: `Select a template`,
-        placeHolder: `Select the content template to use`,
+        title: l10n.t(LocalizationKey.commandsTemplateCreateSelectTemplateTitle),
+        placeHolder: l10n.t(LocalizationKey.commandsTemplateCreateSelectTemplatePlaceholder),
         ignoreFocusOut: true
       }
     );
     if (!selectedTemplate) {
-      Notifications.warning(`No template selected.`);
+      Notifications.warning(
+        l10n.t(LocalizationKey.commandsTemplateCreateSelectTemplateNoTemplateWarning)
+      );
       return;
     }
 
@@ -127,7 +136,9 @@ export class Template {
     // Start the template read
     const template = templates.find((t) => t.fsPath.endsWith(selectedTemplate));
     if (!template) {
-      Notifications.warning(`Content template could not be found.`);
+      Notifications.warning(
+        l10n.t(LocalizationKey.commandsTemplateCreateSelectTemplateNotFoundWarning)
+      );
       return;
     }
 
@@ -152,9 +163,9 @@ export class Template {
     await copyFileAsync(template.fsPath, newFilePath);
 
     // Update the properties inside the template
-    let frontMatter = await ArticleHelper.getFrontMatterByPath(newFilePath);
+    const frontMatter = await ArticleHelper.getFrontMatterByPath(newFilePath);
     if (!frontMatter) {
-      Notifications.warning(`Something failed when retrieving the newly created file.`);
+      Notifications.warning(l10n.t(LocalizationKey.commonError));
       return;
     }
 
@@ -165,11 +176,15 @@ export class Template {
         newFilePath
       );
 
-      frontMatter = Article.updateDate(frontMatter);
+      const article = Article.updateDate(frontMatter);
+
+      if (!article) {
+        return;
+      }
 
       await writeFileAsync(
         newFilePath,
-        ArticleHelper.stringifyFrontMatter(frontMatter.content, frontMatter.data),
+        ArticleHelper.stringifyFrontMatter(article.content, article.data),
         { encoding: 'utf8' }
       );
 
@@ -181,7 +196,7 @@ export class Template {
       vscode.window.showTextDocument(txtDoc);
     }
 
-    Notifications.info(`Your new content has been created.`);
+    Notifications.info(l10n.t(LocalizationKey.commandsTemplateCreateSuccess));
 
     Telemetry.send(TelemetryEvent.createContentFromTemplate);
 

src/commands/Wysiwyg.ts

@@ -1,6 +1,8 @@
 import { commands, window, Selection, QuickPickItem, TextEditor } from 'vscode';
 import { COMMAND_NAME, CONTEXT, SETTING_CONTENT_WYSIWYG } from '../constants';
 import { Settings } from '../helpers';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
 
 enum MarkupType {
   bold = 1,
@@ -81,45 +83,45 @@ export class Wysiwyg {
       commands.registerCommand(COMMAND_NAME.options, async () => {
         const qpItems: QuickPickItem[] = [
           {
-            label: '$(list-unordered) Unordered list',
-            detail: 'Add an unordered list',
+            label: `$(list-unordered) ${LocalizationKey.commandsWysiwygCommandUnorderedListLabel}`,
+            detail: LocalizationKey.commandsWysiwygCommandUnorderedListDetail,
             alwaysShow: true
           },
           {
-            label: '$(list-ordered) Ordered list',
-            detail: 'Add an ordered list',
+            label: `$(list-ordered) ${LocalizationKey.commandsWysiwygCommandOrderedListLabel}`,
+            detail: LocalizationKey.commandsWysiwygCommandOrderedListDetail,
             alwaysShow: true
           },
           {
-            label: '$(tasklist) Task list',
-            detail: 'Add a task list',
+            label: `$(tasklist) ${LocalizationKey.commandsWysiwygCommandTaskListLabel}`,
+            detail: LocalizationKey.commandsWysiwygCommandTaskListDetail,
             alwaysShow: true
           },
           {
-            label: '$(code) Code',
-            detail: 'Add inline code snippet',
+            label: `$(code) ${LocalizationKey.commandsWysiwygCommandCodeLabel}`,
+            detail: LocalizationKey.commandsWysiwygCommandCodeDetail,
             alwaysShow: true
           },
           {
-            label: '$(symbol-namespace) Code block',
-            detail: 'Add a code block',
+            label: `$(symbol-namespace) ${LocalizationKey.commandsWysiwygCommandCodeblockLabel}`,
+            detail: LocalizationKey.commandsWysiwygCommandCodeblockDetail,
             alwaysShow: true
           },
           {
-            label: '$(quote) Blockquote',
-            detail: 'Add a blockquote',
+            label: `$(quote) ${LocalizationKey.commandsWysiwygCommandBlockquoteLabel}`,
+            detail: LocalizationKey.commandsWysiwygCommandBlockquoteDetail,
             alwaysShow: true
           },
           {
-            label: '$(symbol-text) Strikethrough',
-            detail: 'Add a strikethrough',
+            label: `$(symbol-text) ${LocalizationKey.commandsWysiwygCommandStrikethroughLabel}`,
+            detail: LocalizationKey.commandsWysiwygCommandStrikethroughDetail,
             alwaysShow: true
           }
         ];
 
         const option = await window.showQuickPick([...qpItems], {
-          title: 'WYSIWYG Options',
-          placeHolder: 'Which type of markup would you like to insert?',
+          title: l10n.t(LocalizationKey.commandsWysiwygQuickPickTitle),
+          placeHolder: l10n.t(LocalizationKey.commandsWysiwygQuickPickPlaceholder),
           canPickMany: false,
           ignoreFocusOut: true
         });
@@ -209,17 +211,17 @@ export class Wysiwyg {
     const linkText = hasTextSelection ? editor.document.getText(selection) : '';
 
     const link = await window.showInputBox({
-      title: 'WYSIWYG Hyperlink',
-      placeHolder: 'Enter the URL',
-      prompt: 'Enter the URL',
+      title: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkHyperlinkInputTitle),
+      placeHolder: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkHyperlinkInputPrompt),
+      prompt: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkHyperlinkInputPrompt),
       value: linkText,
       ignoreFocusOut: true
     });
 
     const text = await window.showInputBox({
-      title: 'WYSIWYG Text',
-      prompt: 'Enter the text for the hyperlink',
-      placeHolder: 'Enter the text for the hyperlink',
+      title: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkTextInputTitle),
+      prompt: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkTextInputPrompt),
+      placeHolder: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkTextInputPrompt),
       value: linkText,
       ignoreFocusOut: true
     });
@@ -278,9 +280,9 @@ export class Wysiwyg {
         const headingLvl = await window.showQuickPick(
           ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6'],
           {
-            title: 'Heading Level',
+            title: l10n.t(LocalizationKey.commandsWysiwygInsertTextHeadingInputTitle),
+            placeHolder: l10n.t(LocalizationKey.commandsWysiwygInsertTextHeadingInputPlaceholder),
             canPickMany: false,
-            placeHolder: 'Which heading level do you want to insert?',
             ignoreFocusOut: true
           }
         );

src/commands/i18n.ts

@@ -0,0 +1,517 @@
+import { ProgressLocation, Uri, commands, window, workspace } from 'vscode';
+import {
+  ArticleHelper,
+  ContentType,
+  Extension,
+  FrameworkDetector,
+  Logger,
+  Notifications,
+  Settings,
+  openFileInEditor,
+  parseWinPath
+} from '../helpers';
+import { COMMAND_NAME, ExtensionState, SETTING_CONTENT_I18N } from '../constants';
+import { ContentFolder, Field, I18nConfig, ContentType as IContentType } from '../models';
+import { join, parse } from 'path';
+import { existsAsync } from '../utils';
+import { Folders } from '.';
+import { ParsedFrontMatter } from '../parsers';
+import { PagesListener } from '../listeners/dashboard';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../localization';
+
+export class i18n {
+  private static processedFiles: {
+    [filePath: string]: { dir: string; filename: string; isPageBundle: boolean };
+  } = {};
+
+  /**
+   * Registers the i18n commands.
+   */
+  public static register() {
+    const subscriptions = Extension.getInstance().subscriptions;
+
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.i18n.create, i18n.create));
+
+    i18n.clearFiles();
+  }
+
+  /**
+   * Clear the processed files
+   */
+  public static clearFiles() {
+    i18n.processedFiles = {};
+  }
+
+  /**
+   * Retrieves the I18nConfig settings from the application.
+   * @returns An array of I18nConfig objects if settings are found, otherwise undefined.
+   */
+  public static async getSettings(filePath: string): Promise<I18nConfig[] | undefined> {
+    if (!filePath) {
+      return;
+    }
+
+    const i18nSettings = Settings.get<I18nConfig[]>(SETTING_CONTENT_I18N);
+    let pageFolder = Folders.getPageFolderByFilePath(filePath);
+    if (!pageFolder) {
+      pageFolder = await i18n.getPageFolder(filePath);
+    }
+
+    if (!pageFolder || !pageFolder.locales) {
+      return i18nSettings;
+    }
+
+    return pageFolder.locales;
+  }
+
+  /**
+   * Checks if the given file path corresponds to the default language.
+   * @param filePath - The file path to check.
+   * @returns True if the file path corresponds to the default language, false otherwise.
+   */
+  public static async isDefaultLanguage(filePath: string): Promise<boolean> {
+    const i18nSettings = await i18n.getSettings(filePath);
+    if (!i18nSettings) {
+      return false;
+    }
+
+    const pageFolder = Folders.getPageFolderByFilePath(filePath);
+    if (!pageFolder || !pageFolder.defaultLocale) {
+      return false;
+    }
+
+    const fileInfo = await i18n.getFileInfo(filePath);
+
+    if (pageFolder.path) {
+      let pageFolderPath = parseWinPath(pageFolder.path);
+      if (!pageFolderPath.endsWith('/')) {
+        pageFolderPath += '/';
+      }
+
+      return (
+        parseWinPath(fileInfo.dir).toLowerCase() === parseWinPath(pageFolderPath).toLowerCase()
+      );
+    }
+
+    return false;
+  }
+
+  /**
+   * Retrieves the I18nConfig for a given file path.
+   * @param filePath - The path of the file.
+   * @returns The I18nConfig object if found, otherwise undefined.
+   */
+  public static async getLocale(filePath: string): Promise<I18nConfig | undefined> {
+    const i18nSettings = await i18n.getSettings(filePath);
+    if (!i18nSettings) {
+      return;
+    }
+
+    let pageFolder = Folders.getPageFolderByFilePath(filePath);
+
+    const fileInfo = await i18n.getFileInfo(filePath);
+
+    if (pageFolder && pageFolder.defaultLocale) {
+      let pageFolderPath = parseWinPath(pageFolder.path);
+      if (!pageFolderPath.endsWith('/')) {
+        pageFolderPath += '/';
+      }
+
+      if (
+        pageFolder.path &&
+        parseWinPath(fileInfo.dir).toLowerCase() === parseWinPath(pageFolderPath).toLowerCase()
+      ) {
+        return i18nSettings.find((i18n) => i18n.locale === pageFolder?.defaultLocale);
+      }
+    }
+
+    pageFolder = await i18n.getPageFolder(filePath);
+    if (!pageFolder) {
+      return;
+    }
+
+    for (const locale of i18nSettings) {
+      if (locale.path && pageFolder.defaultLocale !== locale.locale) {
+        const translation = join(pageFolder.path, locale.path, fileInfo.filename);
+        if (parseWinPath(translation).toLowerCase() === parseWinPath(filePath).toLowerCase()) {
+          return locale;
+        }
+      }
+    }
+
+    return;
+  }
+
+  /**
+   * Retrieves translations for a given file path.
+   * @param filePath - The path of the file for which translations are requested.
+   * @returns A promise that resolves to an object containing translations for each locale, or undefined if i18n settings are not available.
+   */
+  public static async getTranslations(filePath: string): Promise<
+    | {
+        [locale: string]: {
+          locale: I18nConfig;
+          path: string;
+        };
+      }
+    | undefined
+  > {
+    const i18nSettings = await i18n.getSettings(filePath);
+    if (!i18nSettings) {
+      return;
+    }
+
+    const translations: {
+      [locale: string]: {
+        locale: I18nConfig;
+        path: string;
+      };
+    } = {};
+
+    let pageFolder = Folders.getPageFolderByFilePath(filePath);
+    const fileInfo = await i18n.getFileInfo(filePath);
+
+    if (pageFolder && pageFolder.defaultLocale) {
+      for (const i18n of i18nSettings) {
+        const translation = join(pageFolder.path, i18n.path || '', fileInfo.filename);
+        if (await existsAsync(translation)) {
+          translations[i18n.locale] = {
+            locale: i18n,
+            path: translation
+          };
+        }
+      }
+      return translations;
+    }
+
+    pageFolder = await i18n.getPageFolder(filePath);
+    if (!pageFolder) {
+      return translations;
+    }
+
+    for (const i18n of i18nSettings) {
+      const translation = join(pageFolder.path, i18n.path || '', fileInfo.filename);
+      if (await existsAsync(translation)) {
+        translations[i18n.locale] = {
+          locale: i18n,
+          path: translation
+        };
+      }
+    }
+
+    return translations;
+  }
+
+  /**
+   * Creates a new content file for a specific locale based on the i18n configuration.
+   * If a file path is provided, the new content file will be created in the same directory.
+   * If no file path is provided, the active file in the editor will be used.
+   * @param filePath The path of the file where the new content file should be created.
+   */
+  private static async create(fileUri?: Uri | string) {
+    if (!fileUri) {
+      const filePath = ArticleHelper.getActiveFile();
+      fileUri = filePath ? Uri.file(filePath) : undefined;
+    }
+
+    if (!fileUri) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoFileSelected));
+      return;
+    }
+
+    if (typeof fileUri === 'string') {
+      fileUri = Uri.file(fileUri);
+    }
+
+    const i18nSettings = await i18n.getSettings(fileUri.fsPath);
+    if (!i18nSettings) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoConfig));
+      return;
+    }
+
+    const isDefaultLanguage = await i18n.isDefaultLanguage(fileUri.fsPath);
+    if (!isDefaultLanguage) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNotDefaultLocale));
+      return;
+    }
+
+    const locale = await window.showQuickPick(
+      i18nSettings.filter((i18n) => i18n.path).map((i18n) => i18n.title || i18n.locale),
+      {
+        title: l10n.t(LocalizationKey.commandsI18nCreateQuickPickTitle),
+        placeHolder: l10n.t(LocalizationKey.commandsI18nCreateQuickPickPlaceHolder),
+        ignoreFocusOut: true
+      }
+    );
+
+    if (!locale) {
+      return;
+    }
+
+    const selectedI18n = i18nSettings.find(
+      (i18n) => i18n.title === locale || i18n.locale === locale
+    );
+    if (!selectedI18n || !selectedI18n.path) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoConfig));
+      return;
+    }
+
+    let article = await ArticleHelper.getFrontMatterByPath(fileUri.fsPath);
+    if (!article) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoFile));
+      return;
+    }
+
+    const contentType = ArticleHelper.getContentType(article);
+    if (!contentType) {
+      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoContentType));
+      return;
+    }
+
+    // Get the directory of the file
+    const fileInfo = parse(fileUri.fsPath);
+    let dir = fileInfo.dir;
+    let pageBundleDir = '';
+
+    if (await ArticleHelper.isPageBundle(fileUri.fsPath)) {
+      dir = ArticleHelper.getPageFolderFromBundlePath(fileUri.fsPath);
+      pageBundleDir = fileUri.fsPath.replace(dir, '');
+      pageBundleDir = join(parse(pageBundleDir).dir);
+    }
+
+    const i18nDir = join(dir, selectedI18n.path, pageBundleDir);
+
+    if (!(await existsAsync(i18nDir))) {
+      await workspace.fs.createDirectory(Uri.file(i18nDir));
+    }
+
+    article = await i18n.updateFrontMatter(
+      article,
+      fileUri.fsPath,
+      contentType,
+      selectedI18n,
+      i18nDir
+    );
+
+    const newFilePath = join(i18nDir, fileInfo.base);
+    if (await existsAsync(newFilePath)) {
+      Notifications.error(l10n.t(LocalizationKey.commandsI18nCreateErrorFileExists));
+      return;
+    }
+
+    const sourceLocale = await i18n.getLocale(fileUri.fsPath);
+    if (sourceLocale?.locale) {
+      article = await i18n.translate(article, sourceLocale, selectedI18n);
+    }
+
+    const newFileUri = Uri.file(newFilePath);
+    await workspace.fs.writeFile(
+      newFileUri,
+      Buffer.from(ArticleHelper.stringifyFrontMatter(article.content, article.data))
+    );
+
+    await openFileInEditor(newFilePath);
+
+    PagesListener.refresh();
+
+    Notifications.info(
+      l10n.t(
+        LocalizationKey.commandsI18nCreateSuccessCreated,
+        selectedI18n.title || selectedI18n.locale
+      )
+    );
+  }
+
+  /**
+   * Translates the given article from the source locale to the target locale using DeepL translation service.
+   * @param article - The article to be translated.
+   * @param sourceLocale - The source locale configuration.
+   * @param targetLocale - The target locale configuration.
+   * @returns A promise that resolves to the translated article.
+   */
+  private static async translate(
+    article: ParsedFrontMatter,
+    sourceLocale: I18nConfig,
+    targetLocale: I18nConfig
+  ) {
+    return new Promise<ParsedFrontMatter>(async (resolve) => {
+      const authKey = await Extension.getInstance().getSecret(ExtensionState.Secrets.DeeplApiKey);
+      if (!authKey) {
+        resolve(article);
+        return;
+      }
+
+      await window.withProgress(
+        {
+          location: ProgressLocation.Notification,
+          title: l10n.t(LocalizationKey.commandsI18nTranslateProgressTitle),
+          cancellable: false
+        },
+        async () => {
+          const title = article.data.title;
+          const description = article.data.description;
+          const content = article.content;
+
+          try {
+            const body = JSON.stringify({
+              text: [title, description, content],
+              source_lang: sourceLocale.locale,
+              target_lang: targetLocale.locale
+            });
+
+            let host = authKey.endsWith(':fx') ? 'api-free.deepl.com' : 'api.deepl.com';
+
+            const response = await fetch(`https://${host}/v2/translate`, {
+              method: 'POST',
+              headers: {
+                Authorization: `DeepL-Auth-Key ${authKey}`,
+                'User-Agent': `FrontMatterCMS/${Extension.getInstance().version}`,
+                'Content-Type': 'application/json',
+                'content-length': body.length.toString(),
+                Accept: 'application/json'
+              },
+              body
+            });
+
+            if (!response.ok) {
+              throw new Error(`DeepL: ${response.statusText}`);
+            }
+
+            const data = await response.json();
+            if (!data.translations || data.translations.length < 3) {
+              throw new Error('DeepL: Invalid response');
+            }
+
+            article.data.title = data.translations[0].text;
+            article.data.description = data.translations[1].text;
+            article.content = data.translations[2].text;
+          } catch (error) {
+            Notifications.error(`${(error as Error).message}`);
+          }
+
+          resolve(article);
+        }
+      );
+    });
+  }
+
+  /**
+   * Retrieves the filename and directory information from the given file path.
+   * If the file is a page bundle, the directory will be adjusted accordingly.
+   * @param filePath - The path of the file.
+   * @returns An object containing the filename and directory.
+   */
+  private static async getFileInfo(filePath: string): Promise<{ filename: string; dir: string }> {
+    if (i18n.processedFiles[filePath]) {
+      return i18n.processedFiles[filePath];
+    }
+
+    const fileInfo = parse(filePath);
+    let filename = fileInfo.base;
+    let dir = fileInfo.dir;
+
+    const isPageBundle = await ArticleHelper.isPageBundle(filePath);
+    if (isPageBundle) {
+      dir = ArticleHelper.getPageFolderFromBundlePath(filePath);
+      filename = join(parseWinPath(filePath).replace(parseWinPath(dir), ''));
+    }
+
+    if (!dir.endsWith('/')) {
+      dir += '/';
+    }
+
+    i18n.processedFiles[filePath] = {
+      isPageBundle,
+      filename,
+      dir
+    };
+
+    return i18n.processedFiles[filePath];
+  }
+
+  /**
+   * Retrieves the page folder for a given file path.
+   *
+   * @param filePath - The path of the file.
+   * @returns A promise that resolves to the ContentFolder object representing the page folder, or undefined if not found.
+   */
+  private static async getPageFolder(filePath: string): Promise<ContentFolder | undefined> {
+    const folders = Folders.get();
+
+    const localeFolders = folders?.filter((folder) => folder.defaultLocale);
+    if (!localeFolders) {
+      return;
+    }
+
+    const fileInfo = await i18n.getFileInfo(filePath);
+
+    for (const folder of localeFolders) {
+      const defaultFile = join(folder.path, fileInfo.filename);
+      if (await existsAsync(defaultFile)) {
+        return folder;
+      }
+    }
+  }
+
+  /**
+   * Updates the front matter of an article with internationalization (i18n) support.
+   *
+   * @param article - The parsed front matter of the article.
+   * @param filePath - The path of the file containing the front matter.
+   * @param contentType - The content type of the article.
+   * @param i18nConfig - The configuration for internationalization.
+   * @param i18nDir - The directory where the i18n files are located.
+   * @returns A Promise that resolves to the updated parsed front matter.
+   */
+  private static async updateFrontMatter(
+    article: ParsedFrontMatter,
+    filePath: string,
+    contentType: IContentType,
+    i18nConfig: I18nConfig,
+    i18nDir: string
+  ): Promise<ParsedFrontMatter> {
+    const imageFields = ContentType.findFieldsByTypeDeep(contentType.fields, 'image');
+    if (imageFields.length > 0) {
+      article.data = await i18n.processImageFields(article.data, filePath, imageFields, i18nDir);
+    }
+
+    return article;
+  }
+
+  /**
+   * Processes the image fields in the provided data object.
+   * Replaces the image field values with the relative path to the image file.
+   *
+   * @param data - The data object containing the field values.
+   * @param filePath - The absolute file path of the data object.
+   * @param fields - The array of field arrays to process.
+   * @param i18nDir - The directory path for internationalization.
+   * @returns The updated data object with image field values replaced by relative paths.
+   */
+  private static async processImageFields(
+    data: { [key: string]: any },
+    filePath: string,
+    fields: Field[][],
+    i18nDir: string
+  ) {
+    for (const field of fields) {
+      if (!field) {
+        continue;
+      }
+
+      for (const f of field) {
+        if (f.type === 'image') {
+          const value = data[f.name];
+          if (value) {
+            let imgPath = FrameworkDetector.getAbsPathByFile(value, filePath);
+            imgPath = FrameworkDetector.getRelPathByFileDir(imgPath, i18nDir);
+            data[f.name] = imgPath;
+          }
+        }
+      }
+    }
+
+    return data;
+  }
+}

src/components/shadcn/Dropdown.tsx

@@ -0,0 +1,149 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { cn } from "../../utils/cn"
+import { ChevronRightIcon } from "@heroicons/react/24/outline"
+
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-[var(--vscode-list-hoverBackground)] data-[state=open]:bg-[var(--vscode-list-hoverBackground)]",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded border border-[var(--frontmatter-border)] bg-[var(--vscode-sideBar-background)] p-1 text-[var(--vscode-editor-foreground)] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] rounded border border-[var(--frontmatter-border)] bg-[var(--vscode-sideBar-background)] p-1 text-[var(--vscode-editor-foreground)] shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-96 overflow-auto",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-[var(--vscode-list-hoverBackground)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer disabled:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-[var(--frontmatter-border)]", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+}

src/components/uniforms-frontmatter/ListAddField.tsx

@@ -1,4 +1,4 @@
-import { PlusIcon } from '@heroicons/react/outline';
+import { PlusIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps, joinName, useField } from 'uniforms';
 import './ListAddField.css';

src/components/uniforms-frontmatter/ListDelField.tsx

@@ -1,4 +1,4 @@
-import { TrashIcon } from '@heroicons/react/outline';
+import { TrashIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps, joinName, useField } from 'uniforms';
 import './ListDelField.css';
@@ -29,7 +29,7 @@ function ListDel({ disabled, name, readOnly, ...props }: ListDelFieldProps) {
 
   return (
     <span
-      className="autoform__list_del_field"
+      className="autoform__list_del_field mb-1"
       {...filterDOMProps(props)}
       onClick={onAction}
       onKeyDown={onAction}

src/components/uniforms-frontmatter/LongTextField.tsx

@@ -26,6 +26,7 @@ function LongText({
       <LabelField label={label} id={id} required={props.required} />
 
       <textarea
+        className={`block w-full py-2 pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
         disabled={disabled}
         id={id}
         name={name}

src/components/uniforms-frontmatter/TextField.tsx

@@ -28,6 +28,7 @@ function Text({
       <LabelField label={label} id={id} required={props.required} />
 
       <input
+        className='block w-full py-2 pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0'
         autoComplete={autoComplete}
         disabled={disabled}
         id={id}

src/constants/ContentType.ts

@@ -3,7 +3,7 @@ import { ContentType } from './../models/PanelSettings';
 export const DEFAULT_CONTENT_TYPE_NAME = 'default';
 
 export const DEFAULT_CONTENT_TYPE: ContentType = {
-  name: 'default',
+  name: DEFAULT_CONTENT_TYPE_NAME,
   pageBundle: false,
   previewPath: null,
   fields: [

src/constants/Extension.ts

@@ -67,6 +67,11 @@ export const COMMAND_NAME = {
   addMissingFields: getCommandName('contenttype.addMissingFields'),
   setContentType: getCommandName('contenttype.setContentType'),
 
+  // i18n
+  i18n: {
+    create: getCommandName('i18n.create')
+  },
+
   // Project
   switchProject: getCommandName('project.switch'),
 

src/constants/ExtensionState.ts

@@ -30,5 +30,9 @@ export const ExtensionState = {
     v7_0_0: {
       dateFields: `frontMatter:Updates:v7.0.0:dateFields`
     }
+  },
+
+  Secrets: {
+    DeeplApiKey: `frontMatter:Secrets:DeeplApiKey`
   }
 };

src/constants/GeneralCommands.ts

@@ -1,13 +1,27 @@
 export const GeneralCommands = {
   toWebview: {
     setMode: 'setMode',
-    gitSyncingStart: 'gitSyncingStart',
-    gitSyncingEnd: 'gitSyncingEnd',
+    git: {
+      syncingStart: 'gitSyncingStart',
+      syncingEnd: 'gitSyncingEnd',
+      branchName: 'gitBranchName'
+    },
     setLocalization: 'setLocalization'
   },
   toVSCode: {
     openLink: 'openLink',
-    gitSync: 'gitSync',
+    git: {
+      isRepo: 'gitIsRepo',
+      sync: 'gitSync',
+      fetch: 'getFetch',
+      getBranch: 'getBranch',
+      selectBranch: 'gitSelectBranch'
+    },
+    secrets: {
+      get: 'getSecret',
+      set: 'setSecret'
+    },
+    runCommand: 'runCommand',
     getLocalization: 'getLocalization',
     openOnWebsite: 'openOnWebsite'
   }

src/constants/Git.ts

@@ -0,0 +1,3 @@
+export const GIT_CONFIG = {
+  defaultCommitMessage: 'Synced by Front Matter'
+};

src/constants/Links.ts

@@ -8,3 +8,5 @@ export const DOCUMENTATION_SETTINGS_LINK = 'https://frontmatter.codes/docs/setti
 
 export const SENTRY_LINK =
   'https://1ac45704bbe74264a7b4674bdc2abf48@o1022172.ingest.sentry.io/5988293';
+
+export const DOCS_SUBMODULES = 'https://frontmatter.codes/docs/git-integration#git-submodules';

src/constants/TelemetryEvent.ts

@@ -49,5 +49,6 @@ export const TelemetryEvent = {
   webviewTaxonomyDashboard: 'webviewTaxonomyDashboard',
 
   // Git
-  gitSync: 'gitSync'
+  gitSync: 'gitSync',
+  gitFetch: 'gitFetch'
 };

src/constants/context.ts

@@ -6,6 +6,9 @@ export const CONTEXT = {
   wysiwyg: 'frontMatter:markdown:wysiwyg',
   backer: 'frontMatter:backers:supporter',
   isValidFile: 'frontMatter:file:isValid',
+  isDevelopment: 'frontMatter:isDevelopment',
+
+  isI18nDefault: 'frontMatter:i18n:default',
 
   hasViewModes: 'frontMatter:has:modes',
 
@@ -14,5 +17,5 @@ export const CONTEXT = {
 
   isGitEnabled: 'frontMatter:git:enabled',
 
-  projectSwitchEnabled: 'frontMatter:project:switch:enabled',
+  projectSwitchEnabled: 'frontMatter:project:switch:enabled'
 };

src/constants/index.ts

@@ -7,6 +7,7 @@ export * from './ExtensionState';
 export * from './Features';
 export * from './FrameworkDetectors';
 export * from './GeneralCommands';
+export * from './Git';
 export * from './Links';
 export * from './LocalStore';
 export * from './Navigation';

src/constants/settings.ts

@@ -1,4 +1,4 @@
-export const EXTENSION_NAME = '𝖥𝗋𝗈𝗇𝗍 𝖬𝖺𝗍𝗍𝖾𝗋 𝖢𝖬𝖲';
+export const EXTENSION_NAME = 'Front Matter CMS';
 
 export const CONFIG_KEY = 'frontMatter';
 
@@ -25,10 +25,12 @@ export const SETTING_TAXONOMY_CONTENT_TYPES = 'taxonomy.contentTypes';
 
 export const SETTING_SLUG_PREFIX = 'taxonomy.slugPrefix';
 export const SETTING_SLUG_SUFFIX = 'taxonomy.slugSuffix';
+export const SETTING_SLUG_TEMPLATE = 'taxonomy.slugTemplate';
 export const SETTING_SLUG_UPDATE_FILE_NAME = 'taxonomy.alignFilename';
 
 export const SETTING_INDENT_ARRAY = 'taxonomy.indentArrays';
 export const SETTING_REMOVE_QUOTES = 'taxonomy.noPropertyValueQuotes';
+export const SETTING_QUOTE_STRINGS = 'taxonomy.quoteStringValues';
 
 export const SETTING_FRONTMATTER_TYPE = 'taxonomy.frontMatterType';
 
@@ -55,10 +57,12 @@ export const SETTING_CUSTOM_SCRIPTS = 'custom.scripts';
 
 export const SETTING_AUTO_UPDATE_DATE = 'content.autoUpdateDate';
 export const SETTING_CONTENT_PAGE_FOLDERS = 'content.pageFolders';
+export const SETTING_CONTENT_I18N = 'content.i18n';
 export const SETTING_CONTENT_STATIC_FOLDER = 'content.publicFolder';
 export const SETTING_CONTENT_FRONTMATTER_HIGHLIGHT = 'content.fmHighlight';
 export const SETTING_CONTENT_DRAFT_FIELD = 'content.draftField';
 export const SETTING_CONTENT_SORTING = 'content.sorting';
+export const SETTING_CONTENT_FILTERS = 'content.filters';
 export const SETTING_CONTENT_WYSIWYG = 'content.wysiwyg';
 export const SETTING_CONTENT_PLACEHOLDERS = 'content.placeholders';
 export const SETTING_CONTENT_SNIPPETS = 'content.snippets';
@@ -73,6 +77,7 @@ export const SETTING_CONTENT_HIDE_FRONTMATTER = 'content.hideFm';
 export const SETTING_CONTENT_HIDE_FRONTMATTER_MESSAGE = 'content.hideFmMessage';
 
 export const SETTING_MEDIA_SUPPORTED_MIMETYPES = 'media.supportedMimeTypes';
+export const SETTING_MEDIA_CONTENTTYPES = 'media.contentTypes';
 
 export const SETTING_DASHBOARD_OPENONSTART = 'dashboard.openOnStart';
 export const SETTING_DASHBOARD_CONTENT_TAGS = 'dashboard.content.cardTags';
@@ -97,6 +102,8 @@ export const SETTING_FRAMEWORK_START = 'framework.startCommand';
 export const SETTING_SITE_BASEURL = 'site.baseURL';
 
 export const SETTING_GIT_ENABLED = 'git.enabled';
+export const SETTING_GIT_DISABLED_BRANCHES = 'git.disableOnBranches';
+export const SETTING_GIT_REQUIRES_COMMIT_MSG = 'git.requiresCommitMessage';
 export const SETTING_GIT_COMMIT_MSG = 'git.commitMessage';
 export const SETTING_GIT_SUBMODULE_PULL = 'git.submodule.pull';
 export const SETTING_GIT_SUBMODULE_PUSH = 'git.submodule.push';

src/dashboardWebView/DashboardCommand.ts

@@ -1,4 +1,5 @@
 export enum DashboardCommand {
+  initializing = 'initializing',
   loading = 'loading',
   pages = 'pages',
   searchPages = 'searchPages',

src/dashboardWebView/DashboardMessage.ts

@@ -4,6 +4,7 @@ export enum DashboardMessage {
   setPageViewType = 'setPageViewType',
   getMode = 'getMode',
   showWarning = 'showWarning',
+  openConfig = 'openConfig',
 
   // Project switching
   switchProject = 'switchProject',
@@ -53,6 +54,7 @@ export enum DashboardMessage {
   insertSnippet = 'insertSnippet',
   addSnippet = 'addSnippet',
   updateSnippet = 'updateSnippet',
+  updateSnippetPlaceholders = 'updateSnippetPlaceholders',
 
   // Taxonomy dashboard
   getTaxonomyData = 'getTaxonomyData',
@@ -63,14 +65,17 @@ export enum DashboardMessage {
   createTaxonomy = 'createTaxonomy',
   importTaxonomy = 'importTaxonomy',
   moveTaxonomy = 'moveTaxonomy',
+  mapTaxonomy = 'mapTaxonomy',
 
   // Other
   getTheme = 'getTheme',
   updateSetting = 'updateSetting',
   setState = 'setState',
+  getState = 'getState',
   runCustomScript = 'runCustomScript',
   sendTelemetry = 'sendTelemetry',
   logError = 'logError',
+  showNotification = 'showNotification',
 
   // Settings
   getSettings = 'getSettings',

src/dashboardWebView/components/App.tsx

@@ -30,7 +30,7 @@ export interface IAppProps {
 export const App: React.FunctionComponent<IAppProps> = ({
   showWelcome
 }: React.PropsWithChildren<IAppProps>) => {
-  const { loading, pages, settings, localeReady } = useMessages();
+  const { pages, settings, localeReady } = useMessages();
   const view = useRecoilValue(DashboardViewSelector);
   const mode = useRecoilValue(ModeAtom);
   const [isDevMode, setIsDevMode] = useState(false);
@@ -123,7 +123,7 @@ Stack: ${componentStack}`
           <Route path={routePaths.welcome} element={<WelcomeScreen settings={settings} />} />
           <Route
             path={routePaths.contents}
-            element={<Contents pages={pages} loading={loading} />}
+            element={<Contents pages={pages} />}
           />
           <Route path={routePaths.media} element={<Media />} />
           <Route path={routePaths.snippets} element={<Snippets />} />

src/dashboardWebView/components/Chatbot/Chatbox.tsx

@@ -1,7 +1,6 @@
-import { PaperAirplaneIcon } from '@heroicons/react/outline';
+import { PaperAirplaneIcon } from '@heroicons/react/24/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';
 
@@ -13,7 +12,6 @@ export interface IChatboxProps {
 export const Chatbox: React.FunctionComponent<IChatboxProps> = ({ isLoading, onTrigger }: React.PropsWithChildren<IChatboxProps>) => {
   const [message, setMessage] = React.useState<string>("");
   const [isFocussed, setIsFocussed] = React.useState<boolean>(false);
-  const { getColors } = useThemeColors();
 
   const callAi = useCallback(() => {
     setTimeout(() => {
@@ -29,11 +27,7 @@ export const Chatbox: React.FunctionComponent<IChatboxProps> = ({ isLoading, onT
         <div className='chatbox px-4'>
           <textarea
             className={`
-          resize-none w-full outline-none border-0 pr-8 
-          ${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-none focus:border-transparent'
-            )}`}
+          resize-none w-full outline-none border-0 pr-8 border-transparent bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-none focus:border-transparent`}
             placeholder={l10n.t(LocalizationKey.dashboardChatbotChatboxPlaceholder)}
             autoFocus={true}
             value={message}

src/dashboardWebView/components/Chatbot/Feedback.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ThumbDownIcon, ThumbUpIcon } from '@heroicons/react/outline';
-import { ThumbDownIcon as ThumbDownSolidIcon, ThumbUpIcon as ThumbUpSolidIcon } from '@heroicons/react/solid';
+import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline';
+import { HandThumbDownIcon as ThumbDownSolidIcon, HandThumbUpIcon as ThumbUpSolidIcon } from '@heroicons/react/24/solid';
 import { useCallback } from 'react';
 import { useSettingsContext } from '../../providers/SettingsProvider';
 
@@ -53,7 +53,7 @@ export const Feedback: React.FunctionComponent<IFeedbackProps> = ({
           isUpVoted ? (
             <ThumbUpSolidIcon className='h-4 w-4 text-[var(--vscode-textLink-foreground)]' />
           ) : (
-            <ThumbUpIcon className='h-4 w-4' />
+            <HandThumbUpIcon className='h-4 w-4' />
           )
         }
       </button>
@@ -64,7 +64,7 @@ export const Feedback: React.FunctionComponent<IFeedbackProps> = ({
           isDownVoted ? (
             <ThumbDownSolidIcon className='h-4 w-4 text-[var(--vscode-textLink-foreground)]' />
           ) : (
-            <ThumbDownIcon className='h-4 w-4' />
+            <HandThumbDownIcon className='h-4 w-4' />
           )
         }
       </button>

src/dashboardWebView/components/Common/Button.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IButtonProps {
   secondary?: boolean;
@@ -15,19 +14,14 @@ export const Button: React.FunctionComponent<IButtonProps> = ({
   secondary,
   children
 }: React.PropsWithChildren<IButtonProps>) => {
-  const { getColors } = useThemeColors();
 
   return (
     <button
       type="button"
       className={`${className || ''
-        } inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded ${getColors(
-          'text-white dark:text-vulcan-500 disabled:bg-gray-500',
-          'disabled:opacity-50'
-        )
-        } ${secondary ?
-          getColors(`bg-red-300 hover:bg-red-400`, `bg-[var(--vscode-button-secondaryBackground)] text-[--vscode-button-secondaryForeground] hover:bg-[var(--vscode-button-secondaryHoverBackground)]`) :
-          getColors(`bg-teal-600 hover:bg-teal-700`, `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--frontmatter-button-hoverBackground)]`)
+        } inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded disabled:opacity-50 ${secondary ?
+          `bg-[var(--vscode-button-secondaryBackground)] text-[--vscode-button-secondaryForeground] hover:bg-[var(--vscode-button-secondaryHoverBackground)]` :
+          `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--frontmatter-button-hoverBackground)]`
         }
       `}
       onClick={onClick}

src/dashboardWebView/components/Common/ChoiceButton.tsx

@@ -1,10 +1,9 @@
-import { Menu } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/outline';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
-import { MenuItem, MenuItems } from '../Menu';
+import { MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';
 
 export interface IChoiceButtonProps {
   title: string;
@@ -24,62 +23,52 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
   choices,
   title
 }: React.PropsWithChildren<IChoiceButtonProps>) => {
-  const { getColors } = useThemeColors();
 
   return (
     <span className="relative z-50 inline-flex shadow-sm rounded-md">
       <button
         type="button"
         className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium ${choices.length > 0 ? `rounded-l` : `rounded`
-          } ${getColors(
-            `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
-            `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-          )
-          }`}
+          } text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
         onClick={onClick}
         disabled={disabled}
       >
         {title}
       </button>
 
-      {choices.length > 0 && (
-        <Menu as="span" className="-ml-px relative block">
-          <Menu.Button
-            className={`h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none  rounded-r ${getColors(
-              `text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 disabled:bg-gray-500`,
-              `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-            )
-              }`}
-            disabled={disabled}
-          >
-            <span className="sr-only">{l10n.t(LocalizationKey.dashboardCommonChoiceButtonOpen)}</span>
-            <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />
-          </Menu.Button>
 
-          <MenuItems widthClass={`w-56`} disablePopper>
-            <div className="py-1">
-              {choices.map((choice, idx) => (
-                <MenuItem
-                  key={idx}
-                  title={
-                    choice.icon ? (
-                      <div className="flex items-center">
-                        {choice.icon}
-                        <span>{choice.title}</span>
-                      </div>
-                    ) : (
-                      choice.title
-                    )
-                  }
-                  value={null}
-                  onClick={choice.onClick}
-                  disabled={choice.disabled}
-                />
-              ))}
-            </div>
-          </MenuItems>
-        </Menu>
-      )}
-    </span>
+      {choices.length > 0 && (
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            className='h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none  rounded-r text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50'
+            disabled={disabled}>
+            <span className="sr-only">{l10n.t(LocalizationKey.dashboardCommonChoiceButtonOpen)}</span>
+            <ChevronDownIcon className={`h-4 w-4`} aria-hidden="true" />
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent align='end'>
+            {choices.map((choice, idx) => (
+              <MenuItem
+                key={idx}
+                title={
+                  choice.icon ? (
+                    <div className="flex items-center">
+                      {choice.icon}
+                      <span>{choice.title}</span>
+                    </div>
+                  ) : (
+                    choice.title
+                  )
+                }
+                value={null}
+                onClick={choice.onClick}
+                disabled={choice.disabled}
+              />
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+      }
+    </span >
   );
 };

src/dashboardWebView/components/Common/DateField.tsx

@@ -1,7 +1,6 @@
 import { format as fnsFormat } from 'date-fns';
 import * as React from 'react';
 import { DateHelper } from '../../../helpers/DateHelper';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IDateFieldProps {
   className?: string;
@@ -15,7 +14,6 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({
   format
 }: React.PropsWithChildren<IDateFieldProps>) => {
   const [dateValue, setDateValue] = React.useState<string>('');
-  const { getColors } = useThemeColors();
 
   React.useEffect(() => {
     try {
@@ -38,7 +36,7 @@ export const DateField: React.FunctionComponent<IDateFieldProps> = ({
   }
 
   return (
-    <span className={`date__field ${className || ''} text-xs ${getColors(`text-vulcan-100 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)}`}>
+    <span className={`date__field ${className || ''} text-xs text-[var(--frontmatter-text)]`}>
       {dateValue}
     </span>
   );

src/dashboardWebView/components/Common/Link.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export interface ILinkProps {
+  title: string;
+  href: string;
+  className?: string;
+}
+
+export const Link: React.FunctionComponent<ILinkProps> = ({ children, title, href, className }: React.PropsWithChildren<ILinkProps>) => {
+  return (
+    <a
+      className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)] ${className || ""}`}
+      title={title}
+      href={href}>
+      {children}
+    </a>
+  );
+};

src/dashboardWebView/components/Common/LinkButton.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface ILinkButtonProps {
   title: string;
@@ -7,17 +6,10 @@ export interface ILinkButtonProps {
 }
 
 export const LinkButton: React.FunctionComponent<ILinkButtonProps> = ({ children, title, onClick }: React.PropsWithChildren<ILinkButtonProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <button
       type="button"
-      className={
-        getColors(
-          `text-gray-500 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600`,
-          `text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`
-        )
-      }
+      className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--frontmatter-link-hover)]`}
       title={title}
       onClick={onClick}>
       {children}

src/dashboardWebView/components/Common/Spinner.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
+import { LoadingType } from '../../../models';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
 
-export interface ISpinnerProps { }
+export interface ISpinnerProps {
+  type?: LoadingType;
+}
 
 export const Spinner: React.FunctionComponent<ISpinnerProps> = (
-  _: React.PropsWithChildren<ISpinnerProps>
+  { type }: React.PropsWithChildren<ISpinnerProps>
 ) => {
   return (
     <div className={`z-50 fixed top-0 left-0 right-0 bottom-0 w-full h-full bg-[var(--vscode-editor-background)] opacity-75`}>
@@ -12,6 +17,15 @@ export const Spinner: React.FunctionComponent<ISpinnerProps> = (
       >
         <div className={`h-full absolute rounded-sm bg-[var(--vscode-activityBarBadge-background)] animate-[vscode-loader_4s_ease-in-out_infinite]`} />
       </div>
+
+      {
+        type === 'initPages' && (
+          <div className='spinner-msg h-full text-2xl flex justify-center items-center text-[var(--vscode-foreground)]'>
+            <span>{l10n.t(LocalizationKey.loadingInitPages)}</span>
+            <span className='dots'></span>
+          </div>
+        )
+      }
     </div>
   );
 };

src/dashboardWebView/components/Common/TextField.tsx

@@ -0,0 +1,78 @@
+import { XCircleIcon } from '@heroicons/react/24/solid';
+import * as React from 'react';
+
+export interface ITextFieldProps {
+  name: string;
+  value?: string;
+  placeholder?: string;
+  icon?: JSX.Element;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  onChange?: (value: string) => void;
+  onReset?: () => void;
+}
+
+export const TextField: React.FunctionComponent<ITextFieldProps> = ({
+  name,
+  value,
+  placeholder,
+  icon,
+  autoFocus,
+  multiline,
+  rows,
+  disabled,
+  onChange,
+  onReset
+}: React.PropsWithChildren<ITextFieldProps>) => {
+  return (
+    <div className="relative flex justify-center">
+      {
+        icon && (
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            {icon}
+          </div>
+        )
+      }
+
+      {
+        multiline ? (
+          <textarea
+            rows={rows || 3}
+            name={name}
+            className={`block w-full py-2 ${icon ? "pl-10" : "pl-2"} pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
+            style={{
+              boxShadow: "none"
+            }}
+            placeholder={placeholder || ""}
+            value={value}
+            autoFocus={!!autoFocus}
+            onChange={(e) => onChange && onChange(e.target.value)}
+            disabled={!!disabled}
+          />
+        ) : (
+          <input
+            type="text"
+            name={name}
+            className={`block w-full py-2 ${icon ? "pl-10" : "pl-2"} pr-2 sm:text-sm appearance-none disabled:opacity-50 rounded bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] border-[var(--frontmatter-border)] focus:border-[var(--vscode-focusBorder)] focus:outline-0`}
+            style={{
+              boxShadow: "none"
+            }}
+            placeholder={placeholder || ""}
+            value={value}
+            autoFocus={!!autoFocus}
+            onChange={(e) => onChange && onChange(e.target.value)}
+            disabled={!!disabled}
+          />
+        )
+      }
+
+      {(value && onReset) && (
+        <button onClick={onReset} className="absolute inset-y-0 right-0 pr-3 flex items-center text-[var(--vscode-input-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]">
+          <XCircleIcon className={`h-5 w-5`} aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  );
+};

src/dashboardWebView/components/Configuration/Astro/AstroContentTypes.tsx

@@ -3,18 +3,20 @@ import * as l10n from '@vscode/l10n';
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../../DashboardMessage';
 import { AstroCollection } from '../../../../models';
-import { Settings } from '../../../models';
+import { Settings, Status } from '../../../models';
 import { SelectItem } from '../../Steps/SelectItem';
 import { LocalizationKey } from '../../../../localization';
 
 export interface IAstroContentTypesProps {
   settings: Settings
   triggerLoading: (isLoading: boolean) => void;
+  setStatus: (status: Status) => void;
 }
 
 export const AstroContentTypes: React.FunctionComponent<IAstroContentTypesProps> = ({
   settings,
-  triggerLoading
+  triggerLoading,
+  setStatus
 }: React.PropsWithChildren<IAstroContentTypesProps>) => {
   const [collections, setCollections] = React.useState<AstroCollection[]>([]);
 
@@ -26,12 +28,25 @@ export const AstroContentTypes: React.FunctionComponent<IAstroContentTypesProps>
     });
   }, []);
 
+  React.useEffect(() => {
+    if (collections.length > 0 && settings?.contentTypes?.length > 0) {
+      // Find created content types from the collections
+      const astroCollection = collections.find(c => settings.contentTypes.find((ct) => ct.name === c.name));
+      if (astroCollection) {
+        setStatus(Status.Completed);
+      } else {
+        setStatus(Status.Active);
+      }
+    }
+  }, [collections, settings.contentTypes])
+
   const generateContentType = (collection: AstroCollection) => {
     triggerLoading(true);
     messageHandler.request(DashboardMessage.ssgSetAstroContentTypes, {
       collection
     }).then((result) => {
       triggerLoading(false);
+      setStatus(Status.Completed);
     });
   }
 

src/dashboardWebView/components/Contents/ContentActions.tsx

@@ -1,21 +1,18 @@
 import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
-import { Menu } from '@headlessui/react';
-import { EyeIcon, GlobeIcon, TerminalIcon, TrashIcon } from '@heroicons/react/outline';
+import { EyeIcon, GlobeEuropeAfricaIcon, CommandLineIcon, TrashIcon, EllipsisVerticalIcon, LanguageIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import { CustomScript, ScriptType } from '../../../models';
+import { CustomScript, I18nConfig, ScriptType } from '../../../models';
 import { DashboardMessage } from '../../DashboardMessage';
-import { MenuItem, MenuItems, ActionMenuButton, QuickAction } from '../Menu';
+import { QuickAction } from '../Menu';
 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';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { SettingsSelector } from '../../state';
-import { GeneralCommands } from '../../../constants';
+import { COMMAND_NAME, GeneralCommands } from '../../../constants';
 import { PinIcon } from '../Icons/PinIcon';
 import { PinnedItemsAtom } from '../../state/atom/PinnedItems';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';
 
 export interface IContentActionsProps {
   title: string;
@@ -23,6 +20,14 @@ export interface IContentActionsProps {
   relPath: string;
   scripts: CustomScript[] | undefined;
   listView?: boolean;
+  locale?: I18nConfig;
+  isDefaultLocale?: boolean;
+  translations?: {
+    [locale: string]: {
+      locale: I18nConfig;
+      path: string;
+    };
+  };
   onOpen: () => void;
 }
 
@@ -32,26 +37,21 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
   relPath,
   scripts,
   onOpen,
-  listView
+  listView,
+  isDefaultLocale,
+  translations,
+  locale
 }: React.PropsWithChildren<IContentActionsProps>) => {
   const [pinnedItems, setPinnedItems] = useRecoilState(PinnedItemsAtom);
   const [showDeletionAlert, setShowDeletionAlert] = React.useState(false);
-  const { getColors } = useThemeColors();
   const settings = useRecoilValue(SettingsSelector);
 
-  const [referenceElement, setReferenceElement] = useState<any>(null);
-  const [popperElement, setPopperElement] = useState<any>(null);
-  const { styles, attributes, forceUpdate } = usePopper(referenceElement, popperElement, {
-    placement: listView ? 'right-start' : 'bottom-end',
-    strategy: 'fixed'
-  });
-
-  const onView = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const onView = (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
     onOpen();
   };
 
-  const onDelete = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const onDelete = (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
     setShowDeletionAlert(true);
   };
@@ -63,7 +63,11 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
     setShowDeletionAlert(false);
   };
 
-  const openOnWebsite = React.useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+  const onOpenFile = (filePath: string) => {
+    messageHandler.send(DashboardMessage.openFile, filePath);
+  }
+
+  const openOnWebsite = React.useCallback((e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
     if (settings?.websiteUrl && path) {
       Messenger.send(GeneralCommands.toVSCode.openOnWebsite, {
@@ -73,14 +77,14 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
     }
   }, [settings?.websiteUrl, path]);
 
-  const pinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+  const pinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
     messageHandler.request<string[]>(DashboardMessage.pinItem, path).then((result) => {
       setPinnedItems(result || []);
     })
   }, [path]);
 
-  const unpinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+  const unpinItem = React.useCallback((e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
     messageHandler.request<string[]>(DashboardMessage.unpinItem, path).then((result) => {
       setPinnedItems(result || []);
@@ -88,13 +92,20 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
   }, [path]);
 
   const runCustomScript = React.useCallback(
-    (e: React.MouseEvent<HTMLButtonElement>, script: CustomScript) => {
+    (e: React.MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>, script: CustomScript) => {
       e.stopPropagation();
       Messenger.send(DashboardMessage.runCustomScript, { script, path });
     },
     [path]
   );
 
+  const runCommand = React.useCallback((commandId: string) => {
+    messageHandler.send(GeneralCommands.toVSCode.runCommand, {
+      command: commandId,
+      args: path
+    })
+  }, [path]);
+
   const isPinned = React.useMemo(() => {
     return pinnedItems.includes(relPath);
   }, [pinnedItems, relPath]);
@@ -108,19 +119,56 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
           !script.hidden
       )
       .map((script) => (
-        <MenuItem
-          key={script.title}
-          title={
-            <div className="flex items-center">
-              <TerminalIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-              <span>{script.title}</span>
-            </div>
-          }
-          onClick={(value, e) => runCustomScript(e, script)}
-        />
+        <DropdownMenuItem key={script.id || script.title} onClick={(e) => runCustomScript(e, script)}>
+          <CommandLineIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+          <span>{script.title}</span>
+        </DropdownMenuItem>
       ));
   }, [scripts]);
 
+  const translationsMenu = React.useMemo(() => {
+    if (!locale || !translations || Object.keys(translations).length === 0) {
+      return null;
+    }
+
+    const crntLocale = translations[locale.locale];
+    const otherLocales = Object.entries(translations).filter(([key]) => key !== locale.locale);
+
+    if (otherLocales.length === 0) {
+      return null;
+    }
+
+    return (
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>
+          <LanguageIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+          <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsTranslationsMenu)}</span>
+        </DropdownMenuSubTrigger>
+
+        <DropdownMenuPortal>
+          <DropdownMenuSubContent>
+            <DropdownMenuItem onClick={() => onOpenFile(crntLocale.path)}>
+              <span>{crntLocale.locale.title || crntLocale.locale.locale}</span>
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+
+            {
+              otherLocales.map(([key, value]) => (
+                <DropdownMenuItem
+                  key={key}
+                  onClick={() => onOpenFile(value.path)}
+                >
+                  <span>{value.locale.title || value.locale.locale}</span>
+                </DropdownMenuItem>
+              ))
+            }
+          </DropdownMenuSubContent>
+        </DropdownMenuPortal>
+      </DropdownMenuSub>
+    );
+  }, [translations, locale, isDefaultLocale]);
+
   return (
     <>
       <div
@@ -129,13 +177,9 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
       >
         <div
           className={`flex items-center border border-transparent rounded-full ${listView ? '' : 'p-2 -mt-4'
-            } ${getColors(
-              'group-hover/card:bg-gray-200 dark:group-hover/card:bg-vulcan-200 group-hover/card:border-gray-100 dark:group-hover/card:border-vulcan-50',
-              'group-hover/card:bg-[var(--vscode-sideBar-background)] group-hover/card:border-[var(--frontmatter-border)]'
-            )
-            }`}
+            } group-hover/card:bg-[var(--vscode-sideBar-background)] group-hover/card:border-[var(--frontmatter-border)]`}
         >
-          <Menu as="div" className={`relative flex text-left`}>
+          <div className={`relative flex text-left`}>
             {!listView && (
               <div className="hidden group-hover/card:flex">
                 <QuickAction title={l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)} onClick={onView}>
@@ -145,79 +189,67 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
                 {
                   settings?.websiteUrl && (
                     <QuickAction title={l10n.t(LocalizationKey.commonOpenOnWebsite)} onClick={openOnWebsite}>
-                      <GlobeIcon className={`w-4 h-4`} aria-hidden="true" />
+                      <GlobeEuropeAfricaIcon className={`w-4 h-4`} aria-hidden="true" />
                     </QuickAction>
                   )
                 }
 
-                <QuickAction title={l10n.t(LocalizationKey.commonDelete)} onClick={onDelete}>
+                <QuickAction
+                  title={l10n.t(LocalizationKey.commonDelete)}
+                  className={`hover:text-[var(--vscode-statusBarItem-errorBackground)]`}
+                  onClick={onDelete}>
                   <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
                 </QuickAction>
               </div>
             )}
 
-            <div ref={setReferenceElement} className={`flex`}>
-              <ActionMenuButton title={l10n.t(LocalizationKey.dashboardContentsContentActionsActionMenuButtonTitle)} />
-            </div>
+            <DropdownMenu>
+              <DropdownMenuTrigger className='text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] data-[state=open]:text-[var(--vscode-tab-activeForeground)] focus:outline-none'>
+                <span className="sr-only">{l10n.t(LocalizationKey.dashboardContentsContentActionsActionMenuButtonTitle)}</span>
+                <EllipsisVerticalIcon className="w-4 h-4" aria-hidden="true" />
+              </DropdownMenuTrigger>
 
-            <div
-              className="menu_items__wrapper z-20"
-              ref={setPopperElement}
-              style={styles.popper}
-              {...attributes.popper}
-            >
-              <MenuItems
-                updatePopper={forceUpdate || undefined}
-                widthClass="w-44"
-                marginTopClass={listView ? '' : ''}
-              >
-                <MenuItem
-                  title={
-                    <div className="flex items-center">
-                      <PinIcon className={`mr-2 h-5 w-5 flex-shrink-0 ${isPinned ? "" : "-rotate-90"}`} aria-hidden={true} />{' '}
-                      <span>{isPinned ? l10n.t(LocalizationKey.commonUnpin) : l10n.t(LocalizationKey.commonPin)}</span>
-                    </div>
-                  }
-                  onClick={(_, e) => isPinned ? unpinItem(e) : pinItem(e)}
-                />
-                <MenuItem
-                  title={
-                    <div className="flex items-center">
-                      <EyeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                      <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)}</span>
-                    </div>
-                  }
-                  onClick={(_, e) => onView(e)}
-                />
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={(e) => isPinned ? unpinItem(e) : pinItem(e)}>
+                  <PinIcon className={`mr-2 h-4 w-4 ${isPinned ? "" : "-rotate-90"}`} aria-hidden={true} />
+                  <span>{isPinned ? l10n.t(LocalizationKey.commonUnpin) : l10n.t(LocalizationKey.commonPin)}</span>
+                </DropdownMenuItem>
+
+                <DropdownMenuItem onClick={onView}>
+                  <EyeIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+                  <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsMenuItemView)}</span>
+                </DropdownMenuItem>
 
                 {
                   settings?.websiteUrl && (
-                    <MenuItem
-                      title={
-                        <div className="flex items-center">
-                          <GlobeIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                          <span>{l10n.t(LocalizationKey.commonOpenOnWebsite)}</span>
-                        </div>
-                      }
-                      onClick={(_, e) => openOnWebsite(e)}
-                    />
+                    <DropdownMenuItem onClick={openOnWebsite}>
+                      <GlobeEuropeAfricaIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+                      <span>{l10n.t(LocalizationKey.commonOpenOnWebsite)}</span>
+                    </DropdownMenuItem>
                   )
                 }
 
+                {
+                  locale && isDefaultLocale && (
+                    <DropdownMenuItem onClick={() => runCommand(COMMAND_NAME.i18n.create)}>
+                      <LanguageIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+                      <span>{l10n.t(LocalizationKey.dashboardContentsContentActionsTranslationsCreate)}</span>
+                    </DropdownMenuItem>
+                  )
+                }
+
+                {translationsMenu}
+
                 {customScriptActions}
 
-                <MenuItem
-                  title={
-                    <div className="flex items-center">
-                      <TrashIcon className="mr-2 h-5 w-5 flex-shrink-0" aria-hidden={true} />{' '}
-                      <span>{l10n.t(LocalizationKey.commonDelete)}</span>
-                    </div>
-                  }
-                  onClick={(_, e) => onDelete(e)}
-                />
-              </MenuItems>
-            </div>
-          </Menu>
+                <DropdownMenuItem onClick={onDelete} className={`focus:bg-[var(--vscode-statusBarItem-errorBackground)] focus:text-[var(--vscode-statusBarItem-errorForeground)]`}>
+                  <TrashIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
+                  <span>{l10n.t(LocalizationKey.commonDelete)}</span>
+                </DropdownMenuItem>
+
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
         </div>
       </div>
 

src/dashboardWebView/components/Contents/Contents.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { NavigationType, Page } from '../../models';
-import { DashboardViewAtom, SettingsSelector } from '../../state';
+import { useRecoilValue } from 'recoil';
+import { Page } from '../../models';
+import { LoadingAtom, SettingsSelector } from '../../state';
 import { Overview } from './Overview';
 import { Spinner } from '../Common/Spinner';
 import { SponsorMsg } from '../Layout/SponsorMsg';
@@ -14,22 +14,18 @@ import { PageLayout } from '../Layout/PageLayout';
 
 export interface IContentsProps {
   pages: Page[];
-  loading: boolean;
 }
 
 export const Contents: React.FunctionComponent<IContentsProps> = ({
-  pages,
-  loading
+  pages
 }: React.PropsWithChildren<IContentsProps>) => {
+  const loading = useRecoilValue(LoadingAtom);
   const settings = useRecoilValue(SettingsSelector);
   const { pageItems } = usePages(pages);
-  const [, setView] = useRecoilState(DashboardViewAtom);
 
   const pageFolders = [...new Set(pageItems.map((page) => page.fmFolder))];
 
   useEffect(() => {
-    setView(NavigationType.Contents);
-
     Messenger.send(DashboardMessage.sendTelemetry, {
       event: TelemetryEvent.webviewContentsView
     });
@@ -37,8 +33,8 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({
 
   return (
     <PageLayout folders={pageFolders} totalPages={pageItems.length}>
-      <div className="w-full flex-grow max-w-7xl mx-auto pb-6 px-4">
-        {loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} />}
+      <div className="w-full flex-grow max-w-full mx-auto pb-6">
+        {loading ? <Spinner type={loading} /> : <Overview pages={pageItems} settings={settings} />}
       </div>
 
       <SponsorMsg

src/dashboardWebView/components/Contents/I18nLabel.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Page } from '../../models';
+import { ChevronDownIcon, LanguageIcon } from '@heroicons/react/24/outline';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';
+import { MenuItem } from '../Menu';
+import { DashboardMessage } from '../../DashboardMessage';
+import { messageHandler } from '@estruyf/vscode/dist/client';
+
+export interface II18nLabelProps {
+  page: Page;
+}
+
+export const I18nLabel: React.FunctionComponent<II18nLabelProps> = ({
+  page
+}: React.PropsWithChildren<II18nLabelProps>) => {
+  if (!page.fmLocale) {
+    return null;
+  }
+
+  return (
+    <div className="mb-2 flex items-center">
+      <LanguageIcon className="mr-1 h-4 w-4 inline-block" />
+      <span className="text-xs">{page.fmLocale.title || page.fmLocale.locale}</span>
+    </div>
+  );
+};

src/dashboardWebView/components/Contents/Item.tsx

@@ -16,6 +16,7 @@ import { LocalizationKey } from '../../../localization';
 import { useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
 import useCard from '../../hooks/useCard';
+import { I18nLabel } from './I18nLabel';
 
 export interface IItemProps extends Page { }
 
@@ -69,6 +70,34 @@ export const Item: React.FunctionComponent<IItemProps> = ({
     return [];
   }, [settings, pageData]);
 
+  const statusPlaceholder = useMemo(() => {
+    if (!statusHtml && !cardFields?.state) {
+      return null;
+    }
+
+    return (
+      statusHtml ? (
+        <div dangerouslySetInnerHTML={{ __html: statusHtml }} />
+      ) : (
+        cardFields?.state && draftField && draftField.name && typeof pageData[draftField.name] !== "undefined" ? <Status draft={pageData[draftField.name]} published={pageData.fmPublished} /> : null
+      )
+    )
+  }, [statusHtml, cardFields?.state, draftField, pageData]);
+
+  const datePlaceholder = useMemo(() => {
+    if (!dateHtml && !cardFields?.date) {
+      return null;
+    }
+
+    return (
+      dateHtml ? (
+        <div className='mr-4' dangerouslySetInnerHTML={{ __html: dateHtml }} />
+      ) : (
+        cardFields?.date && pageData.date ? <DateField className={`mr-4`} value={pageData.date} format={pageData.fmDateFormat} /> : null
+      )
+    )
+  }, [dateHtml, cardFields?.date, pageData]);
+
   const hasDraftOrDate = useMemo(() => {
     return cardFields && (cardFields.state || cardFields.date);
   }, [cardFields]);
@@ -80,9 +109,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           className={`group flex flex-col items-start content-start h-full w-full text-left shadow-md dark:shadow-none hover:shadow-xl border rounded bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] border-[var(--frontmatter-border)]`}
         >
           <button
+            title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
             onClick={openFile}
-            className={`relative h-36 w-full overflow-hidden border-b cursor-pointer border-[var(--frontmatter-border)]
-              }`}
+            className={`relative h-36 w-full overflow-hidden border-b cursor-pointer border-[var(--frontmatter-border)]`}
           >
             {
               imageHtml ?
@@ -91,7 +120,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                   <img
                     src={`${pageData[PREVIEW_IMAGE_FIELD]}`}
                     alt={escapedTitle || ""}
-                    className="absolute inset-0 h-full w-full object-cover group-hover:brightness-75"
+                    className="absolute inset-0 h-full w-full object-cover object-left-top group-hover:brightness-75"
                     loading="lazy"
                   />
                 ) : (
@@ -105,53 +134,59 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           </button>
 
           <div className="relative p-4 w-full grow">
-            <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]} />
-                )
-              }
-
-              {
-                dateHtml ? (
-                  <div className='mr-4' dangerouslySetInnerHTML={{ __html: dateHtml }} />
-                ) : (
-                  cardFields?.date && <DateField className={`mr-4`} value={pageData.date} format={pageData.fmDateFormat} />
-                )
-              }
-            </div>
+            {
+              (statusPlaceholder || datePlaceholder) && (
+                <div className={`flex justify-between items-center ${hasDraftOrDate ? `mb-2` : ``}`}>
+                  {statusPlaceholder}
+                  {datePlaceholder}
+                </div>
+              )
+            }
 
             <ContentActions
               title={pageData.title}
               path={pageData.fmFilePath}
               relPath={pageData.fmRelFileWsPath}
+              locale={pageData.fmLocale}
+              isDefaultLocale={pageData.fmDefaultLocale}
+              translations={pageData.fmTranslations}
               scripts={settings?.scripts}
               onOpen={openFile}
             />
 
-            <button onClick={openFile} className={`text-left block`}>
+            <I18nLabel page={pageData} />
+
+            <button
+              title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
+              onClick={openFile}
+              className={`text-left block`}>
               {
                 titleHtml ? (
                   <div dangerouslySetInnerHTML={{ __html: titleHtml }} />
                 ) : (
-                  <h2 className="mb-2 font-bold">
-                    {escapedTitle}
+                  <h2 className="font-bold">
+                    <span>{escapedTitle}</span>
                   </h2>
                 )
               }
             </button>
 
-            <button onClick={openFile} className={`text-left block`}>
-              {
-                descriptionHtml ? (
-                  <div dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
-                ) : (
-                  <p className={`text-xs text-[vara(--vscode-titleBar-activeForeground)]`}>{escapedDescription}</p>
-                )
-              }
-            </button>
+            {
+              (escapedDescription || descriptionHtml) && (
+                <button
+                  title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
+                  onClick={openFile}
+                  className={`mt-2 text-left block`}>
+                  {
+                    descriptionHtml ? (
+                      <div dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
+                    ) : (
+                      <p className={`text-xs text-[vara(--vscode-titleBar-activeForeground)]`}>{escapedDescription}</p>
+                    )
+                  }
+                </button>
+              )
+            }
 
             {
               tagsHtml ? (
@@ -197,7 +232,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           className={`px-5 cursor-pointer w-full text-left grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 border-b hover:bg-opacity-70 border-[var(--frontmatter-border)] hover:bg-[var(--vscode-sideBar-background)]`}
         >
           <div className="col-span-8 font-bold truncate flex items-center space-x-4">
-            <button title={`Open: ${escapedTitle}`} onClick={openFile}>
+            <button
+              title={escapedTitle ? l10n.t(LocalizationKey.commonOpenWithValue, escapedTitle) : l10n.t(LocalizationKey.commonOpen)}
+              onClick={openFile}>
               {escapedTitle}
             </button>
 
@@ -214,7 +251,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             <DateField value={pageData.date} />
           </div>
           <div className="col-span-2">
-            {draftField && draftField.name && <Status draft={pageData[draftField.name]} />}
+            {draftField && draftField.name && <Status draft={pageData[draftField.name]} published={pageData.fmPublished} />}
           </div>
         </div>
       </li>

src/dashboardWebView/components/Contents/List.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
-import useThemeColors from '../../hooks/useThemeColors';
 import { DashboardViewType } from '../../models';
 import { ViewSelector } from '../../state';
 import * as l10n from '@vscode/l10n';
@@ -12,11 +11,10 @@ export const List: React.FunctionComponent<IListProps> = ({
   children
 }: React.PropsWithChildren<IListProps>) => {
   const view = useRecoilValue(ViewSelector);
-  const { getColors } = useThemeColors();
 
   let className = '';
   if (view === DashboardViewType.Grid) {
-    className = `grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`;
+    className = `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5 gap-4`;
   } else if (view === DashboardViewType.List) {
     className = `-mx-4`;
   }
@@ -24,8 +22,7 @@ export const List: React.FunctionComponent<IListProps> = ({
   return (
     <ul role="list" className={className}>
       {view === DashboardViewType.List && (
-        <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)]')
-          }`}>
+        <li className={`px-5 relative uppercase py-2 border-b 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">{l10n.t(LocalizationKey.dashboardContentsListTitle)}</div>
             <div className="col-span-2">{l10n.t(LocalizationKey.dashboardContentsListDate)}</div>

src/dashboardWebView/components/Contents/Overview.tsx

@@ -1,18 +1,15 @@
 import { Disclosure } from '@headlessui/react';
-import { ChevronRightIcon } from '@heroicons/react/solid';
+import { ChevronRightIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
 import { useCallback, useMemo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { groupBy } from '../../../helpers/GroupBy';
 import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
 import { GroupOption } from '../../constants/GroupOption';
-import { Page } from '../../models/Page';
-import { Settings } from '../../models/Settings';
 import { GroupingSelector, PageAtom, ViewSelector } from '../../state';
 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';
 import { PinnedItemsAtom } from '../../state/atom/PinnedItems';
@@ -20,7 +17,7 @@ import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { PinIcon } from '../Icons/PinIcon';
 import { PinnedItem } from './PinnedItem';
-import { DashboardViewType } from '../../models';
+import { DashboardViewType, Page, Settings } from '../../models';
 
 export interface IOverviewProps {
   pages: Page[];
@@ -36,7 +33,6 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
   const grouping = useRecoilValue(GroupingSelector);
   const page = useRecoilValue(PageAtom);
   const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination);
-  const { getColors } = useThemeColors();
   const view = useRecoilValue(ViewSelector);
 
   const pagedPages = useMemo(() => {
@@ -66,6 +62,44 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
     [grouping]
   );
 
+  const { groupKeys, groupedPages } = useMemo(() => {
+    if (grouping === GroupOption.none) {
+      return { groupKeys: [], groupedPages: {} };
+    }
+
+    let groupedPages = groupBy(pages, grouping === GroupOption.Year ? 'fmYear' : 'fmDraft');
+    let groupKeys = Object.keys(groupedPages);
+
+    if (grouping === GroupOption.Year) {
+      groupKeys = groupKeys.sort((a, b) => {
+        return parseInt(b) - parseInt(a);
+      });
+    } else if (grouping === GroupOption.Draft && settings?.draftField?.type !== 'choice') {
+      const isInverted = settings?.draftField?.invert;
+      const allPublished: Page[] = groupedPages['Published'] || [];
+      const allDrafts: Page[] = groupedPages['Draft'] || [];
+
+      if (allPublished.length > 0) {
+        const drafts = !isInverted ? allDrafts : allPublished;
+        const published = (!isInverted ? allPublished : allDrafts).filter((page) => !page.fmPublished || page.fmPublished <= Date.now());
+        const scheduled = (!isInverted ? allPublished : allDrafts).filter((page) => page.fmPublished && page.fmPublished > Date.now());
+
+        delete groupedPages["Published"];
+        delete groupedPages["Draft"];
+
+        groupKeys = ['Scheduled', ...groupKeys];
+        groupedPages = {
+          "Scheduled": scheduled,
+          "Published": published,
+          "Draft": drafts,
+          ...groupedPages,
+        }
+      }
+    }
+
+    return { groupKeys, groupedPages };
+  }, [pages, grouping, settings?.draftField]);
+
   React.useEffect(() => {
     messageHandler.request<string[]>(DashboardMessage.getPinnedItems).then((items) => {
       setIsReady(true);
@@ -85,8 +119,7 @@ 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 text-[var(--vscode-editor-foreground)]`}
           />
           {settings && settings?.contentFolders?.length > 0 ? (
             <p className={`text-xl font-medium`}>{l10n.t(LocalizationKey.dashboardContentsOverviewNoMarkdown)}</p>
@@ -99,40 +132,33 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
   }
 
   if (grouping !== GroupOption.none) {
-    const groupedPages = groupBy(pages, grouping === GroupOption.Year ? 'fmYear' : 'fmDraft');
-    let groupKeys = Object.keys(groupedPages);
-
-    if (grouping === GroupOption.Year) {
-      groupKeys = groupKeys.sort((a, b) => {
-        return parseInt(b) - parseInt(a);
-      });
-    }
-
     return (
       <>
         {groupKeys.map((groupId, idx) => (
-          <Disclosure key={groupId} as={`div`} className={`w-full`} defaultOpen>
-            {({ open }) => (
-              <>
-                <Disclosure.Button className={`mb-4 ${idx !== 0 ? 'mt-8' : ''}`}>
-                  <h2 className={`text-2xl font-bold flex items-center`}>
-                    <ChevronRightIcon
-                      className={`w-8 h-8 mr-1 ${open ? 'transform rotate-90' : ''}`}
-                    />
-                    {groupName(groupId, groupedPages)}
-                  </h2>
-                </Disclosure.Button>
+          groupedPages[groupId].length > 0 && (
+            <Disclosure key={groupId} as={`div`} className={`w-full`} defaultOpen>
+              {({ open }) => (
+                <>
+                  <Disclosure.Button className={`mb-4 ${idx !== 0 ? 'mt-8' : ''}`}>
+                    <h2 className={`text-2xl font-bold flex items-center`}>
+                      <ChevronRightIcon
+                        className={`w-8 h-8 mr-1 ${open ? 'transform rotate-90' : ''}`}
+                      />
+                      {groupName(groupId, groupedPages)}
+                    </h2>
+                  </Disclosure.Button>
 
-                <Disclosure.Panel>
-                  <List>
-                    {groupedPages[groupId].map((page: Page) => (
-                      <Item key={`${page.slug}-${idx}`} {...page} />
-                    ))}
-                  </List>
-                </Disclosure.Panel>
-              </>
-            )}
-          </Disclosure>
+                  <Disclosure.Panel>
+                    <List>
+                      {groupedPages[groupId].map((page: Page) => (
+                        <Item key={`${page.slug}-${idx}`} {...page} />
+                      ))}
+                    </List>
+                  </Disclosure.Panel>
+                </>
+              )}
+            </Disclosure>
+          )
         ))}
       </>
     );

src/dashboardWebView/components/Contents/Status.tsx

@@ -7,15 +7,18 @@ import { LocalizationKey } from '../../../localization';
 
 export interface IStatusProps {
   draft: boolean | string;
+  published: number | null | undefined;
 }
 
 export const Status: React.FunctionComponent<IStatusProps> = ({
-  draft
+  draft,
+  published
 }: React.PropsWithChildren<IStatusProps>) => {
   const settings = useRecoilValue(SettingsAtom);
   const tabInfo = useRecoilValue(TabInfoAtom);
 
   const draftField = useMemo(() => settings?.draftField, [settings]);
+  const isFuture = useMemo(() => published ? published > Date.now() : false, [published]);
 
   const draftValue = useMemo(() => {
     if (draftField && draftField.type === 'choice') {
@@ -31,7 +34,7 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
     if (draftValue) {
       return (
         <span
-          className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs text-[var(--vscode-badge-foreground)] bg-[var(--vscode-badge-background)]`}
+          className={`inline-block px-1 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-[0.7rem] text-[var(--vscode-badge-foreground)] bg-[var(--vscode-badge-background)]`}
         >
           {draftValue}
         </span>
@@ -48,16 +51,21 @@ export const Status: React.FunctionComponent<IStatusProps> = ({
   return (
     <span
       className={`draft__status
-        inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs 
+        inline-block px-1 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-[0.7rem] 
         ${draftValue ?
           'bg-[var(--vscode-statusBarItem-errorBackground)] text-[var(--vscode-statusBarItem-errorForeground)]' :
-          'bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)]'
+          isFuture ?
+            'bg-[var(--vscode-statusBarItem-warningBackground)] text-[var(--vscode-statusBarItem-warningForeground)]' :
+            'bg-[var(--vscode-badge-background)] text-[var(--vscode-badge-foreground)]'
         }`}
     >
       {
         draftValue ?
-          l10n.t(LocalizationKey.dashboardContentsStatusDraft) :
-          l10n.t(LocalizationKey.dashboardContentsStatusPublished)
+          l10n.t(LocalizationKey.dashboardContentsStatusDraft) : (
+            isFuture ?
+              l10n.t(LocalizationKey.dashboardContentsStatusScheduled) :
+              l10n.t(LocalizationKey.dashboardContentsStatusPublished)
+          )
       }
     </span>
   );

src/dashboardWebView/components/DataView/DataForm.tsx

@@ -5,7 +5,6 @@ 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';
 
@@ -24,7 +23,6 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({
 }: React.PropsWithChildren<IDataFormProps>) => {
   const [bridge, setBridge] = useState<JSONSchemaBridge | null>(null);
   const [error, setError] = useState<string | undefined>(undefined);
-  const { getColors } = useThemeColors();
 
   const ajv = new Ajv({
     allErrors: true,
@@ -81,11 +79,11 @@ 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)]`)}>
+          <h2 className={`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)]`)}>
+          <h2 className={`text-[var(--frontmatter-secondary-text)]`}>
             {l10n.t(LocalizationKey.dashboardDataViewDataFormAdd)}
           </h2>
         )}

src/dashboardWebView/components/DataView/DataFormControls.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 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';
+import { SubmitField } from '../../../components/uniforms-frontmatter';
 
 export interface IDataFormControlsProps {
   model: any | null;
@@ -16,10 +15,9 @@ export const DataFormControls: React.FunctionComponent<IDataFormControlsProps> =
   onClear
 }: React.PropsWithChildren<IDataFormControlsProps>) => {
   const { formRef } = useForm();
-  const { getColors } = useThemeColors();
 
   return (
-    <div className={`text-right ${getColors(`border-gray-200 dark:border-vulcan-300`, `border-[var(--frontmatter-border)]`)}`}>
+    <div className={`text-right border-[var(--frontmatter-border)]`}>
       <SubmitField value={model ? `Update` : `Add`} />
 
       <Button

src/dashboardWebView/components/DataView/DataView.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Header } from '../Header';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { DashboardViewAtom, SettingsSelector } from '../../state';
+import { useRecoilValue } from 'recoil';
+import { SettingsSelector } from '../../state';
 import { DataForm } from './DataForm';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DataFile } from '../../../models/DataFile';
@@ -15,28 +15,22 @@ import { arrayMoveImmutable } from 'array-move';
 import { EmptyView } from './EmptyView';
 import { Container } from './SortableContainer';
 import { SortableItem } from './SortableItem';
-import { ChevronRightIcon, DatabaseIcon } from '@heroicons/react/outline';
-import { ToastContainer, toast, Slide } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { ChevronRightIcon, CircleStackIcon } from '@heroicons/react/24/outline';
 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';
-import { NavigationType } from '../../models';
 
 export interface IDataViewProps { }
 
 export const DataView: React.FunctionComponent<IDataViewProps> = (
-  props: React.PropsWithChildren<IDataViewProps>
+  _: React.PropsWithChildren<IDataViewProps>
 ) => {
   const [selectedData, setSelectedData] = useState<DataFile | null>(null);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [dataEntries, setDataEntries] = useState<any | any[] | null>(null);
   const settings = useRecoilValue(SettingsSelector);
-  const { getColors } = useThemeColors();
-  const [, setView] = useRecoilState(DashboardViewAtom);
 
   const setSchema = (dataFile: DataFile) => {
     setSelectedData(dataFile);
@@ -113,15 +107,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         entries: data
       });
 
-      // Show toast message
-      toast.success('Updated your data entries', {
-        position: 'top-right',
-        autoClose: 2000,
-        hideProgressBar: true,
-        closeOnClick: true,
-        pauseOnHover: false,
-        transition: Slide
-      });
+      Messenger.send(DashboardMessage.showNotification, l10n.t(LocalizationKey.dashboardDataViewDataViewUpdateMessage));
     },
     [selectedData]
   );
@@ -137,7 +123,6 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
   }, [selectedData, , dataEntries, selectedIndex]);
 
   useEffect(() => {
-    setView(NavigationType.Data);
     Messenger.listen(messageListener);
 
     Messenger.send(DashboardMessage.sendTelemetry, {
@@ -180,27 +165,15 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         <div className="relative w-full flex-grow mx-auto overflow-hidden">
           <div className={`flex w-64 flex-col absolute inset-y-0`}>
             <aside
-              className={`flex flex-col flex-grow overflow-y-auto border-r py-6 px-4 overflow-auto ${getColors(
-                'border-gray-200 dark:border-vulcan-300',
-                'border-[var(--frontmatter-border)]'
-              )
-                }`}
+              className={`flex flex-col flex-grow overflow-y-auto border-r py-6 px-4 overflow-auto border-[var(--frontmatter-border)]`}
             >
-              <h2 className={`text-lg ${getColors(
-                `text-gray-500 dark:text-whisper-900`,
-                `text-[var(--frontmatter-text)]`
-              )
-                }`}>
+              <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
                 {l10n.t(LocalizationKey.dashboardDataViewDataViewSelect)}
               </h2>
 
               <nav className={`flex-1 py-4 -mx-4`}>
                 <div
-                  className={`divide-y border-t border-b  ${getColors(
-                    `divide-gray-200 dark:divide-vulcan-300 border-gray-200 dark:border-vulcan-300`,
-                    `divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`
-                  )
-                    }`}
+                  className={`divide-y border-t border-b divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`}
                 >
                   {dataFiles &&
                     dataFiles.length > 0 &&
@@ -224,17 +197,9 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
               <>
                 {!selectedData.singleEntry && (
                   <div
-                    className={`w-1/3 py-6 px-4 flex-1 border-r overflow-auto ${getColors(
-                      `border-gray-200 dark:border-vulcan-300`,
-                      `border-[var(--frontmatter-border)]`
-                    )
-                      }`}
+                    className={`w-1/3 py-6 px-4 flex-1 border-r overflow-auto border-[var(--frontmatter-border)]`}
                   >
-                    <h2 className={`text-lg ${getColors(
-                      `text-gray-500 dark:text-whisper-900`,
-                      `text-[var(--frontmatter-text)]`
-                    )
-                      }`}>
+                    <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
                       {l10n.t(LocalizationKey.dashboardDataViewDataViewTitle, selectedData?.title?.toLowerCase() || '')}
                     </h2>
 
@@ -260,7 +225,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                         </>
                       ) : (
                         <div className={`flex flex-col items-center justify-center`}>
-                          <p className={getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}>
+                          <p className={`text-[var(--frontmatter-text)]`}>
                             {l10n.t(LocalizationKey.dashboardDataViewDataViewEmpty, selectedData.title.toLowerCase())}
                           </p>
                         </div>
@@ -272,7 +237,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                   className={`${selectedData.singleEntry ? 'w-full' : 'w-2/3'
                     } py-6 px-4 overflow-auto`}
                 >
-                  <h2 className={`text-lg ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}`}>
+                  <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
                     {l10n.t(LocalizationKey.dashboardDataViewDataViewCreateOrModify, selectedData.title.toLowerCase())}
                   </h2>
                   {selectedData ? (
@@ -294,16 +259,12 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         </div>
       ) : (
         <div className="w-full h-full flex items-center justify-center">
-          <div className={`flex flex-col items-center ${getColors(
-            'text-gray-500 dark:text-whisper-900',
-            'text-[var(--frontmatter-text)]'
-          )
-            }`}>
-            <DatabaseIcon className="w-32 h-32" />
+          <div className={`flex flex-col items-center text-[var(--frontmatter-text)]`}>
+            <CircleStackIcon className="w-32 h-32" />
             <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)]`)}
+                className={`text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`}
                 href={`https://frontmatter.codes/docs/dashboard#data-files-view`}
                 title={l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
               >
@@ -321,8 +282,6 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         isBacker={settings?.isBacker}
       />
 
-      <ToastContainer />
-
       <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,5 @@
-import { ExclamationCircleIcon } from '@heroicons/react/outline';
+import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -9,12 +8,11 @@ export interface IEmptyViewProps { }
 export const EmptyView: React.FunctionComponent<IEmptyViewProps> = (
   props: React.PropsWithChildren<IEmptyViewProps>
 ) => {
-  const { getColors } = useThemeColors();
 
   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)]`)}`}>
+      <ExclamationCircleIcon className={`w-1/12 opacity-90 text-[var(--frontmatter-secondary-text)]`} />
+      <h2 className={`text-xl text-[var(--frontmatter-secondary-text)]`}>
         {l10n.t(LocalizationKey.dashboardDataViewEmptyViewHeading)}
       </h2>
     </div>

src/dashboardWebView/components/DataView/SortableContainer.tsx

@@ -1,17 +1,14 @@
 import * as React from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface ISortableContainerProps { }
 
 export const Container = SortableContainer(
   ({ children }: React.PropsWithChildren<ISortableContainerProps>) => {
-    const { getColors } = useThemeColors();
 
     return (
       <ul
-        className={`-mx-4 divide-y border-t border-b ${getColors(`divide-gray-200 dark:divide-vulcan-300 border-gray-200 dark:border-vulcan-300`, `divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`)
-          }`}
+        className={`-mx-4 divide-y border-t border-b divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`}
       >
         {children}
       </ul>

src/dashboardWebView/components/DataView/SortableItem.tsx

@@ -1,7 +1,6 @@
-import { PencilIcon, SelectorIcon, TrashIcon } from '@heroicons/react/outline';
+import { PencilIcon, TrashIcon, ChevronUpDownIcon } from '@heroicons/react/24/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';
@@ -16,7 +15,7 @@ export interface ISortableItemProps {
   onDeleteItem: (index: number) => void;
 }
 
-const DragHandle = SortableHandle(() => <SelectorIcon className={`w-6 h-6 cursor-move hover:text-[var(--frontmatter-link-hover)]`} />);
+const DragHandle = SortableHandle(() => <ChevronUpDownIcon className={`w-6 h-6 mr-2 cursor-move hover:text-[var(--frontmatter-link-hover)]`} />);
 
 export const SortableItem = SortableElement(
   ({
@@ -27,7 +26,6 @@ export const SortableItem = SortableElement(
     onDeleteItem
   }: ISortableItemProps) => {
     const [showAlert, setShowAlert] = React.useState(false);
-    const { getColors } = useThemeColors();
 
     const deleteItemConfirm = () => {
       setShowAlert(true);
@@ -37,12 +35,8 @@ export const SortableItem = SortableElement(
       <>
         <li
           data-test={`${selectedIndex}-${crntIndex}`}
-          className={`sortable_item py-2 px-2 w-full flex justify-between content-center cursor-pointer ${selectedIndex === crntIndex ? getColors(`bg-gray-300 dark:bg-vulcan-300`, `bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]`) : ``
-            } ${getColors(
-              'hover:bg-gray-200 dark:hover:bg-vulcan-400',
-              'hover:bg-[var(--frontmatter-list-hover-background)]'
-            )
-            }`}
+          className={`sortable_item py-2 px-2 w-full flex justify-between content-center cursor-pointer ${selectedIndex === crntIndex ? `bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]` : ``
+            } hover:bg-[var(--frontmatter-list-hover-background)]`}
         >
           <div
             className="flex items-center w-full"

src/dashboardWebView/components/ErrorView/index.tsx

@@ -1,6 +1,5 @@
-import { ExclamationIcon } from '@heroicons/react/solid';
+import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -9,11 +8,9 @@ export interface IErrorViewProps { }
 export const ErrorView: React.FunctionComponent<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)]`)}`} />
+      <ExclamationTriangleIcon className={`w-24 h-24 text-[var(--vscode-editorError-foreground)]`} />
       <p className="text-xl">{l10n.t(LocalizationKey.commonErrorMessage)}</p>
       <p className="text-base">{l10n.t(LocalizationKey.dashboardErrorViewDescription)}</p>
     </main>

src/dashboardWebView/components/Filters/LanguageFilter.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuSeparator } from '../../../components/shadcn/Dropdown';
+import { LanguageIcon } from '@heroicons/react/24/outline';
+import { MenuButton, MenuItem } from '../Menu';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { DEFAULT_LOCALE_STATE, LocaleAtom, LocalesAtom } from '../../state';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+
+export interface ILanguageFilterProps { }
+
+export const LanguageFilter: React.FunctionComponent<ILanguageFilterProps> = ({ }: React.PropsWithChildren<ILanguageFilterProps>) => {
+  const locales = useRecoilValue(LocalesAtom);
+  const [crntLocale, setCrntLocale] = useRecoilState(LocaleAtom);
+
+  const crntLocaleName = React.useMemo(() => {
+    if (!crntLocale || !locales || locales.length === 0) {
+      return null;
+    }
+
+    const locale = locales.find(locale => locale.locale === crntLocale);
+
+    return locale?.title || locale?.locale;
+  }, [crntLocale, locales]);
+
+  if (!locales || locales.length <= 1) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <MenuButton
+        label={
+          <>
+            <LanguageIcon className={`inline-block w-4 h-4 mr-2`} />
+            <span>{l10n.t(LocalizationKey.dashboardFiltersLanguageFilterLabel)}</span>
+          </>
+        }
+        title={crntLocaleName || l10n.t(LocalizationKey.dashboardFiltersLanguageFilterAll)}
+      />
+
+      <DropdownMenuContent align='start'>
+        <MenuItem
+          title={l10n.t(LocalizationKey.dashboardFiltersLanguageFilterAll)}
+          value={null}
+          isCurrent={crntLocale === DEFAULT_LOCALE_STATE}
+          onClick={() => setCrntLocale(DEFAULT_LOCALE_STATE)}
+        />
+
+        <DropdownMenuSeparator />
+
+        {
+          locales.map((locale) => (
+            <MenuItem
+              key={locale.locale}
+              title={locale.title || locale.locale}
+              value={locale.locale}
+              isCurrent={locale.locale === crntLocale}
+              onClick={(value) => setCrntLocale(value)}
+            />
+          ))
+        }
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

src/dashboardWebView/components/Header/Breadcrumb.tsx

@@ -1,10 +1,9 @@
-import { CollectionIcon } from '@heroicons/react/outline';
+import { HomeIcon } from '@heroicons/react/24/outline';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { HOME_PAGE_NAVIGATION_ID, STATIC_FOLDER_PLACEHOLDER } from '../../../constants';
+import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
 import { parseWinPath } from '../../../helpers/parseWinPath';
-import useThemeColors from '../../hooks/useThemeColors';
 import { SearchAtom, SelectedMediaFolderAtom, SettingsAtom } from '../../state';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -18,7 +17,6 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
   const [, setSearchValue] = useRecoilState(SearchAtom);
   const [folders, setFolders] = React.useState<string[]>([]);
   const settings = useRecoilValue(SettingsAtom);
-  const { getColors } = useThemeColors();
 
   const updateFolder = (folder: string) => {
     setSearchValue('');
@@ -86,12 +84,9 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
         <div className="flex items-center">
           <button
             onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)}
-            className={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={`text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`}
           >
-            <CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
+            <HomeIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
             <span className="sr-only">{l10n.t(LocalizationKey.dashboardHeaderBreadcrumbHome)}</span>
           </button>
         </div>
@@ -101,11 +96,7 @@ 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 text-[var(--vscode-tab-inactiveForeground)]`}
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
               viewBox="0 0 20 20"
@@ -116,11 +107,7 @@ 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 text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`}
             >
               {basename(folder)}
             </button>

src/dashboardWebView/components/Header/ClearFilters.tsx

@@ -1,4 +1,4 @@
-import { XCircleIcon } from '@heroicons/react/solid';
+import { XCircleIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
 import { useRecoilValue, useResetRecoilState } from 'recoil';
 import {
@@ -11,11 +11,13 @@ import {
   TagAtom,
   CategoryAtom,
   DEFAULT_TAG_STATE,
-  DEFAULT_CATEGORY_STATE
+  DEFAULT_CATEGORY_STATE,
+  FiltersAtom,
+  LocaleAtom,
+  DEFAULT_LOCALE_STATE
 } from '../../state';
 import { DefaultValue } from 'recoil';
-import { useEffect } from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
+import { useEffect, useMemo } from 'react';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -30,16 +32,19 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
   _: React.PropsWithChildren<IClearFiltersProps>
 ) => {
   const [show, setShow] = React.useState(false);
-  const { getColors } = useThemeColors();
 
   const folder = useRecoilValue(FolderSelector);
   const tag = useRecoilValue(TagSelector);
   const category = useRecoilValue(CategorySelector);
+  const locale = useRecoilValue(LocaleAtom);
+  const filters = useRecoilValue(FiltersAtom);
 
   const resetSorting = useResetRecoilState(SortingAtom);
   const resetFolder = useResetRecoilState(FolderAtom);
   const resetTag = useResetRecoilState(TagAtom);
   const resetCategory = useResetRecoilState(CategoryAtom);
+  const resetLocale = useResetRecoilState(LocaleAtom);
+  const resetFilters = useResetRecoilState(FiltersAtom);
 
   const reset = () => {
     setShow(false);
@@ -47,29 +52,34 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
     resetFolder();
     resetTag();
     resetCategory();
+    resetLocale();
+    resetFilters();
   };
 
+  const hasCustomFilters = useMemo(() => {
+    const names = Object.keys(filters);
+    return names.some((name) => filters[name]);
+  }, [filters]);
+
   useEffect(() => {
     if (
       folder !== DEFAULT_FOLDER_STATE ||
       tag !== DEFAULT_TAG_STATE ||
-      category !== DEFAULT_CATEGORY_STATE
+      category !== DEFAULT_CATEGORY_STATE ||
+      locale !== DEFAULT_LOCALE_STATE ||
+      hasCustomFilters
     ) {
       setShow(true);
     } else {
       setShow(false);
     }
-  }, [folder, tag, category]);
+  }, [folder, tag, category, locale, hasCustomFilters]);
 
   if (!show) return null;
 
   return (
     <button
-      className={`flex items-center ${getColors(
-        'hover:text-teal-600',
-        'hover:text-[var(--vscode-textLink-activeForeground)]'
-      )
-        }`}
+      className={`flex items-center hover:text-[var(--vscode-statusBarItem-errorBackground)]`}
       onClick={reset}
       title={l10n.t(LocalizationKey.dashboardHeaderClearFiltersTitle)}
     >

src/dashboardWebView/components/Header/Filter.tsx

@@ -1,9 +1,9 @@
-import { Menu } from '@headlessui/react';
-import { FilterIcon } from '@heroicons/react/solid';
 import * as React from 'react';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
+import { FunnelIcon } from '@heroicons/react/24/solid';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
 
 export interface IFilterProps {
   label: string;
@@ -25,37 +25,35 @@ export const Filter: React.FunctionComponent<IFilterProps> = ({
   }
 
   return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton
-          label={
-            <>
-              <FilterIcon className={`inline-block w-5 h-5 mr-1`} />
-              <span>{label}</span>
-            </>
-          }
-          title={activeItem || DEFAULT_VALUE}
+    <DropdownMenu>
+      <MenuButton
+        label={
+          <>
+            <FunnelIcon className={`inline-block w-4 h-4 mr-2`} />
+            <span>{label}</span>
+          </>
+        }
+        title={activeItem || DEFAULT_VALUE}
+      />
+
+      <DropdownMenuContent>
+        <MenuItem
+          title={DEFAULT_VALUE}
+          value={null}
+          isCurrent={!activeItem}
+          onClick={() => onClick(null)}
         />
 
-        <MenuItems disablePopper>
+        {items.map((option) => (
           <MenuItem
-            title={DEFAULT_VALUE}
-            value={null}
-            isCurrent={!!activeItem}
-            onClick={() => onClick(null)}
+            key={option}
+            title={option}
+            value={option}
+            isCurrent={option === activeItem}
+            onClick={() => onClick(option)}
           />
-
-          {items.map((option) => (
-            <MenuItem
-              key={option}
-              title={option}
-              value={option}
-              isCurrent={option === activeItem}
-              onClick={() => onClick(option)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };

src/dashboardWebView/components/Header/FilterInput.tsx

@@ -1,8 +1,8 @@
-import { SearchIcon, XCircleIcon } from '@heroicons/react/solid';
+import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { TextField } from '../Common/TextField';
 
 export interface IFilterInputProps {
   placeholder: string;
@@ -21,7 +21,6 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
   onReset,
   onChange
 }: React.PropsWithChildren<IFilterInputProps>) => {
-  const { getColors } = useThemeColors();
 
   return (
     <div className="flex space-x-4 flex-1">
@@ -29,32 +28,19 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
         <label htmlFor="search" className="sr-only">
           {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">
-            <SearchIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
-          </div>
 
-          <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 || l10n.t(LocalizationKey.commonSearch)}
-            value={value}
-            autoFocus={autoFocus}
-            onChange={(event: React.ChangeEvent<HTMLInputElement>) => onChange(event.target.value)}
-            disabled={!isReady}
-          />
-
-          {value && onReset && (
-            <button onClick={onReset} className="absolute inset-y-0 right-0 pr-3 flex items-center">
-              <XCircleIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
-            </button>
+        <TextField
+          name='search'
+          icon={(
+            <MagnifyingGlassIcon className={`h-4 w-4 text-[var(--vscode-input-foreground)]`} aria-hidden="true" />
           )}
-        </div>
+          value={value}
+          autoFocus={autoFocus}
+          placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
+          disabled={!isReady}
+          onChange={onChange}
+          onReset={onReset}
+        />
       </div>
     </div>
   );

src/dashboardWebView/components/Header/Filters.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { FoldersFilter } from './FoldersFilter';
+import { Filter } from './Filter';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { CategoryAtom, SettingsSelector, TagAtom, FiltersAtom, FilterValuesAtom } from '../../state';
+import { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { firstToUpper } from '../../../helpers/StringHelpers';
+import { LanguageFilter } from '../Filters/LanguageFilter';
+
+export interface IFiltersProps { }
+
+export const Filters: React.FunctionComponent<IFiltersProps> = (_: React.PropsWithChildren<IFiltersProps>) => {
+  const [crntFilters, setCrntFilters] = useRecoilState(FiltersAtom);
+  const [crntTag, setCrntTag] = useRecoilState(TagAtom);
+  const [crntCategory, setCrntCategory] = useRecoilState(CategoryAtom);
+  const filterValues = useRecoilValue(FilterValuesAtom);
+  const settings = useRecoilValue(SettingsSelector);
+  const location = useLocation();
+
+  const otherFilters = useMemo(() => settings?.filters?.filter((filter) => filter !== "pageFolders" && filter !== "tags" && filter !== "categories"), [settings?.filters]);
+
+  const otherFilterValues = useMemo(() => {
+    return otherFilters?.map((filter) => {
+      const filterName = typeof filter === "string" ? filter : filter.name;
+      const filterTitle = typeof filter === "string" ? firstToUpper(filter) : filter.title;
+      const values = filterValues?.[filterName];
+      if (!values || values.length === 0) {
+        return null;
+      }
+
+      return (
+        <Filter
+          key={filterName}
+          label={filterTitle}
+          activeItem={crntFilters[filterName]}
+          items={values}
+          onClick={(value) => setCrntFilters((prev) => {
+            let clone = Object.assign({}, prev);
+            if (!clone[filterName] && value) {
+              clone[filterName] = value;
+            } else {
+              clone[filterName] = value || "";
+            }
+            return clone;
+          })}
+        />
+      )
+    })
+  }, [otherFilters, crntFilters, filterValues, setCrntFilters]);
+
+  useEffect(() => {
+    if (location.search) {
+      const searchParams = new URLSearchParams(location.search);
+      const taxonomy = searchParams.get('taxonomy');
+      const value = searchParams.get('value');
+
+      if (taxonomy && value) {
+        if (taxonomy === 'tags') {
+          setCrntTag(value);
+        } else if (taxonomy === 'categories') {
+          setCrntCategory(value);
+        }
+      }
+
+      return;
+    }
+
+    setCrntFilters({});
+
+    setCrntTag('');
+    setCrntCategory('');
+  }, [location.search]);
+
+  return (
+    <>
+      <LanguageFilter />
+
+      {
+        settings?.filters?.includes("pageFolders") && (
+          <FoldersFilter />
+        )
+      }
+
+      {
+        settings?.filters?.includes("tags") && (
+          <Filter
+            label={`Tag`}
+            activeItem={crntTag}
+            items={settings?.tags || []}
+            onClick={(value) => setCrntTag(value)}
+          />
+        )
+      }
+
+      {
+        settings?.filters?.includes("categories") && (
+          <Filter
+            label={`Category`}
+            activeItem={crntCategory}
+            items={settings?.categories || []}
+            onClick={(value) => setCrntCategory(value)}
+          />
+        )
+      }
+
+      {otherFilterValues}
+    </>
+  );
+};

src/dashboardWebView/components/Header/Folders.tsx

@@ -1,49 +0,0 @@
-import { Menu } from '@headlessui/react';
-import * as React from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { FolderAtom, SettingsSelector } from '../../state';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
-import * as l10n from '@vscode/l10n';
-import { LocalizationKey } from '../../../localization';
-
-export interface IFoldersProps { }
-
-export const Folders: React.FunctionComponent<
-  IFoldersProps
-> = ({ }: React.PropsWithChildren<IFoldersProps>) => {
-  const DEFAULT_TYPE = l10n.t(LocalizationKey.dashboardHeaderFoldersDefault);
-  const [crntFolder, setCrntFolder] = useRecoilState(FolderAtom);
-  const settings = useRecoilValue(SettingsSelector);
-  const contentFolders = settings?.contentFolders || [];
-
-  if (contentFolders.length <= 1) {
-    return null;
-  }
-
-  return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderFoldersMenuButtonShowing)} title={crntFolder || DEFAULT_TYPE} />
-
-        <MenuItems disablePopper>
-          <MenuItem
-            title={DEFAULT_TYPE}
-            value={null}
-            isCurrent={!crntFolder}
-            onClick={(value) => setCrntFolder(value)}
-          />
-
-          {contentFolders.map((option) => (
-            <MenuItem
-              key={option.title}
-              title={option.title}
-              value={option.title}
-              isCurrent={option.title === crntFolder}
-              onClick={(value) => setCrntFolder(value)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
-  );
-};

src/dashboardWebView/components/Header/FoldersFilter.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { FolderAtom, SettingsSelector } from '../../state';
+import { MenuButton, MenuItem } from '../Menu';
+import * as l10n from '@vscode/l10n';
+import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';
+
+export interface IFoldersFilterProps { }
+
+export const FoldersFilter: React.FunctionComponent<
+  IFoldersFilterProps
+> = ({ }: React.PropsWithChildren<IFoldersFilterProps>) => {
+  const DEFAULT_TYPE = l10n.t(LocalizationKey.dashboardHeaderFoldersDefault);
+  const [crntFolder, setCrntFolder] = useRecoilState(FolderAtom);
+  const settings = useRecoilValue(SettingsSelector);
+  const contentFolders = settings?.contentFolders || [];
+
+  if (contentFolders.length <= 1) {
+    return null;
+  }
+
+  return (
+    <DropdownMenu>
+      <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderFoldersMenuButtonShowing)} title={crntFolder || DEFAULT_TYPE} />
+
+      <DropdownMenuContent>
+        <MenuItem
+          title={DEFAULT_TYPE}
+          value={null}
+          isCurrent={!crntFolder}
+          onClick={(value) => setCrntFolder(value)}
+        />
+
+        {contentFolders.map((option) => (
+          <MenuItem
+            key={option.title}
+            title={option.title}
+            value={option.title}
+            isCurrent={option.title === crntFolder}
+            onClick={(value) => setCrntFolder(value)}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

src/dashboardWebView/components/Header/Grouping.tsx

@@ -1,11 +1,11 @@
-import { Menu } from '@headlessui/react';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { GroupOption } from '../../constants/GroupOption';
 import { AllPagesAtom, GroupingAtom } from '../../state';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
 
 export interface IGroupingProps { }
 
@@ -42,22 +42,20 @@ export const Grouping: React.FunctionComponent<
   }
 
   return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderGroupingMenuButtonLabel)} title={crntGroup?.name || ''} />
+    <DropdownMenu>
+      <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderGroupingMenuButtonLabel)} title={crntGroup?.name || ''} />
 
-        <MenuItems disablePopper>
-          {GROUP_OPTIONS.map((option) => (
-            <MenuItem
-              key={option.id}
-              title={option.name}
-              value={option.id}
-              isCurrent={option.id === crntGroup?.id}
-              onClick={(value) => setGroup(value)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
+      <DropdownMenuContent>
+        {GROUP_OPTIONS.map((option) => (
+          <MenuItem
+            key={option.id}
+            title={option.name}
+            value={option.id}
+            isCurrent={option.id === crntGroup?.id}
+            onClick={(value) => setGroup(value)}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };

src/dashboardWebView/components/Header/Header.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { Sorting } from './Sorting';
 import { Searchbox } from './Searchbox';
-import { Filter } from './Filter';
-import { Folders } from './Folders';
 import { Settings, NavigationType } from '../../models';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Grouping } from '.';
 import { ViewSwitch } from './ViewSwitch';
-import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
-import { CategoryAtom, GroupingSelector, SortingAtom, TagAtom } from '../../state';
+import { useRecoilValue, useResetRecoilState } from 'recoil';
+import { GroupingSelector, SortingAtom } from '../../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { ClearFilters } from './ClearFilters';
 import { MediaHeaderTop } from '../Media/MediaHeaderTop';
@@ -16,7 +14,8 @@ import { ChoiceButton } from '../Common/ChoiceButton';
 import { MediaHeaderBottom } from '../Media/MediaHeaderBottom';
 import { Tabs } from './Tabs';
 import { CustomScript } from '../../../models';
-import { LightningBoltIcon, PlusIcon } from '@heroicons/react/outline';
+import { ArrowTopRightOnSquareIcon, BoltIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { HeartIcon } from '@heroicons/react/24/solid';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
 import { useEffect, useMemo } from 'react';
@@ -25,12 +24,14 @@ import { Pagination } from './Pagination';
 import { GroupOption } from '../../constants/GroupOption';
 import usePagination from '../../hooks/usePagination';
 import { PaginationStatus } from './PaginationStatus';
-import useThemeColors from '../../hooks/useThemeColors';
 import { Navigation } from './Navigation';
 import { ProjectSwitcher } from './ProjectSwitcher';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { SettingsLink } from '../SettingsView/SettingsLink';
+import { Link } from '../Common/Link';
+import { SPONSOR_LINK } from '../../../constants';
+import { Filters } from './Filters';
 
 export interface IHeaderProps {
   header?: React.ReactNode;
@@ -48,14 +49,11 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
   totalPages,
   settings
 }: React.PropsWithChildren<IHeaderProps>) => {
-  const [crntTag, setCrntTag] = useRecoilState(TagAtom);
-  const [crntCategory, setCrntCategory] = useRecoilState(CategoryAtom);
   const grouping = useRecoilValue(GroupingSelector);
   const resetSorting = useResetRecoilState(SortingAtom);
   const location = useLocation();
   const navigate = useNavigate();
   const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination);
-  const { getColors } = useThemeColors();
 
   const createContent = () => {
     Messenger.send(DashboardMessage.createContent);
@@ -83,7 +81,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
     .map((s, idx) => ({
       title: (
         <div key={idx} className="flex items-center">
-          <LightningBoltIcon className="w-4 h-4 mr-2" />
+          <BoltIcon className="w-4 h-4 mr-2" />
           <span>{s.title}</span>
         </div>
       ),
@@ -122,43 +120,40 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
     return [];
   }, [settings?.dashboardState?.contents?.templatesEnabled]);
 
-  useEffect(() => {
-    if (location.search) {
-      const searchParams = new URLSearchParams(location.search);
-      const taxonomy = searchParams.get('taxonomy');
-      const value = searchParams.get('value');
-
-      if (taxonomy && value) {
-        if (taxonomy === 'tags') {
-          setCrntTag(value);
-        } else if (taxonomy === 'categories') {
-          setCrntCategory(value);
-        }
-      }
-
-      return;
-    }
-
-    setCrntTag('');
-    setCrntCategory('');
-  }, [location.search]);
-
   return (
-    <div className={`w-full sticky top-0 z-20 ${getColors(
-      `bg-gray-100 dark:bg-vulcan-500`,
-      `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`
-    )
-      }`}>
-      <div className={`mb-0 border-b flex justify-between ${getColors(
-        `bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300`,
-        `bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--vscode-editorWidget-border)]`
-      )
-        }`}>
+    <div className={`w-full sticky top-0 z-20 bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`}>
+      <div className={`mb-0 border-b flex justify-between bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}>
         <Tabs onNavigate={updateView} />
 
-        <div className='flex'>
+        <div className='flex items-center space-x-2 pr-4'>
           <ProjectSwitcher />
 
+          {
+            settings?.websiteUrl && (
+              <Link
+                className='inline-flex items-center'
+                href={settings?.websiteUrl}
+                title={settings?.websiteUrl}>
+                <span>{settings?.websiteUrl}</span>
+
+                <ArrowTopRightOnSquareIcon className='w-4 h-4 ml-1' aria-hidden="true" />
+              </Link>
+            )
+          }
+
+          {
+            !settings?.isBacker && (
+              <Link
+                className='inline-flex items-center text-[var(--vscode-badge-background)]'
+                title={l10n.t(LocalizationKey.commonSupport)}
+                href={SPONSOR_LINK}
+              >
+                <span className='sr-only'>{l10n.t(LocalizationKey.commonSupport)}</span>
+                <HeartIcon className='w-4 h-4' aria-hidden="true" />
+              </Link>
+            )
+          }
+
           <SettingsLink onNavigate={updateView} />
         </div>
       </div>
@@ -169,7 +164,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
             <Searchbox />
 
             <div className={`flex items-center justify-end space-x-4 flex-1`}>
-              <SyncButton />
+              {/* <SyncButton /> */}
 
               <ChoiceButton
                 title={l10n.t(LocalizationKey.dashboardHeaderHeaderCreateContent)}
@@ -180,8 +175,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
             </div>
           </div>
 
-          <div className={`px-4 flex flex-row items-center border-b justify-between ${getColors(`border-gray-200 dark:border-vulcan-100`, `border-[var(--vscode-editorWidget-border)]`)
-            }`}>
+          <div className={`px-4 flex flex-row items-center border-b justify-between border-[var(--frontmatter-border)]`}>
             <div>
               <Navigation totalPages={totalPages || 0} />
             </div>
@@ -192,26 +186,11 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
           </div>
 
           <div
-            className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end border-b space-x-4 lg:space-x-6 xl:space-x-8 ${getColors(`bg-gray-200 border-gray-300 dark:bg-vulcan-400 dark:border-vulcan-100`, `bg-[var(--vscode-panel-background)] border-[var(--vscode-editorWidget-border)]`)
-              }`}
+            className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end border-b space-x-4 lg:space-x-6 xl:space-x-8 bg-[var(--vscode-panel-background)] border-[var(--frontmatter-border)]`}
           >
             <ClearFilters />
 
-            <Folders />
-
-            <Filter
-              label={`Tag`}
-              activeItem={crntTag}
-              items={settings?.tags || []}
-              onClick={(value) => setCrntTag(value)}
-            />
-
-            <Filter
-              label={`Category`}
-              activeItem={crntCategory}
-              items={settings?.categories || []}
-              onClick={(value) => setCrntCategory(value)}
-            />
+            <Filters />
 
             <Grouping />
 
@@ -222,8 +201,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
             (totalPages || 0) > pageSetNr &&
             (!grouping || grouping === GroupOption.none) && (
               <div
-                className={`px-4 flex justify-between py-2 border-b ${getColors(`border-gray-300 dark:border-vulcan-100`, `border-[var(--vscode-editorWidget-border)]`)
-                  }`}
+                className={`px-4 flex justify-between py-2 border-b border-[var(--frontmatter-border)]`}
               >
                 <PaginationStatus totalPages={totalPages || 0} />
 

src/dashboardWebView/components/Header/Navigation.tsx

@@ -51,6 +51,11 @@ export const Navigation: React.FunctionComponent<INavigationProps> = ({
 
     if (settings?.draftField?.type === 'boolean' && tabInfo && Object.keys(tabInfo).length > 1) {
       crntTabs.push({ name: l10n.t(LocalizationKey.dashboardHeaderNavigationPublished), id: Tab.Published });
+
+      if (tabInfo.scheduled) {
+        crntTabs.push({ name: l10n.t(LocalizationKey.dashboardHeaderNavigationScheduled), id: Tab.Scheduled });
+      }
+
       crntTabs.push({ name: l10n.t(LocalizationKey.dashboardHeaderNavigationDraft), id: Tab.Draft });
     }
 

src/dashboardWebView/components/Header/Pagination.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 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';
@@ -23,7 +22,6 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
     totalPages,
     totalMedia
   );
-  const { getColors } = useThemeColors();
 
   const getButtons = useCallback((): number[] => {
     const maxButtons = 5;
@@ -77,12 +75,8 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
             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)]`
-            )
-            }`}
+            ? `px-2 bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]`
+            : `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}`}
         >
           {button + 1}
         </button>

src/dashboardWebView/components/Header/PaginationButton.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IPaginationButtonProps {
   title: string;
@@ -12,18 +11,11 @@ export const PaginationButton: React.FunctionComponent<IPaginationButtonProps> =
   disabled,
   onClick
 }: React.PropsWithChildren<IPaginationButtonProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <button
       disabled={disabled}
       onClick={onClick}
-      className={`disabled:opacity-50 ${
-        getColors(
-          'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500 disabled:hover:text-gray-500 dark:disabled:hover:text-whisper-900',
-          'text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
-        )
-      }`}
+      className={`disabled:opacity-50 text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}
     >
       {title}
     </button>

src/dashboardWebView/components/Header/PaginationStatus.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useMemo } from 'react';
 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';
@@ -22,8 +21,6 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =
     totalPages || 0,
     totalMedia
   );
-  const { getColors } = useThemeColors();
-
   const totelItemsOnPage = useMemo(() => {
     const items = (page + 1) * pageSetNr;
     if (totalItems < items) {
@@ -34,11 +31,7 @@ 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)]'
-      )
-        }`}>
+      <p className={`text-sm text-[var(--vscode-tab-inactiveForeground)]`}>
         {
           l10n.t(LocalizationKey.dashboardHeaderPaginationStatusText,
             (page * pageSetNr + 1),

src/dashboardWebView/components/Header/ProjectSwitcher.tsx

@@ -1,13 +1,13 @@
 import { messageHandler } from '@estruyf/vscode/dist/client';
-import { Menu } from '@headlessui/react';
-import { SwitchHorizontalIcon } from '@heroicons/react/outline';
+import { ArrowsRightLeftIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
 import { SettingsSelector } from '../../state';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
 
 export interface IProjectSwitcherProps { }
 
@@ -32,18 +32,18 @@ export const ProjectSwitcher: React.FunctionComponent<IProjectSwitcherProps> = (
   }
 
   return (
-    <div className="flex items-center mr-4 z-[51]">
-      <Menu as="div" className="relative z-10 inline-block text-left">
+    <div className="mr-4 z-[51]">
+      <DropdownMenu>
         <MenuButton
           label={(
             <div className="inline-flex items-center">
-              <SwitchHorizontalIcon className="h-4 w-4 mr-2" />
+              <ArrowsRightLeftIcon className="h-4 w-4 mr-2" />
               <span>{l10n.t(LocalizationKey.dashboardHeaderProjectSwitcherLabel)}</span>
             </div>
           )}
           title={crntProject} />
 
-        <MenuItems disablePopper>
+        <DropdownMenuContent>
           {projects.map((p) => (
             <MenuItem
               key={p.name}
@@ -53,8 +53,8 @@ export const ProjectSwitcher: React.FunctionComponent<IProjectSwitcherProps> = (
               onClick={(value) => setProject(p.name)}
             />
           ))}
-        </MenuItems>
-      </Menu>
-    </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div >
   );
 };

src/dashboardWebView/components/Header/RefreshDashboardData.tsx

@@ -1,10 +1,9 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { RefreshIcon } from '@heroicons/react/outline';
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { useCallback } from 'react';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
-import useThemeColors from '../../hooks/useThemeColors';
 import { NavigationType } from '../../models';
 import {
   CategoryAtom,
@@ -37,7 +36,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
 
   const refreshPages = () => {
-    setLoading(true);
+    setLoading("initPages");
     resetSearch();
     resetSorting();
     resetFolder();
@@ -47,7 +46,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
   };
 
   const refreshMedia = () => {
-    setLoading(true);
+    setLoading("initPages");
     resetPage();
     resetSearch();
     Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder });
@@ -67,7 +66,7 @@ export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardData
       title={l10n.t(LocalizationKey.dashboardHeaderRefreshDashboardLabel)}
       onClick={refresh}
     >
-      <RefreshIcon className={`h-5 w-5`} />
+      <ArrowPathIcon className={`h-5 w-5`} />
       <span className="sr-only">{l10n.t(LocalizationKey.dashboardHeaderRefreshDashboardLabel)}</span>
     </button>
   );

src/dashboardWebView/components/Header/Searchbox.tsx

@@ -1,12 +1,12 @@
-import { SearchIcon, XCircleIcon } from '@heroicons/react/solid';
+import { MagnifyingGlassIcon, XCircleIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 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';
+import { TextField } from '../Common/TextField';
 
 export interface ISearchboxProps {
   placeholder?: string;
@@ -19,10 +19,9 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
   const [debounceSearchValue, setDebounceValue] = useRecoilState(SearchAtom);
   const searchReady = useRecoilValue(SearchReadyAtom);
   const debounceSearch = useDebounce<string>(value, 500);
-  const { getColors } = useThemeColors();
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setValue(event.target.value);
+  const handleChange = (newValue: string) => {
+    setValue(newValue);
   };
 
   const reset = React.useCallback(() => {
@@ -46,31 +45,18 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
         <label htmlFor="search" className="sr-only">
           {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">
-            <SearchIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
-          </div>
 
-          <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 || l10n.t(LocalizationKey.commonSearch)}
-            value={value}
-            onChange={handleChange}
-            disabled={!searchReady}
-          />
-
-          {value && (
-            <button onClick={reset} className="absolute inset-y-0 right-0 pr-3 flex items-center">
-              <XCircleIcon className={`h-5 w-5 ${getColors(`text-gray-400`, 'text-[var(--vscode-input-foreground)]')}`} aria-hidden="true" />
-            </button>
+        <TextField
+          name='search'
+          icon={(
+            <MagnifyingGlassIcon className={`h-4 w-4 text-[var(--vscode-input-foreground)]`} aria-hidden="true" />
           )}
-        </div>
+          value={value}
+          placeholder={placeholder || l10n.t(LocalizationKey.commonSearch)}
+          disabled={!searchReady}
+          onChange={handleChange}
+          onReset={reset}
+        />
       </div>
 
       <RefreshDashboardData />

src/dashboardWebView/components/Header/Sorting.tsx

@@ -1,5 +1,4 @@
-import { Messenger } from '@estruyf/vscode/dist/client';
-import { Menu } from '@headlessui/react';
+import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { ExtensionState } from '../../../constants';
@@ -9,10 +8,11 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { NavigationType } from '../../models';
 import { SortingOption } from '../../models/SortingOption';
 import { SearchSelector, SettingsSelector, SortingAtom } from '../../state';
-import { MenuButton, MenuItem, MenuItems } from '../Menu';
+import { MenuButton, MenuItem } from '../Menu';
 import { Sorting as SortingHelpers } from '../../../helpers/Sorting';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
 
 export interface ISortingProps {
   disableCustomSorting?: boolean;
@@ -26,6 +26,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
   const [crntSorting, setCrntSorting] = useRecoilState(SortingAtom);
   const searchValue = useRecoilValue(SearchSelector);
   const settings = useRecoilValue(SettingsSelector);
+  const [crntSort, setCrntSort] = React.useState<SortingOption | null>(null);
 
   const sortOptions: SortingOption[] = [
     {
@@ -143,51 +144,57 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
     ];
   }
 
-  let crntSortingOption = crntSorting;
-  if (!crntSortingOption) {
-    if (view === NavigationType.Contents) {
-      crntSortingOption = settings?.dashboardState?.contents?.sorting || null;
-    } else if (view === NavigationType.Media) {
-      crntSortingOption = settings?.dashboardState?.media?.sorting || null;
-    }
+  React.useEffect(() => {
+    const getSorting = async () => {
+      let crntSortingOption = crntSorting;
+      if (!crntSortingOption) {
+        const sortingState = await messageHandler.request<{ key: string; value: SortingOption; }>(DashboardMessage.getState, { key: view === NavigationType.Media ? ExtensionState.Dashboard.Media.Sorting : ExtensionState.Dashboard.Contents.Sorting });
+        crntSortingOption = sortingState?.value || null;
 
-    if (crntSortingOption === null) {
-      if (view === NavigationType.Contents && settings?.dashboardState.contents.defaultSorting) {
-        crntSortingOption =
-          allOptions.find((f) => f.id === settings?.dashboardState.contents.defaultSorting) || null;
-      } else if (
-        view === NavigationType.Media &&
-        settings?.dashboardState.contents.defaultSorting
-      ) {
-        crntSortingOption =
-          allOptions.find((f) => f.id === settings?.dashboardState.contents.defaultSorting) || null;
+        if (crntSortingOption === null) {
+          if (view === NavigationType.Contents && settings?.dashboardState.contents.defaultSorting) {
+            crntSortingOption =
+              allOptions.find((f) => f.id === settings?.dashboardState.contents.defaultSorting) || null;
+          } else if (
+            view === NavigationType.Media &&
+            settings?.dashboardState.media.defaultSorting
+          ) {
+            crntSortingOption =
+              allOptions.find((f) => f.id === settings?.dashboardState.media.defaultSorting) || null;
+          }
+        }
       }
-    }
+
+      let sort = allOptions.find((x) => x.id === crntSortingOption?.id) || sortOptions[0];
+      setCrntSort(sort);
+    };
+
+    getSorting();
+  }, [crntSorting]);
+
+  if (crntSort === null) {
+    return null;
   }
 
-  let crntSort = allOptions.find((x) => x.id === crntSortingOption?.id) || sortOptions[0];
-
   return (
-    <div className="flex items-center">
-      <Menu as="div" className="relative z-10 inline-block text-left">
-        <MenuButton
-          label={l10n.t(LocalizationKey.dashboardHeaderSortingLabel)}
-          title={crntSort?.title || crntSort?.name || ''}
-          disabled={!!searchValue}
-        />
+    <DropdownMenu>
+      <MenuButton
+        label={l10n.t(LocalizationKey.dashboardHeaderSortingLabel)}
+        title={crntSort?.title || crntSort?.name || ''}
+        disabled={!!searchValue}
+      />
 
-        <MenuItems widthClass="w-48" disablePopper>
-          {allOptions.map((option) => (
-            <MenuItem
-              key={option.id}
-              title={option.title || option.name}
-              value={option}
-              isCurrent={option.id === crntSort.id}
-              onClick={(value) => updateSorting(value)}
-            />
-          ))}
-        </MenuItems>
-      </Menu>
-    </div>
+      <DropdownMenuContent>
+        {allOptions.map((option) => (
+          <MenuItem
+            key={option.id}
+            title={option.title || option.name}
+            value={option}
+            isCurrent={option.id === crntSort.id}
+            onClick={(value) => updateSorting(value)}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
   );
 };

src/dashboardWebView/components/Header/SyncButton.tsx

@@ -1,11 +1,10 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { EventData } from '@estruyf/vscode/dist/models';
-import { RefreshIcon } from '@heroicons/react/outline';
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { useEffect, useState } from 'react';
 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';
@@ -17,18 +16,17 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
 ) => {
   const settings = useRecoilValue(SettingsSelector);
   const [isSyncing, setIsSyncing] = useState(false);
-  const { getColors } = useThemeColors();
 
   const pull = () => {
-    Messenger.send(GeneralCommands.toVSCode.gitSync);
+    Messenger.send(GeneralCommands.toVSCode.git.sync);
   };
 
   const messageListener = (message: MessageEvent<EventData<any>>) => {
     const { command } = message.data;
 
-    if (command === GeneralCommands.toWebview.gitSyncingStart) {
+    if (command === GeneralCommands.toWebview.git.syncingStart) {
       setIsSyncing(true);
-    } else if (command === GeneralCommands.toWebview.gitSyncingEnd) {
+    } else if (command === GeneralCommands.toWebview.git.syncingEnd) {
       setIsSyncing(false);
     }
   };
@@ -49,15 +47,11 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
     <div className="git_actions">
       <button
         type="button"
-        className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded ${getColors(
-          `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
-          `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-        )
-          }`}
+        className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
         onClick={pull}
         disabled={isSyncing}
       >
-        <RefreshIcon
+        <ArrowPathIcon
           className={`w-4 h-4 mr-2 ${isSyncing ? 'animate-reverse-spin' : ''}`}
           aria-hidden="true"
         />

src/dashboardWebView/components/Header/Tabs.tsx

@@ -1,4 +1,4 @@
-import { DatabaseIcon, PhotographIcon, ScissorsIcon, TagIcon } from '@heroicons/react/outline';
+import { CircleStackIcon, PhotoIcon, ScissorsIcon, TagIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { FeatureFlag } from '../../../components/features/FeatureFlag';
@@ -33,7 +33,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
       </li>
       <li className="mr-2" role="presentation">
         <Tab navigationType={NavigationType.Media} onNavigate={onNavigate}>
-          <PhotographIcon className={`h-6 w-auto mr-2`} />
+          <PhotoIcon className={`h-6 w-auto mr-2`} />
           <span>{l10n.t(LocalizationKey.dashboardHeaderTabsMedia)}</span>
         </Tab>
       </li>
@@ -48,7 +48,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
       <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.data.view}>
         <li className="mr-2" role="presentation">
           <Tab navigationType={NavigationType.Data} onNavigate={onNavigate}>
-            <DatabaseIcon className={`h-6 w-auto mr-2`} />
+            <CircleStackIcon className={`h-6 w-auto mr-2`} />
             <span>{l10n.t(LocalizationKey.dashboardHeaderTabsData)}</span>
           </Tab>
         </li>

src/dashboardWebView/components/Header/ViewSwitch.tsx

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { ViewAtom, SettingsSelector } from '../../state';
-import { ViewListIcon, ViewGridIcon } from '@heroicons/react/solid';
+import { Bars4Icon, Squares2X2Icon } from '@heroicons/react/24/solid';
 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';
 
@@ -16,7 +15,6 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
 ) => {
   const [view, setView] = useRecoilState(ViewAtom);
   const settings = useRecoilValue(SettingsSelector);
-  const { getColors } = useThemeColors();
 
   const toggleView = () => {
     const newView =
@@ -32,27 +30,27 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
   }, [settings?.pageViewType]);
 
   return (
-    <div className={`flex rounded-sm lg:mb-1 ${getColors('bg-vulcan-50', 'bg-[var(--vscode-button-secondaryBackground)]')}`}>
+    <div className={`flex rounded-sm lg:mb-1 bg-[var(--vscode-button-secondaryBackground)]`}>
       <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)]'
+        className={`flex items-center px-2 py-1 rounded-l-sm ${view === DashboardViewType.Grid ? `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`} />
+        <Squares2X2Icon className={`w-4 h-4`} />
         <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)]'
+        className={`flex items-center px-2 py-1 rounded-r-sm ${view === DashboardViewType.List ? `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`} />
+        <Bars4Icon className={`w-4 h-4`} />
         <span className={`sr-only`}>
           {l10n.t(LocalizationKey.dashboardHeaderViewSwitchToList)}
         </span>