From 5bc9c7f511f6f7a66c6fdf9d1091ee815b14a259 Mon Sep 17 00:00:00 2001
From: Ayo <ramon.aycojr@gmail.com>
Date: Fri, 29 Sep 2023 11:40:07 +0200
Subject: [PATCH] feat: add page for small building blocks

---
 src/components/Card.astro                    |  4 +-
 src/components/Footer.astro                  |  2 +-
 src/pages/index.astro                        |  5 ++-
 src/pages/showcase.astro                     | 10 ++---
 src/pages/showcase/astro-reactive-form.astro |  2 +-
 src/pages/social.astro                       |  2 +-
 src/pages/stuff.astro                        | 39 ++++++++++++++++++++
 7 files changed, 52 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/stuff.astro

diff --git a/src/components/Card.astro b/src/components/Card.astro
index c9b2bbe..263d7a3 100644
--- a/src/components/Card.astro
+++ b/src/components/Card.astro
@@ -16,8 +16,8 @@ const { href, title, rel, body, newTab = false } = Astro.props;
       {title}
       {
         newTab
-      ? (<span>&nearr;</span>)
-      : (<span>&rarr; </span>)
+      ? (<span>&nbsp;&nearr;</span>)
+      : (<span>&nbsp;&rarr;</span>)
       }
     </h2>
     <p>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index c5a2259..9ccc068 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,5 @@
 <footer>
-  <ul role="list" style="list-style:none">
+  <ul style="list-style:none">
     <li>2022 &#169; <strong>Ayo Ayco</strong>. All Rights Reserved</li>
     <li>This website does not track users.</li>
     <li><a href="https://git.sr.ht/~ayoayco/ayco.io-astro/tree">See the source code</a></li>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a671cfb..75f2345 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -11,7 +11,8 @@ let { display_name, avatar, note } = await response.json();
 const [first_name, last_name] = display_name.split(" ");
 note = note
   .replace('<span class="">ayco.io/gh/', '<span class="">')
-  .replace('<span class="">ayco.io/sh/', '<span class="">');
+  .replace('<a href="https://ayco.io/stuff" target="_blank" rel="nofollow', '<a href="/stuff"')
+  .replace('<span class="">ayco.io/stuff', '<span class="">stuff')
 ---
 
 <Layout>
@@ -39,7 +40,7 @@ note = note
   </section>
   <main>
     <section class="cards-section">
-      <ul role="list" class="cards-section__grid">
+      <ul class="cards-section__grid">
         <Card
           href="/showcase"
           title="Fun Side Projects"
diff --git a/src/pages/showcase.astro b/src/pages/showcase.astro
index 1b6c3fc..b39ba9c 100644
--- a/src/pages/showcase.astro
+++ b/src/pages/showcase.astro
@@ -11,7 +11,7 @@ import Card from "../components/Card.astro";
   <main>
     <h1>Fun <span class="text-gradient">Side Projects</span></h1>
     <p>See more of my previous projects at <a href="https://ayos.blog/projects">my blog</a>.</p>
-    <ul role="list">
+    <ul>
       <Card
         newTab
         href="https://cozy-reader.netlify.app"
@@ -22,22 +22,22 @@ import Card from "../components/Card.astro";
         newTab
         href="https://kaboom.ayco.io"
         title="Kaboom!"
-        body="A simple physics simulation with Matter.js 👨🏻‍🔬"
+        body="Simple physics simulation with Matter.js 👨🏻‍🔬"
       />
       <Card
         newTab
         href="https://mnswpr.com"
         title="Minesweeper"
-        body="Recreated the classic game that Microsoft discontinued 💣"
+        body="Recreated the classic game for the web 💣"
       />
       <Card
         href="/showcase/astro-reactive-form"
-        title="Astro Reactive Form"
+        title="Reactive Form"
         body="The reactive form component for Astro 🔥"
       />
       <Card
         href="/showcase/astro-github-stats"
-        title="Astro GitHub Stats"
+        title="GitHub Stats"
         body="Embed GitHub stats on your Astro page ✨"
       />
     </ul>
diff --git a/src/pages/showcase/astro-reactive-form.astro b/src/pages/showcase/astro-reactive-form.astro
index 56f170a..ea6efd2 100644
--- a/src/pages/showcase/astro-reactive-form.astro
+++ b/src/pages/showcase/astro-reactive-form.astro
@@ -2,7 +2,7 @@
 import Layout from "../../layouts/Layout.astro";
 import Footer from "../../components/Footer.astro";
 
-import Form, { ControlConfig, FormGroup } from "@astro-reactive/form";
+import Form, { type ControlConfig, FormGroup } from "@astro-reactive/form";
 import { Validators } from "@astro-reactive/validator";
 
 const simpleForm = new FormGroup([
diff --git a/src/pages/social.astro b/src/pages/social.astro
index 7cc6aa1..c0723b4 100644
--- a/src/pages/social.astro
+++ b/src/pages/social.astro
@@ -10,7 +10,7 @@ import Footer from "../components/Footer.astro";
 >
   <main>
     <h1>Social <span class="text-gradient">Links</span></h1>
-    <ul role="list" class="link-card-grid">
+    <ul class="link-card-grid">
       <Card
         newTab={true}
         rel="me"
diff --git a/src/pages/stuff.astro b/src/pages/stuff.astro
new file mode 100644
index 0000000..6f79db1
--- /dev/null
+++ b/src/pages/stuff.astro
@@ -0,0 +1,39 @@
+---
+import Layout from "../layouts/Layout.astro";
+import Footer from "../components/Footer.astro";
+import Card from "../components/Card.astro";
+---
+
+<Layout
+  title="Stuff: Smaller Building Blocks"
+  description="See demos of side projects Ayo Ayco created"
+>
+  <main>
+    <h1 class="text-gradient">Stuff</h1>
+    <p>Because software is not just a huge pile of code, but a combination of reusable stuff...</p>
+    <ul>
+      <Card
+        newTab
+        href="https://ayco.io/n/web-component-base"
+        title="Web Component Base"
+        body="This provides a minimal vanilla JS base class that aims to reduce the complexity of creating reactive custom elements."
+      />
+      <Card
+        newTab
+        href="https://ayco.io/n/@ayco/astro-resume"
+        title="Astro Resume"
+        body="This facilitates the creation and usage of global, immutable data for Astro apps"
+      />
+    </ul>
+    <Footer />
+  </main>
+</Layout>
+
+<style>
+  ul {
+    list-style: none;
+    display: grid;
+    gap: 1rem;
+    padding: 0;
+  }
+</style>