Next Template improvements #966

Author: Polleps

browser/CHANGELOG.md

@@ -52,7 +52,9 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 
 ### @tomic/create-template
 
-- [#700](https://github.com/atomicdata-dev/atomic-server/issues/700) Update SvelteKit-site template to Svelte 5.
+- [#700](https://github.com/atomicdata-dev/atomic-server/issues/700) Update SvelteKit-site template to Svelte 5 and the new @tomic/svelte.
+- [#966](https://github.com/atomicdata-dev/atomic-server/issues/966) Add NextJS template.
+- [#993](https://github.com/atomicdata-dev/atomic-server/issues/993) Fix template not working when the drive subject has a path after the origin.
 
 ## [v0.40.0] - 2024-10-07
 

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

@@ -7,6 +7,10 @@ import { remark } from 'remark';
 import { TextBlock } from '@/ontologies/website';
 import styles from '@/views/Block/TextBlock.module.css';
 
+/**
+ * Component that renders markdown content.
+ * It is hydrated on the client and will update whenever the markdown on the server changes.
+ */
 export const MarkdownContent = ({
   subject,
   initialContent,

browser/create-template/templates/nextjs-site/src/components/Navbar.module.css

@@ -1,6 +1,6 @@
 .nav {
   gap: 1rem;
-  padding: 2rem 1rem;
+  padding-block: 2rem;
   border-bottom: 1px solid var(--theme-color-bg-1);
 }
 

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

@@ -34,8 +34,6 @@ const Searchbar = () => {
           src={FaMagnifyingGlass}
           alt='search'
         />
-
-        {styles.hallo}
         <input
           className={styles.input}
           type='search'

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

@@ -1,4 +1,4 @@
-.wrapper {
+.imageGrid {
   width: 100%;
   display: grid;
   grid-template-columns: repeat(

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

@@ -1,13 +1,17 @@
 import { Resource } from '@tomic/lib';
 import { Image } from '@/components/Image';
 import styles from './ImageGalleryBlock.module.css';
+import type { ImageGalleryBlock } from '@/ontologies/website';
 
-const ImageGalleryBlock = async ({ resource }: { resource: Resource }) => {
+const ImageGalleryBlock = async ({
+  resource,
+}: {
+  resource: Resource<ImageGalleryBlock>;
+}) => {
   return (
     <>
-      {resource.props.name ? <h2>{resource.props.name}</h2> : null}
-
-      <div className={styles.wrapper}>
+      {resource.props.name && <h2>{resource.props.name}</h2>}
+      <div className={styles.imageGrid}>
         {resource.props.images?.map((image: string, index: number) => (
           <div key={index} className={styles.image}>
             <Image subject={image} alt='' />

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

@@ -4,4 +4,8 @@
   & p {
     margin-top: 1em;
   }
+
+  & :is(h1, h2, h3, h4, h5, h6) {
+    margin-top: 1rem;
+  }
 }

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

@@ -2,7 +2,7 @@ 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`,
+    `Error: Unable to find a valid page view for the specified class: "${resource.getClasses}". Make sure that the class is correctly matched using matchClass. See documentation for details: https://docs.atomicdata.dev/js-lib/resource.html#resourcematchclass`,
   );
 
   return <p>No supported view for {resource.title}.</p>;

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

@@ -21,6 +21,8 @@ const BlogIndexPageFullPage = async ({
   const allItems = await getAllBlogposts();
   let results: string[] = [];
 
+  // We check if the searchParams have a search query. If so, we search for blogposts that match the query.
+  // If there is no search query, we show all blogposts.
   if (searchParams?.search && typeof searchParams.search === 'string') {
     results = await store.search(searchParams.search, {
       filters: {
@@ -52,7 +54,7 @@ const BlogIndexPageFullPage = async ({
               <Searchbar />
             </Suspense>
           </HStack>
-          {results.length !== 0 ? (
+          {results.length > 0 ? (
             <ul>
               {results.map(post => (
                 <li key={post}>

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

@@ -1,5 +1,14 @@
 .blogWrapper {
   padding: 1rem;
+}
+
+.publishDate {
+  color: var(--theme-color-text-light);
+  margin-bottom: 2rem;
+}
+
+.coverImageWrapper {
+  height: 25rem;
 
   & picture > img {
     width: 100%;
@@ -9,11 +18,6 @@
   }
 }
 
-.blogWrapper > .publishDate {
-  color: var(--theme-color-text-light);
-  margin-bottom: 2rem;
-}
-
 .content {
   max-width: 70ch;
   margin: auto;

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

@@ -8,23 +8,22 @@ import html from 'remark-html';
 import { remark } from 'remark';
 import { MarkdownContent } from '@/components/MarkdownContent';
 
-const BlogpostFullPage = ({ resource }: { resource: Resource<Blogpost> }) => {
-  const formatter = new Intl.DateTimeFormat('default', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  });
+const formatter = new Intl.DateTimeFormat('default', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+});
 
+const BlogpostFullPage = ({ resource }: { resource: Resource<Blogpost> }) => {
   const date = formatter.format(new Date(resource.props.publishedAt));
-
   const matterResult = matter(resource.props.description);
   const processed = remark().use(html).processSync(matterResult.content);
   const initialContent = processed.toString();
 
   return (
     <Container>
       <div className={styles.blogWrapper}>
-        <div style={{ height: '25rem' }}>
+        <div className={styles.coverImageWrapper}>
           <Image subject={resource.props.coverImage} alt='' />
         </div>
         <div className={styles.content}>

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

@@ -3,7 +3,7 @@ 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`,
+    `Error: Unable to find a valid page view for the specified class: "${resource.getClasses}". Make sure that the class is correctly matched using matchClass. See documentation for details: https://docs.atomicdata.dev/js-lib/resource.html?highlight=matchClass#resourcematchclass`,
   );
 
   return (

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

@@ -14,6 +14,7 @@ const FullPageView = async ({
 }) => {
   const resource = await store.getResource(subject);
 
+  // Pick a component based on the resource's class.
   const Component = resource.matchClass(
     {
       [website.classes.page]: PageFullPage,
@@ -23,11 +24,7 @@ const FullPageView = async ({
     DefaultFullPage,
   );
 
-  if (Component === BlogIndexPageFullPage) {
-    return <Component resource={resource} searchParams={searchParams} />;
-  }
-
-  return <Component resource={resource} />;
+  return <Component resource={resource} searchParams={searchParams} />;
 };
 
 export default FullPageView;

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

@@ -1,21 +1,21 @@
 import type { Resource } from '@tomic/lib';
 import BlockView from '../Block/BlockView';
 import { type Page } from '@/ontologies/website';
-import styles from './PageFullPage.module.css';
 import Container from '@/components/Layout/Container';
+import VStack from '@/components/Layout/VStack';
 
 const PageFullPage = ({ resource }: { resource: Resource<Page> }) => {
   const title = resource.title;
 
   return (
     <Container>
-      <div className={styles.wrapper}>
+      <VStack>
         <h1>{title?.toString()}</h1>
 
         {resource.props.blocks?.map(block => (
           <BlockView key={block} subject={block} />
         ))}
-      </div>
+      </VStack>
     </Container>
   );
 };