switched to npm

astro.config.mjs

@@ -3,9 +3,11 @@ import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import svelte from "@astrojs/svelte";
 
+import mdx from "@astrojs/mdx";
+
 // https://astro.build/config
 export default defineConfig({
-    integrations: [tailwind(), svelte()],
+    integrations: [tailwind(), svelte(), mdx()],
     server: {
         port: 8008,
         hostname: "RythonDev",

package.json

@@ -10,6 +10,7 @@
         "astro": "astro"
     },
     "dependencies": {
+        "@astrojs/mdx": "^4.3.0",
         "@astrojs/svelte": "7.0.4",
         "@astrojs/tailwind": "6.0.0",
         "astro": "5.3.0",

src/components/sections/IntroComponent.svelte

@@ -1,17 +1,12 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import Socials from "../elements/Socials.svelte";
+    // import Socials from "../elements/Socials.svelte";
 
     // Roles
-    let roles: string[] = [
+    let roles = $state(["Developer", "Streamer", "Content creator", "Student"]);
-        "Developer",
-        "Streamer",
-        "Content creator",
-        "Student",
-    ];
     let roleState: string = $state("");
     let role: string;
-    let counter: number = 0;
+    let counter: number = $state(0);
     let roleEmpty: boolean = true;
     const roleInterval: number = 50;
     const roleUpdateDelay: number = 2000; // delay after updating
@@ -164,7 +159,7 @@
             <b>data science</b>.
         </p>
         <div class="mt-5 flex flex-row items-center justify-center">
-            <Socials />
+            <!-- <Socials /> -->
         </div>
     </div>
 </div>

svelte.config.js

@@ -1,10 +1,8 @@
 import { vitePreprocess } from "@astrojs/svelte";
 
 export default {
-    preprocess: vitePreprocess(),
+    preprocess: vitePreprocess({script:true}),
     compilerOptions: {
-        compatibility: {
+
-            componentApi: 4,
-        },
     },
 };