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.

[binyamin]

@tannerdolby Can you make this a PR, or a draft PR, so we can use GitHub's usual annotation tools?

• I'd like to stick with liquid for the tag template. A single templating engine would probably be easiest for users.
• I actually prefer the space in the easter%20egg filename. Users may be coming from Obsidian, where this is the default behavior for new files. See Doesn't work with multi-word links #21.
• I might start working on Search function #11 (Search), which could be a game-changer. Gimme a day or two.

[tannerdolby]

@binyamin Yes I will create a PR for this.

• Ok, I will update the tags.njk file to tags.liquid. I agree, its probably best to only use liquid templates since that is the default templating engine in Eleventy.
• Ah, yes I understand better after seeing Doesn't work with multi-word links #21. I will update my local copy to keep the space in Easter egg.md as easter%20egg.
• Wonderful. I had a look at the elasticlunr article that you linked in Search function #11.

I've been thinking about implementing search for my own site but haven't got around to it. Let me know how it goes, I'm curious to see how big the downloaded files are since the elasticlunr method is on the client-side, so the entire index of pages will be downloaded to the browser.

[jkarttunen]

What do you think about adding related tags? (Tags that are included in pages with this tag). I found this useful to access othervice orphan pages.

[jkarttunen]

In case someone want this, here is tags.11tydata.js i used ^

function onlyUnique(value, index, self) {
    return self.indexOf(value) === index;
  }
const getTag = p => (p.data.tags || [])
const flatten = (memo, current) => memo.concat(current);

module.exports = {
    layout: "tags.html",
    type: "tag",
    eleventyComputed: {
        relatedTags: (data) => {
                const tags = data.collections[data.tag]
                    .map(getTag)
                    .reduce(flatten, [])
                    .filter(onlyUnique)
                return tags
        }
    }
}


        

[binyamin]

@jkarttunen That's a pretty neat idea! It'd have to wait until the tag pages actually exist, however. Can you please open another issue, so I can keep track of it?