Skip to content

Commit

Permalink
improve content on the landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
@garbas
garbas committed Sep 16, 2020
1 parent c10e82a commit 7a8a7c0
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 147 deletions.
3 changes: 2 additions & 1 deletion Makefile
View file
Expand Up @@ -39,7 +39,8 @@ DEMOS = \
demos/example_2.svg \
demos/example_3.svg \
demos/example_4.svg \
demos/example_5.svg
demos/example_5.svg \
demos/example_6.svg


NIX_DEV_MANUAL_IN ?= /no-such-path
Expand Down
39 changes: 39 additions & 0 deletions demos/example_6.scenario
View file
@@ -0,0 +1,39 @@
#! { "step": 0.10, "width": 77, "height": 20 }

$ # In this example we will look how to test your NixOS configuration
$ # We will create a simple configuration with `hello` pacakge installed
$ # system wide and check that `hello` world binary works.

$ bat test.nix
────────┬─────────────────────────────────────────────────────────────────────
│ File: test.nix
────────┼─────────────────────────────────────────────────────────────────────
1 │ { pkgs ? import <nixpkgs> {}
2 │ }:
3 │ pkgs.nixosTest ({ lib, pkgs, ...}: {
4 │ name = "example-test";
5 │ # virtual machine with one package installed system wide
6 │ machine = { pkgs, ... }: {
7 │ environment.systemPackages = [ pkgs.hello ];
8 │ };
9 │ testScript = ''
10 │ # run hello on machine and check for output
11 │ machine.succeed('hello | grep "Hello, world!"')
12 │ # test is a simple python script
13 │ '';
14 │ })
────────┴────────────────────────────────────────────────────────────────────
$ # Pause the video to understand the test.nix

$ # To run the test you simply need to run:
$ nix-build test.nix
...
machine1: must succeed: hello | grep "Hello, world!"
...
/nix/store/99cb3pmmyaxp0rs6r596kqq5v8ivp45j-vm-test-run-example-test

$ # While this example is simple you can imagine how handy can it be
$ # to test interaction between many machines.
$ # You can take screenshots, scrape for text and more. Checkout what
$ # else you can do in NixOS manual under NixOS Tests section
$ # Happy testing!
118 changes: 54 additions & 64 deletions index.tt
View file
@@ -1,60 +1,52 @@
[%-

BLOCK exampleBlock %]
[% 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>
<h2>[% title %]</h2>
<p>
[% content %]
</p>
</div>
</li>
[% END;

-%]
[% END %]
[% WRAPPER atHead %]
<link rel="alternate" type="application/rss+xml" title="RSS" href="/news-rss.xml" />
[% END %]
[% WRAPPER atEnd %]
<script src="[% root %]js/asciinema-player.js"></script>
<script src="[% root %]js/asciinema-player.js"></script>
[% END %]
[% WRAPPER layout.tt title="NixOS Linux" handlesLayout=1 %]

<section class="home-hero">
<div>
<div class="blurb">
<h1>Reproducible builds <span>and deployments.</span></h1>
<div class="columns">
<div>
<h2>Nix</h2>
<p>
A powerful package manager for Linux and other
Unix systems that makes package management reliable and reproducible.
Share your development and build environments across different machines.
</p>
</div>
<div>
<h2>NixOS</h2>
<p>
A Linux distribution with a unique approach to
package and configuration management. Built on top of the Nix package
manager, it is completely declarative, makes upgrading systems reliable,
and has <a href="[% root %]features.html">many other advantages</a>.
</p>
</div>
</div>
<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>

<div class="blurb">
<h1>Reproducible builds <span>and deployments.</span></h1>
<div class="columns">
<div>
<h2>Nix</h2>
<p>
A powerful package manager for Linux and other
Unix systems that makes package management reliable and reproducible.
Share your development and build environments across different machines.
</p>
</div>
<div>
<h2>NixOS</h2>
<p>
A Linux distribution with a unique approach to
package and configuration management. Built on top of the Nix package
manager, it is completely declarative, makes upgrading systems reliable,
and has <a href="[% root %]features.html">many other advantages</a>.
</p>
</div>
</div>
<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>
Expand All @@ -63,31 +55,30 @@ BLOCK exampleBlock %]

