Refactored articles page and added a search bar.

articles.html

@@ -40,40 +40,74 @@
             <p>
                 Although I don't generally write much, sometimes I'll find something interesting, or something that I notice a significant number of people could benefit from reading about. In that case, it'll most likely end up on this page as an article.
             </p>
+            <div class="jsonly">
+                <input type="search" placeholder="Search for articles..." style="width: 100%; margin: 0; font-size: medium;">
+                <p style="font-size: smaller; margin: 0 0 0.5em 0;">
+                    Search for matching articles based on their <strong>title</strong> or <strong>topics</strong>.
+                </p>
+                <button id="reset-search-button" style="margin-bottom: 0.5em; display: none;">Reset Search</button>
+            </div>
+            <div id="articles-container">
+                <a class="article-card" href="articles/beginner-guide-to-apache-lucene.html">
+                    <h3>A Beginner's Guide to Searching with Lucene</h3>
+                    <div>
+                        <time datetime="2023-02-06">February 6<sup>th</sup>, 2023</time>
+                        <span>Java</span>
+                        <span>Tutorial</span>
+                    </div>
+                    <p>
+                        A brief overview of how to use Lucene to create an index for some content, and search that index to find relevant content quickly.
+                    </p>
+                </a>
+                <a class="article-card" href="articles/dsh-easier-scripting-in-d.html">
+                    <h3>DSH - Easier Scripting in D</h3>
+                    <div>
+                        <time datetime="2022-05-05">May 5<sup>th</sup>, 2022</time>
+                        <span>D Lang</span>
+                        <span>Showcase</span>
+                    </div>
+                    <p>
+                        An overview of my <em>DSH</em> library, that simplifies some of the more tedious parts of writing shell-like scripts in D.
+                    </p>
+                </a>
+                <a class="article-card" href="articles/d-prospects-for-future.html">
+                    <h3>The D Programming Language: Does it have a future?</h3>
+                    <div>
+                        <time datetime="2022-03-26">March 26<sup>th</sup>, 2022</time>
+                        <span>D Lang</span>
+                        <span>Discussion</span>
+                    </div>
+                    <p>
+                        My take on the heated discussion that is the D language's future.
+                    </p>
+                </a>
+                <a class="article-card" href="articles/spring-osiv-transactions.html">
+                    <h3>Spring's Open-Session-in-View & Transactions</h3>
+                    <div>
+                        <time datetime="2021-05-09">May 9<sup>th</sup>, 2021</time>
+                        <span>Java</span>
+                        <span>Spring</span>
+                        <span>Tutorial</span>
+                    </div>
+                    <p>
+                        How to (properly) structure your Spring-Boot API to avoid obscure ORM headaches.
+                    </p>
+                </a>
+                <a class="article-card" href="articles/java-swing-2d-game.html">
+                    <h3>2D Games with Java & Swing</h3>
+                    <div>
+                        <time datetime="2021-05-09">May 9<sup>th</sup>, 2021</time>
+                        <span>Java</span>
+                        <span>Tutorial</span>
+                    </div>
+                    <p>
+                        Beginner guide to making simple 2D games using Java's Swing UI framework and a game loop.
+                    </p>
+                </a>
+            </div>
         </article>
-
-        <table class="basic-table">
-            <thead>
-                <tr>
-                    <th>Date</th>
-                    <th>Article</th>
-                </tr>
-            </thead>
-            <tbody>
-                <!-- Note: Add a new row here for each article. Sorted with newest first. -->
-                <tr>
-                    <td><time datetime="2023-02-06" style="white-space: nowrap;">February 6<sup>th</sup>, 2023</time></td>
-                    <td><a href="articles/beginner-guide-to-apache-lucene.html">A Beginner's Guide to Searching with Lucene</a></td>
-                </tr>
-                <tr>
-                    <td><time datetime="2022-05-05" style="white-space: nowrap;">May 5<sup>th</sup>, 2022</time></td>
-                    <td><a href="articles/dsh-easier-scripting-in-d.html">DSH - Easier Scripting in D</a></td>
-                </tr>
-                <tr>
-                    <td><time datetime="2022-03-26" style="white-space: nowrap;">March 26<sup>th</sup>, 2022</time></td>
-                    <td><a href="articles/d-prospects-for-future.html">The D Programming Language: Does it have a future?</a></td>
-                </tr>
-                <tr>
-                    <td><time datetime="2021-05-09" style="white-space: nowrap;">May 9<sup>th</sup>, 2021</time></td>
-                    <td><a href="articles/spring-osiv-transactions.html">Spring's Open-Session-in-View & Transactions</a></td>
-                </tr>
-                <tr>
-                    <td><time datetime="2021-05-09" style="white-space: nowrap;">May 9<sup>th</sup>, 2021</time></td>
-                    <td><a href="articles/java-swing-2d-game.html">2D Games with Java & Swing</a></td>
-                </tr>
-            </tbody>
-        </table>
     </main>
