@sevenfold/setto-client 0.34.0 → 0.36.0

package/dist/blog/SettoBlog.d.ts

@@ -0,0 +1,20 @@
+import { type BuiltinSectionProps } from '../pages/SettoPage';
+export declare function SettoBlogSection({ sectionId, first }: BuiltinSectionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The blog for a site that routes by hand instead of through `pages.json`
+ * (setto.no): mount it on `<basePath>` and `<basePath>/*`, and pass the same
+ * path to `settoBlog({ blogPath })`.
+ *
+ *     <Route path="/blogg/*" element={<SettoBlog basePath="/blogg" />} />
+ */
+export declare function SettoBlog({ basePath, title }: {
+    basePath?: string;
+    title?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function SettoBlogLatest({ sectionId, first }: BuiltinSectionProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Shape is scoped `.setto-blog :where(…)` (one class: beats Preflight's
+ * element resets); colour stays at zero specificity so the site's own wins.
+ * Same split, same reason, as the form's sheet.
+ */
+export declare const BLOG_CSS = "\n.setto-blog{padding:clamp(48px,8vw,96px) 16px}\n.setto-blog :where(.setto-blog__inner){max-width:68ch;margin:0 auto}\n.setto-blog :where(.setto-blog__inner--wide){max-width:1120px}\n.setto-blog :where(.setto-blog__title){font-family:var(--setto-display-font,inherit);font-size:clamp(2rem,4vw,2.75rem);line-height:1.15;font-weight:600;margin:0 0 .75em}\n.setto-blog :where(.setto-blog__list){display:grid;gap:clamp(1.5rem,3vw,2.5rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}\n.setto-blog :where(.setto-blog__card){display:grid;gap:.9rem;align-content:start}\n.setto-blog :where(.setto-blog__card-cover){display:block;overflow:hidden;border-radius:.9rem;aspect-ratio:16/10}\n.setto-blog :where(.setto-blog__card-cover img,.setto-blog__cover img,.setto-blog__figure img,.setto-blog__gallery-item img){display:block;width:100%;height:100%;object-fit:cover}\n.setto-blog :where(.setto-blog__card-body){display:grid;gap:.45rem}\n.setto-blog :where(.setto-blog__card-title){font-family:var(--setto-display-font,inherit);font-size:1.3rem;line-height:1.25;font-weight:600;margin:0}\n.setto-blog :where(.setto-blog__card-lead){margin:0;line-height:1.55}\n.setto-blog :where(.setto-blog__date){font-size:.875rem;letter-spacing:.01em}\n.setto-blog :where(.setto-blog__more,.setto-blog__back){display:inline-flex;gap:.35em;align-items:center;font-weight:500;width:fit-content}\n.setto-blog :where(.setto-blog__back){margin-bottom:2rem}\n.setto-blog :where(.setto-blog__latest-head){display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1.5rem;margin-bottom:1.75rem}\n.setto-blog :where(.setto-blog__latest-head .setto-blog__title){margin:0}\n.setto-blog :where(.setto-blog__post-header){display:grid;gap:.6rem;margin-bottom:2rem}\n.setto-blog :where(.setto-blog__post-title){font-family:var(--setto-display-font,inherit);font-size:clamp(2rem,5vw,3rem);line-height:1.1;font-weight:600;margin:0}\n.setto-blog :where(.setto-blog__lead){font-size:1.2rem;line-height:1.5;margin:0}\n.setto-blog :where(.setto-blog__cover){margin:0 0 2.5rem;overflow:hidden;border-radius:1rem;aspect-ratio:16/9}\n.setto-blog :where(.setto-blog__prose){font-size:1.075rem;line-height:1.7}\n.setto-blog :where(.setto-blog__prose > * + *){margin-top:1.15em}\n.setto-blog :where(.setto-blog__prose h2,.setto-blog__prose h3,.setto-blog__prose h4){font-family:var(--setto-display-font,inherit);line-height:1.25;font-weight:600;margin:1.8em 0 0}\n.setto-blog :where(.setto-blog__prose h2){font-size:1.6rem}\n.setto-blog :where(.setto-blog__prose h3){font-size:1.3rem}\n.setto-blog :where(.setto-blog__prose h4){font-size:1.1rem}\n.setto-blog :where(.setto-blog__prose ul,.setto-blog__prose ol){padding-left:1.4em}\n.setto-blog :where(.setto-blog__prose ul){list-style:disc}\n.setto-blog :where(.setto-blog__prose ol){list-style:decimal}\n.setto-blog :where(.setto-blog__prose li + li){margin-top:.35em}\n.setto-blog :where(.setto-blog__prose blockquote){margin-left:0;padding-left:1.1em;border-left-width:3px;border-left-style:solid;font-style:italic}\n.setto-blog :where(.setto-blog__prose pre){overflow-x:auto;padding:1em;border-radius:.6rem;font-size:.9em}\n.setto-blog :where(.setto-blog__prose code){font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}\n.setto-blog :where(.setto-blog__prose hr){border:0;border-top-width:1px;border-top-style:solid;margin:2.5em 0}\n.setto-blog :where(.setto-blog__prose a){text-decoration:underline;text-underline-offset:.18em}\n.setto-blog :where(.setto-blog__table){overflow-x:auto}\n.setto-blog :where(.setto-blog__table table){border-collapse:collapse;width:100%;font-size:.95em}\n.setto-blog :where(.setto-blog__table th,.setto-blog__table td){padding:.55em .8em;border-bottom-width:1px;border-bottom-style:solid;text-align:left}\n.setto-blog :where(.setto-blog__figure,.setto-blog__gallery,.setto-blog__video){margin:2em 0}\n.setto-blog :where(.setto-blog__figure img){border-radius:.8rem;height:auto}\n.setto-blog :where(figcaption){font-size:.9rem;margin-top:.6em;opacity:.75}\n.setto-blog :where(.setto-blog__gallery-grid){display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}\n.setto-blog :where(.setto-blog__gallery-item){margin:0}\n.setto-blog :where(.setto-blog__gallery-item img){border-radius:.6rem;aspect-ratio:4/3}\n.setto-blog :where(.setto-blog__video-frame){position:relative;aspect-ratio:16/9;border-radius:.8rem;overflow:hidden}\n.setto-blog :where(.setto-blog__video-frame iframe){position:absolute;inset:0;width:100%;height:100%;border:0}\n.setto-blog :where(.setto-blog__video-play){position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;display:grid;place-items:center}\n.setto-blog :where(.setto-blog__video-play img){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}\n.setto-blog :where(.setto-blog__video-icon){position:relative;display:block;line-height:0}\n.setto-blog :where(.setto-blog__callout){padding:1.1em 1.3em;border-radius:.8rem;border-left-width:4px;border-left-style:solid}\n.setto-blog :where(.setto-blog__callout > * + *){margin-top:.7em}\n.setto-blog :where(.setto-blog__callout ul,.setto-blog__callout ol){padding-left:1.3em;list-style:disc}\n.setto-blog :where(.setto-blog__share){display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;margin-top:3rem;padding-top:1.5rem;border-top-width:1px;border-top-style:solid}\n.setto-blog :where(.setto-blog__share-label){font-weight:600}\n.setto-blog :where(.setto-blog__share a,.setto-blog__share button){font:inherit;padding:.35rem .85rem;border-radius:999px;border-width:1px;border-style:solid;cursor:pointer;text-decoration:none;line-height:1.4}\n.setto-blog :where(.setto-blog__empty,.setto-blog__loading){opacity:.75}\n:where(.setto-blog){color:inherit}\n:where(.setto-blog__date){opacity:.7}\n:where(.setto-blog a){color:inherit}\n:where(.setto-blog__prose blockquote,.setto-blog__prose hr,.setto-blog__table th,.setto-blog__table td,.setto-blog__share){border-color:color-mix(in srgb,currentColor 18%,transparent)}\n:where(.setto-blog__prose pre,.setto-blog__card-cover){background:color-mix(in srgb,currentColor 6%,transparent)}\n:where(.setto-blog__share a,.setto-blog__share button){border-color:color-mix(in srgb,currentColor 30%,transparent);background:transparent;color:inherit}\n:where(.setto-blog__callout){background:color-mix(in srgb,currentColor 5%,transparent);border-left-color:color-mix(in srgb,currentColor 40%,transparent)}\n:where(.setto-blog__callout[data-tone=\"tip\"]){border-left-color:#0f7b4f}\n:where(.setto-blog__callout[data-tone=\"warning\"]){border-left-color:#b54708}\n:where(.setto-blog__video-frame){background:#000}\n";

package/dist/blog/data.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The posts a site's build hands to the library, and how a page chooses among
+ * them. No parser and no React: the build (`@setto/client/vite`) has already
+ * validated every file against the contract and turned its body into a syntax
+ * tree, so the browser only walks data.
+ */
+import type { Root } from 'mdast';
+import type { BlogFrontmatter } from './contract';
+/** A post as the list knows it: its frontmatter, and nothing to download. */
+export type BlogPostSummary = BlogFrontmatter;
+/** A post as its page knows it: frontmatter and the body's syntax tree. */
+export interface BlogPostData {
+    frontmatter: BlogFrontmatter;
+    body: Root;
+}
+/**
+ * What `virtual:setto-blog` exports and `SettoConfig.blog` carries. Bodies are
+ * loaded one at a time, so a site with a hundred posts does not ship a
+ * hundred articles to read one.
+ */
+export interface SettoBlogData {
+    posts: readonly BlogPostSummary[];
+    load(slug: string, locale: string): Promise<BlogPostData | null>;
+}
+/** Newest first; a tie breaks on slug so the order never flickers. */
+export declare function byDateDesc(a: BlogPostSummary, b: BlogPostSummary): number;
+/**
+ * One entry per post, in the reader's language where it exists and in the
+ * site's own otherwise. A post written only in Norwegian still shows to an
+ * English reader — untranslated is better than missing.
+ */
+export declare function postsForLanguage(posts: readonly BlogPostSummary[], language: string, fallbackLanguage: string): BlogPostSummary[];
+/** The version of one post to show this reader, or null if there is none. */
+export declare function postForSlug(posts: readonly BlogPostSummary[], slug: string, language: string, fallbackLanguage: string): BlogPostSummary | null;
+/** `2026-10-01` as «1. oktober 2026» or «1 October 2026». */
+export declare function formatPostDate(date: string, language: string): string;

package/dist/blog/index.d.ts

@@ -6,5 +6,7 @@
  * step uses it to read posts.
  */
 export * from './contract';
+/** The host a post's images must come from: pass it as `imageHosts`. */
+export { SETTO_MEDIA_HOST, isSettoMediaUrl } from '../lib/media';
 export { validateBlogPost, parseBlogPost } from './validate';
 export type { BlogIssue, BlogPost, BlogValidationResult, BlogValidateOptions } from './validate';

package/dist/blog/render.d.ts

@@ -0,0 +1,16 @@
+import type { RootContent } from 'mdast';
+export declare function BlogBody({ nodes, language }: {
+    nodes: readonly RootContent[];
+    language: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * An image, resized by the site's optimizer when it has one and the image is
+ * one it may read (`isOptimizable`: this site's own, or a blog photograph in
+ * Setto's media store). If a variant fails, the original is shown instead.
+ */
+export declare function BlogImg({ src, alt, sizes, className }: {
+    src: string;
+    alt: string;
+    sizes: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/blog/strings.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The few words the blog says itself — around the posts, never in them. In
+ * Norwegian and English; any other language reads English, which is what a
+ * visitor who chose it can most likely read.
+ */
+declare const NO: {
+    blog: string;
+    latest: string;
+    allPosts: string;
+    readMore: string;
+    back: string;
+    empty: string;
+    notFound: string;
+    loading: string;
+    share: string;
+    moreShare: string;
+    copyLink: string;
+    copied: string;
+    email: string;
+    video: string;
+    play: string;
+};
+export type BlogStrings = typeof NO;
+export declare function blogStrings(language: string): BlogStrings;
+export {};

package/dist/blog.js

@@ -78,6 +78,17 @@ function parseBlogPostPath(path2) {
 function blogPostRoute(slug) {
   return `${BLOG_ROUTE}/${slug}`;
 }
+const SETTO_MEDIA_HOST = "3adyw42hy72dtzjo.public.blob.vercel-storage.com";
+const SETTO_MEDIA_BLOG_PREFIX = "/blog/";
+function isSettoMediaUrl(src) {
+  if (!src) return false;
+  try {
+    const url = new URL(src);
+    return url.protocol === "https:" && url.hostname === SETTO_MEDIA_HOST && !url.username && !url.password && url.port === "" && url.pathname.startsWith(SETTO_MEDIA_BLOG_PREFIX);
+  } catch {
+    return false;
+  }
+}
 const emptyOptions$1 = {};
 function toString$1(value2, options) {
   const settings = emptyOptions$1;
@@ -23937,10 +23948,12 @@ export {
   BLOG_TAGS_MAX,
   BLOG_TAG_MAX,
   BLOG_TITLE_MAX,
+  SETTO_MEDIA_HOST,
   YOUTUBE_ID_PATTERN,
   blogPostPath,
   blogPostRoute,
   isBlogComponentName,
+  isSettoMediaUrl,
   isValidBlogLocale,
   isValidBlogSlug,
   parseBlogPost,