Add new blog post about the site's overhaul in April 2024
This commit is contained in:
Helen Chong
parent
f532620ce2
commit
003689bb05
|
|
@ -380,6 +380,16 @@
|
|||
|
||||
<ul class="content-list">
|
||||
|
||||
<li>
|
||||
<p class="content-list__title">
|
||||
<a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">
|
||||
April 2024 Leilukin's Hub Overhaul with Eleventy | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>21 April 2024</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="content-list__title">
|
||||
<a href="/shrines/starwarskotor/resources/tslrcm-m478ep-modules-music/">
|
||||
|
|
|
|||
|
|
@ -379,6 +379,17 @@
|
|||
|
||||
<ul class="blog__posts">
|
||||
|
||||
<li class="blog__post">
|
||||
<h2 class="blog__post--title">
|
||||
<a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">
|
||||
April 2024 Leilukin's Hub Overhaul with Eleventy
|
||||
|
||||
</a>
|
||||
</h2>
|
||||
<time>21 April 2024</time>
|
||||
<p>I rebuilt Leilukin's Hub with the static site genertor Eleventy in April 2024.</p>
|
||||
</li>
|
||||
|
||||
<li class="blog__post">
|
||||
<h2 class="blog__post--title">
|
||||
<a href="/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/">
|
||||
|
|
@ -423,17 +434,6 @@
|
|||
<p>A thank-you post for the people who have supported my Steam review of A Summer's End — Hong Kong 1986.</p>
|
||||
</li>
|
||||
|
||||
<li class="blog__post">
|
||||
<h2 class="blog__post--title">
|
||||
<a href="/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/">
|
||||
My Cassette Beasts Pombomb Plushie Arrived!
|
||||
|
||||
</a>
|
||||
</h2>
|
||||
<time>13 October 2023</time>
|
||||
<p>The official Cassette Beasts Pombomb plushie I purchased finally arrived.</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -379,6 +379,17 @@
|
|||
|
||||
<ul class="blog__posts">
|
||||
|
||||
<li class="blog__post">
|
||||
<h2 class="blog__post--title">
|
||||
<a href="/blog/posts/2023-10-13-my-cassette-beasts-pombomb-plushie-arrived/">
|
||||
My Cassette Beasts Pombomb Plushie Arrived!
|
||||
|
||||
</a>
|
||||
</h2>
|
||||
<time>13 October 2023</time>
|
||||
<p>The official Cassette Beasts Pombomb plushie I purchased finally arrived.</p>
|
||||
</li>
|
||||
|
||||
<li class="blog__post">
|
||||
<h2 class="blog__post--title">
|
||||
<a href="/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/">
|
||||
|
|
@ -423,17 +434,6 @@
|
|||
<p>I have signed up to join the Dracula Daily hype.</p>
|
||||
</li>
|
||||
|
||||
<li class="blog__post">
|
||||
<h2 class="blog__post--title">
|
||||
<a href="/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">
|
||||
Leilukin's Hub Now has a Blog!
|
||||
|
||||
</a>
|
||||
</h2>
|
||||
<time>28 January 2023</time>
|
||||
<p>I have finally set up a blog on my own website.</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -379,6 +379,17 @@
|
|||
|
||||
<ul class="blog__posts">
|
||||
|
||||
<li class="blog__post">
|
||||
<h2 class="blog__post--title">
|
||||
<a href="/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">
|
||||
Leilukin's Hub Now has a Blog!
|
||||
|
||||
</a>
|
||||
</h2>
|
||||
<time>28 January 2023</time>
|
||||
<p>I have finally set up a blog on my own website.</p>
|
||||
</li>
|
||||
|
||||
<li class="blog__post">
|
||||
<h2 class="blog__post--title">
|
||||
<a href="/blog/posts/2023-01-26-new-year-leilukins-hub-redesign/">
|
||||
|
|
|
|||
|
|
@ -416,7 +416,7 @@
|
|||
<p>I never spent a single cent on Nexus Mods, and my mods are all passion projects, so I never expected to enjoy any extra benefits or privileges on Nexus Mods.</p>
|
||||
<p>That said, I cannot complain about receiving a premium membership on a website I use regularly for free, even though the unlimited mod download speed is the only benefit I am really interested in. After all, I do download a lot of mods for various video games from Nexus Mods.</p>
|
||||
|
||||
<ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/">Finally Beat A Bug's Life The Video Game — 24 Years Later</a></li>
|
||||
<ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/">Finally Beat A Bug's Life The Video Game — 24 Years Later</a></li><li>Next Post: <a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">April 2024 Leilukin's Hub Overhaul with Eleventy</a></li>
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,645 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr" id="page-top">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
|
||||
|
||||
<meta property="og:title" content="April 2024 Leilukin's Hub Overhaul with Eleventy | Blog">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="About giving my website a new design in light of a new year of 2023.">
|
||||
<meta name="generator" content="Eleventy v2.0.1">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy (conflicted)/">
|
||||
<meta property="og:site_name" content="Leilukin's Hub">
|
||||
<meta property="og:locale" content="en_MY">
|
||||
<meta property="og:description" content="About giving my website a new design in light of a new year of 2023.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy (conflicted)/">
|
||||
<meta name="twitter:description" content="About giving my website a new design in light of a new year of 2023.">
|
||||
<link rel="canonical" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy (conflicted)/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts/noto-sans/noto-sans.css">
|
||||
|
||||
|
||||
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
|
||||
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||
|
||||
|
||||
<title>
|
||||
April 2024 Leilukin's Hub Overhaul with Eleventy | Blog | Leilukin's Hub
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="hero__top-bar hidden"></div>
|
||||
<div class="hero__img">
|
||||
|
||||
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
width: 100%;
|
||||
background-color: var(--clr-hero-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero__top-bar {
|
||||
background-color: var(--clr-navbar-bg);
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
||||
max-height: 16rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const hero = document.querySelector(".hero");
|
||||
const todayEvent = getTodayEvent();
|
||||
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
||||
const headerImgEl = document.querySelector(".hero__img");
|
||||
|
||||
|
||||
if (todayEvent != "No event") {
|
||||
heroTopBarEl.classList.remove('hidden');
|
||||
|
||||
if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") {
|
||||
heroTopBarEl.innerHTML = getBlurbHtml(todayEvent);
|
||||
} else {
|
||||
headerImgEl.classList.add(getBanner(todayEvent));
|
||||
heroTopBarEl.innerHTML = getBlurbHtml(todayEvent);
|
||||
}
|
||||
}
|
||||
|
||||
function getTodayEvent() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
|
||||
if (month == 3 && day == 1)
|
||||
return "Zero Discrimination Day";
|
||||
else if (month == 3 && day == 31)
|
||||
return "Trans Day of Visibility";
|
||||
else if (month == 4 && day == 6)
|
||||
return "International Asexuality Day";
|
||||
else if (month == 4 && day == 26)
|
||||
return "Lesbian Visibility Day";
|
||||
else if (month == 5 && day == 17)
|
||||
return "IDAHOBIT";
|
||||
else if (month == 5 && day == 19)
|
||||
return "Agender Pride Day";
|
||||
else if (month == 5 && day == 25)
|
||||
return "Pansexual and Panromantic Awareness & Visibility Day";
|
||||
else if (month == 6)
|
||||
return "Pride Month";
|
||||
else if (month == 7 && day == 14)
|
||||
return "Non-Binary People's Day";
|
||||
else if (month == 7 && day == 28)
|
||||
return "Leilukin's Birthday";
|
||||
else if (month == 9 && day == 11)
|
||||
return "Leilukin's Hub Anniversary";
|
||||
else if (month == 9 && day == 23)
|
||||
return "Bi Visibility Day";
|
||||
else if (month == 10 && day == 8)
|
||||
return "International Lesbian Day";
|
||||
else if (month == 10 && day == 11)
|
||||
return "National Coming Out Day";
|
||||
else if (month == 10 && day == 26)
|
||||
return "Intersex Awareness Day";
|
||||
else
|
||||
return "No event";
|
||||
}
|
||||
|
||||
function getBanner(day) {
|
||||
switch (day) {
|
||||
case "Zero Discrimination Day":
|
||||
return "flag-progress-intersex";
|
||||
break;
|
||||
case "Trans Day of Visibility":
|
||||
return "flag-trans";
|
||||
break;
|
||||
case "International Asexuality Day":
|
||||
return "flag-ace";
|
||||
break;
|
||||
case "Lesbian Visibility Day":
|
||||
return "flag-lesbian";
|
||||
break;
|
||||
case "IDAHOBIT":
|
||||
return "flag-progress";
|
||||
break;
|
||||
case "Agender Pride Day":
|
||||
return "flag-agender";
|
||||
break;
|
||||
case "Pansexual and Panromantic Awareness & Visibility Day":
|
||||
return "flag-pan";
|
||||
break;
|
||||
case "Pride Month":
|
||||
return "flag-progress-intersex";
|
||||
break;
|
||||
case "Non-Binary People's Day":
|
||||
return "flag-non-binary";
|
||||
break;
|
||||
case "Bi Visibility Day":
|
||||
return "flag-bi";
|
||||
break;
|
||||
case "International Lesbian Day":
|
||||
return "flag-lesbian";
|
||||
break;
|
||||
case "National Coming Out Day":
|
||||
return "flag-rainbow";
|
||||
break;
|
||||
case "Intersex Awareness Day":
|
||||
return "flag-intersex";
|
||||
break;
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function getBlurbHtml(day) {
|
||||
switch (day) {
|
||||
case "Zero Discrimination Day":
|
||||
return `
|
||||
Today is <a href="https://www.unaids.org/en/zero-discrimination-day" target="_blank">Zero Discrimination Day</a>
|
||||
`;
|
||||
break;
|
||||
case "Trans Day of Visibility":
|
||||
return `
|
||||
Today is <a href="https://www.manygendersonevoice.org/tdov.html" target="_blank">Trans Day of Visibility</a>
|
||||
`;
|
||||
break;
|
||||
case "International Asexuality Day":
|
||||
return `
|
||||
Today is <a href="https://internationalasexualityday.org/en" target="_blank">International Asexuality Day</a>
|
||||
`;
|
||||
break;
|
||||
case "Lesbian Visibility Day":
|
||||
return `
|
||||
Today is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Day</a>
|
||||
`;
|
||||
break;
|
||||
case "IDAHOBIT":
|
||||
return `
|
||||
Today is <a href="https://may17.org" target="_blank">International Day Against Homophobia, Biphobia and Transphobia</a></span>
|
||||
`;
|
||||
break;
|
||||
case "Agender Pride Day":
|
||||
return `
|
||||
Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/" target="_blank">Agender Pride Day</a></span>
|
||||
`;
|
||||
break;
|
||||
case "Pansexual and Panromantic Awareness & Visibility Day":
|
||||
return `
|
||||
Today is <a href="https://genderedintelligence.co.uk/panvisibilityday" target="_blank">Pansexual and Panromantic Visibility Day</a>
|
||||
`;
|
||||
break;
|
||||
case "Pride Month":
|
||||
return `
|
||||
Happy <a href="https://www.loc.gov/lgbt-pride-month/about/" target="_blank">Pride Month</a>!
|
||||
`;
|
||||
break;
|
||||
case "Non-Binary People's Day":
|
||||
return `
|
||||
Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html" target="_blank">Non-Binary People's Day</a>
|
||||
`;
|
||||
break;
|
||||
case "Leilukin's Birthday":
|
||||
return `
|
||||
Today is Leilukin's birthday
|
||||
`;
|
||||
break;
|
||||
case "Leilukin's Hub Anniversary":
|
||||
return `
|
||||
Today is the anniversary of the launch of Leilukin's Hub
|
||||
`;
|
||||
break;
|
||||
case "Bi Visibility Day":
|
||||
return `
|
||||
Today is <a href="https://bivisibilityday.com/about" target="_blank">Bi Visibility Day</a>
|
||||
`;
|
||||
break;
|
||||
case "International Lesbian Day":
|
||||
return `
|
||||
Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2" target="_blank">International Lesbian Day</a>
|
||||
`;
|
||||
break;
|
||||
case "National Coming Out Day":
|
||||
return `
|
||||
Today is <a href="https://www.hrc.org/resources/national-coming-out-day" target="_blank">National Coming Out Day</a>
|
||||
`;
|
||||
break;
|
||||
case "Intersex Awareness Day":
|
||||
return `
|
||||
Today is <a href="https://interactadvocates.org/intersex-awareness-day" target="_blank">Intersex Awareness Day</a>
|
||||
`;
|
||||
break;
|
||||
default:
|
||||
return ``;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<nav class="navbar">
|
||||
<ul class="nav__menu">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/now/">
|
||||
Now
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/articles/">
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/projects/">
|
||||
Projects
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/shrines/">
|
||||
Shrines
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/links/">
|
||||
Links
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
background: var(--clr-navbar-bg);
|
||||
padding: 0 0.6rem;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--clr-navbar-link);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: var(--clr-link-hover);
|
||||
}
|
||||
|
||||
.navbar a:focus {
|
||||
outline-offset: 0.3em;
|
||||
outline: 0.15em solid var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.nav__menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
<header class="main__header">
|
||||
|
||||
<ul class="breadcrumbs">
|
||||
|
||||
<li>
|
||||
<a href="/blog/" >Blog</a>
|
||||
</li>
|
||||
➔
|
||||
<li>
|
||||
<a href="/blog/posts/" >Blog Archive</a>
|
||||
</li>
|
||||
➔
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h1>April 2024 Leilukin's Hub Overhaul with Eleventy</h1>
|
||||
<div class="article__info">
|
||||
<p>Posted on 21 April 2024 by Leilukin
|
||||
|
||||
|
||||
<p>Categories:
|
||||
|
||||
<a href="/categories/site-updates">site updates</a>
|
||||
|
||||
</p>
|
||||
|
||||
<p>🍿 6 min. read</p>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content__wrapper">
|
||||
|
||||
|
||||
|
||||
<article class="article">
|
||||
|
||||
<p>Leilukin's Hub just overgone a major overhaul: Recently, I have been rebuilding this entire website with the <a href="https://en.wikipedia.org/wiki/Static_site_generator">static site generator</a> (SSG), <a href="https://www.11ty.dev/">Eleventy</a>, often abbreviated as 11ty. After building this website for more than a year, Eleventy finally provided the solution for me to maintain, manage and update my website in more dynamic and sufficient ways to save time.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="challenges-of-maintaining-a-growing-website">Challenges of Maintaining a Growing Website</h2>
|
||||
<a class="heading-anchor" href="#challenges-of-maintaining-a-growing-website" aria-labelledby="challenges-of-maintaining-a-growing-website"><span hidden>#</span></a></div>
|
||||
<p>Leilukin's Hub has come a long way since launch on 11 September 2022, from a small website with a few pages and a simple layout, to a full-fledged personal website with multiple <a href="/articles">articles</a>, a <a href="/blog">blog</a>, a couple of <a href="/shrines">shrines</a> with additional features such as sticky navigation bar, table of contents, etc. Meanwhile, I have also been learning web development, which helped to improve this website in multiple ways.</p>
|
||||
<p>However, more content on my website also means more work to maintain. In particular, I have been trying to find ways to render components that share across multiple pages on my site, such as the header, navigation bar and footer, without having to copy and pasting the code of these components over and over whenever I want to add a new page. I had used JavaScript for this, but it is still not the best solution because I still needed to add a link to my JavaScript file in HTML. Thankfully, I eventually discovered Eleventy as the solution.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="why-eleventy">Why Eleventy?</h2>
|
||||
<a class="heading-anchor" href="#why-eleventy" aria-labelledby="why-eleventy"><span hidden>#</span></a></div>
|
||||
<p>There are many static site generators, so why I chose Eleventy over others? The main reason is Eleventy's flexibility. You can start building your website with Eleventy with something as simple as <a href="https://hamatti.org/posts/index-md-is-valid-eleventy-project/">an <code>index.md</code> Markdown file</a>. In addition, Eleventy's own features, support for many templating languages and plugins allow me to have control over how I build and customise my own website, some of which I will highlight as I elaborate the changes and improvements I had made to this website below.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="new-features-of-leilukins-hub">New Features of Leilukin's Hub</h2>
|
||||
<a class="heading-anchor" href="#new-features-of-leilukins-hub" aria-labelledby="new-features-of-leilukins-hub"><span hidden>#</span></a></div>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="pagination">Pagination</h3>
|
||||
<a class="heading-anchor" href="#pagination" aria-labelledby="pagination"><span hidden>#</span></a></div>
|
||||
<p>Leilukin's Hub <a href="/blogs">blog</a> and main <a href="/changelogs">changelogs</a> page now has pagination, thanks to <a href="https://www.11ty.dev/docs/pagination/">Eleventy's built-in support for the feature</a>.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="estimated-reading-time-for-articles-and-blog-posts">Estimated Reading Time for Articles and Blog Posts</h3>
|
||||
<a class="heading-anchor" href="#estimated-reading-time-for-articles-and-blog-posts" aria-labelledby="estimated-reading-time-for-articles-and-blog-posts"><span hidden>#</span></a></div>
|
||||
<p>Thanks to <a href="https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-emoji-readtime">Emoji Read Time</a>, a community plugin for Eleventy, my articles and blog posts now show the piece's estimated reading time before the main content.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="heading-anchor-links">Heading Anchor Links</h3>
|
||||
<a class="heading-anchor" href="#heading-anchor-links" aria-labelledby="heading-anchor-links"><span hidden>#</span></a></div>
|
||||
<p>For the articles, blog posts and some other pages that have headings, I have enabled anchor links on the headings by referring to the <a href="https://11ty.rocks/eleventyjs/slugs-anchors/#enable-anchor-links-on-content-headings">11ty Slugs and Anchors guide</a> from the website 11ty Rocks!, installing and configuring the <a href="https://www.npmjs.com/package/markdown-it-anchor">markdown-it-anchor</a> plugin.</p>
|
||||
<p>Having a plugin that automatically generates heading anchor links also allows me to generate table of contents by installing the <a href="https://www.npmjs.com/package/eleventy-plugin-nesting-toc">eleventy-plugin-nesting-toc</a> plugin.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="content-categories">Content Categories</h3>
|
||||
<a class="heading-anchor" href="#content-categories" aria-labelledby="content-categories"><span hidden>#</span></a></div>
|
||||
<p>Eleventy's <a href="https://www.11ty.dev/docs/collections/">collection</a> feature allows users to group site content by tags and create custom collections. This feature allows me to add categories to my articles and blog posts, and in turn allows visitors to browse my website by categories.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="archive-for-all-my-articles-and-blog-posts">Archive for All My Articles and Blog Posts</h3>
|
||||
<a class="heading-anchor" href="#archive-for-all-my-articles-and-blog-posts" aria-labelledby="archive-for-all-my-articles-and-blog-posts"><span hidden>#</span></a></div>
|
||||
<p>Eleventy's collection feature also allows me to dynamically display links to my articles and posts when I make a new one, without needing to edit more pages to add the new links myself. Therefore, I took advantage of this feature by creating an <a href="/archive">archive</a> page to display all my articles and blog posts.</p>
|
||||
<p>Furthermore, my articles, blog and posts now has a right sidebar with links to my articles, blog posts as well as their archives and categories.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="improved-features-of-leilukins-hub">Improved Features of Leilukin's Hub</h2>
|
||||
<a class="heading-anchor" href="#improved-features-of-leilukins-hub" aria-labelledby="improved-features-of-leilukins-hub"><span hidden>#</span></a></div>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="blog">Blog</h3>
|
||||
<a class="heading-anchor" href="#blog" aria-labelledby="blog"><span hidden>#</span></a></div>
|
||||
<p>Leilukin's Hub blog was <a href="https://leilukin.neocities.org/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">launched on 28 January 2023</a>. Formerly, the blog was built with <a href="https://zonelets.net/">Zonelets</a>; now I take advantage of Eleventy's flexibility by recreating Leilukin's Hub blog with it, thus using the main site's layout for the blog instead of <a href="/changelogs/layouts/#11-september-2023-blog-layout">using a different layout</a>. This makes the blog actually feels like it is part of this website.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="site-map">Site Map</h3>
|
||||
<a class="heading-anchor" href="#site-map" aria-labelledby="site-map"><span hidden>#</span></a></div>
|
||||
<p>Visually, my site map does not change much other than tweaking the spacing, but under the hood, I use the Eleventy's official <a href="https://www.11ty.dev/docs/plugins/navigation/">Navigation</a> plugin to generate the links to my pages in a hierarchical manner.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="rss-feed">RSS Feed</h3>
|
||||
<a class="heading-anchor" href="#rss-feed" aria-labelledby="rss-feed"><span hidden>#</span></a></div>
|
||||
<p>I had created an RSS feed for Leilukin's Hub's changelogs and blog posts for a while, but previously I had to create new entries in the feed manually by using <a href="https://sourceforge.net/projects/rss-builder/">RSS Builder</a>. Now by installing and setting up Eleventy's official <a href="https://www.11ty.dev/docs/plugins/rss/">RSS</a> plugin, new feed entries will be generated automatically when I make new changelogs, articles and blog posts.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="other-notable-changes-of-leilukins-hub">Other Notable Changes of Leilukin's Hub</h2>
|
||||
<a class="heading-anchor" href="#other-notable-changes-of-leilukins-hub" aria-labelledby="other-notable-changes-of-leilukins-hub"><span hidden>#</span></a></div>
|
||||
<p>The following changes are not related to any features inherent to Eleventy or its plugins, but they were part of my process of rebuilding Leilukin's Hub.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="site-updates-being-blog-posts">Site Updates being Blog Posts</h3>
|
||||
<a class="heading-anchor" href="#site-updates-being-blog-posts" aria-labelledby="site-updates-being-blog-posts"><span hidden>#</span></a></div>
|
||||
<p>Previously, longer <a href="/categories/site-updates/">site updates</a> were made into their own pages, since Leilukin's Hub did not have its own blog when I made the first site update post. Now these updates are converted into blog posts.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="featured-articles-being-party-of-articles">Featured Articles being Party of Articles</h3>
|
||||
<a class="heading-anchor" href="#featured-articles-being-party-of-articles" aria-labelledby="featured-articles-being-party-of-articles"><span hidden>#</span></a></div>
|
||||
<p>Formerly, pages that featured my interviews were on their own page called "featured". Now, these <a href="/articles/#featured-articles">featured articles</a> are merged into the <a href="/articles">articles</a> page.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="scroll-to-top-function">Scroll-to-Top Function</h3>
|
||||
<a class="heading-anchor" href="#scroll-to-top-function" aria-labelledby="scroll-to-top-function"><span hidden>#</span></a></div>
|
||||
<p>Previously, this site's scroll-to-top function was placed in the footer. Now, I created a scroll-to-top button in the bottom right corner of the page when you scroll down.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="site-layout">Site Layout</h3>
|
||||
<a class="heading-anchor" href="#site-layout" aria-labelledby="site-layout"><span hidden>#</span></a></div>
|
||||
<p>The main title of each page is now displayed above both the main content and sidebars, instead of just above the main content like in the <a href="/changelogs/layouts/#23-june-2023">previous layout</a>. This change was made so when this site is viewed on mobile, the table of contents of the left sidebar will be displayed above the main content but still below the page's main title. Previously, I had to place the table of contents on both the left sidebar and the main content's body, and hide the sidebar table of contents when viewed on mobile.</p>
|
||||
<p>I also use CSS grid to set the page layout in that the main content's width will remain the same instead of expanding if there is no sidebar on the page.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="use-github-actions-to-deploy-leilukins-hub-to-neocities">Use GitHub Actions to deploy Leilukin's Hub to Neocities</h2>
|
||||
<a class="heading-anchor" href="#use-github-actions-to-deploy-leilukins-hub-to-neocities" aria-labelledby="use-github-actions-to-deploy-leilukins-hub-to-neocities"><span hidden>#</span></a></div>
|
||||
<p>Eleventy is great for reducing many workloads in maintaining and updating my website, so how about publishing the website to Neocities? That is where the <a href="https://docs.github.com/en/actions">GitHub actions</a> comes in.</p>
|
||||
<p>Before I decided to use a static site generator to rebuild Leilukin's Hub, I discovered the GitHub action named <a href="https://github.com/bcomnes/deploy-to-neocities">deploy-to-neocities</a>, which as the name suggests, allows you to publish your website directly from a GitHub repository to Neocities. I succeeded in deploying all the files of Leilukin's Hub to Neocities with it even before starting to rebuild my website with Eleventy.</p>
|
||||
<p>I have been using Visual Studio Code to write the code for Leilukin's Hub, and saving a copy of all the files of my website on my own computer. The combination of creating a Git repository for Leilukin's Hub and using the deploy-to-neocities GitHub action saves the time and workload needed to log in to Neocities, navigate the files and folders and open a file to edit the code every time I want to make a change to my website.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="a-weeks-worth-of-effort-well-spent">A Week's Worth of Effort Well-Spent</h2>
|
||||
<a class="heading-anchor" href="#a-weeks-worth-of-effort-well-spent" aria-labelledby="a-weeks-worth-of-effort-well-spent"><span hidden>#</span></a></div>
|
||||
<p>I had spent a whole week in rebuilding Leilukin's Hub from scratch with Eleventy, and at last completing the process on 20 April 2024. Most of the time rebuilding this website was spent on setting up layout templates, rather than changing the format of my articles and blog posts from HTML to markdown. However, the effort and time spent was worth it, and Leilukin's Hub feels new again.</p>
|
||||
<p>Welcome to the rebuilt Leilukin's Hub! 🥳</p>
|
||||
|
||||
<ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/">I Received a Lifetime Premium Membership on Nexus Mods for Free</a></li><li>Next Post: <a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">April 2024 Leilukin's Hub Overhaul with Eleventy</a></li>
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
.blog__post--nextprev {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
padding-top: 0.8em;
|
||||
margin-top: 2.5em;
|
||||
border-top: 0.1em solid var(--clr-title-border);
|
||||
}
|
||||
</style>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<aside class="right-sidebar">
|
||||
<nav class="content__nav sidebar--sticky">
|
||||
<h2 class="content__nav--title">My Contents</h2>
|
||||
<ul class="content__nav--links">
|
||||
|
||||
<li><a href="/archive/">Content Archive</a></li>
|
||||
|
||||
<li><a href="/categories/">Content Categories</a></li>
|
||||
|
||||
<li><a href="/articles/">Articles</a></li>
|
||||
|
||||
<li><a href="/blog/">Blog Home</a></li>
|
||||
|
||||
<li><a href="/blog/posts/">Blog Archive</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.content__nav {
|
||||
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||
background-color: var(--clr-content-bg);
|
||||
}
|
||||
|
||||
.content__nav--title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.7em 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
|
||||
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
||||
|
||||
|
||||
<ul class="footer__links">
|
||||
<li><a
|
||||
|
||||
href="/sitemap/
|
||||
">Site Map</a></li>
|
||||
<li><a
|
||||
|
||||
href="/changelogs/"
|
||||
>Changelogs</a></li>
|
||||
<li><a href="/feed.xml">RSS</a></li>
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
background: var(--clr-main-footer-bg);
|
||||
padding: 0.8rem;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.footer__links li:not(:last-child)::after {
|
||||
content: '|';
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
.footer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button class="top-btn hidden">
|
||||
<img src="/assets/images/elements/chevron-up.svg" alt="Scroll to top">
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: var(--clr-top-btn);
|
||||
border-radius: 50em;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
.top-btn:focus {
|
||||
outline: 0.25em solid var(--clr-top-btn);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
|
||||
.top-btn img {
|
||||
width: 1.5rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const topButton = document.querySelector(".top-btn");
|
||||
|
||||
window.onscroll = () => {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
topButton.classList.remove("hidden");
|
||||
} else {
|
||||
topButton.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
topButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,778 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr" id="page-top">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
|
||||
|
||||
<meta property="og:title" content="April 2024 Leilukin's Hub Overhaul with Eleventy | Blog">
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="I rebuilt Leilukin's Hub with the static site genertor Eleventy in April 2024.">
|
||||
<meta name="generator" content="Eleventy v2.0.1">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">
|
||||
<meta property="og:site_name" content="Leilukin's Hub">
|
||||
<meta property="og:locale" content="en_MY">
|
||||
<meta property="og:description" content="I rebuilt Leilukin's Hub with the static site genertor Eleventy in April 2024.">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:url" content="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">
|
||||
<meta name="twitter:description" content="I rebuilt Leilukin's Hub with the static site genertor Eleventy in April 2024.">
|
||||
<link rel="canonical" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
|
||||
|
||||
|
||||
<link rel="stylesheet" href="/assets/fonts/noto-sans/noto-sans.css">
|
||||
|
||||
|
||||
<link href="/assets/fonts/fontawesome/css/fontawesome.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/brands.css" rel="stylesheet" />
|
||||
<link href="/assets/fonts/fontawesome/css/solid.css" rel="stylesheet" />
|
||||
|
||||
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
|
||||
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
||||
|
||||
|
||||
<title>
|
||||
April 2024 Leilukin's Hub Overhaul with Eleventy | Blog | Leilukin's Hub
|
||||
</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="hero">
|
||||
<div class="hero__top-bar hidden"></div>
|
||||
<div class="hero__img">
|
||||
|
||||
<img fetchpriority="high" src="/assets/leilukin/Leilukins-Hub-website-banner.png" alt="Banner of Leilukin's Hub">
|
||||
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
width: 100%;
|
||||
background-color: var(--clr-hero-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero__top-bar {
|
||||
background-color: var(--clr-navbar-bg);
|
||||
width: 100%;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
.hero__img {
|
||||
display: grid;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.hero img {
|
||||
object-fit: contain;
|
||||
overflow: hidden;
|
||||
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
||||
max-height: 16rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const hero = document.querySelector(".hero");
|
||||
const todayEvent = getTodayEvent();
|
||||
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
||||
const headerImgEl = document.querySelector(".hero__img");
|
||||
|
||||
|
||||
if (todayEvent != "No event") {
|
||||
heroTopBarEl.classList.remove('hidden');
|
||||
|
||||
if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") {
|
||||
heroTopBarEl.innerHTML = getBlurbHtml(todayEvent);
|
||||
} else {
|
||||
headerImgEl.classList.add(getBanner(todayEvent));
|
||||
heroTopBarEl.innerHTML = getBlurbHtml(todayEvent);
|
||||
}
|
||||
}
|
||||
|
||||
function getTodayEvent() {
|
||||
const date = new Date();
|
||||
const month = date.getMonth() + 1;
|
||||
const day = date.getDate();
|
||||
|
||||
if (month == 3 && day == 1)
|
||||
return "Zero Discrimination Day";
|
||||
else if (month == 3 && day == 31)
|
||||
return "Trans Day of Visibility";
|
||||
else if (month == 4 && day == 6)
|
||||
return "International Asexuality Day";
|
||||
else if (month == 4 && day == 26)
|
||||
return "Lesbian Visibility Day";
|
||||
else if (month == 5 && day == 17)
|
||||
return "IDAHOBIT";
|
||||
else if (month == 5 && day == 19)
|
||||
return "Agender Pride Day";
|
||||
else if (month == 5 && day == 25)
|
||||
return "Pansexual and Panromantic Awareness & Visibility Day";
|
||||
else if (month == 6)
|
||||
return "Pride Month";
|
||||
else if (month == 7 && day == 14)
|
||||
return "Non-Binary People's Day";
|
||||
else if (month == 7 && day == 28)
|
||||
return "Leilukin's Birthday";
|
||||
else if (month == 9 && day == 11)
|
||||
return "Leilukin's Hub Anniversary";
|
||||
else if (month == 9 && day == 23)
|
||||
return "Bi Visibility Day";
|
||||
else if (month == 10 && day == 8)
|
||||
return "International Lesbian Day";
|
||||
else if (month == 10 && day == 11)
|
||||
return "National Coming Out Day";
|
||||
else if (month == 10 && day == 26)
|
||||
return "Intersex Awareness Day";
|
||||
else
|
||||
return "No event";
|
||||
}
|
||||
|
||||
function getBanner(day) {
|
||||
switch (day) {
|
||||
case "Zero Discrimination Day":
|
||||
return "flag-progress-intersex";
|
||||
break;
|
||||
case "Trans Day of Visibility":
|
||||
return "flag-trans";
|
||||
break;
|
||||
case "International Asexuality Day":
|
||||
return "flag-ace";
|
||||
break;
|
||||
case "Lesbian Visibility Day":
|
||||
return "flag-lesbian";
|
||||
break;
|
||||
case "IDAHOBIT":
|
||||
return "flag-progress";
|
||||
break;
|
||||
case "Agender Pride Day":
|
||||
return "flag-agender";
|
||||
break;
|
||||
case "Pansexual and Panromantic Awareness & Visibility Day":
|
||||
return "flag-pan";
|
||||
break;
|
||||
case "Pride Month":
|
||||
return "flag-progress-intersex";
|
||||
break;
|
||||
case "Non-Binary People's Day":
|
||||
return "flag-non-binary";
|
||||
break;
|
||||
case "Bi Visibility Day":
|
||||
return "flag-bi";
|
||||
break;
|
||||
case "International Lesbian Day":
|
||||
return "flag-lesbian";
|
||||
break;
|
||||
case "National Coming Out Day":
|
||||
return "flag-rainbow";
|
||||
break;
|
||||
case "Intersex Awareness Day":
|
||||
return "flag-intersex";
|
||||
break;
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function getBlurbHtml(day) {
|
||||
switch (day) {
|
||||
case "Zero Discrimination Day":
|
||||
return `
|
||||
Today is <a href="https://www.unaids.org/en/zero-discrimination-day" target="_blank">Zero Discrimination Day</a>
|
||||
`;
|
||||
break;
|
||||
case "Trans Day of Visibility":
|
||||
return `
|
||||
Today is <a href="https://www.manygendersonevoice.org/tdov.html" target="_blank">Trans Day of Visibility</a>
|
||||
`;
|
||||
break;
|
||||
case "International Asexuality Day":
|
||||
return `
|
||||
Today is <a href="https://internationalasexualityday.org/en" target="_blank">International Asexuality Day</a>
|
||||
`;
|
||||
break;
|
||||
case "Lesbian Visibility Day":
|
||||
return `
|
||||
Today is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Day</a>
|
||||
`;
|
||||
break;
|
||||
case "IDAHOBIT":
|
||||
return `
|
||||
Today is <a href="https://may17.org" target="_blank">International Day Against Homophobia, Biphobia and Transphobia</a></span>
|
||||
`;
|
||||
break;
|
||||
case "Agender Pride Day":
|
||||
return `
|
||||
Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/" target="_blank">Agender Pride Day</a></span>
|
||||
`;
|
||||
break;
|
||||
case "Pansexual and Panromantic Awareness & Visibility Day":
|
||||
return `
|
||||
Today is <a href="https://genderedintelligence.co.uk/panvisibilityday" target="_blank">Pansexual and Panromantic Visibility Day</a>
|
||||
`;
|
||||
break;
|
||||
case "Pride Month":
|
||||
return `
|
||||
Happy <a href="https://www.loc.gov/lgbt-pride-month/about/" target="_blank">Pride Month</a>!
|
||||
`;
|
||||
break;
|
||||
case "Non-Binary People's Day":
|
||||
return `
|
||||
Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html" target="_blank">Non-Binary People's Day</a>
|
||||
`;
|
||||
break;
|
||||
case "Leilukin's Birthday":
|
||||
return `
|
||||
Today is Leilukin's birthday
|
||||
`;
|
||||
break;
|
||||
case "Leilukin's Hub Anniversary":
|
||||
return `
|
||||
Today is the anniversary of the launch of Leilukin's Hub
|
||||
`;
|
||||
break;
|
||||
case "Bi Visibility Day":
|
||||
return `
|
||||
Today is <a href="https://bivisibilityday.com/about" target="_blank">Bi Visibility Day</a>
|
||||
`;
|
||||
break;
|
||||
case "International Lesbian Day":
|
||||
return `
|
||||
Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2" target="_blank">International Lesbian Day</a>
|
||||
`;
|
||||
break;
|
||||
case "National Coming Out Day":
|
||||
return `
|
||||
Today is <a href="https://www.hrc.org/resources/national-coming-out-day" target="_blank">National Coming Out Day</a>
|
||||
`;
|
||||
break;
|
||||
case "Intersex Awareness Day":
|
||||
return `
|
||||
Today is <a href="https://interactadvocates.org/intersex-awareness-day" target="_blank">Intersex Awareness Day</a>
|
||||
`;
|
||||
break;
|
||||
default:
|
||||
return ``;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<nav class="navbar">
|
||||
<ul class="nav__menu">
|
||||
|
||||
|
||||
|
||||
<li>
|
||||
<a href="/">
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/about/">
|
||||
About
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/now/">
|
||||
Now
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/blog/">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/articles/">
|
||||
Articles
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/projects/">
|
||||
Projects
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/shrines/">
|
||||
Shrines
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/links/">
|
||||
Links
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="https://leilukin.123guestbook.com/">Guestbook</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
background: var(--clr-navbar-bg);
|
||||
padding: 0 0.6rem;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navbar a {
|
||||
color: var(--clr-navbar-link);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navbar a:hover {
|
||||
color: var(--clr-link-hover);
|
||||
}
|
||||
|
||||
.navbar a:focus {
|
||||
outline-offset: 0.3em;
|
||||
outline: 0.15em solid var(--clr-navbar-link);
|
||||
}
|
||||
|
||||
.nav__menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<main>
|
||||
<header class="main__header">
|
||||
|
||||
<ul class="breadcrumbs">
|
||||
|
||||
<li>
|
||||
<a href="/blog/" >Blog</a>
|
||||
</li>
|
||||
➔
|
||||
<li>
|
||||
<a href="/blog/posts/" >Blog Archive</a>
|
||||
</li>
|
||||
➔
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
<h1>April 2024 Leilukin's Hub Overhaul with Eleventy</h1>
|
||||
<div class="article__info">
|
||||
<p>Posted on 21 April 2024 by Leilukin
|
||||
|
||||
|
||||
<p>Categories:
|
||||
|
||||
<a href="/categories/site-updates">site updates</a>
|
||||
|
||||
</p>
|
||||
|
||||
<p>🍿 6 min. read</p>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
|
||||
<div class="content__wrapper">
|
||||
|
||||
<aside class="left-sidebar">
|
||||
<details class="toc__wrapper sidebar--sticky">
|
||||
<summary class="toc__heading">
|
||||
On This Page
|
||||
</summary>
|
||||
<nav class="toc">
|
||||
<ol>
|
||||
|
||||
<li><a href="#challenges-of-maintaining-a-growing-website">Challenges of Maintaining a Growing Website</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#why-eleventy">Why Eleventy?</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#new-features-of-leilukins-hub">New Features of Leilukin's Hub</a>
|
||||
|
||||
<ol>
|
||||
|
||||
<li><a href="#pagination">Pagination</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#estimated-reading-time-for-articles-and-blog-posts">Estimated Reading Time for Articles and Blog Posts</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#heading-anchor-links">Heading Anchor Links</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#content-categories">Content Categories</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#archive-for-all-my-articles-and-blog-posts">Archive for All My Articles and Blog Posts</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#breadcrumbs">Breadcrumbs</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
|
||||
<li><a href="#improved-features-of-leilukins-hub">Improved Features of Leilukin's Hub</a>
|
||||
|
||||
<ol>
|
||||
|
||||
<li><a href="#blog">Blog</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#site-map">Site Map</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#rss-feed">RSS Feed</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
|
||||
<li><a href="#other-notable-changes-of-leilukins-hub">Other Notable Changes of Leilukin's Hub</a>
|
||||
|
||||
<ol>
|
||||
|
||||
<li><a href="#site-updates-being-blog-posts">Site Updates being Blog Posts</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#featured-articles-being-party-of-articles">Featured Articles being Party of Articles</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#scroll-to-top-function">Scroll-to-Top Function</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#site-layout">Site Layout</a>
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
|
||||
<li><a href="#use-github-actions-to-deploy-leilukins-hub-to-neocities">Use GitHub Actions to deploy Leilukin's Hub to Neocities</a>
|
||||
</li>
|
||||
|
||||
<li><a href="#a-weeks-worth-of-effort-well-spent">A Week's Worth of Effort Well-Spent</a>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
</details>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.toc__wrapper {
|
||||
max-height: 89vh;
|
||||
overflow: auto;
|
||||
background-color: var(--clr-content-bg);
|
||||
padding: 1rem 1.3rem;
|
||||
}
|
||||
|
||||
.toc__heading {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 700;
|
||||
color: var(--clr-sub-heading);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toc ol,
|
||||
.toc ol ol {
|
||||
display: grid;
|
||||
gap: 0.3em;
|
||||
}
|
||||
|
||||
.toc ol {
|
||||
border-top: 0.1em solid var(--clr-title-border);
|
||||
padding-left: 1.3em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
|
||||
.toc ol ol {
|
||||
border-top: none;
|
||||
list-style-type: disc;
|
||||
padding-left: 1em;
|
||||
padding-top: 0.3em;
|
||||
}
|
||||
|
||||
.toc ol a {
|
||||
font-size: 1.1rem;
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
|
||||
.toc ol ol a {
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
<article class="article">
|
||||
|
||||
<p>Leilukin's Hub just overgone a major overhaul: In April 2024, I have been rebuilding this entire website with the <a href="https://en.wikipedia.org/wiki/Static_site_generator">static site generator</a> (SSG), <a href="https://www.11ty.dev/">Eleventy</a>, often abbreviated as 11ty, and the process was completed on 20 April 2024.</p>
|
||||
<p>After building this website for more than a year, Eleventy finally provided the solution for me to maintain, manage and update my website in more dynamic and sufficient ways to save time.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="challenges-of-maintaining-a-growing-website">Challenges of Maintaining a Growing Website</h2>
|
||||
<a class="heading-anchor" href="#challenges-of-maintaining-a-growing-website" aria-labelledby="challenges-of-maintaining-a-growing-website"><span hidden>#</span></a></div>
|
||||
<p>Leilukin's Hub has come a long way since launch on 11 September 2022, from a small website with a few pages and a simple layout, to a full-fledged personal website with multiple <a href="/articles">articles</a>, a <a href="/blog">blog</a>, a couple of <a href="/shrines">shrines</a> with additional features such as sticky navigation bar, table of contents, etc. Meanwhile, I have also been learning web development, which helped to improve this website in multiple ways.</p>
|
||||
<p>However, more content on my website also means more work to maintain. In particular, I have been trying to find ways to render components that share across multiple pages on my site, such as the header, navigation bar and footer, without having to copy and pasting the code of these components over and over whenever I want to add a new page. I had used JavaScript for this, but it is still not the best solution because I still needed to add a link to my JavaScript file in HTML. Thankfully, I eventually discovered Eleventy as the solution.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="why-eleventy">Why Eleventy?</h2>
|
||||
<a class="heading-anchor" href="#why-eleventy" aria-labelledby="why-eleventy"><span hidden>#</span></a></div>
|
||||
<p>There are <a href="https://jamstack.org/generators/">many static site generators</a>, so why I choose Eleventy over others? The main reason is Eleventy's flexibility. You can start building your website with Eleventy with something as simple as <a href="https://hamatti.org/posts/index-md-is-valid-eleventy-project/">an <code>index.md</code> Markdown file</a>.</p>
|
||||
<p>In addition, Eleventy's own features, support for many <a href="https://www.11ty.dev/docs/languages/">template languages</a> and plugins allow me to have control over how I build and customise my own website, some of which I will highlight as I elaborate the changes and improvements I had made to this website below.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="new-features-of-leilukins-hub">New Features of Leilukin's Hub</h2>
|
||||
<a class="heading-anchor" href="#new-features-of-leilukins-hub" aria-labelledby="new-features-of-leilukins-hub"><span hidden>#</span></a></div>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="pagination">Pagination</h3>
|
||||
<a class="heading-anchor" href="#pagination" aria-labelledby="pagination"><span hidden>#</span></a></div>
|
||||
<p>Leilukin's Hub <a href="/blogs">blog</a> and main <a href="/changelogs">changelogs</a> page now has pagination, thanks to <a href="https://www.11ty.dev/docs/pagination/">Eleventy's built-in support for the feature</a>.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="estimated-reading-time-for-articles-and-blog-posts">Estimated Reading Time for Articles and Blog Posts</h3>
|
||||
<a class="heading-anchor" href="#estimated-reading-time-for-articles-and-blog-posts" aria-labelledby="estimated-reading-time-for-articles-and-blog-posts"><span hidden>#</span></a></div>
|
||||
<p>Thanks to <a href="https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-emoji-readtime">Emoji Read Time</a>, a community plugin for Eleventy, my articles and blog posts now show the piece's estimated reading time before the main content.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="heading-anchor-links">Heading Anchor Links</h3>
|
||||
<a class="heading-anchor" href="#heading-anchor-links" aria-labelledby="heading-anchor-links"><span hidden>#</span></a></div>
|
||||
<p>For the articles, blog posts and some other pages that have headings, I have enabled anchor links on the headings by referring to the <a href="https://11ty.rocks/eleventyjs/slugs-anchors/#enable-anchor-links-on-content-headings">11ty Slugs and Anchors guide</a> from the website 11ty Rocks!, installing and configuring the <a href="https://www.npmjs.com/package/markdown-it-anchor">markdown-it-anchor</a> plugin.</p>
|
||||
<p>Having a plugin that automatically generates heading anchor links also allows me to generate table of contents by installing the <a href="https://www.npmjs.com/package/eleventy-plugin-nesting-toc">eleventy-plugin-nesting-toc</a> plugin.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="content-categories">Content Categories</h3>
|
||||
<a class="heading-anchor" href="#content-categories" aria-labelledby="content-categories"><span hidden>#</span></a></div>
|
||||
<p>Eleventy's <a href="https://www.11ty.dev/docs/collections/">collection</a> feature allows users to group site content by tags and create custom collections. This feature allows me to add categories to my articles and blog posts, and in turn allows visitors to browse my website by <a href="/categories">categories</a>.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="archive-for-all-my-articles-and-blog-posts">Archive for All My Articles and Blog Posts</h3>
|
||||
<a class="heading-anchor" href="#archive-for-all-my-articles-and-blog-posts" aria-labelledby="archive-for-all-my-articles-and-blog-posts"><span hidden>#</span></a></div>
|
||||
<p>Eleventy's collection feature also allows me to dynamically display links to my articles and posts when I make a new one, without needing to edit more pages to add the new links myself. Therefore, I took advantage of this feature by creating an [archive] page to display all my articles and blog posts.</p>
|
||||
<p>Furthermore, my articles, blog and posts now has a right sidebar with links to my articles, blog posts as well as their archives and categories.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="breadcrumbs">Breadcrumbs</h3>
|
||||
<a class="heading-anchor" href="#breadcrumbs" aria-labelledby="breadcrumbs"><span hidden>#</span></a></div>
|
||||
<p>Some contents on Leilukin's Hub now has <a href="https://www.seoptimer.com/blog/breadcrumbs-website/">breadcrumbs</a>, which shows the locations of these contents within this website and provides another means for visitors to navigate this site.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="improved-features-of-leilukins-hub">Improved Features of Leilukin's Hub</h2>
|
||||
<a class="heading-anchor" href="#improved-features-of-leilukins-hub" aria-labelledby="improved-features-of-leilukins-hub"><span hidden>#</span></a></div>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="blog">Blog</h3>
|
||||
<a class="heading-anchor" href="#blog" aria-labelledby="blog"><span hidden>#</span></a></div>
|
||||
<p>Leilukin's Hub blog was <a href="https://leilukin.neocities.org/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">launched on 28 January 2023</a>. Formerly, the blog was built with <a href="https://zonelets.net/">Zonelets</a>; now I take advantage of Eleventy's flexibility by recreating Leilukin's Hub blog with it, thus using the main site's layout for the blog instead of <a href="/changelogs/layouts/#11-september-2023-blog-layout">using a different layout</a>. This makes the blog actually feels like it is part of this website.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="site-map">Site Map</h3>
|
||||
<a class="heading-anchor" href="#site-map" aria-labelledby="site-map"><span hidden>#</span></a></div>
|
||||
<p>Visually, my <a href="/sitemap">site map</a> does not change much other than tweaking the spacing, but under the hood, I use the Eleventy's official <a href="https://www.11ty.dev/docs/plugins/navigation/">Navigation</a> plugin to generate the links to my pages in a hierarchical manner.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="rss-feed">RSS Feed</h3>
|
||||
<a class="heading-anchor" href="#rss-feed" aria-labelledby="rss-feed"><span hidden>#</span></a></div>
|
||||
<p>I had created an RSS feed for Leilukin's Hub's changelogs and blog posts for a while, but previously I had to create new entries in the feed manually by using <a href="https://sourceforge.net/projects/rss-builder/">RSS Builder</a>. Now by installing and setting up Eleventy's official <a href="https://www.11ty.dev/docs/plugins/rss/">RSS</a> plugin, new feed entries will be generated automatically when I make new changelogs, articles and blog posts.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="other-notable-changes-of-leilukins-hub">Other Notable Changes of Leilukin's Hub</h2>
|
||||
<a class="heading-anchor" href="#other-notable-changes-of-leilukins-hub" aria-labelledby="other-notable-changes-of-leilukins-hub"><span hidden>#</span></a></div>
|
||||
<p>The following changes are not related to any features inherent to Eleventy or its plugins, but they were part of my process of rebuilding Leilukin's Hub.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="site-updates-being-blog-posts">Site Updates being Blog Posts</h3>
|
||||
<a class="heading-anchor" href="#site-updates-being-blog-posts" aria-labelledby="site-updates-being-blog-posts"><span hidden>#</span></a></div>
|
||||
<p>Previously, longer <a href="/categories/site-updates/">site updates</a> were made into their own pages, since Leilukin's Hub did not have its own blog when I made the first site update post. Now these updates are converted into blog posts.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="featured-articles-being-party-of-articles">Featured Articles being Party of Articles</h3>
|
||||
<a class="heading-anchor" href="#featured-articles-being-party-of-articles" aria-labelledby="featured-articles-being-party-of-articles"><span hidden>#</span></a></div>
|
||||
<p>Formerly, pages that featured my interviews were on their own page called "featured". Now, these <a href="/articles/#featured-articles">featured articles</a> are merged into the <a href="/articles">articles</a> page.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="scroll-to-top-function">Scroll-to-Top Function</h3>
|
||||
<a class="heading-anchor" href="#scroll-to-top-function" aria-labelledby="scroll-to-top-function"><span hidden>#</span></a></div>
|
||||
<p>Previously, this site's scroll-to-top function was placed in the footer. Now, I created a scroll-to-top button in the bottom right corner of the page when you scroll down.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="site-layout">Site Layout</h3>
|
||||
<a class="heading-anchor" href="#site-layout" aria-labelledby="site-layout"><span hidden>#</span></a></div>
|
||||
<p>The main title of each page is now displayed above both the main content and sidebars, instead of just above the main content like in the <a href="/changelogs/layouts/#23-june-2023">previous layout</a>. This change was made so when this site is viewed on mobile, the table of contents of the left sidebar will be displayed above the main content but still below the page's main title. Previously, I had to place the table of contents on both the left sidebar and the main content's body, and hide the sidebar table of contents when viewed on mobile.</p>
|
||||
<p>I also use <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS grid</a> to set the page layout in that the main content's width will remain the same instead of expanding if there is no sidebar on the page.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="use-github-actions-to-deploy-leilukins-hub-to-neocities">Use GitHub Actions to deploy Leilukin's Hub to Neocities</h2>
|
||||
<a class="heading-anchor" href="#use-github-actions-to-deploy-leilukins-hub-to-neocities" aria-labelledby="use-github-actions-to-deploy-leilukins-hub-to-neocities"><span hidden>#</span></a></div>
|
||||
<p>Eleventy is great for reducing many workloads in maintaining and updating my website, so how about publishing the website to Neocities? That is where the <a href="https://docs.github.com/en/actions">GitHub actions</a> comes in.</p>
|
||||
<p>Before I decided to use a static site generator to rebuild Leilukin's Hub, I discovered the GitHub action named <a href="https://github.com/bcomnes/deploy-to-neocities">deploy-to-neocities</a>, which as the name suggests, allows you to publish your website directly from a GitHub repository to Neocities. I succeeded in deploying all the files of Leilukin's Hub to Neocities with it even before starting to rebuild my website with Eleventy.</p>
|
||||
<p>I have been using Visual Studio Code to write the code for Leilukin's Hub, and saving a copy of all the files of my website on my own computer. The combination of creating a Git repository for Leilukin's Hub and using the deploy-to-neocities GitHub action saves the time and workload needed to log in to Neocities, navigate the files and folders and open a file to edit the code every time I want to make a change to my website.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="a-weeks-worth-of-effort-well-spent">A Week's Worth of Effort Well-Spent</h2>
|
||||
<a class="heading-anchor" href="#a-weeks-worth-of-effort-well-spent" aria-labelledby="a-weeks-worth-of-effort-well-spent"><span hidden>#</span></a></div>
|
||||
<p>I had spent a whole week in rebuilding Leilukin's Hub from scratch with Eleventy, and at last completing the process on 20 April 2024. Most of the time rebuilding this website was spent on setting up layout templates, rather than changing the format of my articles and blog posts from HTML to markdown. However, the effort and time spent was worth it, and Leilukin's Hub feels new again.</p>
|
||||
<p>Welcome to the rebuilt Leilukin's Hub! 🥳</p>
|
||||
|
||||
<ul class="blog__post--nextprev"><li>Previous Post: <a href="/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/">I Received a Lifetime Premium Membership on Nexus Mods for Free</a></li>
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
.blog__post--nextprev {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
padding-top: 0.8em;
|
||||
margin-top: 2.5em;
|
||||
border-top: 0.1em solid var(--clr-title-border);
|
||||
}
|
||||
</style>
|
||||
</article>
|
||||
|
||||
|
||||
|
||||
<aside class="right-sidebar">
|
||||
<nav class="content__nav sidebar--sticky">
|
||||
<h2 class="content__nav--title">My Contents</h2>
|
||||
<ul class="content__nav--links">
|
||||
|
||||
<li><a href="/archive/">Content Archive</a></li>
|
||||
|
||||
<li><a href="/categories/">Content Categories</a></li>
|
||||
|
||||
<li><a href="/articles/">Articles</a></li>
|
||||
|
||||
<li><a href="/blog/">Blog Home</a></li>
|
||||
|
||||
<li><a href="/blog/posts/">Blog Archive</a></li>
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.content__nav {
|
||||
padding: 1.2em clamp(1em, 5%, 1.5em);
|
||||
background-color: var(--clr-content-bg);
|
||||
}
|
||||
|
||||
.content__nav--title {
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 0.7em 0;
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</main>
|
||||
<footer class="footer">
|
||||
|
||||
<p>Made with ♥ by Leilukin since <time>11 September 2022</time></p>
|
||||
|
||||
|
||||
<ul class="footer__links">
|
||||
<li><a
|
||||
|
||||
href="/sitemap/
|
||||
">Site Map</a></li>
|
||||
<li><a
|
||||
|
||||
href="/changelogs/"
|
||||
>Changelogs</a></li>
|
||||
<li><a href="/feed.xml">RSS</a></li>
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
margin-top: auto;
|
||||
background: var(--clr-main-footer-bg);
|
||||
padding: 0.8rem;
|
||||
text-align: center;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.footer__links {
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: 0.7em;
|
||||
}
|
||||
|
||||
.footer__links li:not(:last-child)::after {
|
||||
content: '|';
|
||||
padding-left: 0.6em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 600px) {
|
||||
.footer {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<button class="top-btn hidden">
|
||||
<img src="/assets/images/elements/chevron-up.svg" alt="Scroll to top">
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.top-btn {
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
z-index: 999;
|
||||
border: none;
|
||||
background-color: var(--clr-top-btn);
|
||||
border-radius: 50em;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
.top-btn:focus {
|
||||
outline: 0.25em solid var(--clr-top-btn);
|
||||
outline-offset: 0.15em;
|
||||
}
|
||||
|
||||
.top-btn img {
|
||||
width: 1.5rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script defer>
|
||||
const topButton = document.querySelector(".top-btn");
|
||||
|
||||
window.onscroll = () => {
|
||||
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
||||
topButton.classList.remove("hidden");
|
||||
} else {
|
||||
topButton.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
topButton.addEventListener('click', () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
left: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -379,6 +379,16 @@
|
|||
|
||||
<ul class="blog__postlist">
|
||||
|
||||
<li class="blog__postlist--item">
|
||||
<h2 class="blog__postlist--title">
|
||||
<a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">
|
||||
April 2024 Leilukin's Hub Overhaul with Eleventy
|
||||
|
||||
</a>
|
||||
</h2>
|
||||
<time>21 April 2024</time>
|
||||
</li>
|
||||
|
||||
<li class="blog__postlist--item">
|
||||
<h2 class="blog__postlist--title">
|
||||
<a href="/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/">
|
||||
|
|
|
|||
|
|
@ -425,7 +425,7 @@
|
|||
|
||||
|
||||
|
||||
<li><a href="/categories/site-updates/">site updates</a> (4)</li>
|
||||
<li><a href="/categories/site-updates/">site updates</a> (5)</li>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -378,11 +378,21 @@
|
|||
<div class="content ">
|
||||
|
||||
|
||||
<h2>4 Contents Filed Under "site updates"</h2>
|
||||
<h2>5 Contents Filed Under "site updates"</h2>
|
||||
|
||||
|
||||
<ul class="content-list">
|
||||
|
||||
<li>
|
||||
<p class="content-list__title">
|
||||
<a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">
|
||||
April 2024 Leilukin's Hub Overhaul with Eleventy | Blog
|
||||
|
||||
</a>
|
||||
</p>
|
||||
<time>21 April 2024</time>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<p class="content-list__title">
|
||||
<a href="/blog/posts/2023-09-11-happy-1st-anniversary-to-leilukins-hub/">
|
||||
|
|
|
|||
|
|
@ -4,13 +4,109 @@
|
|||
<subtitle>Leilukin's personal website.</subtitle>
|
||||
<link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
|
||||
<link href="https://leilukin.neocities.org"/>
|
||||
<updated>2024-04-21T11:38:39Z</updated>
|
||||
<updated>2024-04-21T12:55:34Z</updated>
|
||||
<id>https://leilukin.neocities.org</id>
|
||||
<author>
|
||||
<name>Leilukin</name>
|
||||
<email>leilukin@outlook.com</email>
|
||||
</author>
|
||||
|
||||
<entry>
|
||||
<title>April 2024 Leilukin's Hub Overhaul with Eleventy | Blog</title>
|
||||
<link href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/"/>
|
||||
<updated>2024-04-21T00:00:00Z</updated>
|
||||
<id>https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/</id>
|
||||
<content type="html"><p>Leilukin's Hub just overgone a major overhaul: In April 2024, I have been rebuilding this entire website with the <a href="https://en.wikipedia.org/wiki/Static_site_generator">static site generator</a> (SSG), <a href="https://www.11ty.dev/">Eleventy</a>, often abbreviated as 11ty, and the process was completed on 20 April 2024.</p>
|
||||
<p>After building this website for more than a year, Eleventy finally provided the solution for me to maintain, manage and update my website in more dynamic and sufficient ways to save time.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="challenges-of-maintaining-a-growing-website">Challenges of Maintaining a Growing Website</h2>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#challenges-of-maintaining-a-growing-website" aria-labelledby="challenges-of-maintaining-a-growing-website"><span hidden="">#</span></a></div>
|
||||
<p>Leilukin's Hub has come a long way since launch on 11 September 2022, from a small website with a few pages and a simple layout, to a full-fledged personal website with multiple <a href="https://leilukin.neocities.org/articles">articles</a>, a <a href="https://leilukin.neocities.org/blog">blog</a>, a couple of <a href="https://leilukin.neocities.org/shrines">shrines</a> with additional features such as sticky navigation bar, table of contents, etc. Meanwhile, I have also been learning web development, which helped to improve this website in multiple ways.</p>
|
||||
<p>However, more content on my website also means more work to maintain. In particular, I have been trying to find ways to render components that share across multiple pages on my site, such as the header, navigation bar and footer, without having to copy and pasting the code of these components over and over whenever I want to add a new page. I had used JavaScript for this, but it is still not the best solution because I still needed to add a link to my JavaScript file in HTML. Thankfully, I eventually discovered Eleventy as the solution.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="why-eleventy">Why Eleventy?</h2>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#why-eleventy" aria-labelledby="why-eleventy"><span hidden="">#</span></a></div>
|
||||
<p>There are <a href="https://jamstack.org/generators/">many static site generators</a>, so why I choose Eleventy over others? The main reason is Eleventy's flexibility. You can start building your website with Eleventy with something as simple as <a href="https://hamatti.org/posts/index-md-is-valid-eleventy-project/">an <code>index.md</code> Markdown file</a>.</p>
|
||||
<p>In addition, Eleventy's own features, support for many <a href="https://www.11ty.dev/docs/languages/">template languages</a> and plugins allow me to have control over how I build and customise my own website, some of which I will highlight as I elaborate the changes and improvements I had made to this website below.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="new-features-of-leilukins-hub">New Features of Leilukin's Hub</h2>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#new-features-of-leilukins-hub" aria-labelledby="new-features-of-leilukins-hub"><span hidden="">#</span></a></div>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="pagination">Pagination</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#pagination" aria-labelledby="pagination"><span hidden="">#</span></a></div>
|
||||
<p>Leilukin's Hub <a href="https://leilukin.neocities.org/blogs">blog</a> and main <a href="https://leilukin.neocities.org/changelogs">changelogs</a> page now has pagination, thanks to <a href="https://www.11ty.dev/docs/pagination/">Eleventy's built-in support for the feature</a>.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="estimated-reading-time-for-articles-and-blog-posts">Estimated Reading Time for Articles and Blog Posts</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#estimated-reading-time-for-articles-and-blog-posts" aria-labelledby="estimated-reading-time-for-articles-and-blog-posts"><span hidden="">#</span></a></div>
|
||||
<p>Thanks to <a href="https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-emoji-readtime">Emoji Read Time</a>, a community plugin for Eleventy, my articles and blog posts now show the piece's estimated reading time before the main content.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="heading-anchor-links">Heading Anchor Links</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#heading-anchor-links" aria-labelledby="heading-anchor-links"><span hidden="">#</span></a></div>
|
||||
<p>For the articles, blog posts and some other pages that have headings, I have enabled anchor links on the headings by referring to the <a href="https://11ty.rocks/eleventyjs/slugs-anchors/#enable-anchor-links-on-content-headings">11ty Slugs and Anchors guide</a> from the website 11ty Rocks!, installing and configuring the <a href="https://www.npmjs.com/package/markdown-it-anchor">markdown-it-anchor</a> plugin.</p>
|
||||
<p>Having a plugin that automatically generates heading anchor links also allows me to generate table of contents by installing the <a href="https://www.npmjs.com/package/eleventy-plugin-nesting-toc">eleventy-plugin-nesting-toc</a> plugin.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="content-categories">Content Categories</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#content-categories" aria-labelledby="content-categories"><span hidden="">#</span></a></div>
|
||||
<p>Eleventy's <a href="https://www.11ty.dev/docs/collections/">collection</a> feature allows users to group site content by tags and create custom collections. This feature allows me to add categories to my articles and blog posts, and in turn allows visitors to browse my website by <a href="https://leilukin.neocities.org/categories">categories</a>.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="archive-for-all-my-articles-and-blog-posts">Archive for All My Articles and Blog Posts</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#archive-for-all-my-articles-and-blog-posts" aria-labelledby="archive-for-all-my-articles-and-blog-posts"><span hidden="">#</span></a></div>
|
||||
<p>Eleventy's collection feature also allows me to dynamically display links to my articles and posts when I make a new one, without needing to edit more pages to add the new links myself. Therefore, I took advantage of this feature by creating an [archive] page to display all my articles and blog posts.</p>
|
||||
<p>Furthermore, my articles, blog and posts now has a right sidebar with links to my articles, blog posts as well as their archives and categories.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="breadcrumbs">Breadcrumbs</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#breadcrumbs" aria-labelledby="breadcrumbs"><span hidden="">#</span></a></div>
|
||||
<p>Some contents on Leilukin's Hub now has <a href="https://www.seoptimer.com/blog/breadcrumbs-website/">breadcrumbs</a>, which shows the locations of these contents within this website and provides another means for visitors to navigate this site.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="improved-features-of-leilukins-hub">Improved Features of Leilukin's Hub</h2>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#improved-features-of-leilukins-hub" aria-labelledby="improved-features-of-leilukins-hub"><span hidden="">#</span></a></div>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="blog">Blog</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#blog" aria-labelledby="blog"><span hidden="">#</span></a></div>
|
||||
<p>Leilukin's Hub blog was <a href="https://leilukin.neocities.org/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/">launched on 28 January 2023</a>. Formerly, the blog was built with <a href="https://zonelets.net/">Zonelets</a>; now I take advantage of Eleventy's flexibility by recreating Leilukin's Hub blog with it, thus using the main site's layout for the blog instead of <a href="https://leilukin.neocities.org/changelogs/layouts/#11-september-2023-blog-layout">using a different layout</a>. This makes the blog actually feels like it is part of this website.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="site-map">Site Map</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#site-map" aria-labelledby="site-map"><span hidden="">#</span></a></div>
|
||||
<p>Visually, my <a href="https://leilukin.neocities.org/sitemap">site map</a> does not change much other than tweaking the spacing, but under the hood, I use the Eleventy's official <a href="https://www.11ty.dev/docs/plugins/navigation/">Navigation</a> plugin to generate the links to my pages in a hierarchical manner.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="rss-feed">RSS Feed</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#rss-feed" aria-labelledby="rss-feed"><span hidden="">#</span></a></div>
|
||||
<p>I had created an RSS feed for Leilukin's Hub's changelogs and blog posts for a while, but previously I had to create new entries in the feed manually by using <a href="https://sourceforge.net/projects/rss-builder/">RSS Builder</a>. Now by installing and setting up Eleventy's official <a href="https://www.11ty.dev/docs/plugins/rss/">RSS</a> plugin, new feed entries will be generated automatically when I make new changelogs, articles and blog posts.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="other-notable-changes-of-leilukins-hub">Other Notable Changes of Leilukin's Hub</h2>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#other-notable-changes-of-leilukins-hub" aria-labelledby="other-notable-changes-of-leilukins-hub"><span hidden="">#</span></a></div>
|
||||
<p>The following changes are not related to any features inherent to Eleventy or its plugins, but they were part of my process of rebuilding Leilukin's Hub.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="site-updates-being-blog-posts">Site Updates being Blog Posts</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#site-updates-being-blog-posts" aria-labelledby="site-updates-being-blog-posts"><span hidden="">#</span></a></div>
|
||||
<p>Previously, longer <a href="https://leilukin.neocities.org/categories/site-updates/">site updates</a> were made into their own pages, since Leilukin's Hub did not have its own blog when I made the first site update post. Now these updates are converted into blog posts.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="featured-articles-being-party-of-articles">Featured Articles being Party of Articles</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#featured-articles-being-party-of-articles" aria-labelledby="featured-articles-being-party-of-articles"><span hidden="">#</span></a></div>
|
||||
<p>Formerly, pages that featured my interviews were on their own page called &quot;featured&quot;. Now, these <a href="https://leilukin.neocities.org/articles/#featured-articles">featured articles</a> are merged into the <a href="https://leilukin.neocities.org/articles">articles</a> page.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="scroll-to-top-function">Scroll-to-Top Function</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#scroll-to-top-function" aria-labelledby="scroll-to-top-function"><span hidden="">#</span></a></div>
|
||||
<p>Previously, this site's scroll-to-top function was placed in the footer. Now, I created a scroll-to-top button in the bottom right corner of the page when you scroll down.</p>
|
||||
<div class="heading-wrapper h3">
|
||||
<h3 id="site-layout">Site Layout</h3>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#site-layout" aria-labelledby="site-layout"><span hidden="">#</span></a></div>
|
||||
<p>The main title of each page is now displayed above both the main content and sidebars, instead of just above the main content like in the <a href="https://leilukin.neocities.org/changelogs/layouts/#23-june-2023">previous layout</a>. This change was made so when this site is viewed on mobile, the table of contents of the left sidebar will be displayed above the main content but still below the page's main title. Previously, I had to place the table of contents on both the left sidebar and the main content's body, and hide the sidebar table of contents when viewed on mobile.</p>
|
||||
<p>I also use <a href="https://css-tricks.com/snippets/css/complete-guide-grid/">CSS grid</a> to set the page layout in that the main content's width will remain the same instead of expanding if there is no sidebar on the page.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="use-github-actions-to-deploy-leilukins-hub-to-neocities">Use GitHub Actions to deploy Leilukin's Hub to Neocities</h2>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#use-github-actions-to-deploy-leilukins-hub-to-neocities" aria-labelledby="use-github-actions-to-deploy-leilukins-hub-to-neocities"><span hidden="">#</span></a></div>
|
||||
<p>Eleventy is great for reducing many workloads in maintaining and updating my website, so how about publishing the website to Neocities? That is where the <a href="https://docs.github.com/en/actions">GitHub actions</a> comes in.</p>
|
||||
<p>Before I decided to use a static site generator to rebuild Leilukin's Hub, I discovered the GitHub action named <a href="https://github.com/bcomnes/deploy-to-neocities">deploy-to-neocities</a>, which as the name suggests, allows you to publish your website directly from a GitHub repository to Neocities. I succeeded in deploying all the files of Leilukin's Hub to Neocities with it even before starting to rebuild my website with Eleventy.</p>
|
||||
<p>I have been using Visual Studio Code to write the code for Leilukin's Hub, and saving a copy of all the files of my website on my own computer. The combination of creating a Git repository for Leilukin's Hub and using the deploy-to-neocities GitHub action saves the time and workload needed to log in to Neocities, navigate the files and folders and open a file to edit the code every time I want to make a change to my website.</p>
|
||||
<div class="heading-wrapper h2">
|
||||
<h2 id="a-weeks-worth-of-effort-well-spent">A Week's Worth of Effort Well-Spent</h2>
|
||||
<a class="heading-anchor" href="https://leilukin.neocities.org/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/#a-weeks-worth-of-effort-well-spent" aria-labelledby="a-weeks-worth-of-effort-well-spent"><span hidden="">#</span></a></div>
|
||||
<p>I had spent a whole week in rebuilding Leilukin's Hub from scratch with Eleventy, and at last completing the process on 20 April 2024. Most of the time rebuilding this website was spent on setting up layout templates, rather than changing the format of my articles and blog posts from HTML to markdown. However, the effort and time spent was worth it, and Leilukin's Hub feels new again.</p>
|
||||
<p>Welcome to the rebuilt Leilukin's Hub! 🥳</p>
|
||||
</content>
|
||||
</entry>
|
||||
|
||||
<entry>
|
||||
<title>Changelog: 20 April 2024</title>
|
||||
<link href="https://leilukin.neocities.org/"/>
|
||||
|
|
|
|||
|
|
@ -398,7 +398,8 @@
|
|||
<a href="/blog/posts/2023-10-30-support-for-my-steam-review-of-a-summers-end/">Support for My Steam Review of A Summer's End — Hong Kong 1986</a></li><li>
|
||||
<a href="/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/">I Can Finally Game on a Solid-State Drive</a></li><li>
|
||||
<a href="/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/">Finally Beat A Bug's Life The Video Game — 24 Years Later</a></li><li>
|
||||
<a href="/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/">I Received a Lifetime Premium Membership on Nexus Mods for Free</a></li></ul></li></ul></li><li>
|
||||
<a href="/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/">I Received a Lifetime Premium Membership on Nexus Mods for Free</a></li><li>
|
||||
<a href="/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/">April 2024 Leilukin's Hub Overhaul with Eleventy</a></li></ul></li></ul></li><li>
|
||||
<a href="/articles/">Articles</a><ul><li>
|
||||
<a href="/articles/kotor2-modder-interview-ars-technica/">The modders who spent 15 years fixing Knights of the Old Republic 2 @ Ars Technica</a></li><li>
|
||||
<a href="/articles/lgbtq-booklet-interview-misi-bawang/">Floating in a Sky Full of Pride: LGBTQ+ Booklet Artist Interview from MISI:Bawang</a></li><li>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
---
|
||||
articleTitle: April 2024 Leilukin's Hub Overhaul with Eleventy
|
||||
desc: I rebuilt Leilukin's Hub with the static site genertor Eleventy in April 2024.
|
||||
date: 2024-04-21
|
||||
categories: ["site updates"]
|
||||
toc: true
|
||||
---
|
||||
|
||||
Leilukin's Hub just overgone a major overhaul: In April 2024, I have been rebuilding this entire website with the [static site generator](https://en.wikipedia.org/wiki/Static_site_generator) (SSG), [Eleventy](https://www.11ty.dev/), often abbreviated as 11ty, and the process was completed on 20 April 2024.
|
||||
|
||||
After building this website for more than a year, Eleventy finally provided the solution for me to maintain, manage and update my website in more dynamic and sufficient ways to save time.
|
||||
|
||||
## Challenges of Maintaining a Growing Website
|
||||
|
||||
Leilukin's Hub has come a long way since launch on 11 September 2022, from a small website with a few pages and a simple layout, to a full-fledged personal website with multiple [articles](/articles), a [blog](/blog), a couple of [shrines](/shrines) with additional features such as sticky navigation bar, table of contents, etc. Meanwhile, I have also been learning web development, which helped to improve this website in multiple ways.
|
||||
|
||||
However, more content on my website also means more work to maintain. In particular, I have been trying to find ways to render components that share across multiple pages on my site, such as the header, navigation bar and footer, without having to copy and pasting the code of these components over and over whenever I want to add a new page. I had used JavaScript for this, but it is still not the best solution because I still needed to add a link to my JavaScript file in HTML. Thankfully, I eventually discovered Eleventy as the solution.
|
||||
|
||||
## Why Eleventy?
|
||||
|
||||
There are [many static site generators](https://jamstack.org/generators/), so why I choose Eleventy over others? The main reason is Eleventy's flexibility. You can start building your website with Eleventy with something as simple as [an `index.md` Markdown file](https://hamatti.org/posts/index-md-is-valid-eleventy-project/).
|
||||
|
||||
In addition, Eleventy's own features, support for many [template languages](https://www.11ty.dev/docs/languages/) and plugins allow me to have control over how I build and customise my own website, some of which I will highlight as I elaborate the changes and improvements I had made to this website below.
|
||||
|
||||
## New Features of Leilukin's Hub
|
||||
|
||||
### Pagination
|
||||
|
||||
Leilukin's Hub [blog](/blogs) and main [changelogs](/changelogs) page now has pagination, thanks to [Eleventy's built-in support for the feature](https://www.11ty.dev/docs/pagination/).
|
||||
|
||||
### Estimated Reading Time for Articles and Blog Posts
|
||||
|
||||
Thanks to [Emoji Read Time](https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-emoji-readtime), a community plugin for Eleventy, my articles and blog posts now show the piece's estimated reading time before the main content.
|
||||
|
||||
### Heading Anchor Links
|
||||
|
||||
For the articles, blog posts and some other pages that have headings, I have enabled anchor links on the headings by referring to the [11ty Slugs and Anchors guide](https://11ty.rocks/eleventyjs/slugs-anchors/#enable-anchor-links-on-content-headings) from the website 11ty Rocks!, installing and configuring the [markdown-it-anchor](https://www.npmjs.com/package/markdown-it-anchor) plugin.
|
||||
|
||||
Having a plugin that automatically generates heading anchor links also allows me to generate table of contents by installing the [eleventy-plugin-nesting-toc](https://www.npmjs.com/package/eleventy-plugin-nesting-toc) plugin.
|
||||
|
||||
### Content Categories
|
||||
|
||||
Eleventy's [collection](https://www.11ty.dev/docs/collections/) feature allows users to group site content by tags and create custom collections. This feature allows me to add categories to my articles and blog posts, and in turn allows visitors to browse my website by [categories](/categories).
|
||||
|
||||
### Archive for All My Articles and Blog Posts
|
||||
|
||||
Eleventy's collection feature also allows me to dynamically display links to my articles and posts when I make a new one, without needing to edit more pages to add the new links myself. Therefore, I took advantage of this feature by creating an [archive] page to display all my articles and blog posts.
|
||||
|
||||
Furthermore, my articles, blog and posts now has a right sidebar with links to my articles, blog posts as well as their archives and categories.
|
||||
|
||||
### Breadcrumbs
|
||||
|
||||
Some contents on Leilukin's Hub now has [breadcrumbs](https://www.seoptimer.com/blog/breadcrumbs-website/), which shows the locations of these contents within this website and provides another means for visitors to navigate this site.
|
||||
|
||||
## Improved Features of Leilukin's Hub
|
||||
|
||||
### Blog
|
||||
|
||||
Leilukin's Hub blog was [launched on 28 January 2023](https://leilukin.neocities.org/blog/posts/2023-01-28-leilukins-hub-now-has-a-blog/). Formerly, the blog was built with [Zonelets](https://zonelets.net/); now I take advantage of Eleventy's flexibility by recreating Leilukin's Hub blog with it, thus using the main site's layout for the blog instead of [using a different layout](/changelogs/layouts/#11-september-2023-blog-layout). This makes the blog actually feels like it is part of this website.
|
||||
|
||||
### Site Map
|
||||
|
||||
Visually, my [site map](/sitemap) does not change much other than tweaking the spacing, but under the hood, I use the Eleventy's official [Navigation](https://www.11ty.dev/docs/plugins/navigation/) plugin to generate the links to my pages in a hierarchical manner.
|
||||
|
||||
### RSS Feed
|
||||
|
||||
I had created an RSS feed for Leilukin's Hub's changelogs and blog posts for a while, but previously I had to create new entries in the feed manually by using [RSS Builder](https://sourceforge.net/projects/rss-builder/). Now by installing and setting up Eleventy's official [RSS](https://www.11ty.dev/docs/plugins/rss/) plugin, new feed entries will be generated automatically when I make new changelogs, articles and blog posts.
|
||||
|
||||
## Other Notable Changes of Leilukin's Hub
|
||||
|
||||
The following changes are not related to any features inherent to Eleventy or its plugins, but they were part of my process of rebuilding Leilukin's Hub.
|
||||
|
||||
### Site Updates being Blog Posts
|
||||
|
||||
Previously, longer [site updates](/categories/site-updates/) were made into their own pages, since Leilukin's Hub did not have its own blog when I made the first site update post. Now these updates are converted into blog posts.
|
||||
|
||||
### Featured Articles being Party of Articles
|
||||
|
||||
Formerly, pages that featured my interviews were on their own page called "featured". Now, these [featured articles](/articles/#featured-articles) are merged into the [articles](/articles) page.
|
||||
|
||||
### Scroll-to-Top Function
|
||||
|
||||
Previously, this site's scroll-to-top function was placed in the footer. Now, I created a scroll-to-top button in the bottom right corner of the page when you scroll down.
|
||||
|
||||
### Site Layout
|
||||
|
||||
The main title of each page is now displayed above both the main content and sidebars, instead of just above the main content like in the [previous layout](/changelogs/layouts/#23-june-2023). This change was made so when this site is viewed on mobile, the table of contents of the left sidebar will be displayed above the main content but still below the page's main title. Previously, I had to place the table of contents on both the left sidebar and the main content's body, and hide the sidebar table of contents when viewed on mobile.
|
||||
|
||||
I also use [CSS grid](https://css-tricks.com/snippets/css/complete-guide-grid/) to set the page layout in that the main content's width will remain the same instead of expanding if there is no sidebar on the page.
|
||||
|
||||
## Use GitHub Actions to deploy Leilukin's Hub to Neocities
|
||||
|
||||
Eleventy is great for reducing many workloads in maintaining and updating my website, so how about publishing the website to Neocities? That is where the [GitHub actions](https://docs.github.com/en/actions) comes in.
|
||||
|
||||
Before I decided to use a static site generator to rebuild Leilukin's Hub, I discovered the GitHub action named [deploy-to-neocities](https://github.com/bcomnes/deploy-to-neocities), which as the name suggests, allows you to publish your website directly from a GitHub repository to Neocities. I succeeded in deploying all the files of Leilukin's Hub to Neocities with it even before starting to rebuild my website with Eleventy.
|
||||
|
||||
I have been using Visual Studio Code to write the code for Leilukin's Hub, and saving a copy of all the files of my website on my own computer. The combination of creating a Git repository for Leilukin's Hub and using the deploy-to-neocities GitHub action saves the time and workload needed to log in to Neocities, navigate the files and folders and open a file to edit the code every time I want to make a change to my website.
|
||||
|
||||
## A Week's Worth of Effort Well-Spent
|
||||
|
||||
I had spent a whole week in rebuilding Leilukin's Hub from scratch with Eleventy, and at last completing the process on 20 April 2024. Most of the time rebuilding this website was spent on setting up layout templates, rather than changing the format of my articles and blog posts from HTML to markdown. However, the effort and time spent was worth it, and Leilukin's Hub feels new again.
|
||||
|
||||
Welcome to the rebuilt Leilukin's Hub! 🥳
|
||||
Loading…
Reference in New Issue