<section id="why-nix" class="home-whynix">
<div>
<h1>Why choose Nix or NixOS?</h1>
<ul class="whynix-points">
<ul class="whynix">
<li>
<h2>It's Reproducible…</h2>
<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>.
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>
<h2>Declarative…</h2>
<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.
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>
<h2>And Reliable</h2>
<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.
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>
Expand Down Expand Up @@ -121,26 +112,24 @@ BLOCK exampleBlock %]
<h1>Examples</h1>

<ul class="examples-list -spotlight">
[% WRAPPER exampleBlock demo="example_1" title="On demand development environments" %]
Suspendisse ac dolor id ex accumsan mattis in in lacus. Sed eget ultrices diam, et pretium sem.
[% WRAPPER exampleBlock demo="example_1" title="Try new tools without fear" %]
[% END %]

[% WRAPPER exampleBlock demo="example_2" title="Multiple languages support" %]
Morbi molestie ultrices odio pulvinar posuere. Etiam a est vulputate, convallis tortor auctor.
[% WRAPPER exampleBlock demo="example_2" title="Multiple languages, one tool" %]
[% END %]

[% WRAPPER exampleBlock demo="example_3" title="Reproducible development environments" %]
Donec at faucibus diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at pretium magna.
[% WRAPPER exampleBlock demo="example_3" title="Isolated development environments" %]
[% END %]
</ul>

<ul class="examples-list">
[% WRAPPER exampleBlock demo="example_4" title="Build Docker images" %]
Etiam eget eros et urna tincidunt porttitor.
[% WRAPPER exampleBlock demo="example_4" title="Minimal docker images" %]
[% END %]

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

[% WRAPPER exampleBlock demo="example_5" title="Build cloud images" %]
Amazon EC2, and any other cloud.
[% WRAPPER exampleBlock demo="example_6" title="Test your configurations" %]
[% END %]
</ul>

Expand All @@ -152,5 +141,6 @@ BLOCK exampleBlock %]
[% PROCESS demoPane demo="example_3" %]
[% PROCESS demoPane demo="example_4" %]
[% PROCESS demoPane demo="example_5" %]
[% PROCESS demoPane demo="example_6" %]

[% END %]
112 changes: 48 additions & 64 deletions layout.tt
View file
Expand Up @@ -11,12 +11,12 @@ USE date;
# class: Additional classes
BLOCK navigationLink %]

