Fix template loading with proper error handling

Co-authored-by: estruyf <2900833+estruyf@users.noreply.github.com>

.eslintrc.json

@@ -12,6 +12,9 @@
     "no-throw-literal": "error",
     "no-unused-expressions": "error",
     "curly": "error",
-    "class-methods-use-this": "warn"
+    "class-methods-use-this": "warn",
+    "no-console": "warn",
+    "@typescript-eslint/no-empty-interface": "off",
+    "no-extra-boolean-cast": "off"
   }
 }

.github/actions/localization/action.yml

@@ -20,7 +20,7 @@ runs:
   steps:
     - uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: 20
         registry-url: https://registry.npmjs.org/
         cache: 'npm'
 
@@ -42,5 +42,6 @@ runs:
 
     - uses: actions/upload-artifact@v4
       with:
+        include-hidden-files: true
         name: ${{ inputs.PACKAGE_NAME }}
         path: .

.github/workflows/release-beta.yml

@@ -41,7 +41,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
           cache: 'npm'
 
@@ -69,7 +69,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
           cache: 'npm'
 

.github/workflows/release.yml

@@ -41,7 +41,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
           cache: 'npm'
 
@@ -69,7 +69,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           registry-url: https://registry.npmjs.org/
           cache: 'npm'
 

.vscode/settings.json

@@ -10,12 +10,6 @@
       "values": ["#build", "#deploy", "#skip"]
     }
   ],
-  "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
   },

CHANGELOG.md

@@ -1,5 +1,106 @@
 # Change Log
 
