Merge pull request GitbookIO#6 from GitbookIO/landing-page

Readme acts as landing page description

Author: SamyPesse

README.md

@@ -55,3 +55,14 @@ Extend the theme by creating a file `_layouts/website/page.html` in your book wi
 {% endblock %}
 ```
 
+##### Add short description for the home page
+
+The content of your README will be used as short description on the home page of your FAQ. If you want to keep a separate and more detailed README file for your project, you can use configure your `book.json` to specify the file to use:
+
+```json
+{
+ "structure": {
+ "readme": "home-page-description.md"
+ }
+}
+```

_layouts/website/layout.html

@@ -60,9 +60,17 @@ <h1>
  {% endif %}
  {% endblock %}
  </h1>
+
  {% block search_input %}{% endblock %}
+
+ {% if file.path == readme.file.path %}
+ <div class="description">
+ {{ page.content | safe }}
+ </div>
+ {% endif %}
  </div>
 </div>
+
 <div class="faq-page-container">
 {% block search_results %}
  {% block page %}{% endblock %}
@@ -77,6 +85,7 @@ <h1>
 </div>
 {% endblock %}
 
+
 {% block javascript %}
 <script src="{{ "gitbook.js"|resolveAsset }}"></script>
 {% for resource in plugins.resources.js %}

src/less/website.less

@@ -10,15 +10,6 @@
 .faq-navbar {
  margin: 0px;
  border: 0px;
-
- .nav-bar .navbar-nav > li > a {
- text-transform: uppercase;
- opacity: 0.6;
- letter-spacing: 0.1em;
- font-weight: 300;
- padding-top: 18px;
- padding-bottom: 18px;
- }
 }
 
 .faq-header {
@@ -31,10 +22,23 @@
  margin: 0px;
  margin-bottom: 30px;
 
-
  h1 {
  border: 0px;
  }
+
+ .description {
+ color: #777;
+ text-align: justify;
+ line-height: 1.8em;
+
+ // Align with faq-page-container
+ width: @faq-page-container-width;
+ min-width: @faq-page-container-width;
+ margin: 0px auto;
+ padding-left: @faq-page-padding;
+ padding-right: @faq-page-padding;
+ padding-top: 40px;
+ }
 }
 
 .faq-page-container {
@@ -65,8 +69,13 @@
 }
 
 @media (max-width: @faq-page-container-width) {
+ .description {
+ padding-left: 0px;
+ padding-right: 0px;
+ }
+
  .faq-page-container {
- padding: 0px;
+ padding: 20px 0px;
 
  > .panel {
  border-right: 0px;