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;
+  }
 }

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

@@ -1,6 +1,10 @@
 import { Resource } from '@tomic/react';
 
 const DefaultView = async ({ resource }: { resource: Resource }) => {
+  console.error(
+    `Error: Unable to find a valid page view for the specified class: "${resource.getClasses}". Please ensure that the class is correctly matched using matchClass. See documentation for details: https://docs.atomicdata.dev/js-lib/resource.html?highlight=matchClass#resourcematchclass`,
+  );
+
   return <p>No supported view for {resource.title}.</p>;
 };
 

browser/create-template/templates/nextjs-site/src/views/Block/ImageGalleryBlock.module.css

@@ -16,9 +16,7 @@ const BlogIndexPageFullPage = async ({
   searchParams,
 }: {
   resource: Resource<Page>;
-  searchParams?: {
-    [key: string]: Record<string, string | string[] | undefined>;
-  };
+  searchParams?: Record<string, string | string[] | undefined>;
 }) => {
   const allItems = await getAllBlogposts();
   let results: string[] = [];

browser/create-template/templates/nextjs-site/src/views/Block/TextBlock.module.css

@@ -1,15 +1,15 @@
 .blogWrapper {
   padding: 1rem;
-}
 
-.blogWrapper > picture > img {
-  width: 100%;
-  height: 25rem;
-  object-fit: cover;
-  border-radius: var(--theme-border-radius);
+  & picture > img {
+    width: 100%;
+    height: 25rem;
+    object-fit: cover;
+    border-radius: var(--theme-border-radius);
+  }
 }
 
-.publishDate {
+.blogWrapper > .publishDate {
   color: var(--theme-color-text-light);
   margin-bottom: 2rem;
 }

browser/create-template/templates/nextjs-site/src/views/DefaultView.tsx

@@ -2,6 +2,10 @@ import Container from '@/components/Layout/Container';
 import { Resource } from '@tomic/lib';
 
 const DefaultFullPage = async ({ resource }: { resource: Resource }) => {
+  console.error(
+    `Error: Unable to find a valid page view for the specified class: "${resource.getClasses}". Please ensure that the class is correctly matched using matchClass. See documentation for details: https://docs.atomicdata.dev/js-lib/resource.html?highlight=matchClass#resourcematchclass`,
+  );
+
   return (
     <Container>
       <h1>{resource.title}</h1>

browser/create-template/templates/nextjs-site/src/views/FullPage/BlogIndexPageFullPage.tsx

@@ -10,9 +10,7 @@ const FullPageView = async ({
   searchParams,
 }: {
   subject: string;
-  searchParams?: {
-    [key: string]: Record<string, string | string[] | undefined>;
-  };
+  searchParams?: Record<string, string | string[] | undefined>;
 }) => {
   const resource = await store.getResource(subject);
 

browser/create-template/templates/nextjs-site/src/views/FullPage/BlogpostFullPage.module.css

@@ -3,8 +3,8 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-}
 
-.wrapper > h1 {
-  margin: 0;
+  & h1 {
+    margin: 0;
+  }
 }

browser/create-template/templates/nextjs-site/src/views/FullPage/DefaultFullPage.tsx

@@ -6,53 +6,53 @@
   border: 1px solid var(--border-color);
   border-radius: var(--theme-border-radius);
   overflow: clip;
-}
-
-.card img {
-  aspect-ratio: 21 / 9;
-  object-fit: cover;
-  transition: transform 300ms ease-in-out;
-  height: auto;
-}
-
-.card:hover {
-  border-color: var(--theme-color-accent);
-}
-
-.card:hover img {
-  transform: scale(1.1);
-}
-
-.publishDate {
-  color: var(--theme-color-text-light);
-}
-
-.imageWrapper {
-  aspect-ratio: 21 / 9;
-  overflow: clip;
-}
-
-.cardContent {
-  padding: 1rem;
-  height: 15rem;
-  overflow: clip;
-  position: relative;
-}
-
-.cardContent::after {
-  content: '';
-  pointer-events: none;
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(0deg, white 0%, transparent 100%);
-}
-
-.h2 {
-  font-size: 1.2rem;
-  margin: 0;
-  text-wrap: balance;
-}
 
-.p {
-  color: black;
+  & img {
+    aspect-ratio: 21 / 9;
+    object-fit: cover;
+    transition: transform 300ms ease-in-out;
+    height: auto;
+  }
+
+  &:hover {
+    border-color: var(--theme-color-accent);
+
+    & img {
+      transform: scale(1.1);
+    }
+  }
+
+  .publishDate {
+    color: var(--theme-color-text-light);
+  }
+
+  .imageWrapper {
+    aspect-ratio: 21 / 9;
+    overflow: clip;
+  }
+
+  .cardContent {
+    padding: 1rem;
+    height: 15rem;
+    overflow: clip;
+    position: relative;
+
+    &::after {
+      content: '';
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(0deg, white 0%, transparent 100%);
+    }
+  }
+
+  .h2 {
+    font-size: 1.2rem;
+    margin: 0;
+    text-wrap: balance;
+  }
+
+  .p {
+    color: black;
+  }
 }