index.hbs

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

<header class="site-home-header">
    {{> "site-nav"}}
    {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
        <div class="inner">
            <div class="site-header-content">
		      <h1 class="site-title">{{@site.title}}</h1>
              <h2 class="site-description">{{@site.description}}</h2>
              {{> "site-tags"}}
            </div>
        </div>
    </div>
</header>

{{!-- 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>

{{!-- {{> site-header}} --}}

{{!-- 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", "");
		    break;
		  }
		}
	</script>
{{/contentFor}}