Skip to content

Commit

Permalink
tidy up html input
Browse files Browse the repository at this point in the history 
Signed-off-by: Chris Warrick <kwpolska@gmail.com>
  • Loading branch information
@Kwpolska
Kwpolska committed Jul 20, 2015
1 parent b62e365 commit 6f5bf2c
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 119 deletions.
120 changes: 28 additions & 92 deletions stories/features/index.html
View file
Expand Up @@ -9,126 +9,84 @@
.. type: text
-->
<!--
DON’T FORGET TO UPDATE THE TABLE OF CONTENT AT THE END!
DON’T FORGET TO UPDATE THE TABLE OF CONTENTS AT THE END!
-->

<div class="row">
<div class="col-md-9">
<div class="media">
<div class="media-left">
<div class="feature-icon feature-icon-static media-object">
<a href="/handbook.html#why-static"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-server fa-stack-1x fa-inverse"></i>
</span></a></div>
<a href="/handbook.html#why-static"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-server fa-stack-1x fa-inverse"></i></span></a>
</div>
</div>
<div class="media-body">
<h4 id="static" class="media-heading">Static sites</h4>
<p>
Static websites are safer, use fewer resources, and avoid vendor and
platform lock-in. You can host a Nikola website on any web server, big or
small. It’s just a bunch of HTML files and assets.
</p>
<p>Static websites are safer, use fewer resources, and avoid vendor and platform lock-in. You can host a Nikola website on any web server, big or small. It’s just a bunch of HTML files and assets.</p>
<p><a href="/handbook.html#why-static" class="btn btn-sm btn-default">Why static? »</a></p>
</div>
</div>

<div class="media">
<div class="media-left">
<div class="feature-icon feature-icon-fast media-object">
<a href="/features/fast.html"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bolt fa-stack-1x fa-inverse"></i>
</span></a></div>
<a href="/features/fast.html"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-bolt fa-stack-1x fa-inverse"></i></span></a>
</div>
</div>
<div class="media-body">
<h4 id="fast" class="media-heading">Incremental builds</h4>

<p>
Nikola is fast. It uses <a href="http://pydoit.org">doit</a>, which provides incremental
rebuilds — in other words, we rebuild only the pages that need rebuilding,
saving CPU time, wall clock time and upload bandwidth.
</p>

<p>Nikola is fast. It uses <a href="http://pydoit.org">doit</a>, which provides incremental rebuilds — in other words, we rebuild only the pages that need rebuilding, saving CPU time, wall clock time and upload bandwidth.</p>
<p><a href="/features/fast.html" class="btn btn-sm btn-default">Explore in depth »</a></p>
</div>
</div>

<div class="media">
<div class="media-left">
<div class="feature-icon feature-icon-input media-object">
<a href="/handbook.html#supported-input-formats"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-file-text fa-stack-1x fa-inverse"></i>
</span></a></div>
<a href="/handbook.html#supported-input-formats"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-file-text fa-stack-1x fa-inverse"></i></span></a>
</div>
</div>
<div class="media-body">
<h4 id="input" class="media-heading">Multiple input formats</h4>
<p>
Nikola will take input in many formats. Out of the box, we support
reStructuredText, Markdown, IPython (Jupyter) Notebooks and HTML, and have
plugins for many other formats.
</p>
<p>Nikola will take input in many formats. Out of the box, we support reStructuredText, Markdown, IPython (Jupyter) Notebooks and HTML, and have plugins for many other formats.</p>
<p><a href="/handbook.html#supported-input-formats" class="btn btn-sm btn-default">Check list of input formats and setup documentation »</a></p>
</div>
</div>

<div class="media">
<div class="media-left">
<div class="feature-icon feature-icon-components media-object">
<a href="/handbook.html#components"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cubes fa-stack-1x fa-inverse"></i>
</span></a></div>
<a href="/handbook.html#components"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-cubes fa-stack-1x fa-inverse"></i></span></a>
</div>
</div>
<div class="media-body">
<h4 id="components" class="media-heading">Built-in components</h4>
<p>
Nikola comes with everything you need to build a modern website: blogs (with
comments, tags, categories, archives, RSS/Atom feeds), multilingual support,
easy image galleries, and code listings.
</p>
<p>Nikola comes with everything you need to build a modern website: blogs (with comments, tags, categories, archives, RSS/Atom feeds), multilingual support, easy image galleries, and code listings.</p>
<p><a href="/handbook.html#components" class="btn btn-sm btn-default">Explore in depth »</a></p>
</div>
</div>

