Use rewrite for placeholders and improve cache control (#4722)

README.md

@@ -68,15 +68,11 @@ For example: <`https://brands.home-assistant.io/_/[domain]/icon.png`>
 
 ### Caching
 
-All icons are cached on the client-side browser end for 900 seconds, and cached
+All icons and logos are cached by browsers for 7 days, so additions and changes may take time to reach all users. This gives users the full benefits of local caching with minimal revalidation, and protects against missing content during an internet outage.
-by Cloudflare for 604800 seconds.
 
-Placeholder images are excepted from this. Placeholder images have a 900 seconds
+Images are simultaneously cached by Cloudflare for 24 hours. This allows changes to begin being distributed to users relatively quickly without losing the CDN benefits.  It also guarantees a simple refresh (F5) will bring content no more than 1 day old.
-cache on the client-side and are cached for 1 hour on Cloudflare. This allows
-us to replace placeholder images within an acceptable time frame without losing
-our cache.
 
-Image additions and changes may take time to take effect due to caching. The cache is fully flushed in each major version of Home Assistant Core.
+The Cloudflare cache is also fully flushed in each major version of Home Assistant Core.
 
 ## Image specification
 

netlify.toml

@@ -3,21 +3,9 @@
   command = "bash ./scripts/build.sh"
 
 [[headers]]
-  for = "/_/_placeholder/*.png"
+  for = "/*"
   [headers.values]
-    Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"
+    Cache-Control = "public, max-age=604800, s-maxage=86400, stale-while-revalidate=604800"
-    Access-Control-Allow-Origin = "*"
-
-[[headers]]
-  for = "/*.png"
-  [headers.values]
-    Cache-Control = "public, max-age: 900, s-maxage=604800, must-revalidate"
-    Access-Control-Allow-Origin = "*"
-
-[[headers]]
-  for = "/domains.json"
-  [headers.values]
-    Cache-Control = "public, max-age: 900, s-maxage=604800, must-revalidate"
     Access-Control-Allow-Origin = "*"
 
 [[redirects]]
@@ -25,116 +13,15 @@
   to = "https://github.com/home-assistant/brands"
   force = true
   status = 301
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=604800, must-revalidate"}
 
 [[redirects]]
-  from = "/_/*/icon.png"
+  from = "/_/*/:image"
-  to = "/_/_placeholder/icon.png"
+  to = "/_/_placeholder/:image"
   force = false
-  status = 302
+  status = 200
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
 
 [[redirects]]
-  from = "/_/*/logo.png"
+  from = "/brands/_/*/:image"
-  to = "/_/_placeholder/logo.png"
+  to = "/brands/_/_placeholder/:image"
   force = false
-  status = 302
+  status = 200
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/_/*/icon@2x.png"
-  to = "/_/_placeholder/icon@2x.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/_/*/logo@2x.png"
-  to = "/_/_placeholder/logo@2x.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/_/*/dark_icon.png"
-  to = "/_/_placeholder/icon.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/_/*/dark_logo.png"
-  to = "/_/_placeholder/logo.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/_/*/dark_icon@2x.png"
-  to = "/_/_placeholder/icon@2x.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/_/*/dark_logo@2x.png"
-  to = "/_/_placeholder/logo@2x.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/brands/_/*/icon.png"
-  to = "/brands/_/_placeholder/icon.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/brands/_/*/logo.png"
-  to = "/brands/_/_placeholder/logo.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/brands/_/*/icon@2x.png"
-  to = "/brands/_/_placeholder/icon@2x.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/brands/_/*/logo@2x.png"
-  to = "/brands/_/_placeholder/logo@2x.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/brands/_/*/dark_icon.png"
-  to = "/brands/_/_placeholder/icon.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/brands/_/*/dark_logo.png"
-  to = "/brands/_/_placeholder/logo.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/brands/_/*/dark_icon@2x.png"
-  to = "/brands/_/_placeholder/icon@2x.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}
-
-[[redirects]]
-  from = "/brands/_/*/dark_logo@2x.png"
-  to = "/brands/_/_placeholder/logo@2x.png"
-  force = false
-  status = 302
-  headers = {Cache-Control = "public, max-age: 900, s-maxage=3600, must-revalidate"}