[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

@@ -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')

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)

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 () {