remove stream refs, add icons from ktrain5369's site, add socials buttons

Author: KTrain5169

.github/workflows/checks.yml

@@ -1,5 +1,4 @@
 ## Worked on during a community livestream!
-## Go watch it @ twitch.tv/trhrichard if it's still live!
 
 name: Lint & check commits
 

.github/workflows/deploy.yml

@@ -1,5 +1,4 @@
 ## Worked on during a community livestream!
-## Go watch it @ twitch.tv/trhrichard if it's still live!
 
 name: Build & deploy to GitHub Pages
 

package.json

@@ -7,13 +7,16 @@
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "build-dev": "astro build && astro preview"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/vue": "^5.0.6",
     "@tailwindcss/vite": "^4.0.2",
     "astro": "^5.2.3",
+    "lucide-astro": "^0.473.0",
+    "simple-icons-astro": "^14.5.0",
     "tailwindcss": "^4.0.2",
     "typescript": "^5.5.4",
     "vue": "^3.4.35"

pnpm-lock.yaml

@@ -1,6 +1,5 @@
 ---
 // Worked on during a community livestream!
-// Go watch it @ twitch.tv/trhrichard if it's still live!
 ---
 
 <header class="bg-purple-800 p-2.5">

src/components/Header.astro

@@ -0,0 +1,39 @@
+---
+import * as LucideIcons from 'lucide-astro';
+import * as SimpleIcons from 'simple-icons-astro';
+
+// Props passed to the Icon component
+const { icon, iconType = 'lucide', size = 24, color = 'white' } = Astro.props;
+
+// Helper types to restrict icon name to valid keys
+type LucideIconKeys = keyof typeof LucideIcons;
+type SimpleIconKeys = keyof typeof SimpleIcons;
+
+const toPascalCase = (str: string) =>
+  str.replace(/(^\w|-\w)/g, (match) => match.replace('-', '').toUpperCase());
+
+let IconComponent: any = null;
+
+if (iconType.toLowerCase() === 'lucide') {
+  // Ensure icon is a valid key for LucideIcons and cast
+  const lucideIconName = toPascalCase(icon); // Convert lucideIconNames to PascalCase
+  IconComponent = LucideIcons[lucideIconName as LucideIconKeys];
+} else if (iconType.toLowerCase() === 'simple') {
+  // Ensure icon is a valid key for SimpleIcons and cast
+  const simpleIconName = toPascalCase(icon); // Convert simpleIconNames to PascalCase
+  IconComponent = SimpleIcons[simpleIconName as SimpleIconKeys];
+}
+
+// Handle the case when the icon is not found
+if (!IconComponent) {
+  console.error(`Icon ${icon} not found for ${iconType}`);
+}
+---
+
+{iconType.toLowerCase() === 'lucide' && IconComponent && (
+  <IconComponent color={color} size={size} />
+)}
+
+{iconType.toLowerCase() === 'simple' && IconComponent && (
+  <IconComponent color={color} size={size} />
+)}

src/components/Icon.astro

@@ -0,0 +1,9 @@
+---
+const { platform, url, iconName, iconType, color = 'white' } = Astro.props;
+import Icon from './Icon.astro';
+---
+
+<a href={url} class="flex items-center gap-2 no-underline">
+  <Icon icon={iconName} iconType={iconType} size={24} color={color} />
+  <span>{platform}</span>
+</a>

src/components/SocialLink.astro

@@ -6,7 +6,7 @@ interface Props {
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
 
-import "./src/styles/global.css"
+import "../styles/global.css"
 
 const { title } = Astro.props;
 ---
@@ -26,7 +26,4 @@ const { title } = Astro.props;
 		<slot />
 		<Footer />
 	</body>
-</html>
-
-
-<!-- guess I can't convert the above -->
+</html>

src/layouts/Layout.astro

@@ -1,14 +1,26 @@
 ---
 // Worked on during a community livestream!
-// Go watch it @ twitch.tv/trhrichard if it's still live!
 import Layout from '../layouts/Layout.astro';
+import SocialLink from '../components/SocialLink.astro';
 ---
 
 <Layout title="KTools2202">
 	<main class="mx-auto p-4 w-full max-w-[800px] text-white text-lg leading-6 items-center justify-center">
 		<h1 class="text-4xl font-bold text-center mb-4">KTools2202</h1>
 		<h2 class="text-2xl text-center mb-4">This is the landing page for KTools2202.</h2>
 		<br>
+		<div class="flex lg:flex-row flex-col justify-center gap-3.5 mb-5">
+		<button class="block mx-auto px-5 py-2.5 bg-black text-white text-center border-none cursor-pointer">
+			<SocialLink platform="GitHub" iconName="github" iconType="lucide" url="https://github.com/KTools2202" />
+		</button>
+		<button class="block mx-auto px-5 py-2.5 bg-orange-700 text-white text-center border-none cursor-pointer">
+			<SocialLink platform="GitLab" iconName="gitlab" iconType="lucide" url="https://gitlab.com/KTools2202" />
+		</button>
+		<button class="block mx-auto px-5 py-2.5 bg-indigo-700 text-white text-center border-none cursor-pointer">
+			<SocialLink platform="Discord" iconName="discord" iconType="simple" url="https://discord.gg/G6YvWhctjk" />
+		</button>
+		</div>
+		<br>
 		<p class="text-3xl font-bold italic text-center mb-4">(this is a work in progress)</p>
 	</main>
 </Layout>

src/pages/index.astro

@@ -1,6 +1,5 @@
 ---
 // Worked on during a community livestream!
-// Go watch it @ twitch.tv/trhrichard if it's still live!
 import Layout from '../layouts/Layout.astro';
 import Card from '../components/Card.astro';