feat(app): Add Pop Culture references interaction using Preact

Implementing Astro Islands concept!

astro.config.mjs

@@ -1,7 +1,10 @@
 import { defineConfig } from 'astro/config';
 
+import preact from "@astrojs/preact";
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://djsiddz.github.io",
-  base: "/space-ahead"
-});
+  base: "/space-ahead",
+  integrations: [preact()]
+});

package.json

@@ -1,7 +1,7 @@
 {
   "name": "space-ahead",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.6.0",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -10,7 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/preact": "^3.1.0",
     "@astrojs/rss": "^4.0.5",
-    "astro": "^4.3.1"
+    "astro": "^4.3.1",
+    "preact": "^10.19.4"
   }
 }

src/components/SpaceEmoji.jsx

@@ -0,0 +1,8 @@
+import { useState } from "preact/hooks";
+
+export default function SpaceEmoji({emojis}) {
+  const getRandomEmoji = () => emojis[(Math.floor(Math.random() * emojis.length))];
+  const [emoji, setEmoji] = useState(getRandomEmoji());
+
+  return <button class="kanit-regular text-balance" title="Click Me!" style={{fontSize: "1rem", background: "transparent", border: "none", cursor: "pointer", color: "whitesmoke", marginBottom: 0}} onClick={() => setEmoji(getRandomEmoji())}>{emoji}</button>;
+}

src/pages/index.astro

@@ -1,6 +1,27 @@
 ---
+import SpaceEmoji from "../components/SpaceEmoji";
 import MainLayout from "../layouts/MainLayout.astro";
+
+const emojis = [
+  "🚀 To Infinity, And Beyond!",
+  "🌌 In a galaxy far far away...",
+  "⭐ May the force be with you!",
+  "☄️ Game Over",
+  "☀️ “Time is an illusion. Lunchtime doubly so.” — Douglas Adams, H2G2",
+  "🌑 The Eagle has landed!",
+  "🛰️ 42",
+  "🤖 Wall-E",
+  "👽 E.T. Phone Home",
+  "🌠 We'll be Counting Stars",
+  "👾 Press Start",
+  "🌍 Powered by Astro & Preact",
+  "🖖 Live long and prosper!",
+];
 ---
+
 <MainLayout pageTitle="Space Ahead - An Astro Blog">
-	<h1 class="honk-ff balance-text">Space Ahead <span class="blinking">!</span></h1>
+  <h1 class="honk-ff balance-text">
+    Space Ahead <span class="blinking">!</span>
+  </h1>
+  <SpaceEmoji client:load emojis={emojis} />
 </MainLayout>

tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "astro/tsconfigs/base"
-}
+  "extends": "astro/tsconfigs/base",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  }
+}