alchemy 0.2.1 → 0.2.3

package/src/vitepress/vitepress.ts

@@ -0,0 +1,361 @@
+import { exec } from "child_process";
+import fs from "fs/promises";
+import path from "path";
+import { promisify } from "util";
+import type { DefaultTheme, ThemeOptions } from "vitepress";
+import yaml from "yaml";
+import type { Context } from "../context";
+import { Folder, JsonFile, TextFile, TypeScriptFile } from "../fs";
+import { Resource } from "../resource";
+import { InstallDependencies, fixedDependencies } from "./dependencies";
+import type { HomePage } from "./home-page";
+
+const execAsync = promisify(exec);
+
+export interface VitePressProjectProps {
+  /**
+   * The name/path of the project
+   */
+  name: string;
+
+  /**
+   * The title of the documentation site
+   */
+  title?: string;
+
+  /**
+   * The description of the documentation site
+   */
+  description?: string;
+
+  /**
+   * Whether to use TypeScript for config and theme files
+   * @default true
+   */
+  typescript?: boolean;
+
+  tsconfig?: {
+    extends?: string;
+    references?: string[];
+    compilerOptions?: Record<string, any>;
+  };
+
+  /**
+   * Force overwrite the project config files during the update phase
+   * @default false
+   */
+  overwrite?: boolean;
+
+  /**
+   * The dependencies to install
+   */
+  dependencies?: Record<string, string>;
+
+  /**
+   * The dev dependencies to install
+   */
+  devDependencies?: Record<string, string>;
+
+  /**
+   * The theme options to use
+   */
+  theme?: ThemeOptions;
+
+  /**
+   * The theme config to use
+   */
+  themeConfig: DefaultTheme.Config;
+
+  /**
+   * The home page configuration
+   */
+  home: HomePage;
+}
+
+export interface VitePressProject extends VitePressProjectProps, Resource {
+  /**
+   * The name/path of the project
+   */
+  name: string;
+}
+
+export const VitePressProject = Resource(
+  "project::VitePressProject",
+  {
+    alwaysUpdate: true,
+  },
+  async function (
+    this: Context<VitePressProject>,
+    id: string,
+    props: VitePressProjectProps,
+  ): Promise<VitePressProject> {
+    if (this.phase === "delete") {
+      try {
+        if (await fs.exists(props.name)) {
+          // Delete the entire project directory
+          await execAsync(`rm -rf ${props.name}`);
+        }
+      } catch (error) {
+        console.error(`Error deleting VitePress project ${id}:`, error);
+      }
+      return this.destroy();
+    }
+
+    const cwd = (await Folder(props.name)).path;
+
+    // Initialize package.json
+    await JsonFile(path.join(cwd, "package.json"), {
+      name: props.name,
+      scripts: {
+        "docs:gen": "bun alchemy.run.ts",
+        "docs:dev": "vitepress dev",
+        "docs:build": "vitepress build",
+        "docs:preview": "vitepress preview",
+      },
+      dependencies: fixedDependencies(props.dependencies || {}),
+      devDependencies: fixedDependencies(props.devDependencies || {}),
+    });
+
+    await InstallDependencies("dependencies", {
+      cwd,
+      dependencies: props.dependencies,
+      devDependencies: {
+        vue: "latest",
+        vitepress: "latest",
+        "@shikijs/vitepress-twoslash": "latest",
+        "markdown-it-footnote": "latest",
+        ...props.devDependencies,
+      },
+    });
+    // Create .vitepress directory and config
+    await Folder(path.join(cwd, ".vitepress"));
+    await Folder(path.join(cwd, ".vitepress", "theme"));
+
+    await Promise.all([
+      TextFile(path.join(cwd, ".gitignore"), `.vitepress/cache\n`),
+      JsonFile(path.join(cwd, "tsconfig.json"), {
+        extends: props.tsconfig?.extends,
+        references: props.tsconfig?.references?.map((path) => ({ path })),
+        compilerOptions: props.tsconfig?.compilerOptions,
+      }),
+      TextFile(
+        path.join(cwd, "index.md"),
+        `---\n${yaml.stringify(props.home)}---\n`,
+      ),
+      TypeScriptFile(
+        path.join(cwd, "alchemy.run.ts"),
+        `import alchemy from "alchemy";
+import { Folder } from "alchemy/fs";
+import { Document } from "alchemy/docs";
+import path from "path";
+
+await using _ = alchemy("alchemy.run", {
+  stage: "prod",
+  phase: process.argv.includes("--destroy") ? "destroy" : "up",
+  password: process.env.SECRET_PASSPHRASE,
+  quiet: !process.argv.includes("--verbose"),
+});
+
+const docs = await Folder(path.join("alchemy.run", "docs"));
+
+await Document("home.md", {
+  path: path.join(docs.path, "home.md"),
+  prompt: await alchemy\`Generate a landing page.\`,
+});
+`,
+      ),
+      TypeScriptFile(
+        path.join(cwd, ".vitepress", "theme", "index.ts"),
+        `import TwoslashFloatingVue from "@shikijs/vitepress-twoslash/client";
+import "@shikijs/vitepress-twoslash/style.css";
+import type { Theme as ThemeConfig } from "vitepress";
+import Theme from "vitepress/theme-without-fonts";
+import "./style.css";
+
+export default {
+  extends: Theme,
+  enhanceApp(ctx) {
+    ctx.app.use(TwoslashFloatingVue);
+  },
+} satisfies ThemeConfig;
+  `,
+      ),
+      TextFile(
+        path.join(cwd, ".vitepress", "theme", "style.css"),
+        `/**
+* Customize default theme styling by overriding CSS variables:
+* https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+*/
+
+/**
+* Colors
+*
+* Each colors have exact same color scale system with 3 levels of solid
+* colors with different brightness, and 1 soft color.
+*
+* - \`XXX-1\`: The most solid color used mainly for colored text. It must
+*   satisfy the contrast ratio against when used on top of \`XXX-soft\`.
+*
+* - \`XXX-2\`: The color used mainly for hover state of the button.
+*
+* - \`XXX-3\`: The color for solid background, such as bg color of the button.
+*   It must satisfy the contrast ratio with pure white (#ffffff) text on
+*   top of it.
+*
+* - \`XXX-soft\`: The color used for subtle background such as custom container
+*   or badges. It must satisfy the contrast ratio when putting \`XXX-1\` colors
+*   on top of it.
+*
+*   The soft color must be semi transparent alpha channel. This is crucial
+*   because it allows adding multiple "soft" colors on top of each other
+*   to create a accent, such as when having inline code block inside
+*   custom containers.
+*
+* - \`default\`: The color used purely for subtle indication without any
+*   special meanings attached to it such as bg color for menu hover state.
+*
+* - \`brand\`: Used for primary brand colors, such as link text, button with
+*   brand theme, etc.
+*
+* - \`tip\`: Used to indicate useful information. The default theme uses the
+*   brand color for this by default.
+*
+* - \`warning\`: Used to indicate warning to the users. Used in custom
+*   container, badges, etc.
+*
+* - \`danger\`: Used to show error, or dangerous message to the users. Used
+*   in custom container, badges, etc.
+* -------------------------------------------------------------------------- */
+
+:root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: var(--vp-c-indigo-1);
+  --vp-c-brand-2: var(--vp-c-indigo-2);
+  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-soft: var(--vp-c-indigo-soft);
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+* Component: Button
+* -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+* Component: Home
+* -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
+
+/**
+* Component: Custom Block
+* -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: var(--vp-c-text-1);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+* Component: Algolia
+* -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+`,
+      ),
+      TypeScriptFile(
+        path.join(cwd, ".vitepress", "config.mts"),
+        `import { transformerTwoslash } from "@shikijs/vitepress-twoslash";
+import footnotePlugin from "markdown-it-footnote";
+import { defineConfig } from "vitepress";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: ${JSON.stringify(props.title || "Alchemy")},
+  description: ${JSON.stringify(props.description || "Alchemy Docs")},
+  markdown: {
+    // @ts-ignore
+    codeTransformers: [transformerTwoslash()],
+    theme: ${JSON.stringify(
+      props.theme ?? {
+        light: "light-plus",
+        dark: "dark-plus",
+      },
+    )},
+    config: (md) => md.use(footnotePlugin),
+  },
+  // https://vitepress.dev/reference/default-theme-config
+  themeConfig: ${JSON.stringify({
+    ...props.themeConfig,
+    search: props.themeConfig.search ?? { provider: "local" },
+    nav: props.themeConfig.nav ?? [{ text: "Home", link: "/" }],
+    sidebar: props.themeConfig.sidebar ?? [],
+    socialLinks: props.themeConfig.socialLinks ?? [],
+  })}
+});
+`,
+      ),
+    ]);
+
+    return this(props);
+  },
+);

package/lib/project/vite.d.ts

@@ -1,39 +0,0 @@
-import type { Context } from "../context";
-import { Resource } from "../resource";
-type ViteTemplate = "vanilla" | "vanilla-ts" | "vue" | "vue-ts" | "react" | "react-ts" | "react-swc" | "react-swc-ts" | "preact" | "preact-ts" | "lit" | "lit-ts" | "svelte" | "svelte-ts" | "solid" | "solid-ts" | "qwik" | "qwik-ts";
-export interface ViteProjectProps {
-    /**
-     * The name/path of the project
-     */
-    name: string;
-    /**
-     * The Vite template to use
-     */
-    template: ViteTemplate;
-    /**
-     * The extends to add to the tsconfig.json file
-     */
-    extends?: string;
-    /**
-     * The references to add to the tsconfig.json file
-     */
-    references?: string[];
-    /**
-     * @default false
-     */
-    tailwind?: boolean;
-    /**
-     * Force overwrite the project config tfiles during the update phase
-     *
-     * @default false
-     */
-    overwrite?: boolean;
-}
-export interface ViteProject extends ViteProjectProps, Resource {
-    /**
-     * The name/path of the project
-     */
-    name: string;
-}
-export declare const ViteProject: ((this: Context<ViteProject>, id: string, props: ViteProjectProps) => Promise<ViteProject>) | (((this: any, id: string, props: ViteProjectProps) => never) & (new (_: never) => never));
-export {};

package/lib/project/vite.js

@@ -1,68 +0,0 @@
-import { exec } from "child_process";
-import fs from "fs/promises";
-import path from "path";
-import { promisify } from "util";
-import { Resource } from "../resource";
-import { rm } from "../util/rm";
-const execAsync = promisify(exec);
-export const ViteProject = Resource("project::ViteProject", async function (id, props) {
-    if (this.phase === "delete") {
-        try {
-            if (await fs.exists(props.name)) {
-                // TODO: OS agnostic - fs.rm is slow to delete node_modules/
-                await execAsync("rm -rf " + props.name);
-            }
-        }
-        catch (error) {
-            console.error(`Error deleting project ${id}:`, error);
-        }
-        return this.destroy();
-    }
-    if (this.phase === "update") {
-        if (props.overwrite) {
-            await modifyConfig(props);
-        }
-        else {
-            console.warn("ViteProject does not support updates - the project must be recreated to change the template");
-        }
-    }
-    else {
-        // Create phase
-        await execAsync(`bun create vite ${id} --template ${props.template}`);
-        await modifyConfig(props);
-    }
-    return this(props);
-});
-async function modifyConfig(props) {
-    if (props.tailwind) {
-        await execAsync(`bun add tailwindcss @tailwindcss/vite`);
-        await fs.writeFile(path.join(props.name, "vite.config.ts"), `import tailwindcss from "@tailwindcss/vite";
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-});`);
-        // Add Tailwind CSS import to index.css
-        const indexCssPath = path.join(props.name, "src", "index.css");
-        const currentCss = await fs.readFile(indexCssPath, "utf-8");
-        if (!currentCss.includes('@import "tailwindcss";')) {
-            await fs.writeFile(indexCssPath, '@import "tailwindcss";\n\n' + currentCss);
-        }
-    }
-    await Promise.all([
-        rm(path.join(props.name, "tsconfig.app.json")),
-        rm(path.join(props.name, "tsconfig.node.json")),
-        fs.writeFile(path.join(props.name, "tsconfig.json"), JSON.stringify({
-            extends: props.extends,
-            compilerOptions: {
-                types: ["@cloudflare/workers-types"],
-                allowImportingTsExtensions: true,
-                jsx: "react-jsx",
-            },
-            include: ["vite/*.ts", "src/**/*.ts", "src/**/*.tsx", "src/env.d.ts"],
-            references: props.references?.map((path) => ({ path })),
-        }, null, 2)),
-    ]);
-}

package/src/project/vite.ts

@@ -1,152 +0,0 @@
-import { exec } from "child_process";
-import fs from "fs/promises";
-import path from "path";
-import { promisify } from "util";
-import type { Context } from "../context";
-import { Resource } from "../resource";
-import { rm } from "../util/rm";
-const execAsync = promisify(exec);
-
-type ViteTemplate =
-  | "vanilla"
-  | "vanilla-ts"
-  | "vue"
-  | "vue-ts"
-  | "react"
-  | "react-ts"
-  | "react-swc"
-  | "react-swc-ts"
-  | "preact"
-  | "preact-ts"
-  | "lit"
-  | "lit-ts"
-  | "svelte"
-  | "svelte-ts"
-  | "solid"
-  | "solid-ts"
-  | "qwik"
-  | "qwik-ts";
-
-export interface ViteProjectProps {
-  /**
-   * The name/path of the project
-   */
-  name: string;
-  /**
-   * The Vite template to use
-   */
-  template: ViteTemplate;
-  /**
-   * The extends to add to the tsconfig.json file
-   */
-  extends?: string;
-  /**
-   * The references to add to the tsconfig.json file
-   */
-  references?: string[];
-  /**
-   * @default false
-   */
-  tailwind?: boolean;
-  /**
-   * Force overwrite the project config tfiles during the update phase
-   *
-   * @default false
-   */
-  overwrite?: boolean;
-}
-
-export interface ViteProject extends ViteProjectProps, Resource {
-  /**
-   * The name/path of the project
-   */
-  name: string;
-}
-
-export const ViteProject = Resource(
-  "project::ViteProject",
-  async function (
-    this: Context<ViteProject>,
-    id: string,
-    props: ViteProjectProps,
-  ): Promise<ViteProject> {
-    if (this.phase === "delete") {
-      try {
-        if (await fs.exists(props.name)) {
-          // TODO: OS agnostic - fs.rm is slow to delete node_modules/
-          await execAsync("rm -rf " + props.name);
-        }
-      } catch (error) {
-        console.error(`Error deleting project ${id}:`, error);
-      }
-      return this.destroy();
-    }
-
-    if (this.phase === "update") {
-      if (props.overwrite) {
-        await modifyConfig(props);
-      } else {
-        console.warn(
-          "ViteProject does not support updates - the project must be recreated to change the template",
-        );
-      }
-    } else {
-      // Create phase
-      await execAsync(`bun create vite ${id} --template ${props.template}`);
-
-      await modifyConfig(props);
-    }
-
-    return this(props);
-  },
-);
-
-async function modifyConfig(props: ViteProjectProps) {
-  if (props.tailwind) {
-    await execAsync(`bun add tailwindcss @tailwindcss/vite`);
-
-    await fs.writeFile(
-      path.join(props.name, "vite.config.ts"),
-      `import tailwindcss from "@tailwindcss/vite";
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-});`,
-    );
-
-    // Add Tailwind CSS import to index.css
-    const indexCssPath = path.join(props.name, "src", "index.css");
-    const currentCss = await fs.readFile(indexCssPath, "utf-8");
-    if (!currentCss.includes('@import "tailwindcss";')) {
-      await fs.writeFile(
-        indexCssPath,
-        '@import "tailwindcss";\n\n' + currentCss,
-      );
-    }
-  }
-
-  await Promise.all([
-    rm(path.join(props.name, "tsconfig.app.json")),
-    rm(path.join(props.name, "tsconfig.node.json")),
-    fs.writeFile(
-      path.join(props.name, "tsconfig.json"),
-      JSON.stringify(
-        {
-          extends: props.extends,
-          compilerOptions: {
-            types: ["@cloudflare/workers-types"],
-            allowImportingTsExtensions: true,
-            jsx: "react-jsx",
-          },
-          include: ["vite/*.ts", "src/**/*.ts", "src/**/*.tsx", "src/env.d.ts"],
-          references: props.references?.map((path) => ({ path })),
-        },
-        null,
-        2,
-      ),
-    ),
-  ]);
-}