feat(contented-preview): folder type is now part of url (#542)

#### What this PR does / why we need it: As per title.
fuxingloh · Aug 5, 2023 · fa06bd2 · fa06bd2
1 parent 946ff24
commit fa06bd2
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 33 deletions.
diff --git a/packages/contented-example/contented.config.mjs b/packages/contented-example/contented.config.mjs
@@ -42,6 +42,11 @@ const config = {
         type: 'Lorem',
         pattern: ['contented-example-lorem/**/*.md'],
         processor: MarkdownPipeline,
+        transform: (file) => {
+          file.path = file.path.replaceAll(/^\/contented-example-lorem\/?/g, '/');
+          file.sections = file.sections.slice(1);
+          return file;
+        },
       },
       {
         type: 'Contented',

diff --git a/...ed-preview/src/pages/[[...slug]].page.jsx → ...iew/src/pages/[type]/[[...slug]].page.jsx b/...ed-preview/src/pages/[[...slug]].page.jsx → ...iew/src/pages/[type]/[[...slug]].page.jsx
@@ -6,25 +6,29 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
-import { Index } from '../../../index.js';
-import ContentHeadings from './_components/ContentHeadings';
-import ContentNavigation, { computeContentSections } from './_components/ContentNavigation';
-import ContentProse from './_components/ContentProse';
-import { useMenu } from './_components/MenuContext';
-import { useTheme } from './_components/ThemeContext';
+import { Index } from '../../../../index.js';
+import ContentHeadings from '../_components/ContentHeadings';
+import ContentNavigation, { computeContentSections } from '../_components/ContentNavigation';
+import ContentProse from '../_components/ContentProse';
+import { useMenu } from '../_components/MenuContext';
+import { useTheme } from '../_components/ThemeContext';
 
 export async function getStaticPaths() {
   return {
-    paths: ['/', ...Index.map((file) => file.path)],
+    paths: Index.map((file) => {
+      return `/${file.type.toLowerCase()}${file.path}`;
+    }),
     fallback: false,
   };
 }
 
 export async function getStaticProps({ params }) {
   const path = `/${params?.slug?.join('/') ?? ''}`;
-  const ContentIndex = Index.find((file) => file.path === path) ?? Index[0];
-  const Content = require(`../../../${ContentIndex.type}/${ContentIndex.fileId}.json`);
-  const TypeCollection = require(`../../../${ContentIndex.type}/index.json`);
+  const ContentIndex = Index.find((file) => {
+    return file.path === path && file.type.toLowerCase() === params?.type;
+  });
+  const Content = require(`../../../../${ContentIndex.type}/${ContentIndex.fileId}.json`);
+  const TypeCollection = require(`../../../../${ContentIndex.type}/index.json`);
 
   return {
     props: {
@@ -34,7 +38,7 @@ export async function getStaticProps({ params }) {
   };
 }
 
-export default function SlugPage({ content, sections }) {
+export default function IndexPage({ content, sections }) {
   const siteTitle = getSiteTitle(content);
   const canonicalUrl = `${process.env.CONTENTED_PREVIEW_SITE_URL}${content.path}`;
   const description = truncate(content?.description, { length: 220 });

diff --git a/packages/contented-preview/src/pages/_components/ContentNavigation.jsx b/packages/contented-preview/src/pages/_components/ContentNavigation.jsx
@@ -25,34 +25,40 @@ export default function ContentNavigation({ sections, className }) {
     <nav className={className}>
       <ul role="list" className="space-y-6 text-[15px]">
         {sections.map((section) => {
-          const path = section.sections.join(' / ');
+          const folderName = section.sections.join(' / ');
           return (
-            <li key={path}>
-              {path && <h2 className="font-display mb-3 font-medium text-slate-900/40 dark:text-white/40">{path}</h2>}
+            <li key={folderName}>
+              {folderName && (
+                <h2 className="font-display mb-3 font-medium text-slate-900/40 dark:text-white/40">{folderName}</h2>
+              )}
 
               <ul
                 role="list"
                 className={clsx('mb-3 space-y-3', {
-                  'border-l-2 border-slate-200 dark:border-slate-800': path,
+                  'border-l-2 border-slate-200 dark:border-slate-800': folderName,
                 })}
               >
-                {section.items?.map((link) => (
-                  <li key={link.path} className="relative">
-                    <Link
-                      href={link.path}
-                      className={clsx({
-                        'block w-full cursor-pointer truncate pl-3 before:pointer-events-none before:absolute before:inset-y-0 before:-left-1 before:w-1':
-                          path,
-                        'font-medium': !path,
-                        'text-primary-500 before:bg-primary-500 font-semibold': link.path === router.asPath,
-                        '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':
-                          link.path !== router.asPath,
-                      })}
-                    >
-                      {link?.fields.title ?? link.path}
-                    </Link>
-                  </li>
-                ))}
+                {section.items?.map((link) => {
+                  const linkPath = `/${link.type.toLowerCase()}${link.path}`;
+                  const isCurrentPath = linkPath === router.asPath || router.asPath + '/' === linkPath;
+
+                  return (
+                    <li key={linkPath} className="relative">
+                      <Link
+                        href={linkPath}
+                        className={clsx({
+                          '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':
+                            folderName,
+                          'text-primary-500 before:bg-primary-500 font-semibold': isCurrentPath,
+                          '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':
+                            !isCurrentPath,
+                        })}
+                      >
+                        {link?.fields.title ?? linkPath}
+                      </Link>
+                    </li>
+                  );
+                })}
               </ul>
             </li>
           );

diff --git a/packages/contented-preview/src/pages/_components/Header.jsx b/packages/contented-preview/src/pages/_components/Header.jsx
@@ -40,7 +40,7 @@ export default function Header() {
                     throw new PipelineCollectionNotFoundException(type);
                   }
                   return (
-                    <Link href={pipeline.collection[0].path} key={type}>
+                    <Link href={`/${type.toLowerCase()}${pipeline.collection[0].path}`} key={type}>
                       <div
                         className={clsx(
                           'rounded px-3 py-2 text-sm font-medium',

diff --git a/packages/contented-preview/src/pages/index.page.jsx b/packages/contented-preview/src/pages/index.page.jsx
@@ -0,0 +1,13 @@
+import { Index } from '../../../index.js';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+export default function IndexPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace(`/${Index[0].type.toLowerCase()}${Index[0].path}`);
+  }, []);
+
+  return <></>;
+}