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 a design 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 Bran­wen 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 and description. Each sketch within a post would have an img, alt text, and caption. 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 an October 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