index.hbs

{{!--
This template is used for the index page.
It can be used also as the home page or the default page.
--}}

{{!-- This block preloads specific assets for the index page --}}
{{#contentFor "preload"}}
  <link rel="preload" href="{{asset "css/home.css"}}" as="style" />
  <link rel="preload" href="{{asset "css/listing.css"}}" as="style" />
  <link rel="preload" href="{{asset "js/home.js"}}" as="script" />
{{/contentFor}}


<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(function(OneSignal) {
    OneSignal.init({
      appId: "faaaa110-fd8c-4987-bb07-4610fec63c80",
    });
  });
</script>

{{!-- This block loads specific styles for the index page --}}
{{#contentFor "styles"}}
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          spacing: {
            '128': '32rem',
          }
        }
      }
    }
  </script>
  <link rel="stylesheet" type="text/css" href="{{asset "css/home.css"}}" media="screen" />
  <link rel="stylesheet" type="text/css" href="{{asset "css/listing.css"}}" media="screen" />
  {{!-- <link rel="stylesheet" type="text/css" href="{{asset "css/anunt.css"}}" media="screen"> --}}
{{/contentFor}}

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

{{!-- Special header.hbs partial to generate the <header> tag --}}
{{> header background=@site.cover_image}}

<style>
  .homepage .m-hero__picture {
    opacity: 1;
  }

</style>

<main class="main-wrap homepage">
  {{!-- Inject styles of the hero image to make it responsive --}}
  {{> hero background=@site.cover_image}}
  <div class="m-hero__content" data-aos="fade-down">
    {{!-- <img class="w-128" src="{{asset 'images/OSUT_alb.svg'}}"> --}}
    {{#if @custom.use_custom_cta}}
      <a href="{{@site.url}}/#/portal/signup" class="m-button filled">{{@custom.custom_cta_text}}</a>
    {{else}}
      {{#if @site.members_enabled}}
        <div class='onesignal-customlink-container'></div>
      {{/if}}
    {{/if}}
  </div>
  </section>

  {{!-- For counters --}}
  {{!-- {{> counters}} --}}

  <div class="l-content mobile-layout">
    <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
      {{!-- {{> anunt title="OSUT te informeaza"}} --}}
      <div class="l-grid centered">
        {{#get "posts" filter="featured:true" include="authors,tags" limit="5" as |featured|}}
          {{#if featured}}
            <div class="m-featured-slider swiper js-featured-slider">
              <div class="m-featured-slider__list swiper-wrapper">
                {{#foreach featured}}
                  <div class="m-featured-slider__list__item swiper-slide">
                    <article class="m-featured-article {{#unless feature_image}}no-picture{{/unless}}">
                      <div class="m-featured-article__picture">
                        {{#if feature_image}}
                          <style>
                            #featured-bg-{{id}} {
                              background-image: url('assets/images/bgr.png');
                            }
                            @media(max-width: 768px) {
                              #featured-bg-{{id}} {
                                background-image: url('assets/images/bgr.png');
                              }
                            }
                          </style>
                          <div id="featured-bg-{{id}}"></div>
                        {{/if}}
                      </div>
                      <div class="m-featured-article__meta">
                        <a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="{{primary_author.name}}" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
                          {{#if primary_author.profile_image}}
                            <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
                          {{else}}
                            <div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
                          {{/if}}
                        </a>
                        {{#if primary_tag}}
                          <a href="{{primary_tag.url}}" class="m-featured-article__tag">{{primary_tag.name}}</a>
                        {{/if}}
                      </div>
                      <div class="m-featured-article__ribbon">
                        <span class="icon-star"></span>
                        <span>{{t "Featured"}}</span>
                      </div>
                      <a href="{{url}}" class="m-featured-article__content">
                        <h2 class="m-featured-article__title js-featured-article-title" title="{{title}}">
                          {{title}}
                        </h2>
                        <div class="m-featured-article__timestamp">
                          <span>{{date published_at timeago="true"}}</span>
                          <span>&bull;</span>
                          <span>{{reading_time minute=(t "1 min read") minutes=(t "% min read")}}</span>
                        </div>
                      </a>
                    </article>
                  </div>
                {{/foreach}}
              </div>
              <button class="m-icon-button in-featured-articles swiper-button-prev js-featured-slider-button" aria-label="{{t "Previous"}}">
                <span class="icon-arrow-left" aria-hidden="true"></span>
              </button>
              <button class="m-icon-button in-featured-articles swiper-button-next js-featured-slider-button" aria-label="{{t "Next"}}">
                <span class="icon-arrow-right" aria-hidden="true"></span>
              </button>
            </div>
          {{/if}}
        {{/get}}
        {{!-- The tag below iterates over all the posts --}}
        {{> "loop"}}
      </div>
    </div>
    {{!-- Links to Previous/Next posts --}}
    {{pagination}}
  </div>
</main>

{{!-- The #contentFor helper here will send everything inside it up to the matching #block helper found in default.hbs --}}
{{#contentFor "scripts"}}
  <script defer src="{{asset "js/home.js"}}"></script>
{{/contentFor}}