use cloud images for cover images

Thinkmill · Aug 31, 2023 · f683730 · f683730
1 parent 98721a1
commit f683730
Show file tree

Hide file tree

Showing 14 changed files with 66 additions and 30 deletions.
diff --git a/docs/keystatic.config.tsx b/docs/keystatic.config.tsx
@@ -230,31 +230,19 @@ export default config({
           multiline: true,
           description: 'This will be used on the homepage listing.',
         }),
-        // This will be replaced with a cloudImage field soon...
-        coverImage: fields.text({ label: 'Cover image' }),
+        coverImage: fields.cloudImage({
+          label: 'Cover image',
+        }),
         sortIndex: fields.integer({ label: 'Sort Index', defaultValue: 100 }),
         content: fields.document({
           label: 'Content',
           description:
             'The long form copy for the project page. A link to a dedicated page will be available if this field is filled.',
           formatting: true,
           links: true,
-          // images: {
-          //   directory: 'src/assets/projects',
-          //   publicPath: '/images/projects',
-          // },
-
-          // This will be replaced with a cloudImage field soon...
           componentBlocks: {
             aside: componentBlocks['aside'],
             'cloud-image': componentBlocks['cloud-image'],
-            // image: component({
-            //   label: 'Image',
-            //   preview: () => null,
-            //   schema: {
-            //     image: fields.text({ label: 'Image' }),
-            //   },
-            // }),
           },
         }),
       },

