@jezweb/flare-components

Shared component library for Flare edge-rendered SME websites. Built with Hono JSX for Cloudflare Workers.

Installation

npm install @jezweb/flare-components hono

Usage

import { Hono } from 'hono'
import {
  renderPageComponents,
  Layout,
  type Page,
  type SiteConfig,
} from '@jezweb/flare-components'

const app = new Hono()

app.get('/:slug', async (c) => {
  const config: SiteConfig = await getConfig()
  const page: Page = await getPage(c.req.param('slug'))

  const components = await renderPageComponents(page, config)

  return c.html(
    <Layout config={config} page={page}>
      {components}
    </Layout>
  )
})

export default app

Components

| Component | Designs | Description | |-----------|---------|-------------| | Hero | basic, riverside, alpine, metro | Page hero sections | | Services | icon-cards, feature-list, image-grid | Service offerings | | About | bio-left, bio-centered | About/bio sections | | ContentSection | centered, left-aligned, split | Rich content blocks | | FAQ | accordion, toggle, two-column | FAQ sections | | Testimonials | carousel-dark, quotes-light, single-featured | Customer testimonials | | Contact | split-form, minimal | Contact information/forms | | Gallery | grid, masonry | Image galleries | | Footer | simple, columns | Page footers | | Layout | - | HTML wrapper with theme |

Agent-First Content Format

Rich text content uses a structured JSON format optimised for AI agents (no markup parsing ambiguity):

import type { Content } from '@jezweb/flare-components'

const content: Content = [
  {
    type: 'paragraph',
    children: [
      { text: 'We offer ' },
      { text: 'premium services', bold: true },
      { text: ' with guaranteed results.' }
    ]
  },
  {
    type: 'list',
    style: 'bullet',
    items: [
      [{ text: '24/7 support' }],
      [{ text: 'Licensed & insured', bold: true }]
    ]
  }
]

See docs/agent-content-format.md for full specification.

Design Registry

For MCP introspection, the package exports design constants:

import { designRegistry } from '@jezweb/flare-components'

// { hero: ['basic', 'riverside', 'alpine', 'metro'], ... }
console.log(designRegistry)

Types

import type {
  // Page types
  Page, SiteConfig,
  // Component props
  HeroProps, ServicesProps, AboutProps, ContentProps, FAQProps,
  // Content format (agent-first)
  Content, BlockNode, InlineNode, TextNode, LinkNode, ButtonNode,
  ParagraphBlock, HeadingBlock, ListBlock, QuoteBlock, CalloutBlock,
} from '@jezweb/flare-components'

// Type guards and helpers
import {
  isTextNode, isLinkNode, isParagraphBlock, isListBlock,
  paragraph, simpleContent,  // Helper functions
} from '@jezweb/flare-components'

// Content renderer (for custom rendering)
import { renderContent } from '@jezweb/flare-components'

Part of Flare Ecosystem

• @jezweb/flare-components - This package (component library)
• flare-site-template - GitHub template for new sites
• flare-mcp-server - MCP server for content management

License

Proprietary - Jezweb Pty Ltd