framecode 1.0.0

package/src/cli/commands/render.ts

@@ -0,0 +1,379 @@
+import { Command } from "commander";
+import { bundle } from "@remotion/bundler";
+import { renderMedia, selectComposition } from "@remotion/renderer";
+import { loadConfig } from "../utils/config";
+import { logger } from "../utils/logger";
+import {
+  themeSchema,
+  animationSchema,
+  presetSchema,
+  presetDimensions,
+  brandSchema,
+} from "../../calculate-metadata/schema";
+import type { Theme } from "../../calculate-metadata/theme";
+import type { BrandConfig } from "../../calculate-metadata/schema";
+import { basename, join } from "path";
+import type { StaticFile } from "../../calculate-metadata/get-files";
+import {
+  expandGlobPatterns,
+  isInteractiveTerminal,
+  scanCurrentDirectory,
+} from "../utils/files";
+import {
+  processCode,
+  type Animation,
+  type StepConfig,
+} from "../utils/process-code";
+import {
+  runInteractive,
+  createRenderSpinner,
+  renderOutro,
+} from "../utils/prompts";
+
+const entryPoint = join(import.meta.dir, "../../index.ts");
+
+async function readFiles(files: string[]): Promise<StaticFile[]> {
+  return Promise.all(
+    files.map(async (filePath) => {
+      const file = Bun.file(filePath);
+      if (!(await file.exists())) {
+        throw new Error(`File not found: ${filePath}`);
+      }
+      return {
+        filename: basename(filePath),
+        value: await file.text(),
+      };
+    }),
+  );
+}
+
+function getImageMimeType(path: string): string {
+  const extension = path.toLowerCase().split(".").pop();
+
+  switch (extension) {
+    case "png":
+      return "image/png";
+    case "jpg":
+    case "jpeg":
+      return "image/jpeg";
+    case "webp":
+      return "image/webp";
+    case "svg":
+      return "image/svg+xml";
+    case "gif":
+      return "image/gif";
+    default:
+      return "application/octet-stream";
+  }
+}
+
+async function normalizeLogoSource(logo: string): Promise<string> {
+  if (/^(https?:)?\/\//i.test(logo) || logo.startsWith("data:")) {
+    return logo;
+  }
+
+  const file = Bun.file(logo);
+  if (!(await file.exists())) {
+    logger.warn(`Brand logo not found: ${logo}`);
+    return logo;
+  }
+
+  const bytes = await file.arrayBuffer();
+  const encoded = Buffer.from(bytes).toString("base64");
+  const mimeType = getImageMimeType(logo);
+  return `data:${mimeType};base64,${encoded}`;
+}
+
+async function normalizeBrand(
+  brand?: Partial<BrandConfig>,
+): Promise<BrandConfig | undefined> {
+  if (!brand) {
+    return undefined;
+  }
+
+  const logo = brand.logo?.trim();
+  const twitter = brand.twitter?.trim();
+  const website = brand.website?.trim();
+  const accent = brand.accent?.trim();
+
+  const normalized: BrandConfig = {};
+
+  if (logo) {
+    normalized.logo = await normalizeLogoSource(logo);
+  }
+
+  if (twitter) {
+    normalized.twitter = twitter.startsWith("@") ? twitter : `@${twitter}`;
+  }
+
+  if (website) {
+    normalized.website = /^(https?:)?\/\//i.test(website)
+      ? website
+      : `https://${website}`;
+  }
+
+  if (accent) {
+    normalized.accent = accent;
+  }
+
+  if (Object.keys(normalized).length === 0) {
+    return undefined;
+  }
+
+  return normalized;
+}
+
+export const renderCommand = new Command("render")
+  .description("Render code files to video")
+  .argument("[files...]", "code files or glob patterns")
+  .option("-o, --output <path>", "output file path", "output.mp4")
+  .option("-t, --theme <name>", "syntax theme")
+  .option("-p, --preset <name>", "post|tutorial|square")
+  .option("-a, --animation <name>", "morph|typewriter|cascade")
+  .option("--cps <number>", "chars per second (typewriter)", "30")
+  .option("-f, --fps <number>", "frames per second", "30")
+  .option("-c, --config <path>", "config file path")
+  .option("-i, --interactive", "launch interactive mode")
+  .option("-y, --yes", "skip confirmation prompt")
+  .option("--logo <pathOrUrl>", "brand logo image")
+  .option("--twitter <handle>", "Twitter/X handle watermark")
+  .option("--website <url>", "website watermark")
+  .option("--accent <color>", "brand accent color override")
+  .option("--no-interactive", "disable interactive mode (for CI)")
+  .addHelpText(
+    "after",
+    `
+Examples:
+  $ framecode render code.ts
+  $ framecode render "src/**/*.ts"
+  $ framecode render "src/*.ts" "!src/*.test.ts"
+  $ framecode render src/ --interactive
+  $ framecode render -i
+  $ framecode render code.ts -y`,
+  )
+  .action(async (filesArg: string[], options) => {
+    const config = await loadConfig(options.config);
+    const isCI = !isInteractiveTerminal();
+
+    let files: string[];
+    if (filesArg.length === 0) {
+      files = await scanCurrentDirectory();
+      if (files.length === 0) {
+        logger.error("No code files found in current directory");
+        process.exit(1);
+      }
+    } else {
+      files = await expandGlobPatterns(filesArg);
+      if (files.length === 0) {
+        logger.error("No files matched the provided patterns");
+        process.exit(1);
+      }
+    }
+
+    const shouldInteractive =
+      options.interactive === true ||
+      (filesArg.length === 0 && !isCI && options.interactive !== false);
+
+    let theme: string;
+    let preset: string;
+    let animation: string;
+    let charsPerSecond: number;
+    let fps: number;
+    let output: string;
+    let selectedFiles: string[];
+    let useInteractiveProgress = false;
+    let interactiveStepConfigs: StepConfig[] | undefined;
+    let brand: BrandConfig | undefined;
+
+    if (shouldInteractive) {
+      const result = await runInteractive({
+        files,
+        theme: options.theme,
+        animation: options.animation,
+        preset: options.preset,
+        output: options.output,
+        cps: options.cps ? Number(options.cps) : undefined,
+        fps: options.fps ? Number(options.fps) : undefined,
+        yes: options.yes,
+        config,
+      });
+
+      selectedFiles = result.files;
+      theme = result.theme;
+      animation = result.animation;
+      preset = result.preset;
+      output = result.output;
+      charsPerSecond = result.cps;
+      fps = result.fps;
+      interactiveStepConfigs = result.stepConfigs;
+      useInteractiveProgress = true;
+
+      brand = await normalizeBrand({
+        logo: options.logo ?? config.brand?.logo,
+        twitter: options.twitter ?? config.brand?.twitter,
+        website: options.website ?? config.brand?.website,
+        accent: options.accent ?? config.brand?.accent,
+      });
+    } else {
+      selectedFiles = files;
+      theme = options.theme ?? config.theme ?? "vercel-dark";
+      preset = options.preset ?? config.preset ?? "tutorial";
+      animation = options.animation ?? config.animation ?? "morph";
+      charsPerSecond = Number(options.cps ?? config.charsPerSecond ?? 30);
+      fps = Number(options.fps ?? config.fps ?? 30);
+      output = options.output;
+
+      brand = await normalizeBrand({
+        logo: options.logo ?? config.brand?.logo,
+        twitter: options.twitter ?? config.brand?.twitter,
+        website: options.website ?? config.brand?.website,
+        accent: options.accent ?? config.brand?.accent,
+      });
+    }
+
+    if (!themeSchema.safeParse(theme).success) {
+      logger.error(`Invalid theme: ${theme}`);
+      logger.info("Run 'framecode themes' to see available themes");
+      process.exit(1);
+    }
+
+    if (!animationSchema.safeParse(animation).success) {
+      logger.error(`Invalid animation: ${animation}`);
+      logger.info("Valid: morph, typewriter, cascade");
+      process.exit(1);
+    }
+
+    if (!presetSchema.safeParse(preset).success) {
+      logger.error(`Invalid preset: ${preset}`);
+      logger.info("Valid: post (9:16), tutorial (16:9), square (1:1)");
+      process.exit(1);
+    }
+
+    if (isNaN(charsPerSecond) || charsPerSecond <= 0) {
+      logger.error(`Invalid chars-per-second: ${options.cps}`);
+      process.exit(1);
+    }
+
+    if (isNaN(fps) || fps <= 0 || fps > 120) {
+      logger.error(`Invalid fps: ${options.fps} (must be 1-120)`);
+      process.exit(1);
+    }
+
+    if (brand && !brandSchema.safeParse(brand).success) {
+      logger.error("Invalid brand configuration");
+      logger.info(
+        "Accent color must be hex format (#RGB or #RRGGBB) when provided",
+      );
+      process.exit(1);
+    }
+
+    const filenames = new Set(selectedFiles.map((f) => basename(f)));
+    const stepConfigsToValidate = interactiveStepConfigs ?? config.stepConfigs;
+
+    if (stepConfigsToValidate) {
+      for (const stepConfig of stepConfigsToValidate) {
+        if (!filenames.has(stepConfig.file)) {
+          logger.warn(
+            `Step config for "${stepConfig.file}" doesn't match any provided file`,
+          );
+        }
+
+        const effectiveAnimation = stepConfig.animation ?? animation;
+        if (
+          stepConfig.charsPerSecond !== undefined &&
+          effectiveAnimation !== "typewriter"
+        ) {
+          logger.warn(
+            `charsPerSecond for "${stepConfig.file}" is only used with typewriter animation`,
+          );
+        }
+      }
+    }
+
+    const staticFiles = await readFiles(selectedFiles);
+    const presetDims =
+      presetDimensions[preset as keyof typeof presetDimensions];
+
+    const spinner = useInteractiveProgress ? createRenderSpinner() : null;
+
+    if (!useInteractiveProgress) {
+      logger.info(
+        `Rendering ${selectedFiles.length} file(s) with ${theme} theme`,
+      );
+      logger.info(
+        `Preset: ${preset} (${presetDims.width}x${presetDims.height})`,
+      );
+    }
+
+    const finalStepConfigs = interactiveStepConfigs ?? config.stepConfigs;
+
+    spinner?.start("Processing code...");
+    const processed = await processCode(
+      staticFiles,
+      theme as Theme,
+      animation as Animation,
+      charsPerSecond,
+      presetDims.width,
+      presetDims.height,
+      finalStepConfigs,
+    );
+
+    const inputProps = {
+      theme,
+      preset,
+      animation,
+      charsPerSecond,
+      brand,
+      steps: processed.steps,
+      themeColors: processed.themeColors,
+      codeWidth: processed.codeWidth,
+    };
+
+    try {
+      spinner?.message("Bundling...");
+      const bundleLocation = await bundle({
+        entryPoint,
+        onProgress: () => {},
+      });
+
+      const composition = await selectComposition({
+        serveUrl: bundleLocation,
+        id: "Main",
+        inputProps,
+        logLevel: "error",
+        onBrowserLog: () => {},
+      });
+
+      spinner?.message("Rendering video...");
+      await renderMedia({
+        composition: {
+          ...composition,
+          width: presetDims.width,
+          height: presetDims.height,
+          fps,
+        },
+        serveUrl: bundleLocation,
+        codec: "h264",
+        logLevel: "error",
+        onBrowserLog: () => {},
+        outputLocation: output,
+        inputProps,
+        onProgress: () => {},
+      });
+
+      spinner?.stop("Done!");
+
+      if (useInteractiveProgress) {
+        renderOutro(output);
+      } else {
+        logger.success(`Video saved to ${output}`);
+      }
+    } catch (error) {
+      spinner?.stop("Failed");
+      logger.error("Render failed");
+      if (error instanceof Error) {
+        logger.error(error.message);
+      }
+      process.exit(1);
+    }
+  });

