Lightweight Archive Template
Do you like our archive setup with the filterable tags and little entry cards? Borrow our template!
Should work on most beginner websites.
This is a stripped out version of [THIS] by Matthew McAdams.
Code:
CSS:
/*The tagged database code.*/
/*This is for the section holding the items in the database.*/
.item-list {
margin: 2.5rem 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(1fr));
/*The minmax indicates the amount the boxes will stretch and squish before spilling into a new row. This is set to just be one per row. If you wanted it to be multiple boxes in a row, set it to something like (30em, 1fr) instead, with the em changing the size of the box relative to the size of the text. This can cause overflow issues, just fyi. You may prefer a different measurement type, such as %. Check out w3 schools section on css units and play around.*/
grid-gap: 1rem;
}
/*This is the element for the entries themselves*/
/* Use the border section to change the appearance of the border such as color. You can also add a background as you might for any element.*/
.card {
list-style: none;
margin: 0;
padding: 1rem;
border: 1px solid #d7dce0;
}
/*This is the tags. Yes. They do have to match the tags as indicated elsewhere.*/
.tags {
margin: 0;
padding: 0;
display: flex;
gap: 1rem;
}
/*Use the border property to change the appearance of the border of the tag. Again you can add a background if you want.*/
.tags li {
padding: 0.5rem 1rem;
border: 1px solid #d7dce0;
list-style: none;
}
/*This is the element that makes the dropdown menu.*/
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* hides the native UI */
width: calc(25% - 1rem);
border: 1px solid #d7dce0;
background: white;
padding: 0.5rem 2rem 0.5rem 1rem;
display: block;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8" fill="none" stroke="black"><path d="M7.5 3L4 6 .5 3"/></svg>'); /*this is the icon for the dropdown menu, replace with your own. Can be removed entirely if you want */
background-size: 0.7em;
background-repeat: no-repeat;
background-position: right 1rem center;
}
label {
display: block;
text-transform: uppercase;
margin: 0 0 1rem;
letter-spacing: 0.1rem;
}
[hidden] { display: none !important; }
HTML:
<section class="list-section">
<h2>Sortable Archive</h2>
<form>
<label for="filter">Sort by tag</label>
<select name="filter">
<option>All</option>
<option>Example Tag</option>
<option>Test</option>
</select>
<!-- You must put ALL of the tags that you are using below in here in the option tags. Then use the SAME tags on the post to correspond. NOTE. This works like control F, Test spits out Test1 Test2 Test Test, etc-->
</form>
<ul class="item-list">
<li class="card" data-tags="['Example Tag', 'Test']"> <!-- Put the tags of the post here and in the tags class -->
<h3>Title 1</h3>
<p>Description</p>
<p>[<a href="#">Link</a>] [<a href="#">Alternate Link</a>]</p> <!-- Place your links here -->
<ul class="tags">
<li>Example Tag</li>
<li>Test</li>
</ul>
</li>
<li class="card" data-tags="['Test']">
<h3>Title 2</h3>
<p>Description</p>
<p>[<a href="#">Link</a>] [<a href="#">Alternate Link</a>]</p>
<ul class="tags">
<li>Test2</li>
</ul>
</li>
<li class="card" data-tags="['Example Tag', 'Test']">
<h3>Title 3</h3>
<p>This code was HEAVILY based on [<a href="https://www.mattmcadams.com/posts/2024/js-tag-filter/">THIS</a>] template and modified for use as a filterable archive.</p>
<p>[<a href="#">Link</a>] [<a href="#">Alternate Link</a>]</p>
<ul class="tags">
<li>Example Tag</li>
<li>Test1</li>
</ul>
</li>
<li class="card" data-tags="['Example Tag']">
<h3>Title 4</h3>
<p>Description</p>
<p>[<a href="#">Link</a>] [<a href="#">Alternate Link</a>]</p>
<ul class="tags">
<li>Example Tag</li>
</ul>
</li>
<li class="card" data-tags="['Test']">
<h3>Title 5</h3>
<p>Description</p>
<p>[<a href="#">Link</a>] [<a href="#">Alternate Link</a>]</p>
<ul class="tags">
<li>Test3</li>
</ul>
</ul>
</section>
Javascript:
<script>
// Add to the bottom of the body section
// Function to sort a list by tag
function sortList() {
// Get all sections with filterable lists
let sections = document.querySelectorAll(".list-section");
// Set up logic for each section
sections.forEach(section => {
// Get list of all list items
let items = section.querySelectorAll(".item-list > li");
// Get the filter select input and add listener for the change event
let select = section.querySelector("select");
select.addEventListener("change", sort);
// Actually sorting the cards
function sort() {
// Look at each item in the array
items.forEach(element => {
// Remove the "hidden" attribute if the item has the tag selected or if the selection is "All"
// Otherwise, add the hidden attribute to the element
if (element.dataset.tags.includes(select.value) | select.value == "All") {
element.removeAttribute("hidden");
} else { element.setAttribute("hidden", true); }
});
};
// perform the sort funtion on initialization to cover edge cases, such as the user refreshing the page
sort();
});
}
// Initialize the list sorting function. This should be called on every page where a filterable list is available.
sortList();
</script>