Part 23: A Table of Contents

More devblog

Project Scope and ToDos

Static Site Generator that can build the blog and let me host it on Github Pages
I want to write posts in Markdown because I'm lazy, it's easy, and it is how I take notes now.
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.
Once it gets going, I want template changes to be easy.
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.
I require it to be used by a significant percent of my professional peers so I can get easy answers when something goes wrong.
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.

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

Day 23

Huh, pretty sure RSS feeds should be in reverse chronological order, right?

git commit -m "Reverse chronological order on feeds."

Fix Tag Styling

Ok, going to fix the tag styling so it works on all sizes.

git commit -am "Fix post tag section styling"

Activate Table of Contents

Ok, let's try the Table of Contents Plugin real quick. Then I'll need to get the pagination working for tag pages.

I'm going to grab the style from the Wikipedia table of Contents, including their nifty little trick of setting the container to display: table to have it size with the contained text.

Interesting, my Day 1 and Day 2 posts seem to be breaking, with the following error: attempted to output null or undefined value. Looks like it is because there's only an h1 tag generated out of that markdown. Because of that, it seems to be printing it twice.

It looks like the issue is in how the code is processing the headers. But I'm not seeing exactly what it is.

Whatever the problem is, it seems like adding h1 to the set of tags is working. I just need to make sure to use the right headers at the right time when writing my markdown.

I want to have the style working a little better now. That means including the same constant for mobile mode so the TOC can have different header spacing on mobile and desktop. Can I move it to a standalone Sass file?

Ok, easy enough to theoretically work. I can move the variable decleration into constants.sass and then import it using @use 'constants'.

Hmmm. That didn't work. It looks like it should.

I think maybe I need to rename the files to have underscores at the beginning.

Hmm... looks like the variables are namespaced now? Renamed the file to _variables as well. Yup, that seems to have solved the issue.

Now when I want to use variables inside the variables file I have to refer to them as follows:

@media (max-width: variables.$mobile-width)

git commit -m "Add table of contents to posts"

Tag Pages

Ok, next we need to paginate the tag pages. I took the structure for the deepTagList from the vredeburg theme so I'm going to look to their structure for pagination as well.

Hmm, just pulling it in doesn't seem to work, but doesn't throw any useful errors either.

My block rendering doesn't seem to be working as expected?

Here are my blocks:

{% raw %}

<section id="content">
  {% block content %}
  	{{ content | safe }}
  {% endblock %}
</section>
<section id="postcontent">
  {% block postcontent %}
    <!-- postcontent -->
    Post Content Test
  {% endblock %}
</section>

{% endraw %}

And my extending template:

{% raw %}

{% block content %}
    <h2>Posts tagged: {{paged.tagName}}</h2>
    <div id="post-summary-list">
        <ul>
        {%- for post in paged.posts %}
            <li>{% include "partials/post-summary.njk" %}</li>
        {%- endfor %}
        </ul>
    </div>
{% endblock %}

{% block postcontent %}
    <div class="pagination-block">
        Pages:
        {% if collections.tagList[paged.tagName] > site.paginate %}
            <!--Pagination-->
            {% include "partials/pagination.njk" %}
        {% endif %}
    </div>
{% endblock %}

{% endraw %}

But for some reason the content of postcontent is showing up in the content block.

Is there an open tag somewhere?

(Found out that I was copying code with newline controls in it, not a problem, but good to know.)

Gotta stop here.

git commit -am "Finishing off day 23, TOC working, pagination is not."

Previous Day Next Day