Redesign the template (#1339)

* Redesign the template * Fix error * Exclude docs/assets/ from .eslint
sinonjs · Mar 20, 2017 · 6a7c801 · 6a7c801
1 parent 354c84c
commit 6a7c801
Show file tree

Hide file tree

Showing 105 changed files with 8,715 additions and 756 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -3,3 +3,4 @@ pkg/
 tmp/
 docs/js/
 docs/releases/
+docs/assets/js/
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -1,7 +1,5 @@
 title: Sinon.JS
-description: |
-  Standalone test spies, stubs and mocks for JavaScript.
-    Works with any unit testing framework.
+description: Standalone test spies, stubs and mocks for JavaScript. Works with any unit testing framework.
 url: 'http://sinonjs.org'
 github_username: sinonjs
 sinon:
@@ -26,3 +24,6 @@ collections:
   releases:
     output: true
     permalink: '/:collection/:path/'
+sass:
+  sass_dir: _sass
+  style: compressed
diff --git a/docs/_includes/docs/contribute.md b/docs/_includes/docs/contribute.md
@@ -1,7 +1,7 @@
-## Stuck?
+### Stuck?
 
 Please ask questions on [the mailing list](http://groups.google.com/group/sinonjs) if you're stuck.
 
-## Contribute
+### Contribute
 
 We really appreciate suggestions to improve the documentation so Sinon.JS can be easy to work with. Get in touch!
diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
@@ -1,24 +1,9 @@
-<footer class="site-footer">
-    <div class="wrapper">
-        <div class="footer-col-wrapper">
-            <div class="footer-col footer-col-1">
-                <ul class="contact-list">
-                    <li>{{ site.title }}</li>
-                    <li><a href="http://groups.google.com/group/sinonjs">http://groups.google.com/group/sinonjs</a></li>
-                </ul>
-            </div>
-            <div class="footer-col footer-col-2">
-                <ul class="social-media-list">
-                    {% if site.github_username %}
-                        <li>{% include icon-github.html username=site.github_username %}</li>
-                    {% endif %}
-                </ul>
-            </div>
-            <div class="footer-col footer-col-3">
-                Sinon uses <a href="http://semver.org/">Semantic versioning</a><br>
-                Copyright 2010 - 2017, the Sinon.JS committers. Released under the <a href="https://opensource.org/licenses/BSD-3-Clause">BSD license</a>.
-            </div>
-        </div>
-    </div>
-    <script src="{{ "/js/prism.js" | prepend: site.baseurl }}"></script>
-</footer>
+<script src="{{ "/assets/js/prism.js" | prepend: site.baseurl }}"></script>
+
+<div class="footer">
+  <div class="container text-center">
+    <a href="http://sinonjs.org/" target="blank"><img class="grow" src="{{ "/assets/images/small-logo.png" | prepend: site.baseurl }}" alt="Sinon.JS"></a>
+    <p>Copyright 2010 - 2017, the Sinon.JS committers.</p>
+    <p>Released under the <a href="https://opensource.org/licenses/BSD-3-Clause">BSD license</a>.</p>
+  </div>
+</div>
diff --git a/docs/_includes/head.html b/docs/_includes/head.html
@@ -1,9 +1,11 @@
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>
     <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}" />
-    <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
-    <link rel="stylesheet" href="{{ "/css/prism.css" | prepend: site.baseurl }}">
+    <link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
+    <link rel="shortcut icon" href="{{ "/assets/images/favicon.png" | prepend: site.baseurl }}">
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />
+    <link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet">
 </head>
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
@@ -1,11 +1,17 @@
-<header class="site-header">
-    <div class="wrapper">
-        <a class="site-title" href="{{ site.baseurl }}/">{{ site.title }}</a>
-        <nav class="site-nav">
-            <a class="page-link" href="{{ site.baseurl }}/">Home</a>
-            <a class="page-link" href="{{ site.baseurl }}/releases/{{site.sinon.current_release}}">API Documentation</a>
-            <a class="page-link" href="{{ site.baseurl }}/releases">Releases</a>
-            <a class="page-link" href="{{ site.baseurl }}/how-to">How To</a>
-        </nav>
-    </div>
-</header>
+<div class="navigation">
+  <div class="container">
+    <nav class="navbar header">
+      <div class="navbar-header">
+        <a class="navbar-brand" href="{{ site.baseurl }}/">
+          {{ site.title }}
+        </a>
+      </div>
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="{{ site.baseurl }}/releases/{{site.sinon.current_release}}">Documentation</a></li>
+        <li><a href="{{ site.baseurl }}/releases/">Releases</a></li>
+        <li><a href="{{ site.baseurl }}/how-to/">How To</a></li>
+        <li><a href="https://github.com/sinonjs/" target="blank" class="github-nav"><img src="{{ "/assets/images/Github.png" | prepend: site.baseurl }}" alt="Github"></a></li>
+      </ul>
+    </nav>
+  </div>
+</div>
diff --git a/docs/_includes/icon-github.html b/docs/_includes/icon-github.html
diff --git a/docs/_includes/icon-github.svg b/docs/_includes/icon-github.svg
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -1,20 +1,15 @@
 <!DOCTYPE html>
-<html>
-
-  {% include head.html %}
-
-  <body>
-
-    {% include header.html %}
-
-    <div class="page-content">
-      <div class="wrapper">
-        {{ content }}
-      </div>
+<html lang="en">
+{% include head.html %}
+<body>
+  {% include header.html %}
+
+  <div class="content">
+    <div class="container container-2">
+      {{ content }}
     </div>
+  </div>
 
-    {% include footer.html %}
-
-  </body>
-
+  {% include footer.html %}
+</body>
 </html>
diff --git a/docs/_layouts/homepage.html b/docs/_layouts/homepage.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+{% include head.html %}
+<body>
+  {% include header.html %}
+  <div class="top">
+    <div class="container home-header">
+      <img class="logo grow img-responsive" src="{{ "/assets/images/logo.png" | prepend: site.baseurl }}" alt="">
+      <h1>
+          Standalone test spies, stubs and mocks for JavaScript. <br>
+          Works with any unit testing framework.
+      </h1>
+
+      <p class="btn-top text-center">
+        <a class="btn btn-primary" href="#get-started">Get Started</a>
+        <a class="btn btn-default" target="blank" href="https://github.com/sinonjs/sinon"><img src="{{ "/assets/images/github.png" | prepend: site.baseurl }}" alt="">Star Sinon.JS on Github</a>
+      </p>
+
+      <div class="backed">
+        <div class="wrap">
+          <p class="centre-line"><span>Proudly Backed By</span></p>
+          <div class="people">
+            <a href="https://opencollective.com/sinon/"><img src="https://opencollective.com/sinon/backer/0/avatar.svg"></a>
+            <a href="https://opencollective.com/sinon/"><img src="https://opencollective.com/sinon/backer/1/avatar.svg"></a>
+          </div>
+        </div>
+        <div class="backer">
+            <span>Become a backer and support Sinon.JS with a monthly donation.</span>
+            <a class="btn btn-primary" target="blank" href="https://opencollective.com/sinon/">Become a backer</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="content">
+    <div class="container container-2">
+      {{ content }}
+    </div>
+  </div>
+
+  {% include footer.html %}
+</body>
+</html>
diff --git a/docs/_releases/v2.0.0.md b/docs/_releases/v2.0.0.md
@@ -1,10 +1,10 @@
 ---
 layout: page
-title: API documentation
+title: Sinon.JS - API documentation
 release_id: v2.0.0
 ---
 
-# {{page.title}} - `{{page.release_id}}`
+# API documentation - `{{page.release_id}}`
 
 This page contains the entire Sinon.JS API documentation along with brief    introductions to the concepts Sinon implements.
 
@@ -19,11 +19,11 @@ This page contains the entire Sinon.JS API documentation along with brief    int
 * [Sandboxes](./sandbox)
 * [Utils](./utils)
 
-## Migrating from v1.x to v2.0
+### Migrating from v1.x to v2.0
 
 Please see our [migration guide](./migrating-to-2.0) for details on migrating to Sinon.JS v2.0
 
-## Compatibility
+### Compatibility
 
 ### ES5.1
 

diff --git a/docs/_releases/v2.0.0/sandbox.md b/docs/_releases/v2.0.0/sandbox.md
@@ -75,11 +75,14 @@ sinon.defaultConfig = {
 
   <dt><code>useFakeServer</code></dt>
   <dd>If <code>true</code>, <code>server</code> and <code>requests</code> properties are added to the sandbox. Can also be an object to use for fake server. The default one is <code>sinon.fakeServer</code>, but if you're using jQuery 1.3.x or some other library that does not set the XHR's <code>onreadystatechange</code> handler, you might want to do:
+</dd>
+</dl>
 
-<pre class="code-snippet" data-lang="javascript"><code>sinon.config = {
+```javascript
+sinon.config = {
     useFakeServer: sinon.fakeServerWithClock
-};</code></pre></dd>
-</dl>
+};
+```
 
 
 #### `sandbox.assert();`