@styleflow.app/flowpress-astro-core 0.2.0-beta.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+## 0.2.0-beta.0
+
+- Made the repository buildable outside the original monorepo.
+- Added sanitized GraphQL network, timeout, non-JSON and debug diagnostics.
+- Added package release checks and OIDC publishing workflow.
+- Pinned the matching StyleFlow prerelease.
+
+## 0.1.0
+
+- Initial extractable core package.
+- WordPress-compatible template hierarchy.
+- GraphQL route/capability client.
+- Rank Math SEO types and base document.
+- Runtime Styleflow CMS value resolver.

package/README.md

@@ -0,0 +1,47 @@
+# @styleflow.app/flowpress-astro-core
+
+Project-agnostic runtime for WordPress route resolution, the WordPress template
+hierarchy, normalized Rank Math data, feature capabilities, and safe Styleflow
+CMS values.
+
+The package must not import from an application or project plugin.
+
+## Install
+
+```bash
+pnpm add @styleflow.app/flowpress-astro-core@0.2.0-beta.0
+```
+
+Prereleases are pinned exactly. The package expects Astro 7 or newer and the
+matching StyleFlow `0.3.0-beta.x` line.
+
+The client reports the GraphQL operation, sanitized endpoint, HTTP/content
+type failures and underlying network/TLS cause. Upstream GraphQL debug details
+remain hidden unless `debug: true` is explicitly set for local development.
+
+```ts
+const client = new FlowpressClient({
+  endpoint: process.env.BACKEND_GRAPHQL_URL!,
+  debug: process.env.APP_ENV === "local"
+});
+```
+
+For local Cloudflare development, prefer an HTTP loopback endpoint dedicated
+to server-to-server traffic. Keep the public HTTPS backend URL separate for
+canonical URL rewriting.
+
+## Release
+
+```bash
+# First bootstrap, after the StyleFlow prerelease exists on npm:
+npm install
+npm run release:check
+npm run release:publish:next
+```
+
+Commit the generated `package-lock.json`; use `npm ci` for every subsequent
+release and in CI.
+
+The first publish requires npm organization access and 2FA. Subsequent
+publishes use `.github/workflows/publish.yml` with npm trusted publishing
+(OIDC); no long-lived publish token belongs in this repository.

package/dist/astro/BaseLayout.astro

@@ -0,0 +1,49 @@
+---
+import type { SfSeo } from "../types.js";
+
+interface Props {
+  lang?: string;
+  seo?: SfSeo | null;
+  siteName?: string;
+}
+
+const {
+  lang = "it",
+  seo = null,
+  siteName = import.meta.env.PROJECT_NAME ?? "FlowPress"
+} = Astro.props;
+const title = seo?.title || siteName;
+const description = seo?.description || "";
+const robots = seo?.robots?.join(",") || "";
+const jsonLd = seo?.jsonLd ? JSON.stringify(seo.jsonLd) : null;
+---
+
+<!doctype html>
+<html lang={lang}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+    {robots && <meta name="robots" content={robots} />}
+    {seo?.canonicalUrl && <link rel="canonical" href={seo.canonicalUrl} />}
+    {seo?.hreflang?.map((alternate) => (
+      <link rel="alternate" hreflang={alternate.locale} href={alternate.url} />
+    ))}
+    {seo?.openGraph?.title && <meta property="og:title" content={seo.openGraph.title} />}
+    {seo?.openGraph?.description && <meta property="og:description" content={seo.openGraph.description} />}
+    {seo?.canonicalUrl && <meta property="og:url" content={seo.canonicalUrl} />}
+    {seo?.openGraph?.image?.url && <meta property="og:image" content={seo.openGraph.image.url} />}
+    {seo?.openGraph?.image?.alt && <meta property="og:image:alt" content={seo.openGraph.image.alt} />}
+    <meta name="twitter:card" content={seo?.twitter?.image?.url ? "summary_large_image" : "summary"} />
+    {seo?.twitter?.title && <meta name="twitter:title" content={seo.twitter.title} />}
+    {seo?.twitter?.description && <meta name="twitter:description" content={seo.twitter.description} />}
+    {seo?.twitter?.image?.url && <meta name="twitter:image" content={seo.twitter.image.url} />}
+    {seo?.twitter?.image?.alt && <meta name="twitter:image:alt" content={seo.twitter.image.alt} />}
+    {jsonLd && <script type="application/ld+json" set:html={jsonLd} />}
+    <slot name="head" />
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>

package/dist/astro/DefaultTemplate.astro

