create-zudoku 0.0.0-e7477f4 → 0.0.0-e792d466

package/dist/templates/default/js/.env.example

@@ -0,0 +1,2 @@
+# Rename this file to `.env` to use environment variables locally
+ZUDOKU_PUBLIC_VAR="my-value"

package/dist/templates/default/js/README-template.md

@@ -16,10 +16,13 @@ pnpm dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/intro.mdx`. You will see the content automatically update as you save the file.
+You can start editing the page by modifying `pages/intro.mdx`. You will see the content
+automatically update as you save the file.
 
 ## Learn More
 
 To learn more about Zudoku, you can visit the [Zudoku documentation](https://zudoku.dev/docs).
 
-To connect with the community join the [GitHub Discussions](https://github.com/zuplo/zudoku/discussions) or [Discord](https://discord.zudoku.dev).
+To connect with the community join the
+[GitHub Discussions](https://github.com/zuplo/zudoku/discussions) or
+[Discord](https://discord.zudoku.dev).

package/dist/templates/default/js/pages/introduction.mdx

@@ -12,4 +12,5 @@ To edit this page, open the `pages/introduction.mdx` file.
 
 You can find the full configuration for your Zudoku site in the `zudoku.config.jsx` file.
 
-For further information on how to customize your site, check out the [Zudoku documentation](https://zudoku.dev/docs).
+For further information on how to customize your site, check out the
+[Zudoku documentation](https://zudoku.dev/docs).

package/dist/templates/default/ts/.env.example

@@ -0,0 +1,2 @@
+# Rename this file to `.env` to use environment variables locally
+ZUDOKU_PUBLIC_VAR="my-value"

package/dist/templates/default/ts/README-template.md

@@ -16,10 +16,13 @@ pnpm dev
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/intro.mdx`. You will see the content automatically update as you save the file.
+You can start editing the page by modifying `pages/intro.mdx`. You will see the content
+automatically update as you save the file.
 
 ## Learn More
 
 To learn more about Zudoku, you can visit the [Zudoku documentation](https://zudoku.dev/docs).
 
-To connect with the community join the [GitHub Discussions](https://github.com/zuplo/zudoku/discussions) or [Discord](https://discord.zudoku.dev).
+To connect with the community join the
+[GitHub Discussions](https://github.com/zuplo/zudoku/discussions) or
+[Discord](https://discord.zudoku.dev).

package/dist/templates/default/ts/pages/introduction.mdx

@@ -12,4 +12,5 @@ To edit this page, open the `pages/introduction.mdx` file.
 
 You can find the full configuration for your Zudoku site in the `zudoku.config.tsx` file.
 
-For further information on how to customize your site, check out the [Zudoku documentation](https://zudoku.dev/docs).
+For further information on how to customize your site, check out the
+[Zudoku documentation](https://zudoku.dev/docs).

package/dist/templates/index.ts

@@ -0,0 +1,156 @@
+// biome-ignore-all lint/suspicious/noConsole: Logging allowed here
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import { bold, cyan } from "picocolors";
+import { copy } from "../helpers/copy";
+import { install } from "../helpers/install";
+
+import type { GetTemplateFileArgs, InstallTemplateArgs } from "./types";
+
+// When bundled by ncc, __dirname points to dist/, but templates are at dist/templates/
+const TEMPLATES_DIR = __dirname.endsWith("dist")
+  ? path.join(__dirname, "templates")
+  : __dirname;
+
+/**
+ * Get the file path for a given file in a template, e.g. "next.config.js".
+ */
+export const getTemplateFile = ({
+  template,
+  mode,
+  file,
+}: GetTemplateFileArgs): string => {
+  return path.join(TEMPLATES_DIR, template, mode, file);
+};
+
+/**
+ * Install a Zudoku internal template to a given `root` directory.
+ */
+export const installTemplate = async ({
+  appName,
+  root,
+  packageManager,
+  isOnline,
+  template,
+  mode,
+  eslint,
+  skipInstall,
+  zudokuVersion,
+}: InstallTemplateArgs) => {
+  console.log(bold(`Using ${packageManager}.`));
+
+  /**
+   * Copy the template files to the target directory.
+   */
+  console.log("\nInitializing project with template:", template, "\n");
+  const templatePath = path.join(TEMPLATES_DIR, template, mode);
+  const copySource = ["**"];
+  if (!eslint) copySource.push("!eslintrc.json");
+
+  await copy(copySource, root, {
+    parents: true,
+    cwd: templatePath,
+    rename(name) {
+      switch (name) {
+        case "gitignore":
+        case "eslintrc.json": {
+          return `.${name}`;
+        }
+        // README.md is ignored by webpack-asset-relocator-loader used by ncc:
+        // https://github.com/vercel/webpack-asset-relocator-loader/blob/e9308683d47ff507253e37c9bcbb99474603192b/src/asset-relocator.js#L227
+        case "README-template.md": {
+          return "README.md";
+        }
+        default: {
+          return name;
+        }
+      }
+    },
+  });
+
+  // update import alias in any files if not using the default
+
+  /** Copy the version from package.json or override for tests. */
+  const version = process.env.ZUDOKU_PRIVATE_TEST_VERSION ?? zudokuVersion;
+
+  /** Create a package.json for the new project and write it to disk. */
+  // biome-ignore lint/suspicious/noExplicitAny: Allow any type
+  const packageJson: any = {
+    name: appName,
+    version: "0.1.0",
+    type: "module",
+    private: true,
+    scripts: {
+      dev: "zudoku dev",
+      build: "zudoku build",
+      preview: "zudoku preview",
+      lint: "eslint",
+    },
+    /**
+     * Default dependencies.
+     */
+    dependencies: {
+      react: ">=19.0.0",
+      "react-dom": ">=19.0.0",
+      zudoku: version,
+    },
+    devDependencies: {},
+  };
+
+  /**
+   * TypeScript projects will have type definitions and other devDependencies.
+   */
+  if (mode === "ts") {
+    packageJson.devDependencies = {
+      ...packageJson.devDependencies,
+      "@types/node": "^22",
+      "@types/react": "^19",
+      "@types/react-dom": "^19",
+      typescript: "^5",
+    };
+  }
+
+  /* Default ESLint dependencies. */
+  if (eslint) {
+    packageJson.devDependencies = {
+      ...packageJson.devDependencies,
+      eslint: "^8",
+    };
+  }
+
+  // Typescript eslint dependencies
+  if (eslint && mode === "ts") {
+    packageJson.devDependencies = {
+      ...packageJson.devDependencies,
+      "@typescript-eslint/eslint-plugin": "^8",
+      "@typescript-eslint/parser": "^8",
+    };
+  }
+
+  const devDeps = Object.keys(packageJson.devDependencies).length;
+  if (!devDeps) delete packageJson.devDependencies;
+
+  await fs.writeFile(
+    path.join(root, "package.json"),
+    JSON.stringify(packageJson, null, 2) + os.EOL,
+  );
+
+  if (skipInstall) return;
+
+  console.log("\nInstalling dependencies:");
+  for (const dependency in packageJson.dependencies)
+    console.log(`- ${cyan(dependency)}`);
+
+  if (devDeps) {
+    console.log("\nInstalling devDependencies:");
+    for (const dependency in packageJson.devDependencies)
+      console.log(`- ${cyan(dependency)}`);
+  }
+
+  console.log();
+
+  await install(packageManager, isOnline);
+};
+
+export * from "./types";

package/dist/templates/types.ts

@@ -0,0 +1,22 @@
+import type { PackageManager } from "../helpers/get-pkg-manager";
+
+export type TemplateType = "default" | "zuplo";
+export type TemplateMode = "js" | "ts";
+
+export interface GetTemplateFileArgs {
+  template: TemplateType;
+  mode: TemplateMode;
+  file: string;
+}
+
+export interface InstallTemplateArgs {
+  appName: string;
+  root: string;
+  packageManager: PackageManager;
+  isOnline: boolean;
+  template: TemplateType;
+  mode: TemplateMode;
+  eslint: boolean;
+  skipInstall: boolean;
+  zudokuVersion: string;
+}

package/dist/templates/zuplo/README-template.md

@@ -1,7 +1,40 @@
 # Developer Portal
 
-This is your Zuplo Developer Portal powered by [Zudoku](https://zudoku.dev). This developer portal allows you to ship a beautiful API documentation for your users. You can customize this portal to match your brand and style.
+This is your [Zuplo Developer Portal](https://zuplo.com/docs/dev-portal/introduction). This
+developer portal allows you to ship a beautiful API documentation for your users. You can customize
+this portal to match your brand and style.
 
-This developer portal is configured to work with your Zuplo API. When you publish your API, your developer portal will be automatically published with the latest API documentation.
+This developer portal is configured to work with your Zuplo API. When you publish your API, your
+developer portal will be automatically published with the latest API documentation.
 
-For more information, visit the [Zudoku Documentation](https://zudoku.dev/docs).
+For more information, visit the [Documentation](https://zuplo.com/docs/dev-portal/introduction).
+
+The Zuplo Developer Portal is built on top of the open source [Zudoku](https://zudoku.dev) project,
+a powerful tool for creating and managing API documentation. If you would like to learn more about
+the project, open a feature request, or contribute to the codebase, visit the
+[Zudoku GitHub repository](https://github.com/zuplo/zudoku).
+
+## Local Development
+
+After you have connected your Zuplo project to
+[source control](https://zuplo.com/docs/articles/source-control) you can clone your project locally.
+Running the Developer Portal locally allows you to see changes in real-time with live-reload.
+
+1. Clone the repository
+
+   ```bash
+   git clone https://github.com/my-org/my-repo
+   cd my-repo
+   ```
+
+2. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+3. Start the development server
+
+   ```bash
+   npm run docs
+   ```

package/dist/templates/zuplo/pages/introduction.mdx

@@ -14,25 +14,37 @@ category: ""
 
 Welcome to your new developer portal that makes sense. 🎉
 
-This is your new developer portal, built with ["Zudoku by Zuplo"](https://github.com/zuplo/zudoku) and designed to elevate your API documentation experience. We've streamlined the setup process so you can focus on what matters most: creating exceptional developer experiences.
+This is your new developer portal, built with ["Zudoku by Zuplo"](https://github.com/zuplo/zudoku)
+and designed to elevate your API documentation experience. We've streamlined the setup process so
+you can focus on what matters most: creating exceptional developer experiences.
 
-Think of this as your API's professional showcase—presenting your endpoints and documentation in the best possible light. Whether you're launching innovative new features or improving existing services, this portal provides the foundation for clear, accessible, and engaging developer documentation.
+Think of this as your API's professional showcase—presenting your endpoints and documentation in the
+best possible light. Whether you're launching innovative new features or improving existing
+services, this portal provides the foundation for clear, accessible, and engaging developer
+documentation.
 
-Let's explore what we've configured for you and how you can customize it to perfectly match your needs.
+Let's explore what we've configured for you and how you can customize it to perfectly match your
+needs.
 
 ## Let's Review Your Configuration
 
-The developer portal is configured in the `zudoku.config.tsx` file. We've created a starter configuration to get you up and running quickly.
-Let's walk you through everything we've set up so you know how to customize it:
+The developer portal is configured in the `zudoku.config.tsx` file. We've created a starter
+configuration to get you up and running quickly. Let's walk you through everything we've set up so
+you know how to customize it:
 
 <Stepper>
 
 1. **Change the Basics**
 
-   First, you may want to change the title and banner we've put in place. These are part of the `page` section in your configuration.
+   First, you may want to change the title and banner we've put in place. These are part of the
+   `page` section in your configuration.
 
    :::tip
-   **Have a company logo?** Learn how you can [add your logo](https://zuplo.com/docs/dev-portal/zudoku/configuration/page#logo) in our documentation.
+
+   **Have a company logo?** Learn how you can
+   [add your logo](https://zuplo.com/docs/dev-portal/zudoku/configuration/site#logo) in our
+   documentation.
+
    :::
 
    ```jsx
@@ -55,8 +67,9 @@ Let's walk you through everything we've set up so you know how to customize it:
 
 1. **API Reference**
 
-   Your [API Reference](/api) is generated from your Zuplo OpenAPI file in `../routes.oas.json`—you can add other APIs whenever you need them.
-   Improve your documentation by adding more details to the OpenAPI file.
+   Your [API Reference](/api) is generated from your Zuplo OpenAPI file in `../routes.oas.json`—you
+   can add other APIs whenever you need them. Improve your documentation by adding more details to
+   the OpenAPI file.
 
    ```json
    {
@@ -71,10 +84,16 @@ Let's walk you through everything we've set up so you know how to customize it:
 
 1. **Authentication & Login**
 
-   We've configured your project to use [Auth0](https://auth0.com) as an authentication provider with our demo account. We support many authentication providers—check the [documentation on how to configure](https://zuplo.com/docs/dev-portal/zudoku/configuration/authentication#authentication-providers) each one.
+   We've configured your project to use [Auth0](https://auth0.com) as an authentication provider
+   with our demo account. We support many authentication providers—check the
+   [documentation on how to configure](https://zuplo.com/docs/dev-portal/zudoku/configuration/authentication#authentication-providers)
+   each one.
 
    :::caution
-   You must change the authentication provider before taking this to **production**. Using our demo provider is not secure for production use.
+
+   You must change the authentication provider before taking this to **production**. Using our demo
+   provider is not secure for production use.
+
    :::
 
    ```json
@@ -92,7 +111,9 @@ Let's walk you through everything we've set up so you know how to customize it:
 1. **API Keys**
 
    We've enabled API Keys on your developer portal. This connects to the API Key Service in Zuplo.
-   To add API Keys for your users, create a consumer with the matching email address in **Services => API Key Service** in Zuplo, or [create a Consumer using the Zuplo API](https://zuplo.com/docs/api/api-keys-consumers#creates-a-consumer).
+   To add API Keys for your users, create a consumer with the matching email address in **Services
+   => API Key Service** in Zuplo, or
+   [create a Consumer using the Zuplo API](https://zuplo.com/docs/api/api-keys-consumers#creates-a-consumer).
 
    ```json
    {
@@ -107,7 +128,8 @@ Let's walk you through everything we've set up so you know how to customize it:
 
 ## Make It Yours
 
-You can customize the look and feel of your documentation site by modifying the `theme` section in `zudoku.config.tsx`. Why not try changing the primary color of your site?
+You can customize the look and feel of your documentation site by modifying the `theme` section in
+`zudoku.config.tsx`. Why not try changing the primary color of your site?
 
 ```json
 {
@@ -126,4 +148,6 @@ You can customize the look and feel of your documentation site by modifying the
 }
 ```
 
-We have extensive customization options available. From colors to fonts and borders, find the [full list of options](https://zuplo.com/docs/dev-portal/zudoku/customization/colors-theme) in our documentation.
+We have extensive customization options available. From colors to fonts and borders, find the
+[full list of options](https://zuplo.com/docs/dev-portal/zudoku/customization/colors-theme) in our
+documentation.

package/dist/templates/zuplo/pages/markdown.mdx

@@ -2,7 +2,9 @@
 
 ## Overview
 
-This page demonstrates various markdown features and formatting options available in our documentation system. Whether you're writing technical documentation, guides, or tutorials, these examples will help you create beautiful and well-structured content.
+This page demonstrates various markdown features and formatting options available in our
+documentation system. Whether you're writing technical documentation, guides, or tutorials, these
+examples will help you create beautiful and well-structured content.
 
 ### Key Features
 
@@ -15,7 +17,8 @@ This page demonstrates various markdown features and formatting options availabl
 
 ## Text Formatting
 
-You can make text **bold** or _italic_ to emphasize important points. For technical terms, use `inline code` formatting.
+You can make text **bold** or _italic_ to emphasize important points. For technical terms, use
+`inline code` formatting.
 
 ### Code Examples
 
@@ -96,7 +99,9 @@ for i in range(10):
 
 ## Conclusion
 
-This example demonstrates the power and flexibility of markdown for creating beautiful documentation. Feel free to use these patterns in your own documentation to maintain consistency and readability.
+This example demonstrates the power and flexibility of markdown for creating beautiful
+documentation. Feel free to use these patterns in your own documentation to maintain consistency and
+readability.
 
 ---
 

package/dist/templates/zuplo/zudoku.config.tsx

@@ -15,6 +15,10 @@ const config: ZudokuConfig = {
       },
     },
   },
+  metadata: {
+    title: "Developer Portal",
+    description: "Developer Portal",
+  },
   navigation: [
     {
       type: "category",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-zudoku",
-  "version": "0.0.0-e7477f4",
+  "version": "0.0.0-e792d466",
   "keywords": [
     "react",
     "zudoku"
@@ -28,11 +28,11 @@
     "@types/validate-npm-package-name": "4.0.2",
     "@vercel/ncc": "0.38.3",
     "async-retry": "1.3.1",
-    "ci-info": "4.2.0",
+    "ci-info": "4.3.0",
     "commander": "14.0.0",
     "conf": "13.1.0",
     "cross-spawn": "7.0.6",
-    "fast-glob": "3.3.1",
+    "fast-glob": "3.3.3",
     "picocolors": "1.1.1",
     "prompts": "2.4.2",
     "tar": "7.4.3",
@@ -44,6 +44,6 @@
   },
   "scripts": {
     "dev": "ncc build ./index.ts -w -o dist/",
-    "build": "rm -rf ./dist && ncc build ./index.ts -o ./dist/ --minify --no-cache --no-source-map-register"
+    "build": "rm -rf ./dist && ncc build ./index.ts -o ./dist/ --minify --no-cache --no-source-map-register && cp -r templates ./dist/"
   }
 }