KEY-234: Port showcase to Docs site

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 antialiased">
       <HeaderNav navigationMap={navigationMap} />
       {children}
     </div>

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

@@ -0,0 +1,173 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import { notFound } from 'next/navigation';
+import { Metadata, ResolvingMetadata } from 'next';
+
+import DocumentRenderer from '../../../../components/document-renderer';
+import { reader } from '../../../../utils/reader';
+import ActionButton from '../../../../components/action-button';
+import { GlobeIcon } from '../../../../components/icons/globe';
+import { GitHubOutlineIcon } from '../../../../components/icons/github-outline-icon';
+
+export default async function Docs({ params }: { params: { slug: string } }) {
+  const { slug } = params;
+  const project = await reader.collections.projects.read(slug);
+  if (!project) notFound();
+  const content = await project.content();
+
+  // Project navigation
+  const allProjects = await reader.collections.projects.all();
+  const sortedProjects = allProjects.sort(
+    (a, b) => (a.entry.sortIndex as number) - (b.entry.sortIndex as number)
+  );
+  const currentProjectIndex = sortedProjects.findIndex(p => p.slug === slug);
+  const previousProject =
+    currentProjectIndex > 0
+      ? sortedProjects[currentProjectIndex - 1]
+      : sortedProjects[sortedProjects.length - 1];
+  const nextProject =
+    currentProjectIndex < sortedProjects.length - 1
+      ? sortedProjects[currentProjectIndex + 1]
+      : sortedProjects[0];
+
+  return (
+    <div className="py-10">
+      <header>
+        <div className="grid grid-cols-2 items-end gap-12 md:grid-cols-[1fr,auto,1fr]">
+          {/* Previous project */}
+
+          <Link
+            href={`/showcase/${previousProject.slug}`}
+            className="group mb-2 flex flex-col gap-6"
+          >
+            <span className="font-medium leading-none text-slate-9">
+              &larr; Previous
+            </span>
+            <span className="text-lg font-bold leading-none group-hover:underline">
+              {previousProject.entry.title}
+            </span>
+          </Link>
+          {/* Current project */}
+          <div className="col-span-2 row-start-1 text-center md:col-span-1 md:col-start-2">
+            <Link
+              href="/showcase"
+              className="font-medium text-slate-11 hover:underline"
+            >
+              Showcase
+            </Link>
+            <h1 className="mt-2 text-3xl font-extrabold leading-none sm:text-4xl md:mt-4 md:text-5xl lg:mt-6">
+              {project.title}
+            </h1>
+          </div>
+          {/* Next project */}
+          <Link
+            href={`/showcase/${nextProject.slug}`}
+            className="group mb-2 flex flex-col gap-6 justify-self-end rounded-md text-right"
+          >
+            <span className="font-medium leading-none text-slate-9">
+              Next &rarr;
+            </span>
+            <span className="text-lg font-bold leading-none group-hover:underline">
+              {nextProject.entry.title}
+            </span>
+          </Link>
+        </div>
+
+        <div className="border-b-2 border-slate-5">
+          <div className="relative mt-8 aspect-[16/10.5] overflow-hidden rounded-t-2xl border-2 border-b-0 border-slate-5 md:mt-16 lg:mx-20">
+            {/* Window buttons fake UI */}
+            <div
+              className="absolute left-2.5 top-2.5 z-10 flex gap-1.5"
+              aria-hidden="true"
+            >
+              <div className="h-3 w-3 rounded-full bg-[#E54D2E]" />
+              <div className="h-3 w-3 rounded-full bg-[#FFB224]" />
+              <div className="h-3 w-3 rounded-full bg-[#30A46C]" />
+            </div>
+            <Image
+              src={project.coverImage.src}
+              layout="fill"
+              alt=""
+              className="absolute inset-0 origin-bottom object-cover"
+            />
+          </div>
+        </div>
+        <div className="mx-auto mt-16 max-w-2xl [text-wrap:balance]">
+          <p className="text-center font-medium md:text-lg">
+            {project.summary}
+          </p>
+          <div className="mt-10 flex items-center justify-center gap-2">
+            {project.repoUrl && (
+              <ActionButton
+                impact="light"
+                href={project.repoUrl}
+                icon={GitHubOutlineIcon}
+              >
+                View on GitHub
+              </ActionButton>
+            )}
+            {project.url && (
+              <ActionButton href={project.url ?? ''} icon={GlobeIcon}>
+                Visit website
+              </ActionButton>
+            )}
+          </div>
+        </div>
+      </header>
+
+      {content && (
+        <>
+          <hr className="mx-auto mt-16 w-20 border-slate-5" />
+          <main className="bg-white py-12">
+            <div className="prose mx-auto px-4 lg:prose-lg sm:px-6 lg:px-8">
+              <DocumentRenderer document={content} slug={slug} />
+            </div>
+          </main>
+        </>
+      )}
+    </div>
+  );
+}
+
+export async function generateStaticParams() {
+  const slugs = await reader.collections.projects.list();
+
+  return slugs.map(slug => ({
+    slug,
+  }));
+}
+
+export async function generateMetadata(
+  { params }: { params: { slug: string } },
+  parent: ResolvingMetadata
+): Promise<Metadata> {
+  const slug = params.slug;
+  const project = await reader.collections.projects.read(slug);
+
+  const parentTitle = (await parent).title ?? 'Showcase';
+  const title = project?.title ?? parentTitle;
+
+  const fallbackDescription = 'A project built with Keystatic';
+  const description = project?.summary ? project.summary : fallbackDescription;
+
+  const image = `/og?title=${title}`;
+  const parentTwitterSite = (await parent).twitter?.site ?? '';
+
+  return {
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      url: `https://keystatic.com/showcase/${slug}`,
+      type: 'website',
+      images: [{ url: image }],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      site: parentTwitterSite,
+    },
+  };
+}