Fix TypeScript errors in "Build your UI" code snippets

src/content/docs/en/guides/client-side-scripts.mdx

@@ -139,24 +139,26 @@ In this example, we define a new `<astro-heart>` HTML element that tracks how ma
 </astro-heart>
 
 <script>
-  // Define the behaviour for our new type of HTML element.
+  // Define the behavior for our new type of HTML element.
   class AstroHeart extends HTMLElement {
     connectedCallback() {
       let count = 0;
 
-      const heartButton = this.querySelector('button');
-      const countSpan = this.querySelector('span');
+      const heartButton = this.querySelector("button");
+      const countSpan = this.querySelector("span");
 
       // Each time the button is clicked, update the count.
-			heartButton.addEventListener('click', () => {
-        count++;
-        countSpan.textContent = count.toString();
-      });
-		}
+      if (heartButton && countSpan) {
+        heartButton.addEventListener("click", () => {
+          count++;
+          countSpan.textContent = count.toString();
+        });
+      }
+    }
   }
 
   // Tell the browser to use our AstroHeart class for <astro-heart> elements.
-  customElements.define('astro-heart', AstroHeart);
+  customElements.define("astro-heart", AstroHeart);
 </script>
 ```
 
@@ -193,10 +195,10 @@ const { message = 'Welcome, world!' } = Astro.props;
       // Read the message from the data attribute.
       const message = this.dataset.message;
       const button = this.querySelector('button');
-      button.addEventListener('click', () => {
+      button?.addEventListener('click', () => {
         alert(message);
       });
-		}
+    }
   }
 
   customElements.define('astro-greet', AstroGreet);

src/content/docs/en/guides/fonts.mdx

@@ -319,7 +319,7 @@ export const GET: APIRoute = async (context) => {
     },
   );
 
-  const pngBuffer = await sharp(Buffer.from(svg))
+  const pngBuffer = await sharp(Buffer.from(svg)) // requires `@types/node` in your dependencies for type safety
     .resize(600, 400)
     .png()
     .toBuffer();