Merge pull request #212 from dmlb:lighthouse-w-h

add height width attr defaults lighthouse
ClimateTown · May 18, 2023 · fe108cc · fe108cc
2 parents 3dcc43e + 65c52f2
commit fe108cc
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -12,6 +12,7 @@
   <title>Climate Town Knowledge Hub</title>
   <meta name="og:title" content="Climate Town Knowledge Hub" />
   <meta property="og:site_name" content="Climate Town Knowledge Hub" />
+  <meta property="twitter:site" content="@ClimateTown" />
   <meta property="og:locale" content="en_US" />
   <meta property="og:type" content="website" />
   <meta name="theme-color" content="#22c55e" />
@@ -24,8 +25,21 @@
     content="Your one-stop shop for important climate resources that you wish you knew about yesterday. The resource database spans multiple categories from activism, climate accountability, politics, climate tech/open source, climate journalism, and more."
   />
   <meta property="og:image" content="{base}/images/knowledge-hub-image.png" />
+  <meta
+    property="og:image:alt"
+    content="seascape mountain ranges in the background with an open book centered in the foreground below a bright green tree at sunrise"
+  />
+
+  <!-- yt thumbnails, crossbrowser preconnect hint -->
+  <link rel="preconnect" href="https://i.ytimg.com" />
+  <link rel="dns-prefetch" href="https://i.ytimg.com" />
 
   <!-- Emoji support with Twemoji https://github.com/twitter/twemoji -->
+  <link
+    rel="preload"
+    href="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"
+    as="script"
+  />
   <script
     src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"
     crossorigin="anonymous"></script>

diff --git a/src/routes/resources/ListItem.svelte b/src/routes/resources/ListItem.svelte
@@ -12,6 +12,9 @@
   <div class="rounded-lg shadow-lg transition ease-in-out hover:scale-105">
     {#if og_preview}
       <img
+        height="190"
+        width="330"
+        loading="lazy"
         class="object-cover rounded-t-lg object-center h-48 w-full"
         alt="Website preview"
         src={og_preview}
@@ -23,6 +26,8 @@
         <svg
           xmlns="http://www.w3.org/2000/svg"
           fill="none"
+          height="64"
+          width="64"
           viewBox="0 0 24 24"
           stroke-width="1.5"
           stroke="currentColor"
@@ -48,6 +53,8 @@
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
+            height="24"
+            width="24"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor"

diff --git a/src/routes/youtube/YoutubeVideo.svelte b/src/routes/youtube/YoutubeVideo.svelte
@@ -43,7 +43,10 @@
     class="flex w-full flex-row md:block md:w-auto md:h-auto shadow-md rounded-lg"
   >
     <img
+      loading="lazy"
       class="rounded-l-lg md:rounded-bl-none md:rounded-t-lg md:w-full"
+      height="90"
+      width="120"
       src={thumbnail}
       alt="{title} thumbnail"
     />