#336 - support for draft field invert

CHANGELOG.md

@@ -7,7 +7,8 @@
 - [#330](https://github.com/estruyf/vscode-front-matter/issues/330): Allow custom scripts to easily update front matter
 - [#331](https://github.com/estruyf/vscode-front-matter/issues/331): Added functionality to run other type of scripts
 - [#333](https://github.com/estruyf/vscode-front-matter/issues/333): Automatically mark Jekyll posts in `_drafts` folder as draft
-- [#335](https://github.com/estruyf/vscode-front-matter/issues/331): Merge media snippets with content snippets to allow you to define multiple media snippets and use these in your content
+- [#335](https://github.com/estruyf/vscode-front-matter/issues/335): Merge media snippets with content snippets to allow you to define multiple media snippets and use these in your content
+- [#336](https://github.com/estruyf/vscode-front-matter/issues/336): Support added for inverting the draft field so that SSGs/authors can use a published field instead
 
 ### ⚡️ Optimizations
 

package.json

@@ -137,6 +137,10 @@
               "type": "string",
               "description": "Name of the field to use"
             },
+            "invert": {
+              "type": "boolean",
+              "description": "By default the draft field is set to true when the content is a draft. Set this to true to set it to false."
+            },
             "choices": {
               "type": "array",
               "description": "List of choices for the field",

src/dashboardWebView/components/Contents/Item.tsx

@@ -9,14 +9,16 @@ import { Status } from '../Status';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardViewType } from '../../models';
 import { ContentActions } from './ContentActions';
+import { useMemo } from 'react';
 
 export interface IItemProps extends Page {}
 
 const PREVIEW_IMAGE_FIELD = 'fmPreviewImage';
 
-export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, title, draft, description, type, ...pageData }: React.PropsWithChildren<IItemProps>) => {
+export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, title, description, type, ...pageData }: React.PropsWithChildren<IItemProps>) => {
   const view = useRecoilValue(ViewSelector);
   const settings = useRecoilValue(SettingsSelector);
+  const draftField = useMemo(() => settings?.draftField, [settings]);
   
   const openFile = () => {
     Messenger.send(DashboardMessage.openFile, fmFilePath);
@@ -51,7 +53,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
 
           <div className="relative p-4 w-full">
             <div className={`flex justify-between items-center`}>
-              <Status draft={draft} />
+              {  draftField && draftField.name && <Status draft={pageData[draftField.name]} /> }
 
               <DateField className={`mr-4`} value={date} />
 
@@ -96,7 +98,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
             <DateField value={date} />
           </div>
           <div className="col-span-2">
-            <Status draft={draft} />
+            { draftField && draftField.name && <Status draft={pageData[draftField.name]} /> }
           </div>
         </button>
       </li>

src/dashboardWebView/components/Status.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { SettingsAtom } from '../state';
 
@@ -8,16 +9,30 @@ export interface IStatusProps {
 
 export const Status: React.FunctionComponent<IStatusProps> = ({draft}: React.PropsWithChildren<IStatusProps>) => {
   const settings = useRecoilValue(SettingsAtom);
+  const draftField = useMemo(() => settings?.draftField, [settings]);
+  const draftValue = useMemo(() => {
+    if (draftField && draftField.type === 'choice') {
+      return draft;
+    } else if (draftField && typeof draftField.invert !== 'undefined' && draftField.invert) {
+      return !draft;
+    } else {
+      return draft;
+    }
+  }, [draftField]);
+
+  console.log('draftField', draftField, draft, draftValue);
 
   if (settings?.draftField && settings.draftField.type === "choice") {
-    if (draft) {
-      return <span className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs text-whisper-200 dark:text-vulcan-500 bg-teal-500`}>{draft}</span>;
+    if (draftValue) {
+      return <span className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs text-whisper-200 dark:text-vulcan-500 bg-teal-500`}>{draftValue}</span>;
     } else {
       return null;
     }
   }
 
   return (
-    <span className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs text-whisper-200 dark:text-vulcan-500 ${draft ? "bg-red-500" : "bg-teal-500"}`}>{draft ? "Draft" : "Published"}</span>
+    <span className={`inline-block px-2 py-1 leading-none rounded-sm font-semibold uppercase tracking-wide text-xs text-whisper-200 dark:text-vulcan-500 ${draftValue ? "bg-red-500" : "bg-teal-500"}`}>
+      {draftValue ? "Draft" : "Published"}
+    </span>
   );
 };

src/dashboardWebView/hooks/usePages.tsx

@@ -64,15 +64,19 @@ export default function usePages(pages: Page[]) {
         pagesToShow = searchedPages;
       }
     } else {
+      // Draft field is a boolean field
       const draftFieldName = draftField?.name || "draft";
+
+      const drafts = pagesToShow.filter(page => page[draftFieldName] == true || page[draftFieldName] === "true");
+      const published = pagesToShow.filter(page => page[draftFieldName] == false || page[draftFieldName] === "false" || typeof page[draftFieldName] === "undefined");
       
-      draftTypes[Tab.Draft] = pagesToShow.filter(page => page[draftFieldName] === true || page[draftFieldName] === "true").length;
-      draftTypes[Tab.Published] = pagesToShow.filter(page => page[draftFieldName] === false || page[draftFieldName] === "false").length;
+      draftTypes[Tab.Draft] = draftField?.invert ? published.length : drafts.length;
+      draftTypes[Tab.Published] = draftField?.invert ? drafts.length : published.length;
 
       if (tab === Tab.Published) {
-        pagesToShow = searchedPages.filter(page => !page[draftFieldName]);
+        pagesToShow = draftField?.invert ? drafts : published;
       } else if (tab === Tab.Draft) {
-        pagesToShow = searchedPages.filter(page => !!page[draftFieldName]);
+        pagesToShow = draftField?.invert ? published : drafts;
       } else {
         pagesToShow = searchedPages;
       }

src/models/DraftField.ts

@@ -2,4 +2,5 @@ export interface DraftField {
   name: string;
   type: "boolean" | "choice";
   choices?: string[];
+  invert?: boolean;
 }