@barkajs/barka 0.1.0

package/starters/blank/config/section-types.yaml

@@ -0,0 +1,115 @@
+_defaults:
+  settings:
+    background:
+      type: select
+      label: Background
+      options: [light, dark, primary, custom]
+      default: light
+    spacing:
+      type: select
+      label: Spacing
+      options: [none, small, medium, large, xlarge]
+      default: medium
+    width:
+      type: select
+      label: Width
+      options: [contained, wide, full]
+      default: contained
+    css_class:
+      type: text
+      label: CSS Class
+    anchor_id:
+      type: text
+      label: Anchor ID
+    hidden:
+      type: boolean
+      label: Hidden
+      default: false
+
+hero:
+  label: Hero
+  icon: star
+  fields:
+    heading:
+      type: text
+      label: Heading
+      required: true
+    subheading:
+      type: textarea
+      label: Subheading
+    cta_text:
+      type: text
+      label: CTA Button Text
+    cta_url:
+      type: text
+      label: CTA Button URL
+
+features:
+  label: Features
+  icon: grid
+  fields:
+    heading:
+      type: text
+      label: Heading
+    subheading:
+      type: textarea
+      label: Subheading
+    columns:
+      type: select
+      label: Columns
+      options: ["2", "3", "4"]
+      default: "3"
+    items:
+      type: textarea
+      label: Feature Items (YAML)
+
+cta:
+  label: Call to Action
+  icon: megaphone
+  fields:
+    heading:
+      type: text
+      label: Heading
+      required: true
+    body:
+      type: textarea
+      label: Body Text
+    button_text:
+      type: text
+      label: Button Text
+    button_url:
+      type: text
+      label: Button URL
+
+text:
+  label: Text
+  icon: text
+  fields:
+    heading:
+      type: text
+      label: Heading
+    body:
+      type: textarea
+      label: Body
+      required: true
+
+text_with_image:
+  label: Text with Image
+  icon: image
+  fields:
+    heading:
+      type: text
+      label: Heading
+    body:
+      type: textarea
+      label: Body
+      required: true
+    image:
+      type: media
+      label: Image
+      required: true
+    image_position:
+      type: select
+      label: Image Position
+      options: [left, right]
+      default: right

package/starters/blank/config/settings.yaml

@@ -0,0 +1,12 @@
+site_name: "My Barka Site"
+base_url: "http://localhost:3000"
+theme: starter
+
+seo:
+  title_separator: " | "
+  default_description: "Built with Barka CMS"
+  feeds:
+    - type: rss
+      path: /feed.xml
+      content_types: [article]
+      limit: 20

package/starters/blank/content/landing-pages/homepage.yaml

@@ -0,0 +1,55 @@
+title: "Welcome to Barka"
+type: landing_page
+status: published
+langcode: en
+slug: homepage
+date: 2026-01-01
+seo:
+  title: "Welcome"
+  description: "Built with Barka — the progressive Content-as-Code CMS."
+
+sections:
+  - type: hero
+    weight: 0
+    data:
+      heading: "Welcome to Barka"
+      subheading: "The progressive Content-as-Code CMS. Edit your content in content/ — files are the source of truth."
+      alignment: center
+      cta_text: "Get Started"
+      cta_url: "/about"
+    settings:
+      spacing: xlarge
+      width: contained
+
+  - type: features
+    weight: 1
+    data:
+      heading: "Why Barka?"
+      subheading: "A CMS that grows with you — from simple files to full enterprise"
+      columns: 3
+      items:
+        - icon: code
+          title: "Files-First"
+          description: "Content lives in Markdown and YAML. Edit with any text editor, AI, or the admin UI."
+        - icon: rocket
+          title: "Progressive Complexity"
+          description: "Start with files only. Add a database, admin UI, and workflows when you need them."
+        - icon: shield
+          title: "Content-as-Code"
+          description: "Version your content with Git. Deploy with CI/CD. Roll back anytime."
+    settings:
+      spacing: large
+      width: contained
+      background: light
+
+  - type: cta
+    weight: 2
+    data:
+      heading: "Ready to build?"
+      description: "Edit the files in content/ to start creating your site."
+      button_text: "Read the Docs"
+      button_url: "/docs"
+    settings:
+      spacing: large
+      width: contained
+      background: dark

