npm - @vojtaholik/create-static-kit - Versions diffs - 1.0.8 → 2.1.0 - Mend

@vojtaholik/create-static-kit 1.0.8 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/package.json +6 -34
package/src/index.ts +41 -0
package/template/blocks/feature-grid.block.html +28 -0
package/template/blocks/feature-grid.block.ts +32 -0
package/template/blocks/gen/feature-grid.render.ts +92 -0
package/template/blocks/gen/hero.render.ts +79 -0
package/template/blocks/gen/index.ts +4 -0
package/template/blocks/gen/latest-posts.render.ts +114 -0
package/template/blocks/gen/text-section.render.ts +69 -0
package/template/blocks/hero.block.html +31 -0
package/template/blocks/hero.block.ts +40 -0
package/template/blocks/index.ts +46 -0
package/template/blocks/latest-posts.block.html +38 -0
package/template/blocks/latest-posts.block.ts +45 -0
package/template/blocks/text-section.block.html +18 -0
package/template/blocks/text-section.block.ts +25 -0
package/template/package.json +21 -0
package/template/public/css/styles.css +589 -0
package/template/public/js/dev-overlay.js +366 -0
package/template/public/js/index.js +35 -0
package/template/public/sprite.svg +6 -0
package/template/public/svg/magic-wand.svg +4 -0
package/template/site/pages/about.page.ts +91 -0
package/template/site/pages/base.html +38 -0
package/template/site/pages/index.page.ts +107 -0
package/template/site/pages/index.ts +16 -0
package/template/static-kit.config.ts +10 -0
package/template/tsconfig.json +23 -0
package/bin/create-static-kit.js +0 -3
package/dist/cli.d.ts +0 -3
package/dist/cli.d.ts.map +0 -1
package/dist/cli.js +0 -488
package/templates/default/.cursor/rules/configuration.mdc +0 -20
package/templates/default/.cursor/rules/figma-integration.mdc +0 -22
package/templates/default/.cursor/rules/html-components.mdc +0 -24
package/templates/default/.cursor/rules/html-pages.mdc +0 -22
package/templates/default/.cursor/rules/inline-tailwind-to-bem-with-apply-directive.mdc +0 -218
package/templates/default/.cursor/rules/project-overview.mdc +0 -30
package/templates/default/.cursor/rules/public-assets.mdc +0 -22
package/templates/default/.cursor/rules/scss-styles.mdc +0 -22
package/templates/default/.cursor/rules/svg-icons.mdc +0 -22
package/templates/default/.cursor/rules/typescript-js.mdc +0 -23
package/templates/default/public/favicon.ico +0 -1
package/templates/default/src/components/button.html +0 -1
package/templates/default/src/components/feature-card.html +0 -8
package/templates/default/src/components/footer.html +0 -5
package/templates/default/src/components/navigation.html +0 -11
package/templates/default/src/icons/ui/star.svg +0 -3
package/templates/default/src/js/index.ts +0 -28
package/templates/default/src/pages/about.html +0 -24
package/templates/default/src/pages/index.html +0 -23
package/templates/default/src/styles/main.scss +0 -210
package/templates/default/tsconfig.json +0 -19
package/templates/minimal/.cursor/rules/configuration.mdc +0 -20
package/templates/minimal/.cursor/rules/figma-integration.mdc +0 -22
package/templates/minimal/.cursor/rules/html-components.mdc +0 -24
package/templates/minimal/.cursor/rules/html-pages.mdc +0 -22
package/templates/minimal/.cursor/rules/inline-tailwind-to-bem-with-apply-directive.mdc +0 -218
package/templates/minimal/.cursor/rules/project-overview.mdc +0 -30
package/templates/minimal/.cursor/rules/public-assets.mdc +0 -22
package/templates/minimal/.cursor/rules/scss-styles.mdc +0 -22
package/templates/minimal/.cursor/rules/svg-icons.mdc +0 -22
package/templates/minimal/.cursor/rules/typescript-js.mdc +0 -23
package/templates/minimal/public/favicon.ico +0 -1
package/templates/minimal/src/components/footer.html +0 -3
package/templates/minimal/src/components/header.html +0 -6
package/templates/minimal/src/js/index.ts +0 -9
package/templates/minimal/src/pages/index.html +0 -15
package/templates/minimal/src/styles/main.scss +0 -77
package/templates/minimal/tsconfig.json +0 -19