@@ -0,0 +1,34 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import BaseLayout from "./BaseLayout.astro";
+import GutenbergRenderer from "./GutenbergRenderer.astro";
+import type { FlowpressTemplateProps } from "../types.js";
+
+const { route, content, styleflowContract } = Astro.props as FlowpressTemplateProps;
+const title = content?.title || route.seo?.title || "Contenuto";
+const isNotFound = route.queryType === "404" || route.status === 404;
+---
+
+<BaseLayout lang={route.locale || "it"} seo={route.seo}>
+  <S.main tone="neutral" intensity={1} surface="default" layoutRole="container" density="md">
+    <S.section tone="neutral" intensity={1} surface="default" layoutRole="section" density="md">
+      <S.h1 ty="heading" v="1" w="strong">{isNotFound ? "Pagina non trovata" : title}</S.h1>
+      {content?.excerpt && <S.p ty="body" v="md" w="default">{content.excerpt}</S.p>}
+      {Array.isArray(content?.contentBlocks) && content.contentBlocks.length > 0 ? (
+        <GutenbergRenderer
+          blocks={content.contentBlocks as import("../types.js").FlowpressBlock[]}
+          contract={styleflowContract}
+        />
+      ) : content?.content && (
+        <S.div
+          tone="neutral"
+          intensity={1}
+          surface="default"
+          layoutRole="stack"
+          density="md"
+          set:html={String(content.content)}
+        />
+      )}
+    </S.section>
+  </S.main>
+</BaseLayout>

package/dist/astro/GutenbergRenderer.astro

