andrew
/
homepage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactored articles page and added a search bar.

This commit is contained in:
Andrew Lalis 2023-09-26 09:29:55 -04:00
parent 5f0a22bab6
commit c2fde5de29
5 changed files with 154 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
articles.html
View File

@ -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>

2
contact.html
View File

@ -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">

2
projects.html
View File

@ -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">

44
scripts/articles-search.js Normal file
View File

@ -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);

42
styles/style.css
View File

@ -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;
}