Merge pull request #72 from bliotti/astro-version-3

update all deps. to latest, Astro major version bump 3.3.3

README.md

@@ -2,6 +2,14 @@
 
 Build the Future with Plebnet.dev on bitcoin and lightning.
 
+## IMPORTANT BUILD NOTE: As of 31 OCT 2023
+
+Use Node version - lts/hydrogen -> v18.16.1
+```sh
+ npm install astro
+ npm install
+```
+
 This is the main website.
 
 <img width="1199" alt="Screenshot 2023-06-18 at 9 37 38 PM" src="https://github.com/plebnet-dev/website/assets/73979971/546c69d5-97a3-48ce-8045-5eaa02b7baac">
@@ -20,7 +28,7 @@ This is the main website.
 - ✅ Integration with **Tailwind CSS** ([@astrojs/tailwind](https://docs.astro.build/en/guides/integrations-guide/tailwind/)) supporting **Dark mode**.
 - ✅ **Production-ready** scores in [Lighthouse](https://web.dev/measure/) and [PageSpeed Insights](https://pagespeed.web.dev/) reports.
 - ✅ **Fast and SEO friendly blog** with automatic **RSS feed** ([@astrojs/rss](https://docs.astro.build/en/guides/rss/)), [**MDX** support](https://docs.astro.build/en/guides/integrations-guide/mdx/), **Categories & Tags**, **Social Share**, ...
-- ✅ **Image optimization** ([@astrojs/images](https://docs.astro.build/en/guides/integrations-guide/image/)) and **Font optimization**.
+- ✅ **Image optimization** ([astro:assets](https://docs.astro.build/en/guides/integrations-guide/image/)) and **Font optimization**.
 - ✅ Generation of **project sitemap** based on your routes ([@astrojs/sitemap](https://docs.astro.build/en/guides/integrations-guide/sitemap/)).
 - ✅ **Open Graph tags** for social media sharing.
 - ✅ **Analytics** built-in Google Analytics, and Splitbee integration.
@@ -269,7 +277,7 @@ publishDate: 2023-10-07T20:22:00-05:00
 title: Your Blog Post Title
 author: Your Name
 description: Short description on blog
-image: /images/your_image_here.png
+image: ../../images/your_image_here.png
 categories:
   - Conferences
 tags:

astro.config.mjs

@@ -3,7 +3,6 @@ import { fileURLToPath } from 'url';
 import { defineConfig } from 'astro/config';
 import tailwind from '@astrojs/tailwind';
 import sitemap from '@astrojs/sitemap';
-import image from '@astrojs/image';
 import mdx from '@astrojs/mdx';
 import partytown from '@astrojs/partytown';
 import compress from 'astro-compress';
@@ -39,25 +38,23 @@ export default defineConfig({
     remarkPlugins: [readingTimeRemarkPlugin]
   },
   integrations: [tailwind({
-    config: {
-      applyBaseStyles: false
+      config: {
+        applyBaseStyles: false
     }
-  }), sitemap(), image({
-    serviceEntryPoint: '@astrojs/image/sharp'
-  }), mdx(), ...whenExternalScripts(() => partytown({
-    config: {
-      forward: ['dataLayer.push']
+  }), sitemap(), mdx(), ...whenExternalScripts(() => partytown({
+        config: {
+          forward: ['dataLayer.push']
     }
-  })), compress({
-    CSS: true,
-    HTML: {
-      removeAttributeQuotes: false
-    },
-    Image: false,
-    JavaScript: true,
-    SVG: false,
-    Logger: 1
-  }), svelte()],
+      })), compress({
+      CSS: true,
+      HTML: {
+        removeAttributeQuotes: false
+      },
+      Image: false,
+      JavaScript: true,
+      SVG: false,
+      Logger: 1
+    }), svelte()],
   vite: {
     resolve: {
       alias: {

package.json

@@ -13,47 +13,47 @@
     "lint:eslint": "eslint . --ext .js,.ts,.astro"
   },
   "devDependencies": {
-    "@astrojs/image": "^0.17.0",
-    "@astrojs/mdx": "^0.19.7",
-    "@astrojs/partytown": "^1.2.3",
-    "@astrojs/rss": "^2.4.3",
-    "@astrojs/sitemap": "^1.3.3",
-    "@astrojs/tailwind": "^3.1.3",
-    "@astrolib/analytics": "^0.3.0",
-    "@astrolib/seo": "^0.4.0",
-    "@fontsource/inter": "^4.5.15",
-    "@tailwindcss/typography": "^0.5.9",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
-    "astro": "^2.9.3",
+    "@astrojs/mdx": "^1.1.2",
+    "@astrojs/partytown": "^2.0.1",
+    "@astrojs/rss": "^3.0.0",
+    "@astrojs/sitemap": "^3.0.2",
+    "@astrojs/tailwind": "^5.0.2",
+    "@astrolib/analytics": "^0.4.2",
+    "@astrolib/seo": "^0.6.0",
+    "@tailwindcss/typography": "^0.5.10",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
+    "astro": "^3.4.0",
     "astro-icon": "^0.8.1",
-    "eslint": "^8.42.0",
-    "eslint-plugin-astro": "^0.27.1",
+    "eslint": "^8.52.0",
+    "eslint-plugin-astro": "^0.29.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
-    "limax": "2.1.0",
-    "mdast-util-to-string": "^3.2.0",
-    "prettier": "^2.8.8",
-    "prettier-plugin-astro": "^0.10.0",
+    "limax": "4.1.0",
+    "mdast-util-to-string": "^4.0.0",
+    "prettier": "^3.0.3",
+    "prettier-plugin-astro": "^0.12.0",
     "reading-time": "^1.5.0",
-    "sharp": "^0.32.1",
-    "svgo": "2.8.0",
+    "sharp": "^0.32.6",
+    "svgo": "^2.8.0",
     "tailwind-merge": "^1.14.0",
-    "tailwindcss": "^3.3.2",
-    "typescript": "^5.1.3"
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2"
   },
   "engines": {
-    "node": ">=16.12.0"
+    "node": ">=18.14.1"
   },
   "dependencies": {
-    "@astrojs/node": "^5.2.0",
-    "@astrojs/svelte": "^3.0.0",
-    "@astrojs/vercel": "^3.5.0",
-    "astro-compress": "^2.0.8",
+    "@astrojs/check": "^0.2.1",
+    "@astrojs/node": "^6.0.3",
+    "@astrojs/svelte": "^4.0.3",
+    "@astrojs/vercel": "^5.0.2",
+    "@fontsource-variable/inter": "^5.0.15",
     "@sendgrid/mail": "^7.7.0",
-    "@supabase/supabase-js": "2.0",
-    "@sveltejs/adapter-vercel": "^3.0.1",
+    "@supabase/supabase-js": "2.38",
+    "@sveltejs/adapter-vercel": "^3.0.3",
+    "astro-compress": "^2.1.5",
     "dotenv": "^16.3.1",
-    "svelte": "^3.59.2",
-    "svelte-awesome-icons": "^0.4.12"
+    "svelte": "^4.2.2",
+    "svelte-awesome-icons": "^0.6.6"
   }
 }

sandbox.config.json

@@ -5,7 +5,6 @@
   "template": "node",
   "container": {
     "port": 3000,
-    "startScript": "start",
-    "node": "16"
+    "startScript": "start"
   }
 }

src/components/CustomStyles.astro

@@ -1,6 +1,5 @@
 ---
-import '@fontsource/inter/variable.css';
-
+import "@fontsource-variable/inter"
 // Nunito
 // Dosis
 ---

src/components/blog/GridItem.astro

@@ -1,5 +1,5 @@
 ---
-import { Picture } from '@astrojs/image/components';
+import { Picture } from 'astro:assets';
 
 import { BLOG } from '~/config.mjs';
 import type { Post } from '~/types';
@@ -28,7 +28,6 @@ const image = await findImage(post.image);
             height={224}
             sizes="(max-width: 900px) 400px, 900px"
             alt={post.title}
-            aspectRatio="16:9"
             loading="lazy"
             decoding="async"
           />

src/components/blog/ListItem.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import { Picture } from '@astrojs/image/components';
+import { Picture } from 'astro:assets';
 import PostTags from '~/components/blog/Tags.astro';
 
 import { BLOG } from '~/config.mjs';
@@ -32,7 +32,6 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.permalink, 'post') : '';
               widths={[400, 900]}
               sizes="(max-width: 900px) 400px, 900px"
               alt={post.title}
-              aspectRatio="16:9"
               loading="lazy"
               decoding="async"
             />

src/components/blog/SinglePost.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import { Picture } from '@astrojs/image/components';
+import { Picture } from 'astro:assets';
 
 import PostTags from '~/components/blog/Tags.astro';
 import SocialShare from '~/components/common/SocialShare.astro';
@@ -59,7 +59,6 @@ const { post, url } = Astro.props;
           sizes="(max-width: 900px) 400px, 900px"
           alt={post.description || ''}
           loading="eager"
-          aspectRatio={16 / 9}
           width={900}
           height={506}
           loading="eager"

src/components/common/MetaTags.astro

@@ -1,10 +1,10 @@
 ---
 import { AstroSeo } from '@astrolib/seo';
 // import { GoogleAnalytics } from '@astrolib/analytics';
-import { getImage } from '@astrojs/image';
+import { getImage } from 'astro:assets';
 
 import { SITE } from '~/config.mjs';
-import { MetaSEO } from '~/types';
+import { type MetaSEO } from '~/types';
 import { getCanonical, getAsset } from '~/utils/permalinks';
 import { getRelativeUrlByFilePath } from '~/utils/directories';
 

src/components/widgets/Content.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import { Picture } from '@astrojs/image/components';
+import { Picture } from 'astro:assets';
 
 interface Item {
   title: string;
@@ -94,7 +94,6 @@ const {
                   height={500}
                   widths={[400, 768]}
                   sizes="(max-width: 768px) 100vw, 432px"
-                  aspectRatio="500:500"
                   {...image}
                 />
               )}

src/components/widgets/Hero.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import { Picture } from '@astrojs/image/components';
+import { Picture } from 'astro:assets';
 
 interface CallToAction {
   text: string;
@@ -94,7 +94,6 @@ const {
                   class="mx-auto rounded-md w-full"
                   widths={[400, 768, 1024, 2040]}
                   sizes="(max-width: 767px) 400px, (max-width: 1023px) 768px, (max-width: 2039px) 1024px, 2040px"
-                  aspectRatio={1024 / 576}
                   loading="eager"
                   width={1024}
                   height={576}

src/components/widgets/Hero2.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import { Picture } from '@astrojs/image/components';
+import { Picture } from 'astro:assets';
 
 interface CallToAction {
   text: string;
@@ -42,14 +42,16 @@ const {
         }
         <div class="max-w-3xl mx-auto lg:max-w-none">
           {subtitle && <p class="text-xl text-muted mb-6 dark:text-slate-300" set:html={subtitle} />}
-          <div class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-start lg:m-0 lg:max-w-7xl">
+          <div
+            class="max-w-xs sm:max-w-md m-auto flex flex-nowrap flex-col sm:flex-row sm:justify-center gap-4 lg:justify-start lg:m-0 lg:max-w-7xl"
+          >
             {
               callToAction && (
                 <div class="flex w-full sm:w-auto">
                   {typeof callToAction === 'string' ? (
                     <Fragment set:html={callToAction} />
                   ) : (
-                    <a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href} > 
+                    <a class="btn btn-primary sm:mb-0 w-full" href={callToAction?.href}>
                       {callToAction?.icon && (
                         <>
                           <Icon name={callToAction.icon} class="w-5 h-5 mr-1 -ml-1.5" />{' '}
@@ -94,7 +96,6 @@ const {
                   class="mx-auto rounded-md w-full"
                   widths={[400, 900]}
                   sizes="(max-width: 900px) 400px, 900px"
-                  aspectRatio={600 / 600}
                   loading="eager"
                   decoding="async"
                   width={600}

src/components/widgets/Steps.astro

@@ -1,6 +1,6 @@
 ---
 import { Icon } from 'astro-icon';
-import { Picture } from '@astrojs/image/components';
+import { Picture } from 'astro:assets';
 
 interface Item {
   title: string;
@@ -62,7 +62,6 @@ const {
               class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
               widths={[400, 768]}
               sizes="(max-width: 768px) 100vw, 432px"
-              aspectRatio="432:768"
               width={432}
               height={768}
               {...image}

src/content/config.ts

@@ -1,11 +1,10 @@
 import { z, defineCollection } from 'astro:content';
 
 const post = defineCollection({
-  schema: z.object({
+  schema: ({ image }) => z.object({
     title: z.string(),
     description: z.string().optional(),
-    image: z.string().optional(),
-
+    image: image(),
     canonical: z.string().url().optional(),
 
     publishDate: z.date().or(z.string()).optional(),

src/content/post/about.md

@@ -3,7 +3,7 @@ publishDate: 2023-06-16T00:00:00Z
 title: About Plebnet.dev
 description: A story about Plebnet.dev and why we exist
 excerpt: A story about Plebnet.dev and why we exist
-image: /images/code_image.jpg
+image:  /src/content/post/_images/code_image.jpg
 tags:
   - about
   - plebnet.dev
@@ -28,4 +28,4 @@ By partnering with us, you're not just joining another developer space – you'r
 
 Made with 🧡 by [Bitkarrot](https://github.com/bitkarrot/) in collaboration with the [Plebnet-Playground](https://github.com/PLEBNET-PLAYGROUND/) crew.
 
-![plebnet.dev](/images/logo-dark-horiz-transparent.png)
+![plebnet.dev](/src/content/post/_images/logo-dark-horiz-transparent.png)

src/content/post/common_git_issues.md

@@ -3,7 +3,7 @@ publishDate: 2023-10-06T20:22:00-05:00
 title: Common Errors and Mistakes When Using GitHub and Git
 author: anonymous
 description: Common Errors and Mistakes When Using GitHub and Git
-image: /images/cityscape.webp
+image:  /src/content/post/_images/cityscape.webp
 category: Education
 tags:
     - git

src/content/post/crafting_your_story.md

@@ -3,7 +3,7 @@ publishDate: 2023-10-07T20:22:00-05:00
 title: Crafting Your Story - Paving Your Way to a Bitcoin Career
 author: Brandon Sauceda
 description: Learn how to share your unique journey into Bitcoin.
-image: /images/bitcoin_community_growth.png
+image:  /src/content/post/_images/bitcoin_community_growth.png
 category: Education
 tags:
   - Bitcoin

src/content/post/create_value.md

@@ -3,7 +3,7 @@ publishDate: 2023-08-28T20:22:00-05:00
 title: Instead of Seeking Value, Focus on Creating It
 author: Bitkarrot
 description: Instead of Seeking Value, Focus on Creating It
-image: /images/purpleimg.webp
+image:  /src/content/post/_images/purpleimg.webp
 category: Opinion
 tags:
     - value

src/content/post/events.md

@@ -2,7 +2,7 @@
 publishDate: 2023-10-21T00:00:00Z
 title: Events
 description: Events at Plebnet.dev
-image: /images/events.jpg
+image: /src/content/post/_images/events.jpg
 categories:
   - News and Updates
 tags:

src/content/post/first_pr.md

@@ -3,7 +3,7 @@ publishDate: 2023-10-15T20:22:00-05:00
 title: A Guide to Crafting an Excellent First Pull Request on GitHub
 author: anonymous
 description: A Guide to Crafting an Excellent First Pull Request on GitHub
-image: /images/tools.jpg
+image:  /src/content/post/_images/tools.jpg
 category: Education
 tags:
     - git