Added external script loading

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,

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<string[]>(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 {
 
         <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" />
 
-        <script src="${webView.asWebviewUri(
-          Uri.parse(`/Users/eliostruyf/blog/web-eliostruyf-hugo/external.js`)
-        )}" nonce="${nonce}"></script>
+        ${(scriptsToLoad || [])
+          .map((script) => {
+            return `<script type="module" src="${script}" nonce="${nonce}"></script>`;
+          })
+          .join('')}
         <script ${isProd ? `nonce="${nonce}"` : ''} src="${scriptUri}"></script>
       </body>
       </html>

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';

src/dashboardWebView/DashboardMessage.ts

@@ -19,7 +19,6 @@ export enum DashboardMessage {
   searchPages = 'searchPages',
   openFile = 'openFile',
   deleteFile = 'deleteFile',
-  getCustomHtml = 'getCustomHtml',
 
   // Media Dashboard
   getMedia = 'getMedia',

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<string | undefined>;
+      getCardFooter: (filePath: string, data: any) => Promise<string | undefined>;
+    }
+  }
+}
 
 export const Item: React.FunctionComponent<IItemProps> = ({
   fmFilePath,
@@ -81,20 +86,21 @@ export const Item: React.FunctionComponent<IItemProps> = ({
   }, [settings, pageData]);
 
   useEffect(() => {
-    // messageHandler.request<string>(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<IItemProps> = ({
     return (
       <li className="relative">
         <div
-          className={`group flex flex-wrap items-start content-start h-full w-full text-left shadow-md dark:shadow-none hover:shadow-xl border rounded ${getColors(
+          className={`group flex flex-col items-start content-start h-full w-full text-left shadow-md dark:shadow-none hover:shadow-xl border rounded ${getColors(
             'bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 dark:hover:bg-vulcan-100 border-gray-200 dark:border-vulcan-50',
             'bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] text-[var(--vscode-sideBarTitle-foreground)] border-[var(--frontmatter-border)]'
           )
@@ -140,7 +146,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             )}
           </button>
 
-          <div className="relative p-4 w-full">
+          <div className="relative p-4 w-full grow">
             <div className={`flex justify-between items-center`}>
               {draftField && draftField.name && <Status draft={pageData[draftField.name]} />}
 
@@ -181,13 +187,13 @@ export const Item: React.FunctionComponent<IItemProps> = ({
                 )}
               </div>
             )}
-
-            {
-              customHtml && (
-                <div className="mt-2" dangerouslySetInnerHTML={{ __html: customHtml }} />
-              )
-            }
           </div>
+
+          {
+            customHtml && (
+              <div className="placeholder__card__footer p-4 w-full" dangerouslySetInnerHTML={{ __html: customHtml }} />
+            )
+          }
         </div>
       </li>
     );

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: `<div style="margin-top:0.5rem"><img src="https://api.visitorbadge.io/api/combined?path=https%3a%2f%2fwww.eliostruyf.com${encodeURIComponent(slug).replace(/%2F/g, '%2f')}&readonly=true&labelColor=%231E222C&countColor=%23108D94&style=flat-square&label=Views" /></div>`,
-    } as any)
-  }
-
   /**
    * Saved file watcher
    * @returns