+    <script class="jsonly" src="scripts/articles-search.js"></script>
 </body>
 
 </html>

contact.html

@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-    <title>Andrew's Homepage - Contact</title>
+    <title>Andrew's Contact Info</title>
     <meta charset="utf-8">
     <meta name="description" content="Contact information for Andrew Lalis.">
     <meta name="viewport" content="width=device-width, initial-scale=1">

projects.html

@@ -2,7 +2,7 @@
 <html lang="en">
 
 <head>
-    <title>Andrew's Homepage - Projects</title>
+    <title>Andrew's Projects</title>
     <meta charset="utf-8">
     <meta name="description" content="The Homepage of Andrew Lalis.">
     <meta name="viewport" content="width=device-width, initial-scale=1">

scripts/articles-search.js

@@ -0,0 +1,44 @@
+const searchInput = document.getElementsByTagName("input")[0];
+const articlesContainer = document.getElementById("articles-container");
+const resetSearchButton = document.getElementById("reset-search-button");
+
+function setAllArticlesVisible() {
+    for (let i = 0; i < articlesContainer.children.length; i++) {
+        articlesContainer.children[i].style.display = "block";
+    }
+}
+
+function articleCardMatches(card, s) {
+    const title = card.getElementsByTagName("h3")[0].innerText.trim().toUpperCase();
+    const topicSpans = [].slice.call(card.getElementsByTagName("span"));
+    const topics = topicSpans.map(span => span.innerText.trim().toUpperCase());
+    for (let i = 0; i < topics.length; i++) {
+        if (topics[i].includes(s)) return true;
+    }
+    return title.includes(s);
+}
+
+function doArticleSearch() {
+    let searchValue = searchInput.value;
+    if (searchValue === null || searchValue.length < 1 || searchValue.trim().length < 1) {
+        setAllArticlesVisible();
+        resetSearchButton.style.display = "none";
+        return;
+    }
+    searchValue = searchValue.trim().toUpperCase();
+    for (let i = 0; i < articlesContainer.children.length; i++) {
+        const card = articlesContainer.children[i];
+        const displayStyle = articleCardMatches(card, searchValue) ? "block" : "none";
+        card.style.display = displayStyle;
+    }
+    resetSearchButton.style.display = "inline-block";
+}
+
+function resetArticleSearch() {
+    searchInput.value = "";
+    setAllArticlesVisible();
+    resetSearchButton.style.display = "none";
+}
+
+searchInput.addEventListener("keyup", doArticleSearch);
+resetSearchButton.addEventListener("click", resetArticleSearch);

styles/style.css

@@ -3,6 +3,7 @@
     --background-color-2: #e0e0e0;
     --background-color-3: #d1d1d1;
     --text-color: #1c1c1c;
+    --text-color-2: #4d4d4d;
     --link-color: #236936;
     --code-color: #e02929;
 }
@@ -12,6 +13,7 @@
     --background-color-2: #222222;
     --background-color-3: #2b2b2b;
     --text-color: #e8e8e8;
+    --text-color-2: #a5a5a5;
     --link-color: #46d169;
     --code-color: #ff2f2f;
 }
@@ -101,3 +103,43 @@ code {
     border: 1px solid var(--background-color-3);
     padding: 0.25em;
 }
+
+/* The article-card is used to show a simple preview for an article. */
+.article-card {
+    display: block;
+    text-decoration: none;
+    color: var(--text-color);
+    background-color: var(--background-color-2);
+    padding: 0.5em;
+}
+
+.article-card + .article-card {
+    margin-top: 1em;
+}
+
+.article-card h3 {
+    font-family: "IBM Plex Sans", sans-serif;
+    font-size: larger;
+    margin: 0;
+}
+
+.article-card:hover h3 {
+    text-decoration: underline;
+}
+
+.article-card > div > time {
+    font-size: smaller;
+    color: var(--text-color-2);
+}
+
+.article-card > div > span {
+    font-size: smaller;
+    color: var(--link-color);
+    background-color: var(--background-color-3);
+    padding: 0 0.25em 0.25em 0.25em;
+    border-radius: 0.5em;
+}
+
+.article-card p {
+    margin: 0.5em 0 0 0;
+}