From f0a9566c24ecc3c7e701b9a08f485106492510d8 Mon Sep 17 00:00:00 2001
From: rhpidfyre <brandon@rhpidfyre.io>
Date: Sun, 2 Feb 2025 03:04:26 -0500
Subject: [PATCH] astro setup for react is ready

---
 src/components/header.astro |  2 +-
 src/layouts/Webpage.astro   |  1 +
 src/pages/index.astro       | 25 ++++++++++++++++++++-----
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/header.astro b/src/components/header.astro
index 0d2ed05..c02ac3c 100644
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -6,7 +6,7 @@ import { Links } from '../ts/links';
 <header>
 	<Button href={Links.Self} display="[rhpidfyre.io]" color="black"/>
 	<section>
-		<Button href={Links.Git} display="REPOS"/>
+		<Button href={Links.Git} display="GIT"/>
 		<Button href={Links.Cloud} display="CLOUD"/>
 		<Button href={Links.Gsm} display="GSM"/>
 	</section>
diff --git a/src/layouts/Webpage.astro b/src/layouts/Webpage.astro
index 18444cf..6a38fce 100644
--- a/src/layouts/Webpage.astro
+++ b/src/layouts/Webpage.astro
@@ -32,6 +32,7 @@ const {title} = Astro.props
 		font-size: 15px;
 		letter-spacing: 2px;
 		cursor: text;
+		text-wrap: nowrap;
 	}
 	:root {
 		color-scheme: dark;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c6ccd28..d9b9114 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import Webpage from '../layouts/Webpage.astro';
 import { Links } from '../ts/links';
+import Shell from '../components/react/shell';
 ---
 
 <Webpage title="Home">
@@ -22,19 +23,23 @@ import { Links } from '../ts/links';
 			<p><span class="red">But, you will not be limited at exploring my services which you can find by navigating towards the top-right.</span></p>
 			<p><span class="red">=================================================</span></p>
 		</noscript>
+		<Shell client:only/>
 	</main>
 </Webpage>
 
-<style lang="scss">
+<style lang="scss" is:global>
 	@use "../scss/variables";
 
 	@mixin text-styles {
-		.red   { color: rgb(200,0,0); }
-		.green { color: rgb(0,200,0); }
-		.blue  { color: rgb(0,0,200); }
+		.red   { color: rgb(200, 0, 0); }
+		.green { color: rgb(0, 200, 0); }
+		.blue  { color: rgb(0, 0, 200); }
+		.cyan  { color: rgb(18,167,148); }
 	}
 
-	:global(main) {
+	.shell-prompt { display: flex; }
+
+	main {
 		width: 100vw;
 		height: calc(99.3vh - variables.$header-Y - variables.$footer-Y);
 		padding: 5px;
@@ -49,9 +54,19 @@ import { Links } from '../ts/links';
 				font-size: inherit;
 				&:hover { text-decoration: underline; }
 			}
+			span { font-size: inherit }
 		}
 		.return {
 			margin-top: 25px;
 		}
 	}
+	input {
+		font-size: 1.2rem;
+		background-color: transparent;
+		border: 0;
+		outline: 0;
+		width: 90%;
+		/* Pester me when this gets undrafted */
+		caret-shape: block;
+	}
 </style>
\ No newline at end of file