Merge pull request #141 from tailwindcss/yaml-subtitles

Re-apply #138 "Move page descriptions into YAML"

Author: adamwathan

docs/source/_layouts/documentation.blade.php

@@ -190,6 +190,14 @@
         <div id="content" class="px-6 pb-8 pt-20 md:pt-16 w-full max-w-lg mx-auto">
             <div id="app" v-cloak>
                 <div class="markdown">
+                    <h1>{{ $page->title }}</h1>
+
+                    @if($page->description)
+                    <div class="text-xl text-slate-light mb-4">
+                        {{ $page->description }}
+                    </div>
+                    @endif
+
                     @yield('content')
                 </div>
             </div>

docs/source/_partials/work-in-progress-example.blade.md

@@ -0,0 +1,13 @@
+<div class="mt-8">
+  <div class="bg-blue-lightest border-l-4 border-blue-light rounded-b text-blue-darkest px-4 py-3">
+    <div class="flex">
+      <div class="py-1">
+        <svg class="h-6 w-6 text-blue-light mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm-.5-5h1c.276 0 .5.224.5.5v1c0 .276-.224.5-.5.5h-1c-.276 0-.5-.224-.5-.5v-1c0-.276.224-.5.5-.5zm0-8h1c.276 0 .5.224.5.5V8l-.5 3-1 .5L9 8V5.5c0-.276.224-.5.5-.5z"/></svg>
+      </div>
+      <div>
+        <p class="font-semibold">Work in progress!</p>
+        <p class="text-sm">More detailed examples are coming soon.</p>
+      </div>
+    </div>
+  </div>
+</div>

docs/source/docs/adding-new-utilities.blade.md

@@ -1,10 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Adding New Utilities"
+description: null
 ---
 
-# Adding New Utilities
-
 Although Tailwind provides a pretty comprehensive set of utility classes out of the box, you're inevitably going to run into situations where you need to add a few of your own.
 
 Deciding on the best way to extend a framework can be paralyzing, so here's some best practices and tools to help you add your own utilities "the Tailwind way."

docs/source/docs/background-color.blade.md

@@ -1,14 +1,9 @@
 ---
 extends: _layouts.documentation
-title: "Backgrounds"
+title: "Background Color"
+description: "Utilities for controlling an element's background color."
 ---
 
-# Background Color
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling an element's background color.
-</div>
-
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => true,

docs/source/docs/background-position.blade.md

@@ -1,14 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Background Position"
+description: "Utilities for controlling the position of an element's background image."
 ---
 
-# Background Position
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the position of an element's background image.
-</div>
-
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => false,

docs/source/docs/background-size.blade.md

@@ -1,14 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Background Size"
+description: "Utilities for controlling the background size of an element's background image."
 ---
 
-# Background Size
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the background size of an element's background image.
-</div>
-
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => false,

docs/source/docs/border-color.blade.md

@@ -1,14 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Border Color"
+description: "Utilities for controlling the color of an element's borders."
 ---
 
-# Border Color
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the color of an element's borders.
-</div>
-
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => true,

docs/source/docs/border-radius.blade.md

@@ -1,14 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Border Radius"
+description: "Utilities for controlling the border radius of an element."
 ---
 
-# Border Radius
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the border radius of an element.
-</div>
-
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => true,

docs/source/docs/border-style.blade.md

@@ -1,14 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Border Style"
+description: "Utilities for controlling the style of an element's borders."
 ---
 
-# Border Style
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the style of an element's borders.
-</div>
-
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => false,

docs/source/docs/border-width.blade.md

@@ -1,14 +1,9 @@
 ---
 extends: _layouts.documentation
 title: "Border Width"
+description: "Utilities for controlling the width an element's borders."
 ---
 
-# Border Width
-
-<div class="text-xl text-slate-light mb-4">
-    Utilities for controlling the width an element's borders.
-</div>
-
 @include('_partials.feature-badges', [
     'responsive' => true,
     'customizable' => true,