tag.hbs

{{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}

{{#tag}}
<header class="site-archive-header">
    {{> site-header}}
    {{> header-background background=feature_image}} {{!--Special header-image.hbs partial to generate the background image--}}
        <div class="inner site-header-content">
            <h1 class="site-title">{{name}}</h1>
            <h2 class="site-description">
                {{#if description}}
                {{description}}
                {{else}}
                A collection of {{plural ../pagination.total empty='posts' singular='% post' plural='% posts'}}
                {{/if}}
            </h2>
            {{> "site-tags"}}
        </div>
    </div>
</header>
{{/tag}}

{{!-- The main content area --}}
<main id="site-main" class="site-main outer">
    <div class="inner posts">
        <div class="post-feed">
            {{#foreach posts}}
                {{!-- The tag below includes the markup for each post - partials/post-card.hbs --}}
                {{> "post-card"}}
            {{/foreach}}
        </div>
    </div>
</main>
{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
	<script>
		const select = document.querySelector(".tags");
		const options = document.querySelectorAll(".tags option");
 
		// 1
		select.addEventListener("change", function() {
		  let url = this.options[this.selectedIndex].dataset.url;
		  if(url) {
		    location.href = url;
		  }
		});
 
		// 2
		for(const option of options) {
		  let url = option.dataset.url;
		  if(location.pathname.includes(url)) {
		    option.setAttribute("selected", true);	
		    break;
		  }
		}
	</script>
{{/contentFor}}