Navbar now uses preact instead

7 files changed, 44 insertions, 44 deletions

diff --git a/astro.config.mjs b/astro.config.mjs
index e7e5cf0..b538d31 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,17 +1,17 @@
-import {defineConfig, passthroughImageService} from 'astro/config';
+import { defineConfig, passthroughImageService } from 'astro/config';
 import icon from "astro-icon";
-
-import vue from '@astrojs/vue';
 import vercel from "@astrojs/vercel/serverless";
 
+import preact from "@astrojs/preact";
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://alee14.me',
-  integrations: [icon(), vue()],
+  integrations: [icon(), preact()],
   output: "server",
   adapter: vercel(),
   image: {
-    service: passthroughImageService(),
+    service: passthroughImageService()
   },
   markdown: {
     shikiConfig: {
@@ -24,7 +24,7 @@ export default defineConfig({
       wrap: true,
       // Add custom transformers: https://shikiji.netlify.app/guide/transformers
       // Find common transformers: https://shikiji.netlify.app/packages/transformers
-      transformers: [],
-    },
-  },
-});
+      transformers: []
+    }
+  }
+});
\ No newline at end of file
diff --git a/bun.lockb b/bun.lockb
index c2e9010..0b32480 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index 3c8f80c..1ca0c76 100644
--- a/package.json
+++ b/package.json
@@ -10,15 +10,15 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/preact": "^3.1.0",
     "@astrojs/rss": "^4.0.3",
     "@astrojs/vercel": "7.0.1",
-    "@astrojs/vue": "^4.0.8",
     "@iconify-json/fa6-brands": "^1.1.18",
     "@vitejs/plugin-vue": "^5.0.3",
     "astro": "4.2.4",
     "astro-icon": "^1.0.2",
     "markdown-it": "^14.0.0",
-    "sanitize-html": "^2.11.0",
-    "vue": "^3.4.15"
+    "preact": "^10.19.3",
+    "sanitize-html": "^2.11.0"
   }
 }
\ No newline at end of file
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 0000000..cda6b67
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,29 @@
+import { Component } from 'preact';
+import '../styles/Navbar.css';
+
+class Navbar extends Component {
+  toggleNav = () => {
+    document.querySelector('.nav-toggle').classList.toggle('active');
+    document.querySelector('.nav-list').classList.toggle('show');
+  }
+
+  render() {
+    return (
+      <nav>
+        <button class="nav-toggle" aria-label="toggle navigation" onClick={this.toggleNav}>
+          <span class='hamburger'></span>
+        </button>
+        <ul class="nav-list">
+          <li><a href="/" class="nav-link" onClick={this.toggleNav}>Home</a></li>
+          <li><a href="/projects" class="nav-link" onClick={this.toggleNav}>Projects</a></li>
+          <li><a href="/blog" class="nav-link" onClick={this.toggleNav}>Blog</a></li>
+          <li><a href="/guestbook" class="nav-link" onClick={this.toggleNav}>Guestbook</a></li>
+          <li><a href="https://archive.alee14.me" class="nav-link" onClick={this.toggleNav}>Archive</a></li>
+          <li><a href="/contacts" class="nav-link" onClick={this.toggleNav}>Contacts</a></li>
+        </ul>
+      </nav>
+    );
+  }
+}
+
+export default Navbar;
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
deleted file mode 100644
index 3ff5d5e..0000000
--- a/src/components/Navbar.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <nav>
-    <button class="nav-toggle" aria-label="toggle navigation" @click="toggleNav">
-      <span class='hamburger'></span>
-    </button>
-    <ul class="nav-list">
-      <li><a href="/" class="nav-link" @click="toggleNav">Home</a></li>
-      <li><a href="/projects" class="nav-link" @click="toggleNav">Projects</a></li>
-      <li><a href="/blog" class="nav-link" @click="toggleNav">Blog</a></li>
-      <li><a href="/guestbook" class="nav-link" @click="toggleNav">Guestbook</a></li>
-      <li><a href="https://archive.alee14.me" class="nav-link" @click="toggleNav">Archive</a></li>
-      <li><a href="/contacts" class="nav-link" @click="toggleNav">Contacts</a></li>
-    </ul>
-  </nav>
-</template>
-
-<script>
-export default {
-  methods: {
-    toggleNav() {
-      document.querySelector('.nav-toggle').classList.toggle('active');
-      document.querySelector('.nav-list').classList.toggle('show');
-    }
-  }
-}
-</script>
-
-<style scoped>
-@import "../styles/Navbar.css";
-</style>
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 17e9a92..db94dfd 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -6,7 +6,7 @@ interface Props {
 
 const { title = "Andrew Lee", description = "Andrew Lee Website" } = Astro.props;
 import { ViewTransitions } from 'astro:transitions';
-import Navbar from '../components/Navbar.vue';
+import Navbar from '../components/Navbar.jsx';
 const date = new Date();
 ---
 
diff --git a/tsconfig.json b/tsconfig.json
index 5d5dcd6..99df2e6 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "astro/tsconfigs/base",
   "compilerOptions": {
-    "jsx": "preserve"
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
   }
 }
\ No newline at end of file