KEY-234: Port showcase to Docs site

docs/.env.example

@@ -2,8 +2,6 @@
 NEXT_PUBLIC_AIRTABLE_TOKEN=
 NEXT_PUBLIC_AIRTABLE_BASE_ID=
 
-NEXT_PUBLIC_AIRTABLE_GET_ACCESS_TABLE_ID=
-NEXT_PUBLIC_AIRTABLE_GET_NOTIFIED_TABLE_ID=
 NEXT_PUBLIC_AIRTABLE_SEND_MESSAGE_TABLE_ID=
 NEXT_PUBLIC_AIRTABLE_MAILING_LIST_TABLE_ID=
 

docs/.prettierrc.js

@@ -0,0 +1,9 @@
+const defaultPrettierConfig = require('../.prettierrc.js');
+
+module.exports = {
+  ...defaultPrettierConfig,
+  plugins: [
+    ...(defaultPrettierConfig.plugins || []),
+    'prettier-plugin-tailwindcss',
+  ],
+};

docs/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["cpylua.language-postcss", "bradlc.vscode-tailwindcss"],
+  "unwantedRecommendations": []
+}

docs/.vscode/settings.json

@@ -1,4 +1,21 @@
 {
   "typescript.tsdk": "../node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true
+  "typescript.enablePromptUseWorkspaceTsdk": true,
+  // Tailwind Intellisense power-up
+  // Extend scope of supported attributes with `{anything}Classes`:
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "ngClass",
+    ".*Classes.*"
+  ],
+  // Regex black magic:
+  "tailwindCSS.experimental.classRegex": [
+    // tailwind-variants
+    ["tv\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+    // CVA (with support for JSON)
+    ["cva(s*(\"[^\"]*\"|s*,s*|{(?:[^{}]|(?:{(?:[^{}]|(?:{[^{}]*}))*}))*}s*)*)"],
+    // `cx()` function from classnames / clsx
+    ["cx\\(([^)]*)\\)", "(?:\"|'|`)([^(?:\"|'|`)]*)(?:\"|'|`)"]
+  ]
 }

docs/keystatic.config.tsx

@@ -80,7 +80,7 @@ export default config({
     kind: shouldUseCloudStorage ? 'cloud' : 'local',
   },
   cloud: {
-    project: 'thinkmill-labs/keystatic-site',
+    project: 'thinkmill-labs/keystatic-docs',
   },
   collections: {
     // ------------------------------
@@ -199,6 +199,54 @@ export default config({
       },
     }),
 
+    // ------------------------------
+    // Projects
+    // ------------------------------
+    projects: collection({
+      label: 'Projects (Showcase)',
+      slugField: 'title',
+      path: `${pathPrefix}src/content/projects/*`,
+      format: { contentField: 'content' },
+      entryLayout: 'content',
+      schema: {
+        title: fields.slug({ name: { label: 'Title' } }),
+        type: fields.select({
+          label: 'Type',
+          options: [
+            { label: 'Production', value: 'production' },
+            { label: 'Demo', value: 'demo' },
+          ],
+          defaultValue: 'demo',
+        }),
+        url: fields.url({ label: 'URL' }),
+        repoUrl: fields.url({
+          label: 'Repo URL',
+          description:
+            'Fill this only for pulic repos, where it makes sense to share.',
+        }),
+        summary: fields.text({
+          label: 'Summary',
+          multiline: true,
+          description: 'This will be used on the homepage listing.',
+        }),
+        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,
+          componentBlocks: {
+            aside: componentBlocks['aside'],
+            'cloud-image': componentBlocks['cloud-image'],
+          },
+        }),
+      },
+    }),
+
     // ------------------------------
     // For testing purposes only
     // ------------------------------

docs/next.config.js

