Site Notes
about the site
- built with Eleventy, a static site generator.
- hosted on Netlify.
- fonts are Trade Gothic Next, Span, and Odisseia.
- artwork and pixel graphics by me.
changelog
This site is a work in progress. Here's a changelog and notes on building it, mostly for my own reference of why I did things.
Jan. 31
I added a digital garden and moved my code reference page there. This is a static collection with normal posts in it.
Dec. 27, 2020
- Added back an Artwork section, and put up some old art. This is intended to work as more of an archive rather than a "portfolio"—which means I shouldn't be trying to curate it to show only the best stuff. But I do want to add some kind of filtering in the future. I removed the 'sketchbook' page.
- I'm not sure if I should keep the art posts separate from their corresponding blog posts (if it exists) or not. I don't like the duplication.
- Changed the
work
page to adesign
page. I'm still dissatisfied with this though. - I changed some CSS that might have borked my vertical rhythm again. Haha.
Dec. 24
- Added a References page. Initially it was to store boilerplate code (namely, an HTML page skeleton) and then I decided to add some CSS snippets, and then some links I frequently refer to.
- Not sure if this will be useful yet—I've made this kind of reference page before a couple of times, and I ended up never using them. But we'll see, if it's moot again then I can just yeet it off my site.
- (I'm trying not to overthink whether or not I should do something and just do it. And if it doesn't work, then I can undo it. That's the whole point of building this website myself.)
- Not on this site, but: I changed my VS Code editor theme. It used to be Horizon and now it's Base16 Ocean Dark Extended, which is the theme I used to use in Sublime a couple of years ago. It's such a classic. I also changed my font from Consolas to Anonymous Pro. It feels very different and I'm not sure if I like it yet or not. I think my dislike of change is clouding my judgment, so I'm going to give it a week or so.
- Changed my blog archive styling a bit. I wanted to add excerpts, but I don't want to write useful excerpts. Haha. Another time.
In the more abstract: I added a few more lines to my homepage about the site and my plans with it. I saw this tweet today that made me think more about how I should truly personalize my site. I built it but it still does feel quite cold, because I don't get very personal.
Building on this, I have also been looking at others' personal sites. There were a couple of standouts I found that really emulated the kinds of things I want to do, and they also had acknowledgement pages that cited their inspirations and peers. And then there was just like, no women cited. So. I should just keep trucking along on this and not feel doubtful about whether or not this is "worth" putting out into the world, for the representation or whatever.
Dec. 19
- Removed artwork section, moved the posts to Blog. I think I will eventually put an art section back but the posts currently fit better as regular blog posts.
- Fixed my horrible vertical margin issues, which I hope are mostly resolved now.
- Styled the
<pre>
block.
Dec. 13
- Refactored the syntax for my post grid, in order to accommodate my newly migrated Seattle blog post which uses grid based on aspect ratios for images.
- Priority: markdown/HTML that is easier to write, instead of verbose markdown/HTML and efficient css (wow this sounds horrible to type out)
- My margin collapse status remains in disarray and I am pretending not to notice it
Nov. 14
- Added swashes to page/post titles, which also required making them titlecase instead of my previous all-lowercase aesthetic.
- Added artwork category and Drifter post
- Refactored post markup to use css grid, based on this blog post. This unfortunately introduced a lot of spacing problems because margins no longer collapse, but I am too tired to deal with it today 🙃 the perk of this method is that my markup/markdown is less verbose, despite the more annoying css.
Nov. 7
Added support for a Table of Contents. This works by:
- Setting
toc: true
in the post's frontmatter - The npm plugin markdown-it-anchor adds an
id
to every heading tag based on its text (from this blog post) - Using JavaScript to pull all the headings on a page and generate a list with anchor links, which is inserted at the top of the post.
I updated my blog layout to be left aligned instead of centered, which allows for more space to be used for asides and the TOC.
Oct. 17
Added support for <aside>
margin notes. This is a hacky implementation involving:
- HTML: a wrapper div around the paragraph and the aside
- CSS: absolute positioning the aside to display it in the margins
My original idea was using float: right
on the <aside>
, except this required that the aside come before the paragraph it referenced, which is semantically incorrect. I found this detailed post on sidenotes by Gwern Branwen that compares and examines how different sites do sidenotes.
I scrapped my initial goal of being able to sync up sidenotes/footnotes and decided to just go with asides as sidenotes that would exist relative to a paragraph, and footnotes would be used for reference links or more independent things not tied to a specific place in the text.
I'll probably revisit this usage in the future as I add more blog posts.
In design notes, I swapped out green as a complementary colour and replaced it with lilac, and drew a little pixel controller for my migrated 2020 games post.
Oct. 13
Added a sketchbook page. Ideally this will be a dynamic collection that can serve as a canonical source for my sketches (or similar quick artwork).
- why: I post these on social media, where it then gets lost over time. If I wanted to point people to some series of [whatever works] I made, there wouldn't be a clean way of doing it (‘oh here are ten different tweets of mine’).
- structure: I know from my previous ‘photo log’ attempt that having a new post per sketch/photo is too labourious, so it's more sustainable to have a post containing multiple sketches.
- content and metadata: each post would have a
name
anddescription
. Each sketch within a post would have animg
,alt text
, andcaption
. A post can contain multiple sketches. Should a post ever contain only one sketch? - organization: How I'll group things together will depend on how I anticipate I might reference them in the future. For example, my current
Hades sketches
collection seems more relevant than having anOctober 2020 sketches
collection. - currently: my sketchbook page is just hardcoded HTML, because I wanted to get writing the markup out of the way. I'm thinking the structure would either be looping through a collection of posts, or pulling from a JSON file.
Added this site notes page. I wonder if it will be helpful to publicly record my thinking process behind things?
- Unsure if this would work better as an actual collection of posts, rather than a static page I update—depends on how often I end up using this. If it keeps expanding with long blocks of text (like today's log), then it might work better as proper blog posts.
Oct. 10
Launched! 🎉 I transformed my old static site of two HTML pages into an Eleventy blog. I had set up a dummy blog an entire year ago and then didn't do anything, so I built on top of that. I migrated the one post I had on my old jekyll blog (RIP) that was somewhat presentable, and drew new tiny pixel art graphics.
site docs
aka: how do i run this site? I will probably forget if I don't touch it for a month, so recording here:
Run eleventy: npx @11ty/eleventy --serve
starting a new 11ty project
—on a computer that already has 11ty installed. abridged from the official getting started docs
cd project-directory
npm init -y
npm install --save-dev @11ty/eleventy
npx @11ty/eleventy --serve
create .eleventy.js
file in root directory
add css/imgs to load in _site
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy('css');
eleventyConfig.addPassthroughCopy('img');
return {
passthroughFileCopy: true
}
}
restart 11ty to see these changes npx @11ty/eleventy --serve