@@ -0,0 +1,324 @@
+---
+import S from "@styleflow.app/astro/S.astro";
+import {
+  resolveDynamicStyleflowProps,
+  type StyleflowContract
+} from "../styleflow.js";
+import type { FlowpressBlock } from "../types.js";
+
+interface Props {
+  blocks: FlowpressBlock[];
+  contract?: StyleflowContract;
+}
+
+const { blocks, contract } = Astro.props;
+
+const defaults = {
+  tone: "neutral",
+  intensity: 1,
+  surface: "default",
+  layoutRole: "stack",
+  density: "md"
+};
+
+function styleflowProps(attributes: Record<string, unknown>) {
+  if (!contract) return defaults;
+  return resolveDynamicStyleflowProps(attributes, defaults, contract);
+}
+
+function dynamicProps(
+  attributes: Record<string, unknown>,
+  fallback: Record<string, unknown>
+) {
+  if (!contract) return fallback;
+  return resolveDynamicStyleflowProps(attributes, fallback, contract);
+}
+
+function text(block: FlowpressBlock, key = "text"): string {
+  return String(block.attributes[key] ?? "");
+}
+
+function objectValue(
+  block: FlowpressBlock,
+  key: string
+): Record<string, unknown> {
+  const value = block.attributes[key];
+  return value && typeof value === "object" && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : {};
+}
+
+function linkValue(block: FlowpressBlock, key = "link"): string {
+  const value = block.attributes[key];
+  const href = typeof value === "string"
+    ? value
+    : String(objectValue(block, key).url ?? "");
+  if (/^(?:\/(?!\/)|#|https?:\/\/|mailto:|tel:)/i.test(href)) {
+    return href;
+  }
+  return "";
+}
+
+function itemImage(item: Record<string, unknown>): Record<string, unknown> {
+  const value = item.image;
+  return value && typeof value === "object" && !Array.isArray(value)
+    ? value as Record<string, unknown>
+    : {};
+}
+
+function youtubeEmbedUrl(value: unknown): string | null {
+  try {
+    const url = new URL(String(value ?? ""));
+    const host = url.hostname.replace(/^www\./, "");
+    const id = host === "youtu.be"
+      ? url.pathname.split("/").filter(Boolean)[0]
+      : ["youtube.com", "youtube-nocookie.com"].includes(host)
+        ? url.searchParams.get("v") || url.pathname.match(/^\/(?:embed|shorts)\/([^/]+)/)?.[1]
+        : null;
+    return id && /^[A-Za-z0-9_-]+$/.test(id)
+      ? `https://www.youtube-nocookie.com/embed/${id}`
+      : null;
+  } catch {
+    return null;
+  }
+}
+---
+
+{blocks.map((block) => {
+  const name = block.name.replace(/^sf\//, "");
+  const children = block.innerBlocks ?? [];
+  const semantic = styleflowProps(block.attributes);
+
+  if (name === "heading") {
+    const level = Math.min(6, Math.max(1, Number(block.attributes.level ?? 2)));
+    const headingTag = `h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    const typography = dynamicProps(
+      {
+        ty: "heading",
+        v: String(block.attributes.variant ?? level),
+        w: String(block.attributes.weight ?? "strong")
+      },
+      { ty: "heading", v: String(level), w: "strong" }
+    );
+    return (
+      <S
+        as={headingTag}
+        {...typography}
+        set:html={text(block)}
+      />
+    );
+  }
+
+  if (name === "rich-text" || name === "core/paragraph") {
+    const html = String(block.attributes.content ?? block.innerHtml ?? "");
+    return <S as="div" {...semantic} set:html={html} />;
+  }
+
+  if (name === "button") {
+    const href = linkValue(block, "href") || "#";
+    const interaction = dynamicProps(
+      {
+        interactivePriority: String(
+          block.attributes.interactivePriority ?? "primary"
+        )
+      },
+      { interactivePriority: "primary" }
+    );
+    return (
+      <S
+        as="a"
+        href={href}
+        {...interaction}
+      >
+        {text(block, "label")}
+      </S>
+    );
+  }
+
+  if (name === "image") {
+    const image = block.attributes.image as {
+      url?: string;
+      sourceUrl?: string;
+      alt?: string;
+      altText?: string;
+    } | undefined;
+    const src = image?.url ?? image?.sourceUrl;
+    return src ? (
+      <S as="div" {...semantic}>
+        <img
+          src={src}
+          alt={String(block.attributes.alt ?? image?.alt ?? image?.altText ?? "")}
+          loading="lazy"
+          decoding="async"
+        />
+      </S>
+    ) : null;
+  }
+
+  if (name === "gallery") {
+    const images = Array.isArray(block.attributes.images)
+      ? block.attributes.images as Array<Record<string, unknown>>
+      : [];
+    return (
+      <S as="div" {...semantic}>
+        {images.map((image) => image.url ? (
+          <img
+            src={String(image.url)}
+            alt={String(image.alt ?? "")}
+            loading="lazy"
+            decoding="async"
+          />
+        ) : null)}
+      </S>
+    );
+  }
+
+  if (name === "video") {
+    const video = objectValue(block, "video");
+    const poster = objectValue(block, "poster");
+    return video.url ? (
+      <S as="div" {...semantic}>
+        <video
+          src={String(video.url)}
+          poster={poster.url ? String(poster.url) : undefined}
+          controls
+          autoplay={Boolean(block.attributes.autoplay)}
+          muted={Boolean(block.attributes.autoplay)}
+          playsinline
+        />
+      </S>
+    ) : null;
+  }
+
+  if (name === "video-youtube") {
+    const embed = youtubeEmbedUrl(block.attributes.url);
+    return embed ? (
+      <S as="div" {...semantic}>
+        <iframe
+          src={embed}
+          title={String(block.attributes.title ?? "YouTube video")}
+          loading="lazy"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowfullscreen
+        />
+      </S>
+    ) : null;
+  }
+
+  if (name === "quote") {
+    return (
+      <blockquote>
+        <S as="p" set:html={text(block, "quote")} />
+        {block.attributes.citation && <cite>{String(block.attributes.citation)}</cite>}
+      </blockquote>
+    );
+  }
+
+  if (name === "chip") {
+    return <S as="span" {...semantic}>{text(block, "label")}</S>;
+  }
+
+  if (name === "card") {
+    const media = objectValue(block, "image");
+    const href = linkValue(block);
+    return (
+      <S as="article" {...semantic}>
+        {media.url && (
+          <img src={String(media.url)} alt={String(media.alt ?? "")} loading="lazy" />
+        )}
+        {block.attributes.title && <S as="h3">{String(block.attributes.title)}</S>}
+        {block.attributes.text && <S as="p">{String(block.attributes.text)}</S>}
+        {href && <S as="a" href={href}>Scopri</S>}
+      </S>
+    );
+  }
+
+  if (name === "content-list" || name === "term-list") {
+    const items = Array.isArray(block.attributes.resolvedItems)
+      ? block.attributes.resolvedItems as Array<Record<string, unknown>>
+      : [];
+    return (
+      <S as="ul" {...semantic}>
+        {items.map((item) => (
+          <S as="li">
+            {itemImage(item).url && (
+              <img
+                src={String(itemImage(item).url)}
+                alt={String(itemImage(item).alt ?? "")}
+                loading="lazy"
+                decoding="async"
+              />
+            )}
+            {item.uri ? (
+              <S as="a" href={String(item.uri)}>{String(item.title ?? "")}</S>
+            ) : (
+              <S as="span">{String(item.title ?? "")}</S>
+            )}
+            {item.excerpt && <S as="p">{String(item.excerpt)}</S>}
+            {item.priceHtml && <S as="div" set:html={String(item.priceHtml)} />}
+          </S>
+        ))}
+      </S>
+    );
+  }
+
+  if (name === "accordion-item") {
+    return (
+      <S as="div" {...semantic}>
+        <details>
+          <summary>{String(block.attributes.title ?? "")}</summary>
+          <Astro.self blocks={children} contract={contract} />
+        </details>
+      </S>
+    );
+  }
+
+  if (name === "map") {
+    const address = String(block.attributes.address ?? "");
+    const latitude = String(block.attributes.latitude ?? "");
+    const longitude = String(block.attributes.longitude ?? "");
+    const query = latitude && longitude ? `${latitude},${longitude}` : address;
+    const provider = String(block.attributes.provider ?? "openstreetmap");
+    const googleMapsApiKey = import.meta.env.GOOGLE_MAPS_API_KEY;
+    if (provider === "google" && query && !googleMapsApiKey) {
+      throw new Error(
+        "GOOGLE_MAPS_API_KEY is required by the selected CMS map provider."
+      );
+    }
+    if (provider === "google" && query) {
+      const source = "https://www.google.com/maps/embed/v1/place"
+        + `?key=${encodeURIComponent(googleMapsApiKey)}`
+        + `&q=${encodeURIComponent(query)}`;
+      return (
+        <S as="div" {...semantic}>
+          <iframe
+            src={source}
+            title={address || "Map"}
+            loading="lazy"
+            referrerpolicy="no-referrer-when-downgrade"
+          />
+        </S>
+      );
+    }
+    return query ? (
+      <S as="div" {...semantic}>
+        <S
+          as="a"
+          href={`https://www.openstreetmap.org/search?query=${encodeURIComponent(query)}`}
+          rel="noreferrer"
+        >
+          {address || query}
+        </S>
+      </S>
+    ) : null;
+  }
+
+  const layoutTag = ["section", "hero"].includes(name) ? "section" : "div";
+  return (
+    <S as={layoutTag} {...semantic}>
+      {block.innerHtml && children.length === 0
+        ? <S as="div" set:html={block.innerHtml} />
+        : <Astro.self blocks={children} contract={contract} />}
+    </S>
+  );
+})}

package/dist/client.d.ts

@@ -0,0 +1,35 @@
+import type { FlowpressCapabilities, FlowpressContent, FlowpressRoute } from "./types.js";
+export interface FlowpressGraphqlIssue {
+    message?: string;
+    extensions?: {
+        debugMessage?: string;
+        category?: string;
+        [key: string]: unknown;
+    };
+}
+export interface FlowpressClientOptions {
+    endpoint: string;
+    timeoutMs?: number;
+    headers?: Record<string, string>;
+    debug?: boolean;
+}
+export declare class FlowpressGraphqlError extends Error {
+    readonly status?: number | undefined;
+    readonly errors?: FlowpressGraphqlIssue[] | undefined;
+    readonly operationName?: string | undefined;
+    readonly endpoint?: string | undefined;
+    constructor(message: string, status?: number | undefined, errors?: FlowpressGraphqlIssue[] | undefined, operationName?: string | undefined, endpoint?: string | undefined, cause?: unknown);
+}
+export declare class FlowpressClient {
+    readonly endpoint: string;
+    readonly timeoutMs: number;
+    readonly headers: Record<string, string>;
+    readonly debug: boolean;
+    constructor(options: FlowpressClientOptions);
+    request<T>(query: string, variables?: Record<string, unknown>): Promise<T>;
+    getCapabilities(): Promise<FlowpressCapabilities>;
+    getRoute(uri: string, locale?: string): Promise<FlowpressRoute | null>;
+    getRoutes(locale?: string): Promise<FlowpressRoute[]>;
+    getContent(loader: string, variables: Record<string, unknown>): Promise<FlowpressContent | null>;
+}
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EACrB,gBAAgB,EAChB,cAAc,EACf,MAAM,YAAY,CAAC;AAEpB,MAAM,WAAW,qBAAqB;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE;QACX,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KACxB,CAAC;CACH;AAOD,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,qBAAa,qBAAsB,SAAQ,KAAK;IAG5C,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,qBAAqB,EAAE;IACzC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM;gBAJ1B,OAAO,EAAE,MAAM,EACN,MAAM,CAAC,EAAE,MAAM,YAAA,EACf,MAAM,CAAC,EAAE,qBAAqB,EAAE,YAAA,EAChC,aAAa,CAAC,EAAE,MAAM,YAAA,EACtB,QAAQ,CAAC,EAAE,MAAM,YAAA,EAC1B,KAAK,CAAC,EAAE,OAAO;CAKlB;AAED,qBAAa,eAAe;IAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;gBAEZ,OAAO,EAAE,sBAAsB;IAarC,OAAO,CAAC,CAAC,EACb,KAAK,EAAE,MAAM,EACb,SAAS,GAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAM,GACtC,OAAO,CAAC,CAAC,CAAC;IAmFP,eAAe,IAAI,OAAO,CAAC,qBAAqB,CAAC;IAoBjD,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,cAAc,GAAG,IAAI,CAAC;IAgCtE,SAAS,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,cAAc,EAAE,CAAC;IA6BrD,UAAU,CACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACjC,OAAO,CAAC,gBAAgB,GAAG,IAAI,CAAC;CA2CpC"}