@core / blocks

1.0.0 ▾

1.0.0

verificadoMIT

GitHub

Blocos de página: 15 seções acessíveis (hero, preços, FAQ com JSON-LD…), editor no admin e registro extensível

Código25 arquivosContexto~681 tokensanálise aprovada

~681 tokens→ src/lib/blocks/AGENTS.md→ .cursor/rules/genpm-core-blocks.mdc

Isto é exatamente o que sua IA lê quando trabalha em src/lib/blocks. Nada mais é adicionado ao contexto dela.

@core/blocks — rules for AI agents

Purpose

Page sections that editors combine from the admin: hero, features, benefits, testimonials, logos, pricing, FAQ (with FAQPage JSON-LD), call to action, gallery, video, stats, comparison, guarantee, rich text and form. Each block is a zod schema + editor fields + a React component. Other packages and kits add their own blocks (product grid, latest posts…) to the same registry. Blocks are stored as JSON inside @core/content entries; no tables of its own.

Map

index.ts — defineBlock, createBlockRegistry, coreBlocks (and each block), RenderBlocks, collectMediaIds.
core/*.ts — one file per block. parts.ts — Section, Heading, Img, CtaLink, JsonLd for new blocks.
media.ts — loadBlockMedia(blocks, registry) (server: one query to @core/media).
editor.ts — 'use client': blocksRenderer(blockMeta(registry)) for AdminApp. blocks.css — styles on @core/ui tokens.

Integration

Create src/genpm/blocks.ts: export const blocks = createBlockRegistry([...coreBlocks /*, kit blocks */]);
Add a field to a content collection: schema blocks: blocks.schema, admin field blocks.field('blocks', 'Sections').
Admin: compute blockMeta(blocks) on the server and pass it to the client component that renders <AdminApp renderers={{ blocks: blocksRenderer(meta), /* richText, media… */ }} /> (never import the registry in client code).

Page (server component):

const media = await loadBlockMedia(page.data.blocks, blocks);
return <RenderBlocks blocks={page.data.blocks} registry={blocks} media={media}
  renderForm={(key) => <Form formKey={key} />} embeds={hasConsent('marketing') ? 'iframe' : 'link'} />;

Styles: import src/lib/ui/ui.css then src/lib/blocks/blocks.css in the root layout.
Verify: a page with every block passes axe and has one h1; a block with an unknown type renders nothing and warns in dev.

Conventions

A new block = new file with defineBlock + entry in the registry. Never add if (type === …) to RenderBlocks.
Use Section and Heading with ctx.level (items one level below); only blocks with pageTitle may become the h1.
Images are media ids resolved with loadBlockMedia; links go through the href schema (no javascript:).
Text in blocks is plain text; use the rich-text block for formatting.

Don't

Don't render user HTML (dangerouslySetInnerHTML) except via JsonLd, which escapes <, > and &.
Don't load video iframes without marketing consent (embeds: 'link' is the default).
Don't invent testimonials, ratings or statistics; the editor help texts remind users these must be real and verifiable.

# @core/blocks — rules for AI agents

## Purpose
Page sections that editors combine from the admin: hero, features, benefits, testimonials, logos, pricing, FAQ (with
FAQPage JSON-LD), call to action, gallery, video, stats, comparison, guarantee, rich text and form. Each block is a
zod schema + editor fields + a React component. Other packages and kits add their own blocks (product grid, latest
posts…) to the same registry. Blocks are stored as JSON inside @core/content entries; no tables of its own.

## Map
- `index.ts` — `defineBlock`, `createBlockRegistry`, `coreBlocks` (and each block), `RenderBlocks`, `collectMediaIds`.
- `core/*.ts` — one file per block. `parts.ts` — `Section`, `Heading`, `Img`, `CtaLink`, `JsonLd` for new blocks.
- `media.ts` — `loadBlockMedia(blocks, registry)` (server: one query to @core/media).
- `editor.ts` — `'use client'`: `blocksRenderer(blockMeta(registry))` for `AdminApp`. `blocks.css` — styles on @core/ui tokens.

## Integration
1. Create `src/genpm/blocks.ts`: `export const blocks = createBlockRegistry([...coreBlocks /*, kit blocks */]);`
2. Add a field to a content collection: schema `blocks: blocks.schema`, admin field `blocks.field('blocks', 'Sections')`.
3. Admin: compute `blockMeta(blocks)` on the server and pass it to the client component that renders
   `<AdminApp renderers={{ blocks: blocksRenderer(meta), /* richText, media… */ }} />` (never import the registry in client code).
