KEY-154: CLI content

docs/next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

docs/src/components/button.tsx

@@ -12,10 +12,11 @@ type ButtonProps = {
 
 const baseClasses =
   'block rounded-lg px-5 py-3 text-center font-semibold leading-none border transition-colors';
+
 const impactClasses: Record<ButtonProps['impact'] & {}, string> = {
-  bold: 'rounded-lg bg-black px-5 py-3 text-center font-semibold leading-none text-white hover:bg-neutral-800 border-transparent',
+  bold: 'bg-black text-white hover:bg-neutral-800 border-transparent',
   light:
-    'rounded-lg bg-transparent border-black text-black px-5 py-3 text-center font-semibold leading-none hover:bg-neutral-800/10 active:bg-neutral-800/20',
+    'bg-transparent border-black text-black hover:bg-neutral-800/10 active:bg-neutral-800/20',
 };
 
 // ----------
@@ -32,14 +33,14 @@ export default function Button({
     <Link
       href={href}
       {...props}
-      className={cx(baseClasses, className, impactClasses[impact])}
+      className={cx(baseClasses, impactClasses[impact], className)}
     >
       {children}
     </Link>
   ) : (
     <button
       {...props}
-      className={cx(baseClasses, className, impactClasses[impact])}
+      className={cx(baseClasses, impactClasses[impact], className)}
     >
       {isLoading ? <Spinner /> : children}
     </button>

docs/src/components/copy-command-button.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useState } from 'react';
+import { copyTextToClipboard } from '../utils';
+import Button from './button';
+
+export function CopyCommandButton() {
+  const copyCommandText = 'npm create @keystatic@latest';
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopyCommand = async () => {
+    try {
+      await copyTextToClipboard(copyCommandText);
+      setIsCopied(true);
+      setTimeout(() => {
+        setIsCopied(false);
+      }, 1500);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  return (
+    <Button
+      impact="light"
+      onClick={handleCopyCommand}
+      aria-label="Copy npm command for creating a Keystatic project"
+    >
+      <div className="flex gap-4 font-mono text-sm items-center leading-none">
+        {copyCommandText}
+
+        {isCopied ? (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="w-4 h-4 text-green-800 shrink-0"
+            fill="none"
+            shapeRendering="geometricPrecision"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path d="M20 6L9 17l-5-5" />
+          </svg>
+        ) : (
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="w-4 h-4 shrink-0"
+            fill="none"
+            shapeRendering="geometricPrecision"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+          >
+            <path d="M6 17C4.89543 17 4 16.1046 4 15V5C4 3.89543 4.89543 3 6 3H13C13.7403 3 14.3866 3.4022 14.7324 4M11 21H18C19.1046 21 20 20.1046 20 19V9C20 7.89543 19.1046 7 18 7H11C9.89543 7 9 7.89543 9 9V19C9 20.1046 9.89543 21 11 21Z" />
+          </svg>
+        )}
+      </div>
+    </Button>
+  );
+}

docs/src/components/hero.tsx

@@ -1,11 +1,12 @@
 import Link from 'next/link';
 import Button from './button';
+import { CopyCommandButton } from './copy-command-button';
 
 export default function Hero() {
   return (
     <section className="relative overflow-hidden bg-white">
-      <div className="mx-auto max-w-7xl pt-12 px-6 md:py-16 flex flex-col items-center gap-10">
-        <div className="w-full max-w-xl flex flex-col items-center gap-8 text-center">
+      <div className="mx-auto max-w-7xl pt-12 px-6 md:py-16 flex flex-col items-center gap-12 md:gap-16">
+        <div className="w-full max-w-2xl flex flex-col items-center gap-8 text-center">
           <h1 className="font-extrabold text-3xl sm:text-4xl md:text-5xl">
             Content Management
             <br />
@@ -27,14 +28,20 @@ export default function Hero() {
             </span>
           </h1>
 
-          <p className="text-lg font-semibold">
+          <p className="text-lg font-normal">
             A new tool that makes Markdown, JSON and YAML content in your
-            codebase editable by humans.
+            codebase editable by humans. Live edit content on GitHub or your
+            local file system, without disrupting your existing code and
+            workflows.
           </p>
 
-          <Button className="w-full max-w-xs" href="/docs">
-            Read the docs
-          </Button>
+          <div className="flex flex-col sm:flex-row gap-3">
+            <Button className="" href="/docs">
+              Read the docs
+            </Button>
+
+            <CopyCommandButton />
+          </div>
 
           <div className="inline-flex items-center gap-2 text-left">
             <svg
@@ -70,11 +77,6 @@ export default function Hero() {
           </div>
         </div>
 
-        <p className="text-sm text-neutral-600 text-center">
-          Live edit content on GitHub or your local file system, without
-          disrupting your existing code and workflows.
-        </p>
-
         <div className="relative w-full h-[100vw] md:h-[22vw] lg:h-[25vw] xl:h-[20rem]">
           <img
             src="https://keystatic.io/images/keystatic-docs/hero-markdoc.png"

docs/src/content/pages/quick-start.mdoc

@@ -1,7 +1,18 @@
 ---
 title: Quick start
 ---
-The quickest way to get started in Keystatic is to `git clone` one of our templates from Github.
+
+## Keystatic CLI
+
+The quickest way to get started is to run the Keystatic CLI in your terminal. It creates a new project with a basic Next.js app, integrated with Keystatic.
+
+```bash
+npm create @keystatic@latest
+```
+
+## Clone a template
+
+Alternatively, you can `git clone` one of our templates from Github.
 
 - [Blank template](https://github.com/Thinkmill/keystatic-template) - a barebones starting point. Keystatic with a simple Post collection, and no frontend design.
 - [Landing page template](https://github.com/Thinkmill/keystatic-starter-landing-page) - a fictive product marketing landing page demo, built with Tailwind CSS and Next.js.

docs/src/utils/index.ts

@@ -9,3 +9,9 @@ export function getDefaultSrcSet({ src }: { src: string }) {
 
   return imgWidths.map(width => `${src}?width=${width} ${width}w`).join(', ');
 }
+
+export async function copyTextToClipboard(text: string) {
+  if ('clipboard' in navigator) {
+    return await navigator.clipboard.writeText(text);
+  }
+}