diff --git a/package.json b/package.json index 0ad69900..de943543 100644 --- a/package.json +++ b/package.json @@ -96,6 +96,14 @@ "configuration": { "title": "Front Matter: use frontmatter.json for shared team settings", "properties": { + "frontMatter.extensibility.scripts": { + "type": "array", + "markdownDescription": "Specify the list of scripts to load in the Front Matter CMS. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.extensibility.scripts)", + "default": [], + "items": { + "type": "string" + } + }, "frontMatter.experimental": { "type": "boolean", "default": false, diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts index 6e3034a4..af5141d9 100644 --- a/src/commands/Dashboard.ts +++ b/src/commands/Dashboard.ts @@ -2,10 +2,11 @@ import { SETTING_DASHBOARD_OPENONSTART, CONTEXT, ExtensionState, - SETTING_EXPERIMENTAL + SETTING_EXPERIMENTAL, + SETTING_EXTENSIBILITY_SCRIPTS } from '../constants'; import { join } from 'path'; -import { commands, Uri, ViewColumn, Webview, WebviewPanel, window } from 'vscode'; +import { commands, Uri, ViewColumn, Webview, WebviewPanel, window, workspace } from 'vscode'; import { Logger, Settings as SettingsHelper } from '../helpers'; import { DashboardCommand } from '../dashboardWebView/DashboardCommand'; import { Extension } from '../helpers/Extension'; @@ -25,6 +26,7 @@ import { } from '../listeners/dashboard'; import { MediaListener as PanelMediaListener } from '../listeners/panel'; import { GitListener, ModeListener } from '../listeners/general'; +import { Folders } from './Folders'; export class Dashboard { private static webview: WebviewPanel | null = null; @@ -227,6 +229,18 @@ export class Dashboard { // Get experimental setting const experimental = SettingsHelper.get(SETTING_EXPERIMENTAL); + const extensibilityScripts = SettingsHelper.get(SETTING_EXTENSIBILITY_SCRIPTS) || []; + + const scriptsToLoad: string[] = []; + for (const script of extensibilityScripts) { + if (script.startsWith('https://')) { + scriptsToLoad.push(script); + } else { + const absScriptPath = Folders.getAbsFilePath(script); + const scriptUri = webView.asWebviewUri(Uri.file(absScriptPath)); + scriptsToLoad.push(scriptUri.toString()); + } + } const csp = [ `default-src 'none';`, @@ -267,9 +281,11 @@ export class Dashboard { Daily usage - + ${(scriptsToLoad || []) + .map((script) => { + return ``; + }) + .join('')} diff --git a/src/constants/settings.ts b/src/constants/settings.ts index 4afd4752..1d4b8e80 100644 --- a/src/constants/settings.ts +++ b/src/constants/settings.ts @@ -4,6 +4,8 @@ export const CONFIG_KEY = 'frontMatter'; export const SETTING_EXPERIMENTAL = 'experimental'; +export const SETTING_EXTENSIBILITY_SCRIPTS = 'extensibility.scripts'; + export const SETTING_EXTENDS = 'extends'; export const SETTING_GLOBAL_NOTIFICATIONS = 'global.notifications'; diff --git a/src/dashboardWebView/DashboardMessage.ts b/src/dashboardWebView/DashboardMessage.ts index de8e6074..66539608 100644 --- a/src/dashboardWebView/DashboardMessage.ts +++ b/src/dashboardWebView/DashboardMessage.ts @@ -19,7 +19,6 @@ export enum DashboardMessage { searchPages = 'searchPages', openFile = 'openFile', deleteFile = 'deleteFile', - getCustomHtml = 'getCustomHtml', // Media Dashboard getMedia = 'getMedia', diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx index 040a945f..5a4e91ce 100644 --- a/src/dashboardWebView/components/Contents/Item.tsx +++ b/src/dashboardWebView/components/Contents/Item.tsx @@ -17,9 +17,14 @@ export interface IItemProps extends Page { } const PREVIEW_IMAGE_FIELD = 'fmPreviewImage'; -declare const fmExternal: { - getCardHtml: (filePath: string, data: any) => string | undefined; -}; +declare global { + interface Window { + fmExternal: { + getCardImage(filePath: string, data: any): Promise; + getCardFooter: (filePath: string, data: any) => Promise; + } + } +} export const Item: React.FunctionComponent = ({ fmFilePath, @@ -81,20 +86,21 @@ export const Item: React.FunctionComponent = ({ }, [settings, pageData]); useEffect(() => { - // messageHandler.request(DashboardMessage.getCustomHtml, { - // path: fmFilePath, - // data: pageData, - // }).then((html) => { - // setCustomHtml(html || ""); - // }); - - if (fmExternal && fmExternal.getCardHtml) { - const data = fmExternal.getCardHtml(fmFilePath, pageData); - if (data) { - setCustomHtml(data); - } else { - setCustomHtml(undefined); - } + if (window.fmExternal && window.fmExternal.getCardFooter) { + window.fmExternal.getCardFooter(fmFilePath, { + fmFilePath, + date, + title, + description, + type, + ...pageData + }).then(htmlContent => { + if (htmlContent) { + setCustomHtml(htmlContent); + } else { + setCustomHtml(undefined); + } + }); } }, []); @@ -102,7 +108,7 @@ export const Item: React.FunctionComponent = ({ return (
  • = ({ )} -
    +
    {draftField && draftField.name && } @@ -181,13 +187,13 @@ export const Item: React.FunctionComponent = ({ )}
    )} - - { - customHtml && ( -
    - ) - }
    + + { + customHtml && ( +
    + ) + }
    • ); diff --git a/src/listeners/dashboard/PagesListener.ts b/src/listeners/dashboard/PagesListener.ts index bdca5746..b831c891 100644 --- a/src/listeners/dashboard/PagesListener.ts +++ b/src/listeners/dashboard/PagesListener.ts @@ -47,30 +47,9 @@ export class PagesListener extends BaseListener { case DashboardMessage.deleteFile: this.deletePage(msg.payload); break; - case DashboardMessage.getCustomHtml: - const message = msg as any; - this.getCustomCardHtml(message.command, message.requestId, message.payload); - break; } } - private static async getCustomCardHtml(command: string, requestId: string, payload: any) { - if (!command || !requestId || !payload) { - return; - } - - const slug = payload.data.slug; - if (!slug) { - return; - } - - Dashboard.postWebviewMessage({ - command, - requestId, - payload: `
    `, - } as any) - } - /** * Saved file watcher * @returns