@getvitops/emdash 2.0.0-alpha.0 → 2.0.0-alpha.1

package/src/astro/blocks/attrs.ts

@@ -0,0 +1,104 @@
+/**
+ * The escape hatches every block carries: `anchor` (an `id`), `className` (extra classes)
+ * and `style` (CSS custom properties).
+ *
+ * All three are editor-supplied strings that land in attributes, so each is validated against
+ * a closed grammar and anything outside it is dropped, never escaped into place.
+ *
+ * **`style` is custom properties only.** `--p-card: 2rem` tunes a framework hook, which is how
+ * the design system is meant to be overridden. Free-form declarations (`display`, `position`,
+ * `background: url(…)`) would let one page quietly diverge from the tokens, and `url(` is a
+ * request the visitor's browser makes to wherever an editor points it.
+ *
+ * **`className` and the `tailwind` format.** Tailwind scans source for class names, not CMS
+ * content, so a utility typed here exists only if something else already used it. Under the
+ * `css` and `bricks` formats every framework class ships, so the caveat does not apply.
+ */
+
+export interface BlockAttrs {
+  id?: string;
+  class?: string;
+  style?: string;
+}
+
+const ANCHOR = /^[a-z][a-z0-9-]{0,63}$/;
+const CLASS_TOKEN = /^[A-Za-z0-9_:@/.[\]-]{1,80}$/;
+const MAX_CLASSES = 20;
+const PROPERTY = /^--[a-zA-Z][a-zA-Z0-9-]{0,60}$/;
+/** Characters that could end the declaration, open a function that fetches, or leave the attribute. */
+const FORBIDDEN_VALUE = /[\\<>@{}"'`]|url\(|expression\(|image-set\(|;/i;
+
+/** Lowercase an anchor and replace anything else with `-`; `undefined` when nothing valid remains. */
+export function anchorId(input: unknown): string | undefined {
+  if (typeof input !== 'string') return undefined;
+  const slug = input
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+  return ANCHOR.test(slug) ? slug : undefined;
+}
+
+export function classTokens(input: unknown): string | undefined {
+  if (typeof input !== 'string') return undefined;
+  const tokens = input
+    .split(/\s+/)
+    .filter((t) => CLASS_TOKEN.test(t))
+    .slice(0, MAX_CLASSES);
+  return tokens.length ? tokens.join(' ') : undefined;
+}
+
+/** Keep each `--name: value` pair that passes; drop the rest. */
+export function customProperties(input: unknown): string | undefined {
+  if (typeof input !== 'string') return undefined;
+  const kept: string[] = [];
+  for (const decl of input.split(';')) {
+    const at = decl.indexOf(':');
+    if (at < 0) continue;
+    const name = decl.slice(0, at).trim();
+    const value = decl.slice(at + 1).trim();
+    if (!PROPERTY.test(name) || !value || value.length > 200 || FORBIDDEN_VALUE.test(value))
+      continue;
+    kept.push(`${name}: ${value}`);
+  }
+  return kept.length ? kept.join('; ') : undefined;
+}
+
+/** The validated `id` / `class` / `style` for a block's saved value. Empty when none is set. */
+export function blockAttrs(input: object | undefined): BlockAttrs {
+  const value = input as Record<string, unknown> | undefined;
+  const out: BlockAttrs = {};
+  const id = anchorId(value?.anchor);
+  // Portable Text blocks name it `className`; a block TYPE's slugs must be lowercase, so `class_name`.
+  const cls = classTokens(value?.className ?? value?.class_name);
+  const style = customProperties(value?.style);
+  if (id) out.id = id;
+  if (cls) out.class = cls;
+  if (style) out.style = style;
+  return out;
+}
+
+type ClassPart = string | false | null | undefined;
+
+/**
+ * The attributes for a block's outermost element: its own classes and style with the editor's
+ * `anchor` / `className` / `style` merged in. Spread it on that element (`<div {...root}>`) or pass
+ * it to the pattern component that renders it — there is never an extra wrapper node, so a block's
+ * DOM shape does not depend on which fields an editor filled in.
+ *
+ * An anchored element also gets `.block-anchor`, which offsets `scroll-margin-top` for a sticky header.
+ */
+export function rootAttrs(
+  value: object | undefined,
+  own: ClassPart[] = [],
+  ownStyle?: string,
+): BlockAttrs {
+  const user = blockAttrs(value);
+  const out: BlockAttrs = {};
+  if (user.id) out.id = user.id;
+  const cls = [...own, user.id && 'block-anchor', user.class].filter(Boolean).join(' ');
+  if (cls) out.class = cls;
+  const style = [ownStyle, user.style].filter(Boolean).join('; ');
+  if (style) out.style = style;
+  return out;
+}

package/src/astro/blocks/render.container.test.ts

@@ -568,3 +568,43 @@ describe('vitops.form', () => {
     expect(html).not.toContain('<script>alert(1)');
   });
 });