package/starters/blank/content/pages/about.md

@@ -0,0 +1,27 @@
+---
+title: "About"
+type: page
+status: published
+langcode: en
+slug: about
+date: 2026-01-01
+fields:
+  subtitle: "About this site"
+seo:
+  title: "About"
+  description: "About this site built with Barka CMS."
+---
+
+This site is built with **Barka** — the progressive Content-as-Code CMS.
+
+## What is Barka?
+
+Barka is a files-first CMS where content lives in Markdown and YAML. You can edit content with any text editor, with AI agents, or through the optional admin UI.
+
+## Getting Started
+
+1. Edit files in `content/` to add pages, articles, and more
+2. Configure your site in `config/settings.yaml`
+3. Customize the theme in `themes/`
+4. Run `barka dev` to preview your changes
+5. Run `barka build` to generate a static site

package/starters/blank/starter.yaml

@@ -0,0 +1,14 @@
+name: blank
+label: "Blank — Empty Project"
+description: >
+  A clean starting point with no demo content.
+  Just a minimal homepage and site configuration.
+  Ships with the Starter base theme.
+theme: starter
+copies:
+  - from: content/
+    to: content/
+  - from: config/
+    to: config/
+  - from: themes/
+    to: themes/

package/starters/blank/themes/starter/_types.ts

@@ -0,0 +1,93 @@
+export interface ThemeConfig {
+  name: string;
+  label: string;
+  description?: string;
+  version?: string;
+  author?: string;
+  base?: string;
+  settings?: Record<string, ThemeSettingDefinition>;
+}
+
+export interface ThemeSettingDefinition {
+  type: string;
+  label: string;
+  default?: any;
+  options?: string[];
+}
+
+export interface Content {
+  id: string;
+  type: string;
+  title: string;
+  slug: string;
+  status: 'draft' | 'published' | 'archived';
+  langcode: string;
+  body: string;
+  bodyHtml: string;
+  fields: Record<string, any>;
+  sections?: Section[];
+  seo?: SeoData;
+  siteId?: string;
+  createdAt: Date;
+  updatedAt: Date;
+  publishedAt?: Date;
+  filePath?: string;
+}
+
+export interface Section {
+  type: string;
+  weight: number;
+  data: Record<string, any>;
+  settings: SectionSettings;
+  children?: Section[];
+}
+
+export interface SectionSettings {
+  background: 'light' | 'dark' | 'primary' | 'custom';
+  background_color?: string;
+  background_image?: string;
+  spacing: 'none' | 'small' | 'medium' | 'large' | 'xlarge';
+  width: 'contained' | 'wide' | 'full';
+  css_class?: string;
+  anchor_id?: string;
+  hidden?: boolean;
+}
+
+export interface SeoData {
+  title?: string;
+  description?: string;
+  image?: string;
+  noindex?: boolean;
+  canonical?: string;
+}
+
+export interface SiteConfig {
+  site_name: string;
+  base_url: string;
+  theme: string;
+  theme_settings?: Record<string, any>;
+  seo?: {
+    title_separator?: string;
+    default_description?: string;
+    default_image?: string;
+    google_site_verification?: string;
+    json_ld?: {
+      organization?: { name: string; logo: string; url: string };
+    };
+  };
+}
+
+export interface LayoutProps {
+  content: Content;
+  site: SiteConfig;
+  theme: ThemeConfig;
+  themeSettings: Record<string, any>;
+  children?: any;
+}
+
+export interface SectionProps {
+  data: Record<string, any>;
+  settings: SectionSettings;
+  theme: ThemeConfig;
+  themeSettings: Record<string, any>;
+}

package/starters/blank/themes/starter/components/blog-listing/blog-listing.tsx

