@barkajs/barka 0.1.0

package/starters/kadoservices/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/kadoservices/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/kadoservices/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/kadoservices/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/kadoservices/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/kadoservices/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/kadoservices/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/kadoservices/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

package/starters/kadoservices/themes/starter/components/cta/cta.tsx

@@ -0,0 +1,57 @@
+/** @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-4xl mx-auto px-6',
+  wide: 'max-w-6xl mx-auto px-6',
+  full: 'w-full px-6',
+};
+
+const Cta: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.large;
+  const width = widthMap[settings.width] ?? widthMap.contained;
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+
+  return (
+    <section
+      class={`${spacing} text-white ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={{ backgroundColor: primaryColor }}
+    >
+      <div class={`${width} text-center`}>
+        {data.heading && (
+          <h2 class="text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+        {data.description && (
+          <p class="mt-4 text-lg opacity-90">
+            {data.description}
+          </p>
+        )}
+        {data.button_text && (
+          <div class="mt-8">
+            <a
+              href={data.button_url ?? '#'}
+              class="inline-block rounded-lg bg-white px-8 py-3 text-sm font-semibold shadow-lg transition-transform hover:scale-105"
+              style={{ color: primaryColor }}
+            >
+              {data.button_text}
+            </a>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Cta;

package/starters/kadoservices/themes/starter/components/cta/schema.yaml

@@ -0,0 +1,30 @@
+label: Call to Action
+icon: megaphone
+description: "Prominent call-to-action with optional eyebrow, primary and secondary buttons."
+status: stable
+fields:
+  eyebrow:
+    type: text
+    label: Eyebrow
+  heading:
+    type: text
+    label: Heading
+    required: true
+  body:
+    type: textarea
+    label: Body Text
+  description:
+    type: textarea
+    label: Description
+  button_text:
+    type: text
+    label: Button Text
+  button_url:
+    type: text
+    label: Button URL
+  secondary_text:
+    type: text
+    label: Secondary Button Text
+  secondary_url:
+    type: text
+    label: Secondary Button URL

package/starters/kadoservices/themes/starter/components/faq/faq.tsx

@@ -0,0 +1,77 @@
+/** @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-3xl mx-auto px-6',
+  wide: 'max-w-5xl 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 Faq: 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<{ question: string; answer: 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 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="divide-y divide-gray-200">
+          {items.map((item) => (
+            <details class="group">
+              <summary
+                class={`flex cursor-pointer items-center justify-between py-5 text-left text-lg font-medium transition-colors ${isDark ? 'hover:opacity-80' : 'hover:text-gray-600'}`}
+              >
+                {item.question}
+                <span class="ml-4 flex-shrink-0 text-xl transition-transform group-open:rotate-45">+</span>
+              </summary>
+              <div class={`pb-5 leading-relaxed ${isDark ? 'opacity-80' : 'text-gray-600'}`}>
+                {item.answer}
+              </div>
+            </details>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Faq;

package/starters/kadoservices/themes/starter/components/faq/schema.yaml

@@ -0,0 +1,20 @@
+label: FAQ
+icon: help-circle
+description: "Question and answer list."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  items:
+    type: repeater
+    label: Questions
+    fields:
+      question:
+        type: text
+        label: Question
+        required: true
+      answer:
+        type: textarea
+        label: Answer
+        required: true