From c6905fc94daa9d3e8520c88e148406560ac52d42 Mon Sep 17 00:00:00 2001 From: Antoine Clausse Date: Mon, 15 Sep 2025 12:47:53 +0200 Subject: [PATCH] [web] Fetch favicons from CDN (#28419) * Simplify paths in `buildImgPath` * Move favicons from `public` to `public/img/favicons` * Create links to favicons in `public` (`ln -s img/favicons/* .`) * Import favicons dynamically in use-status-favicon.ts * Update pug files with cdn favicon paths * Update test * Revert change in layout-no-js.pug * Fetch web.sitemanifest from CDN * Revert favicon move * Fix favicon paths (use `buildBaseAssetPath`) * Fixup web.sitemanifest path * Format * Update `buildImgPath` mock to be more realistic * Revert web.sitemanifest link to local origin * Revert "Revert web.sitemanifest link to local origin" This reverts commit aa13431b743b55c2f536c33e736f657e1c0db598. GitOrigin-RevId: fe278fec0f1eaae16de9fabc2b13da3e7a316463 --- services/web/app/views/_metadata.pug | 30 ++++++++++++------- .../ide-react/hooks/use-status-favicon.ts | 13 ++++---- .../ide-react/unit/use-status-favicon.test.ts | 5 ++++ 3 files changed, 32 insertions(+), 16 deletions(-) diff --git a/services/web/app/views/_metadata.pug b/services/web/app/views/_metadata.pug index b28ca6abd2..c63437e9bf 100644 --- a/services/web/app/views/_metadata.pug +++ b/services/web/app/views/_metadata.pug @@ -43,8 +43,8 @@ else if settings.overleaf meta(name='image' content=buildImgPath('ol-brand/overleaf_og_logo.png')) else //- the default image for Overleaf Community Edition/Server Pro - meta(itemprop='image' content='/apple-touch-icon.png') - meta(name='image' content='/apple-touch-icon.png') + meta(itemprop='image' content=buildBaseAssetPath() + 'apple-touch-icon.png') + meta(name='image' content=buildBaseAssetPath() + 'apple-touch-icon.png') //- Keywords if metadata && metadata.keywords @@ -79,7 +79,10 @@ else if settings.overleaf ) else //- the default image for Overleaf Community Edition/Server Pro - meta(name='twitter:image' content='/apple-touch-icon.png') + meta( + name='twitter:image' + content=buildBaseAssetPath() + 'apple-touch-icon.png' + ) //- Open Graph //- to do - add og:url @@ -102,7 +105,10 @@ else if settings.overleaf ) else //- the default image for Overleaf Community Edition/Server Pro - meta(property='og:image' content='/apple-touch-icon.png') + meta( + property='og:image' + content=buildBaseAssetPath() + 'apple-touch-icon.png' + ) if metadata && metadata.openGraphType meta(property='og:type' metadata.openGraphType) @@ -125,11 +131,15 @@ if settings.robotsNoindex meta(name='robots' content='noindex') //- Icons -link(rel='icon' sizes='32x32' href='/favicon-32x32.png') -link(rel='icon' sizes='16x16' href='/favicon-16x16.png') -link(rel='icon' href='/favicon.svg' type='image/svg+xml') -link(rel='apple-touch-icon' href='/apple-touch-icon.png') -link(rel='mask-icon' href='/mask-favicon.svg' color='#046530') +link(rel='icon' sizes='32x32' href=buildBaseAssetPath() + 'favicon-32x32.png') +link(rel='icon' sizes='16x16' href=buildBaseAssetPath() + 'favicon-16x16.png') +link(rel='icon' href=buildBaseAssetPath() + 'favicon.svg' type='image/svg+xml') +link(rel='apple-touch-icon' href=buildBaseAssetPath() + 'apple-touch-icon.png') +link( + rel='mask-icon' + href=buildBaseAssetPath() + 'mask-favicon.svg' + color='#046530' +) //- Canonical Tag for SEO if metadata && metadata.canonicalURL @@ -137,4 +147,4 @@ if metadata && metadata.canonicalURL //- Manifest //- Does not currently contain a start_url to prevent browser installation prompts -link(rel='manifest' href='/web.sitemanifest') +link(rel='manifest' href=buildBaseAssetPath() + 'web.sitemanifest') diff --git a/services/web/frontend/js/features/ide-react/hooks/use-status-favicon.ts b/services/web/frontend/js/features/ide-react/hooks/use-status-favicon.ts index c65d49e042..bef3e0fd50 100644 --- a/services/web/frontend/js/features/ide-react/hooks/use-status-favicon.ts +++ b/services/web/frontend/js/features/ide-react/hooks/use-status-favicon.ts @@ -1,15 +1,16 @@ import { useDetachCompileContext as useCompileContext } from '@/shared/context/detach-compile-context' import { useEffect, useState } from 'react' import usePreviousValue from '@/shared/hooks/use-previous-value' +import getMeta from '@/utils/meta' const RESET_AFTER_MS = 5_000 const COMPILE_ICONS = { - ERROR: '/favicon-error.svg', - COMPILING: '/favicon-compiling.svg', - COMPILED: '/favicon-compiled.svg', - UNCOMPILED: '/favicon.svg', -} + ERROR: 'favicon-error.svg', + COMPILING: 'favicon-compiling.svg', + COMPILED: 'favicon-compiled.svg', + UNCOMPILED: 'favicon.svg', +} as const type CompileStatus = keyof typeof COMPILE_ICONS @@ -34,7 +35,7 @@ const updateFavicon = (status: CompileStatus = 'UNCOMPILED') => { removeFavicon() const linkElement = document.createElement('link') linkElement.rel = 'icon' - linkElement.href = COMPILE_ICONS[status] + linkElement.href = getMeta('ol-baseAssetPath') + COMPILE_ICONS[status] linkElement.type = 'image/svg+xml' linkElement.setAttribute('data-compile-status', 'true') document.head.appendChild(linkElement) diff --git a/services/web/test/frontend/features/ide-react/unit/use-status-favicon.test.ts b/services/web/test/frontend/features/ide-react/unit/use-status-favicon.test.ts index f3a9294eb1..f5fa7803c5 100644 --- a/services/web/test/frontend/features/ide-react/unit/use-status-favicon.test.ts +++ b/services/web/test/frontend/features/ide-react/unit/use-status-favicon.test.ts @@ -53,6 +53,11 @@ describe('useStatusFavicon', function () { document .querySelectorAll('link[data-compile-status="true"]') .forEach(el => el.remove()) + + window.metaAttributesCache.set( + 'ol-baseAssetPath', + 'https://cdn.test-overleaf.com/' + ) }) afterEach(function () {