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">
    {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
        <div class="inner">
            {{> "site-nav"}}
            <div class="site-header-content">
                <h1 class="site-title">
                    {{#if @site.logo}}
                        <img class="site-logo" src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" />
                    {{else}}
                        {{@site.title}}
                    {{/if}}
                </h1>
                <h2 class="site-description">{{@site.description}}</h2>
                <div class="search-wrap">
                    <div class="search-input">
                        <input type="text" id="search-field" placeholder="Search...">
                        <div class="search-clear">
                            <svg class="svg-inline--fa fa-times-circle fa-w-16" id="clear-search" aria-hidden="true" data-prefix="fa" data-icon="times-circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="" style="display: inline;"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>
                        </div>
                    </div>
                    <div class="search-results" id="results"></div>
                </div>
            </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>

    // NOTE: Scroll performance is poor in Safari
    // - this appears to be due to the events firing much more slowly in Safari.
    //   Dropping the scroll event and using only a raf loop results in smoother
    //   scrolling but continuous processing even when not scrolling
    $(document).ready(function () {
        
        var nav = document.querySelector('.site-nav-main .site-nav');
        var feed = document.querySelector('.post-feed');

        var lastScrollY = window.scrollY;
        var lastWindowHeight = window.innerHeight;
        var lastDocumentHeight = $(document).height();
        var ticking = false;

        function onScroll() {
            lastScrollY = window.scrollY;
            requestTick();
        }

        function onResize() {
            lastWindowHeight = window.innerHeight;
            lastDocumentHeight = $(document).height();
            requestTick();
        }

        function requestTick() {
            if (!ticking) {
                requestAnimationFrame(update);
            }
            ticking = true;
        }

        function update() {
            var trigger = feed.getBoundingClientRect().top + window.scrollY;
            var progressMax = lastDocumentHeight - lastWindowHeight;

            // show/hide nav
            if (lastScrollY >= trigger - 20) {
                nav.classList.add('fixed-nav-active');
            } else {
                nav.classList.remove('fixed-nav-active');
            }

            ticking = false;
        }

        window.addEventListener('scroll', onScroll, { passive: true });
        window.addEventListener('resize', onResize, false);

        update();


        var serachContentApi = "{{@site.url}}/ghost/api/v3/content/posts/?key=" + window.contentApiKey + "&limit=all&fields=id,title,excerpt,feature_image,custom_excerpt,url,published_at&formats=plaintext&include=tags";

        // Search results
        var posts = [],
        searchKey = $("#search-field"),
        searchContent = $('#results'),
        searchClear = $('.search-clear')

        if (posts.length == 0 && typeof serachContentApi !== undefined) {
            $.get(serachContentApi)
                .done(function(data) {
                    posts = data.posts
                    search()
                })
                .fail(function(err) {
                    console.log('failed')
                })
        }

        function search(){
        var options = {
            shouldSort: true,
            tokenize: true,
            matchAllTokens: true,
            threshold: 0,
            location: 0,
            distance: 100,
            maxPatternLength: 32,
            minMatchCharLength: 1,
            keys: [{
              name: 'title',
              weight: 0.3
            }, {
              name: 'plaintext',
              weight: 0.7
            }]
          };
          var fuse = new Fuse(posts, options)
          
        searchKey.keyup(function(){
            var value = this.value,
            search = fuse.search(value),
            output = '',
            language = $('html').attr('lang')
            if(posts.length > 0){
                searchKey.parent().addClass('active')
                $.each(search, function(key, val) {
                    var pubDate = new Date(
                        val.published_at
                    ).toLocaleDateString(language, {
                        day: 'numeric',
                        month: 'long',
                        year: 'numeric',
                    })
                    output += `<a class="single-result" href="${val.url}">${val.title}</a>`
                })

                searchContent.html(output)
            }
            if(value === ''){
                searchKey.parent().removeClass('active')
                searchContent.html('')
            }
            
        })
        searchClear.on('click', function(){
            searchKey.val('')
            searchKey.parent().removeClass('active')
            searchContent.html('')

        })
    } 

    });
</script>
{{/contentFor}}