@caltho/site-kit 0.2.10 → 0.3.0

package/dist/next/metadata.js

@@ -1,5 +1,6 @@
 // The Next.js side of search: each page's metadata, the static routes, robots.txt and the sitemap,
 // all from the prepared content.
+import { allPages } from "../content/lists.js";
 import { shareImageOf } from "../images.js";
 import { canonical, fullTitle } from "../seo.js";
 import { image, prepared, site } from "./data.js";
@@ -34,12 +35,12 @@ export function pageMetadata(page) {
 }
 /** For `generateStaticParams` on `app/[[...path]]/page.tsx`. */
 export function staticParams() {
-    return site().pages.map((p) => ({ path: p.path.split("/").filter(Boolean) }));
+    return allPages(site()).map((p) => ({ path: p.path.split("/").filter(Boolean) }));
 }
 export function robots() {
     return { rules: { userAgent: "*", allow: "/" }, sitemap: canonical(site(), "/sitemap.xml") };
 }
 export function sitemap() {
     const s = site();
-    return s.pages.filter((p) => !p.noindex).map((p) => ({ url: canonical(s, p.path) }));
+    return allPages(s).filter((p) => !p.noindex).map((p) => ({ url: canonical(s, p.path) }));
 }

package/dist/next/parts/Img.d.ts

@@ -1,9 +1,14 @@
 export type Ratio = "1/1" | "3/2" | "4/3" | "4/5" | "16/9";
-export declare function Img({ src, alt, sizes, ratio, eager, className }: {
+/** `node`: a built section's node id, marked on the picture in CalOS's preview (data-node) so a click on it names the node. */
+/** Below this width a picture's phone version (`phoneSrc`) is shown in its place. */
+export declare const PHONE_WIDTH = 700;
+export declare function Img({ src, alt, sizes, ratio, eager, className, node, phoneSrc }: {
     src: string;
     alt: string;
     sizes: string;
     ratio?: Ratio;
     eager?: boolean;
     className?: string;
+    node?: string; /** Another picture for phones, shown on small screens. */
+    phoneSrc?: string;
 }): import("react").JSX.Element;

package/dist/next/parts/Img.js

@@ -1,14 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // A picture from the site's images, at the widths `site-kit prepare` made: `sizes` says how wide
 // it shows, the browser picks the copy. Cropped to a shape by class (`ratio-4-3`), not by a
 // style attribute, which the content security policy would block. Above the fold (`eager`) it
 // loads first; everywhere else it waits until it's near.
 import { image } from "../data.js";
-export function Img({ src, alt, sizes, ratio, eager = false, className }) {
+/** `node`: a built section's node id, marked on the picture in CalOS's preview (data-node) so a click on it names the node. */
+/** Below this width a picture's phone version (`phoneSrc`) is shown in its place. */
+export const PHONE_WIDTH = 700;
+export function Img({ src, alt, sizes, ratio, eager = false, className, node, phoneSrc }) {
     const m = image(src);
     const [rw, rh] = ratio ? ratio.split("/").map(Number) : [m.width, m.height];
     const width = m.width;
     const height = Math.round((width * rh) / rw);
     const classes = [ratio ? `ratio-${ratio.replace("/", "-")}` : null, className].filter(Boolean).join(" ") || undefined;
-    return (_jsx("img", { src: m.src, srcSet: m.srcset.length ? m.srcset.map((s) => `${s.url} ${s.w}w`).join(", ") : undefined, sizes: m.srcset.length ? sizes : undefined, width: width, height: height, alt: alt, loading: eager ? "eager" : "lazy", decoding: eager ? "sync" : "async", fetchPriority: eager ? "high" : undefined, className: classes }));
+    const img = (_jsx("img", { src: m.src, srcSet: m.srcset.length ? m.srcset.map((s) => `${s.url} ${s.w}w`).join(", ") : undefined, sizes: m.srcset.length ? sizes : undefined, width: width, height: height, alt: alt, loading: eager ? "eager" : "lazy", decoding: eager ? "sync" : "async", fetchPriority: eager ? "high" : undefined, className: classes, "data-node": node }));
+    if (!phoneSrc)
+        return img;
+    // The phone version, at its own widths, chosen by the browser on a small screen (the <img> stays the picture: its class and alt).
+    const p = image(phoneSrc);
+    return (_jsxs("picture", { "data-node": node, children: [_jsx("source", { media: `(max-width: ${PHONE_WIDTH}px)`, srcSet: p.srcset.length ? p.srcset.map((x) => `${x.url} ${x.w}w`).join(", ") : p.src, sizes: "100vw", width: p.width, height: p.height }), img] }));
 }

package/dist/next/parts/LookStyle.js

@@ -3,5 +3,7 @@ import { lookCss } from "../../content/look.js";
 import { prepared } from "../data.js";
 /** The site's Look as CSS variables, for its layout's <head> (content/look.ts). */
 export function LookStyle({ look }) {
-    return _jsx("style", { dangerouslySetInnerHTML: { __html: lookCss(prepared().site.look, look) } });
+    // And the Google fonts it uses, as the site serves them (fetched when it was built).
+    const p = prepared();
+    return _jsx("style", { dangerouslySetInnerHTML: { __html: [lookCss(p.site.look, look), p.fontFaces].filter(Boolean).join("\n") } });
 }