feat(docs): migrate clack.cc into repo

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@example/*"]
+  "ignore": ["@example/*", "@clack/docs"]
 }

.changeset/great-lies-beam.md

@@ -0,0 +1,2 @@
+---
+---

docs/README.md

@@ -0,0 +1,46 @@
+# Astro Starter Kit: Minimal
+
+```bash
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```bash
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                | Action                                           |
+| :--------------------- | :----------------------------------------------- |
+| `npm install`          | Installs dependencies                            |
+| `npm run dev`          | Starts local dev server at `localhost:3000`      |
+| `npm run build`        | Build your production site to `./dist/`          |
+| `npm run preview`      | Preview your build locally, before deploying     |
+| `npm run astro ...`    | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

docs/astro.config.mjs

@@ -0,0 +1,12 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({
+	site: "https://clack.cc",
+	server: {
+		headers: {
+			'Cross-Origin-Embedder-Policy': 'require-corp',
+			'Cross-Origin-Opener-Policy': 'same-origin',
+		}
+	}
+});

docs/demo/index.js

@@ -0,0 +1,79 @@
+import * as p from "@clack/prompts";
+import color from "picocolors";
+import { setTimeout } from "node:timers/promises";
+
+async function main() {
+  console.clear();
+
+  p.intro(`${color.bgCyan(color.black(" clack.cc "))}`);
+
+  const project = await p.group(
+    {
+      path: () =>
+        p.text({
+          message: "Where should we create your project?",
+          placeholder: "./demo-project",
+          validate: (value) => {
+            if (!value) return "Please enter a path.";
+            if (value[0] !== ".") return "Please enter a relative path.";
+          },
+        }),
+      type: ({ results }) =>
+        p.select({
+          message: `Pick a project type within "${results.path}"`,
+          initialValue: "ts",
+          options: [
+            { value: "ts", label: "TypeScript" },
+            { value: "js", label: "JavaScript" },
+            { value: "coffee", label: "CoffeeScript", hint: "oh no" },
+          ],
+        }),
+      tools: () =>
+        p.multiselect({
+          message: "Select additional tools.",
+          initialValue: ["prettier", "eslint"],
+          options: [
+            { value: "prettier", label: "Prettier", hint: "recommended" },
+            { value: "eslint", label: "ESLint", hint: "recommended" },
+            { value: "stylelint", label: "Stylelint" },
+            { value: "gh-action", label: "GitHub Action" },
+          ],
+        }),
+      install: () =>
+        p.confirm({
+          message: "Install dependencies?",
+          initialValue: true,
+        }),
+    },
+    {
+      onCancel: async () => {
+        p.cancel("Operation cancelled.");
+        console.log('Run `pnpm start` to restart the demo.')
+        process.exit(0)
+      },
+    }
+  );
+
+  if (project.install) {
+    const s = p.spinner();
+    s.start("Installing via pnpm");
+    await setTimeout(5000);
+    s.stop("Installed via pnpm");
+  }
+
+  let nextSteps = `cd ${project.path}        \n${
+    project.install ? "" : "pnpm install\n"
+  }pnpm dev`;
+
+  p.note(nextSteps, "Next steps.");
+
+  p.outro(
+    `Problems? ${color.underline(color.cyan("https://clack.cc/issues"))}`
+  );
+
+  await setTimeout(5000);
+
+  return main();
+}
+
+main().catch(console.error);

docs/demo/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "clack.cc",
+  "type": "module",
+  "dependencies": {
+    "@clack/prompts": "latest",
+    "picocolors": "latest"
+  },
+  "scripts": {
+    "start": "node index.js"
+  }
+}

docs/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@clack/docs",
+  "type": "module",
+	"private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "pnpm run build:demo && astro dev",
+    "build": "pnpm run build:demo && astro build",
+    "build:demo": "cd demo && npm install",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@webcontainer/api": "^1.1.5",
+    "ansi-to-html": "^0.7.2",
+    "astro": "^2.10.6",
+    "astro-icon": "^0.8.1",
+    "fast-glob": "^3.3.1",
+    "p-defer": "^4.0.0",
+    "simple-astro-seo": "^0.1.3",
+    "xterm": "^5.2.1",
+    "xterm-addon-fit": "^0.7.0",
+    "xterm-addon-web-links": "^0.8.0"
+  }
+}

docs/src/components/Filetree.astro

@@ -0,0 +1,38 @@
+---
+import { readFileSync } from "node:fs";
+import glob from "fast-glob";
+
+const files = await glob(["demo/**/*"], {
+  followSymbolicLinks: true,
+  dot: true,
+  onlyFiles: true,
+});
+
+const filetree = {};
+for (const file of files) {
+  const contents = readFileSync(file, "utf8");
+  const paths = file.replace("demo/", "").split("/").filter(Boolean);
+  let i = 0;
+  let obj: any = filetree;
+
+  for (const part of paths) {
+    if (part.endsWith(".md")) continue;
+    const last = i === paths.length - 1;
+    if (!obj["directory"]) obj["directory"] = {};
+
+    if (last) {
+      obj["directory"][part] = { file: { contents } };
+    } else {
+      obj["directory"][part] = obj["directory"][part] ?? {};
+      obj = obj["directory"][part];
+    }
+    i++;
+  }
+}
+---
+
+<script
+  type="application/json"
+  id="filetree"
+  set:html={JSON.stringify(filetree.directory, null, 2)}
+></script>

docs/src/components/Head.astro

@@ -0,0 +1,37 @@
+---
+import SEO from "simple-astro-seo";
+
+export interface Props {
+  title?: string;
+  description?: string;
+  canonicalURL?: URL | null;
+  pageType?: "website" | "article";
+}
+
+const {
+  title = "Clack",
+  description = "Build effortlessly beautiful CLIs",
+  canonicalURL = new URL(Astro.request.url, Astro.site),
+  pageType = "website",
+} = Astro.props as Props;
+
+const ensureTrailingSlash = (url: string) => url.replace(/\/$/, "") + "/";
+---
+
+<!-- Global Metadata -->
+<meta charset="utf-8" />
+<meta name="generator" content={Astro.generator} />
+<meta name="viewport" content="width=device-width" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+<title>{title}</title>
+
+<SEO
+  siteName="Clack"
+  title={title}
+  description={description}
+  image={new URL("/social.jpg", Astro.url).toString()}
+  twitterHandle="@n_moore"
+  pageType={pageType}
+  url={canonicalURL && ensureTrailingSlash(canonicalURL.toString())}
+/>