package/templates/minimal/.cursor/rules/configuration.mdc DELETED Viewed

@@ -1,20 +0,0 @@
----
-description: Static Kit configuration and build settings
-globs: ["static-kit.config.json", "static-kit.local.json"]
-alwaysApply: false
----
-# Configuration
-Global build configuration in `static-kit.config.json`. Local overrides go in `static-kit.local.json` (ignored by git).
-## Configuration Files
-- `static-kit.config.json` - Global build configuration
-- `static-kit.local.json` - Local overrides (git ignored)
-## Guidelines
-- Keep global settings in main config
-- Use local config for environment-specific overrides
-- Local config is automatically ignored by git

package/templates/minimal/.cursor/rules/figma-integration.mdc DELETED Viewed

@@ -1,22 +0,0 @@
----
-description: Figma MCP integration and design-to-dev workflow
-globs: ["**/*.html"]
-alwaysApply: false
----
-# Figma Integration
-For Figma MCP integration, component and page file names should match Figma node/component names for proper mapping.
-## Design-to-Dev Workflow
-- Component/page file names should match Figma node names
-- Follow Static Kit conventions when generating from Figma designs
-- Maintain consistent naming between design and code
-- Use proper file placement per Static Kit rules
-## Guidelines
-- Generate HTML/SCSS from Figma following Static Kit conventions
-- Ensure proper file placement in src/ directories
-- Maintain design-code consistency through naming

package/templates/minimal/.cursor/rules/html-components.mdc DELETED Viewed

@@ -1,24 +0,0 @@
----
-description: Reusable HTML components conventions
-globs: ["src/components/**/*.html"]
-alwaysApply: false
----
-# HTML Components
-Reusable HTML components should follow specific naming and structure conventions.
-## File Naming
-- Use lowercase kebab-case for file names
-- Examples: `button.html`, `ui/card.html`
-## Structure Rules
-- No `<html>` or `<body>` tags in components
-- Keep components focused and reusable
-- Place under `src/components/` directory
-## Import Usage
-Components should be imported using `@components/` prefix in pages.

package/templates/minimal/.cursor/rules/html-pages.mdc DELETED Viewed

@@ -1,22 +0,0 @@
----
-description: HTML pages structure and import conventions
-globs: ["src/pages/**/*.html"]
-alwaysApply: false
----
-# HTML Pages
-HTML pages go in `src/pages/` directory. Use `@components/` prefix for imports, not relative paths.
-## Import Examples
-```html
-<!-- @import: @components/header.html -->
-<!-- @import: @components/footer.html -->
-```
-## Guidelines
-- Place all pages under `src/pages/` with correct folder structure
-- Use `@components/` prefix for component imports
-- Avoid relative imports unless absolutely necessary

package/templates/minimal/.cursor/rules/inline-tailwind-to-bem-with-apply-directive.mdc DELETED Viewed

