feat!: switch to Astro Assets

ElianCodes · Aug 9, 2023 · 7a5b8d4 · 7a5b8d4
1 parent d6592c9
commit 7a5b8d4
Show file tree

Hide file tree

Showing 12 changed files with 28 additions and 67 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -3,13 +3,16 @@ import sitemap from '@astrojs/sitemap';
 import UnoCSS from 'unocss/astro';
 
 export default defineConfig({
+  experimental: {
+    assets: true,
+  },
   // used to generate images
   site:
     process.env.VERCEL_ENV === 'production'
       ? 'https://brutal.elian.codes/'
       : process.env.VERCEL_URL
       ? `https://${process.env.VERCEL_URL}/`
-      : 'https://localhost:3001/',
+      : 'https://localhost:3000/',
   trailingSlash: 'ignore',
   integrations: [sitemap(), UnoCSS({ injectReset: true })],
 });
diff --git a/package.json b/package.json
@@ -18,7 +18,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/image": "^0.17.3",
     "@astrojs/rss": "^2.4.4",
     "@astrojs/sitemap": "^2.0.1",
     "@eliancodes/brutal-ui": "^0.2.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/astro.jpeg b/src/assets/astro.jpeg
diff --git a/src/components/generic/SummaryCard.astro b/src/components/generic/SummaryCard.astro
@@ -1,20 +1,21 @@
 ---
+import { Card } from '@eliancodes/brutal-ui';
+import { Image } from 'astro:assets';
+
 interface Props {
   title: string;
   imgSrc: string;
   imgAlt: string;
   description: string;
 }
-import { Card } from '@eliancodes/brutal-ui';
+
 const { title, imgAlt, imgSrc, description } = Astro.props;
 ---
 
-<Card
-  color="white"
->
+<Card color='white'>
   <h3 class='poppins text-lg md:text-xl'>{title}</h3>
   <div class='rounded-lg border-3 border-black my-4 h-56'>
-    <img
+    <Image
       src={imgSrc}
       alt={imgAlt}
       width={800}

diff --git a/src/content/blog/blogpost-1.md b/src/content/blog/blogpost-1.md
@@ -6,7 +6,7 @@ tags:
   - JavaScript
   - Astro
   - UnoCSS
-imgUrl: https://i.imgur.com/iGvihVf.jpg
+imgUrl: '../../assets/astro.jpeg'
 description: Lorem markdownum longo os thyrso telum, continet servat fetus nymphae, vox nocte sedesque, decimo. Omnia esse, quam sive; conplevit illis indestrictus admovit dedit sub quod protectus, impedit non.
 layout: '../../layouts/BlogPost.astro'
 ---

diff --git a/src/content/blog/blogpost-2.md b/src/content/blog/blogpost-2.md
@@ -6,7 +6,7 @@ tags:
   - Astro
   - WebDev
   - Programming
-imgUrl: https://i.imgur.com/iGvihVf.jpg
+imgUrl: '../../assets/astro.jpeg'
 description: Lorem markdownum longo os thyrso telum, continet servat fetus nymphae, vox nocte sedesque, decimo. Omnia esse, quam sive; conplevit illis indestrictus admovit dedit sub quod protectus, impedit non.
 layout: '../../layouts/BlogPost.astro'
 ---

diff --git a/src/content/blog/blogpost-3.md b/src/content/blog/blogpost-3.md
@@ -7,7 +7,7 @@ tags:
   - CSS
   - Astro
   - Vite
-imgUrl: https://i.imgur.com/iGvihVf.jpg
+imgUrl: '../../assets/astro.jpeg'
 layout: ../../layouts/BlogPost.astro
 ---
 

diff --git a/src/content/blog/blogpost-4.md b/src/content/blog/blogpost-4.md
@@ -7,7 +7,7 @@ tags:
   - JavaScript
   - Web Development
 description: Lorem markdownum longo os thyrso telum, continet servat fetus nymphae, vox nocte sedesque, decimo. Omnia esse, quam sive; conplevit illis indestrictus admovit dedit sub quod protectus, impedit non.
-imgUrl: https://i.imgur.com/iGvihVf.jpg
+imgUrl: '../../assets/astro.jpeg'
 layout: "../../layouts/BlogPost.astro"
 ---
 

diff --git a/src/content/blog/blogpost-5.md b/src/content/blog/blogpost-5.md
@@ -7,7 +7,7 @@ tags:
   - JavaScript
   - Theme
 description: Lorem markdownum longo os thyrso telum, continet servat fetus nymphae, vox nocte sedesque, decimo. Omnia esse, quam sive; conplevit illis indestrictus admovit dedit sub quod protectus, impedit non.
-imgUrl: https://i.imgur.com/iGvihVf.jpg
+imgUrl: '../../assets/astro.jpeg'
 layout: "../../layouts/BlogPost.astro"
 ---
 

diff --git a/src/content/blog/blogpost-6.md b/src/content/blog/blogpost-6.md
@@ -7,7 +7,7 @@ tags:
   - TypeScript
   - Astro
   - Web Development
-imgUrl: https://i.imgur.com/iGvihVf.jpg
+imgUrl: '../../assets/astro.jpeg'
 layout: ../../layouts/BlogPost.astro
 ---
 

diff --git a/src/content/config.ts b/src/content/config.ts
@@ -1,17 +1,18 @@
-import { z, defineCollection } from "astro:content";
+import { z, defineCollection } from 'astro:content';
 
 const blogCollection = defineCollection({
-	schema: z.object({
-		title: z.string(),
-		author: z.string(),
-		tags: z.array(z.string()),
-		description: z.string(),
-		pubDate: z.string().transform((str) => new Date(str)),
-		imgUrl: z.string(),
-		draft: z.boolean().optional().default(false),
-	}),
+  schema: ({ image }) =>
+    z.object({
+      title: z.string(),
+      author: z.string(),
+      tags: z.array(z.string()),
+      description: z.string(),
+      pubDate: z.string().transform((str) => new Date(str)),
+      imgUrl: image(),
+      draft: z.boolean().optional().default(false),
+    }),
 });
 
 export const collections = {
-	blog: blogCollection,
+  blog: blogCollection,
 };