Merge pull request #3 from veranikabarel/update-packages

update packages

README.md

@@ -1,4 +1,4 @@
-💫 This is a free template to make your portfolio website using **[Astro 2.0](https://astro.build/blog/astro-2/) + [Tailwind CSS](https://tailwindcss.com/)**.
+💫 This is a free template to make your portfolio website using **[Astro 4.0](https://astro.build/) + [Tailwind CSS](https://tailwindcss.com/)**.
 
 ### Dark mode
 ![Dark mode](https://github.com/veranikabarel/astro-portfolio/assets/48052206/240ab82d-8896-412e-8f52-5cf10d42b1db)

astro.config.mjs

@@ -1,9 +1,15 @@
-import image from '@astrojs/image';
 import mdx from '@astrojs/mdx';
 import tailwind from '@astrojs/tailwind';
-import { defineConfig } from 'astro/config';
+import icon from "astro-icon";
+import { defineConfig, squooshImageService } from 'astro/config';
 
-// https://astro.build/config
 export default defineConfig({
-	integrations: [tailwind(), mdx(), image()],
-});
+  integrations: [tailwind(), mdx(), icon({
+    include: {
+      mdi: ["*"]
+    }
+  })],
+  image: {
+    service: squooshImageService()
+  }
+});

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "astro-portfolio",
 	"type": "module",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"scripts": {
 		"dev": "astro dev",
 		"start": "astro dev",
@@ -11,20 +11,21 @@
 		"test": "playwright test"
 	},
 	"dependencies": {
-		"@astrojs/image": "^0.16.7",
-		"@astrojs/mdx": "^0.19.1",
-		"@astrojs/tailwind": "^3.1.1",
-		"@astrojs/ts-plugin": "^0.4.4",
-		"astro": "^2.3.4",
-		"astro-icon": "^0.8.0",
-		"astro-navbar": "^1.2.0",
-		"astro-seo": "^0.7.2",
-		"tailwindcss": "^3.0.24"
+		"@astrojs/image": "^0.18.0",
+		"@astrojs/mdx": "^2.2.2",
+		"@astrojs/tailwind": "^5.1.0",
+		"@astrojs/ts-plugin": "^1.6.1",
+		"astro": "^4.5.12",
+		"astro-icon": "^1.1.0",
+		"astro-navbar": "^2.3.1",
+		"astro-seo": "^0.8.3",
+		"tailwindcss": "^3.4.3"
 	},
 	"devDependencies": {
+		"@iconify-json/mdi": "^1.1.64",
 		"@playwright/test": "^1.33.0",
-		"prettier": "^2.8.8",
-		"prettier-plugin-astro": "^0.8.0",
-		"prettier-plugin-tailwindcss": "^0.2.8"
+		"prettier": "^3.2.5",
+		"prettier-plugin-astro": "^0.13.0",
+		"prettier-plugin-tailwindcss": "^0.5.13"
 	}
 }

src/components/Hero.astro

@@ -1,7 +1,7 @@
 ---
-import heroImage from '@assets/images/hero.png';
-import { Image } from '@astrojs/image/components';
 import Button from '@components/ui/Button.astro';
+import { Image } from 'astro:assets';
+import heroImage from '../assets/images/hero.png';
 ---
 
 <section
@@ -23,7 +23,6 @@ import Button from '@components/ui/Button.astro';
 		<Image
 			src={heroImage}
 			alt="Coding girl"
-			aspectRatio="4:4"
 			format="png"
 			width={600}
 			height={600}

src/components/ui/Card.astro

@@ -1,17 +1,24 @@
 ---
-import projectImage from '@assets/images/project.png';
-import { Image } from '@astrojs/image/components';
 import Tags from '@components/ui/Tags.astro';
+import { Image } from 'astro:assets';
+import projectImage from '../../assets/images/project.png';
+
 interface Props {
 	url?: string;
 	alt?: string;
 	title?: string;
-	description: string,
+	description: string;
 	tags: string[];
 	children?: HTMLElement | HTMLElement[];
 }
 
-const { url = '#', alt = 'Project image', description = 'Project Description', title = 'Project title', tags = ['Tags'] } = Astro.props;
+const {
+	url = '#',
+	alt = 'Project image',
+	description = 'Project Description',
+	title = 'Project title',
+	tags = ['Tags'],
+} = Astro.props;
 ---
 
 <section class="w-full p-4 md:w-1/2 lg:w-1/3">
@@ -21,19 +28,11 @@ const { url = '#', alt = 'Project image', description = 'Project Description', t
 	>
 		<a href={url} aria-label="link to project">
 			<div class="relative flex items-end overflow-hidden rounded-xl">
-				<Image
-					src={projectImage}
-					alt={alt}
-					aspectRatio="4:4"
-					format="png"
-					width={400}
-					height={400}
-					loading="eager"
-				/>
+				<Image src={projectImage} alt={alt} format="png" width={400} height={400} loading="eager" />
 			</div>
 			<div class="mt-1 p-2">
 				<h3 class="text-xl text-orange lg:text-2xl">{title}</h3>
-				<p class="text-black text-s">{description}</p>
+				<p class="text-s text-black">{description}</p>
 				<Tags tags={tags} />
 			</div>
 		</a>

src/components/ui/Social.astro

@@ -1,22 +1,25 @@
 ---
-import { Icon } from 'astro-icon';
+import { Icon } from 'astro-icon/components';
 ---
 
 <a href="https://github.com/" target="_blank" rel="noopener" aria-label="github"
 	><Icon
 		class="h-8 hover:text-orange dark:hover:text-orange md:h-12"
-		name="simple-icons:github"
+		name="mdi:github"
+		size={100}
 	/></a
 >
 <a href="https://www.linkedin.com/" target="_blank" rel="noopener" aria-label="linkedin"
 	><Icon
 		class="h-8 hover:text-orange dark:hover:text-orange md:h-12"
-		name="simple-icons:linkedin"
+		name="mdi:linkedin"
+		size={100}
 	/></a
 >
 <a href="https://twitter.com/" target="_blank" rel="noopener" aria-label="twitter"
 	><Icon
 		class="h-8 hover:text-orange dark:hover:text-orange md:h-12"
-		name="simple-icons:twitter"
+		name="mdi:twitter"
+		size={100}
 	/></a
 >