Pr 25.0.3

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

README.md

@@ -1,65 +1,52 @@
-# Prisma Day 2021 Workshop
+# Keystone Project Starter
 
-This is the sample app built for Jed's Prisma Day 2021 Workshop.
+Welcome to Keystone!
 
-It's both the front and back-end for a Blog built with Prisma, KeystoneJS, GraphQL, Next.js and Tailwind.
+Run
 
-The App includes public auth and signup, role-based access control, and custom design-system based components in the Content field. Content authors can embed Polls in post content, and authenticated visitors can vote on responses.
+```
+yarn dev
+```
 
-## About KeystoneJS
+To view the config for your new app, look at [./keystone.ts](./keystone.ts)
 
-**Keystone 6** is the next-gen CMS for Node.js built with Prisma, Apollo Server, and Next.js.
+This project starter is designed to give you a sense of the power Keystone can offer you, and show off some of its main features. It's also a pretty simple setup if you want to build out from it.
 
-Fully open source, it's not just a great headless CMS, it's also a powerful API server and app back-end.
+We recommend you use this alongside our [getting started walkthrough](https://keystonejs.com/docs/walkthroughs/getting-started-with-create-keystone-app) which will walk you through what you get as part of this starter.
 
-Learn more at [keystonejs.com](https://keystonejs.com)
+If you want an overview of all the features Keystone offers, check out our [features](https://keystonejs.com/why-keystone#features) page.
 
-## Running this app
+## Some Quick Notes On Getting Started
 
-Make sure you have:
+### Changing the database
 
-- Node v12 or v14
-- Yarn
-- Postgres
+We've set you up with an [SQLite database](https://keystonejs.com/docs/apis/config#sqlite) for ease-of-use. If you're wanting to use postgres, you can!
 
-Then, clone this repo and run `yarn` to install the dependencies.
+Just change the `db` property on line 16 of the Keystone file [./keystone.ts](./keystone.ts) to
 
-### Starting the API
+```typescript
+db: {
+    adapter: 'prisma_postgresql',
+    url: process.env.DATABASE_URL || 'DATABASE_URL_TO_REPLACE',
+}
+```
 
-Start the API Server first by running `yarn api:dev`. This will start Keystone's GraphQL API and Admin UI on `localhost:3000`
+And provide your database url from postgres.
 
-The first time you open that link you will be prompted to create a new user.
+For more on database configuration, check out or [db api docs](https://keystonejs.com/docs/apis/config#db)
 
-### Starting the Site
+### Auth
 
-With the API running, in a separate terminal run `yarn site:dev`. This will start the front-end Next.js app on `localhost:8000`
+We've put auth into its own file to make this humble starter easier to navigate. To explore it without auth turned on, comment out the `isAccessAllowed` on line 21 of the keystone file [./keystone.ts](./keystone.ts).
 
-## About the codebase
+For more on auth, check out our [authentication API docs](https://keystonejs.com/docs/apis/auth#authentication-api)
 
-The Keystone and Next.js app are colocated in the same repo for ease of demonstration, but you'd often separate them into different packages in a monorepo or even separate repositories.
+### Adding a frontend
 
-The back-end files include:
+As a Headless CMS, Keystone can be used with any frontend that uses GraphQL. It provides a GraphQL endpoint you can write queries against at `/api/graphql` (by default [http://localhost:3000/api/graphql](http://localhost:3000/api/graphql)). At Thinkmill, we tend to use [Next.js](https://nextjs.org/) and [Apollo graphql](https://www.apollographql.com/docs/react/get-started/) as our frontend and way to write queries, but if you have your own favourite, feel free to use it.
 
-```
-keystone.ts
-schema.graphql (generated)
-schema.prisma (generated)
-schema.ts
-schema/*
-```
-
-The front-end files include:
-
-```
-components/*
-pages/*
-next-env.d.ts
-next.config.js
-postcss.config.js
-tailwind.config.js
-utils.js
-```
+A walkthrough on how to do this is forthcoming, but in the meantime our [todo example](https://github.com/keystonejs/keystone-react-todo-demo) shows a Keystone set up with a frontend. For a more full example, you can also look at an example app we built for [Prisma Day 2021](https://github.com/keystonejs/prisma-day-2021-workshop)
 
-## License
+### Embedding Keystone in a Next.js frontend
 
-Copyright (c) 2021 Thinkmill Labs Pty Ltd. Licensed under the MIT License.
+While Keystone works as a standalone app, you can embed your Keystone app into a [Next.js](https://nextjs.org/) app. This is quite a different setup to the starter, and we recommend checking out our walkthrough for that [here](https://keystonejs.com/docs/walkthroughs/embedded-mode-with-sqlite-nextjs#how-to-embed-keystone-sq-lite-in-a-next-js-app).

keystone.ts

@@ -1,17 +1,21 @@
-import { config } from '@keystone-next/keystone/schema';
+import { config } from '@keystone-next/keystone';
 import { statelessSessions } from '@keystone-next/keystone/session';
 import { createAuth } from '@keystone-next/auth';
-
-import { lists, extendGraphqlSchema } from './schema';
+import { lists, extendGraphqlSchema  } from './schema';
 import { rules } from './schema/access';
 
 const dbUrl =
-  process.env.DATABASE_URL ||
-  `postgres://${process.env.USER}@localhost/prisma-day-workshop`;
+  `postgres://${process.env.POSTGRES_USER}:${process.env.POSTGRES_PASSWORD}@${process.env.POSTGRES_HOST}/keyn_25_0_3`;
 
 const sessionSecret =
-  process.env.SESSION_SECERT ||
-  'iLqbHhm7qwiBNc8KgL4NQ8tD8fFVhNhNqZ2nRdprgnKNjgJHgvitWx6DPoZJpYHa';
+  process.env.SESSION_SECRET ||
+  'iLqbHhm7qwihbsdfjvb87876sdfIUSHSJZ2nRdprgnKNjgJHgvitWx6DPoZJpYHa';
+
+
+
+let sessionMaxAge = 60 * 60 * 24 * 30; // 30 days
+
+
 
 const auth = createAuth({
   identityField: 'email',
@@ -45,8 +49,10 @@ export default auth.withAuth(
     ui: { isAccessAllowed: rules.canUseAdminUI },
     lists,
     session: statelessSessions({
+      maxAge: sessionMaxAge,
       secret: sessionSecret,
     }),
     extendGraphqlSchema,
   })
 );
+

migrations/20211008052137_initial_migrate/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Post" ADD COLUMN     "image_url" TEXT;

next-env.d.ts

@@ -1,3 +1,6 @@
-/// <reference types="next" />
-/// <reference types="next/types/global" />
-/// <reference types="next/image-types/global" />
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,10 +1,16 @@
-module.exports = {
-  async rewrites() {
-    return [
-      {
-        source: '/api/graphql',
-        destination: 'http://localhost:3000/api/graphql',
-      },
-    ];
-  },
-};
+
+
+module.exports = {
+  async rewrites() {
+    return [
+      {
+        source: '/api/graphql',
+        destination: 'http://localhost:3000/api/graphql',
+      },
+    ];
+  },
+  images: {
+    domains: ['picsum.photos'],
+  },
+
+};

package.json

@@ -1,40 +1,45 @@
 {
-  "name": "keystone-react-todo-demo",
-  "version": "1.0.0",
+  "name": "keystone-app",
+  "version": "3.0.0",
   "private": true,
   "scripts": {
+    "clean": "rm -rf node_modules yarn.lock .keystone .next",
     "postinstall": "keystone-next postinstall",
-    "site:dev": "next dev -p 8000",
-    "site:build": "next build",
-    "site:start": "next start -p 8000",
     "dev": "keystone-next dev",
     "start": "keystone-next start",
     "build": "keystone-next build",
     "migrate": "keystone-next prisma migrate deploy",
-    "format": "prettier --write \"**/*.ts\""
+    "format": "prettier --write \"**/*.ts\"",
+    "site:dev": "next dev -p 8000",
+    "site:build": "next build",
+    "site:start": "next start -p 8000"
   },
   "dependencies": {
-    "@keystone-next/auth": "30.0.0",
+    "@keystone-next/auth": "^32.0.0",
     "@keystone-next/document-renderer": "^4.0.0",
-    "@keystone-next/fields": "^13.0.0",
-    "@keystone-next/fields-document": "^7.0.3",
-    "@keystone-next/keystone": "^23.0.1",
+    "@keystone-next/fields-document": "^9.0.0",
+    "@keystone-next/keystone": "^25.0.3",
+    "@types/classnames": "^2.3.1",
+    "@types/react-dom": "^17.0.9",
     "classnames": "^2.3.1",
-    "graphql": "^15.5.1",
-    "next": "^11.0.1",
-    "node-fetch": "^2.6.1",
+    "next": "^11.1.2",
+    "next-images": "^1.8.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "urql": "^2.0.4"
+    "sharp": "^0.29.1",
+    "tailwindcss": "^2.2.16",
+    "urql": "^2.0.5"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.3.3",
-    "@types/react": "17.0.11",
-    "autoprefixer": "^10.3.1",
-    "postcss": "^8.3.5",
-    "prettier": "^2.3.2",
-    "tailwindcss": "^2.2.4",
-    "typescript": "4.3.4"
+    "@tailwindcss/forms": "^0.3.4",
+    "@types/react": "^17.0.27",
+    "autoprefixer": "^10.3.7",
+    "eslint": "7.32.0",
+    "eslint-config-next": "11.1.2",
+    "postcss": "^8.3.9",
+    "prettier": "^2.4.1",
+    "tailwindcss": "^2.2.16",
+    "typescript": "^4.4.3"
   },
   "prettier": {
     "singleQuote": true,

pages/_app.tsx

@@ -1,23 +1,40 @@
 import 'tailwindcss/tailwind.css';
+
 import type { AppProps } from 'next/app';
+import App from 'next/app';
+
 import { createClient, Provider } from 'urql';
 
 import { AuthProvider } from '../components/auth';
 
+
+
+
 export const client = createClient({
   url:
     typeof window === undefined
       ? 'http://localhost:3000/api/graphql'
       : '/api/graphql',
 });
 
-function MyApp({ Component, pageProps }: AppProps) {
-  return (
-    <Provider value={client}>
-      <AuthProvider>
-        <Component {...pageProps} />
+class MyApp extends App {
+  render() {
+    const { Component, pageProps, router } = this.props;
+
+    return (
+
+      <Provider value={client}>      
+      <AuthProvider>  
+
+      <Component {...pageProps} key={router.route} />
+
       </AuthProvider>
-    </Provider>
-  );
+      </Provider>
+
+    );
+  }
 }
+
+
+
 export default MyApp;