Merge pull request #76 from saulopaiva/feature/upgrade-astro-to-3

Upgrade astro to 3

.nvmrc

@@ -0,0 +1 @@
+v20.5.1

README.md

@@ -38,7 +38,7 @@ Clone this theme locally and run any of the following commands in your terminal:
 | Command           | Action                                       |
 | :---------------- | :------------------------------------------- |
 | `npm install`     | Installs dependencies                        |
-| `npm run dev`     | Starts local dev server at `localhost:3000`  |
+| `npm run dev`     | Starts local dev server at `localhost:4321`  |
 | `npm run build`   | Build your production site to `./dist/`      |
 | `npm run preview` | Preview your build locally, before deploying |
 

astro.config.mjs

@@ -6,5 +6,7 @@ import compress from 'astro-compress'
 // https://astro.build/config
 export default defineConfig({
   compressHTML: true,
-  integrations: [mdx(), tailwind(), compress()],
+  integrations: [mdx(), tailwind({
+    applyBaseStyles: false,
+  }), compress()],
 })

package.json

@@ -1,7 +1,7 @@
 {
   "name": "accessible-astro-starter",
   "description": "An Accessible Starter Theme for Astro including several accessiblity features and tools to help you build faster.",
-  "version": "2.0.7",
+  "version": "3.0.0",
   "author": "Mark Teekman",
   "homepage": "https://accessible-astro.netlify.app/",
   "scripts": {
@@ -11,13 +11,13 @@
     "preview": "astro preview"
   },
   "devDependencies": {
-    "@astrojs/mdx": "^0.19.7",
-    "@astrojs/partytown": "^1.0.3",
-    "@astrojs/tailwind": "^3.0.0",
+    "@astrojs/mdx": "^1.0.2",
+    "@astrojs/partytown": "^2.0.0",
+    "@astrojs/tailwind": "^5.0.0",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
     "accessible-astro-components": "^2.2.0",
-    "astro": "^2.0.1",
+    "astro": "^3.0.10",
     "astro-compress": "^2.0.6",
     "astro-icon": "^0.7.3",
     "eslint": "^8.33.0",

src/components/Navigation.astro

@@ -1,12 +1,14 @@
 ---
 import ResponsiveToggle from './ResponsiveToggle.astro'
 import { DarkMode } from 'accessible-astro-components'
+import { Image } from "astro:assets"
+import logo from "../assets/img/logo.svg"
 ---
 
 <div id="main-navigation" class="is-desktop py-8">
   <div class="container">
     <a href="/" class="flex items-center gap-2 !no-underline">
-      <img src={(await import('../assets/img/logo.svg')).default} alt="Your Logo" width="47" height="37" />
+      <Image src={logo} alt="Your Logo" width="47" height="37" />
       <span class="font-bold">Accessible Astro</span>
     </a>
     <div class="wrapper">

src/layouts/DefaultLayout.astro

@@ -1,4 +1,5 @@
 ---
+import '@astrojs/tailwind/base.css'
 import '../assets/scss/globals.scss'
 import SiteMeta from '../components/SiteMeta.astro'
 import Header from '../components/Header.astro'