@@ -1,218 +0,0 @@
----
-description: Convert inline Tailwind CSS utility classes to BEM-compliant @apply directives in CSS files
-globs: ["**/*"]
-alwaysApply: true
----
-# Tailwind CSS v4 @apply Conversion Specialist
-You are a Tailwind CSS v4 expert focused on converting inline utility classes to `@apply` directives in CSS files.
-## Core Rules
-### Tailwind CSS v4 Context
-- Always use `@import "tailwindcss";` syntax (not the old v3 @tailwind directives)
-- Understand that v4 uses CSS-first configuration and native CSS features
-- Recognize that @apply works the same but the import syntax has changed
-### @apply Conversion Guidelines
-#### MANDATORY CONVERSION RULE
-**ALWAYS convert inline utility classes to @apply when asked.** No exceptions, no questions, no debate about whether it's "worth it". If the user asks for conversion, you fucking do it.
-#### BEM Naming Convention
-**ALWAYS use BEM (Block Element Modifier) methodology for class names:**
-- **Block**: `.card`, `.button`, `.navbar`
-- **Element**: `.card__title`, `.card__content`, `.button__icon`
-- **Modifier**: `.card--primary`, `.button--large`, `.navbar--mobile`
-#### BEM Examples
-```css
-/* Block */
-.card {
-  @apply bg-white rounded-lg shadow-md p-6;
-}
-/* Element */
-.card__header {
-  @apply border-b border-gray-200 pb-4 mb-4;
-}
-.card__title {
-  @apply text-xl font-semibold text-gray-900;
-}
-.card__content {
-  @apply text-gray-600 leading-relaxed;
-}
-/* Modifier */
-.card--primary {
-  @apply border-l-4 border-blue-500;
-}
-.card--error {
-  @apply border-l-4 border-red-500 bg-red-50;
-}
-```
-#### Conversion Rules
-- **User request = immediate conversion** (no questioning)
-- Convert ANY utility classes when user requests it
-- Create BEM-compliant class names that describe component structure
-- Group related properties logically in @apply statements
-- Preserve responsive/state variants when complex
-#### Conversion Process
-1. **Identify the component structure**: Determine Block, Elements, and Modifiers
-2. **Create BEM class names**: Use semantic names that describe purpose and hierarchy
-3. **Group logically**: Organize related properties together in @apply statements
-4. **Preserve responsive/state variants**: Keep complex variants inline if needed
-#### Best Practices
-```css
-/* ✅ Good: BEM naming with logical grouping */
-.card {
-  @apply bg-white rounded-lg shadow-md;
-  @apply p-6 border border-gray-200;
-}
-.card--primary {
-  @apply border-l-4 border-blue-500;
-}
-.button {
-  @apply text-white font-medium px-4 py-2 rounded-md;
-  @apply transition-colors duration-200;
-}
-.button--primary {
-  @apply bg-blue-500 hover:bg-blue-600;
-}
-.button__icon {
-  @apply mr-2 w-4 h-4;
-}
-/* ❌ Bad: Non-BEM naming */
-.blue-rounded {
-  @apply bg-blue-500 rounded-md;
-}
-/* ❌ Bad: Non-semantic naming */
-.margin-top {
-  @apply mt-4;
-}
-```
-#### Handling Complex Cases
-- **Responsive variants**: Keep complex responsive logic inline, abstract base styles
-- **State variants**: Group base styles in @apply, keep interactive states inline when complex
-- **Component variants**: Create separate classes for different component states
-#### File Organization
-- Place @apply styles in the same file as the `@import "tailwindcss";`
-- Group related component styles together
-- Use comments to organize sections
-- Follow this structure:
-```css
-@import "tailwindcss";
-/* Base component styles */
-.card {
-  /* ... */
-}
-.button {
-  /* ... */
-}
-/* Layout components */
-.container {
-  /* ... */
-}
-.grid-layout {
-  /* ... */
-}
-/* Utility combinations */
-.form-input {
-  /* ... */
-}
-.error-text {
-  /* ... */
-}
-```
-### Conversion Examples
-#### Before (inline classes):
-```html
-<div
-  class="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition-shadow"
->
-  <h2 class="text-xl font-semibold text-gray-900 mb-4">Card Title</h2>
-  <p class="text-gray-600 leading-relaxed">Card content</p>
-</div>
-```
-#### After (with @apply and BEM):
-```css
-.card {
-  @apply bg-white rounded-lg shadow-md p-6 border border-gray-200;
-  @apply hover:shadow-lg transition-shadow;
-}
-.card__title {
-  @apply text-xl font-semibold text-gray-900 mb-4;
-}
-.card__content {
-  @apply text-gray-600 leading-relaxed;
-}
-```
-```html
-<div class="card">
-  <h2 class="card__title">Card Title</h2>
-  <p class="card__content">Card content</p>
-</div>
-```
-### Action Instructions
-When converting (MANDATORY when asked):
-1. **Analyze the HTML/JSX** for component structure and hierarchy
-2. **Create BEM class names** following Block\_\_Element--Modifier pattern
-3. **Show the CSS @apply implementation** with proper BEM organization
-4. **Provide the updated HTML** with new BEM class names
-5. **Explain the BEM structure** and benefits of the conversion
-Always prioritize:
-- **BEM naming convention** (Block\_\_Element--Modifier)
-- **Mandatory conversion** when user requests it
-- **Component hierarchy** in naming structure
-- **Logical grouping** of related properties in @apply statements
-- **Semantic naming** that describes purpose and structure
-### TypeScript Integration
-When working with TypeScript projects, consider:
-- Type-safe class name patterns
-- Component prop interfaces for style variants
-- Utility types for consistent naming conventions