+## [10.8.0] - 2025-02-27 - [Release notes](https://beta.frontmatter.codes/updates/v10.8.0)
+
+### 🎨 Enhancements
+
+- [#915](https://github.com/estruyf/vscode-front-matter/issues/915): Added a new setting `frontMatter.panel.openOnSupportedFile` which allows you to open the panel view on supported files
+- [#921](https://github.com/estruyf/vscode-front-matter/issues/921): Improve the filename sanitization
+- [#922](https://github.com/estruyf/vscode-front-matter/issues/922): Added `{{fileName}}` and `{{sluggedFileName}}` placeholders for the slug template setting
+
+### 🐞 Fixes
+
+- Fix for media folder parsing on Windows
+- Refresh button was not available on the media dashboard when having custom scripts defined
+- [#909](https://github.com/estruyf/vscode-front-matter/issues/909): Schema fix for the view modes
+- [#913](https://github.com/estruyf/vscode-front-matter/issues/913): Fix for relative media paths in page bundles
+- [#914](https://github.com/estruyf/vscode-front-matter/issues/914): Fix sanitizing of default filenames with an `_` in it
+
+## [10.7.0] - 2024-12-31 - [Release notes](https://beta.frontmatter.codes/updates/v10.7.0)
+
+### 🎨 Enhancements
+
+- [#405](https://github.com/estruyf/vscode-front-matter/issues/405): Added new `frontMatter.content.grouping` setting which allows you to define custom "group by" options
+- [#705](https://github.com/estruyf/vscode-front-matter/issues/705): UX improvements for the panel view
+- [#887](https://github.com/estruyf/vscode-front-matter/issues/887): Added new `frontMatter.global.timezone` setting, by default it is set to `UTC` for date formatting
+- [#888](https://github.com/estruyf/vscode-front-matter/issues/888): Added the ability to prompt GitHub Copilot from a custom script/action
+- [#892](https://github.com/estruyf/vscode-front-matter/issues/892): Added media folder common actions
+
+### 🐞 Fixes
+
+- [#895](https://github.com/estruyf/vscode-front-matter/issues/895): Fix issue with array values in filters
+
+## [10.6.0] - 2024-11-06 - [Release notes](https://beta.frontmatter.codes/updates/v10.6.0)
+
+### 🎨 Enhancements
+
+- [#878](https://github.com/estruyf/vscode-front-matter/issues/878): Allow the `select all` button to work on other pages when there is a selection present
+- [#882](https://github.com/estruyf/vscode-front-matter/issues/882): Dynamic evaluation of the `node` executable path
+- [#884](https://github.com/estruyf/vscode-front-matter/issues/884): Hide WYSIWYG actions when the file is in git diff mode
+
+### 🐞 Fixes
+
+- [#859](https://github.com/estruyf/vscode-front-matter/issues/859): Fix label in the data view dropdown field
+- [#876](https://github.com/estruyf/vscode-front-matter/issues/876): Fix snippet type on the snippet card
+- [#879](https://github.com/estruyf/vscode-front-matter/issues/879): Fix for auto updating last modified date on save
+- [#885](https://github.com/estruyf/vscode-front-matter/issues/885): Fix content relationship for none i18n content
+
+## [10.5.1] - 2024-10-23
+
+### 🎨 Enhancements
+
+- [#873](https://github.com/estruyf/vscode-front-matter/issues/873): Add retry logic to get the AI model for calling GitHub Copilot
+
+### 🐞 Fixes
+
+- [#872](https://github.com/estruyf/vscode-front-matter/issues/872): Check the default field value as well for the field's `when` clause
+- [#874](https://github.com/estruyf/vscode-front-matter/issues/874): Fix media snippet markup insertion to article content's
+- [#875](https://github.com/estruyf/vscode-front-matter/issues/875): Clean up the exclamation marks from the file name when creating new content
+
+## [10.5.0] - 2024-10-21 - [Release notes](https://beta.frontmatter.codes/updates/v10.5.0)
+
+### 🎨 Enhancements
+
+- [#840](https://github.com/estruyf/vscode-front-matter/issues/840): Added the `excludePaths` option for the content folder settings
+- [#850](https://github.com/estruyf/vscode-front-matter/issues/850): Extended the i18n/language button to open or create new language files (thanks to [Dennis Zoma](https://github.com/wottpal))
+- [#851](https://github.com/estruyf/vscode-front-matter/issues/851): Added `sameContentLocale` option to `contentRelationship` field (thanks to [Dennis Zoma](https://github.com/wottpal))
+- [#866](https://github.com/estruyf/vscode-front-matter/issues/866): Support Markdown in the WYSIWYG `string` field
+
+### 🐞 Fixes
+
+- [#858](https://github.com/estruyf/vscode-front-matter/issues/858): Fix button styling on the data screen
+- [#860](https://github.com/estruyf/vscode-front-matter/issues/860): Fix typo on the data screen
+- [#870](https://github.com/estruyf/vscode-front-matter/issues/870): Fix data number field styling
+
+## [10.4.1] - 2024-09-27
+
+- [#855](https://github.com/estruyf/vscode-front-matter/issues/855): Fix in panel sections
+
+## [10.4.0] - 2024-09-25 - [Release notes](https://beta.frontmatter.codes/updates/v10.4.0)
+
+### ✨ New features
+
+- [#844](https://github.com/estruyf/vscode-front-matter/issues/844): New `{{filePrefix.index}}` placeholder to add the index number of the file in the folder
+
+### 🎨 Enhancements
+
+- [#833](https://github.com/estruyf/vscode-front-matter/issues/833): Added support for Asciidoc files
+- [#834](https://github.com/estruyf/vscode-front-matter/issues/834): Added the ability to create new data files for a data folder
+- [#841](https://github.com/estruyf/vscode-front-matter/issues/841): Enable placeholders for file prefixes
+- [#846](https://github.com/estruyf/vscode-front-matter/issues/846): Added GitHub Copilot action for title field
+- [#848](https://github.com/estruyf/vscode-front-matter/issues/848): Set the default GitHub Copilot model to `gpt-4o-mini`
+
+### 🐞 Fixes
+
+- [#842](https://github.com/estruyf/vscode-front-matter/issues/842): Allow to set the `frontMatter.taxonomy.slugTemplate` setting to an empty string
+- [#845](https://github.com/estruyf/vscode-front-matter/issues/845): Fix empty values for number fields
+- [#849](https://github.com/estruyf/vscode-front-matter/issues/849): Show fields which are not empty in the metadata panel
+- [#853](https://github.com/estruyf/vscode-front-matter/issues/853): Allow empty values in date fields
+
+### 🚧 Work in progress
+
+- [#837](https://github.com/estruyf/vscode-front-matter/issues/837): Replacing the VSCode Webview UI Toolkit with [vscrui](https://github.com/estruyf/vscrui) due to the deprecation of the VSCode Webview UI Toolkit library
+
 ## [10.3.0] - 2024-08-13 - [Release notes](https://beta.frontmatter.codes/updates/v10.3.0)
 
 ### ✨ New features

README.beta.md

@@ -182,7 +182,7 @@ You can open showcase issues for the following things:
 ## 💚 Backers & Sponsors 👇 🤘
 
 <p align="center">
-  <img src="https://frontmatter.codes/api/img-sponsors" alt="Front Matter sponsors" />
+  <img src="https://api.frontmatter.codes/img-sponsors" alt="Front Matter sponsors" />
 </p>
 
 <br />

README.md

@@ -180,7 +180,7 @@ You can open showcase issues for the following things:
 ## 💚 Backers & Sponsors 👇 🤘
 
 <p align="center">
-  <img src="https://frontmatter.codes/api/img-sponsors" alt="Front Matter sponsors" />
+  <img src="https://api.frontmatter.codes/img-sponsors" alt="Front Matter sponsors" />
 </p>
 
 <br />

assets/media/styles.css

@@ -75,7 +75,7 @@
 }
 
 .frontmatter h3 {
-  margin-bottom: 1rem;
+  /* margin-bottom: 1rem; */
 }
 
 .frontmatter p,
@@ -99,11 +99,6 @@
   margin-right: 0.5rem;
 }
 
-.seo__status__details,
-.seo__status__keywords {
-  margin-bottom: 1rem;
-}
-
 .collapsible__body h4 {
   text-align: center;
   font-weight: bold;
@@ -131,7 +126,8 @@
 }
 
 .article__tags__dropbox.open {
-  border: 1px solid rgba(0, 0, 0, 0.9);
+  border: 1px solid var(--vscode-focusBorder);
+  width: 100%;
 }
 
 .article__tags ul {
@@ -224,6 +220,7 @@
   text-decoration: none;
   width: 100%;
   white-space: nowrap;
+  border-radius: 0.25rem;
 }
 
 .ext_link_block button.active {

l10n/bundle.l10n.de.json

@@ -258,9 +258,6 @@
   "panel.fields.textField.limit": "Feldgrenze erreicht {0}",
   "panel.fields.wrapperField.unknown": "Unbekannter Feldtyp: {0}",
   "panel.actions.title": "Aktionen",
-  "panel.articleDetails.title": "Weitere Details",
-  "panel.articleDetails.type": "Typ",
-  "panel.articleDetails.total": "Gesamt",
   "panel.articleDetails.headings": "Überschriften",
   "panel.articleDetails.paragraphs": "Absätze",
   "panel.articleDetails.internalLinks": "Interne Links",
@@ -299,16 +296,13 @@
   "panel.publishAction.publish": "Veröffentlichen",
   "panel.publishAction.unpublish": "Zurück zu Entwurf",
   "panel.seoDetails.recommended": "Empfohlen",
-  "panel.seoKeywordInfo.density": "Stichwortdichte {0} *",
   "panel.seoKeywordInfo.validInfo.label": "Verwendet in Überschrift(en)",
   "panel.seoKeywordInfo.validInfo.content": "Inhalt",
   "panel.seoKeywords.title": "Stichwörter",
   "panel.seoKeywords.header.keyword": "Stichwort",
   "panel.seoKeywords.header.details": "Details",
-  "panel.seoKeywords.density": "* Eine Stichwortdichte von 1-1,5 % ist in den meisten Fällen ausreichend.",
-  "panel.seoStatus.title": "Empfehlungen",
+  "panel.seoKeywords.density.description": "* Eine Stichwortdichte von 1-1,5 % ist in den meisten Fällen ausreichend.",
   "panel.seoStatus.header.property": "Eigenschaft",
-  "panel.seoStatus.header.length": "Länge",
   "panel.seoStatus.header.valid": "Gültig",
   "panel.seoStatus.seoFieldInfo.characters": "{0} Zeichen",
   "panel.seoStatus.seoFieldInfo.words": "{0} Wörter",

l10n/bundle.l10n.fr.json

@@ -263,9 +263,6 @@
   "panel.fields.textField.limit": "Limite de champ atteinte {0}",
   "panel.fields.wrapperField.unknown": "Type de champ inconnu : {0}",
   "panel.actions.title": "Actions",
-  "panel.articleDetails.title": "Plus de détails",
-  "panel.articleDetails.type": "Type",
-  "panel.articleDetails.total": "Total",
   "panel.articleDetails.headings": "En-têtes",
   "panel.articleDetails.paragraphs": "Paragraphes",
   "panel.articleDetails.internalLinks": "Liens internes",
@@ -304,16 +301,13 @@
   "panel.publishAction.publish": "Publié",
   "panel.publishAction.unpublish": "Retourner au brouillon",
   "panel.seoDetails.recommended": "Recommandé",
-  "panel.seoKeywordInfo.density": "Utilisation du mot clé {0} *",
   "panel.seoKeywordInfo.validInfo.label": "Utilisé dans le ou les en-tête(s)",
   "panel.seoKeywordInfo.validInfo.content": "Contenu",
   "panel.seoKeywords.title": "Mot-clés",
   "panel.seoKeywords.header.keyword": "Mot-clé",
   "panel.seoKeywords.header.details": "Détails",
-  "panel.seoKeywords.density": "* Une densité de mot-clé de 1-1.5% est suffisante dans la plupart des cas",
-  "panel.seoStatus.title": "Recommandations",
+  "panel.seoKeywords.density.description": "* Une densité de mot-clé de 1-1.5% est suffisante dans la plupart des cas",
   "panel.seoStatus.header.property": "Propriété",
-  "panel.seoStatus.header.length": "Longueur",
   "panel.seoStatus.header.valid": "Valide",
   "panel.seoStatus.seoFieldInfo.characters": "{0} caractères",
   "panel.seoStatus.seoFieldInfo.words": "{0} mots",

l10n/bundle.l10n.it.json

@@ -263,9 +263,6 @@
   "panel.fields.textField.limit": "Limite di campi raggiunto {0}",
   "panel.fields.wrapperField.unknown": "Tipo di campo sconosciuto: {0}",
   "panel.actions.title": "Azioni",
-  "panel.articleDetails.title": "Più dettagli",
-  "panel.articleDetails.type": "Digitare",
-  "panel.articleDetails.total": "Totale",
   "panel.articleDetails.headings": "Intestazioni",
   "panel.articleDetails.paragraphs": "Paragrafi",
   "panel.articleDetails.internalLinks": "Collegamenti esterni",
@@ -304,16 +301,13 @@
   "panel.publishAction.publish": "Pubblica",
   "panel.publishAction.unpublish": "Tornare alla bozza",
   "panel.seoDetails.recommended": "Raccomandato",
-  "panel.seoKeywordInfo.density": "Utilizzo delle parole chiave {0} *",
   "panel.seoKeywordInfo.validInfo.label": "Utilizzato nelle rubriche",
   "panel.seoKeywordInfo.validInfo.content": "Contenuto",
   "panel.seoKeywords.title": "Parole chiavi",
   "panel.seoKeywords.header.keyword": "Parola chiave",
   "panel.seoKeywords.header.details": "Dettagli",
-  "panel.seoKeywords.density": "* Una densità di parole chiave dell'1-1,5% è sufficiente nella maggior parte dei casi.",
-  "panel.seoStatus.title": "Consigli",
+  "panel.seoKeywords.density.description": "* Una densità di parole chiave dell'1-1,5% è sufficiente nella maggior parte dei casi.",
   "panel.seoStatus.header.property": "Proprietà",
-  "panel.seoStatus.header.length": "Lunghezza",
   "panel.seoStatus.header.valid": "Valido",
   "panel.seoStatus.seoFieldInfo.characters": "{0} caratteri",
   "panel.seoStatus.seoFieldInfo.words": "{0} parole",

l10n/bundle.l10n.ja.json

@@ -438,9 +438,6 @@
 
   "panel.actions.title": "コマンド",
 
-  "panel.articleDetails.title": "詳細",
-  "panel.articleDetails.type": "項目",
-  "panel.articleDetails.total": "数",
   "panel.articleDetails.headings": "見出し",
   "panel.articleDetails.paragraphs": "パラグラフ",
   "panel.articleDetails.internalLinks": "内部リンク",
@@ -489,18 +486,15 @@
 
   "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.seoKeywords.density.description": "* キーワード出現率は通常1~1.5%で十分です。",
 
-  "panel.seoStatus.title": "推奨項目",
   "panel.seoStatus.header.property": "項目",
-  "panel.seoStatus.header.length": "長さ",
   "panel.seoStatus.header.valid": "有効",
   "panel.seoStatus.seoFieldInfo.characters": "{0} 文字",
   "panel.seoStatus.seoFieldInfo.words": "{0} 語",

l10n/bundle.l10n.json

@@ -56,6 +56,8 @@
   "settings.view.integration": "Integration",
 
   "settings.openOnStartup": "Open dashboard on startup",
+  "settings.openPanelForSupportedFiles": "Open panel for supported files",
+  "settings.openPanelForSupportedFiles.label": "Do you want to open the panel for supported files?",
   "settings.contentTypes": "Content types",
   "settings.contentFolders": "Content folders",
   "settings.diagnostic": "Diagnostic",
@@ -140,8 +142,12 @@
   "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.dataView.createNew": "Create new data file",
+  "dashboard.dataView.dataView.selectDataFolder": "Select data folder",
+  "dashboard.dataView.dataView.closeSelectedDataFile": "Close data file",
 
-  "dashboard.dataView.emptyView.heading": "Select your date type first",
+  "dashboard.dataView.emptyView.heading": "Select your data type first",
+  "dashboard.dataView.emptyView.heading.create": "Start by creating a new data file",
 
   "dashboard.dataView.sortableItem.editButton.title": "Edit \"{0}\"",
   "dashboard.dataView.sortableItem.deleteButton.title": "Delete \"{0}\"",
@@ -183,7 +189,7 @@
 
   "dashboard.header.pagination.first": "First",
   "dashboard.header.pagination.previous": "Previous",
-  "dashboard.header.pagination.next": "next",
+  "dashboard.header.pagination.next": "Next",
   "dashboard.header.pagination.last": "Last",
 
   "dashboard.header.paginationStatus.text": "Showing {0} to {1} of {2} results",
@@ -243,6 +249,7 @@
 
   "dashboard.media.folderItem.contentDirectory": "Content directory",
   "dashboard.media.folderItem.publicDirectory": "Public directory",
+  "dashboard.media.folderItem.deleteDescription": "Are you sure you want to delete the folder ({0})?",
 
   "dashboard.media.item.buttom.insert.image": "Insert image",
   "dashboard.media.item.buttom.insert.snippet": "Insert snippet",
@@ -364,7 +371,7 @@
 
   "dashboard.welcomeScreen.title": "Manage your static site with Front Matter",
   "dashboard.welcomeScreen.thanks": "Thank you for using Front Matter!",
-  "dashboard.welcomeScreen.description": "We try to aim to make Front Matter as easy to use as possible, but if you have any questions or suggestions. Please don't hesitate to reach out to us on GitHub.",
+  "dashboard.welcomeScreen.description": "We aim to make Front Matter as easy to use as possible. If you have any questions or suggestions, please contact us on GitHub.",
   "dashboard.welcomeScreen.link.github.title": "GitHub",
   "dashboard.welcomeScreen.link.github.label": "GitHub",
   "dashboard.welcomeScreen.link.documentation.label": "Documentation",
@@ -444,9 +451,6 @@
 
   "panel.actions.title": "Actions",
 
-  "panel.articleDetails.title": "More details",
-  "panel.articleDetails.type": "Type",
-  "panel.articleDetails.total": "Total",
   "panel.articleDetails.headings": "Headings",
   "panel.articleDetails.paragraphs": "Paragraphs",
   "panel.articleDetails.internalLinks": "Internal links",
@@ -495,18 +499,20 @@
 
   "panel.seoDetails.recommended": "Recommended",
 
-  "panel.seoKeywordInfo.density": "Keyword usage {0} *",
-  "panel.seoKeywordInfo.validInfo.label": "Used in heading(s)",
+  "panel.seoKeywords.checks": "Checks",
+  "panel.seoKeywords.density.tableTitle": "Frequency",
+  "panel.seoKeywords.density": "Keyword density",
+  "panel.seoKeywordInfo.validInfo.label": "Heading(s)",
   "panel.seoKeywordInfo.validInfo.content": "Content",
+  "panel.seoKeywordInfo.density.tooltip": "Recommended frequency: 0.75% - 1.5%",
 
   "panel.seoKeywords.title": "Keywords",
   "panel.seoKeywords.header.keyword": "Keyword",
   "panel.seoKeywords.header.details": "Details",
-  "panel.seoKeywords.density": "* A keyword density of 1-1.5% is sufficient in most cases.",
+  "panel.seoKeywords.density.description": "* A keyword density of 1-1.5% is sufficient in most cases.",
 
-  "panel.seoStatus.title": "Recommendations",
+  "panel.seoStatus.title": "Insights",
   "panel.seoStatus.header.property": "Property",
-  "panel.seoStatus.header.length": "Length",
   "panel.seoStatus.header.valid": "Valid",
   "panel.seoStatus.seoFieldInfo.characters": "{0} chars",
   "panel.seoStatus.seoFieldInfo.words": "{0} words",
@@ -579,6 +585,11 @@
   "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.createOrOpen.quickPick.title": "Open or create translation",
+  "commands.i18n.createOrOpen.quickPick.category.existing": "Existing translations",
+  "commands.i18n.createOrOpen.quickPick.action.open": "Open \"{0}\"",
+  "commands.i18n.createOrOpen.quickPick.category.new": "New translations",
+  "commands.i18n.createOrOpen.quickPick.action.create": "Create \"{0}\"",
   "commands.i18n.translate.progress.title": "Translating content...",
 
   "commands.preview.panel.title": "Preview: {0}",
@@ -767,6 +778,9 @@
   "listeners.dashboard.dashboardListener.pinItem.coundNotPin.error": "Could not pin item.",
   "listeners.dashboard.dashboardListener.pinItem.coundNotUnPin.error": "Could not unpin item.",
 
+  "listeners.dashboard.mediaListeners.deleteMediaFolder.progress.title": "Deleting folder...",
+  "listeners.dashboard.mediaListeners.updateMediaFolder.progress.title": "Updating folder...",
+
   "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.",
@@ -783,7 +797,9 @@
   "listeners.panel.dataListener.aiSuggestTaxonomy.noData.error": "No article data",
   "listeners.panel.dataListener.getDataFileEntries.noDataFiles.error": "Couldn't find data file entries",
   "listeners.panel.dataListener.pushMetadata.frontMatter.error": "Something went wrong while parsing your front matter. Please check the contents of your file.",
-
+  "listeners.panel.dataListener.createDataFile.inputTitle": "What is the name of the data file?",
+  "listeners.panel.dataListener.createDataFile.error": "No data file id or path defined.",
+  "listeners.panel.dataListener.createDataFile.noFileName": "No filename provided.",
 
   "listeners.panel.taxonomyListener.aiSuggestTaxonomy.noEditor.error": "No active editor",
   "listeners.panel.taxonomyListener.aiSuggestTaxonomy.noData.error": "No article data",
@@ -802,4 +818,4 @@
   "services.sponsorAi.getTaxonomySuggestions.warning": "The AI taxonomy generation took too long. Please try again later.",
 
   "services.terminal.openLocalServerTerminal.terminalOption.message": "Starting local server"
-}
+}

package.json

@@ -3,14 +3,15 @@
   "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": "10.3.0",
+  "version": "10.8.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"
@@ -31,7 +32,7 @@
   "l10n": "./l10n",
   "categories": [
     "AI",
-    "Other"
+    "Visualization"
   ],
   "keywords": [
     "Front Matter",
@@ -70,7 +71,8 @@
         "**/.frontmatter/config/*.json": "jsonc"
       }
     },
-    "keybindings": [{
+    "keybindings": [
+      {
         "command": "frontMatter.dashboard",
         "key": "alt+d"
       },
@@ -94,19 +96,23 @@
       }
     ],
     "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,7 +180,8 @@
         "frontMatter.content.defaultFileType": {
           "type": "string",
           "default": "md",
-          "oneOf": [{
+          "oneOf": [
+            {
               "enum": [
                 "md",
                 "mdx"
@@ -190,7 +197,8 @@
         "frontMatter.content.defaultSorting": {
           "type": "string",
           "default": "",
-          "oneOf": [{
+          "oneOf": [
+            {
               "enum": [
                 "LastModifiedAsc",
                 "LastModifiedDesc",
@@ -283,6 +291,14 @@
                 "default": false,
                 "description": "%setting.frontMatter.content.pageFolders.items.properties.excludeSubdir.description%"
               },
+              "excludePaths": {
+                "type": "array",
+                "default": false,
+                "description": "%setting.frontMatter.content.pageFolders.items.properties.excludePaths.description%",
+                "items": {
+                  "type": "string"
+                }
+              },
               "previewPath": {
                 "type": [
                   "null",
@@ -468,6 +484,34 @@
             "additionalProperties": false
           }
         },
+        "frontMatter.content.grouping": {
+          "type": "array",
+          "default": [],
+          "markdownDescription": "%setting.frontMatter.content.grouping.markdownDescription%",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "description": "%setting.frontMatter.content.grouping.items.properties.id.description%"
+              },
+              "title": {
+                "type": "string",
+                "description": "%setting.frontMatter.content.grouping.items.properties.title.description%"
+              },
+              "name": {
+                "type": "string",
+                "description": "%setting.frontMatter.content.grouping.items.properties.name.description%"
+              }
+            },
+            "additionalProperties": false,
+            "required": [
+              "title",
+              "name"
+            ]
+          },
+          "scope": "Content"
+        },
         "frontMatter.content.sorting": {
           "type": "array",
           "default": [],
@@ -542,7 +586,8 @@
             "categories"
           ],
           "markdownDescription": "%setting.frontMatter.content.filters.markdownDescription%",
-          "items": [{
+          "items": [
+            {
               "type": "string",
               "enum": [
                 "contentFolders",
@@ -616,7 +661,8 @@
               "command": {
                 "$id": "#scriptCommand",
                 "type": "string",
-                "anyOf": [{
+                "anyOf": [
+                  {
                     "enum": [
                       "node",
                       "bash",
@@ -812,7 +858,8 @@
               "title",
               "file"
             ],
-            "anyOf": [{
+            "anyOf": [
+              {
                 "required": [
                   "schema"
                 ]
@@ -859,6 +906,20 @@
                 "type": "boolean",
                 "description": "%setting.frontMatter.data.folders.items.properties.singleEntry.description%",
                 "default": false
+              },
+              "enableFileCreation": {
+                "type": "boolean",
+                "description": "%setting.frontMatter.data.folders.items.properties.enableFileCreation.description%",
+                "default": false
+              },
+              "fileType": {
+                "type": "string",
+                "default": "json",
+                "enum": [
+                  "json",
+                  "yaml"
+                ],
+                "description": "%setting.frontMatter.data.folders.items.properties.fileType.description%"
               }
             },
             "additionalProperties": false,
@@ -866,7 +927,8 @@
               "id",
               "path"
             ],
-            "anyOf": [{
+            "anyOf": [
+              {
                 "required": [
                   "schema"
                 ]
@@ -999,8 +1061,9 @@
                     "panel.globalSettings",
                     "panel.seo",
                     "panel.actions",
-                    "panel.contentType",
                     "panel.metadata",
+                    "panel.contentType",
+                    "panel.gitActions",
                     "panel.recentlyModified",
                     "panel.otherActions",
                     "dashboard.snippets.view",
@@ -1034,7 +1097,7 @@
             "error"
           ],
           "markdownDescription": "%setting.frontMatter.global.notifications.markdownDescription%",
-          "scope": "Templates"
+          "scope": "Global"
         },
         "frontMatter.global.disabledNotifications": {
           "type": "array",
@@ -1044,6 +1107,12 @@
             "requiredFieldValidation"
           ]
         },
+        "frontMatter.global.timezone": {
+          "default": "UTC",
+          "type": "string",
+          "markdownDescription": "%setting.frontMatter.global.timezone.markdownDescription%",
+          "scope": "Global"
+        },
         "frontMatter.media.defaultSorting": {
           "type": "string",
           "default": "",
@@ -1107,26 +1176,29 @@
               }
             }
           },
-          "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"
-              }
-            ]
-          }],
+          "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": {
@@ -1142,6 +1214,12 @@
           },
           "scope": "Media"
         },
+        "frontMatter.panel.openOnSupportedFile": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "%setting.frontMatter.panel.openOnSupportedFile.markdownDescription%",
+          "scope": "Dashboard"
+        },
         "frontMatter.panel.freeform": {
           "type": "boolean",
           "default": true,
@@ -1229,7 +1307,8 @@
               "fileType": {
                 "type": "string",
                 "default": "",
-                "oneOf": [{
+                "oneOf": [
+                  {
                     "enum": [
                       "md",
                       "mdx"
@@ -1344,7 +1423,14 @@
                       "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.single.description%"
                     },
                     "wysiwyg": {
-                      "type": "boolean",
+                      "type": [
+                        "boolean",
+                        "string"
+                      ],
+                      "enum": [
+                        "html",
+                        "markdown"
+                      ],
                       "default": false,
                       "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.wysiwyg.description%"
                     },
@@ -1368,7 +1454,8 @@
                       "default": "",
                       "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.taxonomyId.description%",
                       "not": {
-                        "anyOf": [{
+                        "anyOf": [
+                          {
                             "const": ""
                           },
                           {
@@ -1512,6 +1599,11 @@
                       "default": "path",
                       "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeValue.description%"
                     },
+                    "sameContentLocale": {
+                      "type": "boolean",
+                      "default": true,
+                      "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.sameContentLocale.description%"
+                    },
                     "when": {
                       "type": "object",
                       "description": "%setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.description%",
@@ -1569,7 +1661,8 @@
                     "type",
                     "name"
                   ],
-                  "allOf": [{
+                  "allOf": [
+                    {
                       "if": {
                         "properties": {
                           "type": {
@@ -1781,48 +1874,51 @@
               "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": {
@@ -1835,7 +1931,8 @@
                 "type": "string",
                 "description": "%setting.frontMatter.taxonomy.customTaxonomy.items.properties.id.description%",
                 "not": {
-                  "anyOf": [{
+                  "anyOf": [
+                    {
                       "const": ""
                     },
                     {
@@ -1979,7 +2076,11 @@
           "scope": "Taxonomy"
         },
         "frontMatter.taxonomy.slugTemplate": {
-          "type": "string",
+          "type": [
+            "string",
+            "null"
+          ],
+          "default": null,
           "markdownDescription": "%setting.frontMatter.taxonomy.slugTemplate.markdownDescription%",
           "scope": "Taxonomy"
         },
@@ -2005,7 +2106,7 @@
         },
         "frontMatter.templates.prefix": {
           "type": "string",
-          "default": "yyyy-MM-dd",
+          "default": "{{date|yyyy-MM-dd}}",
           "markdownDescription": "%setting.frontMatter.templates.prefix.markdownDescription%",
           "scope": "Templates"
         },
@@ -2025,12 +2126,13 @@
         },
         "frontMatter.copilot.family": {
           "type": "string",
-          "default": "gpt-3.5-turbo",
+          "default": "gpt-4o-mini",
           "markdownDescription": "%setting.frontMatter.copilot.family.markdownDescription%"
         }
       }
     },
-    "commands": [{
+    "commands": [
+      {
         "command": "frontMatter.project.switch",
         "title": "%command.frontMatter.project.switch%",
         "category": "Front Matter",
@@ -2352,6 +2454,15 @@
         "title": "%command.frontMatter.cache.clear%",
         "category": "Front Matter"
       },
+      {
+        "command": "frontMatter.i18n.createOrOpen",
+        "title": "%command.frontMatter.i18n.createOrOpen%",
+        "category": "Front Matter",
+        "icon": {
+          "light": "assets/icons/i18n-light.svg",
+          "dark": "assets/icons/i18n-dark.svg"
+        }
+      },
       {
         "command": "frontMatter.i18n.create",
         "title": "%command.frontMatter.i18n.create%",
@@ -2362,84 +2473,89 @@
         }
       }
     ],
-    "submenus": [{
-      "id": "frontmatter.submenu",
-      "label": "Front Matter"
-    }],
+    "submenus": [
+      {
+        "id": "frontmatter.submenu",
+        "label": "Front Matter"
+      }
+    ],
     "menus": {
-      "webview/context": [{
-        "command": "workbench.action.webview.openDeveloperTools",
-        "when": "frontMatter:isDevelopment"
-      }],
-      "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"
+          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.markup.bold",
           "group": "navigation@-132",
-          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
+          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.markup.italic",
           "group": "navigation@-131",
-          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
+          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.markup.hyperlink",
           "group": "navigation@-130",
-          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
+          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.insertSnippet",
           "group": "navigation@-129",
-          "when": "frontMatter:file:isValid == true && frontMatter:dashboard:snippets:enabled"
+          "when": "frontMatter:file:isValid == true && frontMatter:dashboard:snippets:enabled && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.insertMedia",
           "group": "navigation@-128",
-          "when": "frontMatter:file:isValid == true"
+          "when": "frontMatter:file:isValid == true && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
-          "command": "frontMatter.i18n.create",
+          "command": "frontMatter.i18n.createOrOpen",
           "group": "navigation@-127",
           "when": "frontMatter:file:isValid && frontMatter:i18n:enabled"
         },
         {
           "command": "frontMatter.markup.options",
           "group": "navigation@-126",
-          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
+          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.markup.orderedlist",
           "group": "1_markup@1",
-          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
+          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.markup.unorderedlist",
           "group": "1_markup@2",
-          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
+          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.markup.tasklist",
           "group": "1_markup@3",
-          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
+          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.markup.code",
           "group": "1_markup@4",
-          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
+          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.markup.codeblock",
           "group": "1_markup@5",
-          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
+          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.markup.blockquote",
           "group": "1_markup@6",
-          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg"
+          "when": "frontMatter:file:isValid == true && frontMatter:markdown:wysiwyg && activeEditor == 'workbench.editors.files.textFileEditor'"
         },
         {
           "command": "frontMatter.dashboard",
@@ -2457,11 +2573,14 @@
           "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"
@@ -2477,7 +2596,8 @@
           "group": "frontmatter@3"
         }
       ],
-      "commandPalette": [{
+      "commandPalette": [
+        {
           "command": "frontMatter.init",
           "when": "frontMatterCanInit"
         },
@@ -2654,7 +2774,8 @@
           "when": "frontMatter:file:isValid == true"
         }
       ],
-      "view/title": [{
+      "view/title": [
+        {
           "command": "frontMatter.docs",
           "group": "navigation@-1",
           "when": "view == frontMatter.explorer"
@@ -2691,13 +2812,16 @@
         }
       ]
     },
-    "languages": [{
-      "id": "frontmatter.project.output",
-      "mimetypes": [
-        "text/x-code-output"
-      ]
-    }],
-    "grammars": [{
+    "languages": [
+      {
+        "id": "frontmatter.project.output",
+        "mimetypes": [
+          "text/x-code-output"
+        ]
+      }
+    ],
+    "grammars": [
+      {
         "path": "./syntaxes/hugo.tmLanguage.json",
         "scopeName": "frontmatter.markdown.hugo",
         "injectTo": [
@@ -2710,45 +2834,48 @@
         "path": "./syntaxes/frontmatter-output.tmLanguage.json"
       }
     ],
-    "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"
+    "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"
+            ]
           },
-          "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.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": [
-            "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"
-          ]
-        }
-      ]
-    }]
+          {
+            "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:*",
@@ -2779,6 +2906,7 @@
     "@heroicons/react": "^2.1.1",
     "@iarna/toml": "2.2.3",
     "@octokit/rest": "^18.12.0",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@sentry/react": "^6.19.7",
     "@sentry/tracing": "^6.19.7",
     "@tailwindcss/forms": "^0.5.3",
@@ -2795,11 +2923,10 @@
     "@types/react-datepicker": "^4.8.0",
     "@types/react-dom": "17.0.0",
     "@types/vscode": "^1.90.0",
+    "@types/webpack-bundle-analyzer": "^4.7.0",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
-    "@vscode-elements/elements": "^1.2.0",
     "@vscode/l10n": "^0.0.14",
-    "@vscode/webview-ui-toolkit": "^1.2.2",
     "@webpack-cli/serve": "^1.7.0",
     "ajv": "^8.12.0",
     "array-move": "^4.0.0",
@@ -2808,10 +2935,12 @@
     "cheerio": "1.0.0-rc.12",
     "clsx": "^2.1.0",
     "css-loader": "5.2.7",
-    "date-fns": "2.23.0",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
     "dotenv": "^16.3.1",
     "downshift": "6.0.6",
     "eslint": "^8.33.0",
+    "eslint-webpack-plugin": "^4.2.0",
     "fuse.js": "6.5.3",
     "github-directory-downloader": "^1.3.6",
     "glob": "^10.3.12",
@@ -2845,8 +2974,16 @@
     "react-quill": "^2.0.0",
     "react-router-dom": "^6.8.0",
     "react-sortable-hoc": "^2.0.0",
+    "react-tooltip": "^5.28.0",
     "recoil": "^0.7.7",
-    "remark-gfm": "^3.0.1",
+    "rehype-parse": "^9.0.1",
+    "rehype-remark": "^10.0.0",
+    "rehype-stringify": "^10.0.1",
+    "remark": "^15.0.1",
+    "remark-gfm": "^4.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "remark-stringify": "^11.0.0",
     "rimraf": "^3.0.2",
     "semver": "^7.3.8",
     "simple-git": "^3.16.0",
@@ -2856,24 +2993,24 @@
     "tailwindcss-animate": "^1.0.7",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.5",
+    "unified": "^11.0.5",
     "uniforms": "^3.10.2",
     "uniforms-antd": "^3.10.2",
     "uniforms-bridge-json-schema": "^3.10.2",
     "uniforms-unstyled": "^3.10.2",
     "url-join-ts": "^1.0.5",
+    "vscrui": "^0.1.0-beta.1094721",
     "wc-react": "github:estruyf/wc-react",
     "webpack": "^5.75.0",
-    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1",
     "webpack-ignore-dynamic-require": "^1.0.0",
+    "webpack-manifest-plugin": "^5.0.0",
     "yaml": "^2.2.1",
     "yawn-yaml": "^1.5.0"
   },
   "vsce": {
     "dependencies": false
-  },
-  "dependencies": {
-    "@radix-ui/react-dropdown-menu": "^2.0.6"
   }
-}
+}

package.nls.json

@@ -50,6 +50,7 @@
   "command.frontMatter.git.sync": "Sync",
   "command.frontMatter.cache.clear": "Clear cache",
   "command.frontMatter.i18n.create": "Create new translation",
+  "command.frontMatter.i18n.createOrOpen": "Create or open 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. [Local](https://file%2B.vscode-resource.vscode-cdn.net/Users/eliostruyf/nodejs/frontmatter-test-projects/astro-blog/test.html) - [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.projects) - [View in VS Code](vscode://simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.projects%22%5D)",
   "setting.frontMatter.projects.items.properties.name.markdownDescription": "Specify the name of the project.",
@@ -73,6 +74,7 @@
   "setting.frontMatter.content.pageFolders.items.properties.title.description": "Name of the folder",
   "setting.frontMatter.content.pageFolders.items.properties.path.description": "Path of the folder",
   "setting.frontMatter.content.pageFolders.items.properties.excludeSubdir.description": "Exclude sub-directories",
+  "setting.frontMatter.content.pageFolders.items.properties.excludePaths.description": "Exclude paths (e.g. api, _*.*)",
   "setting.frontMatter.content.pageFolders.items.properties.previewPath.description": "Defines a custom preview path for the folder.",
   "setting.frontMatter.content.pageFolders.items.properties.trailingSlash.description": "Specify if you want to add a trailing slash to the preview URL.",
   "setting.frontMatter.content.pageFolders.items.properties.filePrefix.description": "Defines a prefix for the file name.",
@@ -94,6 +96,10 @@
   "setting.frontMatter.content.publicFolder.properties.relative.description": "Defines if the path to your media files be relative to the content file?",
   "setting.frontMatter.snippets.wrapper.enabled.markdownDescription": "Specify if you want to wrap the snippets. [Docs](https://frontmatter.codes/docs/settings/overview#frontMatter.snippets.wrapper.enabled) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontMatter.snippets.wrapper.enabled%22%5D)",
   "setting.frontMatter.content.snippets.markdownDescription": "Define the snippets you want to use in your content. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.snippets) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.content.snippets%22%5D)",
+  "setting.frontMatter.content.grouping.markdownDescription": "Specify the grouping options for your dashboard content. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.grouping) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.content.grouping%22%5D)",
+  "setting.frontMatter.content.grouping.items.properties.id.description": "The ID of the grouping option.",
+  "setting.frontMatter.content.grouping.items.properties.title.description": "Title of the grouping which will be shown in the UI.",
+  "setting.frontMatter.content.grouping.items.properties.name.description": "Name of the content-type field to group by.",
   "setting.frontMatter.content.sorting.markdownDescription": "Define the sorting options for your dashboard content. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.content.sorting) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.content.sorting%22%5D)",
   "setting.frontMatter.content.sorting.items.properties.id.description": "The ID of the sorting option. This will be used for the storing the last used sorting option or the default option.",
   "setting.frontMatter.content.sorting.items.properties.title.description": "Name of the sorting label",
@@ -145,6 +151,8 @@
   "setting.frontMatter.data.folders.items.properties.path.description": "Path to the folder to load files.",
   "setting.frontMatter.data.folders.items.properties.type.description": "If you are using data types, you can specify your type ID.",
   "setting.frontMatter.data.folders.items.properties.singleEntry.description": "If you want to use a single entry for your data files in the folder.",
+  "setting.frontMatter.data.folders.items.properties.enableFileCreation.description": "Enable the creation of new data files in the folder.",
+  "setting.frontMatter.data.folders.items.properties.fileType.description": "Defines the file type for when the file creation is enabled. JSON is the default.",
   "setting.frontMatter.data.types.markdownDescription": "Specify the data types. These types can be used in for your data files. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.data.types) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.data.types%22%5D)",
   "setting.frontMatter.data.types.items.properties.id.description": "Your unique ID you want to use for your data type.",
   "setting.frontMatter.file.preserveCasing.markdownDescription": "Specify if you want to preserve the casing of your file names from the title. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.file.preservecasing) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.file.preservecasing%22%5D)",
@@ -162,6 +170,7 @@
   "setting.frontMatter.global.modes.items.properties.features.description": "The features you want to use for your mode.",
   "setting.frontMatter.global.notifications.markdownDescription": "Specifies the notifications you want to see. By default, all notifications types will be shown. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.global.notifications) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.global.notifications%22%5D)",
   "setting.frontMatter.global.disabledNotifications.markdownDescription": "This is an array with the notifications types that can be disabled for Front Matter CMS. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.global.disablednotifications) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.global.disablednotifications%22%5D)",
+  "setting.frontMatter.global.timezone.markdownDescription": "Specify the timezone for your date formatting. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.taxonomy.datetimezone) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.taxonomy.datetimezone%22%5D)",
   "setting.frontMatter.media.defaultSorting.markdownDescription": "Specify the default sorting option for the media dashboard. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.media.defaultsorting) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.media.defaultsorting%22%5D)",
   "setting.frontMatter.media.supportedMimeTypes.markdownDescription": "Specify the mime types to support for the media files. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.media.supportedmimetypes) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.media.supportedmimetypes%22%5D)",
 
@@ -175,6 +184,7 @@
   "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.openOnSupportedFile.markdownDescription": "Specifies if you want to open the panel when opening a supported file. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.openonsupportedfile) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.panel.openonsupportedfile%22%5D)",
   "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. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.freeform) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.panel.freeform%22%5D)",
   "setting.frontMatter.panel.actions.disabled.markdownDescription": "Specify the actions you want to disable in the panel. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.actions.disabled) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.panel.actions.disabled%22%5D)",
   "setting.frontMatter.preview.host.markdownDescription": "Specify the host URL (example: http://localhost:1313) to be used when opening the preview. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.preview.host) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.preview.host%22%5D)",
@@ -200,7 +210,7 @@
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.choices.items.properties.id.description": "The choice ID",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.choices.items.properties.title.description": "The choice title",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.single.description": "Is a single line field",
-  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.wysiwyg.description": "Is a WYSIWYG field (HTML output)",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.wysiwyg.description": "Is a WYSIWYG field. You can set it to markdown or HTML.",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.multiple.description": "Do you allow to select multiple values?",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.isPreviewImage.description": "Specify if the image field can be used as preview. Be aware, you can only have one preview image per content type.",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.hidden.description": "Do you want to hide the field from the metadata section?",
@@ -226,6 +236,7 @@
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.required.description": "Specify if the field is required",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeName.description": "Specify the content type name to filter content for the contentRelationship field",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.contentTypeValue.description": "Specify the value to insert for the contentRelationship field",
+  "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.sameContentLocale.description": "Specify if you only want to show the content with the same locale",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.description": "Specify the conditions to show the field",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.fieldRef.description": "The field ID to use",
   "setting.frontMatter.taxonomy.contentTypes.items.properties.fields.items.properties.when.properties.operator.description": "The operator to use",
@@ -282,4 +293,4 @@
   "setting.frontMatter.git.disableOnBranches.markdownDescription": "Specify the branches on which you want to disable the Git actions. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.disableonbranches) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.git.disableonbranches%22%5D)",
   "setting.frontMatter.git.requiresCommitMessage.markdownDescription": "Specify if you want to require a commit message when publishing your changes for a specified branch. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.git.requirescommitmessage) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.git.requirescommitmessage%22%5D)",
   "setting.frontMatter.copilot.family.markdownDescription": "Specify the LLM family of the Copilot you want to use. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.copilot.family) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.copilot.family%22%5D)"
-}
+}

scripts/beta-release.js

@@ -38,6 +38,8 @@ fs.writeFileSync(path.join(__dirname, '../README.md'), readme);
 
 // Update the .vscodeignore file
 const ignoreFilePath = path.join(path.resolve('.'), '.vscodeignore');
-let vscodeignore = fs.readFileSync(ignoreFilePath, 'utf8');
-vscodeignore = vscodeignore.replace(`**/*.map`, '');
-fs.writeFileSync(ignoreFilePath, vscodeignore);
+if (fs.existsSync(ignoreFilePath)) {
+  let vscodeignore = fs.readFileSync(ignoreFilePath, 'utf8');
+  vscodeignore = vscodeignore.replace(`**/*.map`, '');
+  fs.writeFileSync(ignoreFilePath, vscodeignore);
+}

src/commands/Article.ts

@@ -23,7 +23,6 @@ import {
   SETTING_SLUG_TEMPLATE
 } from './../constants';
 import { CustomPlaceholder, Field } from '../models';
-import { format } from 'date-fns';
 import {
   ArticleHelper,
   Logger,
@@ -44,7 +43,7 @@ import { NavigationType } from '../dashboardWebView/models';
 import { SNIPPET } from '../constants/Snippet';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
-import { getTitleField } from '../utils';
+import { formatInTimezone, getTitleField } from '../utils';
 
 export class Article {
   /**
@@ -52,7 +51,7 @@ export class Article {
    *
    * @param subscriptions - The array of subscriptions to register the commands with.
    */
-  public static async registerCommands(subscriptions: unknown[]) {
+  public static registerCommands(subscriptions: unknown[]) {
     subscriptions.push(
       commands.registerCommand(COMMAND_NAME.setLastModifiedDate, Article.setLastModifiedDate)
     );
@@ -66,6 +65,15 @@ export class Article {
     subscriptions.push(commands.registerCommand(COMMAND_NAME.insertSnippet, Article.insertSnippet));
   }
 
+  /**
+   * Registers event listeners for the Article class.
+   *
+   * @param subscriptions - An array to which the event listener will be added.
+   */
+  public static registerListeners(subscriptions: unknown[]) {
+    subscriptions.push(workspace.onWillSaveTextDocument(Article.autoUpdate));
+  }
+
   /**
    * Sets the article date
    */
@@ -164,7 +172,12 @@ export class Article {
   /**
    * Generate the new slug
    */
-  public static generateSlug(title: string, article?: ParsedFrontMatter, slugTemplate?: string) {
+  public static generateSlug(
+    title: string,
+    article?: ParsedFrontMatter,
+    filePath?: string,
+    slugTemplate?: string
+  ) {
     if (!title) {
       return;
     }
@@ -173,9 +186,9 @@ export class Article {
     const suffix = Settings.get(SETTING_SLUG_SUFFIX) as string;
 
     if (article?.data) {
-      const slug = SlugHelper.createSlug(title, article?.data, slugTemplate);
+      const slug = SlugHelper.createSlug(title, article?.data, filePath, slugTemplate);
 
-      if (slug) {
+      if (typeof slug === 'string') {
         return {
           slug,
           slugWithPrefixAndSuffix: `${prefix}${slug}${suffix}`
@@ -202,19 +215,32 @@ export class Article {
       return;
     }
 
+    const titleField = getTitleField();
+    const articleTitle: string = article.data[titleField];
+    const articleDate = await ArticleHelper.getDate(article);
+
     let filePrefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
     const contentType = await ArticleHelper.getContentType(article);
     filePrefix = await ArticleHelper.getFilePrefix(
       filePrefix,
       editor.document.uri.fsPath,
-      contentType
+      contentType,
+      articleTitle,
+      articleDate
     );
 
-    const titleField = getTitleField();
-    const articleTitle: string = article.data[titleField];
-    const slugInfo = Article.generateSlug(articleTitle, article, contentType.slugTemplate);
+    const slugInfo = Article.generateSlug(
+      articleTitle,
+      article,
+      editor.document.uri.fsPath,
+      contentType.slugTemplate
+    );
 
-    if (slugInfo && slugInfo.slug && slugInfo.slugWithPrefixAndSuffix) {
+    if (
+      slugInfo &&
+      typeof slugInfo.slug === 'string' &&
+      typeof slugInfo.slugWithPrefixAndSuffix === 'string'
+    ) {
       article.data['slug'] = slugInfo.slugWithPrefixAndSuffix;
 
       if (contentType) {
@@ -239,7 +265,8 @@ export class Article {
             article.data[pField.name] = processArticlePlaceholdersFromData(
               article.data[pField.name],
               article.data,
-              contentType
+              contentType,
+              editor.document.uri.fsPath
             );
             article.data[pField.name] = processTimePlaceholders(
               article.data[pField.name],
@@ -264,7 +291,11 @@ export class Article {
 
           let newFileName = `${slugName}${ext}`;
           if (filePrefix && typeof filePrefix === 'string') {
-            newFileName = `${filePrefix}-${newFileName}`;
+            if (filePrefix.endsWith('/')) {
+              newFileName = `${filePrefix}${newFileName}`;
+            } else {
+              newFileName = `${filePrefix}-${newFileName}`;
+            }
           }
 
           const newPath = editor.document.uri.fsPath.replace(fileName, newFileName);
@@ -315,7 +346,7 @@ export class Article {
       } else {
         const article = ArticleHelper.getFrontMatter(editor);
         if (article?.data) {
-          return SlugHelper.createSlug(article.data[titleField], article.data, slugTemplate);
+          return SlugHelper.createSlug(article.data[titleField], article.data, file, slugTemplate);
         }
       }
     }
@@ -357,7 +388,7 @@ export class Article {
    * Article auto updater
    * @param event
    */
-  public static async autoUpdate(event: TextDocumentWillSaveEvent) {
+  public static autoUpdate(event: TextDocumentWillSaveEvent) {
     const document = event.document;
     if (document && ArticleHelper.isSupportedFile(document)) {
       const autoUpdate = Settings.get(SETTING_AUTO_UPDATE_DATE);
@@ -365,7 +396,7 @@ export class Article {
       // Is article located in one of the content folders
       const folders = Folders.getCached();
       const documentPath = parseWinPath(document.fileName);
-      const folder = folders.find((f) => documentPath.startsWith(f.path));
+      const folder = folders?.find((f) => documentPath.startsWith(f.path));
       if (!folder) {
         return;
       }
@@ -386,10 +417,10 @@ export class Article {
 
     if (fieldDateFormat) {
       Logger.verbose(`Article:formatDate:FieldDateFormat - ${fieldDateFormat}`);
-      return format(dateValue, DateHelper.formatUpdate(fieldDateFormat) as string);
+      return formatInTimezone(dateValue, DateHelper.formatUpdate(fieldDateFormat) as string);
     } else if (dateFormat && typeof dateFormat === 'string') {
       Logger.verbose(`Article:formatDate:DateFormat - ${dateFormat}`);
-      return format(dateValue, DateHelper.formatUpdate(dateFormat) as string);
+      return formatInTimezone(dateValue, DateHelper.formatUpdate(dateFormat) as string);
     } else {
       Logger.verbose(`Article:formatDate:toISOString - ${dateValue}`);
       return typeof dateValue.toISOString === 'function'

src/commands/Chatbot.ts

@@ -6,6 +6,7 @@ import { WebviewHelper } from '@estruyf/vscode';
 import { getLocalizationFile } from '../utils/getLocalizationFile';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
+import { getWebviewJsFiles } from '../utils';
 
 export class Chatbot {
   /**
@@ -32,31 +33,36 @@ export class Chatbot {
 
     const cspSource = webView.webview.cspSource;
 
+    const fetchLocalization = async (requestId: string) => {
+      if (!requestId) {
+        return;
+      }
+
+      const fileContents = await getLocalizationFile();
+
+      webView.webview.postMessage({
+        command: GeneralCommands.toVSCode.getLocalization,
+        requestId,
+        payload: fileContents
+      });
+    };
+
     webView.webview.onDidReceiveMessage(async (message) => {
-      switch (message.command) {
+      const { command, requestId, payload, data } = message;
+
+      switch (command) {
         case PreviewCommands.toVSCode.open:
-          if (message.data) {
-            commands.executeCommand('vscode.open', message.data);
+          if (payload || data) {
+            commands.executeCommand('vscode.open', payload || data);
           }
-          return;
+          break;
         case GeneralCommands.toVSCode.getLocalization:
-          const { requestId } = message;
-          if (!requestId) {
-            return;
-          }
-
-          const fileContents = await getLocalizationFile();
-
-          webView.webview.postMessage({
-            command: GeneralCommands.toVSCode.getLocalization,
-            requestId,
-            payload: fileContents
-          });
+          fetchLocalization(requestId);
           return;
       }
     });
 
-    const dashboardFile = 'dashboardWebView.js';
+    const webviewFile = 'dashboard.main.js';
     const localPort = `9000`;
     const localServerUrl = `localhost:${localPort}`;
 
@@ -66,7 +72,6 @@ export class Chatbot {
     const isProd = ext.isProductionMode;
     const version = ext.getVersion();
     const isBeta = ext.isBetaVersion();
-    const extensionUri = ext.extensionPath;
 
     const csp = [
       `default-src 'none';`,
@@ -82,13 +87,11 @@ export class Chatbot {
       }`
     ];
 
-    let scriptUri = '';
+    let scriptUris = [];
     if (isProd) {
-      scriptUri = webView.webview
-        .asWebviewUri(Uri.joinPath(extensionUri, 'dist', dashboardFile))
-        .toString();
+      scriptUris = await getWebviewJsFiles('dashboard', webView.webview);
     } else {
-      scriptUri = `http://${localServerUrl}/${dashboardFile}`;
+      scriptUris.push(`http://${localServerUrl}/${webviewFile}`);
     }
 
     // By default, the chatbot is seen as experimental
@@ -111,7 +114,11 @@ export class Chatbot {
       experimental ? `data-experimental="${experimental}"` : ''
     } style="width:100%;height:100%;margin:0;padding:0;"></div>
 
-          <script ${isProd ? `nonce="${nonce}"` : ''} src="${scriptUri}"></script>
+          ${scriptUris
+            .map((uri) => `<script ${isProd ? `nonce="${nonce}"` : ''} src="${uri}"></script>`)
+            .join('\n')}
+
+          <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`chatbot-${version.installedVersion}`}" alt="Daily usage" />
         </body>
       </html>
     `;

src/commands/Dashboard.ts

@@ -30,7 +30,7 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
 import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
 import { NavigationType } from '../dashboardWebView/models';
-import { getExtensibilityScripts, ignoreMsgCommand } from '../utils';
+import { getExtensibilityScripts, getWebviewJsFiles, ignoreMsgCommand } from '../utils';
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
@@ -274,18 +274,17 @@ export class Dashboard {
    * @param webView
    */
   private static async getWebviewContent(webView: Webview, extensionPath: Uri): Promise<string> {
-    const dashboardFile = 'dashboardWebView.js';
+    const webviewFile = 'dashboard.main.js';
     const localPort = `9000`;
     const localServerUrl = `localhost:${localPort}`;
 
-    let scriptUri = '';
     const isProd = Extension.getInstance().isProductionMode;
+
+    let scriptUris = [];
     if (isProd) {
-      scriptUri = webView
-        .asWebviewUri(Uri.joinPath(extensionPath, 'dist', dashboardFile))
-        .toString();
+      scriptUris = await getWebviewJsFiles('dashboard', webView);
     } else {
-      scriptUri = `http://${localServerUrl}/${dashboardFile}`;
+      scriptUris.push(`http://${localServerUrl}/${webviewFile}`);
     }
 
     const nonce = WebviewHelper.getNonce();
@@ -351,7 +350,9 @@ export class Dashboard {
           })
           .join('')}
           
-        <script ${isProd ? `nonce="${nonce}"` : ''} src="${scriptUri}"></script>
+          ${scriptUris
+            .map((uri) => `<script ${isProd ? `nonce="${nonce}"` : ''} src="${uri}"></script>`)
+            .join('\n')}
 
         <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`dashboard-${version.installedVersion}`}" alt="Daily usage" />
       </body>

src/commands/Folders.ts

@@ -23,7 +23,6 @@ import { Template } from './Template';
 import { Notifications } from '../helpers/Notifications';
 import { Extension, Logger, Settings, processTimePlaceholders } from '../helpers';
 import { existsSync } from 'fs';
-import { format } from 'date-fns';
 import { Dashboard } from './Dashboard';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { MediaHelpers } from '../helpers/MediaHelpers';
@@ -31,7 +30,7 @@ import { MediaListener, PagesListener, SettingsListener } from '../listeners/das
 import { DEFAULT_FILE_TYPES } from '../constants/DefaultFileTypes';
 import { glob } from 'glob';
 import { mkdirAsync } from '../utils/mkdirAsync';
-import { existsAsync, isWindows, lstatAsync } from '../utils';
+import { existsAsync, formatInTimezone, isWindows, lstatAsync } from '../utils';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
 import { Preview } from './Preview';
@@ -39,7 +38,7 @@ import { Preview } from './Preview';
 export const WORKSPACE_PLACEHOLDER = `[[workspace]]`;
 
 export class Folders {
-  private static _folders: ContentFolder[] = [];
+  private static _folders: ContentFolder[] | undefined = undefined;
 
   public static async registerCommands() {
     const ext = Extension.getInstance();
@@ -50,7 +49,7 @@ export class Folders {
 
   public static clearCached() {
     Logger.verbose(`Folders:clearCached`);
-    Folders._folders = [];
+    Folders._folders = undefined;
   }
 
   /**
@@ -85,7 +84,7 @@ export class Folders {
       prompt: l10n.t(LocalizationKey.commandsFoldersAddMediaFolderInputBoxPrompt),
       value: startPath,
       ignoreFocusOut: true,
-      placeHolder: `${format(new Date(), `yyyy/MM`)}`
+      placeHolder: `${formatInTimezone(new Date(), `yyyy/MM`)}`
     });
 
     if (!folderName) {
@@ -220,7 +219,9 @@ export class Folders {
           : Folders.getAbsFilePath(assetFolder);
       const wsFolder = Folders.getWorkspaceFolder();
       if (wsFolder) {
-        const relativePath = relative(parseWinPath(wsFolder.fsPath), parseWinPath(assetFolder));
+        const relativePath = parseWinPath(
+          relative(parseWinPath(wsFolder.fsPath), parseWinPath(assetFolder))
+        );
         return relativePath === '' ? '/' : relativePath;
       }
     }
@@ -327,7 +328,7 @@ export class Folders {
   public static async get(): Promise<ContentFolder[]> {
     Logger.verbose('Folders:get:start');
 
-    if (Folders._folders.length > 0) {
+    if (Folders._folders && Folders._folders.length > 0) {
       Logger.verbose('Folders:get:end - cached folders');
       return Folders._folders;
     }
@@ -401,8 +402,8 @@ export class Folders {
           folder.locales && folder.locales.length > 0 ? folder.locales : i18nSettings;
 
         let defaultLocale;
-        let sourcePath = folderPath;
-        let localeFolders: ContentFolder[] = [];
+        const sourcePath = folderPath;
+        const localeFolders: ContentFolder[] = [];
 
         if (i18nConfig && i18nConfig.length > 0) {
           for (const i18n of i18nConfig) {
@@ -452,10 +453,23 @@ export class Folders {
    * Get the cached folder settings
    * @returns {ContentFolder[]} - The cached folder settings
    */
-  public static getCached(): ContentFolder[] {
+  public static getCached(): ContentFolder[] | undefined {
     return Folders._folders;
   }
 
+  /**
+   * Retrieves the cached content folders if available, otherwise fetches fresh content folders.
+   *
+   * @returns {Promise<ContentFolder[]>} A promise that resolves to an array of content folders.
+   */
+  public static async getCachedOrFresh(): Promise<ContentFolder[]> {
+    if (Folders._folders && Folders._folders.length > 0) {
+      return Folders._folders;
+    }
+
+    return await Folders.get();
+  }
+
   /**
    * Update the folder settings
    * @param folders
@@ -557,6 +571,22 @@ export class Folders {
     return parseWinPath(absPath);
   }
 
+  /**
+   * Converts a given file path to a workspace-relative path.
+   *
+   * @param path - The file path to convert.
+   * @returns The workspace-relative path.
+   */
+  public static wsPath(path: string) {
+    const wsFolder = Folders.getWorkspaceFolder();
+    let absPath = parseWinPath(path).replace(
+      parseWinPath(wsFolder?.fsPath || ''),
+      WORKSPACE_PLACEHOLDER
+    );
+    absPath = isWindows() ? absPath.split('\\').join('/') : absPath;
+    return absPath;
+  }
+
   /**
    * Generate relative folder path
    * @param folder
@@ -608,15 +638,23 @@ export class Folders {
       }
     }
 
+    // For Windows, we need to make sure the drive letter is lowercased for consistency
+    if (isWindows()) {
+      folders = folders.map((folder) => parseWinPath(folder));
+    }
+
     // Filter out the workspace folder
     if (wsFolder) {
-      folders = folders.filter((folder) => folder !== wsFolder.fsPath);
+      folders = folders.filter((folder) => folder !== parseWinPath(wsFolder.fsPath));
     }
 
     const uniqueFolders = [...new Set(folders)];
+    const relativeFolderPaths = uniqueFolders.map((folder) =>
+      parseWinPath(relative(parseWinPath(wsFolder.fsPath), folder))
+    );
 
     Logger.verbose('Folders:getContentFolders:end');
-    return uniqueFolders.map((folder) => relative(wsFolder?.path || '', folder));
+    return relativeFolderPaths;
   }
 
   /**
@@ -672,7 +710,7 @@ export class Folders {
   public static async getPageFolderByFilePath(
     filePath: string
   ): Promise<ContentFolder | undefined> {
-    const folders = Folders.getCached();
+    const folders = await Folders.getCachedOrFresh();
     const parsedPath = parseWinPath(filePath);
     const pageFolderMatches = folders
       .filter((folder) => parsedPath && folder.path && parsedPath.includes(folder.path))
@@ -703,7 +741,7 @@ export class Folders {
       return;
     }
 
-    const folders = Folders.getCached();
+    const folders = await Folders.getCachedOrFresh();
     let selectedFolder: ContentFolder | undefined;
 
     // Try to find the folder by content type
@@ -772,7 +810,11 @@ export class Folders {
             filePath = `*${fileType.startsWith('.') ? '' : '.'}${fileType}`;
           }
 
-          let foundFiles = await Folders.findFiles(filePath);
+          let foundFiles = await Folders.findFiles(
+            filePath,
+            join(folderPath, folder.excludeSubdir ? '/' : '**'),
+            folder.excludePaths
+          );
 
           // Make sure these file are coming from the folder path (this could be an issue in multi-root workspaces)
           foundFiles = foundFiles.filter((f) =>
@@ -828,7 +870,7 @@ export class Folders {
     try {
       pattern = isWindows() ? parseWinPath(pattern) : pattern;
       const folders = await glob(pattern, {
-        ignore: 'node_modules/**',
+        ignore: '**/node_modules/**',
         dot: true
       });
 
@@ -860,12 +902,27 @@ export class Folders {
    * @param pattern
    * @returns
    */
-  private static async findFiles(pattern: string): Promise<Uri[]> {
+  private static async findFiles(
+    pattern: string,
+    folderPath: string,
+    excludePaths: string[] = []
+  ): Promise<Uri[]> {
     Logger.verbose(`Folders:findFiles:start - ${pattern}`);
 
     try {
       pattern = isWindows() ? parseWinPath(pattern) : pattern;
-      const files = await glob(pattern, { ignore: 'node_modules/**', dot: true });
+      const files = await glob(pattern, {
+        ignore: [
+          '**/node_modules/**',
+          ...excludePaths.map((path) => {
+            // path can be a folder name or a wildcard.
+            // If its a folder name, we need to add a wildcard to the end
+            path = path.includes('*') ? path : join(path, '**');
+            return parseWinPath(join(folderPath, path));
+          })
+        ],
+        dot: true
+      });
       const allFiles = (files || []).map((file) => Uri.file(file));
       Logger.verbose(`Folders:findFiles:end - ${allFiles.length}`);
       return allFiles;

src/commands/Preview.ts

@@ -29,7 +29,7 @@ import { ParsedFrontMatter } from '../parsers';
 import { getLocalizationFile } from '../utils/getLocalizationFile';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
-import { getTitleField, joinUrl } from '../utils';
+import { getTitleField, getWebviewJsFiles, joinUrl } from '../utils';
 import { i18n } from './i18n';
 
 export class Preview {
@@ -110,31 +110,36 @@ export class Preview {
       webView.dispose();
     });
 
+    const fetchLocalization = async (requestId: string) => {
+      if (!requestId) {
+        return;
+      }
+
+      const fileContents = await getLocalizationFile();
+
+      webView.webview.postMessage({
+        command: GeneralCommands.toVSCode.getLocalization,
+        requestId,
+        payload: fileContents
+      });
+    };
+
     webView.webview.onDidReceiveMessage(async (message) => {
-      switch (message.command) {
+      const { command, payload, requestId } = message;
+
+      switch (command) {
         case PreviewCommands.toVSCode.open:
-          if (message.payload) {
-            commands.executeCommand('vscode.open', message.payload);
+          if (payload) {
+            commands.executeCommand('vscode.open', payload);
           }
-          return;
+          break;
         case GeneralCommands.toVSCode.getLocalization:
-          const { requestId } = message;
-          if (!requestId) {
-            return;
-          }
-
-          const fileContents = await getLocalizationFile();
-
-          webView.webview.postMessage({
-            command: GeneralCommands.toVSCode.getLocalization,
-            requestId,
-            payload: fileContents
-          });
-          return;
+          fetchLocalization(requestId);
+          break;
       }
     });
 
-    const dashboardFile = 'dashboardWebView.js';
+    const webviewFile = 'dashboard.main.js';
     const localPort = `9000`;
     const localServerUrl = `localhost:${localPort}`;
 
@@ -144,7 +149,6 @@ export class Preview {
     const isProd = ext.isProductionMode;
     const version = ext.getVersion();
     const isBeta = ext.isBetaVersion();
-    const extensionUri = ext.extensionPath;
 
     const csp = [
       `default-src 'none';`,
@@ -161,13 +165,11 @@ export class Preview {
       `frame-src ${localhostUrl} ${cspSource} http: https:;`
     ];
 
-    let scriptUri = '';
+    let scriptUris = [];
     if (isProd) {
-      scriptUri = webView.webview
-        .asWebviewUri(Uri.joinPath(extensionUri, 'dist', dashboardFile))
-        .toString();
+      scriptUris = await getWebviewJsFiles('dashboard', webView.webview);
     } else {
-      scriptUri = `http://${localServerUrl}/${dashboardFile}`;
+      scriptUris.push(`http://${localServerUrl}/${webviewFile}`);
     }
 
     // Get experimental setting
@@ -193,7 +195,11 @@ export class Preview {
       experimental ? `data-experimental="${experimental}"` : ''
     } style="width:100%;height:100%;margin:0;padding:0;"></div>
 
-          <script ${isProd ? `nonce="${nonce}"` : ''} src="${scriptUri}"></script>
+        ${scriptUris
+          .map((uri) => `<script ${isProd ? `nonce="${nonce}"` : ''} src="${uri}"></script>`)
+          .join('\n')}
+
+          <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`preview-${version.installedVersion}`}" alt="Daily usage" />
         </body>
       </html>
     `;
@@ -310,7 +316,7 @@ export class Preview {
 
       try {
         const articleDate = await ArticleHelper.getDate(article);
-        pathname = processDateTimePlaceholders(pathname, dateFormat, articleDate);
+        pathname = processDateTimePlaceholders(pathname, articleDate);
         slug = join(pathname, slug);
       } catch (error) {
         slug = join(pathname, slug);

src/commands/Project.ts

@@ -42,7 +42,7 @@ categories: []
 
     // Initialize command
     subscriptions.push(
-      commands.registerCommand(COMMAND_NAME.init, async (cb: Function) => {
+      commands.registerCommand(COMMAND_NAME.init, async (cb: () => void) => {
         await Project.init();
 
         if (cb) {

src/commands/Wysiwyg.ts

@@ -1,8 +1,7 @@
 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';
+import { LocalizationKey, localize } from '../localization';
 
 enum MarkupType {
   bold = 1,
@@ -18,6 +17,8 @@ enum MarkupType {
   hyperlink
 }
 
+type DocType = 'markdown' | 'asciidoc';
+
 export class Wysiwyg {
   /**
    * Registers the markup commands for the WYSIWYG controls
@@ -83,45 +84,45 @@ export class Wysiwyg {
       commands.registerCommand(COMMAND_NAME.options, async () => {
         const qpItems: QuickPickItem[] = [
           {
-            label: `$(list-unordered) ${LocalizationKey.commandsWysiwygCommandUnorderedListLabel}`,
-            detail: LocalizationKey.commandsWysiwygCommandUnorderedListDetail,
+            label: `$(list-unordered) ${localize(LocalizationKey.commandsWysiwygCommandUnorderedListLabel)}`,
+            detail: localize(LocalizationKey.commandsWysiwygCommandUnorderedListDetail),
             alwaysShow: true
           },
           {
-            label: `$(list-ordered) ${LocalizationKey.commandsWysiwygCommandOrderedListLabel}`,
-            detail: LocalizationKey.commandsWysiwygCommandOrderedListDetail,
+            label: `$(list-ordered) ${localize(LocalizationKey.commandsWysiwygCommandOrderedListLabel)}`,
+            detail: localize(LocalizationKey.commandsWysiwygCommandOrderedListDetail),
             alwaysShow: true
           },
           {
-            label: `$(tasklist) ${LocalizationKey.commandsWysiwygCommandTaskListLabel}`,
-            detail: LocalizationKey.commandsWysiwygCommandTaskListDetail,
+            label: `$(tasklist) ${localize(LocalizationKey.commandsWysiwygCommandTaskListLabel)}`,
+            detail: localize(LocalizationKey.commandsWysiwygCommandTaskListDetail),
             alwaysShow: true
           },
           {
-            label: `$(code) ${LocalizationKey.commandsWysiwygCommandCodeLabel}`,
-            detail: LocalizationKey.commandsWysiwygCommandCodeDetail,
+            label: `$(code) ${localize(LocalizationKey.commandsWysiwygCommandCodeLabel)}`,
+            detail: localize(LocalizationKey.commandsWysiwygCommandCodeDetail),
             alwaysShow: true
           },
           {
-            label: `$(symbol-namespace) ${LocalizationKey.commandsWysiwygCommandCodeblockLabel}`,
-            detail: LocalizationKey.commandsWysiwygCommandCodeblockDetail,
+            label: `$(symbol-namespace) ${localize(LocalizationKey.commandsWysiwygCommandCodeblockLabel)}`,
+            detail: localize(LocalizationKey.commandsWysiwygCommandCodeblockDetail),
             alwaysShow: true
           },
           {
-            label: `$(quote) ${LocalizationKey.commandsWysiwygCommandBlockquoteLabel}`,
-            detail: LocalizationKey.commandsWysiwygCommandBlockquoteDetail,
+            label: `$(quote) ${localize(LocalizationKey.commandsWysiwygCommandBlockquoteLabel)}`,
+            detail: localize(LocalizationKey.commandsWysiwygCommandBlockquoteDetail),
             alwaysShow: true
           },
           {
-            label: `$(symbol-text) ${LocalizationKey.commandsWysiwygCommandStrikethroughLabel}`,
-            detail: LocalizationKey.commandsWysiwygCommandStrikethroughDetail,
+            label: `$(symbol-text) ${localize(LocalizationKey.commandsWysiwygCommandStrikethroughLabel)}`,
+            detail: localize(LocalizationKey.commandsWysiwygCommandStrikethroughDetail),
             alwaysShow: true
           }
         ];
 
         const option = await window.showQuickPick([...qpItems], {
-          title: l10n.t(LocalizationKey.commandsWysiwygQuickPickTitle),
-          placeHolder: l10n.t(LocalizationKey.commandsWysiwygQuickPickPlaceholder),
+          title: localize(LocalizationKey.commandsWysiwygQuickPickTitle),
+          placeHolder: localize(LocalizationKey.commandsWysiwygQuickPickPlaceholder),
           canPickMany: false,
           ignoreFocusOut: true
         });
@@ -147,6 +148,15 @@ export class Wysiwyg {
     );
   }
 
+  /**
+   * Retrieves the document type based on the file extension.
+   * @param filePath - The path of the file.
+   * @returns The document type ('asciidoc' or 'markdown').
+   */
+  public static getDocType(filePath: string): DocType {
+    return filePath.endsWith('.adoc') ? 'asciidoc' : 'markdown';
+  }
+
   /**
    * Add the markup to the content
    * @param type
@@ -161,11 +171,12 @@ export class Wysiwyg {
     const selection = editor.selection;
     const hasTextSelection = !selection.isEmpty;
 
+    const docType: DocType = Wysiwyg.getDocType(editor.document.fileName);
     if (type === MarkupType.hyperlink) {
-      return this.addHyperlink(editor, selection);
+      return this.addHyperlink(editor, selection, docType);
     }
 
-    const markers = this.getMarkers(type);
+    const markers = this.getMarkers(type, docType);
     if (!markers) {
       return;
     }
@@ -175,13 +186,13 @@ export class Wysiwyg {
     if (hasTextSelection) {
       // Replace the selection and surround with the markup
       const selectionText = editor.document.getText(selection);
-      const txt = await this.insertText(markers, type, selectionText);
+      const txt = await this.insertText(markers, type, selectionText, docType);
 
       editor.edit((builder) => {
         builder.replace(selection, txt);
       });
     } else {
-      const txt = await this.insertText(markers, type);
+      const txt = await this.insertText(markers, type, null, docType);
 
       // Insert the markers where cursor is located.
       const markerLength = this.isMarkupWrapping(type) ? txt.length + 1 : markers.length;
@@ -198,6 +209,10 @@ export class Wysiwyg {
         newPosition = crntSelection.with(crntSelection.line + 1, 0);
       }
 
+      if (type === MarkupType.blockquote && docType === 'asciidoc') {
+        newPosition = crntSelection.with(crntSelection.line + 1, 0);
+      }
+
       editor.selection = new Selection(newPosition, newPosition);
     }
   }
@@ -206,28 +221,39 @@ export class Wysiwyg {
    * Add a hyperlink to the content
    * @returns void
    */
-  private static async addHyperlink(editor: TextEditor, selection: Selection) {
+  private static async addHyperlink(
+    editor: TextEditor,
+    selection: Selection,
+    docType: DocType = 'markdown'
+  ) {
     const hasTextSelection = !selection.isEmpty;
     const linkText = hasTextSelection ? editor.document.getText(selection) : '';
 
     const link = await window.showInputBox({
-      title: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkHyperlinkInputTitle),
-      placeHolder: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkHyperlinkInputPrompt),
-      prompt: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkHyperlinkInputPrompt),
+      title: localize(LocalizationKey.commandsWysiwygAddHyperlinkHyperlinkInputTitle),
+      placeHolder: localize(LocalizationKey.commandsWysiwygAddHyperlinkHyperlinkInputPrompt),
+      prompt: localize(LocalizationKey.commandsWysiwygAddHyperlinkHyperlinkInputPrompt),
       value: linkText,
       ignoreFocusOut: true
     });
 
     const text = await window.showInputBox({
-      title: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkTextInputTitle),
-      prompt: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkTextInputPrompt),
-      placeHolder: l10n.t(LocalizationKey.commandsWysiwygAddHyperlinkTextInputPrompt),
+      title: localize(LocalizationKey.commandsWysiwygAddHyperlinkTextInputTitle),
+      prompt: localize(LocalizationKey.commandsWysiwygAddHyperlinkTextInputPrompt),
+      placeHolder: localize(LocalizationKey.commandsWysiwygAddHyperlinkTextInputPrompt),
       value: linkText,
       ignoreFocusOut: true
     });
 
     if (link) {
-      const txt = `[${text || link}](${link})`;
+      let txt = `[${text || link}](${link})`;
+
+      if (docType === 'asciidoc') {
+        txt = !link.startsWith('http') ? `link:${link}` : link;
+        if (text) {
+          txt = `${txt}[${text}]`;
+        }
+      }
 
       if (hasTextSelection) {
         editor.edit((builder) => {
@@ -255,14 +281,23 @@ export class Wysiwyg {
    * @param type
    * @returns
    */
-  private static isMarkupWrapping(type: MarkupType) {
-    return (
-      type === MarkupType.blockquote ||
-      type === MarkupType.heading ||
-      type === MarkupType.unorderedList ||
-      type === MarkupType.orderedList ||
-      type === MarkupType.taskList
-    );
+  private static isMarkupWrapping(type: MarkupType, docType: DocType = 'markdown') {
+    if (docType === 'markdown') {
+      return (
+        type === MarkupType.blockquote ||
+        type === MarkupType.heading ||
+        type === MarkupType.unorderedList ||
+        type === MarkupType.orderedList ||
+        type === MarkupType.taskList
+      );
+    } else if (docType === 'asciidoc') {
+      return (
+        type === MarkupType.heading ||
+        type === MarkupType.unorderedList ||
+        type === MarkupType.orderedList ||
+        type === MarkupType.taskList
+      );
+    }
   }
 
   /**
@@ -271,17 +306,18 @@ export class Wysiwyg {
   private static async insertText(
     marker: string | undefined,
     type: MarkupType,
-    text: string | null = null
+    text: string | null = null,
+    docType: DocType = 'markdown'
   ) {
-    const crntText = text || this.lineBreak(type);
+    const crntText = text || this.lineBreak(type, docType);
 
-    if (this.isMarkupWrapping(type)) {
+    if (this.isMarkupWrapping(type, docType)) {
       if (type === MarkupType.heading) {
         const headingLvl = await window.showQuickPick(
           ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4', 'Heading 5', 'Heading 6'],
           {
-            title: l10n.t(LocalizationKey.commandsWysiwygInsertTextHeadingInputTitle),
-            placeHolder: l10n.t(LocalizationKey.commandsWysiwygInsertTextHeadingInputPlaceholder),
+            title: localize(LocalizationKey.commandsWysiwygInsertTextHeadingInputTitle),
+            placeHolder: localize(LocalizationKey.commandsWysiwygInsertTextHeadingInputPlaceholder),
             canPickMany: false,
             ignoreFocusOut: true
           }
@@ -298,9 +334,12 @@ export class Wysiwyg {
         return lines.join('\n');
       }
 
-      if (type === MarkupType.orderedList) {
+      if (type === MarkupType.orderedList && docType === 'markdown') {
         const lines = crntText.split('\n').map((line, idx) => `${idx + 1}. ${line}`);
         return lines.join('\n');
+      } else if (type === MarkupType.orderedList && docType === 'asciidoc') {
+        const lines = crntText.split('\n').map((line) => `${marker} ${line}`);
+        return lines.join('\n');
       }
 
       return `${marker} ${crntText}`;
@@ -314,9 +353,11 @@ export class Wysiwyg {
    * @param type
    * @returns
    */
-  private static lineBreak(type: MarkupType) {
+  private static lineBreak(type: MarkupType, docType: DocType = 'markdown') {
     if (type === MarkupType.codeblock) {
       return `\n\n`;
+    } else if (type === MarkupType.blockquote && docType === 'asciidoc') {
+      return `\n\n`;
     }
     return '';
   }
@@ -326,30 +367,57 @@ export class Wysiwyg {
    * @param type
    * @returns
    */
-  private static getMarkers(type: MarkupType) {
-    switch (type) {
-      case MarkupType.bold:
-        return `**`;
-      case MarkupType.italic:
-        return `*`;
-      case MarkupType.strikethrough:
-        return `~~`;
-      case MarkupType.code:
-        return '`';
-      case MarkupType.codeblock:
-        return '```';
-      case MarkupType.blockquote:
-        return '>';
-      case MarkupType.heading:
-        return '#';
-      case MarkupType.unorderedList:
-        return '-';
-      case MarkupType.orderedList:
-        return '1.';
-      case MarkupType.taskList:
-        return '- [ ]';
-      default:
-        return;
+  private static getMarkers(type: MarkupType, docType: DocType = 'markdown') {
+    if (docType === 'markdown') {
+      switch (type) {
+        case MarkupType.bold:
+          return `**`;
+        case MarkupType.italic:
+          return `*`;
+        case MarkupType.strikethrough:
+          return `~~`;
+        case MarkupType.code:
+          return '`';
+        case MarkupType.codeblock:
+          return '```';
+        case MarkupType.blockquote:
+          return '>';
+        case MarkupType.heading:
+          return '#';
+        case MarkupType.unorderedList:
+          return '-';
+        case MarkupType.orderedList:
+          return '1.';
+        case MarkupType.taskList:
+          return '- [ ]';
+        default:
+          return;
+      }
+    } else if (docType === 'asciidoc') {
+      switch (type) {
+        case MarkupType.bold:
+          return `*`;
+        case MarkupType.italic:
+          return `_`;
+        case MarkupType.strikethrough:
+          return `~`;
+        case MarkupType.code:
+          return '`';
+        case MarkupType.codeblock:
+          return '----';
+        case MarkupType.blockquote:
+          return '____';
+        case MarkupType.heading:
+          return '=';
+        case MarkupType.unorderedList:
+          return '*';
+        case MarkupType.orderedList:
+          return '.';
+        case MarkupType.taskList:
+          return '* [ ]';
+        default:
+          return;
+      }
     }
   }
 }

src/commands/i18n.ts

@@ -1,4 +1,13 @@
-import { ProgressLocation, Uri, commands, window, workspace } from 'vscode';
+import {
+  ProgressLocation,
+  QuickPickItem,
+  QuickPickItemKind,
+  QuickPickOptions,
+  Uri,
+  commands,
+  window,
+  workspace
+} from 'vscode';
 import {
   ArticleHelper,
   ContentType,
@@ -16,8 +25,7 @@ import { existsAsync, getDescriptionField, getTitleField } from '../utils';
 import { Folders } from '.';
 import { ParsedFrontMatter } from '../parsers';
 import { PagesListener } from '../listeners/dashboard';
-import * as l10n from '@vscode/l10n';
-import { LocalizationKey } from '../localization';
+import { LocalizationKey, localize } from '../localization';
 import { Translations } from '../services/Translations';
 
 export class i18n {
@@ -32,6 +40,7 @@ export class i18n {
     const subscriptions = Extension.getInstance().subscriptions;
 
     subscriptions.push(commands.registerCommand(COMMAND_NAME.i18n.create, i18n.create));
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.i18n.createOrOpen, i18n.createOrOpen));
 
     i18n.clearFiles();
   }
@@ -264,7 +273,7 @@ export class i18n {
     }
 
     if (!fileUri) {
-      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoFileSelected));
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateWarningNoFileSelected));
       return;
     }
 
@@ -274,19 +283,19 @@ export class i18n {
 
     const pageFolder = await Folders.getPageFolderByFilePath(fileUri.fsPath);
     if (!pageFolder || !pageFolder.localeSourcePath) {
-      Notifications.error(l10n.t(LocalizationKey.commandsI18nCreateErrorNoContentFolder));
+      Notifications.error(localize(LocalizationKey.commandsI18nCreateErrorNoContentFolder));
       return;
     }
 
     const i18nSettings = await i18n.getSettings(fileUri.fsPath);
     if (!i18nSettings) {
-      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoConfig));
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateWarningNoConfig));
       return;
     }
 
     const sourceLocale = await i18n.getLocale(fileUri.fsPath);
     if (!sourceLocale || !sourceLocale.locale) {
-      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateErrorNoLocaleDefinition));
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateErrorNoLocaleDefinition));
       return;
     }
 
@@ -300,15 +309,15 @@ export class i18n {
     });
 
     if (targetLocales.length === 0) {
-      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateErrorNoLocales));
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateErrorNoLocales));
       return;
     }
 
     const locale = await window.showQuickPick(
       targetLocales.map((i18n) => i18n.title || i18n.locale),
       {
-        title: l10n.t(LocalizationKey.commandsI18nCreateQuickPickTitle),
-        placeHolder: l10n.t(LocalizationKey.commandsI18nCreateQuickPickPlaceHolder),
+        title: localize(LocalizationKey.commandsI18nCreateQuickPickTitle),
+        placeHolder: localize(LocalizationKey.commandsI18nCreateQuickPickPlaceHolder),
         ignoreFocusOut: true
       }
     );
@@ -321,19 +330,19 @@ export class i18n {
       (i18n) => i18n.title === locale || i18n.locale === locale
     );
     if (!targetLocale || !targetLocale.path) {
-      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoConfig));
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateWarningNoConfig));
       return;
     }
 
     let article = await ArticleHelper.getFrontMatterByPath(fileUri.fsPath);
     if (!article) {
-      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoFile));
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateWarningNoFile));
       return;
     }
 
     const contentType = await ArticleHelper.getContentType(article);
     if (!contentType) {
-      Notifications.warning(l10n.t(LocalizationKey.commandsI18nCreateWarningNoContentType));
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateWarningNoContentType));
       return;
     }
 
@@ -365,7 +374,7 @@ export class i18n {
 
     const newFilePath = join(i18nDir, fileInfo.base);
     if (await existsAsync(newFilePath)) {
-      Notifications.error(l10n.t(LocalizationKey.commandsI18nCreateErrorFileExists));
+      Notifications.error(localize(LocalizationKey.commandsI18nCreateErrorFileExists));
       return;
     }
 
@@ -384,7 +393,188 @@ export class i18n {
     PagesListener.refresh();
 
     Notifications.info(
-      l10n.t(
+      localize(
+        LocalizationKey.commandsI18nCreateSuccessCreated,
+        sourceLocale.title || sourceLocale.locale
+      )
+    );
+  }
+
+  /**
+   * This method handles the process of creating a new translation file if it doesn't exist,
+   * or opening an existing translation file if it's already present.
+   * @param filePath The path of the file where the new content file should be created or being switched to. Behaves like `create` if not provided.
+   */
+  private static async createOrOpen(fileUri?: Uri | string) {
+    if (!fileUri) {
+      const filePath = ArticleHelper.getActiveFile();
+      fileUri = filePath ? Uri.file(filePath) : undefined;
+    }
+
+    if (!fileUri) {
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateWarningNoFileSelected));
+      return;
+    }
+
+    if (typeof fileUri === 'string') {
+      fileUri = Uri.file(fileUri);
+    }
+
+    const pageFolder = await Folders.getPageFolderByFilePath(fileUri.fsPath);
+    if (!pageFolder || !pageFolder.localeSourcePath) {
+      Notifications.error(localize(LocalizationKey.commandsI18nCreateErrorNoContentFolder));
+      return;
+    }
+
+    let article = await ArticleHelper.getFrontMatterByPath(fileUri.fsPath);
+    if (!article) {
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateWarningNoFile));
+      return;
+    }
+
+    const contentType = await ArticleHelper.getContentType(article);
+    if (!contentType) {
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateWarningNoContentType));
+      return;
+    }
+
+    const i18nSettings = await i18n.getSettings(fileUri.fsPath);
+    if (!i18nSettings) {
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateWarningNoConfig));
+      return;
+    }
+
+    const sourceLocale = await i18n.getLocale(fileUri.fsPath);
+    if (!sourceLocale || !sourceLocale.locale) {
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateErrorNoLocaleDefinition));
+      return;
+    }
+
+    // Determine translation file paths
+    const fileInfo = parse(fileUri.fsPath);
+    let pageBundleDir = '';
+    if (await ArticleHelper.isPageBundle(fileUri.fsPath)) {
+      const dir = ArticleHelper.getPageFolderFromBundlePath(fileUri.fsPath);
+      pageBundleDir = fileUri.fsPath.replace(dir, '');
+      pageBundleDir = join(parse(pageBundleDir).dir);
+    }
+
+    // Gather target locales & metadata
+    const translations = (await i18n.getTranslations(fileUri.fsPath)) || {};
+    const targetLocales = i18nSettings
+      .filter((i18n) => {
+        return i18n.path && i18n.locale !== sourceLocale.locale;
+      })
+      .map((i18n) => {
+        return {
+          ...i18n,
+          dir: join(pageFolder.localeSourcePath!, i18n.path!, pageBundleDir),
+          absolutePath: join(
+            pageFolder.localeSourcePath!,
+            i18n.path!,
+            pageBundleDir,
+            fileInfo.base
+          ),
+          relativePath: join(i18n.path!, pageBundleDir, fileInfo.base)
+        };
+      })
+      .sort((a, b) => (a.title || a.locale).localeCompare(b.title || b.locale));
+
+    if (targetLocales.length === 0) {
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateErrorNoLocales));
+      return;
+    }
+
+    // Configure quick pick items & options
+    const existingTargetLocales = targetLocales.filter((i18n) => translations[i18n.locale]);
+    const newTargetLocales = targetLocales.filter((i18n) => !translations[i18n.locale]);
+    const quickPickItems: QuickPickItem[] = [
+      ...(existingTargetLocales.length
+        ? [
+            {
+              label: localize(LocalizationKey.commandsI18nCreateOrOpenQuickPickCategoryExisting),
+              kind: QuickPickItemKind.Separator
+            },
+            ...existingTargetLocales.map((i18n) => ({
+              label: i18n.title || i18n.locale,
+              detail: localize(
+                LocalizationKey.commandsI18nCreateOrOpenQuickPickActionOpen,
+                i18n.relativePath
+              )
+            }))
+          ]
+        : []),
+      ...(newTargetLocales.length
+        ? [
+            {
+              label: localize(LocalizationKey.commandsI18nCreateOrOpenQuickPickCategoryNew),
+              kind: QuickPickItemKind.Separator
+            },
+            ...newTargetLocales.map((i18n) => ({
+              label: i18n.title || i18n.locale,
+              detail: `$(file-add) ${localize(
+                LocalizationKey.commandsI18nCreateOrOpenQuickPickActionCreate,
+                i18n.relativePath
+              )}`
+            }))
+          ]
+        : [])
+    ];
+    const quickPickOptions: QuickPickOptions = {
+      title: localize(LocalizationKey.commandsI18nCreateOrOpenQuickPickTitle),
+      ignoreFocusOut: true,
+      matchOnDetail: true
+    };
+
+    const localeItem = await window.showQuickPick<QuickPickItem>(quickPickItems, quickPickOptions);
+    const locale = localeItem?.label;
+    if (!locale) {
+      return;
+    }
+
+    const targetLocale = targetLocales.find(
+      (i18n) => i18n.title === locale || i18n.locale === locale
+    );
+    if (!targetLocale || !targetLocale.path) {
+      Notifications.warning(localize(LocalizationKey.commandsI18nCreateWarningNoConfig));
+      return;
+    }
+
+    // If it exists, open the translation file
+    if (await existsAsync(targetLocale.absolutePath)) {
+      await openFileInEditor(targetLocale.absolutePath);
+      return;
+    }
+
+    // If it doesn't exist, create the new translation file & update front matter
+    if (!(await existsAsync(targetLocale.dir))) {
+      await workspace.fs.createDirectory(Uri.file(targetLocale.dir));
+    }
+
+    article = await i18n.updateFrontMatter(
+      article,
+      fileUri.fsPath,
+      contentType,
+      sourceLocale,
+      targetLocale,
+      targetLocale.dir
+    );
+    if (sourceLocale?.locale) {
+      article = await i18n.translate(article, sourceLocale, targetLocale);
+    }
+
+    const newFileUri = Uri.file(targetLocale.absolutePath);
+    await workspace.fs.writeFile(
+      newFileUri,
+      Buffer.from(ArticleHelper.stringifyFrontMatter(article.content, article.data))
+    );
+
+    await openFileInEditor(targetLocale.absolutePath);
+
+    PagesListener.refresh();
+
+    Notifications.info(
+      localize(
         LocalizationKey.commandsI18nCreateSuccessCreated,
         sourceLocale.title || sourceLocale.locale
       )
@@ -403,11 +593,11 @@ export class i18n {
     sourceLocale: I18nConfig,
     targetLocale: I18nConfig
   ) {
-    return new Promise<ParsedFrontMatter>(async (resolve) => {
-      await window.withProgress(
+    return new Promise<ParsedFrontMatter>((resolve) => {
+      window.withProgress(
         {
           location: ProgressLocation.Notification,
-          title: l10n.t(LocalizationKey.commandsI18nTranslateProgressTitle),
+          title: localize(LocalizationKey.commandsI18nTranslateProgressTitle),
           cancellable: false
         },
         async () => {

src/components/common/Tooltip.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Tooltip as TT } from 'react-tooltip'
+
+export interface ITooltipProps {
+  id: string;
+  render?: () => React.ReactNode;
+}
+
+export const Tooltip: React.FunctionComponent<ITooltipProps> = ({
+  id,
+  render
+}: React.PropsWithChildren<ITooltipProps>) => {
+
+  const tooltipClasses = `!py-[2px] !px-[8px] !rounded-[3px] !border-[var(--vscode-editorHoverWidget-border)] !border !border-solid !bg-[var(--vscode-editorHoverWidget-background)] !text-[var(--vscode-editorHoverWidget-foreground)] !font-normal !opacity-100 shadow-[0_2px_8px_var(--vscode-widget-shadow)] text-left`;
+  
+  return (
+    <TT 
+      id={id}
+      className={tooltipClasses} 
+      style={{
+        fontSize: '12px',
+        lineHeight: '19px'
+      }}
+      render={render} />
+  );
+};

src/components/uniforms-frontmatter/NumField.tsx

@@ -30,6 +30,7 @@ function Num({
       <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'
         disabled={disabled}
         id={id}
         max={max}

src/components/uniforms-frontmatter/SelectField.tsx

@@ -42,6 +42,7 @@ function Select({
   ...props
 }: SelectFieldProps) {
   const multiple = fieldType === Array;
+
   return (
     <div className="autoform__select_field" {...filterDOMProps(props)}>
       <LabelField label={label} id={id} required={required} />
@@ -84,11 +85,12 @@ function Select({
           }}
           ref={inputRef}
           value={value ?? ''}
+          className='text-[var(--vscode-foreground)] bg-[var(--vscode-list-activeSelectionBackground)] rounded-[2px] active:border-transparent disabled:opacity-40 disabled:cursor-not-allowed focus:outline-none'
           style={{ width: '100%', padding: '0.5rem' }}
         >
-          {(!!placeholder || !required || value === undefined) && !multiple && (
+          {(!required || value === undefined) && !multiple && (
             <option value="" disabled={required} hidden={required}>
-              {placeholder || label}
+              {""}
             </option>
           )}
 

src/constants/Extension.ts

@@ -70,7 +70,8 @@ export const COMMAND_NAME = {
 
   // i18n
   i18n: {
-    create: getCommandName('i18n.create')
+    create: getCommandName('i18n.create'),
+    createOrOpen: getCommandName('i18n.createOrOpen')
   },
 
   // Project

src/constants/Features.ts

@@ -4,10 +4,10 @@ export const FEATURE_FLAG = {
     seo: 'panel.seo',
     actions: 'panel.actions',
     metadata: 'panel.metadata',
-    recentlyModified: 'panel.recentlyModified',
-    otherActions: 'panel.otherActions',
     contentType: 'panel.contentType',
-    gitActions: 'panel.gitActions'
+    gitActions: 'panel.gitActions',
+    recentlyModified: 'panel.recentlyModified',
+    otherActions: 'panel.otherActions'
   },
   dashboard: {
     snippets: {

src/constants/settings.ts

@@ -13,6 +13,7 @@ export const SETTING_GLOBAL_NOTIFICATIONS = 'global.notifications';
 export const SETTING_GLOBAL_NOTIFICATIONS_DISABLED = 'global.disabledNotifications';
 export const SETTING_GLOBAL_MODES = 'global.modes';
 export const SETTING_GLOBAL_ACTIVE_MODE = 'global.activeMode';
+export const SETTING_GLOBAL_TIMEZONE = 'global.timezone';
 
 export const SETTING_TAXONOMY_TAGS = 'taxonomy.tags';
 export const SETTING_TAXONOMY_CATEGORIES = 'taxonomy.categories';
@@ -45,6 +46,7 @@ export const SETTING_TEMPLATES_FOLDER = 'templates.folder';
 export const SETTING_TEMPLATES_PREFIX = 'templates.prefix';
 export const SETTING_TEMPLATES_ENABLED = 'templates.enabled';
 
+export const SETTING_PANEL_OPEN_ON_SUPPORTED_FILE = 'panel.openOnSupportedFile';
 export const SETTING_PANEL_FREEFORM = 'panel.freeform';
 export const SETTING_PANEL_ACTIONS_DISABLED = 'panel.actions.disabled';
 
@@ -61,6 +63,7 @@ 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_GROUPING = 'content.grouping';
 export const SETTING_CONTENT_FILTERS = 'content.filters';
 export const SETTING_CONTENT_WYSIWYG = 'content.wysiwyg';
 export const SETTING_CONTENT_PLACEHOLDERS = 'content.placeholders';

src/dashboardWebView/DashboardMessage.ts

@@ -42,6 +42,8 @@ export enum DashboardMessage {
   insertMedia = 'insertMedia',
   updateMediaMetadata = 'updateMediaMetadata',
   createMediaFolder = 'createMediaFolder',
+  updateMediaFolder = 'updateMediaFolder',
+  deleteMediaFolder = 'deleteMediaFolder',
   insertFile = 'insertFile',
   createHexoAssetFolder = 'createHexoAssetFolder',
   getUnmappedMedia = 'getUnmappedMedia',
@@ -50,6 +52,7 @@ export enum DashboardMessage {
   // Data dashboard
   getDataEntries = 'getDataEntries',
   putDataEntries = 'putDataEntries',
+  createDataFile = 'createDataFile',
 
   // Snippets dashboard
   insertSnippet = 'insertSnippet',

src/dashboardWebView/components/App.tsx

@@ -54,7 +54,7 @@ export const App: React.FunctionComponent<IAppProps> = ({
     return isAllowed(mode?.features || [], FEATURE_FLAG.dashboard.taxonomy.view);
   }, [mode?.features]);
 
-  const checkDevMode = (retry: number = 0) => {
+  const checkDevMode = (retry = 0) => {
     if (!window.fmExternal) {
       if (retry < 5) {
         setTimeout(() => checkDevMode(retry + 1), 150);

src/dashboardWebView/components/Chatbot/Chatbot.tsx

@@ -11,10 +11,11 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { GeneralCommands, WEBSITE_LINKS } from '../../../constants';
+import { l10nJsonFormat } from '@vscode/l10n';
 
 export interface IChatbotProps { }
 
-export const Chatbot: React.FunctionComponent<IChatbotProps> = ({ }: React.PropsWithChildren<IChatbotProps>) => {
+export const Chatbot: React.FunctionComponent<IChatbotProps> = () => {
   const { aiUrl } = useSettingsContext();
   const [company, setCompany] = React.useState<string | undefined>(undefined);
   const [chatId, setChatId] = React.useState<number | undefined>(undefined);
@@ -27,7 +28,7 @@ export const Chatbot: React.FunctionComponent<IChatbotProps> = ({ }: React.Props
 
   const init = async () => {
     setLoading(true);
-    messageHandler.request<any>(GeneralCommands.toVSCode.getLocalization).then((data) => {
+    messageHandler.request<l10nJsonFormat>(GeneralCommands.toVSCode.getLocalization).then((data) => {
       if (data) {
         l10n.config({
           contents: data

src/dashboardWebView/components/Common/Button.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-
-export interface IButtonProps {
-  secondary?: boolean;
-  disabled?: boolean;
-  className?: string;
-  onClick: () => void;
-}
-
-export const Button: React.FunctionComponent<IButtonProps> = ({
-  onClick,
-  className,
-  disabled,
-  secondary,
-  children
-}: React.PropsWithChildren<IButtonProps>) => {
-
-  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 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}
-      disabled={disabled}
-    >
-      {children}
-    </button>
-  );
-};

src/dashboardWebView/components/Common/ItemSelection.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import useSelectedItems from '../../hooks/useSelectedItems';
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
 import { useMemo } from 'react';
 
 export interface IItemSelectionProps {
@@ -24,11 +24,11 @@ export const ItemSelection: React.FunctionComponent<IItemSelectionProps> = ({
   return (
     <div className={`${cssNames} group-hover:block`}>
       <VSCodeCheckbox
-        style={{
-          boxShadow: show ? "" : "0 0 3px var(--frontmatter-border-preserve)"
-        }}
-        onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+        className={show ? "" : " shadow-[0_0_3px_var(--frontmatter-border-preserve)]"}
+        onClick={(e) => {
           e.stopPropagation();
+        }}
+        onChange={() => {
           onMultiSelect(filePath);
         }}
         checked={selectedFiles.includes(filePath)} />

src/dashboardWebView/components/Contents/Overview.tsx

@@ -10,8 +10,7 @@ import { GroupingSelector, PageAtom, PagedItems, ViewSelector } from '../../stat
 import { Item } from './Item';
 import { List } from './List';
 import usePagination from '../../hooks/usePagination';
-import * as l10n from '@vscode/l10n';
-import { LocalizationKey } from '../../../localization';
+import { LocalizationKey, localize } from '../../../localization';
 import { PinnedItemsAtom } from '../../state/atom/PinnedItems';
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
@@ -54,13 +53,18 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
 
   const groupName = useCallback(
     (groupId, groupedPages) => {
+      const count = groupedPages[groupId].length;
       if (grouping === GroupOption.Draft) {
-        return `${groupId} (${groupedPages[groupId].length})`;
+        return `${groupId} (${count})`;
+      } else if (typeof grouping === 'string') {
+        const group = settings?.grouping?.find((g) => g.name === grouping);
+        const prefix = group?.title ? `${group.title}: ` : '';
+        return `${prefix}${groupId} (${count})`;
       }
 
-      return `${GroupOption[grouping]}: ${groupId} (${groupedPages[groupId].length})`;
+      return `${GroupOption[grouping]}: ${groupId} (${count})`;
     },
-    [grouping]
+    [grouping, settings?.grouping]
   );
 
   const { groupKeys, groupedPages } = useMemo(() => {
@@ -68,7 +72,18 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
       return { groupKeys: [], groupedPages: {} };
     }
 
-    let groupedPages = groupBy(pages, grouping === GroupOption.Year ? 'fmYear' : 'fmDraft');
+    let groupName: string | undefined;
+    if (grouping === GroupOption.Year) {
+      groupName = 'fmYear';
+    } else if (grouping === GroupOption.Draft) {
+      groupName = 'fmDraft';
+    } else if (typeof grouping === 'string') {
+      groupName = grouping;
+    } else {
+      return { groupKeys: [], groupedPages: {} };
+    }
+
+    let groupedPages = groupBy(pages, groupName);
     let groupKeys = Object.keys(groupedPages);
 
     if (grouping === GroupOption.Year) {
@@ -96,6 +111,8 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
           ...groupedPages,
         }
       }
+    } else {
+      groupKeys = groupKeys.sort();
     }
 
     return { groupKeys, groupedPages };
@@ -127,9 +144,11 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
             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>
+            <p className={`text-xl font-medium`}>{localize(LocalizationKey.dashboardContentsOverviewNoMarkdown)}</p>
+            
           ) : (
-            <p className={`text-lg font-medium`}>{l10n.t(LocalizationKey.dashboardContentsOverviewNoFolders)}</p>
+            <p className={`text-lg font-medium`}>{localize(LocalizationKey.dashboardContentsOverviewNoFolders)}</p>
+            
           )}
         </div>
       </div>
@@ -176,7 +195,8 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
           <div className='mb-8'>
             <h1 className='text-xl flex space-x-2 items-center mb-4'>
               <PinIcon className={`-rotate-45`} />
-              <span>{l10n.t(LocalizationKey.dashboardContentsOverviewPinned)}</span>
+              <span>{localize(LocalizationKey.dashboardContentsOverviewPinned)}</span>
+              
             </h1>
             <List>
               {pinnedPages.map((page, idx) => (

src/dashboardWebView/components/DataView/DataForm.tsx

@@ -53,7 +53,7 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({
       };
     } catch (error) {
       setError((error as Error).message);
-      return () => { };
+      return () => void 0;
     }
   };
 

src/dashboardWebView/components/DataView/DataFormControls.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { useForm } from 'uniforms';
-import { Button } from '../Common/Button';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { SubmitField } from '../../../components/uniforms-frontmatter';
+import { Button } from 'vscrui';
 
 export interface IDataFormControlsProps {
   model: any | null;
@@ -21,8 +21,8 @@ export const DataFormControls: React.FunctionComponent<IDataFormControlsProps> =
       <SubmitField value={model ? `Update` : `Add`} />
 
       <Button
-        className="ml-4"
-        secondary
+        className="ml-4 !py-2"
+        appearance="secondary"
         onClick={() => {
           if (onClear) {
             onClear();

src/dashboardWebView/components/DataView/DataView.tsx

@@ -5,34 +5,36 @@ import { SettingsSelector } from '../../state';
 import { DataForm } from './DataForm';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { DataFile } from '../../../models/DataFile';
-import { Messenger } from '@estruyf/vscode/dist/client';
+import { messageHandler, Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { SponsorMsg } from '../Layout/SponsorMsg';
 import { EventData } from '@estruyf/vscode';
 import { DashboardCommand } from '../../DashboardCommand';
-import { Button } from '../Common/Button';
 import { arrayMoveImmutable } from 'array-move';
 import { EmptyView } from './EmptyView';
 import { Container } from './SortableContainer';
 import { SortableItem } from './SortableItem';
-import { ChevronRightIcon, CircleStackIcon } from '@heroicons/react/24/outline';
+import { ChevronRightIcon, CircleStackIcon, EyeIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { DataType } from '../../../models/DataType';
 import { GeneralCommands, WEBSITE_LINKS } from '../../../constants';
 import { NavigationItem } from '../Layout';
-import * as l10n from '@vscode/l10n';
-import { LocalizationKey } from '../../../localization';
+import { LocalizationKey, localize } from '../../../localization';
 import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
 import { MenuButton, MenuItem } from '../Menu';
 import { Transition } from '@headlessui/react';
+import { DataFolder } from '../../../models';
+import { ActionsBarItem } from '../Header/ActionsBarItem';
+import { Spinner } from '../Common/Spinner';
+import { openFile } from '../../utils/MessageHandlers';
+import { Button } from 'vscrui';
 
 export interface IDataViewProps { }
 
-export const DataView: React.FunctionComponent<IDataViewProps> = (
-  _: React.PropsWithChildren<IDataViewProps>
-) => {
+export const DataView: React.FunctionComponent<IDataViewProps> = () => {
   const [selectedData, setSelectedData] = useState<DataFile | null>(null);
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [dataEntries, setDataEntries] = useState<any | any[] | null>(null);
+  const [loading, setLoading] = useState<boolean>(false);
   const settings = useRecoilValue(SettingsSelector);
 
   const setSchema = (dataFile: DataFile) => {
@@ -64,14 +66,14 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
   );
 
   const onSubmit = useCallback(
-    (data: any) => {
+    (data: unknown) => {
       if (selectedData?.singleEntry) {
         // Needs to add a single entry
         updateData(data);
         return;
       }
 
-      const dataClone: any[] = Object.assign([], dataEntries);
+      const dataClone: unknown[] = Object.assign([], dataEntries);
       if (selectedIndex !== null && selectedIndex !== undefined) {
         dataClone[selectedIndex] = data;
       } else {
@@ -110,11 +112,23 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         entries: data
       });
 
-      Messenger.send(DashboardMessage.showNotification, l10n.t(LocalizationKey.dashboardDataViewDataViewUpdateMessage));
+      Messenger.send(DashboardMessage.showNotification, localize(LocalizationKey.dashboardDataViewDataViewUpdateMessage));
     },
     [selectedData]
   );
 
+  const createDataFile = (folder: DataFolder) => {
+    setLoading(true);
+    messageHandler.request<DataFile>(DashboardMessage.createDataFile, folder).then(dataFile => {
+      if (dataFile) {
+        setSchema(dataFile);
+      }
+      setLoading(false);
+    }).catch((_: any) => {
+      setLoading(false);
+    });
+  }
+
   const dataEntry = useMemo(() => {
     if (selectedData?.singleEntry) {
       return dataEntries || {};
@@ -123,12 +137,44 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
     return dataEntries && selectedIndex !== null && selectedIndex !== undefined
       ? dataEntries[selectedIndex]
       : null;
-  }, [selectedData, , dataEntries, selectedIndex]);
+  }, [selectedData, dataEntries, selectedIndex]);
+
+  // Retrieve the data files, check if they have a schema or ID, if not, they shouldn't be shown
+  const dataFiles = useMemo(() => {
+    return (settings?.dataFiles || [])
+      .map((dataFile: DataFile) => {
+        if (!dataFile.schema && !dataFile.id) {
+          return null;
+        }
+
+        const clonedFile = Object.assign({}, dataFile);
+
+        if (clonedFile.type) {
+          const dataType = settings?.dataTypes?.find(
+            (dataType: DataType) => dataType.id === clonedFile.type
+          );
+          if (!dataType) {
+            return null;
+          }
+          clonedFile.schema = Object.assign({}, dataType.schema);
+        }
+
+        return clonedFile;
+      })
+      .filter((d) => d !== null) as DataFile[];
+  }, [settings?.dataFiles]);
+
+  const fileCreationFolders = useMemo(() => {
+    return (settings?.dataFolders || [])
+      .filter((folder) => folder.enableFileCreation);
+  }, [settings?.dataFolders]);
+
+  const hasOnlyDataCreationFolders = useMemo(() => (!dataFiles || dataFiles.length === 0) && (fileCreationFolders && fileCreationFolders.length > 0), [dataFiles, fileCreationFolders]);
 
   useEffect(() => {
     Messenger.listen(messageListener);
 
-    Messenger.send(DashboardMessage.setTitle, l10n.t(LocalizationKey.dashboardHeaderTabsData));
+    Messenger.send(DashboardMessage.setTitle, localize(LocalizationKey.dashboardHeaderTabsData));
 
     Messenger.send(GeneralCommands.toVSCode.logging.info, {
       message: 'Data view loaded',
@@ -140,49 +186,27 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
     };
   }, []);
 
-  // Retrieve the data files, check if they have a schema or ID, if not, they shouldn't be shown
-  const dataFiles = (settings?.dataFiles || [])
-    .map((dataFile: DataFile) => {
-      if (!dataFile.schema && !dataFile.id) {
-        return null;
-      }
-
-      const clonedFile = Object.assign({}, dataFile);
-
-      if (clonedFile.type) {
-        const dataType = settings?.dataTypes?.find(
-          (dataType: DataType) => dataType.id === clonedFile.type
-        );
-        if (!dataType) {
-          return null;
-        }
-        clonedFile.schema = Object.assign({}, dataType.schema);
-      }
-
-      return clonedFile;
-    })
-    .filter((d) => d !== null) as DataFile[];
-
   return (
     <div className="flex flex-col h-full overflow-auto inset-y-0">
       <Header settings={settings} />
 
-      {dataFiles && dataFiles.length > 0 ? (
+      {(dataFiles && dataFiles.length > 0) || (fileCreationFolders && fileCreationFolders.length > 0) ? (
         <div className={`relative w-full flex-grow mx-auto overflow-hidden`}>
           {
-            !selectedData && (
+            !selectedData && (dataFiles && dataFiles.length > 0) && (
               <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 border-[var(--frontmatter-border)]`}
                 >
                   <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
-                    {l10n.t(LocalizationKey.dashboardDataViewDataViewSelect)}
+                    {localize(LocalizationKey.dashboardDataViewDataViewSelect)}
                   </h2>
 
                   <nav className={`flex-1 py-4 -mx-4`}>
                     <div
                       className={`divide-y border-t border-b divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`}
                     >
+
                       {dataFiles &&
                         dataFiles.length > 0 &&
                         dataFiles.map((dataFile, idx) => (
@@ -208,30 +232,82 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
             enterFrom="opacity-0"
             enterTo="opacity-100">
             <div className={`w-full px-4 py-2 border-b border-[var(--frontmatter-border)]`}>
-              {selectedData && (
-                <DropdownMenu>
-                  <MenuButton
-                    label={l10n.t(LocalizationKey.dashboardDataViewDataViewSelect)}
-                    title={selectedData.title}
-                  />
+              <div className={`flex justify-between`}>
+                <div className={`flex gap-4`}>
+                  {
+                    selectedData && (
+                      <DropdownMenu>
+                        <MenuButton
+                          label={localize(LocalizationKey.dashboardDataViewDataViewSelect)}
+                          title={selectedData.title}
+                        />
 
-                  <DropdownMenuContent>
-                    {dataFiles.map((dataFile) => (
-                      <MenuItem
-                        key={dataFile.id}
-                        title={dataFile.title}
-                        value={dataFile}
-                        isCurrent={selectedData.id === dataFile.id}
-                        onClick={() => setSchema(dataFile)}
-                      />
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
+                        <DropdownMenuContent>
+                          {dataFiles.map((dataFile) => (
+                            <MenuItem
+                              key={dataFile.id}
+                              title={dataFile.title}
+                              value={dataFile}
+                              isCurrent={selectedData.id === dataFile.id}
+                              onClick={() => setSchema(dataFile)}
+                            />
+                          ))}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )
+                  }
+
+                  {
+                    fileCreationFolders && fileCreationFolders.length > 0 && (
+                      <DropdownMenu>
+                        <MenuButton
+                          label={localize(LocalizationKey.dashboardDataViewDataViewCreateNew)}
+                          title={localize(LocalizationKey.dashboardDataViewDataViewSelectDataFolder)}
+                        />
+
+                        <DropdownMenuContent>
+                          {fileCreationFolders.map((folder) => (
+                            <MenuItem
+                              key={folder.id}
+                              title={folder.id}
+                              value={folder}
+                              onClick={() => createDataFile(folder)}
+                            />
+                          ))}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    )
+                  }
+                </div>
+
+                {
+                  selectedData && (
+                    <div className={`flex gap-2`}>
+                      <ActionsBarItem
+                        className='flex items-center'
+                        onClick={() => openFile(selectedData.file)}
+                        title={localize(LocalizationKey.commonView)}
+                      >
+                        <EyeIcon className="w-4 h-4 mr-1" aria-hidden="true" />
+                        <span>{localize(LocalizationKey.commonView)}</span>
+                      </ActionsBarItem>
+
+                      <ActionsBarItem
+                        className='flex items-center hover:text-[var(--vscode-statusBarItem-warningBackground)]'
+                        onClick={() => setSelectedData(null)}
+                        title={localize(LocalizationKey.dashboardDataViewDataViewCloseSelectedDataFile)}
+                      >
+                        <XMarkIcon className="w-4 h-4 mr-1" aria-hidden="true" />
+                        <span>{localize(LocalizationKey.dashboardDataViewDataViewCloseSelectedDataFile)}</span>
+                      </ActionsBarItem>
+                    </div>
+                  )
+                }
+              </div>
             </div>
           </Transition>
 
-          <section className={`flex min-w-0 h-full ease transition-[padding] ${selectedData ? "" : "pl-64"}`}>
+          <section className={`flex min-w-0 h-full ease transition-[padding] ${selectedData ? "" : hasOnlyDataCreationFolders ? "" : "pl-64"}`}>
             {selectedData ? (
               <>
                 {!selectedData.singleEntry && (
@@ -239,7 +315,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                     className={`w-1/3 py-6 px-4 flex-1 border-r overflow-auto border-[var(--frontmatter-border)]`}
                   >
                     <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
-                      {l10n.t(LocalizationKey.dashboardDataViewDataViewTitle, selectedData?.title?.toLowerCase() || '')}
+                      {localize(LocalizationKey.dashboardDataViewDataViewTitle, selectedData?.title?.toLowerCase() || '')}
                     </h2>
 
                     <div className="py-4">
@@ -258,14 +334,14 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                               />
                             ))}
                           </Container>
-                          <Button className="mt-4" onClick={() => setSelectedIndex(null)}>
-                            {l10n.t(LocalizationKey.dashboardDataViewDataViewAdd)}
+                          <Button className="mt-4 !py-2" onClick={() => setSelectedIndex(null)}>
+                            {localize(LocalizationKey.dashboardDataViewDataViewAdd)}
                           </Button>
                         </>
                       ) : (
                         <div className={`flex flex-col items-center justify-center`}>
                           <p className={`text-[var(--frontmatter-text)]`}>
-                            {l10n.t(LocalizationKey.dashboardDataViewDataViewEmpty, selectedData.title.toLowerCase())}
+                            {localize(LocalizationKey.dashboardDataViewDataViewEmpty, selectedData.title.toLowerCase())}
                           </p>
                         </div>
                       )}
@@ -277,7 +353,7 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                     } py-6 px-4 overflow-auto`}
                 >
                   <h2 className={`text-lg text-[var(--frontmatter-text)]`}>
-                    {l10n.t(LocalizationKey.dashboardDataViewDataViewCreateOrModify, selectedData.title.toLowerCase())}
+                    {localize(LocalizationKey.dashboardDataViewDataViewCreateOrModify, selectedData.title.toLowerCase())}
                   </h2>
                   {selectedData ? (
                     <DataForm
@@ -287,12 +363,14 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
                       onClear={() => setSelectedIndex(null)}
                     />
                   ) : (
-                    <p>{l10n.t(LocalizationKey.dashboardDataViewDataViewGetStarted)}</p>
+                    <p>{localize(LocalizationKey.dashboardDataViewDataViewGetStarted)}</p>
                   )}
                 </div>
               </>
             ) : (
-              <EmptyView />
+              <EmptyView
+                folders={fileCreationFolders}
+                onCreate={createDataFile} />
             )}
           </section>
         </div>
@@ -300,14 +378,14 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
         <div className="w-full h-full flex items-center justify-center">
           <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-3xl mt-2">{localize(LocalizationKey.dashboardDataViewDataViewNoDataFiles)}</p>
             <p className="text-xl mt-4">
               <a
                 className={`text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`}
                 href={WEBSITE_LINKS.docs.dataDashboard}
-                title={l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
+                title={localize(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
               >
-                {l10n.t(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
+                {localize(LocalizationKey.dashboardDataViewDataViewGetStartedLink)}
               </a>
             </p>
           </div>
@@ -315,6 +393,8 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (
       )
       }
 
+      {loading && <Spinner />}
+
       <SponsorMsg
         beta={settings?.beta}
         version={settings?.versionInfo}

src/dashboardWebView/components/DataView/EmptyView.tsx

@@ -1,20 +1,56 @@
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import * as l10n from '@vscode/l10n';
-import { LocalizationKey } from '../../../localization';
+import { LocalizationKey, localize } from '../../../localization';
+import { DataFolder } from '../../../models';
+import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
+import { MenuButton, MenuItem } from '../Menu';
 
-export interface IEmptyViewProps { }
+export interface IEmptyViewProps {
+  folders: DataFolder[];
+  onCreate: (folder: DataFolder) => void;
+}
 
 export const EmptyView: React.FunctionComponent<IEmptyViewProps> = (
-  props: React.PropsWithChildren<IEmptyViewProps>
+  { folders, onCreate }: React.PropsWithChildren<IEmptyViewProps>
 ) => {
 
   return (
-    <div className="flex flex-col items-center justify-center w-full">
+    <div className="flex flex-col items-center justify-center w-full space-y-2">
       <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)}
+        {
+          (folders && folders.length > 0) ?
+            localize(LocalizationKey.dashboardDataViewEmptyViewHeadingCreate) :
+            l10n.t(LocalizationKey.dashboardDataViewEmptyViewHeading)
+        }
       </h2>
+
+      {
+        onCreate && folders && folders.length > 0 && (
+          <div className=''>
+            <DropdownMenu>
+              <MenuButton
+                label={localize(LocalizationKey.dashboardDataViewDataViewCreateNew)}
+                title={localize(LocalizationKey.dashboardDataViewDataViewSelectDataFolder)}
+                className={`text-lg`}
+                labelClass={`font-normal text-[var(--frontmatter-secondary-text)]`}
+              />
+
+              <DropdownMenuContent>
+                {folders.map((folder) => (
+                  <MenuItem
+                    key={folder.id}
+                    title={folder.id}
+                    value={folder}
+                    onClick={() => onCreate(folder)}
+                  />
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        )
+      }
     </div>
   );
 };

src/dashboardWebView/components/Filters/LanguageFilter.tsx

@@ -9,7 +9,7 @@ import { LocalizationKey } from '../../../localization';
 
 export interface ILanguageFilterProps { }
 
-export const LanguageFilter: React.FunctionComponent<ILanguageFilterProps> = ({ }: React.PropsWithChildren<ILanguageFilterProps>) => {
+export const LanguageFilter: React.FunctionComponent<ILanguageFilterProps> = () => {
   const locales = useRecoilValue(LocalesAtom);
   const [crntLocale, setCrntLocale] = useRecoilState(LocaleAtom);
 

src/dashboardWebView/components/Header/ActionsBar.tsx

@@ -4,8 +4,7 @@ import { CommandLineIcon, PencilIcon, TrashIcon, ChevronDownIcon, XMarkIcon, Eye
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { MultiSelectedItemsAtom, PagedItems, SelectedItemActionAtom, SelectedMediaFolderSelector, SettingsSelector } from '../../state';
 import { ActionsBarItem } from './ActionsBarItem';
-import * as l10n from '@vscode/l10n';
-import { LocalizationKey } from '../../../localization';
+import { LocalizationKey, localize } from '../../../localization';
 import { Alert } from '../Modals/Alert';
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
@@ -68,8 +67,14 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
   }, [selectedFiles]);
 
   const selectAllItems = React.useCallback(() => {
-    setSelectedFiles([...pagedItems]);
-  }, [pagedItems]);
+    const allSelected = [...selectedFiles, ...pagedItems];
+    setSelectedFiles(Array.from(new Set(allSelected)));
+  }, [selectedFiles, pagedItems]);
+
+  const hasAllItemsSelectedOnPage = React.useMemo(() => {
+    const selectedItemsOnPage = selectedFiles.filter((file) => pagedItems.includes(file));
+    return selectedItemsOnPage.length >= pagedItems.length;
+  }, [selectedFiles, pagedItems]);
 
   const languageActions = React.useMemo(() => {
     const actions: React.ReactNode[] = [];
@@ -92,7 +97,7 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
               })
             }}>
             <LanguageIcon className={`mr-2 h-4 w-4`} aria-hidden={true} />
-            <span>{l10n.t(LocalizationKey.commonTranslate)}</span>
+            <span>{localize(LocalizationKey.commonTranslate)}</span>
           </ActionsBarItem>
         )
 
@@ -107,7 +112,7 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
                   className='flex items-center text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'
                 >
                   <LanguageIcon className="mr-2 h-4 w-4" aria-hidden={true} />
-                  <span>{l10n.t(LocalizationKey.commonLanguages)}</span>
+                  <span>{localize(LocalizationKey.commonLanguages)}</span>
                   <ChevronDownIcon className="ml-2 h-4 w-4" aria-hidden={true} />
                 </DropdownMenuTrigger>
 
@@ -163,7 +168,7 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
             disabled={selectedFiles.length === 0}
           >
             <CommandLineIcon className="mr-2 h-4 w-4" aria-hidden={true} />
-            <span>{l10n.t(LocalizationKey.commonScripts)}</span>
+            <span>{localize(LocalizationKey.commonScripts)}</span>
             <ChevronDownIcon className="ml-2 h-4 w-4" aria-hidden={true} />
           </DropdownMenuTrigger>
 
@@ -197,10 +202,10 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
           <ActionsBarItem
             disabled={selectedFiles.length === 0 || selectedFiles.length > 1}
             onClick={viewFile}
-            title={l10n.t(LocalizationKey.commonView)}
+            title={localize(LocalizationKey.commonView)}
           >
             <EyeIcon className="w-4 h-4 mr-2" aria-hidden="true" />
-            <span>{l10n.t(LocalizationKey.commonView)}</span>
+            <span>{localize(LocalizationKey.commonView)}</span>
           </ActionsBarItem>
 
           {
@@ -211,10 +216,10 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
                   messageHandler.send(DashboardMessage.rename, selectedFiles[0]);
                   setSelectedFiles([]);
                 }}
-                title={l10n.t(LocalizationKey.commonRename)}
+                title={localize(LocalizationKey.commonRename)}
               >
                 <RenameIcon className="w-4 h-4 mr-2" aria-hidden="true" />
-                <span>{l10n.t(LocalizationKey.commonRename)}</span>
+                <span>{localize(LocalizationKey.commonRename)}</span>
               </ActionsBarItem>
             )
           }
@@ -228,10 +233,10 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
                     path: selectedFiles[0],
                     action: 'edit'
                   })}
-                  title={l10n.t(LocalizationKey.commonEdit)}
+                  title={localize(LocalizationKey.commonEdit)}
                 >
                   <PencilIcon className="w-4 h-4 mr-2" aria-hidden="true" />
-                  <span>{l10n.t(LocalizationKey.commonEdit)}</span>
+                  <span>{localize(LocalizationKey.commonEdit)}</span>
                 </ActionsBarItem>
               </>
             )
@@ -245,10 +250,10 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
             className='hover:text-[var(--vscode-statusBarItem-errorBackground)]'
             disabled={selectedFiles.length === 0}
             onClick={() => setShowAlert(true)}
-            title={l10n.t(LocalizationKey.commonDelete)}
+            title={localize(LocalizationKey.commonDelete)}
           >
             <TrashIcon className="w-4 h-4 mr-2" aria-hidden="true" />
-            <span>{l10n.t(LocalizationKey.commonDelete)}</span>
+            <span>{localize(LocalizationKey.commonDelete)}</span>
           </ActionsBarItem>
         </div>
 
@@ -258,33 +263,33 @@ export const ActionsBar: React.FunctionComponent<IActionsBarProps> = ({
               <ActionsBarItem
                 className='flex items-center hover:text-[var(--vscode-statusBarItem-warningBackground)]'
                 onClick={() => setSelectedFiles([])}
-                title={l10n.t(LocalizationKey.dashboardHeaderActionsBarItemsSelected, selectedFiles.length)}
+                title={localize(LocalizationKey.dashboardHeaderActionsBarItemsSelected, selectedFiles.length)}
               >
                 <XMarkIcon className="w-4 h-4 mr-1" aria-hidden="true" />
-                <span>{l10n.t(LocalizationKey.dashboardHeaderActionsBarItemsSelected, selectedFiles.length)}</span>
+                <span>{localize(LocalizationKey.dashboardHeaderActionsBarItemsSelected, selectedFiles.length)}</span>
               </ActionsBarItem>
             )
           }
 
           <ActionsBarItem
-            disabled={selectedFiles.length === pagedItems.length}
+            disabled={hasAllItemsSelectedOnPage}
             onClick={selectAllItems}
-            title={l10n.t(LocalizationKey.dashboardHeaderActionsBarSelectAll)}
+            title={localize(LocalizationKey.dashboardHeaderActionsBarSelectAll)}
           >
             <div className='w-4 h-4 inline-flex items-center justify-center border border-[var(--vscode-sideBar-foreground)] group-hover:border-[var(--vscode-statusBarItem-warningBackground)] rounded mr-1'>
               <CheckIcon className="w-3 h-3" aria-hidden="true" />
             </div>
-            <span>{l10n.t(LocalizationKey.dashboardHeaderActionsBarSelectAll)}</span>
+            <span>{localize(LocalizationKey.dashboardHeaderActionsBarSelectAll)}</span>
           </ActionsBarItem>
         </div>
       </div >
 
       {showAlert && (
         <Alert
-          title={`${l10n.t(LocalizationKey.dashboardHeaderActionsBarAlertDeleteTitle)}`}
-          description={l10n.t(LocalizationKey.dashboardHeaderActionsBarAlertDeleteDescription)}
-          okBtnText={l10n.t(LocalizationKey.commonDelete)}
-          cancelBtnText={l10n.t(LocalizationKey.commonCancel)}
+          title={`${localize(LocalizationKey.dashboardHeaderActionsBarAlertDeleteTitle)}`}
+          description={localize(LocalizationKey.dashboardHeaderActionsBarAlertDeleteDescription)}
+          okBtnText={localize(LocalizationKey.commonDelete)}
+          cancelBtnText={localize(LocalizationKey.commonCancel)}
           dismiss={() => setShowAlert(false)}
           trigger={onDeleteConfirm}
         />

src/dashboardWebView/components/Header/BooleanOption.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { DashboardMessage } from '../../DashboardMessage';
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
+
+export interface IBooleanOptionProps {
+  value: boolean | undefined | null;
+  name: string;
+  label: string;
+}
+
+export const BooleanOption: React.FunctionComponent<IBooleanOptionProps> = ({
+  value,
+  name,
+  label
+}: React.PropsWithChildren<IBooleanOptionProps>) => {
+  const [isChecked, setIsChecked] = React.useState(false);
+
+  const onChange = React.useCallback((newValue: boolean) => {
+    setIsChecked(newValue);
+    Messenger.send(DashboardMessage.updateSetting, {
+      name: name,
+      value: newValue
+    });
+  }, [name]);
+
+  React.useEffect(() => {
+    setIsChecked(!!value);
+  }, [value]);
+
+  return (
+    <VSCodeCheckbox
+      onChange={onChange}
+      checked={isChecked}>
+      {label}
+    </VSCodeCheckbox>
+  );
+};

src/dashboardWebView/components/Header/ClearFilters.tsx

@@ -21,16 +21,16 @@ import { useEffect, useMemo } from 'react';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
-export const guardRecoilDefaultValue = (candidate: any): candidate is DefaultValue => {
-  if (candidate instanceof DefaultValue) return true;
+export const guardRecoilDefaultValue = (candidate: unknown): candidate is DefaultValue => {
+  if (candidate instanceof DefaultValue) {
+    return true;
+  }
   return false;
 };
 
 export interface IClearFiltersProps { }
 
-export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
-  _: React.PropsWithChildren<IClearFiltersProps>
-) => {
+export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = () => {
   const [show, setShow] = React.useState(false);
 
   const folder = useRecoilValue(FolderSelector);
@@ -75,7 +75,9 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
     }
   }, [folder, tag, category, locale, hasCustomFilters]);
 
-  if (!show) return null;
+  if (!show) {
+    return null;
+  }
 
   return (
     <button

src/dashboardWebView/components/Header/Filters.tsx

@@ -10,7 +10,7 @@ import { LanguageFilter } from '../Filters/LanguageFilter';
 
 export interface IFiltersProps { }
 
-export const Filters: React.FunctionComponent<IFiltersProps> = (_: React.PropsWithChildren<IFiltersProps>) => {
+export const Filters: React.FunctionComponent<IFiltersProps> = () => {
   const [crntFilters, setCrntFilters] = useRecoilState(FiltersAtom);
   const [crntTag, setCrntTag] = useRecoilState(TagAtom);
   const [crntCategory, setCrntCategory] = useRecoilState(CategoryAtom);
@@ -24,19 +24,37 @@ export const Filters: React.FunctionComponent<IFiltersProps> = (_: React.PropsWi
     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];
+      let values = filterValues?.[filterName];
       if (!values || values.length === 0) {
         return null;
       }
 
+      // Get all the unique values
+      const individualValues = new Set<string>();
+      values.forEach((value) => {
+        if (value.length === 0) {
+          return;
+        }
+
+        if (Array.isArray(value)) {
+          value.forEach((v) => individualValues.add(v));
+        }
+
+        if (typeof value === "string") {
+          individualValues.add(value);
+        }
+      });
+
+      values = Array.from(individualValues);
+
       return (
         <Filter
           key={filterName}
           label={filterTitle}
           activeItem={crntFilters[filterName]}
-          items={values}
+          items={values as string[]}
           onClick={(value) => setCrntFilters((prev) => {
-            let clone = Object.assign({}, prev);
+            const clone = Object.assign({}, prev);
             if (!clone[filterName] && value) {
               clone[filterName] = value;
             } else {

src/dashboardWebView/components/Header/FoldersFilter.tsx

@@ -10,7 +10,7 @@ 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);

src/dashboardWebView/components/Header/Grouping.tsx

@@ -1,39 +1,44 @@
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { GroupOption } from '../../constants/GroupOption';
-import { AllPagesAtom, GroupingAtom } from '../../state';
+import { AllPagesAtom, GroupingAtom, SettingsAtom } from '../../state';
 import { MenuButton, MenuItem } from '../Menu';
-import * as l10n from '@vscode/l10n';
-import { LocalizationKey } from '../../../localization';
+import { LocalizationKey, localize } from '../../../localization';
 import { DropdownMenu, DropdownMenuContent } from '../../../components/shadcn/Dropdown';
 
 export interface IGroupingProps { }
 
 export const Grouping: React.FunctionComponent<
   IGroupingProps
-> = ({ }: React.PropsWithChildren<IGroupingProps>) => {
+> = () => {
+  const settings = useRecoilValue(SettingsAtom);
   const [group, setGroup] = useRecoilState(GroupingAtom);
   const pages = useRecoilValue(AllPagesAtom);
 
   const GROUP_OPTIONS = React.useMemo(() => {
-    let options: { name: string, id: GroupOption }[] = [];
+    const options: { name: string, id?: GroupOption | string }[] = [];
 
     if (pages.length > 0) {
+      if (settings?.grouping) {
+        const groups = settings.grouping.map((g) => ({ name: g.title, id: g.name }));
+        options.push(...groups);
+      }
+
       if (pages.some((x) => x.fmYear)) {
-        options.push({ name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionYear), id: GroupOption.Year })
+        options.push({ name: localize(LocalizationKey.dashboardHeaderGroupingOptionYear), id: GroupOption.Year })
       }
 
       if (pages.some((x) => x.fmDraft)) {
-        options.push({ name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionDraft), id: GroupOption.Draft })
+        options.push({ name: localize(LocalizationKey.dashboardHeaderGroupingOptionDraft), id: GroupOption.Draft })
       }
     }
 
     if (options.length > 0) {
-      options.unshift({ name: l10n.t(LocalizationKey.dashboardHeaderGroupingOptionNone), id: GroupOption.none })
+      options.unshift({ name: localize(LocalizationKey.dashboardHeaderGroupingOptionNone), id: GroupOption.none })
     }
 
     return options;
-  }, [pages])
+  }, [pages, settings?.grouping])
 
   const crntGroup = GROUP_OPTIONS.find((x) => x.id === group);
 
@@ -43,7 +48,7 @@ export const Grouping: React.FunctionComponent<
 
   return (
     <DropdownMenu>
-      <MenuButton label={l10n.t(LocalizationKey.dashboardHeaderGroupingMenuButtonLabel)} title={crntGroup?.name || ''} />
+      <MenuButton label={localize(LocalizationKey.dashboardHeaderGroupingMenuButtonLabel)} title={crntGroup?.name || ''} />
 
       <DropdownMenuContent>
         {GROUP_OPTIONS.map((option) => (

src/dashboardWebView/components/Header/Navigation.tsx

@@ -37,9 +37,7 @@ const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
   )
 };
 
-export const Navigation: React.FunctionComponent<INavigationProps> = ({
-
-}: React.PropsWithChildren<INavigationProps>) => {
+export const Navigation: React.FunctionComponent<INavigationProps> = () => {
   const [crntTab, setCrntTab] = useRecoilState(TabAtom);
   const tabInfo = useRecoilValue(TabInfoAtom);
   const settings = useRecoilValue(SettingsAtom);

src/dashboardWebView/components/Header/Pagination.tsx

@@ -23,15 +23,28 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
     totalMedia
   );
 
-  const getButtons = useCallback((): number[] => {
+  const buttons = useMemo((): JSX.Element[] => {
     const maxButtons = 5;
-    const buttons: number[] = [];
+    const buttons: JSX.Element[] = [];
     const start = page - maxButtons;
     const end = page + maxButtons;
 
     for (let i = start; i < end; i++) {
       if (i >= 0 && i <= totalPagesNr) {
-        buttons.push(i);
+        buttons.push(
+          <button
+          key={i}
+          disabled={i === page}
+          onClick={() => {
+            setPage(i);
+          }}
+          className={`max-h-8 rounded ${page === i
+            ? `px-2 bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]`
+            : `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}`}
+        >
+          {i + 1}
+        </button>
+        );
       }
     }
     return buttons;
@@ -67,20 +80,7 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
         }}
       />
 
-      {getButtons().map((button) => (
-        <button
-          key={button}
-          disabled={button === page}
-          onClick={() => {
-            setPage(button);
-          }}
-          className={`max-h-8 rounded ${page === button
-            ? `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>
-      ))}
+      {buttons}
 
       <PaginationButton
         title={l10n.t(LocalizationKey.dashboardHeaderPaginationNext)}

src/dashboardWebView/components/Header/RefreshDashboardData.tsx

@@ -21,9 +21,7 @@ import { ArrowClockwiseIcon } from '../../../components/icons/ArrowClockwiseIcon
 
 export interface IRefreshDashboardDataProps { }
 
-export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardDataProps> = (
-  { }: React.PropsWithChildren<IRefreshDashboardDataProps>
-) => {
+export const RefreshDashboardData: React.FunctionComponent<IRefreshDashboardDataProps> = () => {
   const view = useRecoilValue(DashboardViewAtom);
   const [, setLoading] = useRecoilState(LoadingAtom);
   const resetSearch = useResetRecoilState(SearchAtom);

src/dashboardWebView/components/Header/Sorting.tsx

@@ -165,7 +165,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({
         }
       }
 
-      let sort = allOptions.find((x) => x.id === crntSortingOption?.id) || sortOptions[0];
+      const sort = allOptions.find((x) => x.id === crntSortingOption?.id) || sortOptions[0];
       setCrntSort(sort);
     };
 

src/dashboardWebView/components/Header/Startup.tsx

@@ -5,8 +5,7 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { SETTING_DASHBOARD_OPENONSTART } from '../../../constants';
 import * as l10n from "@vscode/l10n"
 import { LocalizationKey } from '../../../localization';
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
-
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
 
 export interface IStartupProps {
   settings: Settings | null;
@@ -31,7 +30,7 @@ export const Startup: React.FunctionComponent<IStartupProps> = ({
 
   return (
     <VSCodeCheckbox
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.checked)}
+      onChange={onChange}
       checked={isChecked}>
       {l10n.t(LocalizationKey.dashboardHeaderStartupLabel)}
     </VSCodeCheckbox>

src/dashboardWebView/components/Media/FolderCreation.tsx

@@ -91,8 +91,9 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
 
   if (scripts.length > 0) {
     return (
-      <div className="flex flex-1 justify-start">
+      <div className="flex flex-1 justify-start space-x-2">
         {renderPostAssetsButton}
+
         <ChoiceButton
           title={l10n.t(LocalizationKey.dashboardMediaFolderCreationFolderCreate)}
           choices={scripts.map((s) => ({
@@ -103,6 +104,8 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
           onClick={onFolderCreation}
           disabled={!settings?.initialized}
         />
+
+        <RefreshDashboardData />
       </div>
     );
   }

src/dashboardWebView/components/Media/FolderItem.tsx

@@ -1,9 +1,14 @@
-import { FolderIcon } from '@heroicons/react/24/solid';
+import { FolderIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/solid';
 import { basename, join } from 'path';
 import * as React from 'react';
-import * as l10n from '@vscode/l10n';
-import { LocalizationKey } from '../../../localization';
+import { LocalizationKey, localize } from '../../../localization';
 import useMediaFolder from '../../hooks/useMediaFolder';
+import { QuickAction } from '../Menu';
+import { messageHandler } from '@estruyf/vscode/dist/client';
+import { DashboardMessage } from '../../DashboardMessage';
+import { useState } from 'react';
+import { Alert } from '../Modals/Alert';
+import { parseWinPath } from '../../../helpers/parseWinPath';
 
 export interface IFolderItemProps {
   folder: string;
@@ -17,6 +22,7 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
   staticFolder
 }: React.PropsWithChildren<IFolderItemProps>) => {
   const { updateFolder } = useMediaFolder();
+  const [showAlert, setShowAlert] = useState(false);
 
   const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder;
 
@@ -25,28 +31,73 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({
     [relFolderPath, staticFolder]
   );
 
-  return (
-    <li
-      className={`group relative hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}
-    >
-      <button
-        title={isContentFolder ? l10n.t(LocalizationKey.dashboardMediaFolderItemContentDirectory) : l10n.t(LocalizationKey.dashboardMediaFolderItemPublicDirectory)}
-        className={`p-4 w-full flex flex-row items-center h-full`}
-        onClick={() => updateFolder(folder)}
-      >
-        <div className="relative mr-4">
-          <FolderIcon className={`h-12 w-12`} />
-          {isContentFolder && (
-            <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 text-[var(--frontmatter-text)]`}>
-              C
-            </span>
-          )}
-        </div>
+  const updateFolderName = React.useCallback(() => {
+    messageHandler.send(DashboardMessage.updateMediaFolder, { folder, wsFolder, staticFolder })
+  }, []);
 
-        <p className="text-sm font-bold pointer-events-none flex items-center text-left overflow-hidden break-words">
-          {basename(relFolderPath)}
-        </p>
-      </button>
-    </li>
+  const onDelete = React.useCallback(() => {
+    setShowAlert(true);
+  }, []);
+
+  const confirmDeletion = React.useCallback(() => {
+    messageHandler.send(DashboardMessage.deleteMediaFolder, { folder });
+    setShowAlert(false);
+  }, [folder]);
+
+  return (
+    <>
+      <li
+        className={`flex flex-col group relative text-[var(--vscode-sideBarTitle-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)] shadow-md hover:shadow-xl dark:shadow-none bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] border border-[var(--frontmatter-border)] rounded`}
+      >
+        <button
+          title={isContentFolder ? localize(LocalizationKey.dashboardMediaFolderItemContentDirectory) : localize(LocalizationKey.dashboardMediaFolderItemPublicDirectory)}
+          className={`p-4 w-full flex flex-row items-center h-full`}
+          onClick={() => updateFolder(folder)}
+        >
+          <div className="relative mr-4">
+            <FolderIcon className={`h-12 w-12`} />
+            {isContentFolder && (
+              <span className={`font-extrabold absolute bottom-3 left-1/2 transform -translate-x-1/2 text-[var(--frontmatter-text)]`}>
+                C
+              </span>
+            )}
+          </div>
+
+          <p className="text-sm font-bold pointer-events-none flex items-center text-left overflow-hidden break-words">
+            {basename(relFolderPath)}
+          </p>
+        </button>
+
+        {!isContentFolder && (
+          <div className={`py-2 w-full flex items-center justify-evenly border-t border-t-[var(--frontmatter-border)] bg-[var(--frontmatter-sideBar-background)] group-hover:bg-[var(--vscode-list-hoverBackground)]`}>
+            <QuickAction
+              title={localize(LocalizationKey.commonEdit)}
+              className={`text-[var(--frontmatter-secondary-text)]`}
+              onClick={updateFolderName}>
+              <PencilIcon className={`w-4 h-4`} aria-hidden="true" />
+              <span className='sr-only'>{localize(LocalizationKey.dashboardMediaItemMenuItemView)}</span>
+            </QuickAction>
+
+            <QuickAction
+              title={localize(LocalizationKey.dashboardMediaItemQuickActionDelete)}
+              className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--vscode-statusBarItem-errorBackground)]`}
+              onClick={onDelete}>
+              <TrashIcon className={`w-4 h-4`} aria-hidden="true" />
+            </QuickAction>
+          </div>
+        )}
+      </li>
+
+      {showAlert && (
+        <Alert
+          title={`${localize(LocalizationKey.commonDelete)}: ${basename(parseWinPath(folder) || '')}`}
+          description={localize(LocalizationKey.dashboardMediaFolderItemDeleteDescription, folder)}
+          okBtnText={localize(LocalizationKey.commonDelete)}
+          cancelBtnText={localize(LocalizationKey.commonCancel)}
+          dismiss={() => setShowAlert(false)}
+          trigger={confirmDeletion}
+        />
+      )}
+    </>
   );
 };

src/dashboardWebView/components/Media/FooterActions.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import * as l10n from '@vscode/l10n';
 import { QuickAction } from '../Menu';
-import { LocalizationKey } from '../../../localization';
+import { LocalizationKey, localize } from '../../../localization';
 import { ClipboardIcon, CodeBracketIcon, EyeIcon, PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/solid';
 import { useRecoilState } from 'recoil';
 import { SelectedItemActionAtom } from '../../state';
@@ -36,25 +35,25 @@ export const FooterActions: React.FunctionComponent<IFooterActionsProps> = ({
   return (
     <div className={`py-2 w-full flex items-center justify-evenly border-t border-t-[var(--frontmatter-border)] bg-[var(--frontmatter-sideBar-background)] group-hover:bg-[var(--vscode-list-hoverBackground)]`}>
       <QuickAction
-        title={l10n.t(LocalizationKey.dashboardMediaItemMenuItemView)}
+        title={localize(LocalizationKey.dashboardMediaItemMenuItemView)}
         className={`text-[var(--frontmatter-secondary-text)]`}
         onClick={() => setSelectedItemAction({
           path: media.fsPath,
           action: 'view'
         })}>
         <EyeIcon className={`w-4 h-4`} aria-hidden="true" />
-        <span className='sr-only'>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemView)}</span>
+        <span className='sr-only'>{localize(LocalizationKey.dashboardMediaItemMenuItemView)}</span>
       </QuickAction>
 
       <QuickAction
-        title={l10n.t(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)}
+        title={localize(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)}
         className={`text-[var(--frontmatter-secondary-text)]`}
         onClick={() => setSelectedItemAction({
           path: media.fsPath,
           action: 'edit'
         })}>
         <PencilIcon className={`w-4 h-4`} aria-hidden="true" />
-        <span className='sr-only'>{l10n.t(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)}</span>
+        <span className='sr-only'>{localize(LocalizationKey.dashboardMediaItemMenuItemEditMetadata)}</span>
       </QuickAction>
 
       {viewData?.filePath ? (
@@ -62,8 +61,8 @@ export const FooterActions: React.FunctionComponent<IFooterActionsProps> = ({
           <QuickAction
             title={
               viewData.metadataInsert && viewData.fieldName
-                ? l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertField, viewData.fieldName)
-                : l10n.t(LocalizationKey.dashboardMediaItemQuickActionInsertMarkdown)
+                ? localize(LocalizationKey.dashboardMediaItemQuickActionInsertField, viewData.fieldName)
+                : localize(LocalizationKey.dashboardMediaItemQuickActionInsertMarkdown)
             }
             className={`text-[var(--frontmatter-secondary-text)]`}
             onClick={insertIntoArticle}
@@ -73,7 +72,7 @@ export const FooterActions: React.FunctionComponent<IFooterActionsProps> = ({
 
           {viewData?.position && snippets.length > 0 && (
             <QuickAction
-              title={l10n.t(LocalizationKey.commonInsertSnippet)}
+              title={localize(LocalizationKey.commonInsertSnippet)}
               className={`text-[var(--frontmatter-secondary-text)]`}
               onClick={insertSnippet}>
               <CodeBracketIcon className={`w-4 h-4`} aria-hidden="true" />
@@ -85,7 +84,7 @@ export const FooterActions: React.FunctionComponent<IFooterActionsProps> = ({
           {
             relPath && (
               <QuickAction
-                title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionCopyPath)}
+                title={localize(LocalizationKey.dashboardMediaItemQuickActionCopyPath)}
                 className={`text-[var(--frontmatter-secondary-text)]`}
                 onClick={() => copyToClipboard(parseWinPath(relPath) || '')}>
                 <ClipboardIcon className={`w-4 h-4`} aria-hidden="true" />
@@ -101,7 +100,7 @@ export const FooterActions: React.FunctionComponent<IFooterActionsProps> = ({
         showTrigger />
 
       <QuickAction
-        title={l10n.t(LocalizationKey.dashboardMediaItemQuickActionDelete)}
+        title={localize(LocalizationKey.dashboardMediaItemQuickActionDelete)}
         className={`text-[var(--frontmatter-secondary-text)] hover:text-[var(--vscode-statusBarItem-errorBackground)]`}
         onClick={onDelete}>
         <TrashIcon className={`w-4 h-4`} aria-hidden="true" />

src/dashboardWebView/components/Media/Item.tsx

@@ -7,7 +7,7 @@ import {
   PlusIcon,
   VideoCameraIcon,
 } from '@heroicons/react/24/outline';
-import { basename } from 'path';
+import { basename, parse } from 'path';
 import * as React from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -55,8 +55,17 @@ export const Item: React.FunctionComponent<IItemProps> = ({
   const { mediaFolder, mediaDetails, isAudio, isImage, isVideo } = useMediaInfo(media);
 
   const relPath = useMemo(() => {
+    if (viewData?.data?.pageBundle && viewData?.data?.filePath) {
+      const articlePath = viewData?.data?.filePath;
+      const articleDir = parse(parseWinPath(articlePath)).dir;
+
+      const mediaPath = parseWinPath(media.fsPath);
+      if (mediaPath.startsWith(articleDir)) {
+        return getRelPath(media.fsPath, undefined, articleDir);
+      }
+    }
     return getRelPath(media.fsPath, settings?.staticFolder, settings?.wsFolder);
-  }, [media.fsPath, settings?.staticFolder, settings?.wsFolder]);
+  }, [media.fsPath, settings?.staticFolder, settings?.wsFolder, viewData?.data?.pageBundle, viewData?.data?.filePath]);
 
   const hasViewData = useMemo(() => {
     return viewData?.data?.filePath !== undefined;

src/dashboardWebView/components/Media/Media.tsx

@@ -8,6 +8,7 @@ import {
   PagedItems,
   SelectedMediaFolderAtom,
   SettingsSelector,
+  SortingAtom,
   ViewDataSelector
 } from '../../state';
 import { Spinner } from '../Common/Spinner';
@@ -30,18 +31,18 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { MediaItemPanel } from './MediaItemPanel';
 import { FilesProvider } from '../../providers/FilesProvider';
+import { SortOption } from '../../constants/SortOption';
 
 export interface IMediaProps { }
 
-export const Media: React.FunctionComponent<IMediaProps> = (
-  _: React.PropsWithChildren<IMediaProps>
-) => {
+export const Media: React.FunctionComponent<IMediaProps> = () => {
   const { media } = useMedia();
   const settings = useRecoilValue(SettingsSelector);
   const viewData = useRecoilValue(ViewDataSelector);
   const selectedFolder = useRecoilValue(SelectedMediaFolderAtom);
   const folders = useRecoilValue(MediaFoldersAtom);
   const loading = useRecoilValue(LoadingAtom);
+  const crntSorting = useRecoilValue(SortingAtom);
   const [, setPagedItems] = useRecoilState(PagedItems);
 
   const currentStaticFolder = useMemo(() => {
@@ -67,7 +68,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
       return [];
     }
 
-    let groupedFolders = [];
+    const groupedFolders = [];
 
     for (const cFolder of settings?.contentFolders || []) {
       const foldersPath = parseWinPath(cFolder.path);
@@ -85,11 +86,18 @@ export const Media: React.FunctionComponent<IMediaProps> = (
       currentStaticFolder &&
       settings?.staticFolder !== STATIC_FOLDER_PLACEHOLDER.hexo.placeholder
     ) {
-      return folders.filter((f) => parseWinPath(f).includes(currentStaticFolder));
+      const allFolders = folders.filter((f) => parseWinPath(f).includes(currentStaticFolder));
+      if (crntSorting && crntSorting.id === SortOption.FileNameAsc) {
+        return allFolders.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+      } else if (crntSorting && crntSorting.id === SortOption.FileNameDesc) {
+        return allFolders.sort((a, b) => b.localeCompare(a, undefined, { numeric: true }));
+      } else {
+        return allFolders;
+      }
     }
 
     return undefined;
-  }, [folders, viewData, currentStaticFolder, settings?.staticFolder]);
+  }, [folders, viewData, currentStaticFolder, settings?.staticFolder, crntSorting]);
 
   const allMedia = useMemo(() => {
     let mediaFiles: MediaInfo[] = Object.assign([], media);

src/dashboardWebView/components/Media/MediaHeaderTop.tsx

@@ -23,7 +23,7 @@ export interface IMediaHeaderTopProps { }
 
 export const MediaHeaderTop: React.FunctionComponent<
   IMediaHeaderTopProps
-> = ({ }: React.PropsWithChildren<IMediaHeaderTopProps>) => {
+> = () => {
   const [lastUpdated, setLastUpdated] = React.useState<string | null>(null);
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
   const crntSorting = useRecoilValue(SortingSelector);

src/dashboardWebView/components/Menu/MenuButton.tsx

@@ -1,26 +1,33 @@
 import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
 import { DropdownMenuTrigger } from '../../../components/shadcn/Dropdown';
+import { cn } from '../../../utils/cn';
 
 export interface IMenuButtonProps {
   label: string | JSX.Element;
   title: string;
   disabled?: boolean;
+  className?: string;
+  labelClass?: string;
+  buttonClass?: string;
 }
 
 export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
   label,
   title,
-  disabled
+  disabled,
+  className,
+  labelClass,
+  buttonClass,
 }: React.PropsWithChildren<IMenuButtonProps>) => {
   return (
-    <div className={`group flex items-center shrink-0 ${disabled ? 'opacity-50' : ''}`}>
-      <div className={`mr-2 font-medium flex items-center text-[var(--vscode-tab-inactiveForeground)]`}>
+    <div className={cn(`group flex items-center shrink-0 ${disabled ? 'opacity-50' : ''} ${className || ""}`)}>
+      <div className={cn(`mr-2 font-medium flex items-center text-[var(--vscode-tab-inactiveForeground)] ${labelClass || ""}`)}>
         {label}:
       </div>
 
       <DropdownMenuTrigger
-        className='text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)] flex items-center focus:outline-none'
+        className={cn(`text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)] flex items-center focus:outline-none ${buttonClass || ""}`)}
         disabled={disabled}>
         <span>{title}</span>
         <ChevronDownIcon className={`-mr-1 ml-1 h-4 w-4`} aria-hidden="true" />

src/dashboardWebView/components/Preview/Preview.tsx

@@ -20,7 +20,8 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
 
   const onRefresh = () => {
     if (iframeRef.current?.src) {
-      iframeRef.current.src = iframeRef.current.src;
+      const url = iframeRef.current.src;
+      iframeRef.current.src = url;
     }
   };
 
@@ -34,10 +35,12 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
       navUrl = `https://${navUrl}`;
       setCrntUrl(navUrl);
     }
-    iframeRef.current!.src = navUrl;
+    if (iframeRef.current) {
+      iframeRef.current.src = navUrl;
+    }
   };
 
-  const msgListener = (message: MessageEvent<EventData<any>>) => {
+  const msgListener = (message: MessageEvent<EventData<string>>) => {
     if (message.data.command === PreviewCommands.toWebview.updateUrl) {
       setCrntUrl(message.data.payload);
     }

src/dashboardWebView/components/SettingsView/CommonSettings.tsx

@@ -5,12 +5,13 @@ import { Startup } from '../Header/Startup';
 import { useRecoilValue } from 'recoil';
 import { SettingsSelector } from '../../state';
 import { SettingsInput } from './SettingsInput';
-import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
-import { DOCS_SUBMODULES, FrameworkDetectors, GIT_CONFIG, SETTING_FRAMEWORK_START, SETTING_GIT_COMMIT_MSG, SETTING_GIT_ENABLED, SETTING_PREVIEW_HOST, SETTING_WEBSITE_URL } from '../../../constants';
+import { Button as VSCodeButton } from 'vscrui';
+import { DOCS_SUBMODULES, FrameworkDetectors, GIT_CONFIG, SETTING_FRAMEWORK_START, SETTING_GIT_COMMIT_MSG, SETTING_GIT_ENABLED, SETTING_PANEL_OPEN_ON_SUPPORTED_FILE, SETTING_PREVIEW_HOST, SETTING_WEBSITE_URL } from '../../../constants';
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { SettingsCheckbox } from './SettingsCheckbox';
 import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import { BooleanOption } from '../Header/BooleanOption';
 
 export interface ICommonSettingsProps { }
 
@@ -73,6 +74,15 @@ export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (pr
         <Startup settings={settings} />
       </div>
 
+      <div className='py-4'>
+        <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsOpenPanelForSupportedFiles)}</h2>
+
+        <BooleanOption
+          label={l10n.t(LocalizationKey.settingsOpenPanelForSupportedFilesLabel)}
+          name={SETTING_PANEL_OPEN_ON_SUPPORTED_FILE}
+          value={settings?.openPanelForSupportedFiles} />
+      </div>
+
       <div className='py-4'>
         <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsGit)}</h2>
 

src/dashboardWebView/components/SettingsView/IntegrationsView.tsx

@@ -4,11 +4,11 @@ import { messageHandler } from '@estruyf/vscode/dist/client';
 import { LocalizationKey } from '../../../localization';
 import { GeneralCommands, ExtensionState } from '../../../constants';
 import { SettingsInput } from './SettingsInput';
-import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
+import { Button as VSCodeButton } from 'vscrui';
 
 export interface IIntegrationsViewProps { }
 
-export const IntegrationsView: React.FunctionComponent<IIntegrationsViewProps> = ({ }: React.PropsWithChildren<IIntegrationsViewProps>) => {
+export const IntegrationsView: React.FunctionComponent<IIntegrationsViewProps> = () => {
   const [deeplApiKey, setDeeplApiKey] = React.useState<string>('');
   const [azureApiKey, setAzureApiKey] = React.useState<string>('');
   const [azureRegion, setAzureRegion] = React.useState<string>('');

src/dashboardWebView/components/SettingsView/SettingsCheckbox.tsx

@@ -1,5 +1,5 @@
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
 
 export interface ISettingsCheckboxProps {
   label: string;
@@ -27,7 +27,7 @@ export const SettingsCheckbox: React.FunctionComponent<ISettingsCheckboxProps> =
 
   return (
     <VSCodeCheckbox
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateValue(e.target.checked)}
+      onChange={updateValue}
       checked={isEnabled}>
       {label}
     </VSCodeCheckbox>

src/dashboardWebView/components/SettingsView/SettingsInput.tsx

@@ -1,5 +1,5 @@
-import { VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
+import { TextField as VSCodeTextField } from 'vscrui';
 
 export interface ISettingsInputProps {
   label: string;
@@ -21,13 +21,10 @@ export const SettingsInput: React.FunctionComponent<ISettingsInputProps> = ({
 
   return (
     <VSCodeTextField
-      className='w-full p-0 m-0 bg-inherit border-0 focus:border-0 outline-none focus:outline-none shadow-none'
-      style={{
-        boxShadow: 'none'
-      }}
+      className='w-full p-0 m-0 bg-inherit'
       value={value || fallback || ""}
       placeholder={placeholder}
-      onInput={(e: React.ChangeEvent<HTMLInputElement>) => onChange(name, e.target.value)}>
+      onChange={(value: string) => onChange(name, value)}>
       {label}
     </VSCodeTextField>
   );

src/dashboardWebView/components/SettingsView/SettingsView.tsx

@@ -10,12 +10,12 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { COMMAND_NAME } from '../../../constants';
 import { ArrowPathIcon } from '@heroicons/react/24/outline';
-import { VSCodePanelTab, VSCodePanelView, VSCodePanels } from '@vscode/webview-ui-toolkit/react';
 import { CommonSettings } from './CommonSettings';
 import { IntegrationsView } from './IntegrationsView';
 import { useEffect } from 'react';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
+import { ITab, IView, Panels as VSCodePanels } from 'vscrui';
 
 export interface ISettingsViewProps { }
 
@@ -23,6 +23,74 @@ export const SettingsView: React.FunctionComponent<ISettingsViewProps> = (_: Rea
   const [loading, setLoading] = React.useState<boolean>(false);
   const settings = useRecoilValue(SettingsSelector);
 
+  const tabs: ITab[] = React.useMemo(() => {
+    const temp = [
+      { id: "view-1", label: l10n.t(LocalizationKey.settingsViewCommon) },
+      { id: "view-2", label: l10n.t(LocalizationKey.settingsViewContentFolders) }
+    ];
+
+    if (settings?.crntFramework === 'astro') {
+      temp.push({ id: "view-3", label: l10n.t(LocalizationKey.settingsViewAstro) });
+    }
+
+    return [
+      ...temp,
+      { id: "view-4", label: l10n.t(LocalizationKey.settingsViewIntegration) }
+    ];
+  }, [settings]);
+
+  const views: IView[] = React.useMemo(() => {
+    if (!settings) {
+      return [];
+    }
+
+    const temp = [
+      {
+        id: "view-1",
+        content: <CommonSettings />
+      },
+      {
+        id: "view-2",
+        content: (
+          <div className='py-4'>
+            <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentFolders)}</h2>
+
+            <ContentFolders
+              settings={settings}
+              triggerLoading={(isLoading) => setLoading(isLoading)} />
+          </div>
+        )
+      }
+    ];
+
+    if (settings?.crntFramework === 'astro') {
+      temp.push({
+        id: "view-3",
+        content: (
+          <div className='py-4'>
+            <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentTypes)}</h2>
+
+            <AstroContentTypes
+              settings={settings}
+              triggerLoading={(isLoading) => setLoading(isLoading)}
+              setStatus={_ => null} />
+          </div>
+        )
+      });
+    }
+
+    temp.push({
+      id: "view-4",
+      content: (
+        <IntegrationsView />
+      )
+    });
+
+    return [
+      ...temp
+    ];
+  }, [settings]);
+
   useEffect(() => {
     Messenger.send(DashboardMessage.setTitle, l10n.t(LocalizationKey.commonSettings));
   }, []);
@@ -52,51 +120,11 @@ export const SettingsView: React.FunctionComponent<ISettingsViewProps> = (_: Rea
               </a>
             </div>
 
-            <VSCodePanels className={`mt-4`}>
-              <VSCodePanelTab id="view-1">{l10n.t(LocalizationKey.settingsViewCommon)}</VSCodePanelTab>
-              <VSCodePanelTab id="view-2">{l10n.t(LocalizationKey.settingsViewContentFolders)}</VSCodePanelTab>
-
-              {
-                settings?.crntFramework === 'astro' && (
-                  <VSCodePanelTab id="view-3">{l10n.t(LocalizationKey.settingsViewAstro)}</VSCodePanelTab>
-                )
-              }
-
-              <VSCodePanelTab id="view-4">{l10n.t(LocalizationKey.settingsViewIntegration)}</VSCodePanelTab>
-
-              <VSCodePanelView id="view-1">
-                <CommonSettings />
-              </VSCodePanelView>
-
-              <VSCodePanelView id="view-2">
-                <div className='py-4'>
-                  <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentFolders)}</h2>
-
-                  <ContentFolders
-                    settings={settings}
-                    triggerLoading={(isLoading) => setLoading(isLoading)} />
-                </div>
-              </VSCodePanelView>
-
-              {
-                settings?.crntFramework === 'astro' && (
-                  <VSCodePanelView id="view-3">
-                    <div className='py-4'>
-                      <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentTypes)}</h2>
-
-                      <AstroContentTypes
-                        settings={settings}
-                        triggerLoading={(isLoading) => setLoading(isLoading)}
-                        setStatus={_ => null} />
-                    </div>
-                  </VSCodePanelView>
-                )
-              }
-
-              <VSCodePanelView id="view-4">
-                <IntegrationsView />
-              </VSCodePanelView>
-            </VSCodePanels>
+            <VSCodePanels
+              className={`mt-4`}
+              tabs={tabs}
+              views={views}
+            />
           </div>
         )
       }

src/dashboardWebView/components/SnippetsView/Item.tsx

@@ -75,7 +75,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
       return;
     }
 
-    let snippets: Snippets = Object.assign({}, settings?.snippets || {});
+    const snippets: Snippets = Object.assign({}, settings?.snippets || {});
     const snippetLines = snippetOriginalBody.split('\n');
 
     const crntSnippet = Object.assign({}, snippets[snippetKey]);
@@ -183,7 +183,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
           <div className='inline-block mr-1 mt-1 text-xs text-[var(--vscode-button-secondaryForeground)] bg-[var(--vscode-button-secondaryBackground)] border border-[var(--frontmatter-border)] rounded px-1 py-0.5'>
             {
-              snippet.isMediaSnippet ? l10n.t(LocalizationKey.dashboardSnippetsViewItemTypeContent) : l10n.t(LocalizationKey.dashboardSnippetsViewItemTypeMedia)
+              snippet.isMediaSnippet ? l10n.t(LocalizationKey.dashboardSnippetsViewItemTypeMedia) : l10n.t(LocalizationKey.dashboardSnippetsViewItemTypeContent)
             }
           </div>
 

src/dashboardWebView/components/SnippetsView/SnippetForm.tsx

@@ -79,11 +79,11 @@ const SnippetForm: React.ForwardRefRenderFunction<SnippetFormHandle, ISnippetFor
   );
 
   const snippetBody = useMemo(() => {
-    let body = typeof snippet.body === 'string' ? snippet.body : snippet.body.join(`\n`);
+    const body = typeof snippet.body === 'string' ? snippet.body : snippet.body.join(`\n`);
 
-    const obj: any = {};
+    const obj: { [key: string]: string } = {};
     for (const field of fields) {
-      obj[field.name] = field.value;
+      obj[field.name] = field.value as string;
     }
 
     return SnippetParser.render(body, obj, snippet.openingTags, snippet.closingTags);

src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx

@@ -31,7 +31,7 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
         <div className="relative">
           <select
             name={field.name}
-            value={field.value || ''}
+            value={field.value as string || ''}
             className={`block w-full sm:text-sm pr-2 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"
@@ -69,7 +69,7 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
     return (
       <TextField
         name={field.name}
-        value={field.value || ''}
+        value={field.value as string || ''}
         description={field.description}
         onChange={(e) => onValueChange(field, e)}
         rows={4}
@@ -81,7 +81,7 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
   return (
     <TextField
       name={field.name}
-      value={field.value || ''}
+      value={field.value as string || ''}
       description={field.description}
       onChange={(e) => onValueChange(field, e)}
     />

src/dashboardWebView/components/Steps/StepsToGetStarted.tsx

@@ -17,7 +17,7 @@ import { TemplateItem } from './TemplateItem';
 import { Spinner } from '../Common/Spinner';
 import { AstroContentTypes } from '../Configuration/Astro/AstroContentTypes';
 import { ContentFolders } from '../Configuration/Common/ContentFolders';
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator } from '../../../components/shadcn/Dropdown';
 
 export interface IStepsToGetStartedProps {
@@ -239,7 +239,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
         description: (
           <div className='mt-1'>
             <VSCodeCheckbox
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateSetting(SETTING_GIT_ENABLED, e.target.checked)}
+              onChange={(value) => updateSetting(SETTING_GIT_ENABLED, value)}
               checked={isGitEnabled}>
               {l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedGitDescription)}
             </VSCodeCheckbox>

src/dashboardWebView/components/TaxonomyView/TaxonomyLookup.tsx

@@ -41,7 +41,7 @@ export const TaxonomyLookup: React.FunctionComponent<ITaxonomyLookupProps> = ({
         return false;
       }
 
-      let fieldName = getTaxonomyField(taxonomy, contentType);
+      const fieldName = getTaxonomyField(taxonomy, contentType);
 
       return fieldName && page[fieldName] ? page[fieldName].includes(value) : false;
     }).length;

src/dashboardWebView/components/TaxonomyView/TaxonomyManager.tsx

@@ -80,7 +80,7 @@ export const TaxonomyManager: React.FunctionComponent<ITaxonomyManagerProps> = (
   }, [data, taxonomy, debounceFilterValue]);
 
   const unmappedItems = useMemo(() => {
-    let unmapped: string[] = [];
+    const unmapped: string[] = [];
 
     if (!pages || !settings?.contentTypes || !taxonomy) {
       return unmapped;
@@ -100,7 +100,7 @@ export const TaxonomyManager: React.FunctionComponent<ITaxonomyManagerProps> = (
           return false;
         }
 
-        let fieldName = getTaxonomyField(taxonomy, contentType);
+        const fieldName = getTaxonomyField(taxonomy, contentType);
 
         if (fieldName && page[fieldName]) {
           values = page[fieldName];

src/dashboardWebView/components/TaxonomyView/TaxonomyTagging.tsx

@@ -5,18 +5,18 @@ import { SettingsSelector } from '../../state';
 import { getTaxonomyField } from '../../../helpers/getTaxonomyField';
 import { Sorting } from '../../../helpers/Sorting';
 import { ArrowLeftIcon, EyeIcon } from '@heroicons/react/24/outline';
-import { Button } from '../Common/Button';
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
+import { Button } from 'vscrui';
 import { FilterInput } from './FilterInput';
 import { useDebounce } from '../../../hooks/useDebounce';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { sortPages } from '../../../utils/sortPages';
-import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
+import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { ExtensionState } from '../../../constants';
 import { LinkButton } from '../Common/LinkButton';
 import { openFile } from '../../utils';
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
 
 export interface ITaxonomyTaggingProps {
   taxonomy: string | null;
@@ -70,7 +70,7 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
           continue;
         }
 
-        let fieldName = getTaxonomyField(taxonomy, contentType);
+        const fieldName = getTaxonomyField(taxonomy, contentType);
 
         if (fieldName && (!page[fieldName] || page[fieldName].indexOf(value) === -1)) {
           untagged.push(page);
@@ -78,7 +78,7 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
       }
     }
 
-    untagged = untagged.sort(Sorting.number('fmPublished')).reverse();
+    untagged = untagged.sort(Sorting.numerically('fmPublished')).reverse();
 
     if (debounceFilterValue) {
       return untagged.filter((p) => p.title.toLowerCase().includes(debounceFilterValue.toLowerCase()));
@@ -122,8 +122,12 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
   }, [pageMappings, untaggedPages]);
 
   const checkIfChecked = React.useCallback((page: Page) => {
-    return (!untaggedPages.find((p: Page) => p.fmFilePath === page.fmFilePath) && !pageMappings.untagged.find((p: Page) => p.fmFilePath === page.fmFilePath)) || pageMappings.tagged.find((p: Page) => p.fmFilePath === page.fmFilePath);
-  }, [untaggedPages, pageMappings.tagged]);
+    const isUntagged = untaggedPages.some((p) => p.fmFilePath === page.fmFilePath);
+    const isTagged = pageMappings.tagged.some((p) => p.fmFilePath === page.fmFilePath);
+    const isInUntagged = pageMappings.untagged.some((p) => p.fmFilePath === page.fmFilePath);
+
+    return (!isUntagged && !isInUntagged) || isTagged;
+  }, [untaggedPages, pageMappings.tagged, pageMappings.untagged]);
 
   const onFileView = (filePath: string) => {
     openFile(filePath);
@@ -193,7 +197,7 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
                 <td className={`pl-6 py-2 w-[25px]`}>
                   <VSCodeCheckbox
                     title={l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyTaggingCheckbox, value)}
-                    onClick={() => onCheckboxClick(page)}
+                    onChange={() => onCheckboxClick(page)}
                     checked={checkIfChecked(page)}>
                     <span className='sr-only'>
                       {l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyTaggingCheckbox, value)}
@@ -225,8 +229,8 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
       </div>
 
       <div className='flex justify-end space-x-2'>
-        <Button onClick={onDismiss} secondary>{l10n.t(LocalizationKey.commonCancel)}</Button>
-        <Button onClick={() => onContentMapping(value, pageMappings)}>{l10n.t(LocalizationKey.commonApply)}</Button>
+        <Button className='!py-2' onClick={onDismiss} appearance='secondary'>{l10n.t(LocalizationKey.commonCancel)}</Button>
+        <Button className='!py-2' onClick={() => onContentMapping(value, pageMappings)}>{l10n.t(LocalizationKey.commonApply)}</Button>
       </div>
     </div>
   );

src/dashboardWebView/hooks/useMediaInfo.tsx

@@ -42,7 +42,7 @@ export default function useMediaInfo(media?: MediaInfo) {
   }, [media]);
 
   const mediaDetails = useMemo(() => {
-    let sizeDetails = [];
+    const sizeDetails = [];
 
     if (mediaDimensions) {
       sizeDetails.push(mediaDimensions);

src/dashboardWebView/hooks/usePages.tsx

@@ -107,7 +107,14 @@ export default function usePages(pages: Page[]) {
         for (const filter of filterNames) {
           const filterValue = filters[filter];
           if (filterValue) {
-            pagesSorted = pagesSorted.filter((page) => page[filter] === filterValue);
+            pagesSorted = pagesSorted.filter((page) => {
+              const value = page[filter];
+              if (Array.isArray(value)) {
+                return value.includes(filterValue);
+              } else {
+                return value === filterValue;
+              }
+            });
           }
         }
       }
@@ -159,8 +166,6 @@ export default function usePages(pages: Page[]) {
 
         if (tab !== Tab.All) {
           crntPages = crntPages.filter((page) => page.fmDraft === tab);
-        } else {
-          crntPages = crntPages;
         }
       } else {
         // Draft field is a boolean field
@@ -194,8 +199,6 @@ export default function usePages(pages: Page[]) {
             crntPages = drafts;
           } else if (tab === Tab.Scheduled) {
             crntPages = scheduled;
-          } else {
-            crntPages = crntPages;
           }
         }
       }
@@ -240,11 +243,11 @@ export default function usePages(pages: Page[]) {
   };
 
   useEffect(() => {
-    let usedSorting = sorting;
+    const usedSorting = sorting;
 
     const startPageProcessing = () => {
       // Check if search needs to be performed
-      let searchedPages = pages;
+      const searchedPages = pages;
       if (search) {
         Messenger.send(DashboardMessage.searchPages, { query: search });
       } else {

src/dashboardWebView/index.tsx

@@ -14,6 +14,7 @@ import { I10nProvider } from './providers/I10nProvider';
 import { SentryInit } from '../utils/sentryInit';
 import { WEBSITE_LINKS } from '../constants';
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 declare const acquireVsCodeApi: <T = unknown>() => {
   getState: () => T;
   setState: (data: T) => void;
@@ -119,4 +120,8 @@ if (elm) {
 }
 
 // Webpack HMR
-if ((module as any).hot) (module as any).hot.accept();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+if ((module as any).hot) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (module as any).hot.accept();
+}

src/dashboardWebView/models/Settings.ts

@@ -5,6 +5,7 @@ import {
   ContentType,
   CustomScript,
   CustomTaxonomy,
+  DataFolder,
   DraftField,
   FilterType,
   Framework,
@@ -30,6 +31,7 @@ export interface Settings {
   categories: string[];
   customTaxonomy: CustomTaxonomy[];
   openOnStart: boolean | null;
+  openPanelForSupportedFiles: boolean | null;
   versionInfo: VersionInfo;
   pageViewType: DashboardViewType | undefined;
   contentTypes: ContentType[];
@@ -40,9 +42,11 @@ export interface Settings {
   draftField: DraftField | null | undefined;
   customSorting: SortingSetting[] | undefined;
   filters: (FilterType | { title: string; name: string })[] | undefined;
+  grouping: { title: string; name: string }[] | undefined;
   dashboardState: DashboardState;
   scripts: CustomScript[];
   dataFiles: DataFile[] | undefined;
+  dataFolders: DataFolder[];
   dataTypes: DataType[] | undefined;
   isBacker: boolean | undefined;
   snippets: Snippets | undefined;

src/dashboardWebView/state/atom/FilterValuesAtom.ts

@@ -1,6 +1,6 @@
 import { atom } from 'recoil';
 
-export const FilterValuesAtom = atom<{ [filter: string]: string[] }>({
+export const FilterValuesAtom = atom<{ [filter: string]: string[] | string[][] }>({
   key: 'FilterValuesAtom',
   default: {}
 });

src/dashboardWebView/styles.css

@@ -115,7 +115,9 @@
     }
 
     input[type='submit'] {
-      @apply mt-4 inline-flex w-auto items-center rounded border border-transparent bg-[var(--frontmatter-button-background)] px-3 py-2 text-sm font-medium leading-4 text-[var(--vscode-button-foreground)];
+      @apply mt-4 inline-flex w-auto items-center rounded-[2px] border border-transparent bg-[var(--frontmatter-button-background)] px-[11px] py-[4px] text-[var(--vscode-button-foreground)];
+      font-family: var(--vscode-font-family);
+      font-size: var(--vscode-font-size, 13px);
 
       &:hover {
         @apply bg-[var(--frontmatter-button-hoverBackground)];
@@ -310,7 +312,7 @@
     }
 
     input[type='submit'] {
-      @apply rounded text-vulcan-500;
+      @apply rounded-[2px] text-vulcan-500;
     }
   }
 

src/dashboardWebView/utils/darkenColor.ts

@@ -57,7 +57,7 @@ export const darkenColor = (color: string | undefined, percentage: number) => {
       // Check if the color is in rgba format
       if (color.startsWith('rgba')) {
         // Extract the alpha value
-        const alphaMatch = color.match(/[\d\.]+(?=\))/);
+        const alphaMatch = color.match(/[\d.]+(?=\))/);
         const alpha = alphaMatch ? Number(alphaMatch[0]) : 1;
 
         return `rgba(${darkenedR}, ${darkenedG}, ${darkenedB}, ${alpha})`;

src/dashboardWebView/utils/updateCssVariables.ts

@@ -1,6 +1,6 @@
 import { darkenColor, opacityColor, preserveColor } from '.';
 
-export const updateCssVariables = (isDarkTheme: boolean = true) => {
+export const updateCssVariables = (isDarkTheme = true) => {
   const styles = getComputedStyle(document.documentElement);
 
   // Lightbox
@@ -98,4 +98,17 @@ export const updateCssVariables = (isDarkTheme: boolean = true) => {
     '--frontmatter-border-active',
     darkenColor(borderColor, isDarkTheme ? -30 : 30) || 'var(--vscode-activityBar-activeBorder)'
   );
+
+  // SEO - Success/Warning colors
+  const successColor = styles.getPropertyValue('--vscode-charts-green');
+  document.documentElement.style.setProperty(
+    '--frontmatter-success-background',
+    opacityColor(successColor, 0.05) || 'var(--vscode-charts-green)'
+  );
+
+  const warningColor = styles.getPropertyValue('--vscode-statusBarItem-warningBackground');
+  document.documentElement.style.setProperty(
+    '--frontmatter-warning-background',
+    opacityColor(warningColor, 0.05) || 'var(--vscode-statusBarItem-warningBackground)'
+  );
 };

src/extension.ts

@@ -14,7 +14,7 @@ import ContentProvider from './providers/ContentProvider';
 import { PagesListener } from './listeners/dashboard';
 import { ModeSwitch } from './services/ModeSwitch';
 import { PagesParser } from './services/PagesParser';
-import { ContentType, Telemetry, Extension } from './helpers';
+import { ContentType, Extension } from './helpers';
 import * as l10n from '@vscode/l10n';
 import {
   Backers,
@@ -39,6 +39,7 @@ import { i18n } from './commands/i18n';
 import { UriHandler } from './providers/UriHandler';
 
 let pageUpdateDebouncer: { (fnc: any, time: number): void };
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 let editDebounce: { (fnc: any, time: number): void };
 let collection: vscode.DiagnosticCollection;
 
@@ -48,7 +49,6 @@ export async function activate(context: vscode.ExtensionContext) {
   const extension = Extension.getInstance(context);
 
   Logger.info(`Activating ${EXTENSION_NAME} version ${Extension.getInstance().version}...`);
-  Logger.info(`Logging level: ${Logger.getLevel()}`);
 
   // Set development context
   if (!Extension.getInstance().isProductionMode) {
@@ -56,7 +56,7 @@ export async function activate(context: vscode.ExtensionContext) {
   }
 
   // Sponsor check
-  Backers.init(context).then(() => {});
+  Backers.init(context);
 
   // Make sure the EN language file is loaded
   if (!vscode.l10n.uri) {
@@ -120,8 +120,9 @@ export async function activate(context: vscode.ExtensionContext) {
   // Register the taxonomy commands
   Taxonomy.registerCommands(subscriptions);
 
-  // Register all the article commands
+  // Register all the article commands and listeners
   Article.registerCommands(subscriptions);
+  Article.registerListeners(subscriptions);
 
   // Template creation
   Template.registerCommands();
@@ -143,7 +144,7 @@ export async function activate(context: vscode.ExtensionContext) {
   SettingsHelper.startListening();
 
   // Create the status bar
-  let fmStatusBarItem = vscode.window.createStatusBarItem(
+  const fmStatusBarItem = vscode.window.createStatusBarItem(
     'fm-statusBarItem',
     vscode.StatusBarAlignment.Right,
     -100
@@ -180,9 +181,6 @@ export async function activate(context: vscode.ExtensionContext) {
   // Automatically run the command
   triggerPageUpdate(`main`);
 
-  // Listener for file edit changes
-  subscriptions.push(vscode.workspace.onWillSaveTextDocument(handleAutoDateUpdate));
-
   // Listener for file saves
   subscriptions.push(PagesListener.saveFileWatcher());
 
@@ -240,22 +238,21 @@ export async function activate(context: vscode.ExtensionContext) {
   // Subscribe all commands
   subscriptions.push(PanelView, collapseAll, fmStatusBarItem);
 
+  // eslint-disable-next-line no-console
   console.log(`𝖥𝗋𝗈𝗇𝗍 𝖬𝖺𝗍𝗍𝖾𝗋 𝖢𝖬𝖲 𝖺𝖼𝗍𝗂𝗏𝖺𝗍𝖾𝖽! 𝖱𝖾𝖺𝖽𝗒 𝗍𝗈 𝗌𝗍𝖺𝗋𝗍 𝗐𝗋𝗂𝗍𝗂𝗇𝗀... 👩‍💻🧑‍💻👨‍💻`);
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
 export function deactivate() {}
 
-const handleAutoDateUpdate = (e: vscode.TextDocumentWillSaveEvent) => {
-  Article.autoUpdate(e);
-};
-
-const triggerPageUpdate = (location: string) => {
+const triggerPageUpdate = async (location: string) => {
   Logger.verbose(`Trigger page update: ${location}`);
   pageUpdateDebouncer(() => {
     StatusListener.verify(collection);
   }, 1000);
 
   if (location === 'onDidChangeActiveTextEditor') {
+    await PanelProvider.openOnSupportedFile();
     PanelProvider.getInstance()?.updateCurrentFile();
   }
 };

src/helpers/ArticleHelper.ts

@@ -31,6 +31,9 @@ import {
   isValidFile,
   parseWinPath,
   processArticlePlaceholdersFromPath,
+  processDateTimePlaceholders,
+  processFilePrefixPlaceholders,
+  processI18nPlaceholders,
   processTimePlaceholders
 } from '.';
 import { format, parse } from 'date-fns';
@@ -39,8 +42,7 @@ import { Article } from '../commands';
 import { dirname, join, parse as parseFile } from 'path';
 import { EditorHelper } from '@estruyf/vscode';
 import sanitize from '../helpers/Sanitize';
-import { Field, ContentType as IContentType } from '../models';
-import { DateHelper } from './DateHelper';
+import { ContentFolder, Field, ContentType as IContentType } from '../models';
 import { DiagnosticSeverity, Position, window, Range } from 'vscode';
 import { DEFAULT_FILE_TYPES } from '../constants/DefaultFileTypes';
 import { fromMarkdown } from 'mdast-util-from-markdown';
@@ -147,12 +149,17 @@ export class ArticleHelper {
    * @returns A promise that resolves to the contents of the file, or undefined if the file does not exist.
    */
   public static async getContents(filePath: string): Promise<string | undefined> {
-    const file = await workspace.fs.readFile(Uri.file(parseWinPath(filePath)));
-    if (!file) {
+    try {
+      const file = await workspace.fs.readFile(Uri.file(parseWinPath(filePath)));
+      if (!file) {
+        return undefined;
+      }
+
+      return new TextDecoder().decode(file);
+    } catch (error) {
+      Logger.error(`ArticleHelper.getContents: Failed to read file ${filePath}: ${error}`);
       return undefined;
     }
-
-    return new TextDecoder().decode(file);
   }
 
   /**
@@ -354,7 +361,7 @@ export class ArticleHelper {
    * @returns A boolean indicating whether the file is a page bundle or not.
    */
   public static async isPageBundle(filePath: string) {
-    let article = await ArticleHelper.getFrontMatterByPath(filePath);
+    const article = await ArticleHelper.getFrontMatterByPath(filePath);
     if (!article) {
       return false;
     }
@@ -498,7 +505,7 @@ export class ArticleHelper {
     const dateFields = contentType.fields.filter((field) => field.type === 'datetime');
 
     for (const dateField of dateFields) {
-      if (typeof article?.data[dateField.name] !== 'undefined') {
+      if (article?.data[dateField.name]) {
         article.data[dateField.name] = Article.formatDate(new Date(), dateField.dateFormat);
       }
     }
@@ -534,7 +541,13 @@ export class ArticleHelper {
     const fileType = Settings.get<string>(SETTING_CONTENT_DEFAULT_FILETYPE);
 
     let prefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
-    prefix = await ArticleHelper.getFilePrefix(prefix, folderPath, contentType);
+    prefix = await ArticleHelper.getFilePrefix(
+      prefix,
+      folderPath,
+      contentType,
+      titleValue,
+      new Date()
+    );
 
     // Name of the file or folder to create
     let sanitizedName = ArticleHelper.sanitize(titleValue);
@@ -543,7 +556,11 @@ export class ArticleHelper {
     // Create a folder with the `index.md` file
     if (contentType?.pageBundle) {
       if (prefix && typeof prefix === 'string') {
-        sanitizedName = `${prefix}-${sanitizedName}`;
+        if (prefix.endsWith('/')) {
+          sanitizedName = `${prefix}${sanitizedName}`;
+        } else {
+          sanitizedName = `${prefix}-${sanitizedName}`;
+        }
       }
 
       const newFolder = join(folderPath, sanitizedName);
@@ -560,7 +577,7 @@ export class ArticleHelper {
         await mkdirAsync(newFolder, { recursive: true });
         newFilePath = join(
           newFolder,
-          `${sanitize(contentType.defaultFileName ?? `index`)}.${
+          `${sanitize(contentType.defaultFileName || `index`, { isFileName: true })}.${
             fileExtension || contentType.fileType || fileType
           }`
         );
@@ -596,12 +613,19 @@ export class ArticleHelper {
   public static async getFilePrefix(
     prefix: string | null | undefined,
     filePath?: string,
-    contentType?: IContentType
+    contentType?: IContentType,
+    title?: string,
+    articleDate?: Date
   ): Promise<string | undefined> {
     if (!prefix) {
       prefix = undefined;
     }
 
+    // Replace the default date format
+    if (prefix === 'yyyy-MM-dd') {
+      prefix = '{{date|yyyy-MM-dd}}';
+    }
+
     // Retrieve the file prefix from the folder
     if (filePath) {
       const filePrefixOnFolder = await Folders.getFilePrefixBeFilePath(filePath);
@@ -615,9 +639,27 @@ export class ArticleHelper {
       prefix = contentType.filePrefix;
     }
 
-    // Process the prefix date formatting
     if (prefix && typeof prefix === 'string') {
-      prefix = `${format(new Date(), DateHelper.formatUpdate(prefix) as string)}`;
+      prefix = await ArticleHelper.processCustomPlaceholders(prefix, title, filePath, true);
+      prefix = await processFilePrefixPlaceholders(prefix, filePath);
+
+      let selectedFolder: ContentFolder | undefined | null = null;
+      if (filePath) {
+        // Get the folder of the article by the file path
+        selectedFolder = await Folders.getPageFolderByFilePath(filePath);
+
+        if (!selectedFolder && contentType) {
+          selectedFolder = await Folders.getFolderByContentType(contentType, filePath);
+        }
+
+        if (selectedFolder) {
+          prefix = processI18nPlaceholders(prefix, selectedFolder);
+        }
+      }
+
+      const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
+      prefix = processTimePlaceholders(prefix, dateFormat);
+      prefix = processDateTimePlaceholders(prefix, articleDate);
     }
 
     return prefix;
@@ -647,7 +689,7 @@ export class ArticleHelper {
       }
 
       if (fieldName === 'slug' && (fieldValue === null || fieldValue === '')) {
-        fmData[fieldName] = SlugHelper.createSlug(title, fmData, slugTemplate);
+        fmData[fieldName] = SlugHelper.createSlug(title, fmData, filePath, slugTemplate);
       }
 
       fmData[fieldName] = await processArticlePlaceholdersFromPath(fmData[fieldName], filePath);
@@ -667,7 +709,8 @@ export class ArticleHelper {
   public static async processCustomPlaceholders(
     value: string,
     title: string | undefined,
-    filePath: string | undefined
+    filePath: string | undefined,
+    skipFileCheck = false
   ) {
     if (value && typeof value === 'string') {
       const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
@@ -711,7 +754,7 @@ export class ArticleHelper {
               let updatedValue = placeHolderValue;
 
               // Check if the file already exists, during creation it might not exist yet
-              if (filePath && (await existsAsync(filePath))) {
+              if (filePath && (await existsAsync(filePath)) && !skipFileCheck) {
                 updatedValue = await processArticlePlaceholdersFromPath(placeHolderValue, filePath);
               }
 
@@ -875,7 +918,7 @@ export class ArticleHelper {
       const commaSeparated = Settings.get<string[]>(SETTING_COMMA_SEPARATED_FIELDS);
 
       if (fileContents) {
-        let article = FrontMatterParser.fromFile(fileContents);
+        const article = FrontMatterParser.fromFile(fileContents);
 
         if (article?.data) {
           if (commaSeparated) {

src/helpers/ContentType.ts

@@ -564,7 +564,7 @@ export class ContentType {
 
     const allRequiredFields = ContentType.findRequiredFieldsDeep(contentType.fields);
 
-    let emptyFields: Field[][] = [];
+    const emptyFields: Field[][] = [];
 
     for (const fields of allRequiredFields) {
       const fieldValue = this.getFieldValue(
@@ -656,7 +656,7 @@ export class ContentType {
       return [];
     }
 
-    let foundBlocks = [];
+    const foundBlocks = [];
     for (const group of groups) {
       const block = blocks.find((block) => block.id === group);
       if (!block) {
@@ -956,15 +956,29 @@ export class ContentType {
         let templatePath = contentType.template;
         let templateData: ParsedFrontMatter | null | undefined = null;
         if (templatePath) {
-          templatePath = Folders.getAbsFilePath(templatePath);
-          templateData = await ArticleHelper.getFrontMatterByPath(templatePath);
+          try {
+            templatePath = Folders.getAbsFilePath(templatePath);
+            templateData = await ArticleHelper.getFrontMatterByPath(templatePath);
+            if (!templateData) {
+              Logger.warning(`ContentType.create: Template file not found or could not be parsed: ${templatePath}`);
+              Notifications.warning(
+                l10n.t(LocalizationKey.commonError) + ` Template not found: ${templatePath}`
+              );
+            }
+          } catch (error) {
+            Logger.error(`ContentType.create: Error loading template from ${templatePath}: ${error}`);
+            Notifications.error(
+              l10n.t(LocalizationKey.commonError) + ` Template loading failed: ${templatePath}`
+            );
+          }
         }
 
-        let newFilePath: string | undefined = await ArticleHelper.createContent(
+        const newFilePath: string | undefined = await ArticleHelper.createContent(
           contentType,
           folderPath,
           titleValue
         );
+
         if (!newFilePath) {
           return;
         }
@@ -1045,7 +1059,7 @@ export class ContentType {
     filePath: string,
     clearEmpty: boolean,
     contentType: IContentType,
-    isRoot: boolean = true
+    isRoot = true
   ): Promise<any> {
     if (obj.fields) {
       const titleField = getTitleField();
@@ -1062,7 +1076,8 @@ export class ContentType {
             data[field.name] = processArticlePlaceholdersFromData(
               field.default as string,
               data,
-              contentType
+              contentType,
+              filePath
             );
             data[field.name] = processTimePlaceholders(
               data[field.name],
@@ -1106,7 +1121,7 @@ export class ContentType {
                 filePath
               );
             } else if (defaultValue && Array.isArray(defaultValue)) {
-              let defaultValues = [];
+              const defaultValues = [];
               for (let value of defaultValue as string[]) {
                 if (typeof value === 'string') {
                   value = await ContentType.processFieldPlaceholders(

src/helpers/CustomScript.ts

@@ -1,5 +1,5 @@
 import { Settings } from './SettingsHelper';
-import { CommandType, EnvironmentType } from './../models/PanelSettings';
+import { CommandType } from './../models/PanelSettings';
 import { CustomScript as ICustomScript, ScriptType } from '../models/PanelSettings';
 import { window, env as vscodeEnv, ProgressLocation, Uri, commands } from 'vscode';
 import { ArticleHelper, Logger, MediaHelpers } from '.';
@@ -13,9 +13,10 @@ import { Dashboard } from '../commands/Dashboard';
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
 import { ParsedFrontMatter } from '../parsers';
 import { SETTING_CUSTOM_SCRIPTS } from '../constants';
-import { existsAsync } from '../utils';
-import * as l10n from '@vscode/l10n';
-import { LocalizationKey } from '../localization';
+import { evaluateCommand, existsAsync, getPlatform } from '../utils';
+import { LocalizationKey, localize } from '../localization';
+import { ScriptAction } from '../models';
+import { Copilot } from '../services/Copilot';
 
 export class CustomScript {
   /**
@@ -72,7 +73,9 @@ export class CustomScript {
 
     if (!path) {
       const editor = window.activeTextEditor;
-      if (!editor) return;
+      if (!editor) {
+        return;
+      }
 
       articlePath = editor.document.uri.fsPath;
       article = ArticleHelper.getFrontMatter(editor);
@@ -99,7 +102,7 @@ export class CustomScript {
       );
     } else {
       Notifications.warning(
-        l10n.t(LocalizationKey.helpersCustomScriptSingleRunArticleWarning, script.title)
+        localize(LocalizationKey.helpersCustomScriptSingleRunArticleWarning, script.title)
       );
     }
   }
@@ -115,17 +118,17 @@ export class CustomScript {
 
     if (!folders || folders.length === 0) {
       Notifications.warning(
-        l10n.t(LocalizationKey.helpersCustomScriptBulkRunNoFilesWarning, script.title)
+        localize(LocalizationKey.helpersCustomScriptBulkRunNoFilesWarning, script.title)
       );
       return;
     }
 
-    let output: string[] = [];
+    const output: string[] = [];
 
     window.withProgress(
       {
         location: ProgressLocation.Notification,
-        title: l10n.t(LocalizationKey.helpersCustomScriptExecuting, script.title),
+        title: localize(LocalizationKey.helpersCustomScriptExecuting, script.title),
         cancellable: false
       },
       async (_, __) => {
@@ -171,7 +174,7 @@ export class CustomScript {
   ): Promise<void> {
     if (!path) {
       Notifications.error(
-        l10n.t(LocalizationKey.helpersCustomScriptRunMediaScriptNoFolderWarning, script.title)
+        localize(LocalizationKey.helpersCustomScriptRunMediaScriptNoFolderWarning, script.title)
       );
       return;
     }
@@ -180,7 +183,7 @@ export class CustomScript {
       window.withProgress(
         {
           location: ProgressLocation.Notification,
-          title: l10n.t(LocalizationKey.helpersCustomScriptExecuting, script.title),
+          title: localize(LocalizationKey.helpersCustomScriptExecuting, script.title),
           cancellable: false
         },
         async () => {
@@ -266,12 +269,7 @@ export class CustomScript {
       try {
         const data: {
           frontmatter?: { [key: string]: any };
-          fmAction?:
-            | 'open'
-            | 'copyMediaMetadata'
-            | 'copyMediaMetadataAndDelete'
-            | 'deleteMedia'
-            | 'fieldAction';
+          fmAction?: ScriptAction;
           fmPath?: string;
           fmSourcePath?: string;
           fmDestinationPath?: string;
@@ -283,7 +281,9 @@ export class CustomScript {
           const editor = window.activeTextEditor;
 
           if (!articlePath) {
-            if (!editor) return;
+            if (!editor) {
+              return;
+            }
 
             articlePath = editor.document.uri.fsPath;
             article = ArticleHelper.getFrontMatter(editor);
@@ -305,7 +305,10 @@ export class CustomScript {
               throw new Error(`Couldn't update article.`);
             }
             Notifications.info(
-              l10n.t(LocalizationKey.helpersCustomScriptShowOutputFrontMatterSuccess, script.title)
+              localize(
+                LocalizationKey.helpersCustomScriptShowOutputFrontMatterSuccess,
+                script.title
+              )
             );
           }
         } else if (data.fmAction) {
@@ -341,10 +344,12 @@ export class CustomScript {
           window
             .showInformationMessage(
               `${script.title}: ${output}`,
-              l10n.t(LocalizationKey.helpersCustomScriptShowOutputCopyOutputAction)
+              localize(LocalizationKey.helpersCustomScriptShowOutputCopyOutputAction)
             )
             .then((value) => {
-              if (value === l10n.t(LocalizationKey.helpersCustomScriptShowOutputCopyOutputAction)) {
+              if (
+                value === localize(LocalizationKey.helpersCustomScriptShowOutputCopyOutputAction)
+              ) {
                 vscodeEnv.clipboard.writeText(output);
               }
             });
@@ -352,7 +357,7 @@ export class CustomScript {
       }
     } else {
       Notifications.info(
-        l10n.t(LocalizationKey.helpersCustomScriptShowOutputSuccess, script.title)
+        localize(LocalizationKey.helpersCustomScriptShowOutputSuccess, script.title)
       );
     }
   }
@@ -369,7 +374,7 @@ export class CustomScript {
     wsPath: string,
     args: string
   ): Promise<string> {
-    const osType = os.type();
+    const platform = getPlatform();
 
     // Check the command to use
     let command = script.nodeBin || 'node';
@@ -377,6 +382,10 @@ export class CustomScript {
       command = script.command;
     }
 
+    if (script.command === CommandType.Node && platform !== 'windows') {
+      command = await evaluateCommand(CommandType.Node);
+    }
+
     let scriptPath = join(wsPath, script.script);
     if (script.script.includes(WORKSPACE_PLACEHOLDER)) {
       scriptPath = Folders.getAbsFilePath(script.script);
@@ -384,19 +393,15 @@ export class CustomScript {
 
     // Check if there is an environments overwrite required
     if (script.environments) {
-      let crntType: EnvironmentType | null = null;
-      if (osType === 'Windows_NT') {
-        crntType = 'windows';
-      } else if (osType === 'Darwin') {
-        crntType = 'macos';
-      } else {
-        crntType = 'linux';
-      }
-
-      const environment = script.environments.find((e) => e.type === crntType);
+      const environment = script.environments.find((e) => e.type === platform);
       if (environment && environment.script && environment.command) {
         if (await CustomScript.validateCommand(environment.command)) {
           command = environment.command;
+
+          if (command === CommandType.Node && platform !== 'windows') {
+            command = await evaluateCommand(CommandType.Node);
+          }
+
           scriptPath = join(wsPath, environment.script);
           if (environment.script.includes(WORKSPACE_PLACEHOLDER)) {
             scriptPath = Folders.getAbsFilePath(environment.script);
@@ -410,21 +415,38 @@ export class CustomScript {
       throw new Error(`Script not found: ${scriptPath}`);
     }
 
-    if (osType === 'Windows_NT' && command.toLowerCase() === 'powershell') {
+    if (platform === 'windows' && command.toLowerCase() === 'powershell') {
       command = `${command} -File`;
     }
 
     const fullScript = `${command} "${scriptPath}" ${args}`;
-    Logger.info(l10n.t(LocalizationKey.helpersCustomScriptExecuting, fullScript));
+    Logger.info(localize(LocalizationKey.helpersCustomScriptExecuting, fullScript));
 
+    const output = await CustomScript.processExecution(fullScript, wsPath);
+    return output;
+  }
+
+  // Recursive function to process the execution of the script
+  private static async processExecution(fullScript: string, wsPath: string): Promise<string> {
     const output: string = await CustomScript.executeScriptAsync(fullScript, wsPath);
 
     try {
       const data = JSON.parse(output);
-      if (data.questions) {
+      const { questions, fmAction, fmPrompt } = data as {
+        questions?: {
+          name: string;
+          message: string;
+          default?: string;
+          options?: string[];
+        }[];
+        fmAction?: ScriptAction;
+        fmPrompt?: any; // When the 'promptCopilot' action is used
+      };
+
+      if (questions) {
         const answers: string[] = [];
 
-        for (const question of data.questions) {
+        for (const question of questions) {
           if (question.name && question.message) {
             let answer;
             if (question.options) {
@@ -452,7 +474,16 @@ export class CustomScript {
 
         if (answers.length > 0) {
           const newScript = `${fullScript} ${answers.join(' ')}`;
-          return await CustomScript.executeScriptAsync(newScript, wsPath);
+          return await CustomScript.processExecution(newScript, wsPath);
+        }
+      } else if (fmAction) {
+        if (fmAction === 'promptCopilot' && fmPrompt) {
+          const response = await Copilot.promptCopilot(fmPrompt);
+          if (response) {
+            const promptResponse = `promptResponse="${response}"`;
+            const newScript = `${fullScript} ${promptResponse}`;
+            return await CustomScript.processExecution(newScript, wsPath);
+          }
         }
       }
     } catch (error) {
@@ -469,7 +500,7 @@ export class CustomScript {
    * @returns
    */
   private static async executeScriptAsync(fullScript: string, wsPath: string): Promise<string> {
-    return new Promise(async (resolve, reject) => {
+    return new Promise((resolve, reject) => {
       exec(fullScript, { cwd: wsPath }, (error, stdout) => {
         if (error) {
           Logger.error(error.message);
@@ -498,7 +529,7 @@ export class CustomScript {
 
       return true;
     } catch (e) {
-      Logger.error(l10n.t(LocalizationKey.helpersCustomScriptValidateCommandError, command));
+      Logger.error(localize(LocalizationKey.helpersCustomScriptValidateCommandError, command));
       return false;
     }
   }

src/helpers/DashboardSettings.ts

@@ -1,5 +1,5 @@
 import { GitListener } from './../listeners/general/GitListener';
-import { basename, join } from 'path';
+import { join } from 'path';
 import { workspace } from 'vscode';
 import { Folders } from '../commands/Folders';
 import { Project } from '../commands/Project';
@@ -8,6 +8,7 @@ import {
   ExtensionState,
   SETTING_CONTENT_DRAFT_FIELD,
   SETTING_CONTENT_FILTERS,
+  SETTING_CONTENT_GROUPING,
   SETTING_CONTENT_SORTING,
   SETTING_CONTENT_SORTING_DEFAULT,
   SETTING_DASHBOARD_OPENONSTART,
@@ -23,7 +24,6 @@ import {
   SETTING_MEDIA_SUPPORTED_MIMETYPES,
   SETTING_TAXONOMY_CUSTOM,
   SETTING_TEMPLATES_ENABLED,
-  SETTING_GIT_ENABLED,
   SETTING_DASHBOARD_CONTENT_PAGINATION,
   SETTING_SNIPPETS_WRAPPER,
   SETTING_DASHBOARD_CONTENT_CARD_DATE,
@@ -31,7 +31,8 @@ import {
   SETTING_DASHBOARD_CONTENT_CARD_STATE,
   SETTING_DASHBOARD_CONTENT_CARD_DESCRIPTION,
   SETTING_WEBSITE_URL,
-  SETTING_MEDIA_CONTENTTYPES
+  SETTING_MEDIA_CONTENTTYPES,
+  SETTING_PANEL_OPEN_ON_SUPPORTED_FILE
 } from '../constants';
 import {
   DashboardViewType,
@@ -58,11 +59,12 @@ import { parseWinPath } from './parseWinPath';
 import { TaxonomyHelper } from './TaxonomyHelper';
 import { ContentType } from './ContentType';
 import { Logger } from './Logger';
+import { DataListener } from '../listeners/dashboard';
 
 export class DashboardSettings {
   private static cachedSettings: ISettings | undefined = undefined;
 
-  public static async get(clear: boolean = false) {
+  public static async get(clear = false) {
     if (!this.cachedSettings || clear) {
       this.cachedSettings = await this.getSettings();
     }
@@ -107,6 +109,7 @@ export class DashboardSettings {
         categories: (await TaxonomyHelper.get(TaxonomyType.Category)) || [],
         customTaxonomy: Settings.get(SETTING_TAXONOMY_CUSTOM, true) || [],
         openOnStart: Settings.get(SETTING_DASHBOARD_OPENONSTART),
+        openPanelForSupportedFiles: Settings.get(SETTING_PANEL_OPEN_ON_SUPPORTED_FILE),
         versionInfo: ext.getVersion(),
         pageViewType: await ext.getState<DashboardViewType | undefined>(
           ExtensionState.PagesView,
@@ -118,6 +121,7 @@ export class DashboardSettings {
         contentFolders: await Folders.get(),
         filters:
           Settings.get<(FilterType | { title: string; name: string })[]>(SETTING_CONTENT_FILTERS),
+        grouping: Settings.get<{ title: string; name: string }[]>(SETTING_CONTENT_GROUPING),
         crntFramework: Settings.get<string>(SETTING_FRAMEWORK_ID),
         framework: !isInitialized && wsFolder ? await FrameworkDetector.get(wsFolder.fsPath) : null,
         scripts: Settings.get<CustomScript[]>(SETTING_CUSTOM_SCRIPTS) || [],
@@ -158,6 +162,7 @@ export class DashboardSettings {
           }
         },
         dataFiles: await this.getDataFiles(),
+        dataFolders: Settings.get<DataFolder[]>(SETTING_DATA_FOLDERS) || [],
         dataTypes: Settings.get<DataType[]>(SETTING_DATA_TYPES),
         snippets: Settings.get<Snippets>(SETTING_CONTENT_SNIPPETS),
         snippetsWrapper: Settings.get<boolean>(SETTING_SNIPPETS_WRAPPER),
@@ -190,9 +195,9 @@ export class DashboardSettings {
     const files = Settings.get<DataFile[]>(SETTING_DATA_FILES);
     const folders = Settings.get<DataFolder[]>(SETTING_DATA_FOLDERS);
 
-    let clonedFiles = Object.assign([], files);
+    const clonedFiles = Object.assign([], files);
     if (folders) {
-      for (let folder of folders) {
+      for (const folder of folders) {
         if (!folder.path) {
           continue;
         }
@@ -216,17 +221,8 @@ export class DashboardSettings {
         );
 
         const dataFiles = [...dataJsonFiles, ...dataYmlFiles, ...dataYamlFiles];
-        for (let dataFile of dataFiles) {
-          clonedFiles.push({
-            id: basename(dataFile.fsPath),
-            title: basename(dataFile.fsPath),
-            file: dataFile.fsPath,
-            fileType: dataFile.fsPath.endsWith('.json') ? 'json' : 'yaml',
-            labelField: folder.labelField,
-            schema: folder.schema,
-            type: folder.type,
-            singleEntry: typeof folder.singleEntry === 'boolean' ? folder.singleEntry : false
-          } as DataFile);
+        for (const dataFile of dataFiles) {
+          clonedFiles.push(DataListener.createDataFileObject(dataFile.fsPath, folder));
         }
       }
     }

src/helpers/Extension.ts

@@ -293,7 +293,7 @@ export class Extension {
     propKey: string,
     propValue: T,
     type: 'workspace' | 'global' = 'global',
-    setState: boolean = false
+    setState = false
   ): Promise<void> {
     if (this.isFileStorageNeeded(propKey)) {
       let storageUri: Uri | undefined = undefined;

src/helpers/FilesHelper.ts

@@ -38,7 +38,7 @@ export class FilesHelper {
    */
   public static relToAbsPath(filePath: string): string {
     const wsFolder = Folders.getWorkspaceFolder();
-    let absPath = join(parseWinPath(wsFolder?.fsPath || ''), filePath);
+    const absPath = join(parseWinPath(wsFolder?.fsPath || ''), filePath);
     return parseWinPath(absPath);
   }
 

src/helpers/FrameworkDetector.ts

@@ -137,7 +137,7 @@ export class FrameworkDetector {
       const assetDir = dirname(absAssetPath);
       const fileName = parse(absAssetPath);
 
-      relAssetPath = relative(fileDir, assetDir);
+      relAssetPath = parseWinPath(relative(fileDir, assetDir));
       relAssetPath = join(relAssetPath, `${fileName.name}${fileName.ext}`);
     }
     // Support for HEXO image folder
@@ -197,7 +197,7 @@ export class FrameworkDetector {
       const assetDir = dirname(absAssetPath);
       const fileName = parse(absAssetPath);
 
-      let relAssetPath = relative(fileDir, assetDir);
+      let relAssetPath = parseWinPath(relative(fileDir, assetDir));
       relAssetPath = join(relAssetPath, `${fileName.name}${fileName.ext}`);
       return parseWinPath(relAssetPath);
     }

src/helpers/ImageHelper.ts

@@ -17,7 +17,7 @@ export class ImageHelper {
    * @returns
    */
   public static allRelToAbs(field: Field, value: string | string[] | undefined) {
-    let filePath =
+    const filePath =
       window.activeTextEditor?.document.uri.fsPath ||
       Preview.filePath ||
       ArticleHelper.getActiveFile();
@@ -54,7 +54,7 @@ export class ImageHelper {
    */
   public static relToAbs(filePath: string, value: string) {
     const wsFolder = Folders.getWorkspaceFolder();
-    let staticFolder = Folders.getStaticFolderRelativePath();
+    const staticFolder = Folders.getStaticFolderRelativePath();
 
     if (staticFolder === STATIC_FOLDER_PLACEHOLDER.hexo.placeholder) {
       const editor = window.activeTextEditor;

src/helpers/MediaHelpers.ts

@@ -18,7 +18,7 @@ import {
   SETTING_MEDIA_SUPPORTED_MIMETYPES
 } from '../constants';
 import { SortingOption } from '../dashboardWebView/models';
-import { MediaInfo, MediaPaths, SortOrder, SortType } from '../models';
+import { BlockFieldData, MediaInfo, MediaPaths, SortOrder, SortType } from '../models';
 import { basename, join, parse, dirname, relative } from 'path';
 import { statSync } from 'fs';
 import { Uri, workspace, window, Position } from 'vscode';
@@ -32,6 +32,7 @@ import { lookup } from 'mime-types';
 import { existsAsync, readdirAsync, unlinkAsync, writeFileAsync } from '../utils';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../localization';
+import { Wysiwyg } from '../commands';
 
 export class MediaHelpers {
   private static media: MediaInfo[] = [];
@@ -44,8 +45,9 @@ export class MediaHelpers {
    * @returns
    */
   public static async getMedia(
-    page: number = 0,
-    requestedFolder: string = '',
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    page = 0,
+    requestedFolder = '',
     sort: SortingOption | null = null
   ) {
     const wsFolder = Folders.getWorkspaceFolder();
@@ -374,7 +376,18 @@ export class MediaHelpers {
    * Insert an image into the front matter or contents
    * @param data
    */
-  public static async insertMediaToMarkdown(data: any) {
+  public static async insertMediaToMarkdown(data: {
+    file: string;
+    relPath: string;
+    snippet: string;
+    position: Position;
+    title?: string;
+    alt?: string;
+    caption?: string;
+    fieldName: string;
+    parents: string[];
+    blockData: BlockFieldData;
+  }) {
     if (data?.file && data?.relPath) {
       await EditorHelper.showFile(data.file);
       Dashboard.resetViewData();
@@ -409,7 +422,7 @@ export class MediaHelpers {
 
         // If the image exists in a content folder, the relative path needs to be used
         if (existsInContent) {
-          const relImgPath = relative(fileDir, imgDir);
+          const relImgPath = parseWinPath(relative(fileDir, imgDir));
 
           relPath = join(relImgPath, basename(relPath));
 
@@ -439,12 +452,23 @@ export class MediaHelpers {
 
             const caption = isFile ? `${data.title || ''}` : `${data.alt || data.caption || ''}`;
 
-            const snippet =
-              data.snippet ||
-              `${isFile ? '' : '!'}[${caption}](${FrameworkDetector.relAssetPathUpdate(
-                relPath,
-                editor.document.fileName
-              ).replace(/ /g, '%20')})`;
+            const docType = Wysiwyg.getDocType(filePath);
+
+            let snippet = data.snippet || '';
+            if (!snippet) {
+              if (docType === 'markdown') {
+                snippet = `${isFile ? '' : '!'}[${caption}](${FrameworkDetector.relAssetPathUpdate(
+                  relPath,
+                  editor.document.fileName
+                ).replace(/ /g, '%20')})`;
+              } else if (docType === 'asciidoc') {
+                snippet = `${isFile ? 'link:' : 'image:'}${FrameworkDetector.relAssetPathUpdate(
+                  relPath,
+                  editor.document.fileName
+                ).replace(/ /g, '%20')}${caption ? `[${caption}]` : ''}`;
+              }
+            }
+
             if (selection !== undefined) {
               builder.replace(selection, snippet);
             } else {

src/helpers/MediaLibrary.ts

@@ -132,6 +132,15 @@ export class MediaLibrary {
     }
   }
 
+  public async getAllByPath(path: string) {
+    try {
+      const data = await this.db?.getData(path);
+      return data;
+    } catch {
+      return undefined;
+    }
+  }
+
   public set(id: string, metadata: any): void {
     const fileId = this.parsePath(id);
     this.db?.push(fileId, metadata, true);

src/helpers/Notifications.ts

@@ -162,7 +162,7 @@ export class Notifications {
    * @returns
    */
   private static shouldShow(level: NotificationType): boolean {
-    let levels = Settings.get<string[]>(SETTING_GLOBAL_NOTIFICATIONS);
+    const levels = Settings.get<string[]>(SETTING_GLOBAL_NOTIFICATIONS);
 
     if (!levels) {
       return true;

src/helpers/Questions.ts

@@ -39,7 +39,7 @@ export class Questions {
    * @param showWarning
    * @returns
    */
-  public static async ContentTitle(showWarning: boolean = true): Promise<string | undefined> {
+  public static async ContentTitle(showWarning = true): Promise<string | undefined> {
     const aiEnabled = Settings.get<boolean>(SETTING_SPONSORS_AI_ENABLED);
     let title: string | undefined = '';
     const isCopilotInstalled = await Copilot.isInstalled();
@@ -93,46 +93,12 @@ export class Questions {
         }
       }
 
-      if (title && aiTitles && aiTitles.length > 0) {
-        const options: QuickPickItem[] = [
-          {
-            label: `✏️ ${l10n.t(
-              LocalizationKey.helpersQuestionsContentTitleAiInputQuickPickTitleSeparator
-            )}`,
-            kind: QuickPickItemKind.Separator
-          },
-          {
-            label: title
-          },
-          {
-            label: `🤖 ${l10n.t(
-              isCopilotInstalled
-                ? LocalizationKey.helpersQuestionsContentTitleAiInputQuickPickCopilotSeparator
-                : LocalizationKey.helpersQuestionsContentTitleAiInputQuickPickAiSeparator
-            )}`,
-            kind: QuickPickItemKind.Separator
-          },
-          ...aiTitles.map((d: string) => ({
-            label: d
-          }))
-        ];
-
-        const selectedTitle = await window.showQuickPick(options, {
-          title: l10n.t(LocalizationKey.helpersQuestionsContentTitleAiInputSelectTitle),
-          placeHolder: l10n.t(LocalizationKey.helpersQuestionsContentTitleAiInputSelectPlaceholder),
-          ignoreFocusOut: true
-        });
-
-        if (selectedTitle) {
-          title = selectedTitle.label;
-        } else if (!selectedTitle) {
-          // Reset the title, so the user can enter their own title
-          title = undefined;
-        }
-      } else if (!title && showWarning) {
-        Notifications.warning(l10n.t(LocalizationKey.helpersQuestionsContentTitleAiInputWarning));
-        return;
-      }
+      title = await this.pickTitleSuggestions(
+        title,
+        aiTitles || [],
+        isCopilotInstalled,
+        showWarning
+      );
     }
 
     if (!title) {
@@ -152,13 +118,63 @@ export class Questions {
     return title;
   }
 
+  public static async pickTitleSuggestions(
+    title: string | undefined,
+    aiTitles: string[],
+    isCopilotInstalled: boolean,
+    showWarning = true
+  ): Promise<string | undefined> {
+    if (title && aiTitles && aiTitles.length > 0) {
+      const options: QuickPickItem[] = [
+        {
+          label: `✏️ ${l10n.t(
+            LocalizationKey.helpersQuestionsContentTitleAiInputQuickPickTitleSeparator
+          )}`,
+          kind: QuickPickItemKind.Separator
+        },
+        {
+          label: title
+        },
+        {
+          label: `🤖 ${l10n.t(
+            isCopilotInstalled
+              ? LocalizationKey.helpersQuestionsContentTitleAiInputQuickPickCopilotSeparator
+              : LocalizationKey.helpersQuestionsContentTitleAiInputQuickPickAiSeparator
+          )}`,
+          kind: QuickPickItemKind.Separator
+        },
+        ...aiTitles.map((d: string) => ({
+          label: d
+        }))
+      ];
+
+      const selectedTitle = await window.showQuickPick(options, {
+        title: l10n.t(LocalizationKey.helpersQuestionsContentTitleAiInputSelectTitle),
+        placeHolder: l10n.t(LocalizationKey.helpersQuestionsContentTitleAiInputSelectPlaceholder),
+        ignoreFocusOut: true
+      });
+
+      if (selectedTitle) {
+        title = selectedTitle.label;
+      } else if (!selectedTitle) {
+        // Reset the title, so the user can enter their own title
+        title = undefined;
+      }
+    } else if (!title && showWarning) {
+      Notifications.warning(l10n.t(LocalizationKey.helpersQuestionsContentTitleAiInputWarning));
+      return;
+    }
+
+    return title;
+  }
+
   /**
    * Select the folder for your content creation
    * @param showWarning
    * @returns
    */
   public static async SelectContentFolder(
-    showWarning: boolean = true
+    showWarning = true
   ): Promise<FolderQuickPickItem | undefined> {
     let folders = await Folders.get();
     folders = folders.filter((f) => !f.disableCreation);
@@ -214,7 +230,7 @@ export class Questions {
    */
   public static async SelectContentType(
     allowedCts: string[],
-    showWarning: boolean = true
+    showWarning = true
   ): Promise<string | undefined> {
     let contentTypes = ContentType.getAll();
     if (!contentTypes || contentTypes.length === 0) {

src/helpers/Sanitize.ts

@@ -1,15 +1,24 @@
-var illegalRe = /[\/\?<>\\:\*\|"]/g;
-var controlRe = /[\x00-\x1f\x80-\x9f]/g;
-var reservedRe = /^\.+$/;
-var windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i;
-var windowsTrailingRe = /[\. ]+$/;
+const illegalRe = (isFileName: boolean) =>
+  isFileName ? /[/?<>\\:*|"!.,;{}[\]()+=~`@#$%^&']/g : /[/?<>\\:*|"!.,;{}[\]()_+=~`@#$%^&']/g;
+// eslint-disable-next-line no-control-regex
+const controlRe = /[\x00-\x1f\x80-\x9f]/g;
+const reservedRe = /^\.+$/;
+const windowsReservedRe = /^(con|prn|aux|nul|com[0-9]|lpt[0-9])(\..*)?$/i;
+const windowsTrailingRe = /[. ]+$/;
 
-function sanitize(input: string, replacement: string) {
+function normalizeSpecialChars(input: string): string {
+  return input.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+}
+
+function sanitize(input: string, replacement: string, isFileName?: boolean) {
   if (typeof input !== 'string') {
     throw new Error('Input must be string');
   }
-  var sanitized = input
-    .replace(illegalRe, replacement)
+
+  const normalizedInput = normalizeSpecialChars(input);
+
+  const sanitized = normalizedInput
+    .replace(illegalRe(isFileName || false), replacement)
     .replace(controlRe, replacement)
     .replace(reservedRe, replacement)
     .replace(windowsReservedRe, replacement)
@@ -17,11 +26,12 @@ function sanitize(input: string, replacement: string) {
   return sanitized;
 }
 
-export default function (input: string, options?: any) {
-  var replacement = (options && options.replacement) || '';
-  var output = sanitize(input, replacement);
+export default function (input: string, options?: { replacement?: string; isFileName?: boolean }) {
+  const replacement = (options && options.replacement) || '';
+  const isFileName = options && options.isFileName;
+  const output = sanitize(input, replacement, isFileName);
   if (replacement === '') {
     return output;
   }
-  return sanitize(output, '');
+  return sanitize(output, '', isFileName);
 }

src/helpers/SettingsHelper.ts

@@ -43,7 +43,8 @@ import {
   SETTING_TAXONOMY_TAGS,
   SETTING_TAXONOMY_CATEGORIES,
   SETTING_CONTENT_FILTERS,
-  SETTING_CONTENT_I18N
+  SETTING_CONTENT_I18N,
+  SETTING_CONTENT_GROUPING
 } from '../constants';
 import { Folders } from '../commands/Folders';
 import { join, basename, dirname, parse } from 'path';
@@ -67,7 +68,7 @@ export class Settings {
   public static globalConfigPath: string | undefined = undefined;
   public static globalConfig: any;
   private static config: WorkspaceConfiguration;
-  private static isInitialized: boolean = false;
+  private static isInitialized = false;
   private static listeners: { id: string; callback: (global?: any) => void }[] = [];
   private static fileCreationWatcher: FileSystemWatcher | undefined;
   private static fileChangeWatcher: FileSystemWatcher | undefined;
@@ -76,7 +77,7 @@ export class Settings {
   private static readConfigPromise: Promise<void> | undefined = undefined;
   private static project: Project | undefined = undefined;
   private static configDebouncer = debounceCallback();
-  private static hasExtendedConfig: boolean = false;
+  private static hasExtendedConfig = false;
   private static extendedConfig: { extended: any[]; splitted: any[]; dynamic: boolean } = {} as any;
 
   public static async registerCommands() {
@@ -131,6 +132,8 @@ export class Settings {
       Settings.config = workspace.getConfiguration(CONFIG_KEY);
     });
 
+    Logger.info(`Logging level: ${Logger.getLevel()}`);
+
     Settings.onConfigChange();
   }
 
@@ -335,7 +338,7 @@ export class Settings {
   /**
    * Retrieve a setting from global and local config
    */
-  public static get<T>(name: string, merging: boolean = false): T | undefined {
+  public static get<T>(name: string, merging = false): T | undefined {
     if (!Settings.config) {
       return;
     }
@@ -383,11 +386,7 @@ export class Settings {
    * @param updateGlobal - Indicates whether to update the global setting or not. Default is `false`.
    * @returns A promise that resolves when the setting is updated.
    */
-  public static async safeUpdate<T>(
-    name: string,
-    value: T,
-    updateGlobal: boolean = false
-  ): Promise<void> {
+  public static async safeUpdate<T>(name: string, value: T, updateGlobal = false): Promise<void> {
     if (Settings.hasExtendedConfig) {
       const configKey = `${CONFIG_KEY}.${name}`;
 
@@ -418,11 +417,7 @@ ${JSON.stringify(value, null, 2)}`,
    * @param name
    * @param value
    */
-  public static async update<T>(
-    name: string,
-    value: T,
-    updateGlobal: boolean = false
-  ): Promise<void> {
+  public static async update<T>(name: string, value: T, updateGlobal = false): Promise<void> {
     const fmConfig = await Settings.projectConfigPath();
 
     if (updateGlobal) {
@@ -571,7 +566,7 @@ ${JSON.stringify(value, null, 2)}`,
    */
   public static async updateCustomTaxonomyOptions(id: string, options: string[]) {
     const customTaxonomies = Settings.get<CustomTaxonomy[]>(SETTING_TAXONOMY_CUSTOM, true) || [];
-    let taxIdx = customTaxonomies?.findIndex((o) => o.id === id);
+    const taxIdx = customTaxonomies?.findIndex((o) => o.id === id);
 
     if (taxIdx !== -1) {
       customTaxonomies[taxIdx].options = options;
@@ -753,7 +748,7 @@ ${JSON.stringify(value, null, 2)}`,
                 Logger.info(`Reading dynamic config file: ${absFilePath}`);
                 if (absFilePath) {
                   if (await existsAsync(absFilePath)) {
-                    const configFunction = require(absFilePath);
+                    const configFunction = await import(absFilePath);
                     const dynamicConfig = await configFunction(
                       Object.assign({}, Settings.globalConfig)
                     );
@@ -858,7 +853,7 @@ ${JSON.stringify(value, null, 2)}`,
 
     // We need to loop through the config to make sure the objects and arrays are merged
     for (const key in config) {
-      if (config.hasOwnProperty(key)) {
+      if (Object.prototype.hasOwnProperty.call(config, key)) {
         const value = config[key];
         const settingName = key.replace(`${CONFIG_KEY}.`, '');
 
@@ -875,7 +870,8 @@ ${JSON.stringify(value, null, 2)}`,
           settingName === SETTING_GLOBAL_NOTIFICATIONS_DISABLED ||
           settingName === SETTING_MEDIA_SUPPORTED_MIMETYPES ||
           settingName === SETTING_COMMA_SEPARATED_FIELDS ||
-          settingName === SETTING_CONTENT_FILTERS
+          settingName === SETTING_CONTENT_FILTERS || 
+          settingName === SETTING_CONTENT_GROUPING
         ) {
           if (typeof originalConfig[key] === 'undefined') {
             Settings.globalConfig[key] = value;
@@ -1209,7 +1205,7 @@ ${JSON.stringify(value, null, 2)}`,
    * Reload the config
    * @param debounced
    */
-  private static async reloadConfig(debounced: boolean = true) {
+  private static async reloadConfig(debounced = true) {
     Logger.info(`Reloading config...`);
     // Clear the folder cache as we need to see the latest folders
     Folders.clearCached();

src/helpers/SlugHelper.ts

@@ -1,6 +1,7 @@
-import { Settings } from '.';
+import { parseWinPath, Settings } from '.';
 import { stopWords, charMap, SETTING_DATE_FORMAT, SETTING_SLUG_TEMPLATE } from '../constants';
 import { processTimePlaceholders, processFmPlaceholders } from '.';
+import { parse } from 'path';
 
 export class SlugHelper {
   /**
@@ -11,23 +12,34 @@ export class SlugHelper {
   public static createSlug(
     articleTitle: string,
     articleData: { [key: string]: any },
+    filePath?: string,
     slugTemplate?: string
   ): string | null {
     if (!articleTitle) {
       return null;
     }
 
-    if (!slugTemplate) {
-      slugTemplate = Settings.get<string>(SETTING_SLUG_TEMPLATE) || undefined;
+    if (slugTemplate === undefined || slugTemplate === null) {
+      slugTemplate = Settings.get<string>(SETTING_SLUG_TEMPLATE);
     }
 
-    if (slugTemplate) {
+    if (typeof slugTemplate === 'string') {
       if (slugTemplate.includes('{{title}}')) {
         const regex = new RegExp('{{title}}', 'g');
         slugTemplate = slugTemplate.replace(regex, articleTitle.toLowerCase().replace(/\s/g, '-'));
       } else if (slugTemplate.includes('{{seoTitle}}')) {
         const regex = new RegExp('{{seoTitle}}', 'g');
         slugTemplate = slugTemplate.replace(regex, SlugHelper.slugify(articleTitle));
+      } else if (slugTemplate.includes(`{{fileName}}`)) {
+        const file = parse(filePath || '');
+        const fileName = file.name;
+        const regex = new RegExp('{{fileName}}', 'g');
+        slugTemplate = slugTemplate.replace(regex, fileName);
+      } else if (slugTemplate.includes(`{{sluggedFileName}}`)) {
+        const file = parse(filePath || '');
+        const fileName = SlugHelper.slugify(file.name);
+        const regex = new RegExp('{{sluggedFileName}}', 'g');
+        slugTemplate = slugTemplate.replace(regex, fileName);
       }
 
       const dateFormat = Settings.get(SETTING_DATE_FORMAT) as string;
@@ -69,7 +81,7 @@ export class SlugHelper {
       return '';
     }
 
-    const punctuationless = value?.replace(/[\.,-\/#!$@%\^&\*;:{}=\-_`'"~()+\?<>]/g, ' ');
+    const punctuationless = value?.replace(/[.,-/#!$@%^&*;:{}=\-_`'"~()+?<>]/g, ' ');
     // Remove double spaces
     return punctuationless?.replace(/\s{2,}/g, ' ');
   }

src/helpers/SnippetParser.ts

@@ -4,8 +4,8 @@ import { SnippetField } from '../models';
 export class SnippetParser {
   public static getPlaceholders(
     value: string[] | string,
-    openingTags: string = '[[',
-    closingTags: string = ']]'
+    openingTags = '[[',
+    closingTags = ']]'
   ): string[] {
     const template = SnippetParser.template(value);
     const parseTree = Mustache.parse(template, [openingTags, closingTags]);
@@ -29,9 +29,9 @@ export class SnippetParser {
 
   public static render(
     value: string[] | string,
-    data: any,
-    openingTags: string = '[[',
-    closingTags: string = ']]'
+    data: unknown,
+    openingTags = '[[',
+    closingTags = ']]'
   ): string {
     const template = SnippetParser.template(value);
     return Mustache.render(template, data, undefined, [openingTags, closingTags]);
@@ -40,8 +40,8 @@ export class SnippetParser {
   public static getFields(
     value: string[] | string,
     fields: SnippetField[],
-    openingTags: string = '[[',
-    closingTags: string = ']]'
+    openingTags = '[[',
+    closingTags = ']]'
   ) {
     const placeholders = SnippetParser.getPlaceholders(value, openingTags, closingTags);
 

src/helpers/Sorting.ts

@@ -7,6 +7,7 @@ export class Sorting {
    * @returns
    */
   public static alphabetically = (property: string) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return (a: any, b: any) => {
       if (a[property] < b[property]) {
         return -1;
@@ -24,6 +25,7 @@ export class Sorting {
    * @returns
    */
   public static numerically = (property: string) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return (a: any, b: any) => {
       return a[property] - b[property];
     };
@@ -35,6 +37,7 @@ export class Sorting {
    * @returns
    */
   public static date = (property: string) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return (a: any, b: any) => {
       const dateA = DateHelper.tryParse(a[property]);
       const dateB = DateHelper.tryParse(b[property]);
@@ -49,13 +52,16 @@ export class Sorting {
    * @returns
    */
   public static dateWithFallback = (property: string, fallback: string) => {
-    return (a: any, b: any) => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (a: any, b: any): number => {
       const dateA = DateHelper.tryParse(a[property]);
       const dateB = DateHelper.tryParse(b[property]);
 
       // Sort by date
-      var dCount = (dateA || new Date(0)).getTime() - (dateB || new Date(0)).getTime();
-      if (dCount) return dCount;
+      const dCount = (dateA || new Date(0)).getTime() - (dateB || new Date(0)).getTime();
+      if (dCount) {
+        return dCount;
+      }
 
       // If there is a tie, sort by fallback property
       if (a[fallback] < b[fallback]) {
@@ -67,15 +73,4 @@ export class Sorting {
       return 0;
     };
   };
-
-  /**
-   * Sort by number
-   * @param property
-   * @returns
-   */
-  public static number = (property: string) => {
-    return (a: any, b: any) => {
-      return a[property] - b[property];
-    };
-  };
 }