@docubook/create 1.9.1 → 1.11.2

package/src/dist/styles/globals.css

@@ -0,0 +1,156 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url("../styles/syntax.css");
+@import url("../styles/editor.css");
+
+/* ocean */
+@layer base {
+    :root {
+        --background: 210 60% 97%; /* Lighter sky blue */
+        --foreground: 220 30% 10%; /* Deep navy */
+        --card: 210 50% 99%; /* Almost white blue */
+        --card-foreground: 220 30% 10%;
+        --popover: 210 50% 99%;
+        --popover-foreground: 220 30% 10%;
+        --primary: 220 85% 55%; /* Vibrant azure blue */
+        --primary-foreground: 210 60% 97%;
+        --secondary: 220 40% 80%; /* Softer sky blue */
+        --secondary-foreground: 220 30% 10%;
+        --muted: 220 40% 80%;
+        --muted-foreground: 220 30% 30%; /* Deeper steel blue */
+        --accent: 200 75% 38%; /* Stronger ocean blue */
+        --accent-foreground: 0 0% 100%; /* Pure white */
+        --destructive: 0 70% 50%; /* More vivid red */
+        --destructive-foreground: 220 30% 95%; /* Lightened foreground */
+        --border: 220 20% 85%; /* Slightly darker grey-blue */
+        --input: 220 20% 85%;
+        --ring: 220 50% 50%; /* More noticeable blue ring */
+        --radius: 0.5rem;
+        --chart-1: 210 65% 45%; /* Classic blue */
+        --chart-2: 220 45% 60%; /* Softer sky */
+        --chart-3: 220 75% 45%; /* Azure blue */
+        --chart-4: 200 65% 50%; /* Ocean blue */
+        --chart-5: 240 35% 35%; /* Deeper teal */
+        --line-number-color: rgba(0, 0, 0, 0.05);
+    }
+
+    .dark {
+        --background: 220 20% 8%; /* Deeper midnight navy */
+        --foreground: 220 85% 92%; /* Brighter sky blue */
+        --card: 220 20% 10%; /* Slightly darker midnight */
+        --card-foreground: 220 85% 92%;
+        --popover: 220 20% 10%;
+        --popover-foreground: 220 85% 92%;
+        --primary: 210 75% 65%; /* Softer but bright blue */
+        --primary-foreground: 220 20% 8%;
+        --secondary: 220 35% 12%; /* Darker steel blue */
+        --secondary-foreground: 220 85% 92%;
+        --muted: 220 35% 12%;
+        --muted-foreground: 210 25% 80%; /* Pale navy */
+        --accent: 220 85% 55%; /* Vibrant azure blue */
+        --accent-foreground: 220 85% 92%;
+        --destructive: 0 75% 50%; /* More noticeable red */
+        --destructive-foreground: 220 85% 92%;
+        --border: 220 35% 12%; /* Darker steel blue */
+        --input: 220 35% 12%;
+        --ring: 220 65% 55%; /* Vivid blue ring */
+        --chart-1: 210 65% 45%; /* Classic blue */
+        --chart-2: 220 45% 60%; /* Softer sky */
+        --chart-3: 220 75% 45%; /* Azure blue */
+        --chart-4: 200 65% 50%; /* Ocean blue */
+        --chart-5: 240 35% 35%; /* Deeper teal */
+        --line-number-color: rgba(255, 255, 255, 0.05);
+    }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.prose {
+  margin: 0 !important;
+}
+
+pre {
+  padding: 2px 0 !important;
+  width: inherit !important;
+  overflow-x: auto;
+}
+
+pre>code {
+  display: grid;
+  max-width: inherit !important;
+  padding: 14px 0 !important;
+}
+
+.code-line {
+  padding: 0.75px 16px;
+  @apply border-l-2 border-transparent
+}
+
+.line-number::before {
+  display: inline-block;
+  width: 1rem;
+  margin-right: 22px;
+  margin-left: -2px;
+  color: rgb(110, 110, 110);
+  content: attr(line);
+  font-size: 13.5px;
+  text-align: right;
+}
+
+.highlight-line {
+  @apply bg-primary/5 border-l-2 border-primary/30;
+}
+
+.rehype-code-title {
+  @apply px-2 -mb-8 w-full text-sm pb-5 font-medium mt-5 font-code;
+}
+
+.highlight-comp>code {
+  background-color: transparent !important;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@layer utilities {
+    .animate-shine {
+      --animate-shine: shine var(--duration) infinite linear;
+      animation: var(--animate-shine);
+      background-size: 200% 200%;
+    }
+
+    @keyframes shine {
+      0% {
+        background-position: 0% 0%;
+      }
+      50% {
+        background-position: 100% 100%;
+      }
+      100% {
+        background-position: 0% 0%;
+      }
+    }
+  }

package/src/dist/styles/syntax.css

@@ -0,0 +1,100 @@
+/* ocean */
+/* Light Mode */
+.keyword {
+  color: #2563eb;
+  /* Vibrant Blue */
+}
+
+.function {
+  color: #0284c7;
+  /* Deep Sky Blue */
+}
+
+.punctuation {
+  color: #475569;
+  /* Cool Slate Gray */
+}
+
+.comment {
+  color: #64748b;
+  /* Muted Slate */
+}
+
+.string,
+.constant,
+.annotation,
+.boolean,
+.number {
+  color: #0369a1;
+  /* Dark Cyan */
+}
+
+.tag {
+  color: #1e40af;
+  /* Indigo */
+}
+
+.attr-name {
+  color: #0ea5e9;
+  /* Light Sky Blue */
+}
+
+.attr-value {
+  color: #2563eb;
+  /* Bright Blue */
+}
+
+/* Dark Mode */
+.dark .keyword {
+  color: #93c5fd;
+  /* Soft Blue */
+}
+
+.dark .function {
+  color: #38bdf8;
+  /* Sky Blue */
+}
+
+.dark .string,
+.dark .constant,
+.dark .annotation,
+.dark .boolean,
+.dark .number {
+  color: #60a5fa;
+  /* Light Blue */
+}
+
+.dark .tag {
+  color: #3b82f6;
+  /* Bold Blue */
+}
+
+.dark .attr-name {
+  color: #67e8f9;
+  /* Aqua */
+}
+
+.dark .attr-value {
+  color: #93c5fd;
+  /* Frosty Blue */
+}
+
+.youtube {
+  position: relative;
+  padding-bottom: 56.25%; /* Rasio aspek 16:9 */
+  height: 0;
+  overflow: hidden;
+  background: #000; /* Latar belakang hitam untuk memadukan player */
+  border-radius: 8px; /* Sudut melengkung */
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Bayangan lembut */
+}
+
+.youtube iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 8px; /* Sudut melengkung pada iframe */
+}

package/src/dist/tailwind.config.ts

@@ -0,0 +1,112 @@
+import type { Config } from "tailwindcss";
+
+const config = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
+  prefix: "",
+  safelist: ["line-clamp-3","line-clam-2"],
+  theme: {
+  	container: {
+  		center: true,
+  		padding: '2rem',
+  		screens: {
+  			'2xl': '1440px'
+  		}
+  	},
+  	extend: {
+  		colors: {
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			sidebar: {
+  				DEFAULT: 'hsl(var(--sidebar-background))',
+  				foreground: 'hsl(var(--sidebar-foreground))',
+  				primary: 'hsl(var(--sidebar-primary))',
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  				accent: 'hsl(var(--sidebar-accent))',
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  				border: 'hsl(var(--sidebar-border))',
+  				ring: 'hsl(var(--sidebar-ring))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		fontFamily: {
+  			code: ["var(--font-geist-mono)"],
+  			regular: ["var(--font-geist-sans)"]
+  		},
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			},
+  			'shiny-text': {
+  				'0%, 90%, 100%': {
+  					'background-position': 'calc(-100% - var(--shiny-width)) 0'
+  				},
+  				'30%, 60%': {
+  					'background-position': 'calc(100% + var(--shiny-width)) 0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out',
+  			'shiny-text': 'shiny-text 8s infinite'
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+} satisfies Config;
+
+export default config;

package/src/dist/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/src/index.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+import { initializeProgram } from "./cli/program.js";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+// Get the directory name of the current module
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Read version from package.json
+const packageJsonPath = path.join(__dirname, '..', 'package.json');
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));
+const VERSION = packageJson.version;
+
+// Initialize and parse CLI arguments
+const program = initializeProgram(VERSION);
+program.parse(process.argv);

package/src/installer/projectInstaller.js

@@ -0,0 +1,125 @@
+import path from "path";
+import fs from "fs";
+import ora from "ora";
+import chalk from "chalk";
+import { execSync } from "child_process";
+import { fileURLToPath } from "url";
+import log from "../utils/logger.js";
+import { configurePackageManager } from "../utils/packageManager.js";
+import { displayManualSteps, simulateInstallation, displayNextSteps } from "../utils/display.js";
+
+/**
+ * Creates a new DocuBook project
+ * @param {Object} options - Installation options
+ * @param {string} options.directoryName - Project directory name
+ * @param {string} options.packageManager - Package manager to use
+ * @param {string} options.version - Package manager version
+ * @param {boolean} options.installNow - Whether to install dependencies immediately
+ * @returns {Promise<void>}
+ */
+export async function createProject({ directoryName, packageManager, version, installNow }) {
+  const projectPath = path.resolve(process.cwd(), directoryName);
+  const spinner = ora("Creating your DocuBook project...").start();
+
+  try {
+    // Get the template directory path
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = path.dirname(__filename);
+    const templatePath = path.join(__dirname, "../dist");
+
+    // Create project directory if it doesn't exist
+    if (!fs.existsSync(projectPath)) {
+      fs.mkdirSync(projectPath, { recursive: true });
+    }
+
+    // Copy template files to project directory
+    copyDirectoryRecursive(templatePath, projectPath);
+
+    // Configure package manager specific settings
+    configurePackageManager(packageManager, projectPath);
+
+    // Update package.json with package manager info
+    const pkgPath = path.join(projectPath, "package.json");
+    let pkgVersion = "";
+    if (fs.existsSync(pkgPath)) {
+      const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
+      pkg.packageManager = `${packageManager}@${version}`;
+      pkgVersion = pkg.version || "";
+      fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    }
+
+    spinner.succeed();
+    log.success(`DocuBook v${pkgVersion} using "${packageManager}"`);
+
+    if (!installNow) {
+      displayManualSteps(directoryName, packageManager);
+      return;
+    }
+
+    await installDependencies(directoryName, packageManager, projectPath);
+  } catch (err) {
+    spinner.fail("Failed to create project.");
+    log.error(err.message);
+    throw err;
+  }
+}
+
+/**
+ * Recursively copies a directory
+ * @param {string} source - Source directory path
+ * @param {string} destination - Destination directory path
+ */
+function copyDirectoryRecursive(source, destination) {
+  // Create destination directory if it doesn't exist
+  if (!fs.existsSync(destination)) {
+    fs.mkdirSync(destination, { recursive: true });
+  }
+
+  // Read source directory contents
+  const entries = fs.readdirSync(source, { withFileTypes: true });
+
+  // Process each entry
+  for (const entry of entries) {
+    const srcPath = path.join(source, entry.name);
+    const destPath = path.join(destination, entry.name);
+
+    // If entry is a directory, recursively copy it
+    if (entry.isDirectory()) {
+      copyDirectoryRecursive(srcPath, destPath);
+    } else {
+      // Otherwise, copy the file
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+/**
+ * Installs project dependencies
+ * @param {string} directoryName - Project directory name
+ * @param {string} packageManager - Package manager to use
+ * @param {string} projectPath - Path to the project directory
+ * @returns {Promise<void>}
+ */
+async function installDependencies(directoryName, packageManager, projectPath) {
+  log.info("Installing dependencies...");
+  console.log(chalk.yellow("This is a joke for you:"));
+  console.log(
+    chalk.white(
+      "You don't need to worry about this process not running, you just need the latest device for a faster installation process."
+    )
+  );
+
+  const installSpinner = ora(`Using ${packageManager}...`).start();
+
+  try {
+    execSync(`${packageManager} install`, { cwd: projectPath, stdio: "ignore" });
+    installSpinner.succeed("Dependencies installed.");
+
+    await simulateInstallation();
+    displayNextSteps(directoryName, packageManager);
+  } catch (error) {
+    installSpinner.fail("Failed to install dependencies.");
+    displayManualSteps(directoryName, packageManager);
+    throw new Error("Failed to install dependencies");
+  }
+}

package/src/utils/display.js

@@ -0,0 +1,83 @@
+import chalk from "chalk";
+import figlet from "figlet";
+import boxen from "boxen";
+import cliProgress from "cli-progress";
+
+/**
+ * Displays ASCII art "DocuBook" when CLI is launched
+ * @returns {Promise} Promise that resolves when ASCII art is displayed
+ */
+export function displayAsciiArt() {
+  return new Promise((resolve, reject) => {
+    figlet.text("DocuBook", { horizontalLayout: "full" }, (err, data) => {
+      if (err) return reject(err);
+      console.log(chalk.green(data));
+      resolve();
+    });
+  });
+}
+
+/**
+ * Displays a progress bar to simulate final setup
+ * @returns {Promise} Promise that resolves when simulation completes
+ */
+export async function simulateInstallation() {
+  const bar = new cliProgress.SingleBar(
+    {
+      format: 'Finishing Setup |' + chalk.green('{bar}') + '| {percentage}% || {value}/{total}',
+      barCompleteChar: '\u2588',
+      barIncompleteChar: '\u2591',
+    },
+    cliProgress.Presets.shades_classic
+  );
+
+  bar.start(100, 0);
+  for (let i = 0; i <= 100; i++) {
+    await new Promise((r) => setTimeout(r, 50));
+    bar.update(i);
+  }
+  bar.stop();
+}
+
+/**
+ * Displays manual installation steps if automatic installation fails
+ * @param {string} projectDirectory - Project directory name
+ * @param {string} packageManager - Package manager being used
+ */
+export function displayManualSteps(projectDirectory, packageManager) {
+  const manualInstructions = `
+  Please follow these steps manually to finish setting up your project:
+
+  1. ${chalk.cyan(`cd ${projectDirectory}`)}
+  2. ${chalk.cyan(`${packageManager} install`)}
+  3. ${chalk.cyan(`${packageManager} run dev`)}
+  `;
+
+  console.log(
+    boxen(manualInstructions, {
+      padding: 0.5,
+      borderStyle: "round",
+      borderColor: "cyan",
+    })
+  );
+}
+
+/**
+ * Displays next steps after successful installation
+ * @param {string} directoryName - Project directory name
+ * @param {string} packageManager - Package manager being used
+ */
+export function displayNextSteps(directoryName, packageManager) {
+  console.log(
+    boxen(
+      `Next Steps:\n\n` +
+        `1. ${chalk.cyan(`cd ${directoryName}`)}\n` +
+        `2. ${chalk.cyan(`${packageManager} run dev`)}`,
+      {
+        padding: 0.5,
+        borderStyle: "round",
+        borderColor: "cyan",
+      }
+    )
+  );
+}

package/src/utils/logger.js

@@ -0,0 +1,11 @@
+import chalk from "chalk";
+
+// Logging helper with styles
+const log = {
+  info: (msg) => console.log(chalk.cyan("ℹ️  " + msg)),
+  success: (msg) => console.log(chalk.green("✔ " + msg)),
+  warn: (msg) => console.log(chalk.yellow("⚠️  " + msg)),
+  error: (msg) => console.log(chalk.red("✖ " + msg)),
+};
+
+export default log;

package/src/utils/packageManager.js

@@ -0,0 +1,54 @@
+import { execSync } from "child_process";
+import fs from "fs";
+import path from "path";
+
+/**
+ * Gets the version of the specified package manager
+ * @param {string} pm - Package manager name
+ * @returns {string|null} Version string or null if not installed
+ */
+export function getPackageManagerVersion(pm) {
+  try {
+    return execSync(`${pm} --version`).toString().trim();
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Detects the default package manager from user environment
+ * @returns {string} Default package manager name
+ */
+export function detectDefaultPackageManager() {
+  const userAgent = process.env.npm_config_user_agent || "";
+  if (userAgent.includes("pnpm")) return "pnpm";
+  if (userAgent.includes("yarn")) return "yarn";
+  if (userAgent.includes("bun")) return "bun";
+  return "npm";
+}
+
+/**
+ * Updates postcss config file extension for Bun compatibility
+ * @param {string} projectPath - Path to the project directory
+ */
+export function updatePostcssConfig(projectPath) {
+  const oldPath = path.join(projectPath, "postcss.config.js");
+  const newPath = path.join(projectPath, "postcss.config.cjs");
+  if (fs.existsSync(oldPath)) {
+    fs.renameSync(oldPath, newPath);
+  }
+}
+
+/**
+ * Configures package manager specific settings
+ * @param {string} packageManager - Package manager name
+ * @param {string} projectPath - Path to the project directory
+ */
+export function configurePackageManager(packageManager, projectPath) {
+  if (packageManager === "bun") {
+    updatePostcssConfig(projectPath);
+  } else if (packageManager === "yarn") {
+    const yarnrcPath = path.join(projectPath, ".yarnrc.yml");
+    fs.writeFileSync(yarnrcPath, "nodeLinker: node-modules\n");
+  }
+}