Merge pull request #43 from thekayshawn/main

Update all dependencies to latest versions and replace deprecated Picture component with built-in Picture component

astro.config.mjs

@@ -1,18 +1,10 @@
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
-import image from "@astrojs/image";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 
 // https://astro.build/config
 export default defineConfig({
   site: "https://astroship.web3templates.com",
-  integrations: [
+  integrations: [tailwind(), mdx(), sitemap()],
-    tailwind(),
-    image({
-      serviceEntryPoint: "@astrojs/image/sharp",
-    }),
-    mdx(),
-    sitemap(),
-  ],
 });

package.json

@@ -1,7 +1,7 @@
 {
   "name": "astroship",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -11,17 +11,15 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/image": "^0.17.2",
+    "@astrojs/mdx": "^1.1.5",
-    "@astrojs/mdx": "^0.19.7",
+    "@astrojs/sitemap": "^3.0.3",
-    "@astrojs/sitemap": "^2.0.1",
+    "@astrojs/tailwind": "^5.0.2",
-    "@astrojs/tailwind": "^4.0.0",
+    "@fontsource-variable/inter": "^5.0.15",
-    "@fontsource-variable/inter": "^5.0.5",
+    "@tailwindcss/typography": "^0.5.10",
-    "@tailwindcss/typography": "^0.5.9",
+    "astro": "^3.5.5",
-    "astro": "^2.9.7",
     "astro-icon": "^0.8.1",
-    "astro-navbar": "^2.0.1",
+    "astro-navbar": "^2.3.0",
-    "astro-seo": "^0.7.5",
+    "astro-seo": "^0.8.0",
-    "sharp": "^0.32.4",
+    "tailwindcss": "^3.3.5"
-    "tailwindcss": "^3.0.24"
   }
 }

src/components/hero.astro

@@ -1,5 +1,5 @@
 ---
-import { Picture } from "@astrojs/image/components";
+import { Picture } from "astro:assets";
 import heroImage from "assets/hero.png";
 import Link from "@components/ui/link.astro";
 import { Icon } from "astro-icon";
@@ -12,7 +12,6 @@ import { Icon } from "astro-icon";
       src={heroImage}
       alt="Astronaut in the air"
       widths={[200, 400, 600]}
-      aspectRatio="4:3"
       sizes="(max-width: 800px) 100vw, 620px"
       loading="eager"
       format="avif"
@@ -25,8 +24,8 @@ import { Icon } from "astro-icon";
     </h1>
     <p class="text-lg mt-4 text-slate-600 max-w-xl">
       Astroship is a starter template for startups, marketing websites & landing
-      pages.<wbr /> Built with Astro.build and TailwindCSS. You can quickly create
+      pages.<wbr /> Built with Astro.build and TailwindCSS. You can quickly
-      any website with this starter.
+      create any website with this starter.
     </p>
     <div class="mt-6 flex flex-col sm:flex-row gap-3">
       <Link
@@ -37,7 +36,7 @@ import { Icon } from "astro-icon";
         rel="noopener">
         <Icon class="text-white w-5 h-5" name="bx:bxs-cloud-download" />
 
-        Download for Free
+         Download for Free
       </Link>
       <Link
         size="lg"
@@ -47,7 +46,7 @@ import { Icon } from "astro-icon";
         class="flex gap-1 items-center justify-center"
         target="_blank">
         <Icon class="text-black w-4 h-4" name="bx:bxl-github" />
-        GitHub Repo
+         GitHub Repo
       </Link>
     </div>
   </div>

src/env.d.ts

@@ -1,2 +1,2 @@
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="@astrojs/image/client" />
+/// <reference types="astro/client" />

src/pages/about.astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import { Picture } from "@astrojs/image/components";
+import { Picture } from "astro:assets";
 import Layout from "@layouts/Layout.astro";
 import Container from "@components/container.astro";
 import Sectionhead from "@components/sectionhead.astro";
@@ -37,19 +37,14 @@ const publishedTeamMembers = await getCollection("team", ({ data }) => {
                 src={teamMemberEntry.data.avatar.src}
                 alt={teamMemberEntry.data.avatar.alt}
                 sizes="(max-width: 800px) 100vw, 400px"
-                widths={[200, 400]}
+                width={400}
-                aspectRatio="1:1"
+                height={400}
-                background="#ffffff"
+                class="w-full rounded-md rounded transition group-hover:-translate-y-1 group-hover:shadow-xl bg-white object-cover object-center aspect-square"
-                fit="cover"
-                position="center"
-                class="w-full rounded-md rounded transition group-hover:-translate-y-1 group-hover:shadow-xl"
               />
             </div>
 
             <div class="mt-4 text-center">
-              <h2 class="text-lg text-gray-800">
+              <h2 class="text-lg text-gray-800">{teamMemberEntry.data.name}</h2>
-                {teamMemberEntry.data.name}
-              </h2>
               <h3 class="text-sm text-slate-500">
                 {teamMemberEntry.data.title}
               </h3>

src/pages/blog.astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection } from "astro:content";
-import { Picture } from "@astrojs/image/components";
+import { Picture } from "astro:assets";
 import Layout from "@layouts/Layout.astro";
 import Container from "@components/container.astro";
 import Sectionhead from "@components/sectionhead.astro";
@@ -35,14 +35,11 @@ publishedBlogEntries.sort(function (a, b) {
                     src={blogPostEntry.data.image.src}
                     alt={blogPostEntry.data.image.alt}
                     sizes="(max-width: 800px) 100vw, 800px"
-                    widths={[200, 400, 800]}
+                    width={800}
-                    aspectRatio="16:9"
+                    height={600}
-                    background="#ffffff"
-                    fit="cover"
-                    position="center"
                     loading={index <= 2 ? "eager" : "lazy"}
                     decoding={index <= 2 ? "sync" : "async"}
-                    class="w-full rounded-md"
+                    class="w-full rounded-md object-cover object-center bg-white"
                   />
                   <div>
                     <span class="text-blue-400 uppercase tracking-wider text-sm font-medium">

tsconfig.json

@@ -1,27 +1,16 @@
 {
   "extends": "astro/tsconfigs/base",
   "compilerOptions": {
-    "strictNullChecks": true,
     "baseUrl": "src",
+    "strictNullChecks": true,
+    "types": ["astro/client"],
     "paths": {
-      "@lib/*": [
+      "@lib/*": ["lib/*"],
-        "lib/*"
+      "@utils/*": ["utils/*"],
-      ],
+      "@components/*": ["components/*"],
-      "@utils/*": [
+      "@layouts/*": ["layouts/*"],
-        "utils/*"
+      "@assets/*": ["assets/*"],
-      ],
+      "@pages/*": ["pages/*"]
-      "@components/*": [
-        "components/*"
-      ],
-      "@layouts/*": [
-        "layouts/*"
-      ],
-      "@assets/*": [
-        "assets/*"
-      ],
-      "@pages/*": [
-        "pages/*"
-      ],
     }
   }
-}
+}