web: fingerprint the fonts and floor plans so they can be cached

web/src/components/venues/NeufMap.tsx

@@ -1,24 +1,36 @@
 import styles from "./neufMap.module.scss";
+import etg1 from "./map/etg1.svg";
+import etg2 from "./map/etg2.svg";
+import etg3 from "./map/etg3.svg";
+import kjeller from "./map/kjeller.svg";
+
+type SvgFile = { src: string; width: number; height: number };
+
+// Imported rather than served from public/, so the files get hashed names
+// and can be cached for good
+const FLOORS: { heading: string; alt: string; file: SvgFile }[] = [
+  { heading: "Kjeller", alt: "Plantegning av kjelleren", file: kjeller },
+  { heading: "1. etasje", alt: "Plantegning av 1. etasje", file: etg1 },
+  { heading: "2. etasje", alt: "Plantegning av 2. etasje", file: etg2 },
+  { heading: "3. etasje", alt: "Plantegning av 3. etasje", file: etg3 },
+];
 
 export const NeufMap = ({ venueSlug }: { venueSlug: string }) => {
   return (
     <section className={styles.neufMap}>
-      <div className={styles.floorItem}>
+      {FLOORS.map(({ heading, alt, file }) => (
-        <span className={styles.floorHeading}>Kjeller</span>
+        <div className={styles.floorItem} key={heading}>
-        <img src="/assets/graphics/map/kjeller.svg" />
+          <span className={styles.floorHeading}>{heading}</span>
-      </div>
+          {/* eslint-disable-next-line @next/next/no-img-element -- an SVG, which next/image would not optimise */}
-      <div className={styles.floorItem}>
+          <img
-        <span className={styles.floorHeading}>1. etasje</span>
+            src={file.src}
-        <img src="/assets/graphics/map/etg1.svg" />
+            alt={alt}
-      </div>
+            width={file.width}
-      <div className={styles.floorItem}>
+            height={file.height}
-        <span className={styles.floorHeading}>2. etasje</span>
+            loading="lazy"
-        <img src="/assets/graphics/map/etg2.svg" />
+          />
-      </div>
-      <div className={styles.floorItem}>
-        <span className={styles.floorHeading}>3. etasje</span>
-        <img src="/assets/graphics/map/etg3.svg" />
         </div>
+      ))}
     </section>
   );
 };

web/src/css/fonts.scss

@@ -1,10 +1,12 @@
+// The files sit next to this stylesheet so the bundler gives them hashed
+// names, which lets browsers cache them for good
 @font-face {
   font-family: "Avenir Next";
   font-style: normal;
   font-weight: 700;
   font-stretch: normal;
   font-display: swap;
-  src: url('/assets/fonts/AvenirNext/AvenirNextBold_normal_normal.woff2') format('woff2'), url('/assets/fonts/AvenirNext/AvenirNextBold_normal_normal.woff') format('woff');
+  src: url('./fonts/AvenirNextBold_normal_normal.woff2') format('woff2');
 }
 
 @font-face {
@@ -13,7 +15,7 @@
   font-weight: 400;
   font-stretch: normal;
   font-display: swap;
-  src: url('/assets/fonts/AvenirNext/AvenirNextRegular_normal_normal.woff2') format('woff2'), url('/assets/fonts/AvenirNext/AvenirNextRegular_normal_normal.woff') format('woff');
+  src: url('./fonts/AvenirNextRegular_normal_normal.woff2') format('woff2');
 }
 
 @font-face {
@@ -22,7 +24,7 @@
   font-weight: 500;
   font-stretch: normal;
   font-display: swap;
-  src: url('/assets/fonts/AvenirNext/AvenirNextMedium_normal_normal.woff2') format('woff2'), url('/assets/fonts/AvenirNext/AvenirNextMedium_normal_normal.woff') format('woff');
+  src: url('./fonts/AvenirNextMedium_normal_normal.woff2') format('woff2');
 }
 
 @font-face {
@@ -31,7 +33,7 @@
   font-weight: 700;
   font-stretch: normal;
   font-display: swap;
-  src: url('/assets/fonts/AvenirNext/AvenirNextBoldItalic_italic_normal.woff2') format('woff2'), url('/assets/fonts/AvenirNext/AvenirNextBoldItalic_italic_normal.woff') format('woff');
+  src: url('./fonts/AvenirNextBoldItalic_italic_normal.woff2') format('woff2');
 }
 
 @font-face {
@@ -40,7 +42,7 @@
   font-weight: 500;
   font-stretch: normal;
   font-display: swap;
-  src: url('/assets/fonts/AvenirNext/AvenirNextMediumItalic_italic_normal.woff2') format('woff2'), url('/assets/fonts/AvenirNext/AvenirNextMediumItalic_italic_normal.woff') format('woff');
+  src: url('./fonts/AvenirNextMediumItalic_italic_normal.woff2') format('woff2');
 }
 
 @font-face {
@@ -49,7 +51,7 @@
   font-weight: 600;
   font-stretch: normal;
   font-display: swap;
-  src: url('/assets/fonts/AvenirNext/AvenirNextDemi_normal_normal.woff2') format('woff2'), url('/assets/fonts/AvenirNext/AvenirNextDemi_normal_normal.woff') format('woff');
+  src: url('./fonts/AvenirNextDemi_normal_normal.woff2') format('woff2');
 }
 
 @font-face {
@@ -58,7 +60,7 @@
   font-weight: 400;
   font-stretch: normal;
   font-display: swap;
-  src: url('/assets/fonts/AvenirNext/AvenirNextItalic_italic_normal.woff2') format('woff2'), url('/assets/fonts/AvenirNext/AvenirNextItalic_italic_normal.woff') format('woff');
+  src: url('./fonts/AvenirNextItalic_italic_normal.woff2') format('woff2');
 }
 
 @font-face {
@@ -67,5 +69,5 @@
   font-weight: 600;
   font-stretch: normal;
   font-display: swap;
-  src: url('/assets/fonts/AvenirNext/AvenirNextDemiItalic_italic_normal.woff2') format('woff2'), url('/assets/fonts/AvenirNext/AvenirNextDemiItalic_italic_normal.woff') format('woff');
+  src: url('./fonts/AvenirNextDemiItalic_italic_normal.woff2') format('woff2');
 }