⭐️ Add custom favicon (#361)

See jupyter-book/mystmd#925

.changeset/gold-pens-jump.md

@@ -0,0 +1,7 @@
+---
+'@myst-theme/common': patch
+'@myst-theme/article': patch
+'@myst-theme/book': patch
+---
+
+Add favicon

packages/common/src/utils.ts

@@ -129,6 +129,7 @@ export function updateSiteManifestStaticLinksInplace(
   }
   if (data.options.logo) data.options.logo = updateUrl(data.options.logo);
   if (data.options.logo_dark) data.options.logo_dark = updateUrl(data.options.logo_dark);
+  if (data.options.favicon) data.options.favicon = updateUrl(data.options.favicon);
   // Update the thumbnails to point at the CDN
   data.projects?.forEach((project) => {
     if (project.banner) project.banner = updateUrl(project.banner);

themes/article/app/root.tsx

@@ -23,6 +23,10 @@ export const meta: MetaFunction = ({ data }) => {
 
 export const links: LinksFunction = () => {
   return [
+    {
+      rel: 'icon',
+      href: '/favicon.ico',
+    },
     { rel: 'stylesheet', href: tailwind },
     { rel: 'stylesheet', href: thebeCoreCss },
     {

themes/article/app/routes/[favicon.ico].tsx

@@ -0,0 +1,11 @@
+import type { LoaderFunction } from '@remix-run/node';
+import { getFavicon } from '~/utils/loaders.server';
+
+export const loader: LoaderFunction = async (): Promise<Response> => {
+  const favicon = await getFavicon();
+  if (!favicon) return new Response('No favicon found', { status: 404 });
+  return new Response(
+    favicon.buffer,
+    favicon.contentType ? { headers: { 'Content-Type': favicon.contentType } } : undefined,
+  );
+};

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

@@ -77,3 +77,11 @@ export async function getObjectsInv(): Promise<Buffer | null> {
   if (!response || response.status === 404) return null;
   return response.buffer();
 }
+
+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';
+  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/article/template.yml

@@ -22,6 +22,9 @@ options:
   - type: string
     id: twitter
     description: Twitter handle related to the site
+  - type: file
+    id: favicon
+    description: Local path to favicon image
   - type: file
     id: logo
     description: Local path to logo image

themes/book/app/root.tsx

@@ -23,6 +23,10 @@ export const meta: MetaFunction = ({ data }) => {
 
 export const links: LinksFunction = () => {
   return [
+    {
+      rel: 'icon',
+      href: '/favicon.ico',
+    },
     { rel: 'stylesheet', href: tailwind },
     { rel: 'stylesheet', href: thebeCoreCss },
     {

themes/book/app/routes/[favicon.ico].tsx

@@ -0,0 +1,11 @@
+import type { LoaderFunction } from '@remix-run/node';
+import { getFavicon } from '~/utils/loaders.server';
+
+export const loader: LoaderFunction = async (): Promise<Response> => {
+  const favicon = await getFavicon();
+  if (!favicon) return new Response('No favicon found', { status: 404 });
+  return new Response(
+    favicon.buffer,
+    favicon.contentType ? { headers: { 'Content-Type': favicon.contentType } } : undefined,
+  );
+};

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

@@ -77,3 +77,11 @@ export async function getObjectsInv(): Promise<Buffer | null> {
   if (!response || response.status === 404) return null;
   return response.buffer();
 }
+
+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';
+  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/template.yml

@@ -31,6 +31,9 @@ options:
   - type: string
     id: twitter
     description: Twitter handle related to the site
+  - type: file
+    id: favicon
+    description: Local path to favicon image
   - type: file
     id: logo
     description: Local path to logo image