@@ -5,6 +5,9 @@ module.exports = {
   experimental: {
     externalDir: true,
   },
+  images: {
+    remotePatterns: [{ hostname: 'thinkmill-labs.keystatic.net' }],
+  },
   async redirects() {
     return [
       {

docs/package.json

@@ -19,6 +19,7 @@
     "@keystatic/next": "^1.0.0",
     "@markdoc/markdoc": "^0.3.0",
     "@sindresorhus/slugify": "^1.1.2",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.3",
     "@types/cookie": "^0.5.1",
     "@types/node": "16.11.13",

docs/src/app/(public)/blog/[...slug]/page.tsx

@@ -43,7 +43,7 @@ export default async function BlogPost({ params }: BlogProps) {
       <p>
         <Link
           href="/blog"
-          className="underline hover:no-underline font-medium inline-flex gap-1 items-center"
+          className="inline-flex items-center gap-1 font-medium underline hover:no-underline"
         >
           <ArrowLeftIcon />
           All blog posts
@@ -55,7 +55,7 @@ export default async function BlogPost({ params }: BlogProps) {
           {page.title}
         </h1>
 
-        <p className="text-sm text-neutral-500">
+        <p className="text-sm text-slate-9">
           Published on {formattedDate} by{' '}
           {page.authors.map((author, index) => (
             <Fragment key={index}>

docs/src/app/(public)/blog/layout.tsx

@@ -34,7 +34,7 @@ export default async function RootLayout({
 }) {
   return (
     <>
-      <Main className="mx-auto w-full sm:max-w-xl flex flex-col flex-1 gap-4 px-6 pt-10 lg:pt-16 pb-16">
+      <Main className="mx-auto flex w-full flex-1 flex-col gap-4 px-6 pb-16 pt-10 sm:max-w-xl lg:pt-16">
         {children}
       </Main>
       <Footer />

docs/src/app/(public)/blog/page.tsx

@@ -29,9 +29,9 @@ export default async function Blog() {
 
   return (
     <>
-      <div className="sm:text-center mb-8">
+      <div className="mb-8 sm:text-center">
         <h1
-          className="font-extrabold text-3xl sm:text-4xl md:text-5xl mb-8"
+          className="mb-8 text-3xl font-extrabold sm:text-4xl md:text-5xl"
           id={H1_ID}
         >
           Blog
@@ -47,9 +47,9 @@ export default async function Blog() {
           ({ slug, formattedDate, entry }, index) => (
             <li
               key={index}
-              className="border-t border-keystatic-gray py-8 flex flex-col gap-2"
+              className="flex flex-col gap-2 border-t border-slate-4 py-8"
             >
-              <p className="text-sm text-neutral-500">{formattedDate}</p>
+              <p className="text-sm text-slate-9">{formattedDate}</p>
 
               <div className="flex flex-col gap-6">
                 <Link href={`blog/${slug}`}>
@@ -61,7 +61,7 @@ export default async function Blog() {
                 <p>
                   <Link
                     href={`blog/${slug}`}
-                    className="underline hover:no-underline font-medium inline-flex gap-1 items-center"
+                    className="inline-flex items-center gap-1 font-medium underline hover:no-underline"
                     tabIndex={-1}
                     aria-hidden
                   >

docs/src/app/(public)/docs/[...slug]/page.tsx

@@ -46,11 +46,11 @@ export default async function Docs({ params }: DocsProps) {
   const headings = [overviewHeading, ...headingsWithSlugs];
 
   return (
-    <div className="grid gap-6 grid-cols-[auto] md:grid-cols-[auto,12rem]">
+    <div className="grid grid-cols-[auto] gap-6 md:grid-cols-[auto,12rem]">
       <div>
         <h1
           id={H1_ID}
-          className="text-3xl font-extrabold mb-8 scroll-mt-[7rem]"
+          className="mb-8 scroll-mt-[7rem] text-3xl font-extrabold"
         >
           {page.title}
         </h1>

docs/src/app/(public)/docs/layout.tsx

@@ -20,7 +20,7 @@ export default async function RootLayout({
   const navigationMap = await getNavigationMap();
 
   return (
-    <div className="max-w-7xl min-h-screen mx-auto w-full">
+    <div className="mx-auto min-h-screen w-full max-w-7xl">
       <SideNav>
         {navigationMap?.map(({ groupName, items }) => (
           <NavGroup key={groupName} title={groupName}>
@@ -39,7 +39,7 @@ export default async function RootLayout({
       </SideNav>
 
       {/** CONTENT */}
-      <div className="px-6 flex-1 lg:pl-60 lg:pt-24">
+      <div className="flex-1 px-6 lg:pl-60 lg:pt-24">
         <div className="py-10 lg:pl-12">
           <Main className="flex gap-8">
             {/** INNER CONTENT */}

docs/src/app/(public)/docs/page.tsx

@@ -1,3 +1,3 @@
-export default function Docs() {
+export default async function Docs() {
   return null;
 }

docs/src/app/(public)/layout.tsx

@@ -10,7 +10,7 @@ export default async function RootLayout({
   const navigationMap = await getNavigationMap();
 
   return (
-    <div className="min-h-screen flex flex-col">
+    <div className="flex min-h-screen flex-col text-slate-12">
       <HeaderNav navigationMap={navigationMap} />
       {children}
     </div>