External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(favicon): add touch and search icons

Browse Source
This commit is contained in:
Tommaso Casaburi
2026-05-15 17:59:32 +07:00
parent 84864019f5
commit 69008dfd81
4 changed files with 23 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+4 -3
View File
@@ -3,14 +3,15 @@
<head>
<meta charset="utf-8" />
<meta name="referrer" content="no-referrer" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.ico?variant=nsfw" />
<link rel="shortcut icon" type="image/png" sizes="16x16" href="/favicon.ico?variant=nsfw" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon.ico?variant=nsfw" data-fivechan-tab-favicon="true" />
<link rel="shortcut icon" type="image/png" sizes="16x16" href="/favicon.ico?variant=nsfw" data-fivechan-tab-favicon="true" />
<link rel="icon" type="image/png" sizes="192x192" href="/manifest-icon-192x192.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="5chan is a free, open-source, decentralized imageboard built on the Bitsocial protocol. No servers, no admins — all content is shared peer-to-peer via IPFS." />
<meta name="author" content="bitsocialnet" />
<link rel="canonical" href="https://5chan.app/" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="256x256" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />
<!-- OpenGraph -->
public/apple-touch-icon copy.png → public/apple-touch-icon.png
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

src/lib/__tests__/update-favicon.test.ts
+14 -9
View File
@@ -7,23 +7,28 @@ describe('update-favicon', () => {
vi.resetModules();
});
it('replaces managed icon links and keeps both icon rel variants in sync', async () => {
it('replaces managed tab icon links without removing larger crawler icons', async () => {
const { updateFavicon } = await import('../update-favicon');
document.head.innerHTML = '<link rel="icon" href="/favicon.ico"><link rel="shortcut icon" href="/favicon.ico">';
document.head.innerHTML =
'<link rel="icon" sizes="16x16" href="/favicon.ico"><link rel="shortcut icon" sizes="16x16" href="/favicon.ico"><link rel="icon" sizes="192x192" href="/manifest-icon-192x192.png"><link rel="apple-touch-icon" sizes="256x256" href="/apple-touch-icon.png">';
updateFavicon(false);
expect(document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]')).toHaveLength(2);
expect(document.querySelector('link[rel="icon"]')?.getAttribute('href')).toBe('/favicon.ico?variant=nsfw');
expect(document.querySelector('link[rel="shortcut icon"]')?.getAttribute('href')).toBe('/favicon.ico?variant=nsfw');
expect(document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"], link[rel="apple-touch-icon"]')).toHaveLength(4);
expect(document.querySelector('link[rel="icon"][sizes="16x16"]')?.getAttribute('href')).toBe('/favicon.ico?variant=nsfw');
expect(document.querySelector('link[rel="shortcut icon"][sizes="16x16"]')?.getAttribute('href')).toBe('/favicon.ico?variant=nsfw');
expect(document.querySelector('link[rel="icon"][sizes="192x192"]')?.getAttribute('href')).toBe('/manifest-icon-192x192.png');
expect(document.querySelector('link[rel="apple-touch-icon"]')?.getAttribute('href')).toBe('/apple-touch-icon.png');
updateFavicon(false);
expect(document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]')).toHaveLength(2);
expect(document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"], link[rel="apple-touch-icon"]')).toHaveLength(4);
updateFavicon(true);
expect(document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]')).toHaveLength(2);
expect(document.querySelector('link[rel="icon"]')?.getAttribute('href')).toBe('/favicon2.ico?variant=sfw');
expect(document.querySelector('link[rel="shortcut icon"]')?.getAttribute('href')).toBe('/favicon2.ico?variant=sfw');
expect(document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"], link[rel="apple-touch-icon"]')).toHaveLength(4);
expect(document.querySelector('link[rel="icon"][sizes="16x16"]')?.getAttribute('href')).toBe('/favicon2.ico?variant=sfw');
expect(document.querySelector('link[rel="shortcut icon"][sizes="16x16"]')?.getAttribute('href')).toBe('/favicon2.ico?variant=sfw');
expect(document.querySelector('link[rel="icon"][sizes="192x192"]')?.getAttribute('href')).toBe('/manifest-icon-192x192.png');
expect(document.querySelector('link[rel="apple-touch-icon"]')?.getAttribute('href')).toBe('/apple-touch-icon.png');
});
it('marks only non-special, non-routing aggregate sfw boards as sfw', async () => {
src/lib/update-favicon.ts
+5 -3
View File
@@ -1,18 +1,20 @@
const DEFAULT_FAVICON = '/favicon.ico?variant=nsfw';
const SFW_FAVICON = '/favicon2.ico?variant=sfw';
const FAVICON_RELS = ['icon', 'shortcut icon'] as const;
const FAVICON_SELECTOR = FAVICON_RELS.map((rel) => `link[rel="${rel}"]`).join(', ');
const FAVICON_SELECTOR = ['link[data-fivechan-tab-favicon="true"]', ...FAVICON_RELS.map((rel) => `link[rel="${rel}"][sizes="16x16"]`)].join(', ');
let currentHref: string | null = null;
const hasExpectedFaviconLinks = (href: string): boolean => FAVICON_RELS.every((rel) => document.querySelector(`link[rel="${rel}"][href="${href}"]`));
const hasExpectedFaviconLinks = (href: string): boolean =>
FAVICON_RELS.every((rel) => document.querySelector(`link[rel="${rel}"][href="${href}"][data-fivechan-tab-favicon="true"]`));
const createFaviconLink = (rel: (typeof FAVICON_RELS)[number], href: string): HTMLLinkElement => {
const link = document.createElement('link');
link.rel = rel;
link.type = 'image/png';
link.sizes = '16x16';
link.setAttribute('sizes', '16x16');
link.href = href;
link.dataset.fivechanTabFavicon = 'true';
return link;
};