package/templates/minimal/.cursor/rules/project-overview.mdc DELETED Viewed

@@ -1,30 +0,0 @@
----
-description: Static Kit project overview and general guidelines
-globs: ["**/*"]
-alwaysApply: true
----
-# Static Kit Framework
-Static site framework with TypeScript, SCSS, and HTML imports. Integrated with Figma MCP for design-to-dev workflow.
-## Core Principles
-- Use `@components/` prefix for imports, not relative paths
-- Follow lowercase kebab-case naming for files
-- Keep modules isolated and modular
-- Maintain clean separation between pages, components, and styles
-## Git Conventions
-### Commit Message Conventions
-- `feat: new component/page`
-- `style: scss changes`
-- `fix: bugfix`
-- `design-sync: figma-linked update`
-### Ignored Files
-- `dist/` - Build output
-- `static-kit.local.json` - Local configuration overrides

package/templates/minimal/.cursor/rules/public-assets.mdc DELETED Viewed

@@ -1,22 +0,0 @@
----
-description: Public assets organization and handling
-globs: ["public/**/*"]
-alwaysApply: false
----
-# Public Assets
-Static assets copied directly to dist/ with no processing. Organize into logical folders.
-## Organization
-- `public/images/` - Image assets
-- `public/fonts/` - Font files
-- `public/` - Other static assets
-## Guidelines
-- Assets are copied as-is to dist/
-- No build-time processing
-- Organize into meaningful subdirectories
-- Reference in development as `/<filename>` (no 'public' prefix needed)

package/templates/minimal/.cursor/rules/scss-styles.mdc DELETED Viewed

@@ -1,22 +0,0 @@
----
-description: SCSS styling conventions and import structure
-globs: ["src/styles/**/*.scss"]
-alwaysApply: false
----
-# SCSS Styles
-SCSS entrypoint is `src/styles/main.scss`. Component styles should be imported into main.scss.
-## Import Structure
-```scss
-@import "./components/button.scss";
-```
-## Guidelines
-- Main entrypoint: `src/styles/main.scss`
-- Import component styles into main.scss
-- Follow modular SCSS architecture
-- Keep component styles organized and focused

package/templates/minimal/.cursor/rules/svg-icons.mdc DELETED Viewed

@@ -1,22 +0,0 @@
----
-description: SVG icon naming and sprite conventions
-globs: ["src/icons/**/*.svg"]
-alwaysApply: false
----
-# SVG Icons
-SVG icons should use lowercase-kebab-case naming. Folder structure defines sprite ID namespace.
-## Naming Convention
-```
-src/icons/ui/arrow.svg → <use href="/sprite.svg#ui-arrow"></use>
-```
-## Guidelines
-- Use lowercase kebab-case for icon names
-- Folder structure creates namespace (ui/, social/, etc.)
-- Icons are compiled into sprite.svg
-- Reference using sprite ID format: `namespace-iconname`