package/src/cli/commands/themes.ts

@@ -0,0 +1,46 @@
+import { Command } from "commander";
+import chalk from "chalk";
+import {
+  themeSchema,
+  getThemeColors,
+  curatedThemeNames,
+} from "../../calculate-metadata/theme";
+
+export const themesCommand = new Command("themes")
+  .description("List available themes")
+  .action(async () => {
+    const themes = themeSchema.options;
+    const custom = new Set<string>(curatedThemeNames);
+    const builtIns = themes.filter((theme) => custom.has(theme));
+    const extra = themes.filter((theme) => !custom.has(theme));
+
+    console.log(chalk.bold("\nBuilt-in Themes:\n"));
+
+    for (const theme of builtIns) {
+      try {
+        const colors = await getThemeColors(theme);
+        const preview = chalk.bgHex(colors.background).hex(colors.foreground)(
+          ` ${theme} `,
+        );
+        console.log(`  ${preview}`);
+      } catch {
+        console.log(`  ${theme}`);
+      }
+    }
+
+    console.log(chalk.bold("\nAll Themes:\n"));
+
+    for (const theme of extra) {
+      try {
+        const colors = await getThemeColors(theme);
+        const preview = chalk.bgHex(colors.background).hex(colors.foreground)(
+          ` ${theme} `,
+        );
+        console.log(`  ${preview}`);
+      } catch {
+        console.log(`  ${theme}`);
+      }
+    }
+
+    console.log(chalk.dim(`\nTotal: ${themes.length} themes\n`));
+  });

