From c2fde5de29dc991b444483e97fe50b96d90babc5 Mon Sep 17 00:00:00 2001 From: andrewlalis Date: Tue, 26 Sep 2023 09:29:55 -0400 Subject: [PATCH] Refactored articles page and added a search bar. --- articles.html | 98 +++++++++++++++++++++++++------------- contact.html | 2 +- projects.html | 2 +- scripts/articles-search.js | 44 +++++++++++++++++ styles/style.css | 42 ++++++++++++++++ 5 files changed, 154 insertions(+), 34 deletions(-) create mode 100644 scripts/articles-search.js diff --git a/articles.html b/articles.html index 5b69106..bf873c2 100644 --- a/articles.html +++ b/articles.html @@ -40,40 +40,74 @@

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.

+
+ +

+ Search for matching articles based on their title or topics. +

+ +
+
+ +

A Beginner's Guide to Searching with Lucene

+
+ + Java + Tutorial +
+

+ A brief overview of how to use Lucene to create an index for some content, and search that index to find relevant content quickly. +

+ + +

DSH - Easier Scripting in D

+
+ + D Lang + Showcase +
+

+ An overview of my DSH library, that simplifies some of the more tedious parts of writing shell-like scripts in D. +

+ + +

The D Programming Language: Does it have a future?

+
+ + D Lang + Discussion +
+

+ My take on the heated discussion that is the D language's future. +

+ + +

Spring's Open-Session-in-View & Transactions

+
+ + Java + Spring + Tutorial +
+

+ How to (properly) structure your Spring-Boot API to avoid obscure ORM headaches. +

+ + +

2D Games with Java & Swing

+
+ + Java + Tutorial +
+

+ Beginner guide to making simple 2D games using Java's Swing UI framework and a game loop. +

+ +
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
DateArticle
A Beginner's Guide to Searching with Lucene
DSH - Easier Scripting in D
The D Programming Language: Does it have a future?
Spring's Open-Session-in-View & Transactions
2D Games with Java & Swing
+ diff --git a/contact.html b/contact.html index f1145b7..eb1b94e 100644 --- a/contact.html +++ b/contact.html @@ -2,7 +2,7 @@ - Andrew's Homepage - Contact + Andrew's Contact Info diff --git a/projects.html b/projects.html index 5792526..8bc822e 100644 --- a/projects.html +++ b/projects.html @@ -2,7 +2,7 @@ - Andrew's Homepage - Projects + Andrew's Projects diff --git a/scripts/articles-search.js b/scripts/articles-search.js new file mode 100644 index 0000000..74bc137 --- /dev/null +++ b/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); diff --git a/styles/style.css b/styles/style.css index c5c7a0a..6187bd1 100644 --- a/styles/style.css +++ b/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; +}