feat: add heroImage support to blog posts

Currently has two bugs:

1. For the image to work with `meta` tags, it needs to live in `public`.
   And/or, for it to work with Markdown, it needs to live in `public`. I
   tried using relative paths to no avail. I didn't see much info in the
   docs about including relative images from Markdown.

   Since it lives in `public`, it's treated as a _remote_ image by the
   `@astrojs/image` plugin [[1]]. This means we need to include an
   `aspectRatio`, which means we would need to make all blog posts have
   heroImages with equal ratios. The first image I threw in here uses a
   nonsensical ratio, because I did not understand this limitation when
   I made it.

2. The `Picture` component always adds a `height` attribute to the
   rendered element. The content has a max-width of about 800px, but I
   wanted to use a 1200px-wide image so it would look nicer on
   high-density displays. I'm not sure this is even optimized, but even
   if not, the resulting bug will still show up:

   The image ends up looking all squashed! The max-width of the image is
   the width of the content, while the `height` attribute sets something
   corresponding to the (hypothetical) `width` attribute. Since actual
   width is narrower than this `1200px`, the height ends up mismatching.

   If there were a way to remove this attribute from the rendered
   element, it would look great!

  [1]: https://docs.astro.build/en/guides/integrations-guide/image/#src-1

Author: chadoh

astro.config.mjs

@@ -1,15 +1,18 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import { addLayoutToBlogPosts, remarkReadingTime } from './markdown-extensions.mjs';
-
 import sitemap from '@astrojs/sitemap';
 
+import image from "@astrojs/image";
+
 // https://astro.build/config
 export default defineConfig({
-	site: 'https://ahalabs.dev',
-	integrations: [mdx(), sitemap()],
-	markdown: {
-		remarkPlugins: [addLayoutToBlogPosts, remarkReadingTime],
-		extendDefaultPlugins: true,
-	}
+  site: 'https://ahalabs.dev',
+	integrations: [mdx(), sitemap(), image({
+		serviceEntryPoint: '@astrojs/image/sharp',
+	})],
+  markdown: {
+    remarkPlugins: [addLayoutToBlogPosts, remarkReadingTime],
+    extendDefaultPlugins: true
+  }
 });