<div class="media">
<div class="media-left">
<div class="feature-icon feature-icon-extensible media-object">
<a href="/extending.html"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-code fa-stack-1x fa-inverse"></i>
</span></a></div>
<a href="/extending.html"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-code fa-stack-1x fa-inverse"></i></span></a>
</div>
</div>
<div class="media-body">
<h4 id="extending" class="media-heading">Extensible</h4>
<p>
Nikola is extensible. You can write a plugin to add any feature you want in a
few lines of Python, or write your own theme in Mako or Jinja2. Or find
something in the <a href="https://plugins.getnikola.com/">Plugin</a> and
<a href="https://themes.getnikola.com/">Theme</a> Indexes.
</p>
<p>Nikola is extensible. You can write a plugin to add any feature you want in a few lines of Python, or write your own theme in Mako or Jinja2. Or find something in the <a href="https://plugins.getnikola.com/">Plugin</a> and <a href="https://themes.getnikola.com/">Theme</a> Indexes.</p>
<p><a href="/extending.html" class="btn btn-sm btn-default">Read extending documentation »</a></p>
</div>
</div>

<div class="media">
<div class="media-left">
<div class="feature-icon feature-icon-cli media-object">
<a href="#cli"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span></a></div>
<a href="#cli"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-terminal fa-stack-1x fa-inverse"></i></span></a>
</div>
</div>
<div class="media-body">
<h4 id="cli" class="media-heading">Friendly CLI</h4>
<p>
Nikola has a friendly user interface that gets you up and running quickly and
simplifies your work.
</p>
<p>Nikola has a friendly user interface that gets you up and running quickly and simplifies your work.</p>
<ul>
<li>To build your site, just run <code class="gs-code gs-command">nikola build</code>.</li>
<li>You can use <a href="#auto">automatic rebuilds</a> with <code class="gs-code gs-command">nikola auto</code>, or a simple server with <code class="gs-code gs-command">nikola serve</code>.</li>
<li>You can use <a href="#auto">automatic rebuilds</a> with <code class="gs-code gs-command">nikola auto</code>, or a simple server with <code class="gs-code gs-command">nikola serve</code>.
</li>
<li>Deploy with <code class="gs-code gs-command">nikola deploy</code> or <code class="gs-code gs-command">nikola github_deploy</code>.</li>
<li>See some status information for your site with <code class="gs-code gs-command">nikola status</code>.</li>
<li>Check for broken links and missing/orphan files with <code class="gs-code gs-command">nikola check</code>.</li>
Expand All @@ -141,50 +99,28 @@ <h4 id="cli" class="media-heading">Friendly CLI</h4>
</ul>
</div>
</div>

<div class="media">
<div class="media-left">
<div class="feature-icon feature-icon-auto media-object">
<a href="/features/auto.html"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cogs fa-stack-1x fa-inverse"></i>
</span></a></div>
<a href="/features/auto.html"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-cogs fa-stack-1x fa-inverse"></i></span></a>
</div>
</div>
<div class="media-body">
<h4 id="auto" class="media-heading">Automatic rebuilds</h4>
<p>
If you are working on your site, you don’t need to type <code class="gs-code gs-command">nikola build</code> and reload every time you make a change.
Instead, just run <code class="gs-code gs-command">nikola auto</code>. It will detect changes and automatically rebuild your site and refresh your browser (using livereload).
</p>
<p>If you are working on your site, you don’t need to type <code class="gs-code gs-command">nikola build</code> and reload every time you make a change. Instead, just run <code class="gs-code gs-command">nikola auto</code>. It will detect changes and automatically rebuild your site and refresh your browser (using livereload).</p>
<p><a href="/features/auto.html" class="btn btn-sm btn-default">Explore in depth »</a></p>
</div>
</div>

<div class="media">
<div class="media-left">
<div class="feature-icon feature-icon-coil media-object">
<a href="https://coil.readthedocs.org/"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-users fa-stack-1x fa-inverse"></i>
</span></a></div>
<a href="https://coil.readthedocs.org/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-users fa-stack-1x fa-inverse"></i></span></a>
</div>
</div>
<div class="media-body">
<h4 id="coil" class="media-heading">Coil CMS — a CMS for Nikola</h4>

<p>
If you want to use Nikola for a website that has content authored by people who
do not like command-line interfaces or who would prefer to use a WYSIWYG
editor, we have a solution for you.
</p>
<p>
Coil CMS is a basic CMS (with user management and a WYSIWYG HTML editor), which
uses Nikola to generate the pages, combining the best of both worlds: you (or
your editors) can easily create content, while the site is based on resilient
static pages. Users don’t even have to know what Nikola, Python or static websites
are. They just write their content. The only difference is that they (or
someone with the necessary permissions) need to click a *Rebuild* button to
make their changes show up on the website.
</p>
<p>If you want to use Nikola for a website that has content authored by people who do not like command-line interfaces or who would prefer to use a WYSIWYG editor, we have a solution for you.</p>
<p>Coil CMS is a basic CMS (with user management and a WYSIWYG HTML editor), which uses Nikola to generate the pages, combining the best of both worlds: you (or your editors) can easily create content, while the site is based on resilient static pages. Users don’t even have to know what Nikola, Python or static websites are. They just write their content. The only difference is that they (or someone with the necessary permissions) need to click a *Rebuild* button to make their changes show up on the website.</p>
<p><a href="https://coil.readthedocs.org/" class="btn btn-sm btn-default">Read Coil CMS documentation »</a></p>
</div>
</div>
Expand Down
46 changes: 19 additions & 27 deletions stories/index.html
View file
Expand Up @@ -14,59 +14,51 @@
<div class="container">
<h1>Nikola — Static Site Generator</h1>
<p>In goes content, out comes a website, ready to deploy.</p>
<p><a class="btn btn-primary btn-lg" href="/getting-started.html" role="button">Get started with Nikola &raquo;</a> <a class="btn btn-default btn-lg" href="/features/index.html" role="button">Learn about Nikola features &raquo;</a></p>
<p><a class="btn btn-primary btn-lg" href="/getting-started.html" role="button">Get started with Nikola »</a> <a class="btn btn-default btn-lg" href="/features/index.html" role="button">Learn about Nikola features »</a></p>
<p><small>Nikola is written in Python (2.7+/3.3+). Free open-source software under the <a href="/license.html">MIT license</a>.</small></p>
</div>
</div>

