diff --git a/examples/blog/README.md b/examples/blog/README.md index cdfe04a9603..fa9cc2254e6 100644 --- a/examples/blog/README.md +++ b/examples/blog/README.md @@ -19,12 +19,6 @@ You can also access a GraphQL Playground at [localhost:3000/api/graphql](http:// Congratulations, you're now up and running with Keystone! 🚀 -### Online sandox - -You can play with this example online in web browser using free [codesandbox.io](https://codesandbox.io/) service. To launch the sandbox just open the url https://githubbox.com/keystonejs/keystone/tree/main/examples/blog and that's all. - -You can even fork this sanbox to make your own changes. - ### Optional: add sample data This example includes sample data. To add it to your database: @@ -33,6 +27,10 @@ This example includes sample data. To add it to your database: 2. Run `yarn seed-data`. This will populate your database with sample content. 3. Run `yarn dev` again to startup Admin UI with sample data in place. +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/blog. You can also fork this sandbox to make your own changes. + ## Next steps Experiment with the code in this example to see how Keystone works, familiarise yourself with the Admin UI, and learn about the GraphQL Playground. diff --git a/examples/custom-admin-ui-logo/README.md b/examples/custom-admin-ui-logo/README.md index 0b6f87cbb5c..cf760f459e4 100644 --- a/examples/custom-admin-ui-logo/README.md +++ b/examples/custom-admin-ui-logo/README.md @@ -26,3 +26,7 @@ If you have specific components you think should also be exposed from this confi **NOTE** The Keystone monorepo leverages a babel config that means we use the old jsx transform (this doesn't have an impact on the code we ship to npm). This is why there are `import React from 'react'` statements in our examples. This is NOT necessary outside of the Keystone repo (unless you have a babel config with the old jsx transform which is currently the default with @babel/preset-react) as you'll be using Next.js' babel config which uses the new jsx transform. + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/custom-admin-ui-logo. You can also fork this sandbox to make your own changes. diff --git a/examples/custom-admin-ui-navigation/README.md b/examples/custom-admin-ui-navigation/README.md index 680b7988123..1e2dd34a244 100644 --- a/examples/custom-admin-ui-navigation/README.md +++ b/examples/custom-admin-ui-navigation/README.md @@ -160,3 +160,7 @@ type NavItemProps = { By default the `isSelected` value if left undefined, will be evaluated by the condition `router.pathname === href`, pass in `isSelected` if you have a custom condition or would like more granular control over the selected state of Navigation items. See also the [Custom Navigation guide](httpes://keystonejs.com/docs/guides/custom-admin-ui-navigation). + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/custom-admin-ui-navigation. You can also fork this sandbox to make your own changes. diff --git a/examples/custom-admin-ui-pages/README.md b/examples/custom-admin-ui-pages/README.md index f71996aa233..c62e8bd8b70 100644 --- a/examples/custom-admin-ui-pages/README.md +++ b/examples/custom-admin-ui-pages/README.md @@ -61,3 +61,7 @@ export default () => { ); }; ``` + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/custom-admin-ui-pages. You can also fork this sandbox to make your own changes. diff --git a/examples/custom-field-view/README.md b/examples/custom-field-view/README.md index 84b738a129d..a5d22e685ae 100644 --- a/examples/custom-field-view/README.md +++ b/examples/custom-field-view/README.md @@ -61,3 +61,7 @@ will be rendered as.
+ +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/custom-field-view. You can also fork this sandbox to make your own changes. diff --git a/examples/custom-field/README.md b/examples/custom-field/README.md index cd1d5349121..f7f20ef0ad0 100644 --- a/examples/custom-field/README.md +++ b/examples/custom-field/README.md @@ -19,3 +19,7 @@ You can also access a GraphQL Playground at [localhost:3000/api/graphql](http:// ## Stars field The `stars` fields in the `stars-field` directory shows a custom field that validates that the value is between 0 and some maximum number of stars and shows a radio input to select the number of stars in the Admin UI. The backend for the field type is in `stars-field/index.ts` and the frontend is in `stars-field/views.tsx`. + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/custom-field. You can also fork this sandbox to make your own changes. diff --git a/examples/default-values/README.md b/examples/default-values/README.md index 4a72c4c9b66..287e1675306 100644 --- a/examples/default-values/README.md +++ b/examples/default-values/README.md @@ -19,3 +19,7 @@ You can also access a GraphQL Playground at [localhost:3000/api/graphql](http:// ## Features This project demonstrates how to provide default values to fields. + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/default-values. You can also fork this sandbox to make your own changes. diff --git a/examples/document-field/README.md b/examples/document-field/README.md index b113c86623c..0b2babebc38 100644 --- a/examples/document-field/README.md +++ b/examples/document-field/README.md @@ -103,3 +103,7 @@ const renderers: DocumentRendererProps['renderers'] = { ; ``` + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/document-field. You can also fork this sandbox to make your own changes. diff --git a/examples/extend-graphql-schema-graphql-ts/README.md b/examples/extend-graphql-schema-graphql-ts/README.md index ae582e523c7..2afc7a68d38 100644 --- a/examples/extend-graphql-schema-graphql-ts/README.md +++ b/examples/extend-graphql-schema-graphql-ts/README.md @@ -24,3 +24,7 @@ Schema extensions are set using the [`extendGraphqlSchema`](https://keystonejs.c The `graphql.extend` function allows you to extend the existing query and mutation types and define new types or use existing types in your extension. See the [`@graphql-ts/schema`](https://docsmill.dev/npm/@graphql-ts/schema) and [`@graphql-ts/extend`](https://docsmill.dev/npm/@graphql-ts/extend) docs for more information. + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/extend-graphql-schema-graphql-ts. You can also fork this sandbox to make your own changes. diff --git a/examples/extend-graphql-schema-nexus/README.md b/examples/extend-graphql-schema-nexus/README.md index 27a3755428f..b5afd753e8d 100644 --- a/examples/extend-graphql-schema-nexus/README.md +++ b/examples/extend-graphql-schema-nexus/README.md @@ -32,3 +32,7 @@ Ideally, we could tell Nexus about the GraphQL types Keystone generates so you c There's also a Prisma plugin for Nexus in development here: When it's ready, it would make a good addition to this example (showing how to integrate the Prisma plugin with the Keystone-generated Prisma schema to auto-generate Nexus schema) + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/extend-graphql-schema-nexus. You can also fork this sandbox to make your own changes. diff --git a/examples/extend-graphql-schema/README.md b/examples/extend-graphql-schema/README.md index 3afc6f34026..7833ea8bdec 100644 --- a/examples/extend-graphql-schema/README.md +++ b/examples/extend-graphql-schema/README.md @@ -130,3 +130,7 @@ Note that we're not doing any actual fetching inside `Query.stats`, we're doing }, }), ``` + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/extend-graphql-schema. You can also fork this sandbox to make your own changes. diff --git a/examples/json/README.md b/examples/json/README.md index 320d3e4d412..f77c1ebd6a8 100644 --- a/examples/json/README.md +++ b/examples/json/README.md @@ -30,3 +30,7 @@ This accepts any valid JSON including: - null The JSON field type stores its value in the `jsonb` format, as specified by Prisma. However if `sqlite` is specified as the database type instead, then the value is stored as a `string`. + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/json. You can also fork this sandbox to make your own changes. diff --git a/examples/rest-api/README.md b/examples/rest-api/README.md index 621005e2028..165d0a5228c 100644 --- a/examples/rest-api/README.md +++ b/examples/rest-api/README.md @@ -15,3 +15,7 @@ This will start the Admin UI at [localhost:3000](http://localhost:3000). You can use the Admin UI to create items in your database. To run the seed data script, pass the `--seed-data` flag when starting the app. + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/rest-api. You can also fork this sandbox to make your own changes. diff --git a/examples/task-manager/README.md b/examples/task-manager/README.md index a743f3ea2f5..b653ea8d917 100644 --- a/examples/task-manager/README.md +++ b/examples/task-manager/README.md @@ -31,3 +31,7 @@ This example includes sample data. To add it to your database: Experiment with the code in this example to see how Keystone works, familiarise yourself with the Admin UI, and learn about the GraphQL Playground. When you’ve got the hang of this base project, try a [feature project](../) to learn Keystone’s advanced features and take your knowledge to the next level. + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/task-manager. You can also fork this sandbox to make your own changes. diff --git a/examples/testing/README.md b/examples/testing/README.md index 8f94ad5e7f2..46d20ca5a2f 100644 --- a/examples/testing/README.md +++ b/examples/testing/README.md @@ -154,3 +154,7 @@ describe('Example tests using test environment', () => { `setupTestEnv` will connect to the database and drop all the data so that the test can run in a known state, returning a value `testEnv` which contains `{ connect, disconnect, testArgs }`. The value `testArgs` contains the same values that are passed into test functions by the test runner. The `connect` and `disconnect` functions are used to connect to the database before the tests run, then disconnect once all tests have completed. + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/testing. You can also fork this sandbox to make your own changes. diff --git a/examples/virtual-field/README.md b/examples/virtual-field/README.md index f246ec77a01..ecc3231d163 100644 --- a/examples/virtual-field/README.md +++ b/examples/virtual-field/README.md @@ -117,3 +117,7 @@ relatedPosts: virtual({ ui: { query: '{ title }' }, }), ``` + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/virtual-field. You can also fork this sandbox to make your own changes. diff --git a/examples/with-auth/README.md b/examples/with-auth/README.md index 6123531ba73..dc104e25564 100644 --- a/examples/with-auth/README.md +++ b/examples/with-auth/README.md @@ -80,3 +80,7 @@ export default withAuth( }) ); ``` + +## Try it out in Code Sandbox 🧪 + +You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/with-auth. You can also fork this sandbox to make your own changes.