<li class="[% outputName == href ? "active" : "" %] [% class %]">
[%- IF href -%]
<a href="[% root %][% href %]">[% title %]</a>
[%- ELSE -%]
[%- content -%]
[%- END -%]
<li class="[% outputName == href ? " active" : "" %] [% class %]">
[%- IF href -%]
<a href="[% root %][% href %]">[% title %]</a>
[%- ELSE -%]
[%- content -%]
[%- END -%]
</li>
[% END;

Expand All @@ -37,7 +37,7 @@ BLOCK navigationLink %]
[%# This has to happen ASAP, even before jQuery is initialized. %]
<script>
var html = document.documentElement;
html.className = html.className.replace("without-js","with-js");
html.className = html.className.replace("without-js", "with-js");
</script>

<script type="text/javascript" src="[% root %]js/jquery.min.js"></script>
Expand All @@ -55,7 +55,7 @@ BLOCK navigationLink %]
<input type="text" name="query" />
</div>
</form>
[%# ???! go read `navbar.less` and `nixos-site.js`, it's all fine I swear. %]
[%# ???! go read `navbar.less` and `nixos-site.js`, it's all fine I swear. %]
<nav style="display: none;">
<ul>
[% INCLUDE navigationLink href="features.html" title="Features" %]
Expand All @@ -64,73 +64,56 @@ BLOCK navigationLink %]
[% INCLUDE navigationLink href="community.html" title="Community" %]
[% INCLUDE navigationLink href="governance.html" title="Governance" %]
[% INCLUDE navigationLink href="donate.html" title="Donate" %]
[% WRAPPER navigationLink %]
<a class="button -primary" href="#">Install Nix</a>
[% END %]
</ul>
</nav>
</div>
</header>

<main>
[% IF !handlesLayout %]
<div class="generic-layout">
[% END %]
[% IF !handlesLayout %]
<div class="generic-layout">
[% END %]

[% content %]
[% content %]

[% IF !handlesLayout %]
</div>
[% END %]
[% IF !handlesLayout %]
</div>
[% END %]
</main>

<footer>
<div class="upper">
<section>
<h4>The project</h4>
<ul>
<li><a href="https://status.nixos.org/">Nix Channel Status</a></li>
<li><a href="https://search.nixos.org/packages">Nix packages search</a></li>
<li><a href="https://search.nixos.org/options">NixOS options search</a></li>
</ul>
<ul>
<li><a href="https://nixos.org/governance.html">Governance</a></li>
<li><a href="https://nixos.org/teams/security.html">Security</a></li>
</ul>
</section>
<section>
<h4>Contribute</h4>
<ul>
<li><a href="https://nixos.org/guides/contributing.html">Contributing Guide</a></li>
<li><a href="https://nixos.org/donate.html">Donate</a></li>
</ul>
<h4>Stay up to date</h4>
<ul>
<li><a href="https://nixos.org/news.html">News</a></li>
<li><a href="https://weekly.nixos.org/">NixOS Weekly</a></li>
</ul>
</section>
<section>
<h4>Get in Touch</h4>
<ul>
<li><a href="https://discourse.nixos.org/">Forum</a></li>
<li><a href="https://webchat.freenode.net/#nixos">Chat</a></li>
<li><a href="https://nixos.org/commercial-support.html">Commercial support</a></li>
</ul>
</section>
<section>
<h4>The choice is yours</h4>
<h5>Get started with...</h5>
<ul>
<li><a href="[% root %]learn.html#nix">Nix Packages Manager</a></li>
<li><a href="[% root %]learn.html#nixos">NixOS Linux</a></li>
</ul>
<h5>Download...</h5>
<ul>
<li><a href="[% root %]download.html#nix">Nix Packages Manager</a></li>
<li><a href="[% root %]download.html#nixos">NixOS Linux</a></li>
</ul>
</section>
<section>
<h4>The project</h4>
<ul>
<li><a href="https://status.nixos.org/">Channel Status</a></li>
<li><a href="https://search.nixos.org/packages">Packages search</a></li>
<li><a href="https://search.nixos.org/options">Options search</a></li>
<li><a href="https://nixos.org/teams/security.html">Security</a></li>
</ul>
</section>
<section>
<h4>Get in Touch</h4>
<ul>
<li><a href="https://discourse.nixos.org/">Forum</a></li>
<li><a href="https://webchat.freenode.net/#nixos">Chat</a></li>
<li><a href="https://nixos.org/commercial-support.html">Commercial support</a></li>
</ul>
</section>
<section>
<h4>Contribute</h4>
<ul>
<li><a href="https://nixos.org/guides/contributing.html">Contributing Guide</a></li>
<li><a href="https://nixos.org/donate.html">Donate</a></li>
</ul>
</section>
<section>
<h4>Stay up to date</h4>
<ul>
<li><a href="https://nixos.org/news.html">Announcements</a></li>
<li><a href="https://weekly.nixos.org/">Newsletter</a></li>
</ul>
</section>
</div>
<hr />
<div class="lower">
Expand All @@ -151,7 +134,8 @@ BLOCK navigationLink %]
<h4>Connect with us</h4>
<ul>
<li class="social-icon -twitter"><a href="https://twitter.com/nixos_org">Twitter</a></li>
<li class="social-icon -youtube"><a href="https://www.youtube.com/channel/UC3vIimi9q4AT8EgxYp_dWIw">Youtube</a></li>
<li class="social-icon -youtube"><a
href="https://www.youtube.com/channel/UC3vIimi9q4AT8EgxYp_dWIw">Youtube</a></li>
<li class="social-icon -github"><a href="https://github.com/NixOS">GitHub</a></li>
</ul>
</section>
Expand Down
2 changes: 1 addition & 1 deletion site-styles/components/demo.less
View file
Expand Up @@ -20,7 +20,7 @@
#text-replacement(
@image-rules: {
#svg.play;
background-size: 50%;
background-size: 25%;
},
);

Expand Down

0 comments on commit 7a8a7c0

Please sign in to comment.