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>