update

src/api/content.ts

@@ -4,7 +4,8 @@ import { isIgnoreRequest } from '../utils/filterRequests';
 import { getRequestContext } from '../utils/requestContext';
 import { generateRequestHeaderObject } from './utils/header';
 
-export async function findByPath(req: NextApiRequest, path: string): Promise<Response> {
+// export async function findByPath(req: NextApiRequest, path: string): Promise<Response> {
+  export async function findByPath(path: string): Promise<Response> {
 
   if (!path || (path && isIgnoreRequest(path))) {
     return new Response(null, { "status" : 404 });
@@ -17,13 +18,13 @@ export async function findByPath(req: NextApiRequest, path: string): Promise<Res
     path = path + "/"
   }
 
-  const rq = getRequestContext(req);
+  // const rq = getRequestContext(req);
 
   return fetch(
     `${api.url}/contents/${path}`,
     {
       method: 'GET',
-      headers: generateRequestHeaderObject(rq) as any
+      // headers: generateRequestHeaderObject(rq) as any
     }
   )
 }

src/app/api/qualtet/system/metadata.ts → src/api/metadata.ts

@@ -1,4 +1,4 @@
-import { publicApi } from '../../../../../config';
+import { publicApi } from '../../config';
 
 export default async function GET() {
   return fetch(`${publicApi.url}/system/metadata`, {

src/app/[...slug]/page.tsx

@@ -0,0 +1,52 @@
+import { ContentResponse, Content } from '../../models/content';
+import { findByPath } from '../../api/content';
+import { asInsight } from '../../utils/converters';
+import Renderer from './renderer';
+
+export default async function SlugizedPage(req: any) {
+  const { props } = await get(req);
+  return <Renderer {...props} />;
+}
+
+export async function get(req: any) {
+  let path = req.params.slug.join("/");
+  // TODO move utils & write testcode
+  if (!path.startsWith("/")) {
+    path = "/" + path;
+  }
+  // TODO move utils & write testcode
+  if (path.match(/^\/\d{4}\/\d{2}\/\d{2}\/*/)) {
+    if (!path.endsWith("/")) {
+      path = `${path}/`
+    }
+    return {
+      redirect: {
+        permanent: true,
+        destination: `/articles${path}`
+      }
+    }
+  }
+
+  const response: Response = await findByPath(path);
+  // ctx.res.statusCode = response.status;
+
+  let content: Content = null;
+  if (response.status === 200) {
+    const contentResponse: ContentResponse = await response.json() as ContentResponse;
+    content = {
+      title: contentResponse.title,
+      robotsAttributes: contentResponse.robotsAttributes,
+      externalResources: contentResponse.externalResources,
+      content: contentResponse.content,
+      length: contentResponse.length,
+      publishedAt: contentResponse.publishedAt
+    } as Content
+  }
+  return {
+    props: {
+      statusCode: response.status,
+      content: content,
+      insight: asInsight(response)
+    }
+  }
+}

src/app/[...slug]/renderer.tsx

@@ -0,0 +1,53 @@
+
+import ContentComponent from '../../components/content';
+import CoverWithNavigationComponent from '../../components/cover/withNavigation';
+import HeadMetaComponent from '../../components/headmeta';
+import MainBottomCodesComponent from '../../components/mainBottomCodes';
+import { Content } from '../../models/content';
+import { ScriptCode } from '../../models/script';
+import { getScriptCodes } from '../../utils/scriptTags';
+import { externalResources as externalResourcesConfig } from '../../../config';
+import { Insight } from '../../models/insight';
+import PlanePage from '../../components/planePage';
+
+const Renderer: React.FunctionComponent<{ statusCode: number, content: Content, insight: Insight }> = ({ statusCode, content, insight }) => {
+  if (statusCode !== 200) {
+    return <PlanePage
+      title={statusCode.toString()}
+      content="Something went to wrong..."
+    />
+  }
+
+  let externalResourceCodes: Array<ScriptCode> = [];
+  const hasExternalResources = (content.externalResources && externalResourcesConfig);
+  if (hasExternalResources) {
+    externalResourceCodes = getScriptCodes(content.externalResources, externalResourcesConfig)
+  }
+  return (
+    <>
+      <HeadMetaComponent
+        robotsMeta={content.robotsAttributes}
+        externalResources={content.externalResources}
+        content={content}
+      />
+      <CoverWithNavigationComponent
+        contentCover={{
+          title: content.title,
+          tags: null,
+          publishedAt: content.publishedAt,
+        }}
+      />
+      <main>
+        <ContentComponent
+          content={content}
+          insight={insight}
+        />
+        <MainBottomCodesComponent
+          scriptCodes={externalResourceCodes}
+        />
+      </main>
+    </>
+  )
+}
+
+export default Renderer;

src/app/page.tsx

@@ -15,10 +15,9 @@ export default async function Page() {
   const response: Response = await getArticles(1, 5, getRequestContext(headers()));
   // ctx.res.statusCode = response.status;
 
-  let articlesResponseWithCount: ArticleResponseWithCount = null;
   let articles: Array<Article> = [];
   if (response.status === 200) {
-    articlesResponseWithCount = await response.json() as ArticleResponseWithCount;
+    let articlesResponseWithCount: ArticleResponseWithCount = await response.json() as ArticleResponseWithCount;
     articles = articlesResponseWithCount.articles.map(article => {
       return {
         path: article.path,

src/components/content.tsx

@@ -1,10 +1,12 @@
+'use client';
+
 import { useState } from 'react';
 import { Content, ContentMeta } from '../models/content';
 import { Insight } from '../models/insight';
 import containerStyles from '../styles/components/container.module.scss';
 import contentStyles from '../styles/components/content.module.scss';
 import Accordion from './contentAccordion';
-import handler from '../pages/api/qualtet/system/metadata';
+import handler from '../api/metadata';
 import { appendBackendMeta } from '../utils/converters';
 import { BackendMeta } from '../models/backendMeta';