website/www/site/layouts/index.html

{{/*
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
   http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. See accompanying LICENSE file.
*/}}

{{ define "hero-section" }}
  <div id="hero-desktop" class="hero-desktop">
    <div class="hero-content">
      <h3>{{ T "home-hero-title" }}</h3>
      <h1>{{ T "home-hero-heading" }}</h1>
      <h2>{{ T "home-hero-subheading" }}</h2>
      <a href={{ "/get-started/downloads/" | relLangURL }}>
        <button>
            {{ with resources.Get "icons/install-button-icon.svg" }}
              {{ .Content | safeHTML }}
            {{ end }}
         <span>{{ T "home-hero-button" }}</span>
        </button>
      </a>
    </div>
  </div>
  <div id="hero-mobile" class="hero-mobile">
    <div class="hero-content">
      <h3>{{ T "home-hero-title" }}</h3>
      <h1>{{ T "home-hero-heading" }}</h1>
      <h2>{{ T "home-hero-subheading" }}</h2>
    </div>
  </div>
{{ end }}

{{ define "pillars-section" }}
  <div class="pillars">
    <h2 class="pillars-title">
      {{ T "home-pillars-title" }}
    </h2>
    <div class="pillars-content">
      {{ $data := index $.Site.Data .Site.Language.Lang }}
      {{ range $pillar := $data.pillars }}
          {{ partial "pillars/pillars-item" (dict "logo" $pillar.icon  "header" $pillar.title "text" $pillar.body) }}
      {{ end }}
    </div>
    <div class="pillars-social">
      <div class="pillars-social-icons">
        {{ $data := index $.Site.Data .Site.Language.Lang }}
        {{ range $pillars_social := $data.pillars_social }}
            {{ partial "pillars/pillars-social" (dict "icon" $pillars_social.icon  "url" $pillars_social.url "name" $pillars_social.name) }}
        {{ end }}
      </div>
      <p class="pillars-social-text">
        {{ T "home-pillars-social-text" }}
      </p>
    </div>
  </div>
{{ end }}