package/src/cli/index.ts

@@ -0,0 +1,18 @@
+#!/usr/bin/env bun
+import { Command } from "commander";
+import { renderCommand } from "./commands/render";
+import { themesCommand } from "./commands/themes";
+import { initCommand } from "./commands/init";
+
+const program = new Command();
+
+program
+  .name("framecode")
+  .description("CLI-first video generator that turns code into videos")
+  .version("0.1.0");
+
+program.addCommand(renderCommand);
+program.addCommand(themesCommand);
+program.addCommand(initCommand);
+
+program.parseAsync();

package/src/cli/utils/config.ts

@@ -0,0 +1,83 @@
+import { z } from "zod";
+import { homedir } from "os";
+import { join, dirname } from "path";
+import { mkdir } from "fs/promises";
+import {
+  themeSchema,
+  animationSchema,
+  presetSchema,
+  stepConfigSchema,
+  brandSchema,
+} from "../../calculate-metadata/schema";
+
+const configSchema = z.object({
+  theme: themeSchema.optional(),
+  preset: presetSchema.optional(),
+  animation: animationSchema.optional(),
+  charsPerSecond: z.number().int().positive().optional(),
+  fps: z.number().int().min(1).max(120).optional(),
+  brand: brandSchema.optional(),
+  stepConfigs: z.array(stepConfigSchema).optional(),
+});
+
+export type Config = z.infer<typeof configSchema>;
+
+export async function loadConfig(configPath?: string): Promise<Config> {
+  if (configPath) {
+    const file = Bun.file(configPath);
+    if (!(await file.exists())) {
+      console.warn(`Warning: Config file not found: ${configPath}`);
+      return {};
+    }
+    try {
+      const json = await file.json();
+      return configSchema.parse(json);
+    } catch {
+      console.warn(`Warning: Failed to parse config file: ${configPath}`);
+      return {};
+    }
+  }
+
+  const paths = [
+    "./framecode.json",
+    join(homedir(), ".config", "framecode", "config.json"),
+  ];
+
+  for (const path of paths) {
+    try {
+      const file = Bun.file(path);
+      const json = await file.json();
+      return configSchema.parse(json);
+    } catch {
+      continue;
+    }
+  }
+
+  return {};
+}
+
+export function getConfigPath(local: boolean): string {
+  if (local) {
+    return "./framecode.json";
+  }
+  return join(homedir(), ".config", "framecode", "config.json");
+}
+
+export async function saveConfig(
+  config: Partial<Config>,
+  local: boolean = false,
+): Promise<boolean> {
+  const configPath = getConfigPath(local);
+
+  try {
+    await mkdir(dirname(configPath), { recursive: true });
+
+    const existingConfig = await loadConfig(configPath);
+    const merged = { ...existingConfig, ...config };
+
+    await Bun.write(configPath, JSON.stringify(merged, null, 2));
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/cli/utils/files.ts

@@ -0,0 +1,156 @@
+import { Glob } from "bun";
+
+const CODE_EXTENSIONS =
+  "*.{ts,tsx,js,jsx,mjs,cjs,py,rb,go,rs,java,kt,swift,c,cpp,h,hpp,cs,php,vue,svelte,sh,bash,zsh,json,yaml,yml,toml,md,mdx,sql,graphql,prisma,dockerfile}";
+
+const DEFAULT_IGNORES = [
+  "node_modules",
+  "dist",
+  "build",
+  "out",
+  ".git",
+  ".next",
+  ".turbo",
+  ".cache",
+  "coverage",
+  ".remotion",
+];
+
+async function loadGitignorePatterns(): Promise<string[]> {
+  const gitignorePath = ".gitignore";
+  const file = Bun.file(gitignorePath);
+
+  if (!(await file.exists())) {
+    return [];
+  }
+
+  const content = await file.text();
+  return content
+    .split("\n")
+    .map((line) => line.trim())
+    .filter((line) => line && !line.startsWith("#"));
+}
+
+function shouldIgnore(filePath: string, ignorePatterns: string[]): boolean {
+  for (const pattern of ignorePatterns) {
+    if (pattern.endsWith("/")) {
+      const dir = pattern.slice(0, -1);
+      if (
+        filePath.startsWith(dir + "/") ||
+        filePath.includes("/" + dir + "/")
+      ) {
+        return true;
+      }
+    } else if (pattern.includes("/")) {
+      const glob = new Glob(pattern);
+      if (glob.match(filePath)) return true;
+    } else {
+      if (
+        filePath === pattern ||
+        filePath.startsWith(pattern + "/") ||
+        filePath.includes("/" + pattern + "/") ||
+        filePath.includes("/" + pattern)
+      ) {
+        return true;
+      }
+      const glob = new Glob(`**/${pattern}`);
+      if (glob.match(filePath)) return true;
+    }
+  }
+  return false;
+}
+
+async function getIgnorePatterns(): Promise<string[]> {
+  const gitignore = await loadGitignorePatterns();
+  return [...DEFAULT_IGNORES, ...gitignore];
+}
+
+export async function expandGlobPatterns(
+  patterns: string[],
+): Promise<string[]> {
+  const files: string[] = [];
+  const userExcludes: string[] = [];
+  const ignorePatterns = await getIgnorePatterns();
+
+  for (const pattern of patterns) {
+    if (pattern.startsWith("!")) {
+      userExcludes.push(pattern.slice(1));
+      continue;
+    }
+
+    const isDirectory = await isDir(pattern);
+    if (isDirectory) {
+      const dirGlob = new Glob(
+        `${pattern.replace(/\/$/, "")}/**/${CODE_EXTENSIONS}`,
+      );
+      for await (const file of dirGlob.scan({ cwd: ".", onlyFiles: true })) {
+        if (!shouldIgnore(file, ignorePatterns)) {
+          files.push(file);
+        }
+      }
+      continue;
+    }
+
+    const hasGlobChars = /[*?[\]{}]/.test(pattern);
+    if (hasGlobChars) {
+      const glob = new Glob(pattern);
+      for await (const file of glob.scan({ cwd: ".", onlyFiles: true })) {
+        if (!shouldIgnore(file, ignorePatterns)) {
+          files.push(file);
+        }
+      }
+    } else {
+      files.push(pattern);
+    }
+  }
+
+  const uniqueFiles = [...new Set(files)];
+
+  if (userExcludes.length === 0) {
+    return uniqueFiles;
+  }
+
+  return uniqueFiles.filter((file) => {
+    return !userExcludes.some((excludePattern) => {
+      const glob = new Glob(excludePattern);
+      return glob.match(file);
+    });
+  });
+}
+
+async function isDir(path: string): Promise<boolean> {
+  try {
+    return (await Bun.file(path).stat()).isDirectory();
+  } catch {
+    return false;
+  }
+}
+
+export function isInteractiveTerminal(): boolean {
+  return process.stdout.isTTY === true && process.stdin.isTTY === true;
+}
+
+const MAX_SCAN_DEPTH = 5;
+
+function getDepth(filePath: string): number {
+  return filePath.split("/").length - 1;
+}
+
+export async function scanCurrentDirectory(): Promise<string[]> {
+  const glob = new Glob(`**/${CODE_EXTENSIONS}`);
+  const files: string[] = [];
+  const ignorePatterns = await getIgnorePatterns();
+
+  for await (const file of glob.scan({
+    cwd: ".",
+    onlyFiles: true,
+    dot: false,
+  })) {
+    if (getDepth(file) > MAX_SCAN_DEPTH) continue;
+    if (!shouldIgnore(file, ignorePatterns)) {
+      files.push(file);
+    }
+  }
+
+  return files.sort();
+}