Skip to content

Commit

Permalink
Add dynamic favicon from API (#1280)
Browse files Browse the repository at this point in the history
  • Loading branch information
bookernath authored Sep 13, 2024
1 parent dd10d06 commit 27cbfd2
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/quick-kangaroos-crash.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@bigcommerce/catalyst-core": minor
---

Add dynamic favicon from API on a static route
3 changes: 3 additions & 0 deletions core/app/[locale]/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@ export async function generateMetadata(): Promise<Metadata> {
template: `%s - ${storeName}`,
default: pageTitle || storeName,
},
icons: {
icon: '/favicon.ico', // app/favicon.ico/route.ts
},
description: metaDescription,
keywords: metaKeywords ? metaKeywords.split(',') : null,
other: {
Expand Down
Binary file removed core/app/favicon.ico
Binary file not shown.
48 changes: 48 additions & 0 deletions core/app/favicon.ico/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/* eslint-disable check-file/folder-naming-convention */
/*
* Proxy to the store's favicon URL
*
* If you would prefer to put a favicon image directly in your codebase,
* delete this route folder and follow this guide:
*
* https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons
*
*/

import { client } from '~/client';
import { graphql } from '~/client/graphql';

const GET_FAVICON_QUERY = graphql(`
query GetFavicon {
site {
settings {
faviconUrl
}
}
}
`);

export const GET = async () => {
const { data } = await client.fetch({
document: GET_FAVICON_QUERY,
});

const faviconUrl = data.site.settings?.faviconUrl;

if (!faviconUrl) {
return new Response(null, {
status: 404,
});
}

// fetch the favicon URL and return the data directly (will be statically cached at build time)
const faviconData = await fetch(faviconUrl).then((res) => res.arrayBuffer());

return new Response(faviconData, {
headers: {
'Content-Type': 'image/x-icon',
},
});
};

export const dynamic = 'force-static';

0 comments on commit 27cbfd2

Please sign in to comment.