@@ -0,0 +1,102 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+const spacingMap: Record<string, string> = {
+  none: 'py-0',
+  small: 'py-8',
+  medium: 'py-16',
+  large: 'py-24',
+  xlarge: 'py-32',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-6xl mx-auto px-6',
+  wide: 'max-w-7xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const bgMap: Record<string, string> = {
+  light: 'bg-white text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+const BlogListing: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  if (settings.hidden) return null;
+
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const bg = bgMap[settings.background] ?? bgMap.light;
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+
+  const bgStyle: Record<string, string> = {};
+  if (settings.background === 'primary') {
+    bgStyle.backgroundColor = primaryColor;
+  } else if (settings.background === 'custom' && settings.background_color) {
+    bgStyle.backgroundColor = settings.background_color;
+  }
+
+  const items: Array<{
+    title: string;
+    url?: string;
+    excerpt?: string;
+    image?: string;
+    date?: string;
+  }> = data.items ?? [];
+
+  return (
+    <section
+      class={`${spacing} ${bg} ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      <div class={width}>
+        {data.heading && (
+          <h2 class="mb-12 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+
+        {items.length > 0 ? (
+          <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+            {items.map((item) => (
+              <article class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md">
+                {item.image && (
+                  <img
+                    src={item.image}
+                    alt={item.title}
+                    class="aspect-video w-full object-cover"
+                    loading="lazy"
+                  />
+                )}
+                <div class="p-5">
+                  {item.date && (
+                    <time class="text-xs text-gray-400">{item.date}</time>
+                  )}
+                  <h3 class="mt-1 text-lg font-semibold text-gray-900">
+                    {item.url ? (
+                      <a href={item.url} class="hover:underline">{item.title}</a>
+                    ) : (
+                      item.title
+                    )}
+                  </h3>
+                  {item.excerpt && (
+                    <p class="mt-2 text-sm leading-relaxed text-gray-600">{item.excerpt}</p>
+                  )}
+                </div>
+              </article>
+            ))}
+          </div>
+        ) : (
+          <p class="text-center text-sm opacity-60">
+            Blog listing renders dynamically — content will appear here at runtime.
+          </p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default BlogListing;

package/starters/blank/themes/starter/components/blog-listing/schema.yaml

@@ -0,0 +1,21 @@
+label: Blog Listing
+icon: list
+description: "Featured blog post with side listing of recent articles."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  content_type:
+    type: text
+    label: Content Type
+    default: article
+  limit:
+    type: number
+    label: Max Items
+    default: 6
+  columns:
+    type: select
+    label: Columns
+    options: ["2", "3", "4"]
+    default: "3"

package/starters/blank/themes/starter/components/columns/columns.tsx

@@ -0,0 +1,101 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+const spacingMap: Record<string, string> = {
+  none: 'py-0',
+  small: 'py-8',
+  medium: 'py-16',
+  large: 'py-24',
+  xlarge: 'py-32',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-6xl mx-auto px-6',
+  wide: 'max-w-7xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const bgMap: Record<string, string> = {
+  light: 'bg-white text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+const layoutMap: Record<string, string> = {
+  '2': 'grid-cols-1 md:grid-cols-2',
+  '3': 'grid-cols-1 md:grid-cols-3',
+  '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+  '1-2': 'grid-cols-1 md:grid-cols-3',
+  '2-1': 'grid-cols-1 md:grid-cols-3',
+};
+
+function colSpan(layout: string, index: number): string {
+  if (layout === '1-2') return index === 0 ? 'md:col-span-1' : 'md:col-span-2';
+  if (layout === '2-1') return index === 0 ? 'md:col-span-2' : 'md:col-span-1';
+  return '';
+}
+
+const Columns: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  if (settings.hidden) return null;
+
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const bg = bgMap[settings.background] ?? bgMap.light;
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+  const layout = data.layout ?? '2';
+  const columns: Array<{ heading?: string; body?: string; image?: string; image_alt?: string }> =
+    data.columns ?? [];
+
+  const bgStyle: Record<string, string> = {};
+  if (settings.background === 'primary') {
+    bgStyle.backgroundColor = primaryColor;
+  } else if (settings.background === 'custom' && settings.background_color) {
+    bgStyle.backgroundColor = settings.background_color;
+  }
+
+  const isDark = settings.background === 'dark' || settings.background === 'primary';
+
+  return (
+    <section
+      class={`${spacing} ${bg} ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      <div class={width}>
+        {data.heading && (
+          <h2 class="mb-12 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+
+        <div class={`grid gap-8 ${layoutMap[layout] ?? layoutMap['2']}`}>
+          {columns.map((col, i) => (
+            <div class={colSpan(layout, i)}>
+              {col.image && (
+                <img
+                  src={col.image}
+                  alt={col.image_alt ?? ''}
+                  class="mb-4 rounded-lg"
+                  loading="lazy"
+                />
+              )}
+              {col.heading && (
+                <h3 class="mb-3 text-xl font-semibold">{col.heading}</h3>
+              )}
+              {col.body && (
+                <div
+                  class={`prose max-w-none ${isDark ? 'prose-invert' : ''}`}
+                  dangerouslySetInnerHTML={{ __html: col.body }}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Columns;

package/starters/blank/themes/starter/components/columns/schema.yaml

@@ -0,0 +1,23 @@
+label: Columns
+icon: columns
+description: "Multi-column layout with configurable column ratios."
+status: stable
+fields:
+  layout:
+    type: select
+    label: Layout
+    options: ["2", "3", "4", "1-2", "2-1"]
+    default: "2"
+  items:
+    type: repeater
+    label: Column Content
+    fields:
+      heading:
+        type: text
+        label: Heading
+      body:
+        type: textarea
+        label: "Body (Markdown)"
+      image:
+        type: media
+        label: Image

package/starters/blank/themes/starter/components/counters/counters.css

@@ -0,0 +1,13 @@
+@keyframes countFade {
+  from { opacity: 0; transform: scale(0.7) translateY(20px); }
+  to { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+.counter-item {
+  opacity: 0;
+  animation: countFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.counter-item:nth-child(1) { animation-delay: 0.15s; }
+.counter-item:nth-child(2) { animation-delay: 0.35s; }
+.counter-item:nth-child(3) { animation-delay: 0.55s; }
+.counter-item:nth-child(4) { animation-delay: 0.75s; }

package/starters/blank/themes/starter/components/counters/counters.tsx

@@ -0,0 +1,81 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SectionProps } from '../../_types.js';
+
+const spacingMap: Record<string, string> = {
+  none: 'py-0',
+  small: 'py-8',
+  medium: 'py-16',
+  large: 'py-24',
+  xlarge: 'py-32',
+};
+
+const widthMap: Record<string, string> = {
+  contained: 'max-w-6xl mx-auto px-6',
+  wide: 'max-w-7xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const bgMap: Record<string, string> = {
+  light: 'bg-white text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+const Counters: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  if (settings.hidden) return null;
+
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const bg = bgMap[settings.background] ?? bgMap.light;
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+  const items: Array<{ value: number | string; suffix?: string; label: string }> =
+    data.items ?? [];
+
+  const bgStyle: Record<string, string> = {};
+  if (settings.background === 'primary') {
+    bgStyle.backgroundColor = primaryColor;
+  } else if (settings.background === 'custom' && settings.background_color) {
+    bgStyle.backgroundColor = settings.background_color;
+  }
+
+  const cols =
+    items.length <= 2
+      ? 'sm:grid-cols-2'
+      : items.length === 3
+        ? 'sm:grid-cols-3'
+        : 'sm:grid-cols-2 lg:grid-cols-4';
+
+  return (
+    <section
+      class={`${spacing} ${bg} ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      <div class={width}>
+        {data.heading && (
+          <h2 class="mb-12 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+
+        <div class={`grid gap-8 text-center ${cols}`}>
+          {items.map((item) => (
+            <div class="p-4">
+              <div class="text-4xl font-extrabold tracking-tight sm:text-5xl" style={{ color: settings.background === 'light' ? primaryColor : undefined }}>
+                {item.value}
+                {item.suffix && <span class="text-3xl sm:text-4xl">{item.suffix}</span>}
+              </div>
+              <div class="mt-2 text-sm font-medium uppercase tracking-wider opacity-70">
+                {item.label}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Counters;

package/starters/blank/themes/starter/components/counters/schema.yaml

@@ -0,0 +1,23 @@
+label: Counters
+icon: hash
+description: "Animated counter stats with numbers, labels, and optional suffixes."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  items:
+    type: repeater
+    label: Counter Items
+    fields:
+      number:
+        type: text
+        label: Number
+        required: true
+      label:
+        type: text
+        label: Label
+        required: true
+      suffix:
+        type: text
+        label: Suffix