#966 nextjs example template

browser/.gitignore

@@ -6,6 +6,7 @@ publish
 .husky
 .nohup
 .swc
+.tsup
 */lib
 */dist
 */dev-dist
@@ -26,3 +27,9 @@ data-browser/coverage
 !.yarn/versions
 .DS_Store
 **/.trunk/*
+
+**/tomic-lib-**.tgz
+**/tomic-react-**.tgz
+**/tomic-svelte-**.tgz
+**/tomic-cli-**.tgz
+**/tomic-create-template-**.tgz

browser/CHANGELOG.md

@@ -24,6 +24,11 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - Added `store.preloadResourceTree()` method, see docs for more info.
 - Fix generated ontologies not working in a Next.js server context.
 - SEMI BREAKING CHANGE: When using generated types by cli, @tomic/lib now requires them to be generated by @tomic/cli v0.41.0 or above.
+- Fix types masquerading as esm module in cjs build.
+
+### @tomic/react
+
+- Add cjs build.
 
 ### @tomic/cli
 

browser/Earthfile

@@ -7,6 +7,7 @@ all:
   BUILD +build
   BUILD +test
   BUILD +lint
+  BUILD +lint-package
   BUILD +typedoc
 
 deps:
@@ -18,6 +19,7 @@ deps:
   COPY react/package.json react/.
   COPY svelte/package.json svelte/.
   COPY cli/package.json cli/.
+  COPY create-template/package.json create-template/.
   RUN pnpm install --frozen-lockfile --shamefully-hoist
   COPY . .
 
@@ -30,6 +32,10 @@ lint:
   FROM +deps
   RUN pnpm run lint
 
+lint-package:
+  FROM +deps
+  RUN pnpm run lint-package
+
 build:
   FROM +deps
   RUN pnpm run build

browser/cli/package.json

@@ -1,15 +1,24 @@
 {
   "version": "0.40.0",
   "author": "Polle Pas",
+  "homepage": "https://docs.atomicdata.dev/js-cli",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/atomicdata-dev/atomic-server.git"
+  },
+  "bugs": {
+    "url": "https://github.com/atomicdata-dev/atomic-server/issues"
+  },
   "dependencies": {
     "@tomic/lib": "workspace:*",
     "chalk": "^5.3.0",
+    "get-tsconfig": "^4.8.1",
     "prettier": "3.0.3"
   },
   "devDependencies": {
     "typescript": "^5.6.3"
   },
