@vojtaholik/create-static-kit 1.0.7 → 2.0.0

package/package.json

@@ -1,48 +1,17 @@
 {
   "name": "@vojtaholik/create-static-kit",
-  "version": "1.0.7",
-  "description": "CLI tool to create new Static Kit projects",
+  "version": "2.0.0",
   "type": "module",
   "bin": {
-    "create-static-kit": "./bin/create-static-kit.js"
+    "create-static-kit": "./src/index.ts"
   },
-  "files": [
-    "bin/",
-    "dist/",
-    "templates/"
-  ],
-  "scripts": {
-    "build": "tsc",
-    "dev": "tsc --watch",
-    "clean": "rm -rf dist"
-  },
-  "dependencies": {
-    "@vojtaholik/static-kit-core": "^1.0.0",
-    "prompts": "^2.4.2",
-    "kleur": "^4.1.5",
-    "fast-glob": "^3.3.3"
-  },
-  "devDependencies": {
-    "@types/node": "^24.2.1",
-    "@types/prompts": "^2.4.9",
-    "typescript": "~5.9.2"
-  },
-  "keywords": [
-    "create",
-    "static-kit",
-    "cli",
-    "scaffold",
-    "template"
-  ],
-  "author": "Vojta Holik <vojta@holik.dev>",
-  "license": "MIT",
+  "files": ["src", "template"],
   "repository": {
     "type": "git",
-    "url": "https://github.com/vojtaholik/static-kit.git",
+    "url": "https://github.com/vojtaholik/module-kit",
     "directory": "packages/create-static-kit"
   },
-  "homepage": "https://github.com/vojtaholik/static-kit#readme",
-  "bugs": {
-    "url": "https://github.com/vojtaholik/static-kit/issues"
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/index.ts

@@ -0,0 +1,41 @@
+#!/usr/bin/env bun
+/**
+ * Create Static Kit - Project Scaffolder
+ *
+ * Usage:
+ *   bun create @vojtaholik/static-kit my-site
+ */
+
+import { cp, mkdir } from "node:fs/promises";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const templateDir = join(__dirname, "..", "template");
+
+const targetDir = process.argv[2] || ".";
+const targetPath = join(process.cwd(), targetDir);
+
+console.log(`\n🚀 Creating Static Kit project in ${targetPath}\n`);
+
+await mkdir(targetPath, { recursive: true });
+await cp(templateDir, targetPath, { recursive: true });
+
+if (targetDir !== ".") {
+  const packageJsonPath = join(targetPath, "package.json");
+  const packageJson = await Bun.file(packageJsonPath).json();
+  packageJson.name = targetDir.split("/").pop();
+  await Bun.write(packageJsonPath, JSON.stringify(packageJson, null, 2) + "\n");
+}
+
+console.log(`✅ Done!
+
+Next steps:
+  ${targetDir !== "." ? `cd ${targetDir}` : ""}
+  bun install
+  bun run gen
+  bun run dev
+
+Happy building! 🎉
+`);

package/template/blocks/feature-grid.block.html

@@ -0,0 +1,28 @@
+<section class="section section--feature-grid section--tone-{{ ctx.layout.tone }}" data-block-id="{{ addr.blockId }}" data-schema-address="{{ encodeSchemaAddress(addr) }}">
+  <div class="container container--{{ ctx.layout.contentWidth }}">
+    <template v-if="props.headline || props.subheadline">
+      <div class="section__header section__header--{{ ctx.layout.contentAlign }}">
+        <template v-if="props.headline">
+          <h2 class="h2">{{ props.headline }}</h2>
+        </template>
+        <template v-if="props.subheadline">
+          <p class="text-body">{{ props.subheadline }}</p>
+        </template>
+      </div>
+    </template>
+    <div class="grid grid--{{ props.columns || '3' }}">
+      <template v-for="feature, i in props.features">
+        <div class="card">
+          <template v-if="feature.icon">
+            <span class="card__icon">{{ feature.icon }}</span>
+          </template>
+          <h3 class="h3 card__title">{{ feature.title }}</h3>
+          <p class="text-body card__description">{{ feature.description }}</p>
+          <template v-if="feature.link">
+            <a class="card__link" :href="feature.link.href">{{ feature.link.label }}</a>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+</section>

package/template/blocks/feature-grid.block.ts

@@ -0,0 +1,32 @@
+import { z } from "zod/v4";
+import { defineBlock } from "@vojtaholik/static-kit-core";
+import { renderFeatureGrid } from "./gen/feature-grid.render.ts";
+
+export const featureGridPropsSchema = z.object({
+  headline: z.string().optional(),
+  subheadline: z.string().optional(),
+  columns: z.enum(["2", "3", "4"]).default("3"),
+  features: z.array(
+    z.object({
+      icon: z.string().optional(),
+      title: z.string(),
+      description: z.string(),
+      link: z
+        .object({
+          href: z.string(),
+          label: z.string(),
+          external: z.boolean().optional(),
+        })
+        .optional(),
+    })
+  ),
+});
+
+export type FeatureGridProps = z.infer<typeof featureGridPropsSchema>;
+
+export const featureGridBlock = defineBlock({
+  type: "featureGrid",
+  propsSchema: featureGridPropsSchema,
+  renderHtml: renderFeatureGrid,
+  sourceFile: import.meta.url,
+});

package/template/blocks/gen/feature-grid.render.ts

@@ -0,0 +1,92 @@
+// Auto-generated - DO NOT EDIT
+import { escapeHtml, escapeAttr, type RenderBlockInput } from "@static-block-kit/core";
+import { encodeSchemaAddress } from "@static-block-kit/core";
+
+export function renderFeatureGrid(input: RenderBlockInput): string {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { props, ctx, addr } = input as { props: any; ctx: typeof input.ctx; addr: typeof input.addr };
+  let out = "";
+  out += "<section";
+  out += " class=\"";
+  out += "section section--feature-grid section--tone-";
+  out += escapeAttr(ctx.layout.tone);
+  out += "\"";
+  out += " data-block-id=\"";
+  out += escapeAttr(addr.blockId);
+  out += "\"";
+  out += " data-schema-address=\"";
+  out += escapeAttr(encodeSchemaAddress(addr));
+  out += "\"";
+  out += ">";
+  out += "<div";
+  out += " class=\"";
+  out += "container container--";
+  out += escapeAttr(ctx.layout.contentWidth);
+  out += "\"";
+  out += ">";
+  if (props.headline || props.subheadline) {
+    out += "<div";
+    out += " class=\"";
+    out += "section__header section__header--";
+    out += escapeAttr(ctx.layout.contentAlign);
+    out += "\"";
+    out += ">";
+    if (props.headline) {
+      out += "<h2";
+      out += " class=\"h2\"";
+      out += ">";
+      out += escapeHtml(props.headline);
+      out += "</h2>";
+    }
+    if (props.subheadline) {
+      out += "<p";
+      out += " class=\"text-body\"";
+      out += ">";
+      out += escapeHtml(props.subheadline);
+      out += "</p>";
+    }
+    out += "</div>";
+  }
+  out += "<div";
+  out += " class=\"";
+  out += "grid grid--";
+  out += escapeAttr(props.columns || '3');
+  out += "\"";
+  out += ">";
+  for (const [i, feature] of (props.features).entries()) {
+    out += "<div";
+    out += " class=\"card\"";
+    out += ">";
+    if (feature.icon) {
+      out += "<span";
+      out += " class=\"card__icon\"";
+      out += ">";
+      out += escapeHtml(feature.icon);
+      out += "</span>";
+    }
+    out += "<h3";
+    out += " class=\"h3 card__title\"";
+    out += ">";
+    out += escapeHtml(feature.title);
+    out += "</h3>";
+    out += "<p";
+    out += " class=\"text-body card__description\"";
+    out += ">";
+    out += escapeHtml(feature.description);
+    out += "</p>";
+    if (feature.link) {
+      out += "<a";
+      out += " class=\"card__link\"";
+      out += " href=\"" + escapeAttr(feature.link.href) + "\"";
+      out += ">";
+      out += escapeHtml(feature.link.label);
+      out += "</a>";
+    }
+    out += "</div>";
+  }
+  out += "</div>";
+  out += "</div>";
+  out += "</section>";
+
+  return out;
+}

package/template/blocks/gen/hero.render.ts

@@ -0,0 +1,79 @@
+// Auto-generated - DO NOT EDIT
+import { escapeHtml, escapeAttr, type RenderBlockInput } from "@static-block-kit/core";
+import { encodeSchemaAddress } from "@static-block-kit/core";
+
+export function renderHero(input: RenderBlockInput): string {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { props, ctx, addr } = input as { props: any; ctx: typeof input.ctx; addr: typeof input.addr };
+  let out = "";
+  out += "<section";
+  out += " class=\"";
+  out += "section section--hero section--tone-";
+  out += escapeAttr(ctx.layout.tone);
+  out += "\"";
+  out += " data-block-id=\"";
+  out += escapeAttr(addr.blockId);
+  out += "\"";
+  out += " data-schema-address=\"";
+  out += escapeAttr(encodeSchemaAddress(addr));
+  out += "\"";
+  out += ">";
+  out += "<div";
+  out += " class=\"";
+  out += "container container--";
+  out += escapeAttr(ctx.layout.contentWidth);
+  out += "\"";
+  out += ">";
+  out += "<div";
+  out += " class=\"";
+  out += "hero__content hero__content--";
+  out += escapeAttr(ctx.layout.contentAlign);
+  out += "\"";
+  out += ">";
+  if (props.eyebrow) {
+    out += "<span";
+    out += " class=\"eyebrow\"";
+    out += ">";
+    out += escapeHtml(props.eyebrow);
+    out += "</span>";
+  }
+  out += "<h1";
+  out += " class=\"h1 hero__headline\"";
+  out += ">";
+  out += escapeHtml(props.headline);
+  out += "</h1>";
+  if (props.subheadline) {
+    out += "<p";
+    out += " class=\"text-body hero__subheadline\"";
+    out += ">";
+    out += escapeHtml(props.subheadline);
+    out += "</p>";
+  }
+  if (props.primaryCta || props.secondaryCta) {
+    out += "<div";
+    out += " class=\"hero__actions\"";
+    out += ">";
+    if (props.primaryCta) {
+      out += "<a";
+      out += " class=\"btn btn--primary\"";
+      out += " href=\"" + escapeAttr(props.primaryCta.href) + "\"";
+      out += ">";
+      out += escapeHtml(props.primaryCta.label);
+      out += "</a>";
+    }
+    if (props.secondaryCta) {
+      out += "<a";
+      out += " class=\"btn btn--secondary\"";
+      out += " href=\"" + escapeAttr(props.secondaryCta.href) + "\"";
+      out += ">";
+      out += escapeHtml(props.secondaryCta.label);
+      out += "</a>";
+    }
+    out += "</div>";
+  }
+  out += "</div>";
+  out += "</div>";
+  out += "</section>";
+
+  return out;
+}

package/template/blocks/gen/index.ts

@@ -0,0 +1,4 @@
+export { renderFeatureGrid } from "./feature-grid.render.ts";
+export { renderTextSection } from "./text-section.render.ts";
+export { renderHero } from "./hero.render.ts";
+export { renderLatestPosts } from "./latest-posts.render.ts";

package/template/blocks/gen/latest-posts.render.ts

@@ -0,0 +1,114 @@
+// Auto-generated - DO NOT EDIT
+import { escapeHtml, escapeAttr, type RenderBlockInput } from "@static-block-kit/core";
+import { encodeSchemaAddress } from "@static-block-kit/core";
+
+export function renderLatestPosts(input: RenderBlockInput): string {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { props, ctx, addr } = input as { props: any; ctx: typeof input.ctx; addr: typeof input.addr };
+  let out = "";
+  out += "<section";
+  out += " class=\"";
+  out += "section section--latest-posts section--tone-";
+  out += escapeAttr(ctx.layout.tone);
+  out += "\"";
+  out += " data-block-id=\"";
+  out += escapeAttr(addr.blockId);
+  out += "\"";
+  out += " data-schema-address=\"";
+  out += escapeAttr(encodeSchemaAddress(addr));
+  out += "\"";
+  out += ">";
+  out += "<div";
+  out += " class=\"";
+  out += "container container--";
+  out += escapeAttr(ctx.layout.contentWidth);
+  out += "\"";
+  out += ">";
+  out += "<div";
+  out += " class=\"";
+  out += "section__header section__header--";
+  out += escapeAttr(ctx.layout.contentAlign);
+  out += "\"";
+  out += ">";
+  if (props.headline) {
+    out += "<h2";
+    out += " class=\"h2\"";
+    out += ">";
+    out += escapeHtml(props.headline);
+    out += "</h2>";
+  }
+  if (props.subheadline) {
+    out += "<p";
+    out += " class=\"text-body\"";
+    out += ">";
+    out += escapeHtml(props.subheadline);
+    out += "</p>";
+  }
+  out += "</div>";
+  out += "<div";
+  out += " class=\"grid grid--3\"";
+  out += ">";
+  for (const [i, post] of (props.posts).entries()) {
+    out += "<article";
+    out += " class=\"card card--post\"";
+    out += ">";
+    if (post.image) {
+      out += "<div";
+      out += " class=\"card__image\"";
+      out += ">";
+      out += "<img";
+      out += " loading=\"lazy\"";
+      out += " src=\"" + escapeAttr(post.image.src) + "\"";
+      out += " alt=\"" + escapeAttr(post.image.alt) + "\"";
+      out += ">";
+      out += "</div>";
+    }
+    out += "<div";
+    out += " class=\"card__body\"";
+    out += ">";
+    if (post.date) {
+      out += "<time";
+      out += " class=\"card__date\"";
+      out += ">";
+      out += escapeHtml(post.date);
+      out += "</time>";
+    }
+    out += "<h3";
+    out += " class=\"h3 card__title\"";
+    out += ">";
+    out += escapeHtml(post.title);
+    out += "</h3>";
+    if (post.excerpt) {
+      out += "<p";
+      out += " class=\"text-body card__excerpt\"";
+      out += ">";
+      out += escapeHtml(post.excerpt);
+      out += "</p>";
+    }
+    out += "<a";
+    out += " class=\"card__link\"";
+    out += " href=\"" + escapeAttr(post.link.href) + "\"";
+    out += ">";
+    out += escapeHtml(post.link.label);
+    out += "</a>";
+    out += "</div>";
+    out += "</article>";
+  }
+  out += "</div>";
+  if (props.viewAllLink) {
+    out += "<div";
+    out += " class=\"section__footer\"";
+    out += ">";
+    out += "<a";
+    out += " class=\"btn btn--secondary\"";
+    out += " href=\"" + escapeAttr(props.viewAllLink.href) + "\"";
+    out += ">";
+    out += escapeHtml(props.viewAllLink.label);
+    out += "</a>";
+    out += "</div>";
+  }
+  out += "</div>";
+  out += "</section>";
+
+  return out;
+}

package/template/blocks/gen/text-section.render.ts

@@ -0,0 +1,69 @@
+// Auto-generated - DO NOT EDIT
+import { escapeHtml, escapeAttr, type RenderBlockInput } from "@static-block-kit/core";
+import { encodeSchemaAddress } from "@static-block-kit/core";
+
+export function renderTextSection(input: RenderBlockInput): string {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { props, ctx, addr } = input as { props: any; ctx: typeof input.ctx; addr: typeof input.addr };
+  let out = "";
+  out += "<section";
+  out += " class=\"";
+  out += "section section--text section--tone-";
+  out += escapeAttr(ctx.layout.tone);
+  out += "\"";
+  out += " data-block-id=\"";
+  out += escapeAttr(addr.blockId);
+  out += "\"";
+  out += " data-schema-address=\"";
+  out += escapeAttr(encodeSchemaAddress(addr));
+  out += "\"";
+  out += ">";
+  out += "<div";
+  out += " class=\"";
+  out += "container container--";
+  out += escapeAttr(ctx.layout.contentWidth);
+  out += "\"";
+  out += ">";
+  out += "<div";
+  out += " class=\"";
+  out += "text-section text-section--";
+  out += escapeAttr(ctx.layout.contentAlign);
+  out += "\"";
+  out += ">";
+  if (props.eyebrow) {
+    out += "<span";
+    out += " class=\"eyebrow\"";
+    out += ">";
+    out += escapeHtml(props.eyebrow);
+    out += "</span>";
+  }
+  if (props.headline) {
+    out += "<h2";
+    out += " class=\"h2\"";
+    out += ">";
+    out += escapeHtml(props.headline);
+    out += "</h2>";
+  }
+  out += "<div";
+  out += " class=\"prose\"";
+  out += ">";
+  out += props.body;
+  out += "</div>";
+  if (props.cta) {
+    out += "<div";
+    out += " class=\"text-section__cta\"";
+    out += ">";
+    out += "<a";
+    out += " class=\"btn btn--primary\"";
+    out += " href=\"" + escapeAttr(props.cta.href) + "\"";
+    out += ">";
+    out += escapeHtml(props.cta.label);
+    out += "</a>";
+    out += "</div>";
+  }
+  out += "</div>";
+  out += "</div>";
+  out += "</section>";
+
+  return out;
+}

package/template/blocks/hero.block.html

@@ -0,0 +1,31 @@
+<section
+  class="section section--hero section--tone-{{ ctx.layout.tone }}"
+  data-block-id="{{ addr.blockId }}"
+  data-schema-address="{{ encodeSchemaAddress(addr) }}"
+>
+  <div class="container container--{{ ctx.layout.contentWidth }}">
+    <div class="hero__content hero__content--{{ ctx.layout.contentAlign }}">
+      <template v-if="props.eyebrow">
+        <span class="eyebrow">{{ props.eyebrow }}</span>
+      </template>
+      <h1 class="h1 hero__headline">{{ props.headline }}</h1>
+      <template v-if="props.subheadline">
+        <p class="text-body hero__subheadline">{{ props.subheadline }}</p>
+      </template>
+      <template v-if="props.primaryCta || props.secondaryCta">
+        <div class="hero__actions">
+          <template v-if="props.primaryCta">
+            <a class="btn btn--primary" :href="props.primaryCta.href">
+              {{ props.primaryCta.label }}
+            </a>
+          </template>
+          <template v-if="props.secondaryCta">
+            <a class="btn btn--secondary" :href="props.secondaryCta.href">
+              {{ props.secondaryCta.label }}
+            </a>
+          </template>
+        </div>
+      </template>
+    </div>
+  </div>
+</section>

package/template/blocks/hero.block.ts

@@ -0,0 +1,40 @@
+import { z } from "zod/v4";
+import { defineBlock } from "@vojtaholik/static-kit-core";
+import { renderHero } from "./gen/hero.render.ts";
+
+export const heroPropsSchema = z.object({
+  eyebrow: z.string().optional(),
+  headline: z.string(),
+  subheadline: z.string().optional(),
+  primaryCta: z
+    .object({
+      href: z.string(),
+      label: z.string(),
+      external: z.boolean().optional(),
+    })
+    .optional(),
+  secondaryCta: z
+    .object({
+      href: z.string(),
+      label: z.string(),
+      external: z.boolean().optional(),
+    })
+    .optional(),
+  backgroundImage: z
+    .object({
+      src: z.string(),
+      alt: z.string(),
+      width: z.number().optional(),
+      height: z.number().optional(),
+    })
+    .optional(),
+});
+
+export type HeroProps = z.infer<typeof heroPropsSchema>;
+
+export const heroBlock = defineBlock({
+  type: "hero",
+  propsSchema: heroPropsSchema,
+  renderHtml: renderHero,
+  sourceFile: import.meta.url,
+});

package/template/blocks/index.ts

@@ -0,0 +1,31 @@
+// Block exports
+export { heroBlock, heroPropsSchema, type HeroProps } from "./hero.block.ts";
+export {
+  featureGridBlock,
+  featureGridPropsSchema,
+  type FeatureGridProps,
+} from "./feature-grid.block.ts";
+export {
+  latestPostsBlock,
+  latestPostsPropsSchema,
+  type LatestPostsProps,
+} from "./latest-posts.block.ts";
+export {
+  textSectionBlock,
+  textSectionPropsSchema,
+  type TextSectionProps,
+} from "./text-section.block.ts";
+
+// Register all blocks
+import { blockRegistry } from "@vojtaholik/static-kit-core";
+import { heroBlock } from "./hero.block.ts";
+import { featureGridBlock } from "./feature-grid.block.ts";
+import { latestPostsBlock } from "./latest-posts.block.ts";
+import { textSectionBlock } from "./text-section.block.ts";
+
+export function registerAllBlocks() {
+  blockRegistry.register(heroBlock);
+  blockRegistry.register(featureGridBlock);
+  blockRegistry.register(latestPostsBlock);
+  blockRegistry.register(textSectionBlock);
+}

package/template/blocks/latest-posts.block.html

@@ -0,0 +1,38 @@
+<section class="section section--latest-posts section--tone-{{ ctx.layout.tone }}" data-block-id="{{ addr.blockId }}" data-schema-address="{{ encodeSchemaAddress(addr) }}">
+  <div class="container container--{{ ctx.layout.contentWidth }}">
+    <div class="section__header section__header--{{ ctx.layout.contentAlign }}">
+      <template v-if="props.headline">
+        <h2 class="h2">{{ props.headline }}</h2>
+      </template>
+      <template v-if="props.subheadline">
+        <p class="text-body">{{ props.subheadline }}</p>
+      </template>
+    </div>
+    <div class="grid grid--3">
+      <template v-for="post, i in props.posts">
+        <article class="card card--post">
+          <template v-if="post.image">
+            <div class="card__image">
+              <img :src="post.image.src" :alt="post.image.alt" loading="lazy">
+            </div>
+          </template>
+          <div class="card__body">
+            <template v-if="post.date">
+              <time class="card__date">{{ post.date }}</time>
+            </template>
+            <h3 class="h3 card__title">{{ post.title }}</h3>
+            <template v-if="post.excerpt">
+              <p class="text-body card__excerpt">{{ post.excerpt }}</p>
+            </template>
+            <a class="card__link" :href="post.link.href">{{ post.link.label }}</a>
+          </div>
+        </article>
+      </template>
+    </div>
+    <template v-if="props.viewAllLink">
+      <div class="section__footer">
+        <a class="btn btn--secondary" :href="props.viewAllLink.href">{{ props.viewAllLink.label }}</a>
+      </div>
+    </template>
+  </div>
+</section>