Part 14: Project Pages

Getting this dev blog running

Day 14 of setting up 11ty dev blog.

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.
  • Can I use the template inside of dinky that already exists instead of copy/pasting it?
  • Is there a way to have permalinks to posts contain metadata without organizing them into subfolders?

  • 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?

Day 14

Ok, let's work though making these vertical pages a little more functional. We'll start with the home page. I want to have links to the project pages, so I'm going to need to build a URL for those. To do that I think I'll need to place it into my projects object. I can use the same technique of environment variables I set up for the feeds to have proper absolute links here.

I'll add this to project.js.

url: (function(){ return process.env.DOMAIN + "/projects/" + projectDir })(),

Then I can use this data property to build the template links that go out to the project pages.

I don't like the lack of headers, I'll add an hlevel argument to my shortcode to allow me to set headers on each post list.

Good list headers now! Time to add links to the other post lists. I also want to format the post titles with the project name. To do that I'm going to create another shortcode that formats the post titles a little differently.

This also seems like a good time to move my posts over to the right folder.

Ok, adding the site name to the non-index pages and now its time to do some css.

git commit -am "Done with setting up vertical content, on to vertical styles."

Better styles, ready for reuse

Ok, to get the layouts the way I want while still having the base template be very reusable, I need to have some custom CSS that applies only to specific pages. I can handle that by adding an ID with the template name to the body HTML tag. That's easy. But I don't want to load down the CSS file with these file specific rules where I don't need them. So let's accomplish one of my early goals and split the CSS into smaller files.

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

git commit -am "Set up SASS > CSS Code spliting with template selection"

Very annoying that SASS changes don't cause a watch trigger. I'll need to handle that.

eleventyConfig.addWatchTarget("./src/_sass");

Ok. It's looking good now. A basic grid layout that can fit inside the 650px wide main body. I'll need to add some media queries too, but it's the direction I want to go.

Dinner time!

git commit -am "Add front page styles"