+
+describe('escape hatches (anchor, className, style)', () => {
+  const hatches = { anchor: 'x', className: 'mt-4', style: '--a: 1px; background: url(evil)' };
+  const samples: [string, unknown, object][] = [
+    ['callout', Callout, { heading: 'H', body: 'b' }],
+    ['stats', Stats, { stats: [{ value: '1', label: 'a' }] }],
+    ['steps', Steps, { steps: [{ title: 'a', text: 'b' }] }],
+    ['logos', Logos, { logos: [{ image: '/a.png', alt: 'A' }] }],
+    ['pricing', Pricing, { plans: [{ name: 'P', price: '$1' }] }],
+    ['hero', Hero, { heading: 'H', body: 'b' }],
+    ['cards (default)', Cards, { cards: [{ title: 'T' }] }],
+    ['cards (panel)', Cards, { variant: 'panel', cards: [{ title: 'T' }] }],
+  ];
+
+  it.each(samples)(
+    '%s: lands on its own element, with no wrapper node',
+    async (name, component, fields) => {
+      const html = (await render(component, { ...fields, ...hatches })).trim();
+      // One id, one added class, the custom property kept and the fetching declaration dropped.
+      expect(html.match(/id="x"/g)).toHaveLength(1);
+      expect(html).toContain('mt-4');
+      expect(html).toContain('block-anchor');
+      expect(html).toContain('--a: 1px');
+      expect(html).not.toContain('url(');
+      expect(html).not.toContain('block-shell');
+      // The element carrying it is the first one rendered, except `cards`, whose default variant is
+      // a <wc-cards> host around the grid the attributes go on.
+      if (!name.startsWith('cards')) expect(html).toMatch(/^<[a-z-]+[^>]*\sid="x"/);
+    },
+  );
+
+  it.each(samples)(
+    '%s: renders the same markup with none set',
+    async (_name, component, fields) => {
+      const html = await render(component, fields);
+      expect(html).not.toContain('block-anchor');
+      expect(html).not.toContain(' id="x"');
+    },
+  );
+});

package/src/astro/index.ts

@@ -7,6 +7,8 @@
  * `../block-types.ts` (a `blocks` field entry, keyed by slug), for a site to pass to
  * `defineBlockComponents` / `<Blocks components={…}>`. EmDash does not merge it.
  */
+import Badges from './blocks/Badges.astro';
+import WidgetArea from './blocks/WidgetArea.astro';
 import Accordion from './blocks/Accordion.astro';
 import ActionLink from './blocks/ActionLink.astro';
 import Banner from './blocks/Banner.astro';
@@ -52,9 +54,14 @@ export const blockComponents = {
   'vitops.form': Form,
   'vitops.reviews': Reviews,
   'vitops.nav': Nav,
+  'vitops.badges': Badges,
+  'vitops.widgetArea': WidgetArea,
 };
 
 /** Keyed by block-type slug (see `SECTION_SLUG`), not by Portable Text `_type`. */
 export const blockTypeComponents = {
   vitops_section: Section,
 };
+
+/** The framework-styled widget area, for a site layout (the block form is `vitops.widgetArea`). */
+export { default as VitopsWidgetArea } from './WidgetArea.astro';