@sandboxsonny/ace-kit 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sandboxsonny/ace-kit
 
+## 0.11.0
+
+### Minor Changes
+
+- f0a08c3: Follow the redirects set up in the CMS. When a request is for an address the site has no page for, `getPage` (and the React Router page loader) now asks the CMS whether the site's owners redirected it, and answers with that redirect (301 or 302, to a path on the site or another address) instead of "not found". Your page already handles redirects, so there is nothing to change. A page shown in the CMS's preview frame is never redirected. Also adds `client.getRedirect(address)`.
+
+## 0.10.0
+
+### Minor Changes
+
+- 4215f32: Show the site's favicon in `<AceSeo>`. The favicon is chosen in the site's settings in the CMS; `<AceSeo>` adds `<link rel="icon">` and `<link rel="apple-touch-icon">` for it when you don't pass a `favicon` yourself. If your layout already has its own icon link, remove it, or the browser may pick either. `getSite()` now also returns the favicon.
+
 ## 0.9.0
 
 ### Minor Changes

package/astro/AceSeo.astro

@@ -7,10 +7,15 @@ import { getSite } from "../dist/astro.js";
 
 type Props = AceSeoOptions;
 
-// With no picture of its own, a page shows the social image chosen in the site's settings. The tags are never worth
-// failing the page for, so a CMS that can't be reached just means no picture.
-const site = Astro.props.image === undefined ? await getSite().catch(() => null) : null;
-const properties = seoProperties({ ...Astro.props, image: Astro.props.image ?? site?.social_image?.src });
+// With no picture or icon of its own, a page shows the ones chosen in the site's settings. The tags are never worth
+// failing the page for, so a CMS that can't be reached just means none.
+const needsSite = Astro.props.image === undefined || Astro.props.favicon === undefined;
+const site = needsSite ? await getSite().catch(() => null) : null;
+const properties = seoProperties({
+  ...Astro.props,
+  image: Astro.props.image ?? site?.social_image?.src,
+  favicon: Astro.props.favicon ?? site?.favicon ?? undefined,
+});
 ---
 
 <SEO {...properties} />

package/dist/astro.d.ts

@@ -29,6 +29,18 @@ type AceImageData = {
   content_type: string;
 };
 
+/** The site's favicon as the CMS Ace public API returns it: the original, and square PNG copies. */
+type AceFavicon = {
+  id: number;
+  /** The untouched original. */
+  url: string;
+  /** A small square PNG (48 pixels), for the browser tab and search results. */
+  icon: string;
+  /** A square PNG (180 pixels), for a phone's home screen. */
+  apple_touch_icon: string;
+  content_type: string;
+};
+
 /** The site the request is for, as the CMS Ace public API returns it. */
 type AceSite = {
   id: number;
@@ -37,6 +49,18 @@ type AceSite = {
   handle: string;
   /** The picture the site's owners chose to show in search results and social posts; null if none. */
   social_image: AceImageData | null;
+  /** The small picture the site's owners chose for browser tabs; null if none. */
+  favicon: AceFavicon | null;
+};
+
+/** A redirect the CMS has for an address, as its public API returns it. */
+type AceRedirect = {
+  /** The old address the redirect is for. */
+  from: string;
+  /** Where it goes: a path on the site, or a full web address. */
+  to: string;
+  /** 301 is permanent; 302 is temporary. */
+  status: 301 | 302;
 };
 
 /** One link of a menu as the public API returns it, with its address already worked out. */
@@ -115,6 +139,7 @@ declare const ace: {
         limit?: number;
     }): Promise<AceEntry<AceValuesOf<Handle>>[]>;
     getMenu(handle: string): Promise<AceMenu | null>;
+    getRedirect(address: string): Promise<AceRedirect | null>;
     getSite(): Promise<AceSite | null>;
     getContentTypes(): Promise<AceContentTypeSchema[]>;
 };

package/dist/astro.js

