feat: dependency update astro 4 (#117)

package.json

@@ -12,25 +12,23 @@
     "build": "astro build"
   },
   "devDependencies": {
-    "@astrojs/check": "^0.3.1",
-    "@astrojs/mdx": "^1.1.5",
-    "@astrojs/react": "^3.0.6",
-    "@astrojs/tailwind": "^5.0.2",
+    "@astrojs/check": "^0.3.3",
+    "@astrojs/mdx": "^2.0.1",
+    "@astrojs/react": "^3.0.7",
+    "@astrojs/tailwind": "^5.0.3",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "^20.9.4",
-    "astro": "^3.5.7",
+    "@types/node": "^20.10.5",
+    "astro": "^4.0.6",
     "embla-carousel-react": "^7.1.0",
     "github-slugger": "^2.0.0",
-    "mapbox-gl": "^2.15.0",
+    "jwt-decode": "^4.0.0",
+    "mapbox-gl": "^3.0.1",
     "react-dom": "^18.2.0",
-    "react-map-gl": "^7.1.6",
+    "react-map-gl": "^7.1.7",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "tailwindcss": "^3.3.5",
-    "typescript": "^5.3.2",
-    "vite-plugin-svgr": "^3.3.0"
-  },
-  "dependencies": {
-    "jwt-decode": "^3.1.2"
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.3",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

src/components/BackButton.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
+import ArrowIcon from "@assets/arrow.svg?react";
 
 interface Props {
   className?: string;

src/components/ButtonLink.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
-import { ReactComponent as GitHubIcon } from "@assets/GitHub.svg";
+import ArrowIcon from "@assets/arrow.svg?react";
+import GitHubIcon from "@assets/GitHub.svg?react";
 
 interface Props {
   className?: string;

src/components/CarCard.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { ReactComponent as CalendarIcon } from "@assets/fa-calendar.svg";
-import { ReactComponent as TruckIcon } from "@assets/fa-truck.svg";
-import { ReactComponent as CogIcon } from "@assets/fa-cog.svg";
-import { ReactComponent as HammerIcon } from "@assets/fa-hammer.svg";
-import { ReactComponent as ToolboxIcon } from "@assets/fa-toolbox.svg";
-import { ReactComponent as ScrewdriverIcon } from "@assets/fa-screwdriver.svg";
+import CalendarIcon from "@assets/fa-calendar.svg?react";
+import TruckIcon from "@assets/fa-truck.svg?react";
+import CogIcon from "@assets/fa-cog.svg?react";
+import HammerIcon from "@assets/fa-hammer.svg?react";
+import ToolboxIcon from "@assets/fa-toolbox.svg?react";
+import ScrewdriverIcon from "@assets/fa-screwdriver.svg?react";
 
 interface Props {
   className?: string;

src/components/Card.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
+import ArrowIcon from "@assets/arrow.svg?react";
 
 interface Props {
   title: string;

src/components/CommunityCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
+import ArrowIcon from "@assets/arrow.svg?react";
 
 interface Props {
   title: string;

src/components/Course.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
+import ArrowIcon from "@assets/arrow.svg?react";
 import GithubSlugger from "github-slugger";
 
 export interface ICourse {

src/components/Footer.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { ReactComponent as TolocarLogoSvg } from "@assets/tolocar_logo.svg";
-import { ReactComponent as GizLogoSvgEN } from "@assets/giz_logo_en.svg";
-import { ReactComponent as GizLogoSvgUA } from "@assets/giz_logo_ua.svg";
-import { ReactComponent as GizZusammenarbeitSvg } from "@assets/giz_zusammenarbeit.svg";
-import { ReactComponent as HiwwLogoSvg } from "@assets/hiww_logo.svg";
-import { ReactComponent as InstagramIcon } from "@assets/instagram.svg";
-import { ReactComponent as FacebookIcon } from "@assets/facebook.svg";
+import TolocarLogoSvg from "@assets/tolocar_logo.svg?react";
+import GizLogoSvgEN from "@assets/giz_logo_en.svg?react";
+import GizLogoSvgUA from "@assets/giz_logo_ua.svg?react";
+import GizZusammenarbeitSvg from "@assets/giz_zusammenarbeit.svg?react";
+import HiwwLogoSvg from "@assets/hiww_logo.svg?react";
+import InstagramIcon from "@assets/instagram.svg?react";
+import FacebookIcon from "@assets/facebook.svg?react";
 import type { IMenuItem } from "@interfaces/IMenu";
 
 interface Props {

src/components/HeaderLogo.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as TolocarLogoSvg } from "@assets/tolocar_logo.svg";
+import TolocarLogoSvg from "@assets/tolocar_logo.svg?react";
 
 interface Props {
   className?: string;

src/components/HeroImage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ReactComponent as TolocarHero } from "@assets/tolocar_hero.svg";
+import TolocarHero from "@assets/tolocar_hero.svg?react";
 
 interface Props {
   className?: string;

src/components/ImpactListItem.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { ReactComponent as BullseyeIcon } from "@assets/icons/bullseye.svg";
-import { ReactComponent as MicrochipIcon } from "@assets/icons/microchip.svg";
-import { ReactComponent as HandFistIcon } from "@assets/icons/hand-fist.svg";
-import { ReactComponent as ParachuteIcon } from "@assets/icons/parachute.svg";
-import { ReactComponent as BookOpenIcon } from "@assets/icons/book-open.svg";
-import { ReactComponent as ChartNetworkIcon } from "@assets/icons/chart-network.svg";
+import BullseyeIcon from "@assets/icons/bullseye.svg?react";
+import MicrochipIcon from "@assets/icons/microchip.svg?react";
+import HandFistIcon from "@assets/icons/hand-fist.svg?react";
+import ParachuteIcon from "@assets/icons/parachute.svg?react";
+import BookOpenIcon from "@assets/icons/book-open.svg?react";
+import ChartNetworkIcon from "@assets/icons/chart-network.svg?react";
 
 interface Props {
   className?: string;

src/components/InfoItem.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { ReactComponent as BullseyeArrowIcon } from "@assets/icons/bullseye-arrow.svg";
-import { ReactComponent as FeatherIcon } from "@assets/icons/feather.svg";
-import { ReactComponent as LeafIcon } from "@assets/icons/leaf.svg";
-import { ReactComponent as LightbulbOnIcon } from "@assets/icons/lightbulb-on.svg";
-import { ReactComponent as MaximizeIcon } from "@assets/icons/maximize.svg";
-import { ReactComponent as UsersIcon } from "@assets/icons/users.svg";
+import BullseyeArrowIcon from "@assets/icons/bullseye-arrow.svg?react";
+import FeatherIcon from "@assets/icons/feather.svg?react";
+import LeafIcon from "@assets/icons/leaf.svg?react";
+import LightbulbOnIcon from "@assets/icons/lightbulb-on.svg?react";
+import MaximizeIcon from "@assets/icons/maximize.svg?react";
+import UsersIcon from "@assets/icons/users.svg?react";
 
 type Icons =
   | "bullseye_arrow"

src/components/InterventionImageCarousel.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import useEmblaCarousel from "embla-carousel-react";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
-import { ReactComponent as DotIcon } from "@assets/dot-icon.svg";
+import ArrowIcon from "@assets/arrow.svg?react";
+import DotIcon from "@assets/dot-icon.svg?react";
 
 interface Props {
   images: Array<string>;

src/components/InterventionPreviewCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
-import { ReactComponent as LocationIcon } from "@assets/location-dot.svg";
+import ArrowIcon from "@assets/arrow.svg?react";
+import LocationIcon from "@assets/location-dot.svg?react";
 import type { IInterventionFrontmatter } from "@interfaces/IIntervention";
 import { Tag } from "@components";
 

src/components/InterventionSingleViewHeading.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ReactComponent as LocationIcon } from "@assets/location-dot.svg";
-import { ReactComponent as DotIcon } from "@assets/dot-icon.svg";
+import LocationIcon from "@assets/location-dot.svg?react";
+import DotIcon from "@assets/dot-icon.svg?react";
 import type { IInterventionFrontmatter } from "@interfaces/IIntervention";
 import { Tag } from "@components";
 

src/components/InterventionsListItem.tsx

@@ -1,7 +1,7 @@
 import React from "react";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
-import { ReactComponent as LocationIcon } from "@assets/location-dot.svg";
-import { ReactComponent as DotIcon } from "@assets/dot-icon.svg";
+import ArrowIcon from "@assets/arrow.svg?react";
+import LocationIcon from "@assets/location-dot.svg?react";
+import DotIcon from "@assets/dot-icon.svg?react";
 import { Tag } from "@components";
 import type { IInterventionFrontmatter } from "@interfaces/IIntervention";
 

src/components/InterventionsMap.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Map, { Marker, NavigationControl, Popup } from "react-map-gl";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
+import ArrowIcon from "@assets/arrow.svg?react";
 import type { IInterventionPoi } from "@interfaces/IIntervention";
 import useWindowSize from "../util/useWindowSize";
 import { ConditionalWrapper, TolocarMarker } from "@components";

src/components/Navigation.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { ReactComponent as TolocarLogoSvg } from "@assets/tolocar_logo.svg";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
+import TolocarLogoSvg from "@assets/tolocar_logo.svg?react";
+import ArrowIcon from "@assets/arrow.svg?react";
 import type { IMenuItem } from "@interfaces/IMenu";
 import { LanguageSwitcher } from "@components";
 import useCurrentWidth from "@util/useCurrentWidth";

src/components/NewsItem.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
-import { ReactComponent as InstagramIcon } from "@assets/instagram.svg";
+import ArrowIcon from "@assets/arrow.svg?react";
+import InstagramIcon from "@assets/instagram.svg?react";
 
 interface Props {
   href: string;

src/components/NewsSlider.tsx

@@ -3,9 +3,9 @@ import useEmblaCarousel from "embla-carousel-react";
 
 import HeadlineUnderlined from "./HeadlineUnderlined";
 import { NewsItem } from "@components";
-import { ReactComponent as ArrowIcon } from "@assets/arrow.svg";
-import { ReactComponent as InstagramIcon } from "@assets/instagram.svg";
-import { ReactComponent as FacebookIcon } from "@assets/facebook.svg";
+import ArrowIcon from "@assets/arrow.svg?react";
+import InstagramIcon from "@assets/instagram.svg?react";
+import FacebookIcon from "@assets/facebook.svg?react";
 import type { INewsItem } from "@interfaces/INews";
 
 interface Props {

src/layouts/InterventionIndex.astro

@@ -8,7 +8,7 @@ import {
   InterventionsHeader,
   InterventionsListItem,
 } from "@components";
-import { ReactComponent as BorderDashedSvg } from "@assets/border_dashed.svg";
+import BorderDashedSvg from "@assets/border_dashed.svg?react";
 import { trimAndSortInterventions } from "@util/ContentTransformer";
 import InterventionsMapDataWrapper from "../components/InterventionsMapDataWrapper.astro"
 

src/util/Airtable.ts

@@ -1,4 +1,4 @@
-import jwt_decode from "jwt-decode";
+import { jwtDecode } from "jwt-decode";
 import type { INewsItem } from "@interfaces/INews";
 import type { IInterventionPoi } from "@interfaces/IIntervention";
 import fs from "node:fs";
@@ -303,7 +303,7 @@ export const getMapPois = async (baseUrl?: string) => {
 
         if (locationJwt) {
           try {
-            locationDecoded = jwt_decode<IDecodedJwt>(locationJwt, {
+            locationDecoded = jwtDecode<IDecodedJwt>(locationJwt, {
               header: true,
             });
           } catch (e) {