leilukin-site/src/statements/colophon.md

67 lines
4.8 KiB
Markdown
Raw Normal View History

2024-06-07 06:05:18 +00:00
---
title: Colophon
keyword: colophon page
updated: 2024-07-11
toc: true
2024-06-07 06:05:18 +00:00
eleventyNavigation:
order: 14
2024-06-07 06:05:18 +00:00
---
2024-06-07 11:42:49 +00:00
Information about how this website is built.
2024-06-07 06:05:18 +00:00
2024-06-07 11:42:49 +00:00
## Technology
2024-06-07 06:05:18 +00:00
* Built with the static site generator [Eleventy](https://www.11ty.dev/)
* Templating languages: Nunjucks and Markdown
* Code written with Visual Studio Code
* JavaScript runtime: [Bun](https://bun.sh)
* Source code available on [GitHub](https://github.com/helenclx/leilukin-site) and its [Gitea mirror](https://git.32bit.cafe/Leilukin/leilukin-site)
2024-06-07 06:05:18 +00:00
## Host and Domain
2024-06-07 11:42:49 +00:00
* Deployed to [Netlify](https://www.netlify.com/) from this site's GitHub repository
2024-06-07 06:05:18 +00:00
* The domain name, `{{ sitemeta.siteDomain }}`, was purchased from, registered on, and is managed by [Porkbun](https://porkbun.com/)
## Plugins
* Eleventy's official [RSS](https://www.11ty.dev/docs/plugins/rss/) plugin
* Eleventy's official [Navigation](https://www.11ty.dev/docs/plugins/navigation/) plugin
* [@zachleat/details-utils](https://www.npmjs.com/package/@zachleat/details-utils)
2024-06-07 06:05:18 +00:00
### Eleventy Community Plugins
* [@11tyrocks/eleventy-plugin-emoji-readtime](https://www.npmjs.com/package/@11tyrocks/eleventy-plugin-emoji-readtime)
* [eleventy-plugin-embed-everything](https://www.npmjs.com/package/eleventy-plugin-embed-everything)
* [eleventy-plugin-metagen](https://www.npmjs.com/package/eleventy-plugin-metagen)
* [@uncenter/eleventy-plugin-toc](https://www.npmjs.com/package/@uncenter/eleventy-plugin-toc)
2024-06-07 06:05:18 +00:00
### markdown-it plugins
Eleventy has the Markdown parser [markdown-it](https://www.npmjs.com/package/markdown-it) built in to render Markdown to HTML.
* [markdown-it-anchor](https://www.npmjs.com/package/markdown-it-anchor)
* [markdown-it-attribution](https://www.npmjs.com/package/markdown-it-attribution)
* [markdown-it-attrs](https://www.npmjs.com/package/markdown-it-attrs)
* [markdown-it-bracketed-spans](https://www.npmjs.com/package/markdown-it-bracketed-spans)
* [markdown-it-deflist](https://www.npmjs.com/package/markdown-it-deflist)
* [markdown-it-footnote](https://www.npmjs.com/package/markdown-it-footnote)
2024-06-07 06:05:18 +00:00
## Self-hosted Assets
* [Lexend](https://www.lexend.com/) font family (used as the default font of this site)
* [Intel One Mono](https://www.intel.com/content/www/us/en/company-overview/one-monospace-font.html) typeface (used as the monospace font of this site)
* [Font Awesome](https://fontawesome.com/) (brand icons only)
2024-06-07 06:05:18 +00:00
## JavaScript
2024-06-07 11:42:49 +00:00
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:
2024-06-07 06:05:18 +00:00
* 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:
* [{% cite "A Summers End — Hong Kong 1986" %}](/shrines/asummersend)
* [{% cite "Star Wars: Knights of the Old Republic" %}](/shrines/starwarskotor)
* [{% cite "Cassette Beasts" %}](/shrines/cassettebeasts)
2024-06-07 06:05:18 +00:00
* Birthdays of characters from {% cite "A Summers End — Hong Kong 1986" %} on its shrine.
* When this site is viewed on mobile devices, the navigation bar's hamburger menu uses JavaScript to enable using the Escape key to close the navigation manu.
* Scott O'Hara's [ARIA Tooltips](https://github.com/scottaohara/a11y_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)](https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html), by allowing visitors to see tooltips on keyboard focus and dismiss tooltips by pressing the Escape key.
* Zach Leatherman's [details-utils](https://www.npmjs.com/package/@zachleat/details-utils) JavaScript package is used to automatically expand sidebar table of contents on wide screens.
2024-06-07 11:42:49 +00:00
* [status.cafe](https://status.cafe/) widget, which is placed on the home page, uses JavaScript to fetch data of my latest status update.
2024-06-07 06:05:18 +00:00
* [Website Carbon Badge](https://www.websitecarbon.com/badge/), which is placed on the home page, uses JavaScript to calculate the carbon footprint of this website.
* [Links page](/links)'s [Websites tab](/links/#websites) includes webring widgets that use JavaScript.
* [Guestbook](/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](https://groundedwren.neocities.org/pages/demo_controls/guestbookDemo)).
2024-06-07 06:05:18 +00:00
You can still access most of the content of this site with JavaScript disabled, but the above components will not work as intended.