From c1b2794611548ef1fa30055a91926c4074f2f63e Mon Sep 17 00:00:00 2001
From: Andrew Lee <alee14498@protonmail.com>
Date: Thu, 8 Feb 2024 21:41:36 -0500
Subject: Fixed overflow for mobile, loading in gh projects

---
 src/components/GitHubProjects.jsx               | 42 ++++++++++++++-----------
 src/data/projects.json                          |  2 +-
 src/layouts/Default.astro                       |  2 +-
 src/pages/downloads/osft-software-archive.astro |  6 +++-
 4 files changed, 31 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/components/GitHubProjects.jsx b/src/components/GitHubProjects.jsx
index c4e805b..7497b4a 100644
--- a/src/components/GitHubProjects.jsx
+++ b/src/components/GitHubProjects.jsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'preact/hooks';
 const GitHubProjects = ({ username, isOrganization }) => {
   const [repos, setRepos] = useState([]);
   const [error, setError] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
   const [currentPage, setCurrentPage] = useState(1);
   const reposPerPage = 10;
 
@@ -40,6 +41,7 @@ const GitHubProjects = ({ username, isOrganization }) => {
       setRepos([]);
     }
 
+    setIsLoading(false);
     return allRepos;
   };
 
@@ -47,34 +49,38 @@ const GitHubProjects = ({ username, isOrganization }) => {
     fetchRepos().then(setRepos);
   }, [username, isOrganization]);
 
-  // Get current repos
   const indexOfLastRepo = currentPage * reposPerPage;
   const indexOfFirstRepo = indexOfLastRepo - reposPerPage;
   const currentRepos = repos.slice(indexOfFirstRepo, indexOfLastRepo);
 
-  // Change page
   const nextPage = () => setCurrentPage(currentPage + 1);
   const prevPage = () => setCurrentPage(currentPage - 1);
 
   return (
-    <div>
-      {error && <div class="error">{error}</div>}
-      <div class="grid">
-        {currentRepos.map((repo) => (
-          <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>
       <div>
-        {currentPage > 1 && <button class="button margin" onClick={prevPage}>Previous</button>}
-        {currentPage < Math.ceil(repos.length / reposPerPage) && <button class="button margin" onClick={nextPage}>Next</button>}
+        {isLoading ? (
+            <div>Loading...</div>
+        ) : (
+            <>
+              {error && <div class="error">{error}</div>}
+              <div class="grid">
+                {currentRepos.map((repo) => (
+                    <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>
+              <div>
+                {currentPage > 1 && <button class="button margin" onClick={prevPage}>Previous</button>}
+                {currentPage < Math.ceil(repos.length / reposPerPage) && <button class="button margin" onClick={nextPage}>Next</button>}
+              </div>
+            </>
+        )}
       </div>
-    </div>
   );
 };
 
diff --git a/src/data/projects.json b/src/data/projects.json
index c5e5f52..5b5b0a7 100644
--- a/src/data/projects.json
+++ b/src/data/projects.json
@@ -39,7 +39,7 @@
   },
   {
     "name": "Snug Cup",
-    "description": "Snug Cup was a school project that I made with my classmates back in 2021.",
+    "description": "A school project that I made with my classmates in high school.",
     "links": [
       {
         "name": "Website",
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 15d3c78..db559c0 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -43,7 +43,7 @@ const date = new Date();
 		<slot />
 		<footer>
 			<p>Made with {Astro.generator} and Hosted on Vercel</p>
-			<p>Copyright &copy; {date.getFullYear()} Andrew Lee. <a href="https://github.com/Alee14/personal-website">View source code.</a></p>
+			<p>Copyright &copy; {date.getFullYear()} Andrew Lee. <a href="https://github.com/Alee14/personal-website" target="_blank">View source code.</a></p>
 		</footer>
 	</div>
 	</body>
diff --git a/src/pages/downloads/osft-software-archive.astro b/src/pages/downloads/osft-software-archive.astro
index c106cef..039fc2e 100644
--- a/src/pages/downloads/osft-software-archive.astro
+++ b/src/pages/downloads/osft-software-archive.astro
@@ -69,7 +69,7 @@ import '../../styles/cards.css';
                 <li>Zeon OS 0.2</li>
             </ul>
         </div>
-        <div>
+        <div class="checksum">
             <p>MD5: d14f7bfd17fa66ada3d48020deffcce0</p>
             <p>SHA512: b481d73f839c2ad99b6d6502d5735f416fbcc38dbac811c3d939845d319fecf8b15dd4ff1728ed96abe19077be19527df3692c54751bb81c201e58934d016527</p>
             <p>SHA256: c7ad3f799f14e610f8931f87e2612385ec39e2662308e7005e10715f9e94c6a0</p>
@@ -101,4 +101,8 @@ import '../../styles/cards.css';
     a {
         font-size: 1.5em;
     }
+
+    .checksum {
+        overflow-wrap: break-word;
+    }
 </style>
-- 
cgit v1.2.3