#301 - Visualize tags on content cards

package.json

@@ -398,6 +398,12 @@
           "markdownDescription": "Specify if you want to open the dashboard when you start VS Code.  [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.dashboard.openonstart)",
           "scope": "Dashboard"
         },
+        "frontMatter.dashboard.contentTags": {
+          "type": "string",
+          "default": "tags",
+          "markdownDescription": "Specify the name of the metadata field that will be used to show the tags on the content card. When empty or null, it will hide the tags from the card. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.dashboard.contenttags)",
+          "scope": "Dashboard"
+        },
         "frontMatter.data.files": {
           "type": "array",
           "default": [],

src/constants/settings.ts

@@ -58,6 +58,7 @@ export const SETTING_CONTENT_SUPPORTED_FILETYPES = "content.supportedFileTypes";
 
 export const SETTING_DASHBOARD_OPENONSTART = "dashboard.openOnStart";
 export const SETTING_DASHBOARD_MEDIA_SNIPPET = "dashboard.mediaSnippet";
+export const SETTING_DASHBOARD_CONTENT_TAGS = "dashboard.contentTags";
 
 export const SETTING_DATA_FILES = "data.files";
 export const SETTING_DATA_FOLDERS = "data.folders";

src/dashboardWebView/components/Contents/Item.tsx

@@ -3,7 +3,7 @@ import { useRecoilValue } from 'recoil';
 import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Page } from '../../models/Page';
-import { ViewSelector } from '../../state';
+import { SettingsSelector, ViewSelector } from '../../state';
 import { DateField } from '../DateField';
 import { Status } from '../Status';
 import { Messenger } from '@estruyf/vscode/dist/client';
@@ -15,11 +15,21 @@ const PREVIEW_IMAGE_FIELD = 'fmPreviewImage';
 
 export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, title, draft, description, type, ...pageData }: React.PropsWithChildren<IItemProps>) => {
   const view = useRecoilValue(ViewSelector);
+  const settings = useRecoilValue(SettingsSelector);
   
   const openFile = () => {
     Messenger.send(DashboardMessage.openFile, fmFilePath);
   };
 
+  const tags: string[] | undefined = React.useMemo(() => {
+    if (!settings?.dashboardState?.contents?.tags) {
+      return undefined;
+    }
+
+    const tagField = settings.dashboardState.contents.tags;
+    return pageData[tagField] || [];
+  }, [settings, pageData]);
+
   if (view === DashboardViewType.Grid) {
     return (
       <li className="relative">
@@ -47,6 +57,22 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
             <h2 className="mt-2 mb-2 font-bold">{title}</h2>
 
             <p className="text-xs text-vulcan-200 dark:text-whisper-800">{description}</p>
+
+            {
+              tags && tags.length > 0 && (
+                <div className="mt-2">
+                  {
+                    tags.map((tag, index) => (
+                      <span 
+                        key={index} 
+                        className="inline-block mr-1 mt-1 text-[#5D561D] dark:text-[#F0ECD0] text-xs">
+                        #{tag}
+                      </span>
+                    ))
+                  }
+                </div>
+              )
+            }
           </div>
         </button>
       </li>

src/dashboardWebView/models/Settings.ts

@@ -34,15 +34,16 @@ export interface Settings {
 }
 
 export interface DashboardState {
-  contents: ViewState;
+  contents: ContentsViewState;
   media: MediaViewState;
 }
 
-export interface ViewState {
+export interface ContentsViewState {
   sorting: SortingOption | null | undefined;
   defaultSorting: string | null | undefined;
+  tags: string | null | undefined;
 }
 
-export interface MediaViewState extends ViewState {
+export interface MediaViewState extends ContentsViewState {
   selectedFolder: string | null | undefined;
 }

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, 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, SETTING_DATE_FORMAT } 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, SETTING_DATE_FORMAT, SETTING_DASHBOARD_CONTENT_TAGS } from "../constants";
 import { DashboardViewType, SortingOption, Settings as ISettings } from "../dashboardWebView/models";
 import { CustomScript, DraftField, ScriptType, Snippets, SortingSetting, TaxonomyType } from "../models";
 import { DataFile } from "../models/DataFile";
@@ -45,7 +45,8 @@ export class DashboardSettings {
       dashboardState: {
         contents: {
           sorting: await ext.getState<SortingOption | undefined>(ExtensionState.Dashboard.Contents.Sorting, "workspace"),
-          defaultSorting: Settings.get<string>(SETTING_CONTENT_SORTING_DEFAULT)
+          defaultSorting: Settings.get<string>(SETTING_CONTENT_SORTING_DEFAULT),
+          tags: Settings.get<string>(SETTING_DASHBOARD_CONTENT_TAGS),
         },
         media: {
           sorting: await ext.getState<SortingOption | undefined>(ExtensionState.Dashboard.Media.Sorting, "workspace"),

src/helpers/Extension.ts

@@ -82,6 +82,13 @@ export class Extension {
     return this.ctx.extension.packageJSON.name;
   }
 
+  /**
+   * Get the displayName of the extension
+   */
+  public get displayName(): string {
+   return this.ctx.extension.packageJSON.displayName;
+ }
+
   /**
    * Returns the extension's version
    */

src/helpers/Logger.ts

@@ -7,8 +7,8 @@ export class Logger {
   private static channel: OutputChannel | null = null; 
 
   private constructor() {
-    const title = Extension.getInstance().title;
-    Logger.channel = window.createOutputChannel(title);
+    const displayName = Extension.getInstance().displayName;
+    Logger.channel = window.createOutputChannel(displayName);
   }
 
   public static getInstance(): Logger {

src/panelWebView/ViewPanel.tsx

@@ -24,6 +24,8 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
     );
   }
 
+  console.log(loading)
+
   if (loading) {
     return (
       <Spinner />