feat: rewrite docs

deno.jsonc

@@ -2,6 +2,11 @@
   "tasks": {
     // The task to automatically generate `./src/celestial.ts`
     "bind": "deno run -A ./bindings/_tools/generate/mod.ts && deno fmt",
-    "test": "deno test -A --trace-ops"
+    "test": "deno test -A --trace-ops",
+    "www": "cd docs && pyro dev"
+  },
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "https://esm.sh/[email protected]"
   }
 }

docs/pages/advanced/binary.md

@@ -1,5 +1,5 @@
 ---
-title: 3.1 - Binaries
+title: Binaries
 description: How Astral deals with binaries
 index: 0
 ---

docs/pages/advanced/bindings.md

@@ -1,5 +1,5 @@
 ---
-title: 2.2 - Bindings
+title: Bindings
 description: How Astral generates bindings
 index: 1
 ---

docs/pages/advanced/index.md

@@ -1,5 +1,5 @@
 ---
-title: 3 - Advanced
+title: Advanced
 description: Advanced topics for Astral
 index: 2
 ---

docs/pages/advanced/polish.md

@@ -1,5 +1,5 @@
 ---
-title: 3.3 - Polish
+title: Polish
 description: How Astral finalizes the polish to make a usable API.
 index: 2
 ---

docs/pages/examples/evaluate.md → docs/pages/guides/evaluate.md

@@ -1,7 +1,7 @@
 ---
-title: 2.3 - Evaluate
+title: Evaluate
 description: A small example on how to do complex evaluation in Astral
-index: 1
+index: 2
 ---
 
 ## Running

docs/pages/examples/index.md → docs/pages/guides/index.md

@@ -1,6 +1,6 @@
 ---
-title: 2 - Examples
-description: Small examples for Astral
+title: Guides
+description: Small guides for Astral
 index: 1
 ---
 

docs/pages/examples/navigation.md → docs/pages/guides/navigation.md

@@ -1,5 +1,5 @@
 ---
-title: 2.2 - Navigation
+title: Navigation
 description: A small example on how to do complex navigation in Astral
 index: 1
 ---

docs/pages/examples/screenshot.md → docs/pages/guides/screenshot.md

@@ -1,5 +1,5 @@
 ---
-title: 2.1 - Screenshots
+title: Screenshots
 description: A small example on how to do screenshots in Astral
 index: 0
 ---

docs/pages/index.md

@@ -1,5 +1,5 @@
 ---
-title: 1 - Astral
+title: Introduction
 description: A simple introduction to Astral
 index: 0
 ---
@@ -19,6 +19,8 @@ Here are a few examples to get you started:
 - Automate form submission, UI testing, keyboard input, etc.
 - Create a reproducable, automated testing environment using the latest
   JavaScript and browser features.
+- Stealthy by default. No need to install or setup extra libraries to get
+  features that should come by default.
 
 ## Usage
 

docs/pages/showcase.tsx

@@ -0,0 +1,88 @@
+import { ensureDirSync } from "https://deno.land/[email protected]/fs/ensure_dir.ts";
+import { launch } from "../../mod.ts";
+import { type PageProps } from "https://deno.land/x/[email protected]/page.ts";
+import { ensureFileSync } from "https://deno.land/[email protected]/fs/ensure_file.ts";
+
+export const config = {
+  title: "Showcase",
+  description: "A small showcase for projects that use Astral!",
+};
+
+interface Project {
+  title: string;
+  description: string;
+  source: string;
+}
+
+const projects: Project[] = [
+  {
+    title: "Manuscript Marauder",
+    description: "Download manuscripts using a proxy",
+    source: "https://github.com/rnbguy/manuscript-marauder",
+  },
+];
+
+export default function Page(props: PageProps) {
+  return (
+    <div class="flex flex-col items-center min-h-screen bg-white dark:bg-dark dark:text-white">
+      {props.header}
+      <div class="flex-grow py-8 w-full flex flex-col items-center">
+        <div class="text-center flex flex-col items-center gap-4">
+          <h2 class="font-bold text-3xl">Astral Project Showcase</h2>
+          <p class="text-gray-500 dark:text-gray-400">
+            List of projects people are building with Astral
+          </p>
+          <a
+            class="rounded px-8 py-2 bg-purple-500 text-white w-max font-semibold text-sm"
+            href="https://github.com/lino-levan/astral/issues/new"
+          >
+            🙏 Please add your project
+          </a>
+        </div>
+        <div class="max-w-screen-xl pt-8 px-8 flex flex-wrap gap-8 justify-center">
+          {projects.map((project) => (
+            <div class="w-72 bg-white dark:bg-black shadow-lg rounded-lg overflow-hidden">
+              <a href={project.source}>
+                <img
+                  class="w-full h-36"
+                  src={`/showcase${new URL(project.source).pathname}.png`}
+                />
+              </a>
+              <div class="p-4 border-t-2 dark:border-gray-500">
+                <a
+                  href={project.source}
+                  class="text-purple-600 dark:text-purple-500 font-semibold hover:underline"
+                >
+                  {project.title}
+                </a>
+                <p class="text-gray-800 dark:text-gray-300">
+                  {project.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      {props.footer}
+    </div>
+  );
+}
+
+// let's boot astral and download some stuff :)
+if (import.meta.main) {
+  const browser = await launch();
+  const page = await browser.newPage();
+
+  for (const project of projects) {
+    await page.goto(project.source);
+    const screenshot = await page.screenshot();
+    const path = `./docs/static/showcase${
+      new URL(project.source).pathname
+    }.png`;
+    ensureFileSync(path);
+
+    Deno.writeFileSync(path, screenshot);
+  }
+
+  await browser.close();
+}

docs/pyro.yml

@@ -3,6 +3,10 @@ github: https://github.com/lino-levan/astral
 copyright: |-
   Copyright © 2023 Lino Le Van
   MIT Licensed
+header:
+  left:
+    - Docs /
+    - Showcase /showcase
 footer:
   Learn:
     - Introduction /