First tutorial (#5136)

* added example roles page * fixed types, added mdx * added another tutorial, added to navigation and added images * Added file structure * removed code from tutorials, added more tutorial words * added image * updated yarn lock file * Adjust eslint rule. * updated cover image * tweaked nav * updated adminui image * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * added password string to login * added a section to getting started and fixed heading overrides * removed other tutorial so this PR can be merged * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * moved tutorials to top of nav * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * fixed script confusion * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * Update docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx Co-authored-by: Tim Leslie <timl@thinkmill.com.au> * removed installation guide Co-authored-by: Thomas Walker <bladey@me.com> Co-authored-by: Tim Leslie <timl@thinkmill.com.au>
keystonejs · Mar 22, 2021 · 8f17adc · 8f17adc · vercel · Mar 22, 2021
1 parent eff1749
commit 8f17adc
Show file tree

Hide file tree

Showing 10 changed files with 235 additions and 18 deletions.
diff --git a/docs-next/components/Heading.tsx b/docs-next/components/Heading.tsx
@@ -63,20 +63,20 @@ export const H1 = (props: StringOnlyChildren) => (
       letterSpacing: '-0.025em',
       marginTop: 0,
     }}
-    {...props}
     as="h1"
+    {...props}
   />
 );
 export const H2 = (props: StringOnlyChildren) => (
   <Heading
-    {...props}
     css={{
       fontSize: '1.8rem',
       fontWeight: 500,
       letterSpacing: '-0.025em',
       marginTop: 0,
     }}
     as="h2"
+    {...props}
   />
 );
 export const H3 = (props: StringOnlyChildren) => (
@@ -87,8 +87,8 @@ export const H3 = (props: StringOnlyChildren) => (
       letterSpacing: '-0.025em',
       marginTop: 0,
     }}
-    {...props}
     as="h3"
+    {...props}
   />
 );
 

