First steps to create the snippet dashboard

src/commands/Article.ts

@@ -1,5 +1,5 @@
 import { isValidFile } from './../helpers/isValidFile';
-import { SETTING_AUTO_UPDATE_DATE, SETTING_MODIFIED_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TEMPLATES_PREFIX, CONFIG_KEY, SETTING_DATE_FORMAT, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTINGS_CONTENT_PLACEHOLDERS, TelemetryEvent } from './../constants';
+import { SETTING_AUTO_UPDATE_DATE, SETTING_MODIFIED_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TEMPLATES_PREFIX, CONFIG_KEY, SETTING_DATE_FORMAT, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_CONTENT_PLACEHOLDERS, TelemetryEvent } from './../constants';
 import * as vscode from 'vscode';
 import { Field, TaxonomyType } from "../models";
 import { format } from "date-fns";
@@ -200,7 +200,7 @@ export class Article {
         }
 
         // Update the fields containing a custom placeholder that depends on slug
-        const placeholders = Settings.get<{id: string, value: string}[]>(SETTINGS_CONTENT_PLACEHOLDERS);
+        const placeholders = Settings.get<{id: string, value: string}[]>(SETTING_CONTENT_PLACEHOLDERS);
         const customPlaceholders = placeholders?.filter(p => p.value.includes("{{slug}}"));
         for (const customPlaceholder of (customPlaceholders || [])) {
           const customPlaceholderFields = contentType.fields.filter(f => f.default === `{{${customPlaceholder.id}}}`);

src/commands/Dashboard.ts

@@ -1,4 +1,4 @@
-import { SETTINGS_DASHBOARD_OPENONSTART, CONTEXT } from '../constants';
+import { SETTING_DASHBOARD_OPENONSTART, CONTEXT } from '../constants';
 import { join } from "path";
 import { commands, Uri, ViewColumn, Webview, WebviewPanel, window } from "vscode";
 import { Logger, Settings as SettingsHelper } from '../helpers';
@@ -24,7 +24,7 @@ export class Dashboard {
    * Init the dashboard
    */
   public static async init() {
-    const openOnStartup = SettingsHelper.get(SETTINGS_DASHBOARD_OPENONSTART);
+    const openOnStartup = SettingsHelper.get(SETTING_DASHBOARD_OPENONSTART);
     if (openOnStartup) {
       Dashboard.open();
     }

src/commands/Folders.ts

@@ -1,5 +1,5 @@
 import { Questions } from './../helpers/Questions';
-import { SETTINGS_CONTENT_PAGE_FOLDERS, SETTINGS_CONTENT_STATIC_FOLDER, SETTINGS_CONTENT_SUPPORTED_FILETYPES, TelemetryEvent } from './../constants';
+import { SETTING_CONTENT_PAGE_FOLDERS, SETTING_CONTENT_STATIC_FOLDER, SETTING_CONTENT_SUPPORTED_FILETYPES, TelemetryEvent } from './../constants';
 import { commands, Uri, workspace, window } from "vscode";
 import { basename, join } from "path";
 import { ContentFolder, FileInfo, FolderInfo } from "../models";
@@ -26,7 +26,7 @@ export class Folders {
    */
   public static async addMediaFolder(data?: {selectedFolder?: string}) {
     let wsFolder = Folders.getWorkspaceFolder();
-    const staticFolder = Settings.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
+    const staticFolder = Settings.get<string>(SETTING_CONTENT_STATIC_FOLDER);
 
     let startPath = "";
 
@@ -210,7 +210,7 @@ export class Folders {
    * Get the registered folders information
    */
   public static async getInfo(limit?: number): Promise<FolderInfo[] | null> {
-    const supportedFiles = Settings.get<string[]>(SETTINGS_CONTENT_SUPPORTED_FILETYPES);
+    const supportedFiles = Settings.get<string[]>(SETTING_CONTENT_SUPPORTED_FILETYPES);
     const folders = Folders.get();
     if (folders && folders.length > 0) {
       let folderInfo: FolderInfo[] = [];
@@ -281,7 +281,7 @@ export class Folders {
    */
   public static get(): ContentFolder[] {
     const wsFolder = Folders.getWorkspaceFolder();
-    const folders: ContentFolder[] = Settings.get(SETTINGS_CONTENT_PAGE_FOLDERS) as ContentFolder[];
+    const folders: ContentFolder[] = Settings.get(SETTING_CONTENT_PAGE_FOLDERS) as ContentFolder[];
     
     return folders.map(folder => ({
       ...folder,
@@ -301,7 +301,7 @@ export class Folders {
       path: Folders.relWsFolder(folder, wsFolder) 
     }));
 
-    await Settings.update(SETTINGS_CONTENT_PAGE_FOLDERS, folderDetails, true);
+    await Settings.update(SETTING_CONTENT_PAGE_FOLDERS, folderDetails, true);
 
     // Reinitialize the folder listeners
     PagesListener.startWatchers();

src/commands/Project.ts

@@ -6,7 +6,7 @@ import { Notifications } from "../helpers/Notifications";
 import { Template } from "./Template";
 import { Folders } from "./Folders";
 import { Settings } from "../helpers";
-import { SETTINGS_CONTENT_DEFAULT_FILETYPE, TelemetryEvent } from "../constants";
+import { SETTING_CONTENT_DEFAULT_FILETYPE, TelemetryEvent } from "../constants";
 
 export class Project {
 
@@ -29,7 +29,7 @@ categories: []
   public static async init(sampleTemplate: boolean = true) {
     try {
       Settings.createTeamSettings();
-      const fileType = Settings.get<string>(SETTINGS_CONTENT_DEFAULT_FILETYPE);
+      const fileType = Settings.get<string>(SETTING_CONTENT_DEFAULT_FILETYPE);
 
       const folder = Template.getSettings();
       const templatePath = Project.templatePath();

src/commands/Template.ts

@@ -2,7 +2,7 @@ import { Questions } from './../helpers/Questions';
 import * as vscode from 'vscode';
 import * as path from 'path';
 import * as fs from 'fs';
-import { SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTING_TEMPLATES_FOLDER, TelemetryEvent } from '../constants';
+import { SETTING_CONTENT_DEFAULT_FILETYPE, SETTING_TEMPLATES_FOLDER, TelemetryEvent } from '../constants';
 import { ArticleHelper, Settings } from '../helpers';
 import { Article } from '.';
 import { Notifications } from '../helpers/Notifications';
@@ -52,7 +52,7 @@ export class Template {
   public static async generate() {
     const folder = Template.getSettings();
     const editor = vscode.window.activeTextEditor;
-    const fileType = Settings.get<string>(SETTINGS_CONTENT_DEFAULT_FILETYPE);
+    const fileType = Settings.get<string>(SETTING_CONTENT_DEFAULT_FILETYPE);
 
     if (folder && editor && ArticleHelper.isMarkdownFile()) {
       const article = ArticleHelper.getFrontMatter(editor);

src/commands/Wysiwyg.ts

@@ -1,5 +1,5 @@
 import { commands, window, Selection, QuickPickItem } from "vscode";
-import { COMMAND_NAME, CONTEXT, SETTINGS_CONTENT_WYSIWYG } from "../constants";
+import { COMMAND_NAME, CONTEXT, SETTING_CONTENT_WYSIWYG } from "../constants";
 import { Settings } from "../helpers";
 
 enum MarkupType {
@@ -24,7 +24,7 @@ export class Wysiwyg {
    */
   public static async registerCommands(subscriptions: any) {
 
-    const wysiwygEnabled = Settings.get(SETTINGS_CONTENT_WYSIWYG);
+    const wysiwygEnabled = Settings.get(SETTING_CONTENT_WYSIWYG);
 
     if (!wysiwygEnabled) {
       return;

src/constants/settings.ts

@@ -43,35 +43,36 @@ export const SETTING_PREVIEW_PATHNAME = "preview.pathName";
 export const SETTING_CUSTOM_SCRIPTS = "custom.scripts";
 
 export const SETTING_AUTO_UPDATE_DATE = "content.autoUpdateDate";
-export const SETTINGS_CONTENT_PAGE_FOLDERS = "content.pageFolders";
-export const SETTINGS_CONTENT_STATIC_FOLDER = "content.publicFolder";
-export const SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT = "content.fmHighlight";
-export const SETTINGS_CONTENT_DRAFT_FIELD = "content.draftField";
-export const SETTINGS_CONTENT_SORTING = "content.sorting";
-export const SETTINGS_CONTENT_WYSIWYG = "content.wysiwyg";
-export const SETTINGS_CONTENT_PLACEHOLDERS = "content.placeholders";
+export const SETTING_CONTENT_PAGE_FOLDERS = "content.pageFolders";
+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_WYSIWYG = "content.wysiwyg";
+export const SETTING_CONTENT_PLACEHOLDERS = "content.placeholders";
+export const SETTING_CONTENT_SNIPPETS = "content.snippets";
 
-export const SETTINGS_CONTENT_SORTING_DEFAULT = "content.defaultSorting";
-export const SETTINGS_MEDIA_SORTING_DEFAULT = "content.defaultSorting";
+export const SETTING_CONTENT_SORTING_DEFAULT = "content.defaultSorting";
+export const SETTING_MEDIA_SORTING_DEFAULT = "content.defaultSorting";
 
-export const SETTINGS_CONTENT_DEFAULT_FILETYPE = "content.defaultFileType";
-export const SETTINGS_CONTENT_SUPPORTED_FILETYPES = "content.supportedFileTypes";
+export const SETTING_CONTENT_DEFAULT_FILETYPE = "content.defaultFileType";
+export const SETTING_CONTENT_SUPPORTED_FILETYPES = "content.supportedFileTypes";
 
-export const SETTINGS_DASHBOARD_OPENONSTART = "dashboard.openOnStart";
-export const SETTINGS_DASHBOARD_MEDIA_SNIPPET = "dashboard.mediaSnippet";
+export const SETTING_DASHBOARD_OPENONSTART = "dashboard.openOnStart";
+export const SETTING_DASHBOARD_MEDIA_SNIPPET = "dashboard.mediaSnippet";
 
-export const SETTINGS_DATA_FILES = "data.files";
-export const SETTINGS_DATA_FOLDERS = "data.folders";
-export const SETTINGS_DATA_TYPES = "data.types";
+export const SETTING_DATA_FILES = "data.files";
+export const SETTING_DATA_FOLDERS = "data.folders";
+export const SETTING_DATA_TYPES = "data.types";
 
-export const SETTINGS_FILE_PRESERVE_CASING = "file.preserveCasing";
+export const SETTING_FILE_PRESERVE_CASING = "file.preserveCasing";
 
-export const SETTINGS_FRAMEWORK_ID = "framework.id";
-export const SETTINGS_FRAMEWORK_START = "framework.startCommand";
+export const SETTING_FRAMEWORK_ID = "framework.id";
+export const SETTING_FRAMEWORK_START = "framework.startCommand";
 
 export const SETTING_SITE_BASEURL = "site.baseURL";
 
 /**
  * @deprecated
  */
-export const SETTINGS_CONTENT_FOLDERS = "content.folders";
+export const SETTING_CONTENT_FOLDERS = "content.folders";

src/dashboardWebView/components/Contents/Contents.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { Page } from '../../models';
 import { SettingsSelector } from '../../state';
-import { Header } from '../Header';
 import { Overview } from './Overview';
 import { Spinner } from '../Spinner';
 import { SponsorMsg } from '../SponsorMsg';
@@ -11,6 +10,7 @@ import { useEffect } from 'react';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { TelemetryEvent } from '../../../constants';
+import { PageLayout } from '../Layout/PageLayout';
 
 export interface IContentsProps {
   pages: Page[];
@@ -30,17 +30,14 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({pages, loadin
   }, []);
 
   return (
-    <div className="flex flex-col h-full overflow-auto">
-      <Header 
-        folders={pageFolders}
-        totalPages={pageItems.length}
-        settings={settings} />
-
+    <PageLayout
+      folders={pageFolders}
+      totalPages={pageItems.length}>
       <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4">
         { loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} /> }
       </div>
 
       <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} isBacker={settings?.isBacker} />
-    </div>
+    </PageLayout>
   );
 };

src/dashboardWebView/components/Dashboard.tsx

@@ -9,6 +9,7 @@ import { Contents } from './Contents/Contents';
 import { Media } from './Media/Media';
 import { NavigationType } from '../models';
 import { DataView } from './DataView';
+import { Snippets } from './SnippetsView/Snippets';
 
 export interface IDashboardProps {
   showWelcome: boolean;
@@ -31,6 +32,14 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome
     return <WelcomeScreen settings={settings} />;
   }
 
+  if (view === NavigationType.Snippets) {
+    return (
+      <main className={`h-full w-full`}>
+        <Snippets />
+      </main>
+    );
+  } 
+  
   if (view === NavigationType.Media) {
     return (
       <main className={`h-full w-full`}>

src/dashboardWebView/components/Header/Tabs.tsx

@@ -1,4 +1,4 @@
-import { DatabaseIcon, PhotographIcon } from '@heroicons/react/outline';
+import { CodeIcon, DatabaseIcon, PhotographIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
@@ -29,6 +29,13 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({ onNavigate }: React.
           <PhotographIcon className={`h-6 w-auto mr-2`} /><span>Media</span>
         </Tab>
       </li>
+      <li className="mr-2" role="presentation">
+        <Tab
+          navigationType={NavigationType.Snippets} 
+          onNavigate={onNavigate}>
+          <CodeIcon className={`h-6 w-auto mr-2`} /><span>Snippets</span>
+        </Tab>
+      </li>
       {
         (settings?.dataFiles && settings.dataFiles.length > 0) && (
           <li className="mr-2" role="presentation">

src/dashboardWebView/components/Layout/PageLayout.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useRecoilValue } from 'recoil';
+import { SettingsSelector } from '../../state';
+import { Header } from '../Header';
+
+export interface IPageLayoutProps {
+  folders?: string[] | undefined
+  totalPages?: number | undefined
+}
+
+export const PageLayout: React.FunctionComponent<IPageLayoutProps> = ({ folders, totalPages, children }: React.PropsWithChildren<IPageLayoutProps>) => {
+  const settings = useRecoilValue(SettingsSelector);
+  
+  return (
+    <div className="flex flex-col h-full overflow-auto">
+      <Header 
+        folders={folders}
+        totalPages={totalPages}
+        settings={settings} />
+
+      <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4">
+        { children }
+      </div>
+    </div>
+  );
+};

src/dashboardWebView/components/Media/Media.tsx

@@ -3,7 +3,6 @@ import {UploadIcon} from '@heroicons/react/outline';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { LoadingAtom, MediaFoldersAtom, SelectedMediaFolderAtom, SettingsSelector, ViewDataSelector } from '../../state';
-import { Header } from '../Header';
 import { Spinner } from '../Spinner';
 import { SponsorMsg } from '../SponsorMsg';
 import { Item } from './Item';
@@ -16,6 +15,7 @@ import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMat
 import { FolderItem } from './FolderItem';
 import useMedia from '../../hooks/useMedia';
 import { TelemetryEvent } from '../../../constants';
+import { PageLayout } from '../Layout/PageLayout';
 
 export interface IMediaProps {}
 
@@ -56,11 +56,8 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
   });
   
   return (
-    <div className="flex flex-col h-full overflow-auto">
-      <Header settings={settings} />
-
-      <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4" {...getRootProps()}>
-
+    <PageLayout>
+      <div className="w-full h-full" {...getRootProps()}>
         {
           viewData?.data?.filePath && (
             <div className={`text-lg text-center mb-6`}>
@@ -123,6 +120,6 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
       <Lightbox />
 
       <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} isBacker={settings?.isBacker} />
-    </div>
+    </PageLayout>
   );
 };

src/dashboardWebView/components/SnippetsView/Snippets.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useRecoilValue } from 'recoil';
+import { SettingsSelector } from '../../state';
+import { PageLayout } from '../Layout/PageLayout';
+
+export interface ISnippetsProps {}
+
+export const Snippets: React.FunctionComponent<ISnippetsProps> = (props: React.PropsWithChildren<ISnippetsProps>) => {
+  const settings = useRecoilValue(SettingsSelector);
+  
+  return (
+    <PageLayout>
+      {
+        JSON.stringify(settings?.snippets, null, 2)
+      }
+    </PageLayout>
+  );
+};

src/dashboardWebView/components/Startup.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SETTINGS_DASHBOARD_OPENONSTART } from '../../constants';
+import { SETTING_DASHBOARD_OPENONSTART } from '../../constants';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../DashboardMessage';
 import { Settings } from '../models/Settings';
@@ -13,7 +13,7 @@ export const Startup: React.FunctionComponent<IStartupProps> = ({settings}: Reac
 
   const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setIsChecked(e.target.checked);
-    Messenger.send(DashboardMessage.updateSetting, { name: SETTINGS_DASHBOARD_OPENONSTART, value: e.target.checked });
+    Messenger.send(DashboardMessage.updateSetting, { name: SETTING_DASHBOARD_OPENONSTART, value: e.target.checked });
   };
 
   React.useEffect(() => {

src/dashboardWebView/models/NavigationType.ts

@@ -2,4 +2,5 @@ export enum NavigationType {
   Contents = "contents",
   Media = "media",
   Data = "data",
+  Snippets = "snippets",
 }

src/dashboardWebView/models/Settings.ts

@@ -29,6 +29,7 @@ export interface Settings {
   dataFiles: DataFile[] | undefined;
   dataTypes: DataType[] | undefined;
   isBacker: boolean | undefined;
+  snippets: any | undefined;
 }
 
 export interface DashboardState {

src/helpers/ArticleHelper.ts

@@ -2,7 +2,7 @@ import { MarkdownFoldingProvider } from './../providers/MarkdownFoldingProvider'
 import { DEFAULT_CONTENT_TYPE, DEFAULT_CONTENT_TYPE_NAME } from './../constants/ContentType';
 import * as vscode from 'vscode';
 import * as fs from "fs";
-import { DefaultFields, SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTINGS_CONTENT_PLACEHOLDERS, SETTINGS_CONTENT_SUPPORTED_FILETYPES, SETTINGS_FILE_PRESERVE_CASING, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_SITE_BASEURL, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants';
+import { DefaultFields, SETTING_CONTENT_DEFAULT_FILETYPE, SETTING_CONTENT_PLACEHOLDERS, SETTING_CONTENT_SUPPORTED_FILETYPES, SETTING_FILE_PRESERVE_CASING, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_SITE_BASEURL, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants';
 import { DumpOptions } from 'js-yaml';
 import { FrontMatterParser, ParsedFrontMatter } from '../parsers';
 import { Extension, Logger, Settings, SlugHelper } from '.';
@@ -143,7 +143,7 @@ export class ArticleHelper {
    */ 
   public static isMarkdownFile(document: vscode.TextDocument | undefined | null = null) {
     const supportedLanguages = ["markdown", "mdx"];
-    const fileTypes = Settings.get<string[]>(SETTINGS_CONTENT_SUPPORTED_FILETYPES);
+    const fileTypes = Settings.get<string[]>(SETTING_CONTENT_SUPPORTED_FILETYPES);
     const supportedFileExtensions = fileTypes ? fileTypes.map(f => f.startsWith(`.`) ? f : `.${f}`) : DEFAULT_FILE_TYPES;
     const languageId = document?.languageId?.toLowerCase();
     const isSupportedLanguage =  languageId && supportedLanguages.includes(languageId);
@@ -227,7 +227,7 @@ export class ArticleHelper {
    * @returns 
    */
   public static sanitize(value: string): string {
-    const preserveCasing = Settings.get(SETTINGS_FILE_PRESERVE_CASING) as boolean;
+    const preserveCasing = Settings.get(SETTING_FILE_PRESERVE_CASING) as boolean;
     return sanitize((preserveCasing ? value : value.toLowerCase()).replace(/ /g, "-"));
   }
 
@@ -240,7 +240,7 @@ export class ArticleHelper {
    */
   public static createContent(contentType: ContentType | undefined, folderPath: string, titleValue: string, fileExtension?: string): string | undefined {
     const prefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
-    const fileType = Settings.get<string>(SETTINGS_CONTENT_DEFAULT_FILETYPE);
+    const fileType = Settings.get<string>(SETTING_CONTENT_DEFAULT_FILETYPE);
     
     // Name of the file or folder to create
     const sanitizedName = ArticleHelper.sanitize(titleValue);
@@ -336,7 +336,7 @@ export class ArticleHelper {
    */
   public static processCustomPlaceholders(value: string, title: string) {
     if (value && typeof value === "string") {
-      const placeholders = Settings.get<{id: string, value: string}[]>(SETTINGS_CONTENT_PLACEHOLDERS);
+      const placeholders = Settings.get<{id: string, value: string}[]>(SETTING_CONTENT_PLACEHOLDERS);
       if (placeholders && placeholders.length > 0) {
         for (const placeholder of placeholders) {
           if (value.includes(`{{${placeholder.id}}}`)) {

src/helpers/ContentType.ts

@@ -1,6 +1,6 @@
 import { PagesListener } from './../listeners/dashboard';
 import { ArticleHelper, Settings } from ".";
-import { SETTINGS_CONTENT_DRAFT_FIELD, SETTING_TAXONOMY_CONTENT_TYPES, TelemetryEvent } from "../constants";
+import { SETTING_CONTENT_DRAFT_FIELD, SETTING_TAXONOMY_CONTENT_TYPES, TelemetryEvent } from "../constants";
 import { ContentType as IContentType, DraftField, Field } from '../models';
 import { Uri, commands } from 'vscode'; 
 import { Folders } from "../commands/Folders";
@@ -18,7 +18,7 @@ export class ContentType {
    * @returns 
    */
   public static getDraftField() {
-    const draftField = Settings.get<DraftField | null | undefined>(SETTINGS_CONTENT_DRAFT_FIELD);
+    const draftField = Settings.get<DraftField | null | undefined>(SETTING_CONTENT_DRAFT_FIELD);
     if (draftField) {
       return draftField;
     }

src/helpers/DashboardSettings.ts

@@ -2,7 +2,7 @@ import { basename, join } from "path";
 import { workspace } from "vscode";
 import { Folders } from "../commands/Folders";
 import { Template } from "../commands/Template";
-import { CONTEXT, ExtensionState, SETTINGS_CONTENT_DRAFT_FIELD, SETTINGS_CONTENT_SORTING, SETTINGS_CONTENT_SORTING_DEFAULT, SETTINGS_CONTENT_STATIC_FOLDER, SETTINGS_DASHBOARD_MEDIA_SNIPPET, SETTINGS_DASHBOARD_OPENONSTART, SETTINGS_DATA_FILES, SETTINGS_DATA_FOLDERS, SETTINGS_DATA_TYPES, SETTINGS_FRAMEWORK_ID, SETTINGS_MEDIA_SORTING_DEFAULT, SETTING_CUSTOM_SCRIPTS, SETTING_TAXONOMY_CONTENT_TYPES } from "../constants";
+import { CONTEXT, ExtensionState, SETTING_CONTENT_DRAFT_FIELD, SETTING_CONTENT_SORTING, SETTING_CONTENT_SORTING_DEFAULT, SETTING_CONTENT_STATIC_FOLDER, SETTING_DASHBOARD_MEDIA_SNIPPET, SETTING_DASHBOARD_OPENONSTART, SETTING_DATA_FILES, SETTING_DATA_FOLDERS, SETTING_DATA_TYPES, SETTING_FRAMEWORK_ID, SETTING_MEDIA_SORTING_DEFAULT, SETTING_CUSTOM_SCRIPTS, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_CONTENT_SNIPPETS } from "../constants";
 import { DashboardViewType, SortingOption, Settings as ISettings } from "../dashboardWebView/models";
 import { CustomScript, DraftField, ScriptType, SortingSetting, TaxonomyType } from "../models";
 import { DataFile } from "../models/DataFile";
@@ -23,35 +23,36 @@ export class DashboardSettings {
     return {
       beta: ext.isBetaVersion(),
       wsFolder: wsFolder ? wsFolder.fsPath : '',
-      staticFolder: Settings.get<string>(SETTINGS_CONTENT_STATIC_FOLDER),
+      staticFolder: Settings.get<string>(SETTING_CONTENT_STATIC_FOLDER),
       folders: Folders.get(),
       initialized: isInitialized,
       tags: Settings.getTaxonomy(TaxonomyType.Tag),
       categories: Settings.getTaxonomy(TaxonomyType.Category),
-      openOnStart: Settings.get(SETTINGS_DASHBOARD_OPENONSTART),
+      openOnStart: Settings.get(SETTING_DASHBOARD_OPENONSTART),
       versionInfo: ext.getVersion(),
       pageViewType: await ext.getState<DashboardViewType | undefined>(ExtensionState.PagesView, "workspace"),
-      mediaSnippet: Settings.get<string[]>(SETTINGS_DASHBOARD_MEDIA_SNIPPET) || [],
+      mediaSnippet: Settings.get<string[]>(SETTING_DASHBOARD_MEDIA_SNIPPET) || [],
       contentTypes: Settings.get(SETTING_TAXONOMY_CONTENT_TYPES) || [],
-      draftField: Settings.get<DraftField>(SETTINGS_CONTENT_DRAFT_FIELD),
-      customSorting: Settings.get<SortingSetting[]>(SETTINGS_CONTENT_SORTING),
+      draftField: Settings.get<DraftField>(SETTING_CONTENT_DRAFT_FIELD),
+      customSorting: Settings.get<SortingSetting[]>(SETTING_CONTENT_SORTING),
       contentFolders: Folders.get(),
-      crntFramework: Settings.get<string>(SETTINGS_FRAMEWORK_ID),
+      crntFramework: Settings.get<string>(SETTING_FRAMEWORK_ID),
       framework: (!isInitialized && wsFolder) ? FrameworkDetector.get(wsFolder.fsPath) : null,
       scripts: (Settings.get<CustomScript[]>(SETTING_CUSTOM_SCRIPTS) || []),
       dashboardState: {
         contents: {
           sorting: await ext.getState<SortingOption | undefined>(ExtensionState.Dashboard.Contents.Sorting, "workspace"),
-          defaultSorting: Settings.get<string>(SETTINGS_CONTENT_SORTING_DEFAULT)
+          defaultSorting: Settings.get<string>(SETTING_CONTENT_SORTING_DEFAULT)
         },
         media: {
           sorting: await ext.getState<SortingOption | undefined>(ExtensionState.Dashboard.Media.Sorting, "workspace"),
-          defaultSorting: Settings.get<string>(SETTINGS_MEDIA_SORTING_DEFAULT),
+          defaultSorting: Settings.get<string>(SETTING_MEDIA_SORTING_DEFAULT),
           selectedFolder: await ext.getState<string | undefined>(ExtensionState.SelectedFolder, "workspace")
         }
       },
       dataFiles: await this.getDataFiles(),
-      dataTypes: Settings.get<DataType[]>(SETTINGS_DATA_TYPES),
+      dataTypes: Settings.get<DataType[]>(SETTING_DATA_TYPES),
+      snippets: Settings.get<DataType[]>(SETTING_CONTENT_SNIPPETS),
       isBacker: await ext.getState<boolean | undefined>(CONTEXT.backer, 'global')
     } as ISettings
   }
@@ -62,8 +63,8 @@ export class DashboardSettings {
    */
   private static async getDataFiles(): Promise<DataFile[]> {
     const wsPath = Folders.getWorkspaceFolder()?.fsPath;
-    const files = Settings.get<DataFile[]>(SETTINGS_DATA_FILES);
-    const folders = Settings.get<DataFolder[]>(SETTINGS_DATA_FOLDERS);
+    const files = Settings.get<DataFile[]>(SETTING_DATA_FILES);
+    const folders = Settings.get<DataFolder[]>(SETTING_DATA_FOLDERS);
 
     let clonedFiles = Object.assign([], files);
     if (folders) {

src/helpers/Extension.ts

@@ -2,7 +2,7 @@ import { existsSync, renameSync } from "fs";
 import { basename, join } from "path";
 import { extensions, Uri, ExtensionContext, window, workspace, commands, ExtensionMode, DiagnosticCollection, languages } from "vscode";
 import { Folders, WORKSPACE_PLACEHOLDER } from "../commands/Folders";
-import { EXTENSION_NAME, GITHUB_LINK, SETTINGS_CONTENT_FOLDERS, SETTINGS_CONTENT_PAGE_FOLDERS, SETTING_DATE_FIELD, SETTING_MODIFIED_FIELD, SETTING_SEO_DESCRIPTION_FIELD, SETTING_TAXONOMY_CONTENT_TYPES, DEFAULT_CONTENT_TYPE_NAME, EXTENSION_BETA_ID, EXTENSION_ID, ExtensionState, DefaultFields, LocalStore, SETTING_TEMPLATES_FOLDER } from "../constants";
+import { EXTENSION_NAME, GITHUB_LINK, SETTING_CONTENT_FOLDERS, SETTING_CONTENT_PAGE_FOLDERS, SETTING_DATE_FIELD, SETTING_MODIFIED_FIELD, SETTING_SEO_DESCRIPTION_FIELD, SETTING_TAXONOMY_CONTENT_TYPES, DEFAULT_CONTENT_TYPE_NAME, EXTENSION_BETA_ID, EXTENSION_ID, ExtensionState, DefaultFields, LocalStore, SETTING_TEMPLATES_FOLDER } from "../constants";
 import { ContentType } from "../models";
 import { Notifications } from "./Notifications";
 import { parseWinPath } from "./parseWinPath";
@@ -137,7 +137,7 @@ export class Extension {
 
     // Migration to version 3.1.0
     if (major < 3 || (major === 3 && minor < 1)) {
-      const folders = Settings.get<any>(SETTINGS_CONTENT_FOLDERS);
+      const folders = Settings.get<any>(SETTING_CONTENT_FOLDERS);
       if (folders && folders.length > 0) {
         const workspace = Folders.getWorkspaceFolder();
         const projectFolder = basename(workspace?.fsPath || "");
@@ -147,7 +147,7 @@ export class Extension {
           path: `${WORKSPACE_PLACEHOLDER}${folder.fsPath.split(projectFolder).slice(1).join('')}`.split('\\').join('/')
         }));
 
-        await Settings.update(SETTINGS_CONTENT_PAGE_FOLDERS, paths);
+        await Settings.update(SETTING_CONTENT_PAGE_FOLDERS, paths);
       }
     }
 

src/helpers/ImageHelper.ts

@@ -5,7 +5,7 @@ import { Field } from '../models';
 import { existsSync } from 'fs';
 import { Folders } from '../commands/Folders';
 import { Settings } from './SettingsHelper';
-import { SETTINGS_CONTENT_STATIC_FOLDER } from '../constants';
+import { SETTING_CONTENT_STATIC_FOLDER } from '../constants';
 import { parseWinPath } from './parseWinPath';
 
 export class ImageHelper {
@@ -51,7 +51,7 @@ export class ImageHelper {
    */
    public static relToAbs(filePath: string, value: string) {
     const wsFolder = Folders.getWorkspaceFolder();
-    const staticFolder = Settings.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
+    const staticFolder = Settings.get<string>(SETTING_CONTENT_STATIC_FOLDER);
 
     const staticPath = join(parseWinPath(wsFolder?.fsPath || ""), staticFolder || "", value);
     const contentFolderPath = filePath ? join(dirname(filePath), value) : null;
@@ -73,7 +73,7 @@ export class ImageHelper {
    */
   public static absToRel(imgValue: string) {
     const wsFolder = Folders.getWorkspaceFolder();
-    const staticFolder = Settings.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
+    const staticFolder = Settings.get<string>(SETTING_CONTENT_STATIC_FOLDER);
 
     let relPath = imgValue || "";
     if (imgValue) {

src/helpers/MediaHelpers.ts

@@ -1,7 +1,7 @@
 import { decodeBase64Image, Extension, MediaLibrary, Notifications, parseWinPath, Settings, Sorting } from ".";
 import { Dashboard } from "../commands/Dashboard";
 import { Folders } from "../commands/Folders";
-import { ExtensionState, HOME_PAGE_NAVIGATION_ID, SETTINGS_CONTENT_STATIC_FOLDER } from "../constants";
+import { ExtensionState, HOME_PAGE_NAVIGATION_ID, SETTING_CONTENT_STATIC_FOLDER } from "../constants";
 import { SortingOption } from "../dashboardWebView/models";
 import { MediaInfo, MediaPaths, SortOrder, SortType } from "../models";
 import { basename, extname, join, parse, dirname } from "path";
@@ -26,7 +26,7 @@ export class MediaHelpers {
    */
   public static async getMedia(page: number = 0, requestedFolder: string = '', sort: SortingOption | null = null) {
     const wsFolder = Folders.getWorkspaceFolder();
-    const staticFolder = Settings.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
+    const staticFolder = Settings.get<string>(SETTING_CONTENT_STATIC_FOLDER);
     const contentFolders = Folders.get();
     const viewData = Dashboard.viewData;
     let selectedFolder = requestedFolder;
@@ -199,7 +199,7 @@ export class MediaHelpers {
    public static async saveFile({fileName, contents, folder}: { fileName: string; contents: string; folder: string | null }) {
     if (fileName && contents) {
       const wsFolder = Folders.getWorkspaceFolder();
-      const staticFolder = Settings.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
+      const staticFolder = Settings.get<string>(SETTING_CONTENT_STATIC_FOLDER);
       const wsPath = wsFolder ? wsFolder.fsPath : "";
       let absFolderPath = join(wsPath, staticFolder || "");
 

src/helpers/PanelSettings.ts

@@ -3,7 +3,7 @@ import { Extension, Settings } from "."
 import { Dashboard } from "../commands/Dashboard"
 import { Preview } from "../commands/Preview"
 import { Template } from "../commands/Template"
-import { CONTEXT, DefaultFields, SETTINGS_CONTENT_DRAFT_FIELD, SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTINGS_DATA_TYPES, SETTINGS_FRAMEWORK_ID, SETTINGS_FRAMEWORK_START, SETTING_AUTO_UPDATE_DATE, SETTING_COMMA_SEPARATED_FIELDS, SETTING_CUSTOM_SCRIPTS, SETTING_DATE_FORMAT, SETTING_PANEL_FREEFORM, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_SLUG_LENGTH, SETTING_SEO_TITLE_LENGTH, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TAXONOMY_CUSTOM, SETTING_TAXONOMY_FIELD_GROUPS, SETTING_TAXONOMY_TAGS } from "../constants"
+import { CONTEXT, DefaultFields, SETTING_CONTENT_DRAFT_FIELD, SETTING_CONTENT_FRONTMATTER_HIGHLIGHT, SETTING_DATA_TYPES, SETTING_FRAMEWORK_ID, SETTING_FRAMEWORK_START, SETTING_AUTO_UPDATE_DATE, SETTING_COMMA_SEPARATED_FIELDS, SETTING_CUSTOM_SCRIPTS, SETTING_DATE_FORMAT, SETTING_PANEL_FREEFORM, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_SLUG_LENGTH, SETTING_SEO_TITLE_LENGTH, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TAXONOMY_CUSTOM, SETTING_TAXONOMY_FIELD_GROUPS, SETTING_TAXONOMY_TAGS } from "../constants"
 import { CustomScript, DataType, DraftField, FieldGroup, PanelSettings as IPanelSettings, ScriptType } from "../models"
 
 export class PanelSettings {
@@ -33,18 +33,18 @@ export class PanelSettings {
       isInitialized: await Template.isInitialized(),
       modifiedDateUpdate: Settings.get(SETTING_AUTO_UPDATE_DATE) || false,
       writingSettingsEnabled: this.isWritingSettingsEnabled() || false,
-      fmHighlighting: Settings.get(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT),
+      fmHighlighting: Settings.get(SETTING_CONTENT_FRONTMATTER_HIGHLIGHT),
       preview: Preview.getSettings(),
       commaSeparatedFields: Settings.get(SETTING_COMMA_SEPARATED_FIELDS) || [],
       contentTypes: Settings.get(SETTING_TAXONOMY_CONTENT_TYPES) || [],
       dashboardViewData: Dashboard.viewData,
-      draftField: Settings.get<DraftField>(SETTINGS_CONTENT_DRAFT_FIELD),
+      draftField: Settings.get<DraftField>(SETTING_CONTENT_DRAFT_FIELD),
       isBacker: await Extension.getInstance().getState<boolean | undefined>(CONTEXT.backer, 'global'),
-      framework: Settings.get<string>(SETTINGS_FRAMEWORK_ID),
+      framework: Settings.get<string>(SETTING_FRAMEWORK_ID),
       commands: {
-        start: Settings.get<string>(SETTINGS_FRAMEWORK_START)
+        start: Settings.get<string>(SETTING_FRAMEWORK_START)
       },
-      dataTypes: Settings.get<DataType[]>(SETTINGS_DATA_TYPES),
+      dataTypes: Settings.get<DataType[]>(SETTING_DATA_TYPES),
       fieldGroups: Settings.get<FieldGroup[]>(SETTING_TAXONOMY_FIELD_GROUPS),
     }
   }

src/helpers/isValidFile.ts

@@ -1,11 +1,11 @@
 import { DEFAULT_FILE_TYPES } from './../constants/DefaultFileTypes';
 import { Settings } from ".";
-import { SETTINGS_CONTENT_SUPPORTED_FILETYPES } from "../constants";
+import { SETTING_CONTENT_SUPPORTED_FILETYPES } from "../constants";
 import { extname } from 'path';
 
 
 export const isValidFile = (fileName: string) => {
-  let supportedFiles = Settings.get<string[]>(SETTINGS_CONTENT_SUPPORTED_FILETYPES) || DEFAULT_FILE_TYPES;
+  let supportedFiles = Settings.get<string[]>(SETTING_CONTENT_SUPPORTED_FILETYPES) || DEFAULT_FILE_TYPES;
   supportedFiles = supportedFiles.map(f => f.startsWith(`.`) ? f : `.${f}`);
 
   // Get the extension of the file path

src/listeners/dashboard/PagesListener.ts

@@ -4,7 +4,7 @@ import { basename, dirname, join } from "path";
 import { commands, FileSystemWatcher, RelativePattern, Uri, workspace } from "vscode";
 import { Dashboard } from "../../commands/Dashboard";
 import { Folders } from "../../commands/Folders";
-import { COMMAND_NAME, DefaultFields, SETTINGS_CONTENT_STATIC_FOLDER, SETTING_DATE_FIELD, SETTING_SEO_DESCRIPTION_FIELD } from "../../constants";
+import { COMMAND_NAME, DefaultFields, SETTING_CONTENT_STATIC_FOLDER, SETTING_DATE_FIELD, SETTING_SEO_DESCRIPTION_FIELD } from "../../constants";
 import { DashboardCommand } from "../../dashboardWebView/DashboardCommand";
 import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
 import { Page } from "../../dashboardWebView/models";
@@ -140,7 +140,7 @@ export class PagesListener extends BaseListener {
       const wsFolder = Folders.getWorkspaceFolder();
       const descriptionField = Settings.get(SETTING_SEO_DESCRIPTION_FIELD) as string || DefaultFields.Description;
       const dateField = Settings.get(SETTING_DATE_FIELD) as string || DefaultFields.PublishingDate;
-      const staticFolder = Settings.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
+      const staticFolder = Settings.get<string>(SETTING_CONTENT_STATIC_FOLDER);
 
       const page: Page = {
         ...article.data,

src/listeners/dashboard/SettingsListener.ts

@@ -1,4 +1,4 @@
-import { SETTINGS_CONTENT_STATIC_FOLDER, SETTINGS_FRAMEWORK_ID } from "../../constants";
+import { SETTING_CONTENT_STATIC_FOLDER, SETTING_FRAMEWORK_ID } from "../../constants";
 import { DashboardCommand } from "../../dashboardWebView/DashboardCommand";
 import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
 import { DashboardSettings, Settings } from "../../helpers";
@@ -54,15 +54,15 @@ export class SettingsListener extends BaseListener {
    * @param frameworkId 
    */
   private static setFramework(frameworkId: string | null) {
-    Settings.update(SETTINGS_FRAMEWORK_ID, frameworkId, true);
+    Settings.update(SETTING_FRAMEWORK_ID, frameworkId, true);
 
     if (frameworkId) {
       const allFrameworks = FrameworkDetector.getAll();
       const framework = allFrameworks.find((f: Framework) => f.name === frameworkId);
       if (framework) {
-        Settings.update(SETTINGS_CONTENT_STATIC_FOLDER, framework.static, true);
+        Settings.update(SETTING_CONTENT_STATIC_FOLDER, framework.static, true);
       } else {
-        Settings.update(SETTINGS_CONTENT_STATIC_FOLDER, "", true);
+        Settings.update(SETTING_CONTENT_STATIC_FOLDER, "", true);
       }
     }
   }

src/listeners/panel/SettingsListener.ts

@@ -1,5 +1,5 @@
 import { commands, workspace } from "vscode";
-import { EXTENSION_BETA_ID, EXTENSION_ID, SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTINGS_FRAMEWORK_START, SETTING_AUTO_UPDATE_DATE, SETTING_PREVIEW_HOST } from "../../constants";
+import { EXTENSION_BETA_ID, EXTENSION_ID, SETTING_CONTENT_FRONTMATTER_HIGHLIGHT, SETTING_FRAMEWORK_START, SETTING_AUTO_UPDATE_DATE, SETTING_PREVIEW_HOST } from "../../constants";
 import { Extension, Settings } from "../../helpers";
 import { PanelSettings } from "../../helpers/PanelSettings";
 import { Command } from "../../panelWebView/Command";
@@ -30,13 +30,13 @@ export class SettingsListener extends BaseListener {
         this.updateSetting(SETTING_AUTO_UPDATE_DATE, msg.data || false);
         break;
       case CommandToCode.updateFmHighlight:
-        this.updateSetting(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, (msg.data !== null && msg.data !== undefined) ? msg.data : false);
+        this.updateSetting(SETTING_CONTENT_FRONTMATTER_HIGHLIGHT, (msg.data !== null && msg.data !== undefined) ? msg.data : false);
         break;
       case CommandToCode.updatePreviewUrl:
         this.updateSetting(SETTING_PREVIEW_HOST, msg.data || "");
         break;
       case CommandToCode.updateStartCommand:
-        this.updateSetting(SETTINGS_FRAMEWORK_START, msg.data || "");
+        this.updateSetting(SETTING_FRAMEWORK_START, msg.data || "");
         break;
     }
   }

src/providers/MarkdownFoldingProvider.ts

@@ -1,7 +1,7 @@
 import { ArticleHelper } from '../helpers';
 import { languages, TextEditorDecorationType } from 'vscode';
 import { CancellationToken, FoldingContext, FoldingRange, FoldingRangeKind, FoldingRangeProvider, Range, TextDocument, window, Position } from 'vscode';
-import { SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTINGS_CONTENT_SUPPORTED_FILETYPES, SETTING_FRONTMATTER_TYPE } from '../constants';
+import { SETTING_CONTENT_FRONTMATTER_HIGHLIGHT, SETTING_CONTENT_SUPPORTED_FILETYPES, SETTING_FRONTMATTER_TYPE } from '../constants';
 import { Settings } from '../helpers';
 import { FrontMatterDecorationProvider } from './FrontMatterDecorationProvider';
 
@@ -12,7 +12,7 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
   private static decType: TextEditorDecorationType | null = null;
 
   public static register() {
-    const supportedFiles = Settings.get<string[]>(SETTINGS_CONTENT_SUPPORTED_FILETYPES);
+    const supportedFiles = Settings.get<string[]>(SETTING_CONTENT_SUPPORTED_FILETYPES);
 
     languages.registerFoldingRangeProvider({ language: 'markdown', scheme: 'file' }, new MarkdownFoldingProvider());
 
@@ -41,7 +41,7 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
 
     const isSupported = ArticleHelper.isMarkdownFile(activeDoc);
     if (isSupported) {
-      const fmHighlight = Settings.get<boolean>(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT);
+      const fmHighlight = Settings.get<boolean>(SETTING_CONTENT_FRONTMATTER_HIGHLIGHT);
 
       const range = this.getFrontMatterRange();