iarv/vscode-front-matter
1
0
Fork 1
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-05-18 07:15:43 +02:00
Code Issues Packages Projects Releases Wiki Activity

#588 - Added support to override card fields

Browse Source
This commit is contained in:
Elio Struyf
2023-05-26 09:01:16 +02:00
parent 4bf661563b
commit 91d6d359d0
4 changed files with 123 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -13,6 +13,7 @@
- [#566](https://github.com/estruyf/vscode-front-matter/issues/566): Keep the panel context on the live preview
- [#568](https://github.com/estruyf/vscode-front-matter/issues/568): Update the preview URL if the slug changes
- [#586](https://github.com/estruyf/vscode-front-matter/issues/586): Allow to specify the content card fields
- [#588](https://github.com/estruyf/vscode-front-matter/issues/588): Added extensibility support to override card fields
### ⚡️ Optimizations
src/dashboardWebView/components/Contents/Item.tsx
+45 -24
View File
@@ -29,7 +29,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
const settings = useRecoilValue(SettingsSelector);
const draftField = useMemo(() => settings?.draftField, [settings]);
const cardFields = useMemo(() => settings?.dashboardState?.contents?.cardFields, [settings?.dashboardState?.contents?.cardFields]);
const { titleHtml, imageHtml, footerHtml } = useExtensibility({
const { titleHtml, descriptionHtml, dateHtml, statusHtml, tagsHtml, imageHtml, footerHtml } = useExtensibility({
fmFilePath,
date,
title,
@@ -162,11 +162,19 @@ export const Item: React.FunctionComponent<IItemProps> = ({
<div className="relative p-4 w-full grow">
<div className={`flex justify-between items-center ${hasDraftOrDate ? `mb-2` : ``}`}>
{
cardFields?.state && draftField && draftField.name && <Status draft={pageData[draftField.name]} />
statusHtml ? (
<div dangerouslySetInnerHTML={{ __html: statusHtml }} />
) : (
cardFields?.state && draftField && draftField.name && <Status draft={pageData[draftField.name]} />
)
}
{
cardFields?.date && <DateField className={`mr-4`} value={date} />
dateHtml ? (
<div className='mr-4' dangerouslySetInnerHTML={{ __html: dateHtml }} />
) : (
cardFields?.date && <DateField className={`mr-4`} value={date} />
)
}
</div>
@@ -179,7 +187,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
<button onClick={openFile} className={`text-left block`}>
{
titleHtml ? titleHtml : (
titleHtml ? (
<div dangerouslySetInnerHTML={{ __html: titleHtml }} />
) : (
<h2 className="mb-2 font-bold">
{escapedTitle}
</h2>
@@ -188,28 +198,39 @@ export const Item: React.FunctionComponent<IItemProps> = ({
</button>
<button onClick={openFile} className={`text-left block`}>
<p className={`text-xs ${getColors('text-vulcan-200 dark:text-whisper-800', 'text-[vara(--vscode-titleBar-activeForeground)]')}`}>{escapedDescription}</p>
{
descriptionHtml ? (
<div dangerouslySetInnerHTML={{ __html: descriptionHtml }} />
) : (
<p className={`text-xs ${getColors('text-vulcan-200 dark:text-whisper-800', 'text-[vara(--vscode-titleBar-activeForeground)]')}`}>{escapedDescription}</p>
)
}
</button>
{tags && tags.length > 0 && (
<div className="mt-2">
{tags.map(
(tag, index) =>
tag && (
<span
key={index}
className={`inline-block mr-1 mt-1 text-xs ${getColors(
`text-[#5D561D] dark:text-[#F0ECD0]`,
`text-[var(--vscode-textPreformat-foreground)]`
)
}`}
>
#{tag}
</span>
)
)}
</div>
)}
{
tagsHtml ? (
<div className="mt-2" dangerouslySetInnerHTML={{ __html: tagsHtml }} />
) : (
tags && tags.length > 0 && (
<div className="mt-2">
{tags.map(
(tag, index) => tag && (
<span
key={index}
className={`inline-block mr-1 mt-1 text-xs ${getColors(
`text-[#5D561D] dark:text-[#F0ECD0]`,
`text-[var(--vscode-textPreformat-foreground)]`
)
}`}
>
#{tag}
</span>
)
)}
</div>
)
)
}
</div>
{
src/dashboardWebView/hooks/useExtensibility.tsx
+76
View File
@@ -9,6 +9,10 @@ export default function useExtensibility(options: {
pageData: any;
}) {
const [titleHtml, setTitleHtml] = useState<string | undefined>(undefined);
const [descriptionHtml, setDescriptionHtml] = useState<string | undefined>(undefined);
const [statusHtml, setStatusHtml] = useState<string | undefined>(undefined);
const [dateHtml, setDateHtml] = useState<string | undefined>(undefined);
const [tagsHtml, setTagsHtml] = useState<string | undefined>(undefined);
const [imageHtml, setImageHtml] = useState<string | undefined>(undefined);
const [footerHtml, setFooterHtml] = useState<string | undefined>(undefined);
@@ -67,10 +71,82 @@ export default function useExtensibility(options: {
}
});
}
if (window.fmExternal.getCardDescription) {
window.fmExternal.getCardDescription(options.fmFilePath, {
fmFilePath: options.fmFilePath,
date: options.date,
title: options.title,
description: options.description,
type: options.type,
...options.pageData
}).then(htmlContent => {
if (htmlContent) {
setDescriptionHtml(htmlContent);
} else {
setDescriptionHtml(undefined);
}
});
}
if (window.fmExternal.getCardDate) {
window.fmExternal.getCardDate(options.fmFilePath, {
fmFilePath: options.fmFilePath,
date: options.date,
title: options.title,
description: options.description,
type: options.type,
...options.pageData
}).then(htmlContent => {
if (htmlContent) {
setDateHtml(htmlContent);
} else {
setDateHtml(undefined);
}
});
}
if (window.fmExternal.getCardStatus) {
window.fmExternal.getCardStatus(options.fmFilePath, {
fmFilePath: options.fmFilePath,
date: options.date,
title: options.title,
description: options.description,
type: options.type,
...options.pageData
}).then(htmlContent => {
if (htmlContent) {
setStatusHtml(htmlContent);
} else {
setStatusHtml(undefined);
}
});
}
if (window.fmExternal.getCardTags) {
window.fmExternal.getCardTags(options.fmFilePath, {
fmFilePath: options.fmFilePath,
date: options.date,
title: options.title,
description: options.description,
type: options.type,
...options.pageData
}).then(htmlContent => {
if (htmlContent) {
setTagsHtml(htmlContent);
} else {
setTagsHtml(undefined);
}
});
}
}, [options]);
return {
titleHtml,
descriptionHtml,
statusHtml,
dateHtml,
tagsHtml,
imageHtml,
footerHtml
};
src/dashboardWebView/index.tsx
+1 -1
View File
@@ -31,7 +31,7 @@ declare global {
getCardFooter: (filePath: string, data: any) => Promise<string | undefined>;
// 8.5.0 extension points
getCardTitle: (filePath: string, data: any) => Promise<string | undefined>;
getcardDescription: (filePath: string, data: any) => Promise<string | undefined>;
getCardDescription: (filePath: string, data: any) => Promise<string | undefined>;
getCardTags: (filePath: string, data: any) => Promise<string | undefined>;
getCardDate: (filePath: string, data: any) => Promise<string | undefined>;
getCardStatus: (filePath: string, data: any) => Promise<string | undefined>;