-  "description": "",
+  "description": "Generate types from Atomic Data ontologies",
   "license": "MIT",
   "name": "@tomic/cli",
   "publishConfig": {
@@ -19,7 +28,8 @@
     "build": "tsc",
     "lint": "eslint ./src --ext .js,.ts",
     "lint-fix": "eslint ./src --ext .js,.ts --fix",
-    "prepublishOnly": "pnpm run build && pnpm run lint-fix",
+    "prepublishOnly": "pnpm run build && pnpm run lint && pnpm run lint-package",
+    "lint-package": "pnpm dlx publint",
     "watch": "tsc --build --watch",
     "start": "pnpm watch",
     "tsc": "pnpm exec tsc --build",

browser/cli/src/generateIndex.ts

@@ -1,5 +1,5 @@
 import { store } from './store.js';
-import { camelCaseify } from './utils.js';
+import { camelCaseify, getExtension } from './utils.js';
 import { atomicConfig } from './config.js';
 
 enum Inserts {
@@ -16,7 +16,7 @@ const TEMPLATE = `
 
 import { registerOntologies } from '${
   // Prevents a circular dependency
-  atomicConfig._ISLIB_ ? '../ontology.js' : Inserts.MODULE_ALIAS
+  atomicConfig._ISLIB_ ? `../ontology${getExtension()}` : Inserts.MODULE_ALIAS
 }';
 
 ${Inserts.IMPORTS}
@@ -57,4 +57,4 @@ export const generateIndex = (
 };
 
 const createImportLine = (name: string) =>
-  `import { ${name} } from './${name}.js';`;
+  `import { ${name} } from './${name}${getExtension()}';`;

browser/cli/src/utils.ts

@@ -1,3 +1,5 @@
+import { getTsconfig } from 'get-tsconfig';
+
 export const camelCaseify = (str: string) =>
   str.replace(/-([a-z])/g, g => {
     return g[1].toUpperCase();
@@ -6,3 +8,8 @@ export const camelCaseify = (str: string) =>
 export const dedupe = <T>(array: T[]): T[] => {
   return Array.from(new Set(array));
 };
+
+export const getExtension = () =>
+  getTsconfig()?.config.compilerOptions?.moduleResolution === 'Bundler'
+    ? ''
+    : '.js';

browser/create-template/package.json

@@ -1,6 +1,14 @@
 {
   "version": "0.40.0",
   "author": "Polle Pas",
+  "homepage": "https://docs.atomicdata.dev/create-template/atomic-template",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/atomicdata-dev/atomic-server.git"
+  },
+  "bugs": {
+    "url": "https://github.com/atomicdata-dev/atomic-server/issues"
+  },
   "dependencies": {
     "@tomic/lib": "workspace:*",
     "chalk": "^5.3.0",
@@ -20,7 +28,8 @@
     "build": "tsc",
     "lint": "eslint ./src --ext .js,.ts",
     "lint-fix": "eslint ./src --ext .js,.ts --fix",
-    "prepublishOnly": "pnpm run build && pnpm run lint-fix",
+    "prepublishOnly": "pnpm run build && pnpm run lint && pnpm run lint-package",
+    "lint-package": "pnpm dlx publint",
     "watch": "tsc --build --watch",
     "start": "pnpm exec tsc --build --watch",
     "tsc": "pnpm exec tsc --build",

browser/create-template/src/templates.ts

@@ -24,6 +24,14 @@ const baseTemplates = {
 
 export const templates = {
   'sveltekit-site': baseTemplates.website,
+  'nextjs-site': {
+    ...baseTemplates.website,
+    generateEnv: ({ serverUrl }) => {
+      const siteSubject = `${serverUrl}/01j5zrevq917dp0wm4p2vnd7nr`;
+
+      return `NEXT_PUBLIC_ATOMIC_SERVER_URL=${serverUrl}\nNEXT_PUBLIC_WEBSITE_RESOURCE=${siteSubject}`;
+    },
+  },
 } satisfies Record<string, BaseTemplate>;
 
 export const isTemplate = (value: string): value is TemplateKey =>

browser/create-template/templates/nextjs-site/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

browser/create-template/templates/nextjs-site/README.md

@@ -0,0 +1,97 @@
+# Atomic Next.js Template
+
+This repository is a [Next.js](https://nextjs.org/) 15 website starter template to be used with [AtomicServer](https://github.com/atomicdata-dev/atomic-server). For specific steps on how to deploy this template, see [DEPLOYING](./README/deploying.md).
+
+## Getting started
+
+This guide assumes you have AtomicServer running on your local machine. If you don't, you can follow the [AtomicServer installation guide](https://docs.atomicdata.dev/atomicserver/installation).
+
+### 1. Create a new project
+
+```bash
+$ npm create @tomic/template my-project -- --template nextjs-site --server-url http://localhost:9883
+$ pnpm create @tomic/template my-project --template nextjs-site --server-url http://localhost:9883
+$ yarn create @tomic/template my-project --template nextjs-site --server-url http://localhost:9883
+```
+
+### 2. Generate ontologies
+
+```bash
+$ cd my-project
+```
+
+```bash
+$ npx ad-generate ontologies
+$ pnpm exec ad-generate ontologies
+$ yarn ad-generate ontologies
+```
+
+After making changes to an ontology you need to re-generate them in your code.
+
+### 3. Start the development server
+
+```bash
+$ npm run dev
+$ pnpm dev
+$ yarn dev
+```
+
+## Structure
+
+Atomic Data resources are rendered by views.
+These views are components that accept a resource as prop and render the data in a certain way.
+For example the `BlogPostFullPage` view renders a `blog-post` resource as a full page.
+
+Oftentimes these views also come with a kind of view selector component that determines what component to render based on the resources class.
+An example of this would be `FullPageView`.
+
+These selector components are great for when a resource can reference another resource without a classtype, meaning it can be any kind of resource.
+For example, the `page` class has a `blocks` property that can reference any type of resource.
+The FullPage view for the `page` class (`PageFullPage`) therefore renders a `BlockView` component that selects the appropriate component to render, i.e. a `TextBlock` or an `ImageGalleryBlock`.
+
+## Deploying
+
+### Deploying to Netlify
+
+#### Prerequisites
+
+- A [Netlify](https://www.netlify.com/) account
+- A Git repository with your template project
+
+#### UI
+
+1. Click on the "Add new site" button and select "Import an existing project".
+2. Choose your Git provider and select the repository where your project is located.
+3. Add the environment variables required by your project
+
+#### CLI
+
+1. Install the Netlify CLI by running `npm install -g netlify-cli`.
+2. Run `netlify login` and log in.
+3. Run `netlify init` and select the repository you want to deploy.
+4. Run `netlify deploy` to deploy the site.
+
+### Deploying to Vercel
+
+#### Prerequisites
+
+- A [Vercel](https://vercel.com/) account
+- A Git repository with your template project
+
+#### UI
+
+1. Click on the "Import Project" button and select the repository where your project is located.
+2. Add the environment variables required by your project.
+
+#### CLI
+
+1. Install the Vercel CLI by running `npm install -g vercel`.
+2. Run `vercel login` and log in.
+3. Run `vercel` and select the repository you want to deploy.
+4. Run `vercel --prod` to deploy the site to production.
+
+## Resources
+
+- [AtomicServer Docs](https://docs.atomicdata.dev/)
+- [Next.js Docs](https://nextjs.org/docs)
+- [Discord](https://discord.gg/a72Rv2P)

browser/create-template/templates/nextjs-site/atomic.config.json

@@ -0,0 +1,4 @@
+{
+  "outputFolder": "./src/ontologies",
+  "ontologies": ["<ONTOLOGY>"]
+}

browser/create-template/templates/nextjs-site/eslint.config.mjs

@@ -0,0 +1,10 @@
+import { FlatCompat } from '@eslint/eslintrc';
+
+const compat = new FlatCompat();
+
+/** @type {import('eslint').ESLint.ConfigData} */
+const eslintConfig = [
+  ...compat.extends('next/core-web-vitals', 'next/typescript'),
+];
+
+export default eslintConfig;

browser/create-template/templates/nextjs-site/next.config.mjs

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: config => {
+    config.resolve.extensionAlias = {
+      '.js': ['.ts', '.tsx', '.js'],
+    };
+
+    return config;
+  },
+};
+
+export default nextConfig;

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

@@ -0,0 +1,35 @@
+{
+  "name": "nextjs-site",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "generate-ontologies": "ad-generate ontologies"
+  },
+  "dependencies": {
+    "@t3-oss/env-nextjs": "^0.11.1",
+    "@tomic/lib": "^0.40.0",
+    "@tomic/react": "^0.40.0",
+    "clsx": "^2.1.1",
+    "gray-matter": "^4.0.3",
+    "modern-css-reset": "^1.4.0",
+    "next": "15.0.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "remark": "^15.0.1",
+    "remark-html": "^16.0.1",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@tomic/cli": "^0.40.0",
+    "@types/node": "^20",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
+    "eslint": "^9.13.0",
+    "eslint-config-next": "15.0.2",
+    "typescript": "^5"
+  }
+}