4. Page (server component):
   ```tsx
   const media = await loadBlockMedia(page.data.blocks, blocks);
   return <RenderBlocks blocks={page.data.blocks} registry={blocks} media={media}
     renderForm={(key) => <Form formKey={key} />} embeds={hasConsent('marketing') ? 'iframe' : 'link'} />;
   ```
5. Styles: import `src/lib/ui/ui.css` then `src/lib/blocks/blocks.css` in the root layout.
6. Verify: a page with every block passes axe and has one `h1`; a block with an unknown type renders nothing and warns in dev.

## Conventions
- A new block = new file with `defineBlock` + entry in the registry. Never add `if (type === …)` to `RenderBlocks`.
- Use `Section` and `Heading` with `ctx.level` (items one level below); only blocks with `pageTitle` may become the `h1`.
- Images are media ids resolved with `loadBlockMedia`; links go through the `href` schema (no `javascript:`).
- Text in blocks is plain text; use the `rich-text` block for formatting.

## Don't
- Don't render user HTML (`dangerouslySetInnerHTML`) except via `JsonLd`, which escapes `<`, `>` and `&`.
- Don't load video iframes without marketing consent (`embeds: 'link'` is the default).
- Don't invent testimonials, ratings or statistics; the editor help texts remind users these must be real and verifiable.

A árvore exata que será injetada, após o .genpmignore. Fixada em

src/lib/blocks/core/pricing.tssomente leitura · a255d6d

import { createElement as h } from 'react';
import { z } from 'zod';
import { defineBlock } from '../define.ts';
import { CtaLink, Heading, href, optText, Section, text } from '../parts.ts';

export const pricing = defineBlock({
  type: 'pricing',
  label: 'Pricing',
  icon: 'tag',
  schema: z.object({
    title: optText(160),
    intro: optText(400),
    plans: z
      .array(
        z.object({
          name: text(80),
          price: text(40),
          period: optText(40),
          description: optText(300),
          features: optText(2000),
          ctaLabel: optText(60),
          ctaHref: href,
          highlighted: z.boolean().default(false),
        }),
      )
      .min(1)
      .max(4),
    note: optText(300),
  }),
  fields: [
    { name: 'title', label: 'Title', type: 'text' },
    { name: 'intro', label: 'Introduction', type: 'textarea' },
    {
      name: 'plans',
      label: 'Plans',
      type: 'list',
      required: true,
      fields: [
        { name: 'name', label: 'Name', type: 'text', required: true },
        { name: 'price', label: 'Price (as shown, taxes included for consumers)', type: 'text', required: true },
        { name: 'period', label: 'Period', type: 'text' },
        { name: 'description', label: 'Description', type: 'textarea' },
        { name: 'features', label: 'Features (one per line)', type: 'textarea' },
        { name: 'ctaLabel', label: 'Button text', type: 'text' },
        { name: 'ctaHref', label: 'Button link', type: 'url' },
        { name: 'highlighted', label: 'Highlight', type: 'boolean' },
      ],
    },
    { name: 'note', label: 'Note (taxes, billing terms)', type: 'text' },
  ],
  defaults: () => ({ plans: [{ name: 'Basic', price: '€0' }] }),
  Component: ({ data, ctx }) =>
    h(
      Section,
      { id: ctx.id, block: 'pricing', title: data.title, intro: data.intro, ctx, label: 'Pricing' },
      h(
        'ul',
        { className: `blk-grid blk-grid--${Math.min(data.plans.length, 3)}`, role: 'list' },
        data.plans.map((p, i) =>
          h(
            'li',
            { key: i, className: `blk-card blk-plan${p.highlighted ? ' blk-plan--highlighted' : ''}` },
            h(Heading, { level: data.title ? ctx.level + 1 : ctx.level }, p.name),
            h('p', { className: 'blk-plan__price' }, h('strong', null, p.price), p.period && h('span', null, ` / ${p.period}`)),
            p.description && h('p', null, p.description),
            p.features &&
              h(
                'ul',
                { className: 'blk-checklist' },
                p.features
                  .split('\n')
                  .map((f) => f.trim())
                  .filter(Boolean)
                  .map((f, j) => h('li', { key: j }, f)),
              ),
            h(CtaLink, { href: p.ctaHref, label: p.ctaLabel, variant: p.highlighted ? 'primary' : 'default', siteHost: ctx.siteHost }),
          ),
        ),
      ),
      data.note && h('p', { className: 'blk__note' }, data.note),
    ),
});