feat: Add BlogImage component

luigieai · Mar 8, 2023 · f1a31c8 · f1a31c8
1 parent daabadb
commit f1a31c8
Show file tree

Hide file tree

Showing 4 changed files with 125 additions and 44 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,11 +1,13 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
-
 import tailwind from "@astrojs/tailwind";
 
+// https://astro.build/config
+import image from "@astrojs/image";
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://astro-modern-personal-website.netlify.app',
-  integrations: [mdx(), sitemap(), tailwind()]
+  integrations: [mdx(), sitemap(), tailwind(), image()]
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,11 +12,12 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/image": "^0.16.0",
     "@astrojs/mdx": "^0.11.1",
     "@astrojs/rss": "^1.0.1",
     "@astrojs/sitemap": "^1.0.0",
     "@astrojs/tailwind": "^3.0.0",
-    "astro": "^2.0.0",
+    "astro": "^2.1.0",
     "daisyui": "^2.27.0"
   },
   "devDependencies": {

diff --git a/src/components/BlogImage.astro b/src/components/BlogImage.astro
@@ -0,0 +1,12 @@
+---
+import { Image } from '@astrojs/image/components';
+
+const { src, description, width } = Astro.props;
+---
+
+<div class="hero bg-base-100">
+    <div class="hero-content flex-col">
+      <Image alt={description} src={src} format='jpg' width={width ? width : 250} /> 
+      <p class="text-base italic" >{description}</p>
+    </div>
+  </div>