<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<div class="feature-icon feature-icon-static"><a href="/handbook.html#why-static"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-server fa-stack-1x fa-inverse"></i>
</span></a></div>
<div class="feature-icon feature-icon-static">
<a href="/handbook.html#why-static"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-server fa-stack-1x fa-inverse"></i></span></a>
</div>
<h2 class="index-feature">Host anywhere.</h2>
<p><a href="/handbook.html#why-static">Static websites</a> are safer, use fewer resources, and avoid vendor and platform lock-in. You can host a Nikola website on any web server, big or small. It’s just a bunch of HTML files and assets.</p>
</div>
<div class="col-md-4">
<div class="feature-icon feature-icon-fast"><a href="/features/fast.html"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flash fa-stack-1x fa-inverse"></i>
</span></a></div>
<div class="feature-icon feature-icon-fast">
<a href="/features/fast.html"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flash fa-stack-1x fa-inverse"></i></span></a>
</div>
<h2 class="index-feature">Fast, incremental builds.</h2>
<p><a href="/features/fast.html">Nikola is fast.</a> We use <a href="http://pydoit.org/">doit</a>, which provides incremental rebuilds — in other words, we rebuild only the pages that <em>need</em> rebuilding, saving CPU time, wall clock time and upload bandwidth.</p>
</div>
<div class="col-md-4">
<div class="feature-icon feature-icon-formats"><a href="/handbook.html#supported-input-formats"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-file-text fa-stack-1x fa-inverse"></i>
</span></a></div>
<div class="feature-icon feature-icon-formats">
<a href="/handbook.html#supported-input-formats"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-file-text fa-stack-1x fa-inverse"></i></span></a>
</div>
<h2 class="index-feature">Any input format you like.</h2>
<p><a href="/handbook.html#supported-input-formats">Nikola will take input in many formats</a>. Out of the box, we support reStructuredText, Markdown, IPython (Jupyter) Notebooks and HTML, and have plugins for many other formats.</p>
</div>
<div class="col-md-4">
<div class="feature-icon feature-icon-components"><a href="/handbook.html#components"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-cubes fa-stack-1x fa-inverse"></i>
</span></a></div>
<div class="feature-icon feature-icon-components">
<a href="/handbook.html#components"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-cubes fa-stack-1x fa-inverse"></i></span></a>
</div>
<h2 class="index-feature">Batteries included.</h2>
<p><a href="/handbook.html#components">Nikola comes with everything you need</a> to build a modern website: blogs (with comments, tags, categories, archives, RSS/Atom feeds), multilingual support, easy image galleries, and code listings.</p>
</div>
<div class="col-md-4">
<div class="feature-icon feature-icon-extensible"><a href="/extending.html"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-code fa-stack-1x fa-inverse"></i>
</span></a></div>
<div class="feature-icon feature-icon-extensible">
<a href="/extending.html"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-code fa-stack-1x fa-inverse"></i></span></a>
</div>
<h2 class="index-feature">Easily extensible.</h2>
<p><a href="/extending.html">Nikola is extensible</a>. You can write a plugin to add any feature you want in a few lines of Python, or write your own theme in Mako or Jinja2. Or find something in the <a href="https://plugins.getnikola.com">Plugin</a> and <a href="https://themes.getnikola.com/">Theme</a> Indexes.</p>
</div>
<div class="col-md-4">
<div class="feature-icon feature-icon-unix"><a href="/features/index.html#cli"><span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span></a></div>
<div class="feature-icon feature-icon-unix">
<a href="/features/index.html#cli"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-terminal fa-stack-1x fa-inverse"></i></span></a>
</div>
<h2 class="index-feature">User-friendly CLI.</h2>
<p><a href="/features/index.html#cli">Nikola has a friendly user interface</a> that gets you up and running quickly and simplifies your work. You do not need to memorize headers just to create a post — we’ll write them for you.</p>
</div>
Expand Down

0 comments on commit 6f5bf2c

Please sign in to comment.