diff --git a/docs-next/components/Navigation.tsx b/docs-next/components/Navigation.tsx
@@ -38,8 +38,12 @@ export const Navigation = () => {
       <NavItem href="/whats-new">What's New</NavItem>
       <NavItem href="/roadmap">Roadmap</NavItem>
       <NavItem href="/faqs">FAQs</NavItem>
+      <Section label="Tutorials">
+        <NavItem href="/tutorials/getting-started-with-create-keystone-next-app">
+          Getting started
+        </NavItem>
+      </Section>
       <Section label="Guides">
-        <NavItem href="/guides/installation">Installation</NavItem>
         <NavItem href="/guides/cli">Command Line</NavItem>
         <NavItem href="/guides/access-control" isPlaceholder>
           Access Control

diff --git a/docs-next/next.config.js b/docs-next/next.config.js
@@ -1,7 +1,8 @@
 const withPreconstruct = require('@preconstruct/next');
 const withPlugins = require('next-compose-plugins');
-const mdxHints = require('./remark-plugins/hints');
 // eslint-disable-next-line import/order
+const mdxHints = require('./remark-plugins/hints');
+const withImages = require('next-images');
 const withMDX = require('@next/mdx')({
   extension: /\.mdx?$/,
   options: {
@@ -11,6 +12,7 @@ const withMDX = require('@next/mdx')({
 
 module.exports = withPlugins([
   withPreconstruct,
+  withImages,
   [withMDX, { pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'] }],
   nextConfig => {
     nextConfig.env = {

diff --git a/docs-next/package.json b/docs-next/package.json
@@ -40,6 +40,7 @@
     "facepaint": "^1.2.1",
     "next": "^10.0.9",
     "next-compose-plugins": "^2.2.1",
+    "next-images": "^1.7.0",
     "postcss": "^8.2.8",
     "prism-react-renderer": "^1.2.0",
     "react": "^17.0.1",

diff --git a/docs-next/pages/guides/installation.mdx b/docs-next/pages/guides/installation.mdx
diff --git a/...ages/tutorials/getting-started-with-create-keystone-next-app/assets/adminui.png b/...ages/tutorials/getting-started-with-create-keystone-next-app/assets/adminui.png
diff --git a/.../pages/tutorials/getting-started-with-create-keystone-next-app/assets/cover.svg b/.../pages/tutorials/getting-started-with-create-keystone-next-app/assets/cover.svg
diff --git a/...torials/getting-started-with-create-keystone-next-app/assets/welcome-screen.png b/...torials/getting-started-with-create-keystone-next-app/assets/welcome-screen.png
diff --git a/docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx b/docs-next/pages/tutorials/getting-started-with-create-keystone-next-app/index.mdx
@@ -0,0 +1,137 @@
+import { Markdown } from '../../../components/Page';
+import Image from 'next/image';
+import Link from 'next/link';
+
+<img
+  src={require('./assets/cover.svg')}
+  alt="A terminal with the output of create-keystone-next-app"
+  style={{
+    margin: '0 -1rem 2rem -1rem',
+    width: 'calc(100% + 2rem)',
+    maxWidth: 'none',
+  }}
+/>
+
+# Getting started with `create-keystone-next-app`
+
+[`create-keystone-next-app`](https://github.com/keystonejs/create-keystone-next-app) is a CLI app that makes it easier for you to get started with Keystone.
+It will generate a couple of files for you and install all the dependencies you need to run the Admin UI and start using the GraphQL API.
+
+## Quick Start
+
+```sh
+yarn create keystone-next-app
+cd my-app
+yarn dev
+```
+
+## Installing your own Keystone instance
+
+Open your preferred shell and make sure you are in the folder you would like to create your new project in.
+`create-keystone-next-app` will generate a new folder with your new Keystone files in it.
+
+### Yarn
+
+Use [`yarn create`](https://classic.yarnpkg.com/en/docs/cli/create/):
+
+```sh
+cd your/path/
+yarn create keystone-next-app
+```
+
+### npm
+
+Use [`npm init`](https://docs.npmjs.com/cli/v7/commands/npm-init):
+
+```sh
+cd your/path/
+npm init keystone-next-app
+```
+
+_(`npm init <initializer>` is available in npm 6+)_
+
+### npx
+
+Use npm's [`npx`](https://docs.npmjs.com/cli/v7/commands/npx):
+
+```sh
+cd your/path/
+npx create-keystone-next-app
+```
+
+_(npx comes with npm 5.2+)_
+
+The CLI will ask you to name your new app and for a way to connect to your database.
+Make sure you have your connection URL ready for your database, e.g. `postgres://localhost/my-app` or `postgres://username:password@localhost/my-app`.
+
+_(If you run into trouble with the database, check out this guide on [Database Setup](https://www.keystonejs.com/quick-start/adapters))_
+
+## Opening your shiny new Admin UI
+
+<Image
+  src={require('./assets/adminui.png')}
+  alt="The AdminUI of Keystone showing the two lists: User and Posts"
+  width={1954}
+  height={764}
+/>
+
+After running `create-keystone-next-app` you can now `cd` into the folder that was created for you and start Keystone.
+
+```sh
+cd my-app
+yarn dev
+```
+
+This will generate the Admin UI pages via [Next.js](https://nextjs.org/) on [http://localhost:3000](http://localhost:3000).
+
+<Image
+  src={require('./assets/welcome-screen.png')}
+  alt="The welcome screen giving you the ability the create a new user to log into the AdminUI"
+  width={1328}
+  height={1020}
+/>
+
+When you visit the Admin UI for the first time you will be presented with a handy screen that asks you to create a user.
+Go ahead and create your first user.
+The email address and password will be used as the login details when you next need to login to the Admin UI.
+
+Once you've created the user you can see your new Keystone Admin UI that comes with two visible lists.
+You can use the Admin UI to explore and interact with the data in your system.
+
+## Output
+
+We now have some files in the newly generated folder. The two most important once you want to get into are `keystone.ts` and `schema.ts`.
+
+```sh
+.
+├── keystone.ts   # The main entry file for Keystone
+├── node_modules  # Your dependencies
+├── package.json  # Your package.json with three scripts prepared for you
+├── schema.ts     # The schema of your data
+├── tsconfig.json # Your typescript config
+└── yarn.lock     # And finally your yarn lock file
+```
+
+## Scripts
+
+The files come with three npm scripts you can run locally.
+
+`dev`
+
+- The `dev` script will run Keystone in development mode.
+  Jump over to [http://localhost:3000](http://localhost:3000) to see your Admin UI.
+
+`build`
+
+- The `build` script will build the project and is required to be run before `start`.
+
+`start`
+
+- The `start` script will run Keystone in production mode.
+
+## Where to next?
+
+- Read more about the Keystone config inside `keystone.ts` over at [System Configuration API](/apis/config).
+- Read more about how you create a database schema for Keystone over at [Schema API](/apis/schema).
+
+export default ({ children }) => <Markdown>{children}</Markdown>;
diff --git a/yarn.lock b/yarn.lock
@@ -7759,7 +7759,7 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-file-loader@^6.2.0:
+file-loader@^6.0.0, file-loader@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
   integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
@@ -11144,7 +11144,7 @@ mime-db@1.46.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.46.0.tgz#6267748a7f799594de3cbc8cde91def349661cee"
   integrity sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==
 
-mime-types@^2.1.12, mime-types@~2.1.19, mime-types@~2.1.24:
+mime-types@^2.1.12, mime-types@^2.1.27, mime-types@~2.1.19, mime-types@~2.1.24:
   version "2.1.29"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.29.tgz#1d4ab77da64b91f5f72489df29236563754bb1b2"
   integrity sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==
@@ -11513,6 +11513,14 @@ next-compose-plugins@^2.2.1:
   resolved "https://registry.yarnpkg.com/next-compose-plugins/-/next-compose-plugins-2.2.1.tgz#020fc53f275a7e719d62521bef4300fbb6fde5ab"
   integrity sha512-OjJ+fV15FXO2uQXQagLD4C0abYErBjyjE0I0FHpOEIB8upw0hg1ldFP6cqHTJBH1cZqy96OeR3u1dJ+Ez2D4Bg==
 
+next-images@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/next-images/-/next-images-1.7.0.tgz#70761ad88543b222d383e139824063c04f1119d6"
+  integrity sha512-7sTjSajbaYStlkl0pYNSUBJD0t6XpH5uE2b9XGrSO9Fh+XLaq10aHP7reEA2f1lBH6D4KTKjFy4S3lNQNVX/lA==
+  dependencies:
+    file-loader "^6.0.0"
+    url-loader "^4.0.0"
+
 next@^10.0.9:
   version "10.0.9"
   resolved "https://registry.yarnpkg.com/next/-/next-10.0.9.tgz#ad5d8e0368fee8363cdfd64d22dfbf71f683ae66"
@@ -16008,6 +16016,15 @@ url-join@^4.0.1:
   resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.1.tgz#b642e21a2646808ffa178c4c5fda39844e12cde7"
   integrity sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==
 
+url-loader@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
+  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
+  dependencies:
+    loader-utils "^2.0.0"
+    mime-types "^2.1.27"
+    schema-utils "^3.0.0"
+
 url-parse-lax@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"