{{ define "graphic-section" }}
  <div class="graphic">
    <div class="quotes">
      <h2 class="margin">{{ T "home-model-title1" }}</h2>
      <div class="margin section">
        <div class="row images desktop">
          <img src="/images/model-sources-icon.svg" class='icon'/>
          <img src="/images/model-ellipse.svg"/>
          <img src="/images/model-processing-icon.svg" class='icon'/>
          <img src="/images/model-ellipse.svg"/>
          <img src="/images/model-sinks-icon.svg" class='icon'/>
        </div>
        <div class="row">
          {{ $data := index $.Site.Data .Site.Language.Lang }}
          {{ range $item := $data.graphic }}
            <div class="column">
              <img src="{{ .icon }}" class='icon mobile'/>
              <h4>{{ .title }}</h4>
              <p>{{ .body }}</p>
            </div>
          {{ end }}
        </div>
      </div>
    </div>
    <div class="section">
      <h2 class="margin">{{ T "home-model-title2" }}</h2>
      <div class="row margin">
        <div class="column">
          <div class="logos-row">
            <img class="first_logo" src="/images/logos/runners/flink.png"/>
            <img src="/images/logos/runners/spark.png"/>
          </div>
          <p class="more">{{ T "home-graphic-more" }}</p>
          <div>
            <h4>{{ T "home-graphic-runner-title" }}</h4>
            <p>{{ T "home-graphic-runner-body" }}</p>
          </div>
        </div>
        <div class="column">
          <div class="logos-row">
            <img class="first_logo" src="/images/logos/sdks/python-logo.png"/>
            <img src="/images/logos/sdks/go.png"/>
          </div>
          <p class="more">{{ T "home-graphic-more" }}</p>
          <div>
            <h4>{{ T "home-graphic-language-title" }}</h4>
            <p>{{ T "home-graphic-language-body" }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
{{ end }}

{{ define "calendar-section" }}
  <div class="calendar">
    <h2 class="calendar-title">
      {{ T "home-calendar-title" }}
    </h2>
    <div class="calendar-content">
      <div class="calendar-card-big calendar-card-big-left">
        <div class="desktop">
          <a class="twitter-timeline" data-width="381" data-height="460"  href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
        </div>
        <div class="mobile">
          <a class="twitter-timeline" data-width="381" data-height="348"  href="https://twitter.com/ApacheBeam?ref_src=twsrc%5Etfw">Tweets by ApacheBeam</a>
        </div>
      </div>
      <div class="calendar-card-box post">
        {{ range first 2 (after 1 (where .Site.Pages.ByPublishDate.Reverse "Section" "blog")) }}
            <a class="post-card" href="{{ .RelPermalink }}" data-categories="{{ with .Params.categories }}{{ if eq ( printf "%T" . ) "string" }}{{ . | replaceRE "[.]" "_" | urlize }}{{ else if eq ( printf "%T" . ) "[]string" }}{{ range . }}{{ . | replaceRE "[.]" "_" | urlize }} {{end}}{{end}}{{else}}no-author{{end}}"
            >
              <div class="post-info post-category">
                  <p>
                    {{ if .Params.categories }}
                      {{ delimit .Params.categories ", " " & " }}
                    {{ end }}
                  </p>
                  <p>{{ .Date.Format "2006/01/02" }}</p>
              </div>
              <div>
              <p class="post-title">{{ .Title }}</p>
              <p class="post-info">
                {{ $authors := .Params.authors }}
                {{ with $authors }}
                  {{ range $i, $item := $authors }}
                    {{ if not (isset $.Site.Data.authors $item) }} {{ errorf "Author '%s' is not defined. Please add them to 'website/www/site/data/authors.yml'" $item }} {{end}}
                    {{ $author := index $.Site.Data.authors $item }}
                    {{ if eq $i (sub (len $authors) 1) }}
                      {{ $author.name }}
                    {{ else if eq $i (sub (len $authors) 2) }}
                      {{ $author.name }} &amp;
                    {{ else }}
                      {{ $author.name }},
                    {{ end }}
                {{ end }}
              {{ end }}
            </p>
            </div>
            </a>
          {{ end }}
      </div>
      <div class="calendar-card-big calendar-card-big-right">
        <p class="calendar-card-event-title">{{ T "home-calendar-card-events-title" }}</p>
        <div class="calendar-card-events">
          <div class="calendar-desktop">
            <iframe id='calendar' src="https://calendar.google.com/calendar/embed?src=r24up18ne2ddgl0t93flk0hsj8%40group.calendar.google.com" style="border: 0" width="333" height="320" frameborder="0" scrolling="no"></iframe>
          </div>
          <div class="calendar-mobile">
            <iframe id='calendar' src="https://calendar.google.com/calendar/embed?src=r24up18ne2ddgl0t93flk0hsj8%40group.calendar.google.com" style="border: 0" width="287" height="300" frameborder="0" scrolling="no"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
{{ end }}

{{ define "quotes-section" }}
  <div class="quotes">
    <div class="quotes-title">
      {{ T "home-quotes-title" }}
    </div>

    <div class="quotes-desktop">
      {{ $data := index $.Site.Data .Site.Language.Lang }}
      {{ range $quote := $data.quotes }}
          {{ partial "quotes/quote.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
      {{ end }}
    </div>

    {{/*
      The id "my-keen-slider" and "dots" should be named as defaults to make the external library (Keen Slider) works well
    */}}
    <div id="my-keen-slider" class="keen-slider quote-mobile">
      {{ $data := index $.Site.Data .Site.Language.Lang }}
      {{ range $quote := $data.quotes }}
          {{ partial "quotes/quote-mobile.html" (dict "icon" $quote.icon "text" $quote.text  "logoUrl" $quote.logoUrl) }}
      {{ end }}
    </div>
    <div id="dots" class="dots"></div>
  </div>
{{ end }}

{{ define "logos-section" }}
  <div class="logos">
    <div class="logos-title">
      {{ T "home-logos-title" }}
    </div>
    <div class="logos-logos">
      {{ range $logo := $.Site.Data.works_with }}
      <div class="logos-logo">
        <a href="{{ $logo.url }}"><img src="{{ $logo.image_url }}" alt="{{ $logo.title }}"></a>
      </div>
      {{ end }}
    </div>
  </div>
{{ end }}

{{ define "ctas-section" }}
  <div class="ctas">
    <div class='ctas_row'>
      <a class="ctas_button" href={{ "/get-started/beam-overview/" | relLangURL }}><img src="images/info_icon.svg" /> {{ T "home-learn-more" }}</a>
    </div>
    <div class='ctas_row'>
      <a class="ctas_button" href={{ "/get-started/quickstart-java/" | relLangURL }}>{{ T "home-java-quickstart" }}</a>
    </div>
    <div class='ctas_row'>
      <a class="ctas_button" href={{ "/get-started/quickstart-py/" | relLangURL }}>{{ T "home-python-quickstart" }}</a>
    </div>
    <div class='ctas_row'>
      <a class="ctas_button" href={{ "/get-started/quickstart-go/" | relLangURL }}>{{ T "home-go-quickstart" }}</a>
    </div>
  </div>
{{ end }}