package/templates/minimal/.cursor/rules/typescript-js.mdc DELETED Viewed

@@ -1,23 +0,0 @@
----
-description: TypeScript and JavaScript module conventions
-globs: ["src/js/**/*.ts", "src/js/**/*.js"]
-alwaysApply: false
----
-# TypeScript/JavaScript Modules
-Component-specific scripts go in `src/js/components/`. Keep modules isolated with no bundler-only imports.
-## File Organization
-```
-src/js/components/modal.ts
-```
-## Guidelines
-- Place component scripts in `src/js/components/`
-- Keep modules isolated and modular
-- Avoid bundler-only patterns
-- Use effective TypeScript for library-style code
-- Maintain clean module boundaries

package/templates/minimal/public/favicon.ico DELETED Viewed

	@@ -1 +0,0 @@
1	- # Empty favicon placeholder

package/templates/minimal/src/components/footer.html DELETED Viewed

@@ -1,3 +0,0 @@
-<footer>
-  <p>&copy; 2024 Your Site. Built with Static Kit.</p>
-</footer>

package/templates/minimal/src/components/header.html DELETED Viewed

@@ -1,6 +0,0 @@
-<header>
-  <nav>
-    <a href="/">Home</a>
-    <a href="/about">About</a>
-  </nav>
-</header>

package/templates/minimal/src/js/index.ts DELETED Viewed

@@ -1,9 +0,0 @@
-// Main JavaScript entry point
-// This file is automatically included in every page
-console.log("Static Kit is ready! 🚀");
-// Example: Add some interactivity
-document.addEventListener("DOMContentLoaded", () => {
-  console.log("DOM loaded and ready");
-});

package/templates/minimal/src/pages/index.html DELETED Viewed

@@ -1,15 +0,0 @@
-<!-- @import: @components/header.html -->
-<main>
-  <h1>Welcome to Static Kit</h1>
-  <p>A simple, no-bullshit static site framework.</p>
-  <section>
-    <h2>Getting Started</h2>
-    <p>Edit this file at <code>src/pages/index.html</code> to get started.</p>
-    <p>Create new components in <code>src/components/</code> and import them with:</p>
-    <pre><code>&lt;!-- @import: @components/your-component.html --&gt;</code></pre>
-  </section>
-</main>
-<!-- @import: @components/footer.html -->

package/templates/minimal/src/styles/main.scss DELETED Viewed

@@ -1,77 +0,0 @@
-body {
-  font-family: system-ui, sans-serif;
-  line-height: 1.6;
-  margin: 0;
-  padding: 0;
-  color: #333;
-}
-header {
-  background: #f8f9fa;
-  padding: 1rem;
-  border-bottom: 1px solid #e5e7eb;
-  nav {
-    display: flex;
-    gap: 1rem;
-    a {
-      text-decoration: none;
-      color: #0066cc;
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-  }
-}
-main {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 2rem 1rem;
-  h1 {
-    color: #1f2937;
-    margin-bottom: 0.5rem;
-  }
-  section {
-    margin-top: 2rem;
-    h2 {
-      color: #374151;
-      margin-bottom: 1rem;
-    }
-  }
-  code {
-    background: #f3f4f6;
-    padding: 0.2rem 0.4rem;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
-  }
-  pre {
-    background: #1f2937;
-    color: #f9fafb;
-    padding: 1rem;
-    border-radius: 0.5rem;
-    overflow-x: auto;
-    code {
-      background: none;
-      padding: 0;
-      color: inherit;
-    }
-  }
-}
-footer {
-  background: #f8f9fa;
-  text-align: center;
-  padding: 2rem 1rem;
-  margin-top: 3rem;
-  border-top: 1px solid #e5e7eb;
-  color: #6b7280;
-}

package/templates/minimal/tsconfig.json DELETED Viewed

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
-}