diff --git a/docs/next.config.js b/docs/next.config.js
@@ -6,7 +6,7 @@ module.exports = {
     externalDir: true,
   },
   images: {
-    remotePatterns: [{ hostname: 'images.unsplash.com' }],
+    remotePatterns: [{ hostname: 'thinkmill-labs.keystatic.net' }],
   },
   async redirects() {
     return [

diff --git a/docs/src/app/(public)/showcase/[slug]/page.tsx b/docs/src/app/(public)/showcase/[slug]/page.tsx
@@ -81,7 +81,7 @@ export default async function Docs({ params }: { params: { slug: string } }) {
               <div className="h-3 w-3 rounded-full bg-green-500" />
             </div>
             <Image
-              src={project.coverImage}
+              src={project.coverImage.src}
               layout="fill"
               alt=""
               className="absolute inset-0 object-cover"

diff --git a/docs/src/app/(public)/showcase/page.tsx b/docs/src/app/(public)/showcase/page.tsx
@@ -97,7 +97,7 @@ function ProjectCard({ entry, slug }: Project) {
 
       <div className="relative aspect-[16/10] translate-x-12 translate-y-8">
         <Image
-          src={entry.coverImage}
+          src={entry.coverImage.src}
           layout="fill"
           alt=""
           className="absolute inset-0 w-full rounded-tl-xl object-cover"

diff --git a/docs/src/content/projects/better-dev-screencasts.mdoc b/docs/src/content/projects/better-dev-screencasts.mdoc
@@ -6,8 +6,12 @@ repoUrl: https://github.com/simonswiss/better-dev
 summary: >-
   A collection of resources to help developers create better screencasts, and
   level-up their overall video content creation game.
-coverImage: >-
-  https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGJsdXIlMjBhYnN0cmFjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60
+coverImage:
+  src: >-
+    https://thinkmill-labs.keystatic.net/keystatic-site/images/vey9evf79e61/better-dev-admin-ui
+  alt: Screenshot of the Keystatic Admin UI for the Better Dev Screencasts website
+  height: 1878
+  width: 2992
 sortIndex: 50
 ---
 Better Dev Screencasts was possibly the **very first Keystatic website in production**. In early 2023, Simon from the Thinkmill Labs team used this site to "dogfood" Keystatic as it was being developed.

diff --git a/docs/src/content/projects/blog-demo.mdoc b/docs/src/content/projects/blog-demo.mdoc
@@ -4,7 +4,12 @@ type: demo
 url: https://keystatic-demo-blog.vercel.app/
 repoUrl: https://github.com/Thinkmill/keystatic-demo-blog
 summary: A basic blog templatebuilt with Keystatic, Next.js and Tailwind CSS.
-coverImage: https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGJsdXIlMjBhYnN0cmFjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60
+coverImage:
+  src: >-
+    https://thinkmill-labs.keystatic.net/keystatic-site/images/vey9evf79e61/better-dev-admin-ui
+  alt: Screenshot of the Keystatic Admin UI for the Better Dev Screencasts website
+  height: 1878
+  width: 2992
 sortIndex: 110
 ---
 This blog demo is a basic implementation of a Keystatic schema to power a blog.

diff --git a/docs/src/content/projects/in-the-chair.mdoc b/docs/src/content/projects/in-the-chair.mdoc
@@ -6,6 +6,11 @@ summary: >-
   Take bookings and payments 24/7, automate reminders and keep your clients
   coming back with IN THE CHAIR. Get your all-in-one barber appointment app FREE
   now.
-coverImage: https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGJsdXIlMjBhYnN0cmFjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60
+coverImage:
+  src: >-
+    https://thinkmill-labs.keystatic.net/keystatic-site/images/vey9evf79e61/better-dev-admin-ui
+  alt: Screenshot of the Keystatic Admin UI for the Better Dev Screencasts website
+  height: 1878
+  width: 2992
 sortIndex: 60
 ---
diff --git a/docs/src/content/projects/keystatic-docs.mdoc b/docs/src/content/projects/keystatic-docs.mdoc
@@ -7,7 +7,11 @@ summary: >-
   Keystatic is a new tool from Thinkmill Labs that opens up your code-based
   content (written in Markdown, JSON or YAML) to contributors who aren't
   technical.
-coverImage: >-
-  https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGJsdXIlMjBhYnN0cmFjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60
+coverImage:
+  src: >-
+    https://thinkmill-labs.keystatic.net/keystatic-site/images/vey9evf79e61/better-dev-admin-ui
+  alt: Screenshot of the Keystatic Admin UI for the Better Dev Screencasts website
+  height: 1878
+  width: 2992
 sortIndex: 40
 ---
diff --git a/docs/src/content/projects/luke-bennett.mdoc b/docs/src/content/projects/luke-bennett.mdoc
@@ -3,6 +3,11 @@ title: Luke Bennett
 type: production
 url: https://lukebennett.com.au
 summary: Luke Bennett's personal website.
-coverImage: https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGJsdXIlMjBhYnN0cmFjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60
+coverImage:
+  src: >-
+    https://thinkmill-labs.keystatic.net/keystatic-site/images/vey9evf79e61/better-dev-admin-ui
+  alt: Screenshot of the Keystatic Admin UI for the Better Dev Screencasts website
+  height: 1878
+  width: 2992
 sortIndex: 30
 ---
diff --git a/docs/src/content/projects/marketing-landing-page.mdoc b/docs/src/content/projects/marketing-landing-page.mdoc
@@ -6,7 +6,12 @@ repoUrl: https://github.com/Thinkmill/keystatic-demo-landing-page
 summary: >-
   A marketing landing page demo site, built with Keystatic, Next.js and Tailwind
   CSS.
-coverImage: https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGJsdXIlMjBhYnN0cmFjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60
+coverImage:
+  src: >-
+    https://thinkmill-labs.keystatic.net/keystatic-site/images/vey9evf79e61/better-dev-admin-ui
+  alt: Screenshot of the Keystatic Admin UI for the Better Dev Screencasts website
+  height: 1878
+  width: 2992
 sortIndex: 100
 ---
 The Marketing Landing Page demo was one of the first projects powered by Keystatic.

diff --git a/docs/src/content/projects/react-sydney-meetup.mdoc b/docs/src/content/projects/react-sydney-meetup.mdoc
@@ -5,6 +5,11 @@ url: https://react.sydney
 summary: >-
   Join the vibrant and inclusive community of web developers discussing the
   latest in the React space from Sydney, Australia.
-coverImage: https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGJsdXIlMjBhYnN0cmFjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60
+coverImage:
+  src: >-
+    https://thinkmill-labs.keystatic.net/keystatic-site/images/vey9evf79e61/better-dev-admin-ui
+  alt: Screenshot of the Keystatic Admin UI for the Better Dev Screencasts website
+  height: 1878
+  width: 2992
 sortIndex: 70
 ---
diff --git a/docs/src/content/projects/star-athletics.mdoc b/docs/src/content/projects/star-athletics.mdoc
@@ -5,6 +5,11 @@ url: https://star-athletics.com.au
 summary: >-
   Fun-filled athletics in Sydney’s Northern Beaches and Woolgoolga on the
   Mid-North Coast.
-coverImage: https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGJsdXIlMjBhYnN0cmFjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60
+coverImage:
+  src: >-
+    https://thinkmill-labs.keystatic.net/keystatic-site/images/vey9evf79e61/better-dev-admin-ui
+  alt: Screenshot of the Keystatic Admin UI for the Better Dev Screencasts website
+  height: 1878
+  width: 2992
 sortIndex: 10
 ---
diff --git a/docs/src/content/projects/sydjs-meetup.mdoc b/docs/src/content/projects/sydjs-meetup.mdoc
@@ -6,6 +6,11 @@ repoUrl: https://github.com/Thinkmill/sydjs-keystatic
 summary: >-
   Join the vibrant and inclusive community of web developers discussing the
   latest in Javascript from Sydney, Australia.
-coverImage: https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGJsdXIlMjBhYnN0cmFjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60
+coverImage:
+  src: >-
+    https://thinkmill-labs.keystatic.net/keystatic-site/images/vey9evf79e61/better-dev-admin-ui
+  alt: Screenshot of the Keystatic Admin UI for the Better Dev Screencasts website
+  height: 1878
+  width: 2992
 sortIndex: 20
 ---
diff --git a/docs/src/content/projects/thinkmill.mdoc b/docs/src/content/projects/thinkmill.mdoc
@@ -5,6 +5,11 @@ url: https://thinkmill.com.au
 summary: >-
   An internationally recognised design & development consultancy. We help
   ambitious teams make software that matters.
-coverImage: https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fGJsdXIlMjBhYnN0cmFjdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60
+coverImage:
+  src: >-
+    https://thinkmill-labs.keystatic.net/keystatic-site/images/vey9evf79e61/better-dev-admin-ui
+  alt: Screenshot of the Keystatic Admin UI for the Better Dev Screencasts website
+  height: 1878
+  width: 2992
 sortIndex: 0
 ---