@@ -1,4 +1,4 @@
-import { createAceClient, loadMenuLinks, loadPage } from './chunk-EKZRLWNO.js';
+import { createAceClient, loadMenuLinks, loadPage } from './chunk-PXT3H7C6.js';
 import './chunk-M5WR5TCR.js';
 import './chunk-YLO6IAXF.js';
 import { ACE_SITE_DOMAIN, ACE_API_URL } from 'astro:env/server';

package/dist/{chunk-EKZRLWNO.js → chunk-PXT3H7C6.js}

@@ -89,6 +89,15 @@ function createAceClient({
     getMenu(handle) {
       return get(`/public/menus/${encodeURIComponent(handle)}`);
     },
+    /**
+     * Where an address the site has no page for should redirect to, if the site's owners set that up; null if not.
+     * `address` is the path with its query string, e.g. "/old-page?id=7".
+     */
+    async getRedirect(address) {
+      const redirect = await get(`/public/redirects?from=${encodeURIComponent(address)}`);
+      const goesSomewhereSafe = redirect !== null && typeof redirect.to === "string" && (redirect.to.startsWith("/") && !redirect.to.startsWith("//") && !redirect.to.includes("\\") || /^https?:\/\/[^\s]+$/i.test(redirect.to)) && (redirect.status === 301 || redirect.status === 302);
+      return goesSomewhereSafe ? redirect : null;
+    },
     /** The site itself: its name, and the social image its owners chose (null if none). */
     getSite() {
       return get("/public/site");
@@ -132,12 +141,12 @@ async function loadPage(client, { slug, url }) {
   if (slug && address && isHomeAddress(address)) {
     return { kind: "redirect", status: url.search ? 302 : 301, location: `/${url.search}`, headers };
   }
-  if (!address) return { kind: "not-found", status: 404, headers };
+  if (!address) return notFoundOrRedirect(client, url, previewToken, headers);
   try {
     const entry = await client.getEntry(address.contentTypeHandle, address.entryHandle, {
       previewToken
     });
-    return entry ? { kind: "entry", status: 200, entry, headers } : { kind: "not-found", status: 404, headers };
+    return entry ? { kind: "entry", status: 200, entry, headers } : notFoundOrRedirect(client, url, previewToken, headers);
   } catch (error) {
     if (error instanceof AcePreviewExpiredError) return { kind: "preview-expired", status: 403, headers };
     if (error instanceof AceUnavailableError) {
@@ -147,5 +156,17 @@ async function loadPage(client, { slug, url }) {
     throw error;
   }
 }
+async function notFoundOrRedirect(client, url, previewToken, headers) {
+  if (previewToken) return { kind: "not-found", status: 404, headers };
+  try {
+    const redirect = await client.getRedirect(`${url.pathname}${url.search}`);
+    if (redirect) return { kind: "redirect", status: redirect.status, location: redirect.to, headers };
+  } catch (error) {
+    if (!(error instanceof AceUnavailableError)) throw error;
+    console.error(error.message);
+    return { kind: "unavailable", status: 503, headers };
+  }
+  return { kind: "not-found", status: 404, headers };
+}
 
 export { AcePreviewExpiredError, AceUnavailableError, createAceClient, isCurrentPage, linksFromMenu, loadMenuLinks, loadPage };

package/dist/cli.js

@@ -9,8 +9,8 @@ if (major < 22 || major === 22 && minor < 12) {
   process.exit(1);
 }
 try {
-  const { createRealEnvironment } = await import("./environment-YCQRJ56U.js");
-  const { runCli } = await import("./main-6O2IIVHO.js");
+  const { createRealEnvironment } = await import("./environment-LTPUSFAK.js");
+  const { runCli } = await import("./main-IKZ3DQLC.js");
   const environment = await createRealEnvironment();
   process.exit(await runCli(process.argv.slice(2), environment));
 } catch (error) {

package/dist/{environment-YCQRJ56U.js → environment-LTPUSFAK.js}

@@ -145,7 +145,7 @@ function createLastApiUrl(path) {
 }
 
 // src/cli/version.ts
-var aceKitVersion = true ? "0.9.0" : "development";
+var aceKitVersion = true ? "0.11.0" : "development";
 
 // src/cli/environment.ts
 var runCommand = (command, commandArguments, input) => new Promise((resolve, reject) => {

package/dist/index.d.ts

@@ -84,6 +84,16 @@ type AceNavigationLink = {
   children?: AceNavigationLink[];
 };
 
+/** A redirect the CMS has for an address, as its public API returns it. */
+type AceRedirect = {
+  /** The old address the redirect is for. */
+  from: string;
+  /** Where it goes: a path on the site, or a full web address. */
+  to: string;
+  /** 301 is permanent; 302 is temporary. */
+  status: 301 | 302;
+};
+
 /** An image as the CMS Ace public API returns it. Use `src` and `srcset` in an `<img>`. */
 type AceImageData = {
   id: number;
@@ -99,6 +109,18 @@ type AceImageData = {
   content_type: string;
 };
 
+/** The site's favicon as the CMS Ace public API returns it: the original, and square PNG copies. */
+type AceFavicon = {
+  id: number;
+  /** The untouched original. */
+  url: string;
+  /** A small square PNG (48 pixels), for the browser tab and search results. */
+  icon: string;
+  /** A square PNG (180 pixels), for a phone's home screen. */
+  apple_touch_icon: string;
+  content_type: string;
+};
+
 /** The site the request is for, as the CMS Ace public API returns it. */
 type AceSite = {
   id: number;
@@ -107,6 +129,8 @@ type AceSite = {
   handle: string;
   /** The picture the site's owners chose to show in search results and social posts; null if none. */
   social_image: AceImageData | null;
+  /** The small picture the site's owners chose for browser tabs; null if none. */
+  favicon: AceFavicon | null;
 };
 
 /**
@@ -129,6 +153,11 @@ declare function createAceClient({ apiUrl, siteDomain, cacheSeconds, fetchImplem
     }): Promise<AceEntry<AceValuesOf<Handle>>[]>;
     /** One of the site's navigation menus by its handle, with every link worked out; null if the site has none. */
     getMenu(handle: string): Promise<AceMenu | null>;
+    /**
+     * Where an address the site has no page for should redirect to, if the site's owners set that up; null if not.
+     * `address` is the path with its query string, e.g. "/old-page?id=7".
+     */
+    getRedirect(address: string): Promise<AceRedirect | null>;
     /** The site itself: its name, and the social image its owners chose (null if none). */
     getSite(): Promise<AceSite | null>;
     /** What the site's content types and fields are, which is what type generation reads. */
@@ -401,7 +430,8 @@ type AcePage<Values = Record<string, unknown>> =
  * - `slug` is the part of the path after the site's root, e.g. "pages/about" ("" or undefined for the home page).
  * - `url` is the full request address; it carries the preview token the CMS puts in its preview frame.
  *
- * Addresses are `/{content type}/{entry}` as on Shopify, and `/` is the home entry. A page shown with a preview
+ * Addresses are `/{content type}/{entry}` as on Shopify, and `/` is the home entry. An address with no page is
+ * redirected if the site's owners set up a redirect for it (in the CMS), and otherwise not found. A page shown with a preview
  * token is never cached or indexed (the answer's `headers` say so).
  */
 declare function loadPage<Values = Record<string, unknown>>(client: AceClient, { slug, url }: {
@@ -478,6 +508,11 @@ type AceSeoOptions = {
      * social image chosen in the site's settings in the CMS (if any).
      */
     image?: string;
+    /**
+     * The site's favicon. In the Astro `<AceSeo>`, leaving it out uses the favicon chosen in the site's settings in the
+     * CMS (if any); it then adds `<link rel="icon">` and `<link rel="apple-touch-icon">`.
+     */
+    favicon?: Pick<AceFavicon, "icon" | "apple_touch_icon">;
     /** Tells search engines to leave the page out, as for a draft shown in preview. */
     noindex?: boolean;
 };
@@ -486,6 +521,11 @@ type Meta = {
     name?: string;
     content: string;
 };
+type Link = {
+    rel: string;
+    href: string;
+    sizes?: string;
+};
 /** What `astro-seo`'s `<SEO>` takes (only the parts used here). */
 type AceSeoProperties = {
     title?: string;
@@ -500,6 +540,7 @@ type AceSeoProperties = {
     };
     extend: {
         meta: Meta[];
+        link?: Link[];
     };
 };
 /**
@@ -551,4 +592,4 @@ type AceSection = {
   blocks: AceSectionBlock[];
 };
 
-export { type AceAddress, type AceClient, type AceClientOptions, type AceContentTypeHandle, type AceContentTypeSchema, type AceContentTypes, type AceDateFormat, type AceEntry, type AceFieldSchema, type AceImageAttributes, type AceImageData, type AceImageOptions, type AceLinkAttributes, type AceLinkData, type AceMenu, type AceMenuItem, type AceNavigationLink, type AcePage, AcePreviewExpiredError, type AceRichTextDocument, type AceRichTextMark, type AceRichTextNode, type AceSection, type AceSectionBlock, type AceSeoOptions, type AceSeoProperties, type AceSite, AceUnavailableError, type AceValuesOf, type BlockDefinition, type SectionDefinition, type SectionFieldDefinition, type SectionFieldType, type SectionOf, type SectionTypesPayload, type ValuesOfFields, addFramingPolicy, addressFromPath, checkSectionDefinition, createAceClient, defineSection, formatAceDate, framingPolicy, headingLevel, homeAddress, imageAttributes, isCurrentPage, isHomeAddress, isInternalPath, isRefreshRequest, linkAddress, linkAttributes, linksFromMenu, listStart, listenForPreviewRefresh, loadMenuLinks, loadPage, originOf, pageNotices, pathOfAddress, previewHeaders, previewParameter, previewTokenFrom, refreshMessageType, refreshPageContent, renderRichText, renderTextArea, richTextImageSizes, sectionTypesPayload, seoDescriptionHandle, seoProperties, seoTitleHandle, swapPageContent, visitablePath };
+export { type AceAddress, type AceClient, type AceClientOptions, type AceContentTypeHandle, type AceContentTypeSchema, type AceContentTypes, type AceDateFormat, type AceEntry, type AceFavicon, type AceFieldSchema, type AceImageAttributes, type AceImageData, type AceImageOptions, type AceLinkAttributes, type AceLinkData, type AceMenu, type AceMenuItem, type AceNavigationLink, type AcePage, AcePreviewExpiredError, type AceRedirect, type AceRichTextDocument, type AceRichTextMark, type AceRichTextNode, type AceSection, type AceSectionBlock, type AceSeoOptions, type AceSeoProperties, type AceSite, AceUnavailableError, type AceValuesOf, type BlockDefinition, type SectionDefinition, type SectionFieldDefinition, type SectionFieldType, type SectionOf, type SectionTypesPayload, type ValuesOfFields, addFramingPolicy, addressFromPath, checkSectionDefinition, createAceClient, defineSection, formatAceDate, framingPolicy, headingLevel, homeAddress, imageAttributes, isCurrentPage, isHomeAddress, isInternalPath, isRefreshRequest, linkAddress, linkAttributes, linksFromMenu, listStart, listenForPreviewRefresh, loadMenuLinks, loadPage, originOf, pageNotices, pathOfAddress, previewHeaders, previewParameter, previewTokenFrom, refreshMessageType, refreshPageContent, renderRichText, renderTextArea, richTextImageSizes, sectionTypesPayload, seoDescriptionHandle, seoProperties, seoTitleHandle, swapPageContent, visitablePath };

package/dist/index.js

@@ -1,7 +1,7 @@
 export { pageNotices } from './chunk-XPZY5R5A.js';
 export { headingLevel, imageAttributes, isInternalPath, linkAddress, linkAttributes, listStart, renderRichText, renderTextArea, richTextImageSizes } from './chunk-FVR55GIU.js';
 export { listenForPreviewRefresh, refreshPageContent } from './chunk-YN7LJWGI.js';
-export { AcePreviewExpiredError, AceUnavailableError, createAceClient, isCurrentPage, linksFromMenu, loadMenuLinks, loadPage } from './chunk-EKZRLWNO.js';
+export { AcePreviewExpiredError, AceUnavailableError, createAceClient, isCurrentPage, linksFromMenu, loadMenuLinks, loadPage } from './chunk-PXT3H7C6.js';
 export { addressFromPath, homeAddress, isHomeAddress, pathOfAddress, visitablePath } from './chunk-M5WR5TCR.js';
 export { addFramingPolicy, framingPolicy, isRefreshRequest, originOf, previewHeaders, previewParameter, previewTokenFrom, refreshMessageType, swapPageContent } from './chunk-YLO6IAXF.js';
 
@@ -160,7 +160,15 @@ function seoProperties(options) {
       ...description && { description },
       ...options.image && { image: options.image }
     },
-    extend: { meta }
+    extend: {
+      meta,
+      ...options.favicon && {
+        link: [
+          { rel: "icon", href: options.favicon.icon, sizes: "48x48" },
+          { rel: "apple-touch-icon", href: options.favicon.apple_touch_icon }
+        ]
+      }
+    }
   };
 }
 

package/dist/{main-6O2IIVHO.js → main-IKZ3DQLC.js}

@@ -1367,6 +1367,15 @@ function createAceClient({
     getMenu(handle) {
       return get(`/public/menus/${encodeURIComponent(handle)}`);
     },
+    /**
+     * Where an address the site has no page for should redirect to, if the site's owners set that up; null if not.
+     * `address` is the path with its query string, e.g. "/old-page?id=7".
+     */
+    async getRedirect(address) {
+      const redirect = await get(`/public/redirects?from=${encodeURIComponent(address)}`);
+      const goesSomewhereSafe = redirect !== null && typeof redirect.to === "string" && (redirect.to.startsWith("/") && !redirect.to.startsWith("//") && !redirect.to.includes("\\") || /^https?:\/\/[^\s]+$/i.test(redirect.to)) && (redirect.status === 301 || redirect.status === 302);
+      return goesSomewhereSafe ? redirect : null;
+    },
     /** The site itself: its name, and the social image its owners chose (null if none). */
     getSite() {
       return get("/public/site");

package/dist/react-router-server.d.ts

@@ -50,6 +50,18 @@ type AceImageData = {
   content_type: string;
 };
 
+/** The site's favicon as the CMS Ace public API returns it: the original, and square PNG copies. */
+type AceFavicon = {
+  id: number;
+  /** The untouched original. */
+  url: string;
+  /** A small square PNG (48 pixels), for the browser tab and search results. */
+  icon: string;
+  /** A square PNG (180 pixels), for a phone's home screen. */
+  apple_touch_icon: string;
+  content_type: string;
+};
+
 /** The site the request is for, as the CMS Ace public API returns it. */
 type AceSite = {
   id: number;
@@ -58,6 +70,8 @@ type AceSite = {
   handle: string;
   /** The picture the site's owners chose to show in search results and social posts; null if none. */
   social_image: AceImageData | null;
+  /** The small picture the site's owners chose for browser tabs; null if none. */
+  favicon: AceFavicon | null;
 };
 
 /** One link of a menu as the public API returns it, with its address already worked out. */
@@ -112,6 +126,16 @@ type AceContentTypeSchema = {
   fields: AceFieldSchema[];
 };
 
+/** A redirect the CMS has for an address, as its public API returns it. */
+type AceRedirect = {
+  /** The old address the redirect is for. */
+  from: string;
+  /** Where it goes: a path on the site, or a full web address. */
+  to: string;
+  /** 301 is permanent; 302 is temporary. */
+  status: 301 | 302;
+};
+
 /**
  * A client for the CMS Ace public API. It runs on the server only, so the visitor's browser never talks to the
  * API. The API finds the site from X-Ace-Site-Domain, which this client sets to the site's domain. X-Forwarded-Host
@@ -132,6 +156,11 @@ declare function createAceClient({ apiUrl, siteDomain, cacheSeconds, fetchImplem
     }): Promise<AceEntry<AceValuesOf<Handle>>[]>;
     /** One of the site's navigation menus by its handle, with every link worked out; null if the site has none. */
     getMenu(handle: string): Promise<AceMenu | null>;
+    /**
+     * Where an address the site has no page for should redirect to, if the site's owners set that up; null if not.
+     * `address` is the path with its query string, e.g. "/old-page?id=7".
+     */
+    getRedirect(address: string): Promise<AceRedirect | null>;
     /** The site itself: its name, and the social image its owners chose (null if none). */
     getSite(): Promise<AceSite | null>;
     /** What the site's content types and fields are, which is what type generation reads. */

package/dist/react-router-server.js

@@ -1,4 +1,4 @@
-import { createAceClient, loadMenuLinks, loadPage } from './chunk-EKZRLWNO.js';
+import { createAceClient, loadMenuLinks, loadPage } from './chunk-PXT3H7C6.js';
 import './chunk-M5WR5TCR.js';
 import { hostedAdminOrigin, hostedApiUrl } from './chunk-N5DIMG3X.js';
 import { previewTokenFrom, addFramingPolicy } from './chunk-YLO6IAXF.js';

package/docs/astro.md

@@ -46,7 +46,7 @@ if (page.kind === "redirect") return Astro.redirect(page.location, page.status);
 {page.kind === "entry" ? <h1>{page.entry.title}</h1> : <AceNotice page={page} />}
 ```
 
-Addresses are `/{content type}/{entry}` as on Shopify, `/` is the `home` entry of `pages`, and `/pages/home` redirects to `/`. `page.kind` is `entry`, `redirect`, `not-found`, `unavailable` or `preview-expired`. `AceNotice` draws a heading and a message for the last three; draw your own if you prefer.
+Addresses are `/{content type}/{entry}` as on Shopify, `/` is the `home` entry of `pages`, and `/pages/home` redirects to `/`. An address with no page is redirected too if the site's owners set up a redirect for it in the CMS (Redirects), so old addresses from a site you moved keep working. `page.kind` is `entry`, `redirect`, `not-found`, `unavailable` or `preview-expired`. `AceNotice` draws a heading and a message for the last three; draw your own if you prefer.
 
 ## Reading content
 

package/docs/react-router.md

@@ -69,7 +69,7 @@ export default function Page({ loaderData: page }: Route.ComponentProps) {
 }
 ```
 
-The loader reads the address (`/{content type}/{entry}`, and `/` is the `home` entry of `pages`), loads the entry and answers with the right status and headers: a missing page is a real 404, an unreachable CMS a 503, an expired preview a 403, `/pages/home` redirects to `/`, and a preview is never cached or indexed. `page.kind` is `entry`, `not-found`, `unavailable` or `preview-expired`. `createMeta` titles the page from the entry (followed by the site's name), adds its description, and asks search engines to ignore a preview. With [typed content](./typed-content.md), `createPageLoader<PageValues>()` gives `page.entry.values` its real shape.
+The loader reads the address (`/{content type}/{entry}`, and `/` is the `home` entry of `pages`), loads the entry and answers with the right status and headers: a missing page is a real 404, an unreachable CMS a 503, an expired preview a 403, `/pages/home` redirects to `/`, an address with no page follows the redirect the site's owners set up in the CMS (if any), and a preview is never cached or indexed. `page.kind` is `entry`, `not-found`, `unavailable` or `preview-expired`. `createMeta` titles the page from the entry (followed by the site's name), adds its description, and asks search engines to ignore a preview. With [typed content](./typed-content.md), `createPageLoader<PageValues>()` gives `page.entry.values` its real shape.
 
 **4. The root route** loads the header menu and keeps previews fresh:
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sandboxsonny/ace-kit",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "description": "Everything a website needs to use CMS Ace: a typed client, addressing, images, menus, rich text, live preview, and Astro and React adapters.",
   "keywords": [
     "cms",