npm - @keystatic/templates-nextjs - Versions diffs - 0.0.1 - Mend

@keystatic/templates-nextjs 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/CHANGELOG.md +7 -0
package/LICENSE +21 -0
package/README.md +20 -0
package/app/[slug]/layout.tsx +9 -0
package/app/[slug]/page.tsx +27 -0
package/app/keystatic/[[...params]]/page.tsx +3 -0
package/app/keystatic/keystatic.tsx +6 -0
package/app/keystatic/layout.tsx +5 -0
package/app/layout.tsx +11 -0
package/app/page.tsx +26 -0
package/app/reader.ts +4 -0
package/app/styles.css +24 -0
package/keystatic.config.tsx +25 -0
package/next.config.js +4 -0
package/package.json +21 -0
package/pages/api/keystatic/[[...params]].tsx +6 -0
package/posts/first-post.mdoc +6 -0
package/tsconfig.json +27 -0

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,7 @@
+# @keystatic/templates-nextjs
+## 0.0.1
+### Patch Changes
+- 818a4c14: Initial release of the NextJS template package.

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) Thinkmill Labs Pty Ltd
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,20 @@
+# Keystatic in Next.js
+This template shows how you can use Keystatic in a Next.js site that utilises
+the `app` directory.
+To setup:
+```bash
+npm install
+```
+To run:
+```
+npm run dev
+```
+Admin UI: [http://127.0.0.1:3000/keystatic](http://127.0.0.1:3000/keystatic)
+Homepage: [http://localhost:3000](http://localhost:3000)

package/app/[slug]/layout.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import '../styles.css';
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}

package/app/[slug]/page.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import { DocumentRenderer } from '@keystatic/core/renderer';
+import { reader } from '../reader';
+export default async function Post({ params }: { params: { slug: string } }) {
+  const { slug } = params;
+  const post = await reader.collections.posts.read(slug);
+  if (!post) return <div>Post not found!</div>;
+  return (
+    <div>
+      <h1>{post.title}</h1>
+      <div>
+        <DocumentRenderer document={await post.content()} />
+      </div>
+    </div>
+  );
+}
+export async function generateStaticParams() {
+  const slugs = await reader.collections.posts.list();
+  return slugs.map(slug => ({
+    slug,
+  }));
+}

package/app/keystatic/[[...params]]/page.tsx ADDED Viewed

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null;
+}

package/app/keystatic/keystatic.tsx ADDED Viewed

@@ -0,0 +1,6 @@
+'use client';
+import { makePage } from '@keystatic/next/ui/app';
+import config from '../../keystatic.config';
+export default makePage(config);

package/app/keystatic/layout.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import KeystaticApp from './keystatic';
+export default function RootLayout() {
+  return <KeystaticApp />;
+}

package/app/layout.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}

package/app/page.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import { reader } from './reader';
+import './styles.css';
+export default async function Homepage() {
+  const posts = await reader.collections.posts.all();
+  return (
+    <div>
+      <h1>Keystatic ⚡️</h1>
+      <p>This homepage shows how to load a collection from the reader API.</p>
+      <p>
+        <a href="/keystatic">Click here to visit the Admin UI</a>, or the link
+        below to view a post in the collection.
+      </p>
+      <h2>Posts</h2>
+      <ul>
+        {posts.map(post => (
+          <li key={post.slug}>
+            <Link href={`/${post.slug}`}>{post.entry.title}</Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/app/reader.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { createReader } from '@keystatic/core/reader';
+import keystaticConfig from '../keystatic.config';
+export const reader = createReader(process.cwd(), keystaticConfig);

package/app/styles.css ADDED Viewed

@@ -0,0 +1,24 @@
+html {
+  max-width: 70ch;
+  padding: 3rem 1rem;
+  margin: auto;
+  line-height: 1.75;
+  font-size: 1.25rem;
+  font-family: sans-serif;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 1rem 0 1rem;
+}
+p,
+ul,
+ol {
+  margin-bottom: 1rem;
+  color: #1d1d1d;
+}

package/keystatic.config.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import { config, collection, fields } from '@keystatic/core';
+export default config({
+  storage: {
+    kind: 'local',
+  },
+  collections: {
+    posts: collection({
+      label: 'Posts',
+      slugField: 'title',
+      path: 'posts/*',
+      format: { contentField: 'content' },
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        content: fields.document({
+          label: 'Content',
+          formatting: true,
+          dividers: true,
+          links: true,
+          images: true,
+        }),
+      },
+    }),
+  },
+});

package/next.config.js ADDED Viewed

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+module.exports = {
+  reactStrictMode: false,
+};

package/package.json ADDED Viewed

@@ -0,0 +1,21 @@
+{
+  "name": "@keystatic/templates-nextjs",
+  "version": "0.0.1",
+  "license": "MIT",
+  "dependencies": {
+    "@keystatic/core": "^0.0.106",
+    "@keystatic/next": "^0.0.9",
+    "next": "^13.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.8",
+    "typescript": "^5.1.3"
+  },
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "start": "next start"
+  }
+}

package/pages/api/keystatic/[[...params]].tsx ADDED Viewed

@@ -0,0 +1,6 @@
+import config from '../../../keystatic.config';
+import { makeAPIRouteHandler } from '@keystatic/next/api';
+export default makeAPIRouteHandler({
+  config,
+});

package/posts/first-post.mdoc ADDED Viewed

@@ -0,0 +1,6 @@
+---
+title: First post
+---
+First!
+You can edit this page in the [Admin UI](/keystatic/collection/posts/item/first-post), or directly in your IDE at `./posts/first-post.mdoc`.

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "downlevelIteration": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "strictNullChecks": true
+  },
+  "include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}