index.tt

[% BLOCK exampleBlock %]
<li>
  <div class="clickable-whole">
    <h2>[% title %]</h2>
    <div class="demo-preview">
      <div class="thumbnail">
        [% INSERT "demos/${demo}.svg" %]
      </div>
      <a href="#asciinema-demo-[% demo %]" data-fullscreen-pane="-demo-[% demo %]"></a>
    </div>
  </div>
</li>
[% END %]
[% WRAPPER atHead %]
<link rel="alternate" type="application/rss+xml" title="RSS feed" href="/blog/announcements-rss.xml" />
[% END %]
[% WRAPPER atEnd %]
<script src="[% root %]js/asciinema-player.js"></script>
[% END %]
[% WRAPPER layout.tt handlesLayout=1 %]

<section class="wide-banner clickable-whole event-banner">
  <div>
    <div>
      NixOS 23.05 <span class="-detailed">released.</span>
    </div>
    <div class="action">
      <a target="_blank" href="[% root %]blog/announcements.html#nixos-23.05">Announcement</a>
    </div>
  </div>
</section>

<section class="home-hero">
  <div>
    <div class="blurb">
      <h1>Reproducible builds <span>and deployments.</span></h1>
      <p>
        Nix is a tool that takes a unique approach to package management and
        system configuration. Learn how to make reproducible, declarative and
        reliable systems.
      </p>
      <div class="button-tray">
        <a class="button -primary" href="[% root %]download.html">Download</a>
        <a class="button" href="[% root %]learn.html">Get started</a>
      </div>
    </div>
    [% PROCESS demoPreview demo="cover" %]
  </div>
</section>

[% PROCESS demoPane demo="cover" %]

<section id="why-nix" class="home-whynix">
  <div>
    <ul class="whynix">
      <li>
        [% PROCESS svg path="site-styles/assets/gfx-landing-reproducible.svg" %]
        <h2>Reproducible</h2>
        <p>
          Nix builds packages in isolation from each other. This ensures that they
          are reproducible and don't have undeclared dependencies, so <strong>if a
            package works on one machine, it will also work on another</strong>.
        </p>
      </li>
      <li>
        [% PROCESS svg path="site-styles/assets/gfx-landing-declarative.svg" %]
        <h2>Declarative</h2>
        <p>
          Nix makes it <strong>trivial to share development and build
            environments</strong> for your projects, regardless of what programming
          languages and tools you’re using.
        </p>
      </li>
      <li>
        [% PROCESS svg path="site-styles/assets/gfx-landing-reliable.svg" %]
        <h2>Reliable</h2>
        <p>
          Nix ensures that installing or upgrading one package <strong>cannot
            break other packages</strong>. It allows you to <strong>roll back to
            previous versions</strong>, and ensures that no package is in an
          inconsistent state during an upgrade.
        </p>
      </li>
    </ul>
  </div>
</section>

<section class="packages-searchbox">
  <div id="packages-search">
    <h1>Choose from Thousands of Packages</h1>
    <p>
      The Nix Packages collection
      <strong>(<a href="https://github.com/NixOS/nixpkgs">Nixpkgs</a>)</strong>
      is a set of
      <strong class="-highlighted">over 80&#160;000 packages</strong> for the Nix package manager.
    </p>
    <form method="get" action="https://search.nixos.org/packages">
      <div>
        <div class="form-input">
          <input placeholder="Search for a package" type="text" name="query" />
        </div>
      </div>
      <div>
        <button type="submit">Search</button>
      </div>
    </form>
  </div>
</section>

<section id="examples" class="home-examples">
  <div>
    <h1>Examples</h1>

    <ul class="examples-list -spotlight">
      [% WRAPPER exampleBlock demo="example_1" title="Try new tools without fear" %]
      [% END %]

      [% WRAPPER exampleBlock demo="example_2" title="Multiple languages, one tool" %]
      [% END %]

      [% WRAPPER exampleBlock demo="example_3" title="Declarative development environments" %]
      [% END %]
    </ul>

    [% PROCESS demoPane demo="example_1" %]
    [% PROCESS demoPane demo="example_2" %]
    [% PROCESS demoPane demo="example_3" %]

    <ul class="examples-list -spotlight">
      [% WRAPPER exampleBlock demo="example_4" title="Minimal docker images" %]
      [% END %]

      [% WRAPPER exampleBlock demo="example_5" title="Declarative cloud images" %]
      [% END %]

      [% WRAPPER exampleBlock demo="example_6" title="Test your configurations" %]
      [% END %]
    </ul>

  </div>
</section>

[% PROCESS demoPane demo="example_4" %]
[% PROCESS demoPane demo="example_5" %]
[% PROCESS demoPane demo="example_6" %]

[% END %]