display note tags

[binyamin]

Use hashtags to generate lists of related notes. Each hashtag should link to the relevant list.

Example: Some of my notes include the text "#art". I want a page which lists all notes containing "#art". The page should be /tag/art, or something similar.

Alternatives: Depending on how the search function (#11) is implemented, you could simply link all hashtags to a search query like /search?tag=art.

[binyamin]

Maybe a better solution would be to write a guide on adding it.

[tannerdolby]

Hi @binyamin -- I'm happy to take on this issue.

[binyamin]

@tannerdolby Thanks so much! By the way, I did something similar in my personal site. Also, I just remembered: with #11, could this become a search feature instead of a dedicated page?

[tannerdolby]

@binyamin I've prototyped something up based on the similar thing you did on your website.

Within .eleventy.js, I utilized a similar linkify .add method to look for any #tag links within markdown files. This is using a hardcoded URL /notes/tag/art/ until #11 gets implemented or a query URL feature of /notes/tag?filter=art.

Note: I'm using the filter by data-tag feature in my personal website along with the markdown-it implementation for matching hashtags. And using match.url = /writing?filter=html` to utilize the search query, which this could eventually involve into.

.use(function(md) {
    // Recognize Hashtag links (#tag)
    md.linkify.add("#", {
        validate: /^[\w-]+/,
        normalize: match => {
            match.url = "/notes/tag/".concat(match.raw.slice(1));
        }
    })
})

After studying how you created the backlinks data within notes.11tydata.js. I attempted to get hashtag data in a similar fashion using eleventyComputed.

function removeFileExtension(a) {
    return a.substring(0, a.length - 3);
}
...
eleventyComputed: {
    hashtags: (data) => {
        const notes = data.collections.notes;
        let hashtags = [];

        // Search all notes for hashtags utilizing removeFrontmatter
        for (const otherNote of notes) {
            const noteContent = removeFrontmatter(otherNote.template.inputContent);
            
            // Grab all hashtags from other notes
            const outboundHashtags = (noteContent.match(/#(\w+)/g) || []);
            const url = removeFileExtension(otherNote.inputPath);
            
            hashtags.push({
                title: otherNote.data.title,
                tags: outboundHashtags,
                url: `/${url}/`,
            });
        }
        return hashtags;
    }
}

Where hashtags is an array of objects in the form,

{ 
    title: 'A Note About Art',
    tags: [ '#art' ],
    url: '/./notes/art/' 
} 

I also created a template /layouts/tags.njk that acts as a layout for another template file hashtags.md within /notes/. Currently just using the title field from front matter data but this template file could have some markdown about the tags page if desired.

filename: hashtags.md

---
title: Notes with hashtag
layout: tags.njk
---

I added a markdown file art.md to /notes/ for testing the #art tag, and to be included as a backlink using [[ art ]] syntax, which includes a link back to "About these Notes" ie /notes/.

This conditional formatting is not ideal as some things would have to be manually updated upon a new tag be added to a markdown file. I think the filtering of hashtags should be handled in notes.11tydata.js or client-side JS, but for now this works. Utilizing pagination to generate pages for URLs such as, /notes/tag/art.

Here is the pagination and very rough conditional statements for deciding which content to show from hashtags. Its comparing the page.url and then if the hashtags.tags array contained the certain #tag.

filename: tags.njk

---
pagination:
    data: postTags
    size: 1
    alias: tag
postTags:
    - art
    - easter
    - food
permalink: "/notes/tag/{{ tag }}/"
layout: default
---

<h3>{{ title }}: {{ tag }}</h3>

{% if 'notes/tag/art' in page.url %}
    <ul>
    {% for tag in hashtags %}
        {% if '#art' in tag.tags %}
            <li><a href="{{tag.url}}">{{tag.title}}</a></li>
        {% endif %}
    {% endfor %}
    </ul>
{% endif %}

{% if 'notes/tag/food' in page.url %}
    <ul>
    {% for tag in hashtags %}
        {% if '#food' in tag.tags %}
            <li><a href="{{tag.url}}">{{tag.title}}</a></li>
        {% endif %}
    {% endfor %}
    </ul>
{% endif %}

{% if 'notes/tag/easter' in page.url %}
    <ul>
    {% for tag in hashtags %}
        {% if '#easter' in tag.tags %}
            <li><a href="{{tag.url}}">{{tag.title}}</a></li>
        {% endif %}
    {% endfor %}
    </ul>
{% endif %}

Demo of /notes/ page:

• The main notes page, with the art link added for testing the #art note tag.

Demo of /notes/easter-egg/ page

• Clicking on the "easter-egg" permalink brings us here to the easter-egg.md note (like normal).

Demo of /notes/tag/easter/ page

• After clicking on the #easter tag, it displays a page with a list of all notes containing the #easter hashtag.

The Easter Egg permalink has an href attribute of href="/notes/easter-egg/" taking you back to the note with the #easter tag. This functionality works for the #art and #food tags that I tested within art.md and food.md + bar.md. Didn't want to include screen shots for them as it would be too many photos in one comment.

Note: The easter egg note was originally named Easter egg.md with a space in between, I modified it to easter-egg.md for this test, because the match.url along with [[easter egg]] was keeping the space in the filename returning a URL /notes/easter%20egg/ which wasn't preferred.

Let me know your thoughts.