Merge pull request #4 from tuatmcc/feat/react

add react, navigation

astro.config.ts

@@ -1,11 +1,17 @@
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import sitemap from '@astrojs/sitemap';
+import mdx from "@astrojs/mdx";
+import react from "@astrojs/react";
+import sitemap from "@astrojs/sitemap";
+import { defineConfig } from "astro/config";
 
 import tailwind from "@astrojs/tailwind";
 
 // https://astro.build/config
 export default defineConfig({
-  site: 'https://example.com',
-  integrations: [mdx(), sitemap(), tailwind()]
+	site: "https://example.com",
+	integrations: [
+		mdx(),
+		sitemap(),
+		tailwind(),
+		react(),
+	],
 });

package.json

@@ -12,13 +12,18 @@
   "dependencies": {
     "@astrojs/check": "^0.9.2",
     "@astrojs/mdx": "^3.1.3",
+    "@astrojs/react": "^3.6.2",
     "@astrojs/rss": "^4.0.7",
     "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@biomejs/biome": "^1.8.3",
     "@fontsource-variable/jetbrains-mono": "^5.0.21",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "astro": "^4.13.1",
     "pagefind": "^1.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.7",
     "typescript": "^5.5.4"
   }

src/components/Navigation/Navigation.tsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+
+export default function Navigation() {
+	const [active, setActive] = useState(false);
+	const links = [
+		{ href: "/", label: "Home" },
+		{ href: "/blog", label: "Blog" },
+		{ href: "/about", label: "About" },
+	];
+
+	return (
+		<header>
+			<button
+				type="button"
+				className="fixed top-0 right-0 p-2"
+				aria-label="Menu Button"
+				onClick={() => setActive((prev) => !prev)}
+			>
+				<svg
+					className=""
+					width="40"
+					height="40"
+					viewBox="0 0 24 24"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<title>Menu</title>
+					<path
+						d="M4 6L20 6"
+						stroke="black"
+						stroke-width="2"
+						stroke-linecap="round"
+						className="horizon1"
+					/>
+					<path
+						d="M4 12L20 12"
+						stroke="black"
+						stroke-width="2"
+						stroke-linecap="round"
+						className="horizon2"
+					/>
+					<path
+						d="M4 18L20 18"
+						stroke="black"
+						stroke-width="2"
+						stroke-linecap="round"
+						className="horizon3"
+					/>
+				</svg>
+			</button>
+			<nav
+				className={`fixed pl-16 grid top-0 bottom-0 right-0 w-[500px] max-w-[80vw] transition-transform ${active ? "translate-x-0" : "translate-x-full"}`}
+			>
+				<svg
+					className="text-gray-400 absolute top-0 left-0 z-[-1]"
+					height="100%"
+					viewBox="0 0 160 80"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<title>Deco</title>
+					<polygon
+						points="0 0 0 10 5 15 5 65 0 70 0 80 160 80 160 0"
+						fill="currentColor"
+					/>
+				</svg>
+				<div className="flex flex-col items-end bg-gray-400 p-4 pt-16">
+					<button
+						type="button"
+						className="fixed z-10 top-0 right-0 p-2"
+						aria-label="Menu Button"
+						onClick={() => setActive((prev) => !prev)}
+					>
+						<svg
+							className=""
+							width="40"
+							height="40"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<title>Menu</title>
+							<path
+								d="M4 18L20 12"
+								stroke="black"
+								stroke-width="2"
+								stroke-linecap="round"
+								className="diagonal1"
+							/>
+							<path
+								d="M4 6L20 12"
+								stroke="black"
+								stroke-width="2"
+								stroke-linecap="round"
+								className="diagonal2"
+							/>
+						</svg>
+					</button>
+					<h2>
+						<a href="/" className="text-white font-bold text-4xl font-orbitron">
+							MCC
+						</a>
+					</h2>
+					<ul className="flex flex-col gap-8 items-end mt-16">
+						{links.map((link) => (
+							<li key={link.href}>
+								<a
+									href={link.href}
+									target="_blank"
+									rel="noreferrer"
+									className="text-white text-3xl font-orbitron"
+								>
+									{link.label}
+								</a>
+							</li>
+						))}
+					</ul>
+				</div>
+			</nav>
+		</header>
+	);
+}

src/content/config.ts

@@ -2,7 +2,6 @@ import { defineCollection, z } from "astro:content";
 
 const blog = defineCollection({
 	type: "content",
-	// Type-check frontmatter using a schema
 	schema: z.object({
 		title: z.string(),
 		description: z.string(),

src/pages/index.astro

@@ -1,51 +1,9 @@
 ---
-import "tailwindcss/lib/css/preflight.css";
-import BaseHead from '../components/BaseHead.astro';
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
-import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
+import Navigation from "../components/Navigation/Navigation"
+import Layout from "../layouts/Layout.astro"
 ---
 
-<!doctype html>
-<html lang="en">
-	<head>
-    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} path="" pagefind={true} og={{enabled: true}} />
-	</head>
-	<body>
-		<Header />
-		<main>
-			<h1>🧑‍🚀 Hello, Astronaut!</h1>
-			<p>
-				Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
-				template serves as a lightweight, minimally-styled starting point for anyone looking to build
-				a personal website, blog, or portfolio with Astro.
-			</p>
-			<p>
-				This template comes with a few integrations already configured in your
-				<code>astro.config.mjs</code> file. You can customize your setup with
-				<a href="https://astro.build/integrations">Astro Integrations</a> to add tools like Tailwind,
-				React, or Vue to your project.
-			</p>
-			<p>Here are a few ideas on how to get started with the template:</p>
-			<ul>
-				<li>Edit this page in <code>src/pages/index.astro</code></li>
-				<li>Edit the site header items in <code>src/components/Header.astro</code></li>
-				<li>Add your name to the footer in <code>src/components/Footer.astro</code></li>
-				<li>Check out the included blog posts in <code>src/content/blog/</code></li>
-				<li>Customize the blog post page layout in <code>src/layouts/BlogPost.astro</code></li>
-			</ul>
-			<p>
-				Have fun! If you get stuck, remember to <a href="https://docs.astro.build/"
-					>read the docs
-				</a> or <a href="https://astro.build/chat">join us on Discord</a> to ask questions.
-			</p>
-			<p>
-				Looking for a blog template with a bit more personality? Check out <a
-					href="https://github.com/Charca/astro-blog-template"
-					>astro-blog-template
-				</a> by <a href="https://twitter.com/Charca">Maxi Ferreira</a>.
-			</p>
-		</main>
-		<Footer />
-	</body>
-</html>
+<Layout title="MCC" path="" og={{enabled: true}} pagefind={false}>
+  <Navigation client:only="react" />
+  <slot />
+</Layout>

src/styles/global.css

@@ -1,3 +1,4 @@
+@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap");
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

tailwind.config.mjs

@@ -1,8 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
-}
+  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+  theme: {
+    extend: {},
+    fontFamily: {
+      sans: ["Hiragino Kaku Gothic ProN", "sans-serif"],
+      orbitron: ["Orbitron", "sans-serif"],
+    },
+  },
+  plugins: [],
+};