From cb93370f59a784b61138464fee3a149a34332431 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Wed, 30 Mar 2022 09:53:30 +0200 Subject: [PATCH] #301 - Visualize tags on content cards --- package.json | 6 ++++ src/constants/settings.ts | 1 + .../components/Contents/Item.tsx | 28 ++++++++++++++++++- src/dashboardWebView/models/Settings.ts | 7 +++-- src/helpers/DashboardSettings.ts | 5 ++-- src/helpers/Extension.ts | 7 +++++ src/helpers/Logger.ts | 4 +-- src/panelWebView/ViewPanel.tsx | 2 ++ 8 files changed, 52 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index cc8c7aff..ac43de6e 100644 --- a/package.json +++ b/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": [], diff --git a/src/constants/settings.ts b/src/constants/settings.ts index bf04633d..d00136a9 100644 --- a/src/constants/settings.ts +++ b/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"; diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx index 05b8b6d4..15fc1c40 100644 --- a/src/dashboardWebView/components/Contents/Item.tsx +++ b/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 = ({ fmFilePath, date, title, draft, description, type, ...pageData }: React.PropsWithChildren) => { 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 (
  • @@ -47,6 +57,22 @@ export const Item: React.FunctionComponent = ({ fmFilePath, date, ti

    {title}

    {description}

    + + { + tags && tags.length > 0 && ( +
    + { + tags.map((tag, index) => ( + + #{tag} + + )) + } +
    + ) + }
    • diff --git a/src/dashboardWebView/models/Settings.ts b/src/dashboardWebView/models/Settings.ts index af1e52e1..b54740e6 100644 --- a/src/dashboardWebView/models/Settings.ts +++ b/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; } \ No newline at end of file diff --git a/src/helpers/DashboardSettings.ts b/src/helpers/DashboardSettings.ts index bc966717..ea00cc01 100644 --- a/src/helpers/DashboardSettings.ts +++ b/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(ExtensionState.Dashboard.Contents.Sorting, "workspace"), - defaultSorting: Settings.get(SETTING_CONTENT_SORTING_DEFAULT) + defaultSorting: Settings.get(SETTING_CONTENT_SORTING_DEFAULT), + tags: Settings.get(SETTING_DASHBOARD_CONTENT_TAGS), }, media: { sorting: await ext.getState(ExtensionState.Dashboard.Media.Sorting, "workspace"), diff --git a/src/helpers/Extension.ts b/src/helpers/Extension.ts index a53b040f..ad445e75 100644 --- a/src/helpers/Extension.ts +++ b/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 */ diff --git a/src/helpers/Logger.ts b/src/helpers/Logger.ts index 18de1796..42a8ed9c 100644 --- a/src/helpers/Logger.ts +++ b/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 { diff --git a/src/panelWebView/ViewPanel.tsx b/src/panelWebView/ViewPanel.tsx index 65166620..ce67a5f2 100644 --- a/src/panelWebView/ViewPanel.tsx +++ b/src/panelWebView/ViewPanel.tsx @@ -24,6 +24,8 @@ export const ViewPanel: React.FunctionComponent = (props: React ); } + console.log(loading) + if (loading) { return (