From 3413cb3180aa26fc3bd0353e53b51691f71c21bf Mon Sep 17 00:00:00 2001 From: "xan.lol" Date: Fri, 17 Apr 2026 21:50:22 -0700 Subject: [PATCH] feat: favicon changes color + setting logos elsewhere + rspack config for development source maps --- assets/icons/logo-mark.svg | 1 + assets/icons/logo.svg | 1 + rspack.config.ts | 6 ++++- src/components/icons/Logo.tsx | 10 ++++---- src/view/icons/Logo.tsx | 8 +++--- src/view/icons/Logomark.tsx | 2 +- src/view/shell/index.web.tsx | 46 +++++++++++++++++++++++++++++++++++ 7 files changed, 63 insertions(+), 11 deletions(-) create mode 100644 assets/icons/logo-mark.svg create mode 100644 assets/icons/logo.svg diff --git a/assets/icons/logo-mark.svg b/assets/icons/logo-mark.svg new file mode 100644 index 000000000..09e566076 --- /dev/null +++ b/assets/icons/logo-mark.svg @@ -0,0 +1 @@ + diff --git a/assets/icons/logo.svg b/assets/icons/logo.svg new file mode 100644 index 000000000..733968017 --- /dev/null +++ b/assets/icons/logo.svg @@ -0,0 +1 @@ + diff --git a/rspack.config.ts b/rspack.config.ts index cfbded0e6..f5a5ad4f2 100644 --- a/rspack.config.ts +++ b/rspack.config.ts @@ -93,7 +93,11 @@ const transpileModuleDirs = getTranspileModuleDirs(TRANSPILE_MODULES) /** @type {import('@rspack/core').Configuration} */ module.exports = { mode: isProduction ? 'production' : 'development', - devtool: isProduction ? 'source-map' : 'eval-cheap-module-source-map', + // Avoid eval-based sourcemaps in development. Firefox resolves relative + // sourcemap URLs from injected devtools scripts like `installHook.js.map` + // against an `` URL when the bundle is eval-backed, which + // produces noisy 404s in the console. + devtool: isProduction ? 'source-map' : 'cheap-module-source-map', entry: { main: path.resolve(__dirname, 'index.web.js'), diff --git a/src/components/icons/Logo.tsx b/src/components/icons/Logo.tsx index 75c5cb420..09910b129 100644 --- a/src/components/icons/Logo.tsx +++ b/src/components/icons/Logo.tsx @@ -4,7 +4,7 @@ import {type Props, useCommonSVGProps} from './common' import {createSinglePathSVG} from './TEMPLATE' export const Mark = createSinglePathSVG({ - path: 'M6.335 4.212c2.293 1.76 4.76 5.327 5.665 7.241.906-1.914 3.372-5.482 5.665-7.241C19.319 2.942 22 1.96 22 5.086c0 .624-.35 5.244-.556 5.994-.713 2.608-3.315 3.273-5.629 2.87 4.045.704 5.074 3.035 2.852 5.366-4.22 4.426-6.066-1.111-6.54-2.53-.086-.26-.126-.382-.127-.278 0-.104-.041.018-.128.278-.473 1.419-2.318 6.956-6.539 2.53-2.222-2.331-1.193-4.662 2.852-5.366-2.314.403-4.916-.262-5.63-2.87C2.35 10.33 2 5.71 2 5.086c0-3.126 2.68-2.144 4.335-.874Z', + path: 'M374.473 57.7173C367.666 50.7995 357.119 49.1209 348.441 53.1659C347.173 53.7567 342.223 56.0864 334.796 59.8613C326.32 64.1696 314.568 70.3869 301.394 78.0596C275.444 93.1728 242.399 114.83 218.408 139.477C185.983 172.786 158.719 225.503 140.029 267.661C130.506 289.144 122.878 308.661 117.629 322.81C116.301 326.389 115.124 329.63 114.104 332.478C87.1783 336.42 64.534 341.641 47.5078 348.101C37.6493 351.84 28.3222 356.491 21.0573 362.538C13.8818 368.511 6.00003 378.262 6.00003 391.822C6.00014 403.222 11.8738 411.777 17.4566 417.235C23.0009 422.655 29.9593 426.793 36.871 430.062C50.8097 436.653 69.5275 441.988 90.8362 446.249C133.828 454.846 192.21 460 256.001 460C319.79 460 378.172 454.846 421.164 446.249C442.472 441.988 461.19 436.653 475.129 430.062C482.041 426.793 488.999 422.655 494.543 417.235C500.039 411.862 505.817 403.489 505.996 392.353L506 391.822L505.995 391.188C505.754 377.959 498.012 368.417 490.945 362.534C483.679 356.485 474.35 351.835 464.491 348.095C446.749 341.366 422.906 335.982 394.476 331.987C393.6 330.57 392.633 328.995 391.595 327.273C386.477 318.777 379.633 306.842 372.737 293.115C358.503 264.781 345.757 232.098 344.756 206.636C343.87 184.121 351.638 154.087 360.819 127.789C365.27 115.041 369.795 103.877 373.207 95.9072C374.909 91.9309 376.325 88.7712 377.302 86.6328C377.79 85.5645 378.167 84.7524 378.416 84.2224C378.54 83.9579 378.632 83.7635 378.69 83.643C378.718 83.5829 378.739 83.5411 378.75 83.5181C378.753 83.5108 378.756 83.5049 378.757 83.5015C382.909 74.8634 381.196 64.5488 374.473 57.7173Z', }) export function Full( @@ -14,13 +14,13 @@ export function Full( }, ) { const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props) - const ratio = 123 / 555 + const ratio = 123 / 641 return ( @@ -29,13 +29,13 @@ export function Full( fill={props.markFill ?? fill} fillRule="evenodd" clipRule="evenodd" - d="M101.821 7.673C112.575-.367 130-6.589 130 13.21c0 3.953-2.276 33.214-3.611 37.965-4.641 16.516-21.549 20.729-36.591 18.179 26.292 4.457 32.979 19.218 18.535 33.98-27.433 28.035-39.428-7.034-42.502-16.02-.563-1.647-.827-2.418-.831-1.763-.004-.655-.268.116-.831 1.763-3.074 8.986-15.07 44.055-42.502 16.02C7.223 88.571 13.91 73.81 40.202 69.353c-15.041 2.55-31.95-1.663-36.59-18.179C2.275 46.424 0 17.162 0 13.21 0-6.59 17.426-.368 28.18 7.673 43.084 18.817 59.114 41.413 65 53.54c5.886-12.125 21.917-34.722 36.821-45.866Z" + d="M95.803 5.74658C94.033 3.94786 91.291 3.51141 89.0346 4.56316C88.705 4.71679 87.4179 5.32255 85.487 6.30408C83.2833 7.4243 80.2277 9.04088 76.8025 11.0359C70.0556 14.9655 61.4639 20.5968 55.226 27.0052C46.7956 35.6661 39.7068 49.3734 34.8476 60.335C32.3714 65.9207 30.3883 70.9954 29.0235 74.6746C28.6783 75.6051 28.3721 76.4477 28.1071 77.1883C21.1063 78.2133 15.2188 79.5709 10.792 81.2504C8.22882 82.2228 5.80378 83.432 3.9149 85.0043C2.04927 86.5573 7.87818e-07 89.0928 7.87818e-07 92.6186C2.98221e-05 95.5828 1.52718 97.8072 2.97872 99.2262C4.42023 100.636 6.22941 101.712 8.02646 102.561C11.6505 104.275 16.5172 105.663 22.0574 106.77C33.2353 109.006 48.4147 110.346 65.0001 110.346C81.5855 110.346 96.7647 109.006 107.943 106.77C113.483 105.663 118.349 104.275 121.974 102.561C123.771 101.712 125.58 100.636 127.021 99.2262C128.45 97.8293 129.952 95.6521 129.999 92.7568L130 92.6186L129.999 92.4538C129.936 89.014 127.923 86.5329 126.086 85.0033C124.196 83.4305 121.771 82.2213 119.208 81.249C114.595 79.4993 108.396 78.0993 101.004 77.0607C100.776 76.6921 100.524 76.2827 100.255 75.835C98.9239 73.6259 97.1446 70.5227 95.3515 66.9533C91.6507 59.5861 88.3368 51.0879 88.0765 44.4677C87.8463 38.6133 89.8658 30.8041 92.253 23.9662C93.4101 20.6516 94.5868 17.7487 95.4738 15.6765C95.9163 14.6426 96.2845 13.821 96.5385 13.265C96.6653 12.9873 96.7635 12.7761 96.8282 12.6383C96.8604 12.5695 96.8844 12.519 96.8993 12.4876C96.9067 12.472 96.9121 12.4611 96.915 12.4552C96.9159 12.4533 96.9164 12.4517 96.9169 12.4508C97.9964 10.2048 97.5508 7.52289 95.803 5.74658Z" /> ) diff --git a/src/view/icons/Logo.tsx b/src/view/icons/Logo.tsx index 36c956931..69b343a82 100644 --- a/src/view/icons/Logo.tsx +++ b/src/view/icons/Logo.tsx @@ -14,6 +14,9 @@ import {useKawaiiMode} from '#/state/preferences/kawaii' import {flatten, useTheme} from '#/alf' const ratio = 512 / 512 +export const LOGO_VIEW_BOX = '0 0 512 512' +export const LOGO_PATH = + 'M374.473 57.7173C367.666 50.7995 357.119 49.1209 348.441 53.1659C347.173 53.7567 342.223 56.0864 334.796 59.8613C326.32 64.1696 314.568 70.3869 301.394 78.0596C275.444 93.1728 242.399 114.83 218.408 139.477C185.983 172.786 158.719 225.503 140.029 267.661C130.506 289.144 122.878 308.661 117.629 322.81C116.301 326.389 115.124 329.63 114.104 332.478C87.1783 336.42 64.534 341.641 47.5078 348.101C37.6493 351.84 28.3222 356.491 21.0573 362.538C13.8818 368.511 6.00003 378.262 6.00003 391.822C6.00014 403.222 11.8738 411.777 17.4566 417.235C23.0009 422.655 29.9593 426.793 36.871 430.062C50.8097 436.653 69.5275 441.988 90.8362 446.249C133.828 454.846 192.21 460 256.001 460C319.79 460 378.172 454.846 421.164 446.249C442.472 441.988 461.19 436.653 475.129 430.062C482.041 426.793 488.999 422.655 494.543 417.235C500.039 411.862 505.817 403.489 505.996 392.353L506 391.822L505.995 391.188C505.754 377.959 498.012 368.417 490.945 362.534C483.679 356.485 474.35 351.835 464.491 348.095C446.749 341.366 422.906 335.982 394.476 331.987C393.6 330.57 392.633 328.995 391.595 327.273C386.477 318.777 379.633 306.842 372.737 293.115C358.503 264.781 345.757 232.098 344.756 206.636C343.87 184.121 351.638 154.087 360.819 127.789C365.27 115.041 369.795 103.877 373.207 95.9072C374.909 91.9309 376.325 88.7712 377.302 86.6328C377.79 85.5645 378.167 84.7524 378.416 84.2224C378.54 83.9579 378.632 83.7635 378.69 83.643C378.718 83.5829 378.739 83.5411 378.75 83.5181C378.753 83.5108 378.756 83.5049 378.757 83.5015C382.909 74.8634 381.196 64.5488 374.473 57.7173Z' type Props = { fill?: PathProps['fill'] @@ -74,10 +77,7 @@ export const Logo = forwardRef(function LogoImpl(props: Props, ref) { )} - + ) }) diff --git a/src/view/icons/Logomark.tsx b/src/view/icons/Logomark.tsx index 8d078f434..d8147e828 100644 --- a/src/view/icons/Logomark.tsx +++ b/src/view/icons/Logomark.tsx @@ -21,7 +21,7 @@ export function Logomark({ height={Number(size) * ratio}> ) diff --git a/src/view/shell/index.web.tsx b/src/view/shell/index.web.tsx index 143d48332..8014e6f94 100644 --- a/src/view/shell/index.web.tsx +++ b/src/view/shell/index.web.tsx @@ -13,6 +13,7 @@ import {useCloseAllActiveElements} from '#/state/util' import {Lightbox} from '#/view/com/lightbox/Lightbox' import {ModalsContainer} from '#/view/com/modals/Modal' import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' +import {LOGO_PATH, LOGO_VIEW_BOX} from '#/view/icons/Logo' import {Deactivated} from '#/screens/Deactivated' import {Takendown} from '#/screens/Takendown' import {atoms as a, select, useBreakpoints, useTheme} from '#/alf' @@ -36,6 +37,35 @@ import {FlatNavigator, RoutesContainer} from '#/Navigation' import {Composer} from './Composer' import {DrawerContent} from './Drawer' +function createFaviconDataUrl(color: string) { + const svg = `` + return `data:image/svg+xml,${encodeURIComponent(svg)}` +} + +function upsertHeadLink({ + rel, + href, + type, + sizes, +}: { + rel: string + href: string + type?: string + sizes?: string +}) { + let link = document.head.querySelector(`link[rel="${rel}"]`) + + if (!link) { + link = document.createElement('link') + link.rel = rel + document.head.appendChild(link) + } + + if (type) link.type = type + if (sizes) link.sizes = sizes + link.href = href +} + function ShellInner() { const t = useTheme() const navigator = useNavigation() @@ -78,6 +108,22 @@ function ShellInner() { ` }, [t.palette.primary_500]) + useLayoutEffect(() => { + const faviconHref = createFaviconDataUrl(t.palette.primary_500) + + upsertHeadLink({ + rel: 'icon', + href: faviconHref, + type: 'image/svg+xml', + sizes: 'any', + }) + upsertHeadLink({ + rel: 'shortcut icon', + href: faviconHref, + type: 'image/svg+xml', + }) + }, [t.palette.primary_500]) + useEffect(() => { const unsubscribe = navigator.addListener('state', () => { closeAllActiveElements() -- 2.51.2