index.ejs

<% function logo(img) { return `https://sponsors.vuejs.org/images/${img}` } %>

<main role="main">
  <div class="sidebar">
    <div class="sidebar-inner-index">
      <ul class="main-menu">
        <%- partial('partials/main_menu', { context: 'sidebar' }) %>
      </ul>
    </div>
  </div>

  <div id="hero">
    <div class="inner">
      <div class="left">
        <img class="hero-logo" src="<%- url_for("/images/logo.svg") %>" alt="Vue logo">
      </div><div class="right">
        <h2 class="vue">Vue.js</h2>
        <h1>
          The Progressive<br>JavaScript Framework
        </h1>
        <p>
          <a id="modal-player" class="button has-icon" href="javascript:;">
            <%- partial('icons/play') %>
            WHY VUE.JS?</a>
          <a class="button white" href="<%- url_for("/v2/guide/") %>">GET STARTED</a>
          <a class="button gray has-icon" href="https://github.com/vuejs/vue" target="_blank" rel="noopener">
            <%- partial('icons/github-dark') %>
            GITHUB</a>
        </p>
      </div>
    </div>
  </div>

  <%_ if (theme.special) { _%>
  <div id="special">
    <h3>Special Sponsor</h3>
    <% var specialSponsor = theme.special[0]; %>
    <a href="<%- specialSponsor.url %>" target="_blank" rel="noopener sponsored" class="sponsor" style="width: 160px; height: 80px; line-height: 80px;">
      <img src="<%- logo(specialSponsor.img) %>" alt="Special sponsor <%- specialSponsor.name %>">
      <br>
      <!-- <span><%- specialSponsor.description %></span> -->
    </a>
  </div>
  <%_ } _%>

  <div id="highlights">
    <div class="inner">
      <div class="point">
        <h2>Approachable</h2>
        <p>Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!</p>
      </div>

      <div class="point">
        <h2>Versatile</h2>
        <p>An incrementally adoptable ecosystem that scales between a library and a full-featured framework.</p>
      </div>

      <div class="point">
        <h2>Performant</h2>
        <p>
          20KB min+gzip Runtime<br>
          Blazing Fast Virtual DOM<br>
          Minimal Optimization Efforts
        </p>
      </div>
    </div>
  </div>

  <div id="sponsors">
    <div class="inner">
      <%- partial('partials/sponsors') %>
    </div>
  </div>

  <div id="news">
    <div class="inner">
      <h3><label for="member_email">Subscribe to our Weekly Newsletter</label></h3>
      <form
        class="newsletter-form"
        id="revue-form"
        name="revue-form"
        target="_blank"
        rel="noopener"
        action="https://www.getrevue.co/profile/vuenewsletter/add_subscriber"
        method="post"
        @submit="subscribe"
      >
        <input
          class="newsletter-input"
          type="email"
          name="member[email]"
          id="member_email"
          required
          placeholder="Email address"
        >
        <input
          class="button newsletter-button"
          type="submit"
          value="Subscribe"
          name="member[subscribe]"
          id="member_submit"
        >
      </form>
      <p>
        You can read the previous issues and listen to our podcast at <a href="https://news.vuejs.org" target="_blank" rel="noopener">news.vuejs.org</a>.
      </p>
    </div>
  </div>
</main>

<footer id="footer" role="contentinfo">
  <p>
    <a class="social-icon" href="https://github.com/vuejs/vue" target="_blank" rel="noopener">
      <%- partial('icons/github') %>
    </a>
    <a class="social-icon" href="https://twitter.com/vuejs" target="_blank" rel="noopener">
      <%- partial('icons/twitter') %>
    </a>
    <a class="social-icon" href="https://medium.com/the-vue-point" target="_blank" rel="noopener">
      <%- partial('icons/medium') %>
    </a>
  </p>
  <p>Released under the <a href="https://opensource.org/licenses/MIT" target="_blank" rel="noopener">MIT License</a><br>
  Copyright &copy; 2014-<%- new Date().getFullYear() %> Evan You</p>
</footer>

<div id="video-modal" class="modal">
  <div class="video-space" style="padding: 56.25% 0 0 0; position: relative;">
    <iframe
      src="https://player.vimeo.com/video/247494684?dnt=1"
      style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;"
      frameborder="0"
      webkitallowfullscreen
      mozallowfullscreen
      allowfullscreen></iframe>
  </div>
  <script src="https://player.vimeo.com/api/player.js"></script>
  <p class="modal-text">
    Video by
    <a
      href="https://www.vuemastery.com"
      target="_blank"
      rel="sponsored noopener"
      title="Vue.js Courses on Vue Mastery">
        Vue Mastery
    </a>. Watch Vue Mastery’s free
    <a
      href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/"
      target="_blank"
      rel="sponsored noopener"
      title="Vue.js Courses on Vue Mastery"
    >
      Intro to Vue course
    </a>.
  </p>
</div>

<script>
(function () {
  var topScrolled = false
  var sponsors = document.getElementById('sponsors')
  var sponsorTop = sponsors.offsetTop
  var sponsorActive = false

  window.addEventListener('resize', function () {
    sponsorTop = sponsors.offsetTop
  })

  window.addEventListener('scroll', function () {
    var offset = 20
    if (window.pageYOffset > offset && !topScrolled) {
      topScrolled = true
      document.getElementById('mobile-bar').classList.remove('top')
    } else if (window.pageYOffset <= offset && topScrolled) {
      topScrolled = false
      document.getElementById('mobile-bar').classList.add('top')
    }
    if (window.pageYOffset > sponsorTop - 100) {
      if (!sponsorActive) {
        sponsorActive = true
        sponsors.classList.add('active')
      }
    } else {
      if (sponsorActive) {
        sponsorActive = false
        sponsors.classList.remove('active')
      }
    }
  })
})()
</script>