🐛 Change favicon rewrite to be build-time (#494)

.changeset/rich-kids-smile.md

@@ -0,0 +1,6 @@
+---
+'@myst-theme/article': patch
+'@myst-theme/book': patch
+---
+
+Update favicon links for build time fetches

themes/article/app/utils/loaders.server.ts

@@ -14,25 +14,30 @@ import { responseNoArticle, responseNoSite, getDomainFromRequest } from '@myst-t
 const CONTENT_CDN_PORT = process.env.CONTENT_CDN_PORT ?? '3100';
 const CONTENT_CDN = process.env.CONTENT_CDN ?? `http://localhost:${CONTENT_CDN_PORT}`;
 
-export async function getConfig(): Promise<SiteManifest> {
+type LinkRewriteOptions = { rewriteStaticFolder?: boolean };
+
+export async function getConfig(opts?: LinkRewriteOptions): Promise<SiteManifest> {
   const url = `${CONTENT_CDN}/config.json`;
   const response = await fetch(url).catch(() => null);
   if (!response || response.status === 404) {
     throw new Error(`No site configuration found at ${url}`);
   }
   const data = (await response.json()) as SiteManifest;
-  return updateSiteManifestStaticLinksInplace(data, updateLink);
+  return updateSiteManifestStaticLinksInplace(data, (url) => updateLink(url, opts));
 }
 
-function updateLink(url: string) {
+function updateLink(
+  url: string,
+  { rewriteStaticFolder = process.env.MODE === 'static' }: LinkRewriteOptions = {},
+) {
   if (!url) return url;
   try {
     const parsed = new URL(url);
     if (parsed.protocol.startsWith('http')) return url;
   } catch (error) {
     // pass
   }
-  if (process.env.MODE === 'static') {
+  if (rewriteStaticFolder) {
     return `/myst_assets_folder${url}`;
   }
   return `${CONTENT_CDN}${url}`;
@@ -107,8 +112,9 @@ export async function getMystSearchJson(): Promise<Record<string, any> | null> {
 }
 
 export async function getFavicon(): Promise<{ contentType: string | null; buffer: Buffer } | null> {
-  const config = await getConfig();
-  const url = updateLink(config.options?.favicon) || 'https://mystmd.org/favicon.ico';
+  // We are always fetching this at run time, so we don't want the rewritten links
+  const config = await getConfig({ rewriteStaticFolder: false });
+  const url = config.options?.favicon || 'https://mystmd.org/favicon.ico';
   const response = await fetch(url).catch(() => null);
   if (!response || response.status === 404) return null;
   return { contentType: response.headers.get('Content-Type'), buffer: await response.buffer() };

themes/book/app/utils/loaders.server.ts

@@ -15,25 +15,30 @@ import { slugToUrl } from 'myst-common';
 const CONTENT_CDN_PORT = process.env.CONTENT_CDN_PORT ?? '3100';
 const CONTENT_CDN = process.env.CONTENT_CDN ?? `http://localhost:${CONTENT_CDN_PORT}`;
 
-export async function getConfig(): Promise<SiteManifest> {
+type LinkRewriteOptions = { rewriteStaticFolder?: boolean };
+
+export async function getConfig(opts?: LinkRewriteOptions): Promise<SiteManifest> {
   const url = `${CONTENT_CDN}/config.json`;
   const response = await fetch(url).catch(() => null);
   if (!response || response.status === 404) {
     throw new Error(`No site configuration found at ${url}`);
   }
   const data = (await response.json()) as SiteManifest;
-  return updateSiteManifestStaticLinksInplace(data, updateLink);
+  return updateSiteManifestStaticLinksInplace(data, (url) => updateLink(url, opts));
 }
 
-function updateLink(url: string) {
+function updateLink(
+  url: string,
+  { rewriteStaticFolder = process.env.MODE === 'static' }: LinkRewriteOptions = {},
+) {
   if (!url) return url;
   try {
     const parsed = new URL(url);
     if (parsed.protocol.startsWith('http')) return url;
   } catch (error) {
     // pass
   }
-  if (process.env.MODE === 'static') {
+  if (rewriteStaticFolder) {
     return `/myst_assets_folder${url}`;
   }
   return `${CONTENT_CDN}${url}`;
@@ -107,8 +112,9 @@ export async function getMystSearchJson(): Promise<MystSearchIndex | null> {
 }
 
 export async function getFavicon(): Promise<{ contentType: string | null; buffer: Buffer } | null> {
-  const config = await getConfig();
-  const url = updateLink(config.options?.favicon) || 'https://mystmd.org/favicon.ico';
+  // We are always fetching this at run time, so we don't want the rewritten links
+  const config = await getConfig({ rewriteStaticFolder: false });
+  const url = config.options?.favicon || 'https://mystmd.org/favicon.ico';
   const response = await fetch(url).catch(() => null);
   if (!response || response.status === 404) return null;
   return { contentType: response.headers.get('Content-Type'), buffer: await response.buffer() };