Inline Netlify logo, preload fonts (#10)

Author: eladroz

public/netlify-logo.svg

@@ -1,4 +1,6 @@
 ---
+import Logo from '../components/Logo.astro';
+
 const navItems = [
     { linkText: 'Home', href: '/' },
     { linkText: 'Revalidation', href: '/revalidation' },
@@ -10,7 +12,7 @@ const navItems = [
 
 <nav class="flex flex-wrap items-center gap-4 pt-6 pb-16 sm:pt-12 sm:pb-24">
     <a href="/">
-        <img src="/netlify-logo.svg" alt="Netlify logo" />
+        <Logo />
     </a>
     {
         !!navItems?.length && (
@@ -26,4 +28,3 @@ const navItems = [
         )
     }
 </nav>
-

public/images/noise.png renamed to src/assets/noise.png

@@ -0,0 +1,38 @@
+---
+// Improvement idea: get actual width as props, and auto-set height by correct aspect-ratio
+---
+
+<svg width="122" height="50" viewBox="0 0 122 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_175_3110)">
+        <path d="M27.9828 49.0799V36.6502L28.2433 36.391H30.8459L31.1065 36.6502V49.0799L30.8459 49.3391H28.2433L27.9828 49.0799Z" fill="#fff"></path>
+        <path d="M27.9828 12.688V0.259198L28.2433 0H30.8459L31.1065 0.259198V12.688L30.8459 12.9472H28.2433L27.9828 12.688Z" fill="#fff"></path>
+        <path d="M16.6687 40.1195H16.3007L14.4605 38.2879V37.9217L18.7575 33.6477L20.7061 33.6486L20.9675 33.9069V35.8454L16.6687 40.1195Z" fill="#fff"></path>
+        <path d="M16.6669 9.21965H16.2988L14.4587 11.0513V11.4174L18.7557 15.6914L20.7042 15.6905L20.9657 15.4322V13.4937L16.6669 9.21965Z" fill="#fff"></path>
+        <path d="M0.260534 23.1157H17.9595L18.2201 23.3749V25.9642L17.9595 26.2234H0.260534L0 25.9642V23.3749L0.260534 23.1157Z" fill="#fff"></path>
+        <path d="M105.082 23.1157H121.74L122.001 23.3749V25.9642L121.74 26.2234H104.041L103.781 25.9642L104.821 23.3749L105.082 23.1157Z" fill="#fff"></path>
+        <path
+            d="M50.529 25.7748L50.2685 26.034H42.1946L41.9341 26.2932C41.9341 26.8116 42.4552 28.3659 44.5385 28.3659C45.3201 28.3659 46.1008 28.1067 46.3614 27.5883L46.6219 27.3291H49.7474L50.0079 27.5883C49.7474 29.1425 48.4456 31.4753 44.5385 31.4753C40.1113 31.4753 38.027 28.3659 38.027 24.7389C38.027 21.1119 40.1104 18.0025 44.278 18.0025C48.4456 18.0025 50.529 21.1119 50.529 24.7389V25.7757V25.7748ZM46.6219 23.1837C46.6219 22.9245 46.3614 21.111 44.278 21.111C42.1946 21.111 41.9341 22.9245 41.9341 23.1837L42.1946 23.4429H46.3614L46.6219 23.1837Z"
+            fill="white"></path>
+        <path
+            d="M57.8212 27.3291C57.8212 27.8475 58.0818 28.1067 58.6028 28.1067H60.9467L61.2073 28.3659V30.9569L60.9467 31.2161H58.6028C56.2589 31.2161 54.1756 30.1793 54.1756 27.3291V21.6285L53.915 21.3693H52.0922L51.8317 21.1101V18.5191L52.0922 18.2599H53.915L54.1756 18.0007V15.6688L54.4361 15.4096H57.5616L57.8221 15.6688V18.0007L58.0827 18.2599H60.9476L61.2082 18.5191V21.1101L60.9476 21.3693H58.0827L57.8221 21.6285V27.3291H57.8212Z"
+            fill="white"></path>
+        <path d="M67.4573 31.2161H64.3318L64.0713 30.9569V13.3378L64.3318 13.0786H67.4573L67.7178 13.3378V30.9569L67.4573 31.2161Z" fill="white"></path>
+        <path
+            d="M74.489 16.1881H71.3635L71.103 15.9289V13.3378L71.3635 13.0786H74.489L74.7495 13.3378V15.9289L74.489 16.1881ZM74.489 31.2161H71.3635L71.103 30.9569V18.52L71.3635 18.2608H74.489L74.7495 18.52V30.9569L74.489 31.2161Z"
+            fill="white"></path>
+        <path
+            d="M86.7295 13.3378V15.9289L86.469 16.1881H84.1251C83.604 16.1881 83.3435 16.4473 83.3435 16.9657V18.0025L83.604 18.2617H86.2085L86.469 18.5209V21.1119L86.2085 21.3711H83.604L83.3435 21.6303V30.9578L83.083 31.217H79.9575L79.6969 30.9578V21.6303L79.4364 21.3711H77.6136L77.353 21.1119V18.5209L77.6136 18.2617H79.4364L79.6969 18.0025V16.9657C79.6969 14.1154 81.7803 13.0786 84.1242 13.0786H86.4681L86.7286 13.3378H86.7295Z"
+            fill="white"></path>
+        <path
+            d="M96.3657 31.4753C95.3235 34.0664 94.2823 35.6207 90.6357 35.6207H89.3331L89.0725 35.3615V32.7704L89.3331 32.5112H90.6357C91.9375 32.5112 92.198 32.252 92.4586 31.4744V31.2152L88.2918 21.1101V18.5191L88.5524 18.2599H90.8963L91.1568 18.5191L94.2823 27.3291H94.5428L97.6683 18.5191L97.9289 18.2599H100.273L100.533 18.5191V21.1101L96.3666 31.4744L96.3657 31.4753Z"
+            fill="white"></path>
+        <path
+            d="M32.2761 31.2161L32.0156 30.9569L32.0174 23.4492C32.0174 22.1542 31.5055 21.15 29.9341 21.1174C29.1261 21.0965 28.2014 21.1156 27.2139 21.1573L27.0664 21.3077L27.0682 30.9569L26.8077 31.2161H23.6831L23.4225 30.9569V18.3813L23.6831 18.1221L30.7148 18.0587C34.2374 18.0587 35.6631 20.4667 35.6631 23.1846V30.9569L35.4025 31.2161H32.2761Z"
+            fill="white"></path>
+    </g>
+    <defs>
+        <clipPath id="clip0_175_3110">
+            <rect width="122" height="49.3382" fill="white"></rect>
+        </clipPath>
+    </defs>
+</svg>

src/components/Header.astro

@@ -2,6 +2,9 @@
 import '../../src/styles/globals.css';
 import '@fontsource/inter/400.css';
 import '@fontsource/inter/800.css';
+import interFont400 from '@fontsource/inter/files/inter-latin-400-normal.woff2?url';
+import interFont800 from '@fontsource/inter/files/inter-latin-800-normal.woff2?url';
+
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 
@@ -20,6 +23,8 @@ const { title } = Astro.props;
         <meta name="viewport" content="width=device-width" />
         <meta name="generator" content={Astro.generator} />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="preload" as="font" type="font/woff2" href={interFont400} />
+        <link rel="preload" as="font" type="font/woff2" href={interFont800} />
     </head>
     <body class="antialiased text-white bg-[#355C7D]">
         <div class="flex flex-col min-h-screen px-6 bg-grid-pattern sm:px-12">

src/components/Logo.astro

@@ -3,7 +3,7 @@ const colors = require('tailwindcss/colors');
 const defaultTheme = require('tailwindcss/defaultTheme');
 const fs = require('fs');
 
-const noiseBitmap = fs.readFileSync('./public/images/noise.png', { encoding: 'base64' });
+const noiseBitmap = fs.readFileSync('./src/assets/noise.png', { encoding: 'base64' });
 const noiseDataUri = 'data:image/png;base64,' + noiseBitmap;
 
 export default {