home.hbs

<main class="homepage PRIMER-REMOVE-ME">
  <div class="py-6 py-sm-8 jumbotron jumbotron-home ">
    <div class="container-xl p-responsive position-relative text-center">
      {{> hero}}
      <p class='jumbotron-lead'>
        {{{localized.tagline}}}
      </p>
    </div>
  </div>

<div class="py-6 py-md-7 py-lg-8">
  <div class="container-lg p-responsive">
    <div>
      <h1 class="f0-light text-center"><a href="/releases/stable">{{localized.nav.releases}}</a></h1>
      <div class="electron-version-container">
        <div class="electron-version">
          <div id="electron-version-latest" class="highlight highlight-dark text-left my-3 px-2">
              <pre class="overflow-hidden"><code><span class="no-select">$ </span>npm i -D electron@latest<span class="c1 no-select">
# Electron   {{{releases.stableRelease.data.version}}}
# Node       {{releases.stableRelease.data.deps.node}}
# Chromium   {{releases.stableRelease.data.deps.chrome}}</span></code></pre>
          </div>
        </div>
        <div class="electron-version">
          <div id="electron-version-beta" class="highlight highlight-dark text-left my-3 px-3">
            <pre class="overflow-hidden"><code><span class="no-select">$ </span>npm i -D electron@beta<span class="c1 no-select">
# Electron   {{{releases.betaRelease.data.version}}}
# Node       {{releases.betaRelease.data.deps.node}}
# Chromium   {{releases.betaRelease.data.deps.chrome}}</span></code></pre>
          </div>
        </div>
        <div class="electron-version">
          <div id="electron-version-alpha" class="highlight highlight-dark text-left my-3 px-3">
            <pre class="overflow-hidden"><code><span class="no-select">$ </span>npm i -D electron@alpha<span class="c1 no-select">
# Electron   {{{releases.alphaRelease.data.version}}}
# Node       {{releases.alphaRelease.data.deps.node}}
# Chromium   {{releases.alphaRelease.data.deps.chrome}}</span></code></pre>
          </div>
        </div>
        <div class="electron-version">
          <div id="electron-version-nightly" class="highlight highlight-dark text-left my-3 px-3">
            <pre class="overflow-hidden"><code><span class="no-select">$ </span>npm i -D electron-nightly<span class="c1 no-select">
# Electron   {{{releases.nightlyRelease.data.version}}}
# Node       {{releases.nightlyRelease.data.deps.node}}
# Chromium   {{releases.nightlyRelease.data.deps.chrome}}</span></code></pre>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<hr class="pt-8">

