Information about how this website is built.
Technology
#- Built with the static site generator Eleventy (version 3.0)
- Templating languages: Nunjucks and Markdown
- Code written with Visual Studio Code
- JavaScript runtime: Bun
- Source code available on GitHub and its Gitea mirror
Host and Domain
#- Deployed to Hostinger from this site's GitHub repository with a GitHub action
- The domain name, leilukin.com, was registered on 30 May 2024, was purchased from, registered on, and is managed by Porkbun
Previously, this website was hosted on Neocities until 31 May 2024, and Netlify until 25 July 2024.
Plugins
#- Eleventy's official RSS plugin
- Eleventy's official Navigation plugin
- Eleventy's official Syntax Highlighting plugin
- @zachleat/details-utils
Eleventy Community Plugins
#- @11tyrocks/eleventy-plugin-emoji-readtime
- eleventy-plugin-embed-everything
- eleventy-plugin-metagen
- @uncenter/eleventy-plugin-toc
markdown-it plugins
#Eleventy has the Markdown parser markdown-it built in to render Markdown to HTML.
- markdown-it-anchor
- markdown-it-attribution
- markdown-it-attrs
- markdown-it-bracketed-spans
- markdown-it-deflist
- markdown-it-footnote
Self-hosted Assets
#- Lexend font family — used as the default font of this site
- Intel One Mono typeface — used as the monospaced font of this site
- Eric Bailey's a11y-syntax-highlighting CSS dark mode stylesheet for Prism.js
JavaScript
#Due to this website being a static site, JavaScript is used to create dynamic and interactive components of this site. Here is a list of how JavaScript is used on this site:
- The header of every page uses JavaScript to detect the visitor's current date, so the header will display a top blurb and in some cases also changes the header background on certain dates, including:
- LGBTQ+ events, International Women's Day, Disability Pride Month, website anniversary and my birthday;
- Release anniversaries of media with dedicated shrines, including:
- Birthdays of characters from A Summer’s End — Hong Kong 1986 on its shrine.
- Scott O'Hara's ARIA Tooltips script is used to implement accessible tooltips that meet Web Content Accessibility Guidelines (WCAG) 2.2 success criterion for 1.4.13: Content on Hover or Focus (Level AA), by allowing visitors to see tooltips on keyboard focus and dismiss tooltips by pressing the Escape key.
- Zach Leatherman's details-utils JavaScript package is used to automatically expand sidebar table of contents on wide screens.
- status.cafe widget, which is placed on the home page, uses JavaScript to fetch data of my latest status update.
- Website Carbon Badge, which is placed on the home page, uses JavaScript to calculate the carbon footprint of this website.
- Links page's Joined tab includes webring widgets that use JavaScript.
- Guestbook uses JavaScript to render a form, send form data to my private Discord channel via Discord webhook, and fetch data from Google Sheets to display messages on the web page (guestbook code by Vera Konigin).
You can still access most of the content of this site with JavaScript disabled, but the above components will not work as intended.
(This colophon page was last updated on 2 August 2024)