Refactor CSS styles and update navbar

Author: RoelLeijser

browser/create-template/templates/nextjs-site/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
-    "build": "ad-generate ontologies && next build",
+    "build": "next build",
     "start": "next start",
     "lint": "next lint",
     "generate-ontologies": "ad-generate ontologies"

browser/create-template/templates/nextjs-site/src/app/[...slug]/error.tsx

@@ -0,0 +1,45 @@
+import { getCurrentResource } from '@/atomic/getCurrentResource';
+import FullPageView from '@/views/FullPage/FullPageView';
+import { core } from '@tomic/lib';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+type Params = {
+  slug?: string[];
+};
+
+type Props = {
+  params: Promise<Params>;
+  searchParams?: Promise<Record<string, string | string[] | undefined>>;
+};
+
+const fetchResource = async (slug?: string[]) => {
+  const path = slug ? `/${slug.join('/')}` : '/';
+  return await getCurrentResource(path);
+};
+
+export const generateMetadata = async ({
+  params,
+}: Props): Promise<Metadata> => {
+  const slug = (await params).slug;
+  const resource = await fetchResource(slug);
+
+  return {
+    title: resource?.title,
+    description: resource?.get(core.properties.description),
+  };
+};
+
+const Page = async ({ params, searchParams }: Props) => {
+  const slug = (await params).slug;
+  const search = await searchParams;
+  const resource = await fetchResource(slug);
+
+  if (!resource) {
+    return notFound();
+  }
+
+  return <FullPageView subject={resource.subject} searchParams={search} />;
+};
+
+export default Page;

browser/create-template/templates/nextjs-site/src/app/[...slug]/page.tsx

@@ -22,7 +22,3 @@ body {
   margin: 0;
   padding: 0;
 }
-
-p {
-  margin-top: 1em;
-}

browser/create-template/templates/nextjs-site/src/app/[[...slug]]/page.tsx

@@ -5,6 +5,7 @@ import matter from 'gray-matter';
 import html from 'remark-html';
 import { remark } from 'remark';
 import { TextBlock } from '@/ontologies/website';
+import styles from '@/views/Block/TextBlock.module.css';
 
 export const MarkdownContent = ({
   subject,
@@ -20,6 +21,7 @@ export const MarkdownContent = ({
 
   return (
     <div
+      className={styles.wrapper}
       dangerouslySetInnerHTML={{
         __html: resource.loading ? initialContent : processed.toString(),
       }}

browser/create-template/templates/nextjs-site/src/app/globals.css

@@ -22,7 +22,7 @@ const Searchbar = () => {
     } else {
       router.push(`${pathname}?search=${throttledSearch}`);
     }
-  }, [throttledSearch]);
+  }, [throttledSearch, router, pathname]);
 
   return (
     <div className={styles.searchBar}>

browser/create-template/templates/nextjs-site/src/app/page.tsx

@@ -6,10 +6,10 @@
     minmax(calc(var(--theme-size-container-width) / 3 - 4rem), 1fr)
   );
   gap: 1rem;
-}
 
-.wrapper img {
-  aspect-ratio: 1 / 1;
-  object-fit: cover;
-  height: auto;
+  & img {
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    height: auto;
+  }
 }

browser/create-template/templates/nextjs-site/src/components/MarkdownContent.tsx

@@ -1,7 +1,7 @@
 .wrapper {
   max-width: 70ch;
-}
 
-.wrapper > p {
-  margin-top: 1em;
+  & p {
+    margin-top: 1em;
+  }
 }