Add digital ocean spaces link for S3 providers (and tidy up) (#8260)

Co-authored-by: Daniel Cousens <[email protected]>

docs/pages/docs/guides/images-and-files.md

@@ -3,11 +3,11 @@ title: "Images and Files"
 description: "Learn how to add Images and Files to your project using Keystone’s Storage configuration"
 ---
 
-Keystone [fields](../fields/overview) include the `image` and `file` types. You can use them to reference and (if required) serve images and/or files from Keystone. This guide will show you how to configure images and files in your Keystone system so you can store assets either locally or [Amazon S3 storage](https://aws.amazon.com/s3/).
+Keystone [fields](../fields/overview) include the `image` and `file` types. You can use them to reference and (if required) serve images and/or files from Keystone. This guide will show you how to configure images and files in your Keystone system so you can store assets either locally or using [Amazon S3 storage](https://aws.amazon.com/s3/) or compatible S3 providers such as DigitalOcean Spaces (https://www.digitalocean.com/products/spaces).
 
 ## How asset storage works in Keystone
 
-Keystone manages file and image assets through a `storage` object you define in Keystone’s [configuration file](/docs/config/config). Any number of stores can be set up within the `storage` object, and you can mix and match between `local` and `s3` (by [Amazon](https://aws.amazon.com/s3/)) depending on your use case.
+Keystone manages file and image assets through a `storage` object you define in Keystone’s [configuration file](/docs/config/config). Any number of stores can be set up within the `storage` object, and you can mix and match between `local` and `s3` compatible providers.
 
 The `storage` object defines how and where the assets are stored and accessed by both Keystone and the client frontend. This object defines:
 
@@ -21,7 +21,7 @@ The `storage` object defines how and where the assets are stored and accessed by
 
 First, we are going to use [dotenv](https://www.npmjs.com/package/dotenv) to retrieve the S3 bucket and URL details from a `.env` file or set environment variables.
 
-In your Keystone Config file, pull in your environment variables and maps them to some easy to use names
+Before your configuration file, you can map your environment variables to some easy to use names:
 
 ```typescript{24-54}
 import { config } from '@keystone-6/core';
@@ -30,46 +30,46 @@ import { lists } from './schema';
 
 dotenv.config();
 
- const {
-  // The S3 Bucket Name used to store assets
+const {
   S3_BUCKET_NAME: bucketName = 'keystone-test',
-  // The region of the S3 bucket
   S3_REGION: region = 'ap-southeast-2',
-  // The Access Key ID and Secret that has read/write access to the S3 bucket
   S3_ACCESS_KEY_ID: accessKeyId = 'keystone',
   S3_SECRET_ACCESS_KEY: secretAccessKey = 'keystone',
-  // The base URL to serve assets from
   ASSET_BASE_URL: baseUrl = 'http://localhost:3000',
- } = process.env;
+} = process.env;
 /** ... */
 ```
 
 ### Storing assets in `s3`
 
-We can then add an `s3` `storage` object, the object below is called `my_s3_files` and this is the name that we will use in our `field` config later. This can be called any name that makes sense to your use case.
+We can then add an `s3` `storage` object, the object below is called `my_s3_files` and this is the name that we will use in our `field` config later.
+The name is not important, and can be adjusted to any name that makes sense for you.
+
+Within the [config](../config/config) object in your `keystone.ts` file, add the following configuration:
+```typescript
+storage: {
+  my_s3_files: {
+    kind: 's3', // this storage uses S3
+    type: 'file', // only for files
+    bucketName, // from your S3_BUCKET_NAME environment variable
+    region, // from your S3_REGION environment variable
+    accessKeyId, // from your S3_ACCESS_KEY_ID environment variable
+    secretAccessKey, // from your S3_SECRET_ACCESS_KEY environment variable
+    signed: { expiry: 3600 }, // (optional) links will be signed with an expiry of 3600 seconds (an hour) 
+  },
+  // ...
+},
+```
 
-In the [config](../config/config) object in your `keystone.ts` file...
 
+If you are using an S3 compatible provider, such as DigitalOcean Spaces, you need to additionally provide an `endpoint`:
 ```typescript
-/** config */
 storage: {
   my_s3_files: {
-    // Files that use this store will be stored in an s3 bucket
-    kind: 's3',
-    // This store is used for the file field type
-    type: 'file',
-    // The S3 bucket name pulled from the S3_BUCKET_NAME environment variable
-    bucketName,
-    // The S3 bucket region pulled from the S3_REGION environment variable
-    region,
-    // The S3 Access Key ID pulled from the S3_ACCESS_KEY_ID environment variable
-    accessKeyId,
-    // The S3 Secret pulled from the S3_SECRET_ACCESS_KEY environment variable
-    secretAccessKey,
-    // The S3 links will be signed so they remain private
-    signed: { expiry: 5000 },
+    // ...
+    endpoint: 'https://ap-southeast-2-region.digitaloceanspaces.com' // or et cetera,
   },
-  /** more storage */
+  // ...
 },
 ```