Creating Tags
From version 0.5.2 onwards, is is quite easy to add a tag-cloud to your website. There are two ways let FillPouch know the tags you are using.
The easier method is to add a g("tags",...) into the name-value property list of the clone in question.
See this example:
...
clone(1,"fillpouchwebsite\\www\\docs\\advanced.sd",[g("doctext","fillpouchwebsite\\advanced.html"),g("tags","curl,pandoc")]),
...
Alternative method
Instead of writing the tags for each clone(...,...,...) instruction individually; in some cases it may be more comfortable
when you write tag(...,...) instructions (one or more) in the main project file. Here is an example:
...
tags(1,"vscode,editor,IDE"),
...
To understand the above is easy. The first argument is an index value. It represents the index into the various clone instructions
you have. Imagine you collected all the clone instructions into an array, then an index of 0 would be the first clone
instruction, 1 would be the 2nd. The second argument is a comma delimited text comprising of the tags you want to use.
In order to actually make FillPouch insert tags into the output it produces, you will need to use a special "pouch" meta-instruction
as shown next:
[[v("@ALL")]]
That's a special meta-instruction which will instruct FilPouch to create a Javascript Array. But it will NOT write
the Javascript for you. This is to make sure that you have the maximum flexibility to "dress" up the tag-cloud as per your taste.
Here is some Javascript that generated the tag cloud of our documentation here. It includes some empty divs too, as
the tag-cloud had to be placed properly:
<div id='taglinks'></div>
<div id="tagCloud"></div>
<script>
// Array of tag objects
let tagArray = [[v("@ALL")]]
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Extract unique tags
const allTags = Array.from(new Set(tagArray.flatMap(item => item.tags.split(','))));
// Sort tags alphabetically
const sortedTags = allTags.sort();
// Display tag cloud
const tagCloudElement = document.getElementById("tagCloud");
const stagElement = document.createElement("span");
stagElement.innerHTML = '<b>Tags:</b><br/>';
tagCloudElement.appendChild(stagElement);
let len = sortedTags.length;
sortedTags.forEach((tag,idx) => {
const tagElement = document.createElement("span");
tagElement.textContent = tag;
tagElement.setAttribute('class','has-text-link');
tagElement.style.cursor = "pointer";
tagElement.addEventListener("click", () => displayTagLinks(tag));
tagCloudElement.appendChild(tagElement);
if(idx < (len -1) ){
tagCloudElement.appendChild(document.createTextNode(" | "));
}
});
// Function to display links for a clicked tag
function displayTagLinks(clickedTag) {
const tagLinksElement = document.getElementById("tagLinks");
tagLinksElement.innerHTML = ""; // Clear previous links
const linksForTag = tagArray
.filter(item => item.tags.split(',').includes(clickedTag))
.map(item => item.link);
if (linksForTag.length > 0) {
const ulElement = document.createElement("ul");
linksForTag.forEach(link => {
const liElement = document.createElement("li");
const aElement = document.createElement("a");
aElement.href = link;
aElement.textContent = link;
liElement.appendChild(aElement);
ulElement.appendChild(liElement);
});
tagLinksElement.appendChild(ulElement);
} else {
tagLinksElement.textContent = "No links found for this tag.";
}
}
});
</script>