add example

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "[html]": {
+    "editor.formatOnSave": false
+  },
+}

_config.yml

@@ -5,4 +5,13 @@ theme: just-the-docs
 url: https://evenbetterspecs.github.io
 
 aux_links:
-  Template Repository: https://github.com/just-the-docs/just-the-docs-template
+  GitHub: https://github.com/evenbetterspecs/
+
+# External navigation links
+nav_external_links:
+  - title: Describe what you are testing
+    url: "#describe"
+    hide_icon: true
+  - title: Use context
+    url: "#use-context"
+    hide_icon: true

_sass/custom/custom.scss

@@ -0,0 +1,43 @@
+.bad,
+.good {
+  background: #e8e8e8;
+  padding: 5px 0px 0px 0;
+
+  &::before {
+    padding: 0 10px;
+  }
+
+  .highlight {
+    margin-top: 3px;
+  }
+}
+
+.bad {
+  color: red;
+
+  &::before {
+    content: "BAD";
+  }
+}
+
+.good {
+  color: green;
+
+  &::before {
+    content: "GOOD";
+  }
+}
+
+.main-content {
+  article:not(:last-child) {
+    margin-bottom: 4em;
+  }
+
+  h2 {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    margin-bottom: 0.75em;
+  }
+}

index.html

@@ -0,0 +1,63 @@
+---
+title: Home
+layout: home
+---
+
+<article>
+  <h2 id="describe">
+    <a href="#describe">
+      Describe what you are testing
+    </a>
+  </h2>
+
+  <p>Be clear about what method you are describing. For instance, use the Ruby documentation convention of <code>.</code> when referring to a class method's name and <code>#</code> when referring to an instance method's name.</p>
+
+  <div class="bad">
+{% highlight ruby %}
+describe 'the authenticate method for User' do
+describe 'if the user is an admin' do
+{% endhighlight %}
+  </div>
+
+  <div class="good">
+{% highlight ruby %}
+describe '.authenticate' do
+describe '#admin?' do
+{% endhighlight %}
+  </div>
+</article>
+
+
+<article>
+  <h2 id="use-context">
+    <a href="#use-context">
+      Use context
+    </a>
+  </h2>
+
+  <p>Contexts are a powerful way to make your tests clear and well organized (they keep tests easy to read). They should start with <code>when</code>.</p>
+
+  <div class="bad">
+{% highlight ruby %}
+it 'has 200 status code if logged in' do
+  expect(response).to respond_with 200
+end
+
+it 'has 401 status code if not logged in' do
+  expect(response).to respond_with 401
+end
+{% endhighlight %}
+  </div>
+
+  <div class="good">
+{% highlight ruby %}
+context 'when logged in' do
+  it { is_expected.to respond_with 200 }
+end
+
+context 'when logged out' do
+  it { is_expected.to respond_with 401 }
+end
+{% endhighlight %}
+  </div>
+</article>