@barkajs/barka 0.1.0

package/starters/lokatech/themes/starter/components/testimonials/schema.yaml

@@ -0,0 +1,26 @@
+label: Testimonials
+icon: quote
+description: "Featured testimonial with side quotes and author details."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  items:
+    type: repeater
+    label: Testimonials
+    fields:
+      quote:
+        type: textarea
+        label: Quote
+        required: true
+      author:
+        type: text
+        label: Author Name
+        required: true
+      role:
+        type: text
+        label: Author Role
+      avatar:
+        type: media
+        label: Avatar

package/starters/lokatech/themes/starter/components/testimonials/testimonials.tsx

@@ -0,0 +1,100 @@
+/** @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-gray-50 text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+const Testimonials: 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<{
+    quote: string;
+    author: string;
+    role?: string;
+    avatar?: 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' : 'sm:grid-cols-2 lg:grid-cols-3';
+
+  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 ${cols}`}>
+          {items.map((item) => (
+            <div class="relative rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
+              <div class="mb-4 text-4xl leading-none opacity-20" style={{ color: primaryColor }}>"</div>
+              <blockquote class="mb-6 text-base italic leading-relaxed text-gray-600">
+                {item.quote}
+              </blockquote>
+              <div class="flex items-center gap-3">
+                {item.avatar ? (
+                  <img
+                    src={item.avatar}
+                    alt={item.author}
+                    class="h-10 w-10 rounded-full object-cover"
+                    loading="lazy"
+                  />
+                ) : (
+                  <div
+                    class="flex h-10 w-10 items-center justify-center rounded-full text-sm font-bold text-white"
+                    style={{ backgroundColor: primaryColor }}
+                  >
+                    {item.author.charAt(0).toUpperCase()}
+                  </div>
+                )}
+                <div>
+                  <div class="text-sm font-semibold text-gray-900">{item.author}</div>
+                  {item.role && (
+                    <div class="text-xs text-gray-500">{item.role}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Testimonials;

package/starters/lokatech/themes/starter/components/text/schema.yaml

@@ -0,0 +1,12 @@
+label: Text
+icon: text
+description: "Rich text block with optional heading."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  body:
+    type: textarea
+    label: Body
+    required: true

package/starters/lokatech/themes/starter/components/text/text.tsx

@@ -0,0 +1,62 @@
+/** @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 Text: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  const spacing = spacingMap[settings.spacing] ?? spacingMap.medium;
+  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;
+  }
+
+  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-6 text-3xl font-bold tracking-tight">
+            {data.heading}
+          </h2>
+        )}
+        {data.body && (
+          <div
+            class="prose prose-lg max-w-none"
+            dangerouslySetInnerHTML={{ __html: data.body }}
+          />
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Text;

package/starters/lokatech/themes/starter/components/text-with-image/schema.yaml

@@ -0,0 +1,30 @@
+label: Text with Image
+icon: image
+description: "Two-column text and image with optional CTA."
+status: stable
+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
+  image_alt:
+    type: text
+    label: Image Alt Text
+  cta_text:
+    type: text
+    label: Button Text
+  cta_url:
+    type: text
+    label: Button URL

package/starters/lokatech/themes/starter/components/text-with-image/text-with-image.tsx

@@ -0,0 +1,86 @@
+/** @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 TextWithImage: FC<SectionProps> = ({ data, settings, themeSettings }) => {
+  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 reversed = data.image_position === 'left';
+
+  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;
+  }
+
+  return (
+    <section
+      class={`${spacing} ${bg} ${settings.css_class ?? ''}`}
+      id={settings.anchor_id}
+      style={Object.keys(bgStyle).length > 0 ? bgStyle : undefined}
+    >
+      <div class={`${width} grid items-center gap-12 md:grid-cols-2`}>
+        <div class={reversed ? 'order-2' : ''}>
+          {data.heading && (
+            <h2 class="mb-4 text-3xl font-bold tracking-tight">
+              {data.heading}
+            </h2>
+          )}
+          {data.body && (
+            <div
+              class="prose prose-lg max-w-none"
+              dangerouslySetInnerHTML={{ __html: data.body }}
+            />
+          )}
+          {data.cta_text && (
+            <div class="mt-6">
+              <a
+                href={data.cta_url ?? '#'}
+                class="inline-block rounded-lg px-6 py-2.5 text-sm font-semibold text-white transition-transform hover:scale-105"
+                style={{ backgroundColor: primaryColor }}
+              >
+                {data.cta_text}
+              </a>
+            </div>
+          )}
+        </div>
+        <div class={reversed ? 'order-1' : ''}>
+          {data.image && (
+            <img
+              src={data.image}
+              alt={data.image_alt ?? ''}
+              class="rounded-xl shadow-lg"
+              loading="lazy"
+            />
+          )}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TextWithImage;

package/starters/lokatech/themes/starter/components/video/schema.yaml

@@ -0,0 +1,19 @@
+label: Video Embed
+icon: play-circle
+description: "YouTube or Vimeo video embed with optional heading and caption."
+status: stable
+fields:
+  heading:
+    type: text
+    label: Heading
+  video_url:
+    type: text
+    label: "Video URL (YouTube/Vimeo)"
+    required: true
+  caption:
+    type: text
+    label: Caption
+  autoplay:
+    type: boolean
+    label: Autoplay
+    default: false

package/starters/lokatech/themes/starter/components/video/video.tsx

@@ -0,0 +1,98 @@
+/** @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 bgMap: Record<string, string> = {
+  light: 'bg-white text-gray-900',
+  dark: 'bg-gray-900 text-white',
+  primary: 'text-white',
+  custom: '',
+};
+
+function toEmbedUrl(url: string): string | null {
+  if (!url) return null;
+
+  // YouTube: youtube.com/watch?v=XXX or youtu.be/XXX
+  const ytMatch = url.match(
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)/
+  );
+  if (ytMatch) return `https://www.youtube.com/embed/${ytMatch[1]}`;
+
+  // Vimeo: vimeo.com/XXX
+  const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
+  if (vimeoMatch) return `https://player.vimeo.com/video/${vimeoMatch[1]}`;
+
+  // Already an embed URL or unknown — pass through
+  if (url.includes('/embed/') || url.includes('player.vimeo.com')) return url;
+
+  return null;
+}
+
+const Video: 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 embedUrl = toEmbedUrl(data.video_url ?? '');
+
+  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-10 text-center text-3xl font-bold tracking-tight sm:text-4xl">
+            {data.heading}
+          </h2>
+        )}
+
+        {embedUrl ? (
+          <div class="relative overflow-hidden rounded-xl shadow-lg" style={{ paddingBottom: '56.25%' }}>
+            <iframe
+              src={embedUrl}
+              title={data.heading ?? 'Video'}
+              class="absolute inset-0 h-full w-full"
+              frameborder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowfullscreen
+            />
+          </div>
+        ) : (
+          <p class="text-center text-sm opacity-60">No video URL provided.</p>
+        )}
+
+        {data.caption && (
+          <p class="mt-4 text-center text-sm opacity-60">{data.caption}</p>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default Video;

package/starters/lokatech/themes/starter/layouts/article.tsx

@@ -0,0 +1,42 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const Article: FC<LayoutProps> = (props) => {
+  const { content } = props;
+  const publishedDate = content.publishedAt ?? content.createdAt;
+
+  return (
+    <Base {...props}>
+      <article class="mx-auto max-w-3xl px-6 py-16">
+        <header class="mb-10">
+          <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+            {content.title}
+          </h1>
+          <time
+            datetime={publishedDate.toISOString()}
+            class="mt-4 block text-sm text-gray-500"
+          >
+            {publishedDate.toLocaleDateString('en-US', {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+            })}
+          </time>
+        </header>
+
+        {content.bodyHtml && (
+          <div
+            class="prose prose-lg prose-gray max-w-none"
+            dangerouslySetInnerHTML={{ __html: content.bodyHtml }}
+          />
+        )}
+
+        {props.children}
+      </article>
+    </Base>
+  );
+};
+
+export default Article;

package/starters/lokatech/themes/starter/layouts/base.tsx

@@ -0,0 +1,92 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+
+const Base: FC<LayoutProps> = ({ content, site, theme, themeSettings, children }) => {
+  const seo = content.seo ?? {};
+  const separator = site.seo?.title_separator ?? ' | ';
+  const pageTitle = seo.title ?? content.title;
+  const fullTitle = `${pageTitle}${separator}${site.site_name}`;
+  const description = seo.description ?? site.seo?.default_description ?? '';
+  const ogImage = seo.image ?? site.seo?.default_image ?? '';
+  const canonical = seo.canonical ?? `${site.base_url}/${content.slug}`;
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+  const langcode = content.langcode ?? 'en';
+
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': content.type === 'article' ? 'Article' : 'WebPage',
+    name: pageTitle,
+    description,
+    url: canonical,
+    ...(content.publishedAt && { datePublished: content.publishedAt.toISOString() }),
+    ...(content.updatedAt && { dateModified: content.updatedAt.toISOString() }),
+  };
+
+  return (
+    <html lang={langcode}>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{fullTitle}</title>
+        <meta name="description" content={description} />
+        {seo.noindex && <meta name="robots" content="noindex, nofollow" />}
+        <link rel="canonical" href={canonical} />
+
+        <meta property="og:type" content={content.type === 'article' ? 'article' : 'website'} />
+        <meta property="og:title" content={pageTitle} />
+        <meta property="og:description" content={description} />
+        <meta property="og:url" content={canonical} />
+        {ogImage && <meta property="og:image" content={ogImage} />}
+
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={pageTitle} />
+        <meta name="twitter:description" content={description} />
+        {ogImage && <meta name="twitter:image" content={ogImage} />}
+
+        <script src="https://cdn.tailwindcss.com"></script>
+        <link rel="stylesheet" href="/static/style.css" />
+
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+
+        <style>{`
+          :root {
+            --color-primary: ${primaryColor};
+          }
+        `}</style>
+      </head>
+      <body class="min-h-screen flex flex-col bg-white text-gray-900 antialiased">
+        <header class="sticky top-0 z-50 border-b border-gray-100 bg-white/80 backdrop-blur-lg">
+          <nav class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
+            <a href="/" class="text-xl font-bold tracking-tight" style={{ color: primaryColor }}>
+              {themeSettings.logo
+                ? <img src={themeSettings.logo} alt={site.site_name} class="h-8" />
+                : site.site_name}
+            </a>
+            <ul class="flex items-center gap-8 text-sm font-medium text-gray-600">
+              <li><a href="/" class="hover:text-gray-900 transition-colors">Home</a></li>
+              <li><a href="/articles" class="hover:text-gray-900 transition-colors">Articles</a></li>
+              <li><a href="/pages" class="hover:text-gray-900 transition-colors">Pages</a></li>
+            </ul>
+          </nav>
+        </header>
+
+        <main class="flex-1">
+          {children}
+        </main>
+
+        <footer class="border-t border-gray-100 bg-gray-50">
+          <div class="mx-auto max-w-6xl px-6 py-10 text-center text-sm text-gray-500">
+            <p>{themeSettings.footer_text ?? 'Powered by Barka CMS'}</p>
+            <p class="mt-1">&copy; {new Date().getFullYear()} {site.site_name}</p>
+          </div>
+        </footer>
+      </body>
+    </html>
+  );
+};
+
+export default Base;

package/starters/lokatech/themes/starter/layouts/landing-page.tsx

@@ -0,0 +1,14 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const LandingPage: FC<LayoutProps> = (props) => {
+  return (
+    <Base {...props}>
+      {props.children}
+    </Base>
+  );
+};
+
+export default LandingPage;

package/starters/lokatech/themes/starter/layouts/page.tsx

@@ -0,0 +1,29 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { LayoutProps } from '../_types.js';
+import Base from './base.js';
+
+const Page: FC<LayoutProps> = (props) => {
+  const { content } = props;
+
+  return (
+    <Base {...props}>
+      <div class="mx-auto max-w-4xl px-6 py-16">
+        <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+          {content.title}
+        </h1>
+
+        {content.bodyHtml && (
+          <div
+            class="prose prose-lg prose-gray mt-8 max-w-none"
+            dangerouslySetInnerHTML={{ __html: content.bodyHtml }}
+          />
+        )}
+
+        {props.children}
+      </div>
+    </Base>
+  );
+};
+
+export default Page;

package/starters/lokatech/themes/starter/partials/footer.tsx

@@ -0,0 +1,22 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SiteConfig, ThemeConfig } from '../_types.js';
+
+interface FooterProps {
+  site: SiteConfig;
+  theme: ThemeConfig;
+  themeSettings: Record<string, any>;
+}
+
+const Footer: FC<FooterProps> = ({ site, themeSettings }) => {
+  return (
+    <footer class="border-t border-gray-100 bg-gray-50">
+      <div class="mx-auto max-w-6xl px-6 py-10 text-center text-sm text-gray-500">
+        <p>{themeSettings.footer_text ?? 'Powered by Barka CMS'}</p>
+        <p class="mt-1">&copy; {new Date().getFullYear()} {site.site_name}</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

package/starters/lokatech/themes/starter/partials/header.tsx

@@ -0,0 +1,32 @@
+/** @jsxImportSource hono/jsx */
+import type { FC } from 'hono/jsx';
+import type { SiteConfig, ThemeConfig } from '../_types.js';
+
+interface HeaderProps {
+  site: SiteConfig;
+  theme: ThemeConfig;
+  themeSettings: Record<string, any>;
+}
+
+const Header: FC<HeaderProps> = ({ site, themeSettings }) => {
+  const primaryColor = themeSettings.primary_color ?? '#2563eb';
+
+  return (
+    <header class="sticky top-0 z-50 border-b border-gray-100 bg-white/80 backdrop-blur-lg">
+      <nav class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
+        <a href="/" class="text-xl font-bold tracking-tight" style={{ color: primaryColor }}>
+          {themeSettings.logo
+            ? <img src={themeSettings.logo} alt={site.site_name} class="h-8" />
+            : site.site_name}
+        </a>
+        <ul class="flex items-center gap-8 text-sm font-medium text-gray-600">
+          <li><a href="/" class="hover:text-gray-900 transition-colors">Home</a></li>
+          <li><a href="/articles" class="hover:text-gray-900 transition-colors">Articles</a></li>
+          <li><a href="/pages" class="hover:text-gray-900 transition-colors">Pages</a></li>
+        </ul>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;