Updated READMEs with Code Sandbox option (keystonejs#7529)

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.

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.

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.

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.

examples/custom-field-view/README.md

@@ -61,3 +61,7 @@ will be rendered as.
 <div align="center">
   <img src="./custom-field-ui.png" width="445">
 </div>
+
+## 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.

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.

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.

examples/document-field/README.md

@@ -103,3 +103,7 @@ const renderers: DocumentRendererProps['renderers'] = {
 
 <DocumentRenderer document={post.content.document} renderers={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.

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.

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: <https://github.com/prisma/nexus-prisma>
 
 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.

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.

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.

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.

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.

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.

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.

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.