Skip to content
This repository was archived by the owner on Feb 8, 2025. It is now read-only.

Commit fa06bd2

Browse files
fuxinglohfuxingloh
authored
feat(contented-preview): folder type is now part of url (#542)
#### What this PR does / why we need it: As per title.
1 parent 946ff24 commit fa06bd2

File tree

5 files changed

+61
-33
lines changed

5 files changed

+61
-33
lines changed

‎packages/contented-example/contented.config.mjs

+5
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ const config = {
4242
type: 'Lorem',
4343
pattern: ['contented-example-lorem/**/*.md'],
4444
processor: MarkdownPipeline,
45+
transform: (file) => {
46+
file.path = file.path.replaceAll(/^\/contented-example-lorem\/?/g, '/');
47+
file.sections = file.sections.slice(1);
48+
return file;
49+
},
4550
},
4651
{
4752
type: 'Contented',

‎packages/contented-preview/src/pages/[[...slug]].page.jsx ‎packages/contented-preview/src/pages/[type]/[[...slug]].page.jsx

+15-11
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,29 @@ import Head from 'next/head';
66
import { useRouter } from 'next/router';
77
import { useEffect } from 'react';
88

9-
import { Index } from '../../../index.js';
10-
import ContentHeadings from './_components/ContentHeadings';
11-
import ContentNavigation, { computeContentSections } from './_components/ContentNavigation';
12-
import ContentProse from './_components/ContentProse';
13-
import { useMenu } from './_components/MenuContext';
14-
import { useTheme } from './_components/ThemeContext';
9+
import { Index } from '../../../../index.js';
10+
import ContentHeadings from '../_components/ContentHeadings';
11+
import ContentNavigation, { computeContentSections } from '../_components/ContentNavigation';
12+
import ContentProse from '../_components/ContentProse';
13+
import { useMenu } from '../_components/MenuContext';
14+
import { useTheme } from '../_components/ThemeContext';
1515

1616
export async function getStaticPaths() {
1717
return {
18-
paths: ['/', ...Index.map((file) => file.path)],
18+
paths: Index.map((file) => {
19+
return `/${file.type.toLowerCase()}${file.path}`;
20+
}),
1921
fallback: false,
2022
};
2123
}
2224

2325
export async function getStaticProps({ params }) {
2426
const path = `/${params?.slug?.join('/') ?? ''}`;
25-
const ContentIndex = Index.find((file) => file.path === path) ?? Index[0];
26-
const Content = require(`../../../${ContentIndex.type}/${ContentIndex.fileId}.json`);
27-
const TypeCollection = require(`../../../${ContentIndex.type}/index.json`);
27+
const ContentIndex = Index.find((file) => {
28+
return file.path === path && file.type.toLowerCase() === params?.type;
29+
});
30+
const Content = require(`../../../../${ContentIndex.type}/${ContentIndex.fileId}.json`);
31+
const TypeCollection = require(`../../../../${ContentIndex.type}/index.json`);
2832

2933
return {
3034
props: {
@@ -34,7 +38,7 @@ export async function getStaticProps({ params }) {
3438
};
3539
}
3640

37-
export default function SlugPage({ content, sections }) {
41+
export default function IndexPage({ content, sections }) {
3842
const siteTitle = getSiteTitle(content);
3943
const canonicalUrl = `${process.env.CONTENTED_PREVIEW_SITE_URL}${content.path}`;
4044
const description = truncate(content?.description, { length: 220 });

‎packages/contented-preview/src/pages/_components/ContentNavigation.jsx

+27-21
Original file line numberDiff line numberDiff line change
@@ -25,34 +25,40 @@ export default function ContentNavigation({ sections, className }) {
2525
<nav className={className}>
2626
<ul role="list" className="space-y-6 text-[15px]">
2727
{sections.map((section) => {
28-
const path = section.sections.join(' / ');
28+
const folderName = section.sections.join(' / ');
2929
return (
30-
<li key={path}>
31-
{path && <h2 className="font-display mb-3 font-medium text-slate-900/40 dark:text-white/40">{path}</h2>}
30+
<li key={folderName}>
31+
{folderName && (
32+
<h2 className="font-display mb-3 font-medium text-slate-900/40 dark:text-white/40">{folderName}</h2>
33+
)}
3234

3335
<ul
3436
role="list"
3537
className={clsx('mb-3 space-y-3', {
36-
'border-l-2 border-slate-200 dark:border-slate-800': path,
38+
'border-l-2 border-slate-200 dark:border-slate-800': folderName,
3739
})}
3840
>
39-
{section.items?.map((link) => (
40-
<li key={link.path} className="relative">
41-
<Link
42-
href={link.path}
43-
className={clsx({
44-
'block w-full cursor-pointer truncate pl-3 before:pointer-events-none before:absolute before:inset-y-0 before:-left-1 before:w-1':
45-
path,
46-
'font-medium': !path,
47-
'text-primary-500 before:bg-primary-500 font-semibold': link.path === router.asPath,
48-
'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300':
49-
link.path !== router.asPath,
50-
})}
51-
>
52-
{link?.fields.title ?? link.path}
53-
</Link>
54-
</li>
55-
))}
41+
{section.items?.map((link) => {
42+
const linkPath = `/${link.type.toLowerCase()}${link.path}`;
43+
const isCurrentPath = linkPath === router.asPath || router.asPath + '/' === linkPath;
44+
45+
return (
46+
<li key={linkPath} className="relative">
47+
<Link
48+
href={linkPath}
49+
className={clsx({
50+
'block w-full cursor-pointer truncate pl-3.5 before:pointer-events-none before:absolute before:inset-y-0 before:-left-1 before:w-1':
51+
folderName,
52+
'text-primary-500 before:bg-primary-500 font-semibold': isCurrentPath,
53+
'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300':
54+
!isCurrentPath,
55+
})}
56+
>
57+
{link?.fields.title ?? linkPath}
58+
</Link>
59+
</li>
60+
);
61+
})}
5662
</ul>
5763
</li>
5864
);

‎packages/contented-preview/src/pages/_components/Header.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export default function Header() {
4040
throw new PipelineCollectionNotFoundException(type);
4141
}
4242
return (
43-
<Link href={pipeline.collection[0].path} key={type}>
43+
<Link href={`/${type.toLowerCase()}${pipeline.collection[0].path}`} key={type}>
4444
<div
4545
className={clsx(
4646
'rounded px-3 py-2 text-sm font-medium',

‎packages/contented-preview/src/pages/index.page.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Index } from '../../../index.js';
2+
import { useRouter } from 'next/router';
3+
import { useEffect } from 'react';
4+
5+
export default function IndexPage() {
6+
const router = useRouter();
7+
8+
useEffect(() => {
9+
router.replace(`/${Index[0].type.toLowerCase()}${Index[0].path}`);
10+
}, []);
11+
12+
return <></>;
13+
}

0 commit comments

Comments
 (0)