Part 25: Tweaking TOC Styles

Project Scope and ToDos

1. Static Site Generator that can build the blog and let me host it on Github Pages
2. I want to write posts in Markdown because I'm lazy, it's easy, and it is how I take notes now.
3. I don't want to spend a ton of time doing design work. I'm doing complicated designs for other projects, so I want to pull a theme I like that I can rely on someone else to keep up.
4. Once it gets going, I want template changes to be easy.
5. It should be as easy as Jekyll, so I need to be able to build it using GitHub Actions, where I can just commit a template change or Markdown file and away it goes. If I can't figure this out than fk it, just use Jekyll.
6. I require it to be used by a significant percent of my professional peers so I can get easy answers when something goes wrong.
7. I want source maps. This is a dev log site which means whatever I do with it should be easy for other developers to read.

• Also the sitemap plugin looks cool. Should grab that later.

• So does the reading time one.

• Also this TOC plugin mby?

• Use Data Deep Merge in this blog.

• Decide if I want to render the CSS fancier than just a base file and do per-template splitting.

• How do I cachebreak files on the basis of new build events? Datetime? site.github.build_revision is how Jekyll accomplishes this, but is there a way to push that into the build process for Eleventy?

• Make link text look less shitty. It looks like it is a whole, lighter, font.

• Code blocks do not have good syntax highlighting. I want good syntax highlighting.

• Build a Markdown-it plugin to take my typing shortcuts [prob, b/c, ...?] and expand them on build.

• See if we can start Markdown's interpretation of H tags to start at 2, since H1 is always pulled from the page title metadata. If it isn't easy, I just have to change my pattern of writing in the MD documents.

• Should I explore some shortcodes?

• Order projects listing by last posted blog in that project

• Limit the output of home page post lists to a specific number of posts

• Show the latest post below the site intro on the homepage.

• Tags pages with Pagination

• Posts should be able to support a preview header image that can also be shown on post lists.

• Create a Markdown-It plugin that reads the project's repo URL off the folder data file and renders commit messages with links to the referenced commit. (Is this even possible?) (Is there a way to do it with eleventy instead?)

• Create Next Day/Previous Day links on each post / Next/Previous post on post templates from projects

• Tags should be in the sidebar of articles and link to tag pages

• Create a skiplink for the todo section (or would this be better served with the ToC plugin?) - Yes it would be!

• Add a Things I Learned section to the project pages that are the things I learned from that specific project.

• Add a technical reading log to the homepage

• Hide empty sections.

• Add byline to post pages

• Have table of contents attach to sidebar bottom on mobile

• Support dark mode

• Social Icons

• SEO/Social/JSON-LD HEAD data

Day 25

Ok, wow, looking back on my last "day's" notes and it has been a while. Almost a month. I got very busy!

I did a quick review of some of my tasks and checked them off. Getting closer to catching up with my ever-broadining scope!

After some examination of what is in the project thus far and what I've added and completed... I think this is the time to declare a lock on this project. I've added two more items to complete and the 7 primary features I required from this project are done. Now, once I check off all the items of the remaining To Dos I think it'll be time to shift my focus back to Backreads... or to another project.

Ok! That's settled then!

The tag pages do appear to have working pagination with my last changes, though they need some design work, so it seems like now is a good time to do some CSS work!

I'll pull most of the preexisting classes that were on the elements from the theme I took the HTML from and add one of my own for disabled links, that'll be good to reuse. I'll also need to make sure to add an override for the hover state.

Skip code block ▼

.disabled-link
    color: grey
    text-decoration: none
    &:hover
        text-decoration: none
        color: grey

I next need to set the pagination links to align with the article block. I'll give it a left padding of 25px to match the UL indentation on tag pages. Now I need to make it clearer what the links are and what they do.

It's sort of old school, but I'll layer some basic colors and a drop shadow. Why not?

• Tags pages with Pagination

git commit -m "Style pagination"

Ok, I'm going to add a sass file and a few per-file overrides to support a dark theme.

• Support dark mode

git commit -am "Set up dark mode styles"

Ok, I'm going to move the post description to be below the table of contents and that way I can set a fixed position for the ToC on wider screens and not worry about the header area overlapping with the fixed contents position. And to make sure it doesn't overlap with the footer I'll give it a max-height and set it to scroll if there is too much content.

git commit -am "Set fixed table of contents"

Ok, pretty good for a short day's work!