<div class="py-6 py-md-7 py-lg-8">
  <div class="container-lg p-responsive">
    <h1 class="f0-light text-center-sm">{{{localized.electron_is_good.title}}}</h1>
    <div class="featured-apps my-2 my-md-3">
      {{#each apps}}
        <a class="featured-app-list-item" href="{{ this.url }}" target="_blank" rel="noopener">
          <picture>
            <source srcset="{{ static-asset 'image' '/featured_apps/' screenshot '.webp'}}" type="image/webp">
            <source srcset="{{ static-asset 'image' '/featured_apps/' screenshot '.png'}}" type="image/png">
            <img alt="" src="{{ static-asset 'image' '/featured_apps/' screenshot '.png'}}">
          </picture>
          <img class="icon" data-src="{{ static-asset 'image' '/featured_apps/' icon}}" alt="">
          <h4>{{this.name}}</h4>
        </a>
      {{/each}}
    </div>
    <p class="lead text-center-sm">{{{localized.electron_is_good.description}}}</p>
  </div>
</div>

<hr class="pt-8">

<div class="py-6 py-md-7 py-lg-8" id="electron">
  <div class="container-lg p-responsive">
    <h1 class="f0-light text-center-sm">{{{localized.electron_is_easy.title}}}</h1>
    <p class="lead text-center-sm">{{{localized.electron_is_easy.description}}}</p>

    <hr class="pt-8">

    <div class="d-sm-flex flex-row text-center text-small mt-6">
      <div class="col-xs-12 col-sm-4">
        <img class="home-illu" role="presentation" src="{{ static-asset 'image' '/web-tech.svg'}}" aria-hidden="true">
        <h3 class="f1-light mb-2 mt-0">{{{localized.web_technologies.title}}}</h3>
        <p class="f4">{{{localized.web_technologies.description}}}</p>
      </div>
      <div class="col-xs-12 col-sm-4">
        <img class="home-illu" role="presentation" src="{{ static-asset 'image' '/open-source.svg'}}" aria-hidden="true">
        <h3 class="f1-light mb-2 mt-0">{{{localized.open_source.title}}}</h3>
        <p class="f4">{{{localized.open_source.description}}}</p>
      </div>
      <div class="col-xs-12 col-sm-4">
        <img class="home-illu" role="presentation" src="{{ static-asset 'image' '/cross-platform.svg'}}" aria-hidden="true">
        <h3 class="f1-light mb-2 mt-0">{{{localized.cross_platform.title}}}</h3>
        <p class="f4">{{{localized.cross_platform.description}}}</p>
      </div>
    </div>

    <div class="text-center mt-8 mb-4">
      <h2 class="f0-light">{{{localized.benefits.hard_parts_made_easy}}}</h2>
    </div>

    <div class="d-sm-flex flex-row text-center text-small mt-3 clearfix">
      <div class="col-xs-12 col-sm-4 col-md-2 offset-md-1 mb-xs-4 mb-md-0 hero-feature">
        {{#eq currentLocale "en-US"}}
        <a class="hero-link" href="/docs/latest/api/auto-updater/">
        {{else}}
        <a class="hero-link" href="/{{ to2CharLocale currentLocale }}/docs/api/auto-updater/">
        {{/eq}}
          <span class="octicon hero-octicon octicon-squirrel" aria-hidden="true"></span>
          {{{localized.benefits.automatic_updates}}}
        </a>
      </div>
      <div class='col-xs-12 col-sm-4 col-md-2 mb-xs-4 mb-md-0 hero-feature'>
        {{#eq currentLocale "en-US"}}
        <a class="hero-link" href="/docs/latest/api/menu">
        {{else}}
        <a class="hero-link" href="/{{ to2CharLocale currentLocale }}/docs/api/menu">
        {{/eq}}
          <span class="octicon hero-octicon octicon-device-desktop" aria-hidden="true"></span>
          {{{localized.benefits.native_menus_and_notifications}}}
        </a>
      </div>
      <div class='col-xs-12 col-sm-4 col-md-2 mb-xs-4 mb-md-0 hero-feature'>
        {{#eq currentLocale "en-US"}}
        <a class="hero-link" href="/docs/latest/api/crash-reporter">
        {{else}}
        <a class="hero-link" href="/{{ to2CharLocale currentLocale }}/docs/api/crash-reporter">
        {{/eq}}
          <span class="octicon hero-octicon octicon-bug" style="padding-left:2px" aria-hidden="true"></span>
          {{{localized.benefits.crash_reporting}}}
        </a>
      </div>
      <div class="col-xs-12 col-sm-4 col-md-2 mb-xs-4 mb-md-0 hero-feature">
        {{#eq currentLocale "en-US"}}
        <a class="hero-link" href="/docs/latest/api/content-tracing">
        {{else}}
        <a class="hero-link" href="/{{ to2CharLocale currentLocale }}/docs/api/content-tracing">
        {{/eq}}
          <span class="octicon hero-octicon octicon-tools" aria-hidden="true"></span>
          {{{localized.benefits.debugging_and_profiling}}}
        </a>
      </div>
      <div class='col-xs-12 col-sm-4 col-md-2 mb-xs-4 mb-md-0 hero-feature'>
        {{#eq currentLocale "en-US"}}
        <a class="hero-link" href="/docs/api/auto-updater/#windows">
        {{else}}
        <a class="hero-link" href="/{{ to2CharLocale currentLocale }}/docs/api/auto-updater/#windows">
        {{/eq}}
          <span class="octicon hero-octicon octicon-gift" style="padding-right:2px" aria-hidden="true"></span>
          {{{localized.benefits.windows_installers}}}
        </a>
      </div>
    </div>
  </div>
</div>


<div class='py-7 py-md-8 py-lg-9 bg-shade' id='get-started'>
  <div class='container-lg p-responsive text-center'>
    <h1 class="f0-light">{{{localized.get_started.title}}}</h1>
    <p class="lead">
      {{{localized.get_started.description}}}
    </p>

    <h3 class="h2-mktg text-normal mb-3">
      {{{localized.quick_start.title}}}
    </h3>
    <p>{{{localized.quick_start.description}}}</p>

    <figure class="highlight highlight-dark text-left my-6 overflow-auto">
<pre><code><span class="c1 no-select"># {{{localized.quick_start.clone}}}</span>
<span class="no-select">$ </span>git clone https://github.com/electron/electron-quick-start

<span class="c1 no-select"># {{{localized.quick_start.go_into_repo}}}</span>
<span class="no-select">$ </span>cd electron-quick-start

<span class="c1 no-select"># {{{localized.quick_start.install_deps}}}</span>
<span class="no-select">$ </span>npm install &amp;&amp; npm start</code></pre>
    </figure>

    <hr/>

    <div class="d-flex flex-column flex-md-row-reverse my-5 pt-6">
      <div class='col-xs-12 col-md-5' style="margin-top: 30px;">
        <a href="/fiddle">
          <img
            class="mb-4 mb-lg-6 fiddle-icon"
            src="{{ static-asset 'image' '/fiddle/fiddle-icon.svg'}}"
            alt="Electron Fiddle Icon"
          />
          <p>
            <img src="{{ static-asset 'image' '/fiddle/fiddle-logo.svg'}}" alt="Electron Fiddle">
          </p>
        </a>
      </div>
      <div class='col-md-6 pr-md-5'>
        <h3 class="f2-light mt-1 mb-3">{{localized.explore.fiddle_title}}</h3>
        <p>{{{localized.landing.fiddle.description}}}</p>
        <p>
          <a
            id="download-latest-release"
            class="btn-mktg btn-outline-mktg"
            href="https://github.com/electron/fiddle/releases/latest"
          >
            <span class="octicon octicon-desktop-download"></span>
            <span>{{{localized.download_from_github}}}</span>
          </a>
          <a
            id="download-latest-release"
            class="btn-mktg btn-outline-mktg"
            href="/fiddle"
          >
            <span class="octicon octicon-info"></span>
            <span>{{{localized.explore.see_more_info}}}</span>
          </a>
        </p>
      </div>
    </div>

    <hr/>

    <h3 class="h2 text-normal">
      {{{localized.quick_start.dive_deeper}}}
    </h3>


    <h3 class="f2-light pt-4">{{{localized.need_help.title}}}</h3>
    <p>{{#replace}}{{{localized.need_help.description}}}{{/replace}}</p>

  </div>
</div>
</main>