home.hbs

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

<header class="rf-header">
  <div class="inner">
    <div class="rf-container">
        <div class="rf-header__body">
            <div class="rf-header__brand">
                <a class="rf-logo" href="#" title="Ministère de l'intérieur">
                    <span class="rf-logo__title">Ministère
                    <br>
                     de l'intérieur</span>
                </a>
            </div>
            <div class="rf-header__navbar">
                {{#if @site.logo}}
                    <a class="site-nav-logo" href="{{@site.url}}"><img src="{{@site.logo}}" alt="{{@site.title}}" /></a>
                {{else}}
                    <a class="site-nav-logo" href="{{@site.url}}"></a>
                    <div class="rf-service">
                    <a class="rf-service__title" href="{{@site.url}}" title="{{@site.title}}">
                    {{@site.title}}
                    </a>
                    <p class="rf-service__tagline">baseline - précisions sur l‘organisation</p>
                    </div>
                {{/if}}
            </div>
            <div class="site-nav-right">
                {{#if @site.navigation}}
                    {{navigation}}
                {{/if}}
                {{#if @labs.members}}
                    <a class="subscribe-button" href="#subscribe">Subscribe</a>
                {{/if}}
            </div>
        </div>
    </div>
  </div>
</header>

<div class="head-page">
    {{> header-background background=@site.cover_image}} {{!--Special header-image.hbs partial to generate the background image--}}
    <div class="head-page--wrapper container">
        <h1>Laboratoire de la donnée</h1>
        <p class="chapo">Transformez votre métier par la donnée</p>

        <div class="head-page-bottom">
            <div class="rf-grid-row">
                <div class="rf-col-xs-12 rf-col-lg-2">
                    <h2 class="head-page-bottom__title">Le datalab</h2>
                </div>
                <div class="rf-col-xs-12 rf-col-lg-9">
                    <p class="head-page-bottom__content">Depuis janvier 2020, le datalab soutient la mise en oeuvre de cas
                        d'usages de valorisation des données conduits avec les directions métiers.</p>
                </div>
                <div class="rf-col-xs-12 rf-col-lg-1">
                    <a href="#down" class="go-down" title="Bas de page" id="scrollDown">
                        <img src="/assets/images/fleche_ouverture.svg" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<main id="site-main" class="site-main outer">   
    {{#page}}
    <div class="inner">

        <article class="post-full {{post_class}} {{#unless feature_image}}no-image{{/unless}}">

            {{!-- <header class="post-full-header">
                <h1 class="post-full-title">{{title}}</h1>
            </header> --}}

            {{#if feature_image}}
            <figure class="post-full-image">
                {{!-- This is a responsive image, it loads different sizes depending on device
                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
                <img
                    srcset="{{img_url feature_image size="s"}} 300w,
                            {{img_url feature_image size="m"}} 600w,
                            {{img_url feature_image size="l"}} 1000w,
                            {{img_url feature_image size="xl"}} 2000w"
                    sizes="(max-width: 800px) 400px,
                            (max-width: 1170px) 1170px,
                            2000px"
                    src="{{img_url feature_image size="xl"}}"
                    alt="{{title}}"
                />
            </figure>
            {{/if}}

            <section class="post-full-content">
                <div class="post-content">
                    {{content}}
                </div>
            </section>
        
        <div class="inner posts">
         {{#get "posts" limit="3" include="authors,tags"}}
            <div class="post-feed">
                {{#foreach posts}}
                {{> "post-card"}}
                {{/foreach}}
            </div>
        {{/get}}
        </div>
        </article>
    
    </div>
    {{/page}}
</main>



{{!-- 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();

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