818 lines
36 KiB
HTML
818 lines
36 KiB
HTML
<!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 my website with the static site generator 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 my website with the static site generator 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 my website with the static site generator 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/css/pridesymbols.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.7em;
|
|
}
|
|
|
|
.hero__img {
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
|
|
.hero img {
|
|
object-fit: contain;
|
|
overflow: hidden;
|
|
max-height: 16rem;
|
|
|
|
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
|
|
|
}
|
|
</style>
|
|
|
|
<script defer>
|
|
const hero = document.querySelector(".hero");
|
|
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
|
const headerImgEl = document.querySelector(".hero__img");
|
|
|
|
|
|
const todayEvent = getTodayEvent();
|
|
|
|
if (todayEvent) {
|
|
heroTopBarEl.classList.remove('hidden');
|
|
heroTopBarEl.innerHTML = todayEvent.blurb;
|
|
|
|
if (todayEvent.class) {
|
|
headerImgEl.classList.add(todayEvent.class);
|
|
}
|
|
}
|
|
|
|
function getTodayEvent() {
|
|
const date = new Date();
|
|
const month = date.getMonth() + 1;
|
|
const day = date.getDate();
|
|
const year = date.getFullYear();
|
|
const weekOfMonth = Math.ceil(day / 7);
|
|
|
|
const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
|
|
const siteAnniversary = year - leilukinsHubLaunchDate;
|
|
|
|
if (month === 3 && day === 1)
|
|
return {
|
|
blurb: `Today is <a href="https://www.unaids.org/en/zero-discrimination-day" target="_blank">Zero Discrimination Day</a>`,
|
|
class: "flag-progress-intersex",
|
|
};
|
|
else if (month === 3 && day === 8)
|
|
return {
|
|
blurb: `Today is <a href="https://www.internationalwomensday.com/" target="_blank">International Women's Day}</a>`,
|
|
class: "symbol-venus",
|
|
};
|
|
else if (month === 3 && day === 31)
|
|
return {
|
|
blurb: `Today is <a href="https://www.manygendersonevoice.org/tdov.html" target="_blank">Trans Day of Visibility</a>`,
|
|
class: "flag-trans",
|
|
};
|
|
else if (month === 4 && day === 6)
|
|
return {
|
|
blurb: `Today is <a href="https://internationalasexualityday.org/en" target="_blank">International Asexuality Day</a>`,
|
|
class: "flag-ace",
|
|
};
|
|
else if (month === 4 && day === 26)
|
|
return {
|
|
blurb: `Today is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Day</a>`,
|
|
class: "flag-lesbian",
|
|
};
|
|
else if (month === 4 && weekOfMonth === 4)
|
|
return {
|
|
blurb: `This week is <a href="https://www.lesbianvisibilityweek.com" target="_blank">Lesbian Visibility Week</a>`,
|
|
class: "flag-lesbian",
|
|
};
|
|
else if (month === 5 && day === 17)
|
|
return {
|
|
blurb: `Today is <a href="https://may17.org" target="_blank">International Day Against Homophobia, Biphobia and Transphobia</a>`,
|
|
class: "flag-progress",
|
|
};
|
|
else if (month === 5 && day === 19)
|
|
return {
|
|
blurb: `Today is <a href="https://www.believeoutloud.com/voices/article/agender-pride-day/" target="_blank">Agender Pride Day</a>`,
|
|
class: "flag-agender",
|
|
};
|
|
else if (month === 5 && day === 25)
|
|
return {
|
|
blurb: `Today is <a href="https://genderedintelligence.co.uk/panvisibilityday" target="_blank">Pansexual and Panromantic Awareness and Visibility Day</a>`,
|
|
class: "flag-pan",
|
|
};
|
|
else if (month === 6)
|
|
return {
|
|
blurb: `Happy <a href="https://www.loc.gov/lgbt-pride-month/about/" target="_blank">Pride Month</a>!`,
|
|
class: "flag-progress-intersex",
|
|
};
|
|
else if (month === 7 && day === 14)
|
|
return {
|
|
blurb: `Today is <a href="https://www.manygendersonevoice.org/non-binary-peoples-day.html" target="_blank">Non-Binary People's Day</a>`,
|
|
class: "flag-non-binary",
|
|
};
|
|
else if (month === 7 && day === 28)
|
|
return {
|
|
blurb: `Today is Leilukin's Birthday`
|
|
};
|
|
else if (month === 8 && day === 25)
|
|
return {
|
|
blurb: `Today is <a href="https://aromanticspectrumday.net/" target="_blank">Aromantic Spectrum Visibility Day</a>`,
|
|
class: "flag-aro",
|
|
};
|
|
else if (month === 9 && day === 11)
|
|
return {
|
|
blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin's Hub`
|
|
};
|
|
else if (month === 9 && day === 23)
|
|
return {
|
|
blurb: `Today is <a href="https://bivisibilityday.com/about" target="_blank">Bi Visibility Day</a>`,
|
|
class: "flag-bi",
|
|
};
|
|
else if (month === 10 && day === 8)
|
|
return {
|
|
blurb: `Today is <a href="https://www.lgbtiqhealth.org.au/international_lesbian_day2" target="_blank">International Lesbian Day</a>`,
|
|
class: "flag-lesbian",
|
|
};
|
|
else if (month === 10 && day === 11)
|
|
return {
|
|
blurb: `Today is <a href="https://www.hrc.org/resources/national-coming-out-day" target="_blank">National Coming Out Day</a>`,
|
|
class: "flag-rainbow",
|
|
};
|
|
else if (month === 10 && day === 17)
|
|
return {
|
|
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week" target="_blank">Genderfluid Visibility Week</a>`,
|
|
class: "flag-genderfluid",
|
|
};
|
|
else if (month === 10 && day === 24)
|
|
return {
|
|
blurb: `Today is the start of <a href="https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week" target="_blank">Ace Week</a>`,
|
|
class: "flag-ace",
|
|
};
|
|
else if (month === 10 && day === 26)
|
|
return {
|
|
blurb: `Today is <a href="https://interactadvocates.org/intersex-awareness-day" target="_blank">Intersex Awareness Day</a>`,
|
|
class: "flag-intersex",
|
|
};
|
|
else if (month === 11 && day === 13)
|
|
return {
|
|
blurb: `Today is the start of <a href="https://glaad.org/transweek/" target="_blank">Transgender Awareness Week</a>`,
|
|
class: "flag-trans",
|
|
};
|
|
else
|
|
return null;
|
|
}
|
|
|
|
</script>
|
|
<nav class="navbar">
|
|
<div class="navbar__header">
|
|
<button class="navbar__toggle" aria-label="Navigation menu toggle">
|
|
<i class="fa-solid fa-bars"></i>
|
|
</button>
|
|
<h2 class="navbar__title">Navigation</h2>
|
|
</div>
|
|
<ul class="navbar__links">
|
|
|
|
|
|
|
|
<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.6em 1em;
|
|
width: 100%;
|
|
z-index: 999;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.navbar__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.8em;
|
|
}
|
|
|
|
.navbar__toggle {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 1.3rem;
|
|
background-color: inherit;
|
|
color: var(--clr-navbar-link);
|
|
}
|
|
|
|
.navbar__toggle:focus,
|
|
.navbar a:focus {
|
|
outline: 0.15em solid var(--clr-navbar-link);
|
|
}
|
|
|
|
.navbar__title {
|
|
font-size: 1.3rem;
|
|
color: var(--clr-navbar-link);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.navbar__links {
|
|
list-style: none;
|
|
display: none;
|
|
gap: 1em;
|
|
padding: 0.5em 2em;
|
|
overflow: auto;
|
|
}
|
|
|
|
.navbar__links--show {
|
|
display: grid;
|
|
}
|
|
|
|
/* Tablet screen size */
|
|
@media only screen and (min-width: 43.75rem) {
|
|
.navbar {
|
|
padding: 0 0.6em;
|
|
}
|
|
|
|
.navbar__header {
|
|
display: none;
|
|
}
|
|
|
|
.navbar__links {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
gap: 0.5em;
|
|
flex-wrap: wrap;
|
|
padding: 0;
|
|
overflow: unset;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script defer>
|
|
const navbarToggle = document.querySelector('.navbar__toggle');
|
|
const navbarLinks = document.querySelector(".navbar__links");
|
|
|
|
navbarToggle.addEventListener('click', () => {
|
|
navbarLinks.classList.toggle("navbar__links--show");
|
|
});
|
|
</script>
|
|
|
|
<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>🍿 7 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>
|
|
|
|
<li><a href="#now-page">Now Page</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="#direct-visit-to-leilukins-hub-home-page">Direct Visit to Leilukin's Hub Home Page</a>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
|
|
<li><a href="#my-creation-page-renamed-to-projects">My Creation Page Renamed to Projects</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="#responsive-shrine-header-images">Responsive Shrine Header Images</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="/blog">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 h3">
|
|
<h3 id="now-page">Now Page</h3>
|
|
<a class="heading-anchor" href="#now-page" aria-labelledby="now-page"><span hidden>#</span></a></div>
|
|
<p>Inspired by the <a href="https://nownownow.com/about">nownownow.com</a> website, I have added a <a href="/now">Now page</a> to Leilukin's Hub. This page is about what I am doing and focusing at the moment. The page can be updated at any time, so feel free to check it out when you visit this website to learn what I am up to!</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 <a href="/feed.xml">RSS feed</a> 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="direct-visit-to-leilukins-hub-home-page">Direct Visit to Leilukin's Hub Home Page</h3>
|
|
<a class="heading-anchor" href="#direct-visit-to-leilukins-hub-home-page" aria-labelledby="direct-visit-to-leilukins-hub-home-page"><span hidden>#</span></a></div>
|
|
<p>I have removed the "launch page" that was used as the very first page you saw when you visited the link <a href="https://leilukin.neocities.org/">leilukin.neocities.org</a>. Now when you visit the link to my website, you will immediately see the home page wihout any extra step.</p>
|
|
<div class="heading-wrapper h2">
|
|
<h2 id="my-creation-page-renamed-to-projects">My Creation Page Renamed to Projects</h2>
|
|
<a class="heading-anchor" href="#my-creation-page-renamed-to-projects" aria-labelledby="my-creation-page-renamed-to-projects"><span hidden>#</span></a></div>
|
|
<p>The page listing the things I have created has been renamed from "My Creation" to <a href="/projects">"Projects"</a>.</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="responsive-shrine-header-images">Responsive Shrine Header Images</h3>
|
|
<a class="heading-anchor" href="#responsive-shrine-header-images" aria-labelledby="responsive-shrine-header-images"><span hidden>#</span></a></div>
|
|
<p>I have created two different resolutions of each header image of my <a href="/shrines">shrines</a>. Which version of the shrine header image gets displayed depends on if your screen is horizontal or vertical.</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><li>Next Post: <a href="/blog/posts/2024-04-27-lesbian-visibility-day1-year-anniversary-of-cassette-beasts/">Happy Lesbian Visibility Day and 1-Year Anniversary of Cassette Beasts</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/posts/">Blog Archive</a></li>
|
|
|
|
<li><a href="/blog/">Blog Home</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;
|
|
}
|
|
|
|
.breadcrumbs li::after {
|
|
content: '➔';
|
|
padding-left: 0.3em;
|
|
}
|
|
</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;
|
|
width: 100%;
|
|
background: var(--clr-main-footer-bg);
|
|
padding: 1rem 1rem 3rem 1rem;
|
|
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;
|
|
}
|
|
|
|
/* Screen sizes larger than mobile */
|
|
@media only screen and (min-width: 30rem) {
|
|
.footer {
|
|
padding: 1rem 1rem 2rem 1rem;
|
|
}
|
|
}
|
|
|
|
/* Tablet screen size */
|
|
@media only screen and (min-width: 43.75rem) {
|
|
.footer {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
<button class="top-btn hidden" aria-label="Scroll to top">
|
|
<i class="fa-solid fa-chevron-up"></i>
|
|
</button>
|
|
|
|
<style>
|
|
.top-btn {
|
|
position: fixed;
|
|
margin: 0;
|
|
padding: 0;
|
|
bottom: 0.5rem;
|
|
right: 0.5rem;
|
|
z-index: 999;
|
|
border: none;
|
|
background-color: var(--clr-top-btn-bg);
|
|
color: var(--clr-top-btn-txt);
|
|
border-radius: 50em;
|
|
width: 2rem;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.top-btn:focus {
|
|
outline: 0.25em solid var(--clr-top-btn-bg);
|
|
outline-offset: 0.15em;
|
|
}
|
|
</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> |