adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-07-05 09:21:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

#653 - Read Astro Content Collections

Browse Source
This commit is contained in:
Elio Struyf
2023-09-21 16:51:08 +02:00
parent 48ee263c27
commit 1128e230c6
31 changed files with 1025 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/dashboardWebView/components/App.tsx
+3
View File
@@ -21,6 +21,7 @@ import { ErrorView } from './ErrorView';
import { DashboardMessage } from '../DashboardMessage';
import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../localization';
import { SettingsView } from './SettingsView/SettingsView';
export interface IAppProps {
showWelcome: boolean;
@@ -133,6 +134,8 @@ Stack: ${componentStack}`
<Route path={routePaths.taxonomy} element={<TaxonomyView pages={pages} />} />
)}
<Route path={routePaths.settings} element={<SettingsView />} />
<Route path={`*`} element={<UnknownView />} />
</Routes>
</main>
src/dashboardWebView/components/Configuration/Astro/AstroContentTypes.tsx
+69
View File
@@ -0,0 +1,69 @@
import * as React from 'react';
import * as l10n from '@vscode/l10n';
import { messageHandler } from '@estruyf/vscode/dist/client';
import { DashboardMessage } from '../../../DashboardMessage';
import { AstroCollection } from '../../../../models';
import { Settings } from '../../../models';
import { SelectItem } from '../../Steps/SelectItem';
import { LocalizationKey } from '../../../../localization';
export interface IAstroContentTypesProps {
settings: Settings
triggerLoading: (isLoading: boolean) => void;
}
export const AstroContentTypes: React.FunctionComponent<IAstroContentTypesProps> = ({
settings,
triggerLoading
}: React.PropsWithChildren<IAstroContentTypesProps>) => {
const [collections, setCollections] = React.useState<AstroCollection[]>([]);
React.useEffect(() => {
triggerLoading(true);
messageHandler.request<AstroCollection[]>(DashboardMessage.ssgGetAstroContentTypes).then((result) => {
triggerLoading(false);
setCollections(result);
});
}, []);
const generateContentType = (collection: AstroCollection) => {
triggerLoading(true);
messageHandler.request(DashboardMessage.ssgSetAstroContentTypes, {
collection
}).then((result) => {
triggerLoading(false);
});
}
if (!collections || collections.length === 0) {
return (
<div className='mt-1'>
{l10n.t(LocalizationKey.dashboardConfigurationAstroAstroContentTypesEmpty)}
</div>
);
}
return (
<div className='mt-1'>
<p>{l10n.t(LocalizationKey.dashboardConfigurationAstroAstroContentTypesDescription)}</p>
<div className='mt-2'>
{
collections.map((collection) => {
const ct = settings.contentTypes.find((c) => c.name === collection.name);
return (
<SelectItem
key={collection.name}
title={collection.name}
buttonTitle={collection.name}
isSelected={ct !== undefined}
onClick={() => generateContentType(collection)}
disabled={ct !== undefined} />
)
})
}
</div>
</div>
);
};
src/dashboardWebView/components/Configuration/Common/ContentFolders.tsx
+50
View File
@@ -0,0 +1,50 @@
import * as React from 'react';
import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../../../localization';
import { Settings } from '../../../models';
import { Folder } from './Folder';
import { Messenger } from '@estruyf/vscode/dist/client';
import { DashboardMessage } from '../../../DashboardMessage';
export interface IContentFoldersProps {
settings: Settings
triggerLoading: (isLoading: boolean) => void;
}
export const ContentFolders: React.FunctionComponent<IContentFoldersProps> = ({
settings
}: React.PropsWithChildren<IContentFoldersProps>) => {
const addFolder = (folder: string) => {
Messenger.send(DashboardMessage.addFolder, folder);
};
return (
<>
<p>
{l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersDescription)}
</p>
{settings?.dashboardState?.welcome?.contentFolders?.length > 0 && (
<div className="mt-4">
<div className="text-sm">{l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersLabel)}</div>
<div className="mt-1 space-y-1">
{settings?.dashboardState?.welcome?.contentFolders?.map((folder: string) => (
<Folder
key={folder}
folder={folder}
addFolder={addFolder}
wsFolder={settings.wsFolder}
folders={settings.contentFolders}
/>
))}
</div>
</div>
)}
<p className={`mt-4`}>
<b>{l10n.t(LocalizationKey.commonInformation)}</b>: {l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersInformationDescription)}.
</p>
</>
);
};
src/dashboardWebView/components/Configuration/Common/Folder.tsx
+34
View File
@@ -0,0 +1,34 @@
import * as React from 'react';
import { join } from 'path';
import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../../../localization';
import { ContentFolder } from '../../../../models';
import { SelectItem } from '../../Steps/SelectItem';
export interface IFolderProps {
wsFolder: string;
folder: string;
folders: ContentFolder[];
addFolder: (folder: string) => void;
}
export const Folder: React.FunctionComponent<IFolderProps> = ({
wsFolder,
folder,
folders,
addFolder
}: React.PropsWithChildren<IFolderProps>) => {
const isAdded = React.useMemo(
() => folders.find((f) => f.path.toLowerCase() === join(wsFolder, folder).toLowerCase()),
[folder, folders, wsFolder]
);
return (
<SelectItem
title={folder}
buttonTitle={l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedButtonAddFolderTitle)}
isSelected={!!isAdded}
onClick={() => addFolder(folder)} />
);
};
src/dashboardWebView/components/Header/Header.tsx
+6 -1
View File
@@ -31,6 +31,7 @@ import { Navigation } from './Navigation';
import { ProjectSwitcher } from './ProjectSwitcher';
import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../../localization';
import { SettingsLink } from '../SettingsView/SettingsLink';
export interface IHeaderProps {
header?: React.ReactNode;
@@ -156,7 +157,11 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({
}`}>
<Tabs onNavigate={updateView} />
<ProjectSwitcher />
<div className='flex'>
<ProjectSwitcher />
<SettingsLink onNavigate={updateView} />
</div>
</div>
{location.pathname === routePaths.contents && (
src/dashboardWebView/components/Header/Tab.tsx
-2
View File
@@ -1,6 +1,5 @@
import * as React from 'react';
import { useLocation } from 'react-router-dom';
import useThemeColors from '../../hooks/useThemeColors';
import { NavigationType } from '../../models';
export interface ITabProps {
@@ -14,7 +13,6 @@ export const Tab: React.FunctionComponent<ITabProps> = ({
children
}: React.PropsWithChildren<ITabProps>) => {
const location = useLocation();
const { getColors } = useThemeColors();
return (
<button
src/dashboardWebView/components/SettingsView/SettingsLink.tsx
+30
View File
@@ -0,0 +1,30 @@
import * as React from 'react';
import { useRecoilValue } from 'recoil';
import { SettingsSelector } from '../../state';
import { CogIcon } from '@heroicons/react/solid';
import { NavigationType } from '../../models';
export interface ISettingsLinkProps {
onNavigate: (navigationType: NavigationType) => void;
}
export const SettingsLink: React.FunctionComponent<ISettingsLinkProps> = ({
onNavigate
}: React.PropsWithChildren<ISettingsLinkProps>) => {
const settings = useRecoilValue(SettingsSelector);
if (!settings) {
return null;
}
return (
<button
className="flex items-center mr-4 hover:text-[var(--vscode-textLink-activeForeground)]"
title={`Settings`}
onClick={() => onNavigate(NavigationType.Settings)}
>
<CogIcon className="h-4 w-4" />
<span className='sr-only'>Settings</span>
</button>
);
};
src/dashboardWebView/components/SettingsView/SettingsView.tsx
+79
View File
@@ -0,0 +1,79 @@
import * as React from 'react';
import { PageLayout } from '../Layout';
import { SponsorMsg } from '../Layout/SponsorMsg';
import { useRecoilValue } from 'recoil';
import { SettingsSelector } from '../../state';
import { Spinner } from '../Common/Spinner';
import { AstroContentTypes } from '../Configuration/Astro/AstroContentTypes';
import { ContentFolders } from '../Configuration/Common/ContentFolders';
import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../../localization';
export interface ISettingsViewProps { }
export const SettingsView: React.FunctionComponent<ISettingsViewProps> = (_: React.PropsWithChildren<ISettingsViewProps>) => {
const [loading, setLoading] = React.useState<boolean>(false);
const settings = useRecoilValue(SettingsSelector);
return (
<PageLayout>
{
loading && <Spinner />
}
{
settings && (
<div className='mx-auto max-w-7xl'>
<h1 className='text-3xl'>{l10n.t(LocalizationKey.commonSettings)}</h1>
<div className='divide-y divide-[var(--frontmatter-border)]'>
{
settings?.crntFramework === 'astro' && (
<div className='py-4'>
<h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentTypes)}</h2>
<AstroContentTypes
settings={settings}
triggerLoading={(isLoading) => setLoading(isLoading)} />
</div>
)
}
<div className='py-4'>
<h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentFolders)}</h2>
<ContentFolders
settings={settings}
triggerLoading={(isLoading) => setLoading(isLoading)} />
</div>
<div className='py-4 space-y-2'>
<h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsDiagnostic)}</h2>
<p>{l10n.t(LocalizationKey.settingsDiagnosticDescription)}</p>
<p>
<a
href={`command:frontMatter.diagnostics`}
title={l10n.t(LocalizationKey.settingsDiagnosticLink)}
className='text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]'
>
{l10n.t(LocalizationKey.settingsDiagnosticLink)}
</a>
</p>
</div>
</div>
</div>
)
}
<SponsorMsg
beta={settings?.beta}
version={settings?.versionInfo}
isBacker={settings?.isBacker}
/>
<img className='hidden' src="https://api.visitorbadge.io/api/visitors?path=https%3A%2F%2Ffrontmatter.codes%2Fmetrics%2Fdashboards&slug=settings" alt="Settings metrics" />
</PageLayout >
);
};
src/dashboardWebView/components/Steps/SelectItem.tsx
+4 -1
View File
@@ -7,6 +7,7 @@ export interface ISelectItemProps {
icon?: "add" | "select";
buttonTitle: string;
isSelected: boolean;
disabled?: boolean;
onClick: () => void;
}
@@ -15,6 +16,7 @@ export const SelectItem: React.FunctionComponent<ISelectItemProps> = ({
icon = "select",
buttonTitle,
isSelected,
disabled,
onClick
}: React.PropsWithChildren<ISelectItemProps>) => {
return (
@@ -23,8 +25,9 @@ export const SelectItem: React.FunctionComponent<ISelectItemProps> = ({
>
<button
onClick={onClick}
className={`mr-2 flex gap-2 items-center hover:text-[var(--vscode-textLink-activeForeground)]`}
className={`mr-2 flex gap-2 items-center hover:text-[var(--vscode-textLink-activeForeground)] disabled:cursor-not-allowed`}
title={buttonTitle}
disabled={disabled}
>
{isSelected ? (
icon === "add" ? (
src/dashboardWebView/components/Steps/Step.tsx
+4 -11
View File
@@ -1,6 +1,5 @@
import { CheckIcon } from '@heroicons/react/outline';
import * as React from 'react';
import useThemeColors from '../../hooks/useThemeColors';
import { Status } from '../../models/Status';
export interface IStepProps {
@@ -18,7 +17,6 @@ export const Step: React.FunctionComponent<IStepProps> = ({
showLine,
onClick
}: React.PropsWithChildren<IStepProps>) => {
const { getColors } = useThemeColors();
const renderChildren = () => {
return (
@@ -30,21 +28,17 @@ export const Step: React.FunctionComponent<IStepProps> = ({
}`}
>
<span
className={`h-2.5 w-2.5 bg-transparent rounded-full ${onClick ? getColors('group-hover:bg-gray-400', 'group-hover:bg-[var(--vscode-button-hoverBackground)]') : ''
className={`h-2.5 w-2.5 bg-transparent rounded-full ${onClick ? 'group-hover:bg-[var(--vscode-button-hoverBackground)]' : ''
}`}
/>
</div>
</div>
)}
{status === Status.Active && (
{(status === Status.Active || status === Status.Optional) && (
<div className="h-9 flex items-center" aria-hidden="true">
<div className={`relative z-10 w-8 h-8 flex items-center justify-center border-2 rounded-full bg-[var(--frontmatter-border)] border-[var(--frontmatter-border)] group-hover:text-[var(--vscode-button-foreground)] group-hover:border-[var(--vscode-button-hoverBackground)]`}>
<span className={`h-2.5 w-2.5 rounded-full ${getColors(
'bg-teal-600',
'bg-[var(--frontmatter-button-background)]'
)
}`} />
<span className={`h-2.5 w-2.5 rounded-full bg-[var(--frontmatter-button-background)]`} />
</div>
</div>
)}
@@ -71,8 +65,7 @@ export const Step: React.FunctionComponent<IStepProps> = ({
<>
{showLine ? (
<div
className={`-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full ${status === Status.Completed ? getColors('bg-teal-600', 'bg-[var(--frontmatter-button-background)]') : getColors('bg-gray-300', 'bg-[var(--frontmatter-border)]')
}`}
className={`-ml-px absolute mt-0.5 top-4 left-4 w-0.5 h-full ${(status === Status.Completed || status === Status.Optional) ? 'bg-[var(--frontmatter-button-background)]' : 'bg-[var(--frontmatter-border)]'}`}
aria-hidden="true"
/>
) : null}
src/dashboardWebView/components/Steps/StepsToGetStarted.tsx
+30 -71
View File
@@ -7,10 +7,9 @@ import { Step } from './Step';
import { useMemo, useState } from 'react';
import { Menu } from '@headlessui/react';
import { MenuItem } from '../Menu';
import { ContentFolder, Framework, StaticFolder, Template } from '../../../models';
import { Framework, StaticFolder, Template } from '../../../models';
import { ChevronDownIcon } from '@heroicons/react/outline';
import { FrameworkDetectors } from '../../../constants/FrameworkDetectors';
import { join } from 'path';
import useThemeColors from '../../hooks/useThemeColors';
import * as l10n from '@vscode/l10n';
import { LocalizationKey } from '../../../localization';
@@ -18,37 +17,13 @@ import { SelectItem } from './SelectItem';
import { Templates } from '../../../constants';
import { TemplateItem } from './TemplateItem';
import { Spinner } from '../Common/Spinner';
import { AstroContentTypes } from '../Configuration/Astro/AstroContentTypes';
import { ContentFolders } from '../Configuration/Common/ContentFolders';
export interface IStepsToGetStartedProps {
settings: Settings;
}
const Folder = ({
wsFolder,
folder,
folders,
addFolder
}: {
wsFolder: string;
folder: string;
folders: ContentFolder[];
addFolder: (folder: string) => void;
}) => {
const isAdded = useMemo(
() => folders.find((f) => f.path.toLowerCase() === join(wsFolder, folder).toLowerCase()),
[folder, folders, wsFolder]
);
return (
<SelectItem
title={folder}
buttonTitle={l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedButtonAddFolderTitle)}
isSelected={!!isAdded}
onClick={() => addFolder(folder)} />
);
};
export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps> = ({
settings
}: React.PropsWithChildren<IStepsToGetStartedProps>) => {
@@ -65,10 +40,6 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
Messenger.send(DashboardMessage.setFramework, framework);
};
const addFolder = (folder: string) => {
Messenger.send(DashboardMessage.addFolder, folder);
};
const addAssetFolder = (folder: string | StaticFolder) => {
Messenger.send(DashboardMessage.addAssetsFolder, folder);
}
@@ -207,13 +178,38 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
</div>
),
show: (crntTemplates || []).length > 0,
status: Status.Active,
status: Status.Optional,
},
{
id: `astro-content-types`,
name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedAstroContentTypesName),
description: (
<AstroContentTypes
settings={settings}
triggerLoading={(isLoading) => setLoading(isLoading)} />
),
show: settings.crntFramework === 'astro' || framework === 'astro',
status: Status.Optional
},
{
id: `welcome-content-folders`,
name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersName),
description: (
<ContentFolders
settings={settings}
triggerLoading={(isLoading) => setLoading(isLoading)} />
),
show: true,
status:
settings.contentFolders && settings.contentFolders.length > 0
? Status.Completed
: Status.NotStarted
},
{
id: `welcome-assets`,
name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedAssetsFolderName),
description: (
<div className='mt-4'>
<div className='mt-1'>
<div className="text-sm">{l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedAssetsFolderDescription)}</div>
<div className="mt-1 space-y-1">
<SelectItem
@@ -239,43 +235,6 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
show: settings.crntFramework === 'astro' || framework === 'astro',
status: settings.initialized && settings.staticFolder && settings.staticFolder !== "/" ? Status.Completed : Status.NotStarted,
},
{
id: `welcome-content-folders`,
name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersName),
description: (
<>
<p>
{l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersDescription)}
</p>
{settings?.dashboardState?.welcome?.contentFolders?.length > 0 && (
<div className="mt-4">
<div className="text-sm">{l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersLabel)}</div>
<div className="mt-1 space-y-1">
{settings?.dashboardState?.welcome?.contentFolders?.map((folder: string) => (
<Folder
key={folder}
folder={folder}
addFolder={addFolder}
wsFolder={settings.wsFolder}
folders={settings.contentFolders}
/>
))}
</div>
</div>
)}
<p className={`mt-4 ${getColors('text-vulcan-300 dark:text-gray-400', '')}`}>
<b>{l10n.t(LocalizationKey.commonInformation)}</b>: {l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedContentFoldersInformationDescription)}.
</p>
</>
),
show: true,
status:
settings.contentFolders && settings.contentFolders.length > 0
? Status.Completed
: Status.NotStarted
},
{
id: `welcome-import`,
name: l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedTagsName),