alchemy 0.2.2 → 0.2.3

package/src/vitepress/home-page.ts

@@ -0,0 +1,166 @@
+import yaml from "yaml";
+
+/**
+ * Image that can be themed for light/dark mode
+ */
+export interface ThemeableImage {
+  /**
+   * Image source URL
+   */
+  src?: string;
+
+  /**
+   * Image alt text
+   */
+  alt?: string;
+
+  /**
+   * Light theme image URL
+   */
+  light?: string;
+
+  /**
+   * Dark theme image URL
+   */
+  dark?: string;
+}
+
+/**
+ * Hero action button configuration
+ */
+export interface HeroAction {
+  /**
+   * Color theme of the button
+   * @default "brand"
+   */
+  theme?: "brand" | "alt";
+
+  /**
+   * Label of the button
+   */
+  text: string;
+
+  /**
+   * Destination link of the button
+   */
+  link: string;
+
+  /**
+   * Link target attribute
+   */
+  target?: string;
+
+  /**
+   * Link rel attribute
+   */
+  rel?: string;
+}
+
+/**
+ * Hero section configuration
+ */
+export interface Hero {
+  /**
+   * The string shown top of text. Comes with brand color
+   * and expected to be short, such as product name.
+   */
+  name?: string;
+
+  /**
+   * The main text for the hero section. This will be defined
+   * as h1 tag.
+   */
+  text: string;
+
+  /**
+   * Tagline displayed below text
+   */
+  tagline?: string;
+
+  /**
+   * The image displayed next to the text and tagline area
+   */
+  image?: string | ThemeableImage;
+
+  /**
+   * Action buttons to display in home hero section
+   */
+  actions?: HeroAction[];
+}
+
+/**
+ * Feature item configuration
+ */
+export interface Feature {
+  /**
+   * Show icon on each feature box
+   */
+  icon?: string | ThemeableImage;
+
+  /**
+   * Title of the feature
+   */
+  title: string;
+
+  /**
+   * Details of the feature
+   */
+  details: string;
+
+  /**
+   * Link when clicked on feature component
+   */
+  link?: string;
+
+  /**
+   * Link text to be shown inside feature component
+   */
+  linkText?: string;
+
+  /**
+   * Link rel attribute
+   */
+  rel?: string;
+
+  /**
+   * Link target attribute
+   */
+  target?: string;
+}
+
+/**
+ * VitePress home page configuration
+ */
+export interface HomePage {
+  /**
+   * Use home page layout
+   */
+  layout: "home";
+
+  /**
+   * Hero section configuration
+   */
+  hero?: Hero;
+
+  /**
+   * Features section configuration
+   */
+  features?: Feature[];
+
+  /**
+   * Whether to apply default markdown styles
+   * @default true
+   */
+  markdownStyles?: boolean;
+}
+
+/**
+ * Parse YAML frontmatter to home page config
+ */
+export function parseHomePage(content: string): HomePage {
+  const match = content.match(/^---\n([\s\S]*?)\n---/);
+  if (!match) {
+    throw new Error("Invalid frontmatter format");
+  }
+  return yaml.parse(match[1]) as HomePage;
+}

package/src/vitepress/index.md

@@ -0,0 +1,75 @@
+# Docs Index
+
+```ts twoslash
+// @noErrors
+import path from "path";
+
+import alchemy, { Resource, Context } from "alchemy";
+
+import { Zone } from "alchemy/cloudflare";
+
+type alchemy = any;
+
+await using app = alchemy("github:alchemy", {
+  //          ^?
+  stage: "prod",
+  phase: process.argv.includes("--destroy") ? "destroy" : "up",
+  // pass the password in (you can get it from anywhere, e.g. stdin)
+  password: process.env.SECRET_PASSPHRASE,
+  quiet: process.argv.includes("--verbose") ? false : true,
+});
+
+export interface Product {}
+
+export const Product = Resource(
+  "stripe::Product",
+  async function (
+    this: Context<any>,
+    id: string,
+    props: any,
+  ): Promise<Product> {
+    this.
+    //   ^|
+  }
+);
+```
+
+```ts twoslash
+// @noErrors
+// @esModuleInterop
+import express from "express"
+const app = {
+  get(path: string, fn: (req: any, res: { send(): void }))
+}
+app.get("/", function (req, res) {
+  res.sen
+//       ^|
+})
+app.listen(3000)
+```
+
+```ts twoslash
+// @module: esnext
+// @filename: maths.ts
+export function absolute(num: number) {
+  if (num < 0) return num * -1;
+  return num;
+}
+// @filename: index.ts
+import { absolute } from "./maths";
+const value = absolute(-1);
+```
+
+```ts twoslash
+// @module: esnext
+// @filename: maths.ts
+export function absolute(num: number) {
+  if (num < 0) return num * -1;
+  return num;
+}
+// @filename: index.ts
+// ---cut---
+import { absolute } from "./maths";
+const value = absolute(-1);
+//    ^?
+```

package/src/vitepress/index.ts

@@ -0,0 +1,2 @@
+export * from "./home-page";
+export * from "./vitepress";

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,90 +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[];
-    /**
-     * Add Tailwind CSS to the project
-     * @default false
-     */
-    tailwind?: boolean;
-    /**
-     * Add Tanstack Router to the project
-     * @default false
-     */
-    tanstack?: boolean;
-    /**
-     * Add Shadcn UI to the project
-     * @default false
-     */
-    shadcn?: {
-        /**
-         * The base color to use
-         * @default "neutral"
-         */
-        baseColor?: "neutral" | "gray" | "zinc" | "stone" | "slate";
-        /**
-         * Use default configuration
-         * @default false
-         */
-        defaults?: boolean;
-        /**
-         * Force overwrite of existing configuration
-         * @default false
-         */
-        force?: boolean;
-        /**
-         * The working directory
-         * @default current directory
-         */
-        cwd?: string;
-        /**
-         * Mute output
-         * @default false
-         */
-        silent?: boolean;
-        /**
-         * Use the src directory when creating a new project
-         * @default false
-         */
-        srcDir?: boolean;
-        /**
-         * Use css variables for theming
-         * @default true
-         */
-        cssVariables?: boolean;
-        /**
-         * The components to add
-         */
-        components?: string[];
-    };
-    /**
-     * Force overwrite the project config files 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 {};