Update projects page to display Alee14-Projects GitHub repositories

2 files changed, 29 insertions, 3 deletions

diff --git a/src/components/Guestbook.jsx b/src/components/Guestbook.jsx
index 41d0271..a959b5a 100644
--- a/src/components/Guestbook.jsx
+++ b/src/components/Guestbook.jsx
@@ -47,7 +47,7 @@ class Guestbook extends Component {
                                 <h1>Message from: {g.name}</h1>
                                 <small>{formatDate(g.created)}</small>
                                 <div dangerouslySetInnerHTML={{__html: sanitizeHtml(g.message)}}/>
-                                {g.website && <a href={g.website}>Website</a>}
+                                {g.website && <a href={g.website} target="_blank">Website</a>}
                             </article>
                         ))}
                     </div>
diff --git a/src/pages/projects.astro b/src/pages/projects.astro
index 33452c8..668217c 100644
--- a/src/pages/projects.astro
+++ b/src/pages/projects.astro
@@ -2,6 +2,19 @@
 import Page from "../layouts/Page.astro";
 import projects from "../data/projects.json";
 import "../styles/cards.css";
+
+let repos;
+let error = null;
+try {
+    const alee14_projects = await fetch('https://api.github.com/orgs/alee14-projects/repos');
+    repos = await alee14_projects.json();
+    repos = repos.filter(repo => !repo.fork);
+} catch (err) {
+    console.error('Failed to fetch projects:', err);
+    error = err.message;
+    // You can set repos to an empty array if the fetch fails
+    repos = [];
+}
 ---
 <Page title="Projects" description="Things that I have been working on in the past, and present">
     <main>
@@ -24,8 +37,21 @@ import "../styles/cards.css";
                 })
             }
         </div>
-        <h2>Archived Repositories</h2>
-        <p><a href="https://github.com/alee14-projects" target="_blank">Alee Productions/AleeCorp Software</a></p>
+        <h2>AleeCorp/Alee Productions GitHub Repositories</h2>
+        { error && <div class="error">{error}</div> }
+        <div class="grid">
+            {repos.map((repo) => {
+                return (
+                        <article class="card">
+                            <h1>{repo.name}</h1>
+                            <p>{repo.description}</p>
+                            <div class="row">
+                                <a href={repo.html_url} target="_blank">Repository</a>
+                            </div>
+                        </article>
+                )
+            })}
+        </div>
     </main>
 </Page>
 <style>