Merge pull request #513 from Shopify/docs-update

Docs Update
2026-01-01 15:55:40 +03:00 · 2016-03-18 16:15:16 -04:00
parent ba56db81e1 74f478679f
commit 6bc76a92ea
82 changed files with 3067 additions and 278 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,41 @@
-_site
+_site/
+.sass-cache/
+node_modules/
+
+# Compiled source #
+###################
+*.com
+*.class
+*.dll
+*.exe
+*.o
+*.so
+
+# Packages #
+############
+# it's better to unpack these files and commit the raw source
+# git has its own built in compression methods
+*.7z
+*.dmg
+*.gz
+*.iso
+*.jar
+*.rar
+*.tar
+*.zip
+
+# Logs and databases #
+######################
+*.log
+*.sql
+*.sqlite
+
+# OS generated files #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
--- a/.travis.yml
+++ b/.travis.yml
@@ -0,0 +1,4 @@
+install: gem install github-pages
+script: jekyll build --trace
+sudo: false
+rvm: 2.1
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -0,0 +1,72 @@
+// Gruntfile
+module.exports = function(grunt) {
+require('load-grunt-tasks')(grunt);
+
+  // Project configuration.
+  grunt.initConfig({
+
+    pkg: grunt.file.readJSON('package.json'),
+
+    watch: {
+      css: {
+        files: ['_sass/**/*.scss'],
+        tasks: ['sass', 'postcss', 'shell:jekyllBuild'],
+        options: {
+          atBegin: true
+        }
+      },
+      jekyll: {
+        files: ['index.md', '_includes/*.html', 'filters/*.*',  '_layouts/*.*', 'tags/*.*', 'basics/*.*'],
+        tasks: ['shell:jekyllBuild']
+      }
+    },
+
+    sass: {
+      dist: {
+        options: {
+          style: 'expanded',
+          sourcemap: 'none'
+        },
+        files: {
+          '_site/css/main.css':'_sass/main.scss'
+        }
+      }
+    },
+
+    shell: {
+      jekyllServe: {
+        command: 'jekyll serve --no-watch'
+      },
+
+      jekyllBuild: {
+        command: 'jekyll build'
+      }
+    },
+
+    postcss: {
+      options: {
+        map: true,
+        processors: [
+          require('autoprefixer-core')({browsers: 'last 2 versions'})
+        ]
+      },
+      dist: {
+        src: '_site/css/*.css'
+      }
+    },
+
+    concurrent: {
+      tasks: ['shell:jekyllServe', 'watch'],
+      options: {
+        logConcurrentOutput: true
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-sass');
+  grunt.loadNpmTasks('grunt-postcss');
+  grunt.loadNpmTasks('grunt-concurrent');
+
+  grunt.registerTask('default', ['concurrent']);
+};
--- a/README.md
+++ b/README.md
@@ -0,0 +1,9 @@
+# New Liquid Docs
+
+To run, follow these steps:
+
+1. Download ZIP or clone in GitHub
+2. Navigate to `liquid` folder
+3. Run `jekyll watch`
+4. Open `http://127.0.0.1:4000` in your browser
+
--- a/_config.yml
+++ b/_config.yml
@@ -0,0 +1,23 @@
+title: Liquid Templating Engine
+description: "Liquid is a template language and accompanying rendering engine. It is built for security, so is perfect for rendering custom templates from your users."
+
+# Build settings
+baseurl:                "" # the subpath of your site, e.g. /blog/
+url:                    http://liquidmarkup.org # the base hostname & protocol for your site
+markdown:               redcarpet
+redcarpet:
+  extensions:           ["with_toc_data", "tables", "disable_indented_code_blocks", "no_intra_emphasis"]
+highlighter:            pygments
+permalink:              pretty
+exclude:
+  - README.md
+  - CNAME
+  - node_modules
+keep_files:             ["css"]
+
+# Front matter defaults
+defaults:
+  - scope:
+      path: "" # an empty string here means all files in the project
+    values:
+      layout: default
--- a/_includes/home-banner.html
+++ b/_includes/home-banner.html
@@ -0,0 +1,8 @@
+<header class="home-banner">
+  <h1>Liquid</h1>
+  <p>Safe, customer facing template language for flexible web apps.</p>
+  <p class="btn-row">
+    <a href="https://github.com/Shopify/liquid/archive/master.zip" target="_blank" class="btn"><i class="icon fa fa-2x fa-arrow-circle-down"></i>Download</a>
+    <a href="https://github.com/Shopify/liquid" target="_blank" class="btn"><i class="icon fa fa-2x fa-github"></i>View on Github</a>
+  </p>
+</header>
--- a/_includes/home-users-grid.html
+++ b/_includes/home-users-grid.html
@@ -0,0 +1,24 @@
+<div class="home-users-grid">
+  <div class="home-users-grid__item">
+    <a href="http://jekyllrb.com/" target="_blank">
+      <img src="/images/jekyll-logo.png" />
+    </a>
+  </div>
+  <div class="home-users-grid__item">
+    <a href="http://www.desk.com/" target="_blank">
+      <img src="/images/salesforcedesk-logo.png" />
+    </a>
+  </div>
+  <div class="home-users-grid__item">
+    <a href="https://www.zendesk.com/ " target="_blank">
+      <img src="/images/zendesk-logo.png" />
+    </a>
+  </div>
+  <div class="home-users-grid__item">
+    <a href="http://500px.com/" target="_blank">
+      <img src="/images/500px-logo.png" />
+    </a>
+  </div>
+</div>
+
+<p class="home-users-blurb">...and <a href="https://github.com/Shopify/liquid/wiki#who-uses-liquid" target="_blank">many more!</a></p>
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -0,0 +1,18 @@
+<div class="sidebar">
+  <div class="sidebar--logo">
+    <a href="/">Liquid</a>
+  </div>
+  <nav class="sidebar--nav"> {% assign sections = "basics, tags, filters" | split: ", " %}
+
+    {% for section in sections %}
+    <h3 class="section__header">{{ section | capitalize }}</h3>
+
+    <ul class="section__links">
+    {% for item in site.pages %}{% if item.url contains section/ %}{% unless item.path contains "index" %}
+      <li><a href="{{ item.url | prepend: site.baseurl }}" class="section__link{% if item.url contains page.url and page.url != "/" %} section__link--is-active {% endif %}">{{ item.title }}</a></li>
+    {% endunless %}{% endif %}{% endfor %}
+    </ul>
+    {% endfor %}
+
+  </nav>
+</div>
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>{% if page.title %}{{ page.title }} – {% endif %}{{ site.title }}</title>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <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 href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
+    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" />
+  </head>
+
+  <body>
+    {% include sidebar.html %}
+
+    <div class="content__area">
+      <div class="content">
+        <h1>{{ page.title }}</h1>
+        {{ content }}
+      </div>
+    </div>
+
+  </body>
+</html>
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -0,0 +1,17 @@
+
+@charset "utf-8";
+
+@import "partials/defaults";
+@import "partials/colors";
+@import "partials/helpers";
+
+@import "modules/base";
+@import "modules/layout";
+@import "modules/buttons";
+@import "modules/home-banner";
+@import "modules/home-users-grid";
+@import "modules/content-area";
+
+@import "vendors/syntax-highlighting";
+
+
--- a/_sass/modules/_base.scss
+++ b/_sass/modules/_base.scss
@@ -0,0 +1,185 @@
+* {
+  box-sizing: border-box;
+}
+
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+    margin: 0;
+    padding: 0;
+}
+
+/**
+ * Basic styling
+ */
+body {
+  font-family: $base-font-family;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+  font-weight: 300;
+  color: $color-slate;
+  -webkit-text-size-adjust: 100%;
+}
+
+/** Set `margin-bottom` to maintain vertical rhythm */
+
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+  margin-bottom: $spacing-unit / 2;
+}
+
+/** Images */
+
+img {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+/** Figures */
+
+figure > img {
+  display: block;
+}
+
+figcaption {
+  font-size: $small-font-size;
+}
+
+/** Lists */
+ul, ol {
+  margin-left: $spacing-unit;
+}
+
+li {
+  > ul, > ol {
+    margin-bottom: 0;
+  }
+}
+
+/** Headings */
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+}
+
+/** Links */
+a {
+    color: $color-blue-5;
+
+    &:visited {
+      color: #609;
+    }
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  font-size: 1.5em;
+  text-decoration: underline;
+  margin-top: $spacing-unit;
+}
+
+h3 {
+  font-size: 1em;
+  text-decoration: underline;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+blockquote {
+  color: lighten($color-slate, 30%);
+  border-left: 2px solid lighten($color-slate, 50%);
+  padding-left: $spacing-unit / 2;
+  letter-spacing: -1px;
+  font-style: italic;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+pre, code {
+  font-size: 15px;
+  border-radius: 3px;
+  background-color: lighten($color-blue-1, 0.9);
+}
+
+code {
+  padding: 1px 5px;
+}
+
+pre {
+  padding: 8px 12px;
+  border: 1px solid $color-blue-2;
+  word-wrap: break-word;
+
+  > code {
+    border: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  background-color: lighten($color-slate, 50%);
+  margin-bottom: $spacing-unit/2;
+}
+
+table {
+  width: 100%;
+  overflow: auto;
+  display: block;
+  margin: 15px 0;
+  border-collapse: collapse;
+  thead {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+  }
+  th {
+    border: 1px solid #ddd;
+    padding: 6px 13px;
+    font-weight: bold;
+    text-align: center;
+  }
+  tbody {
+    vertical-align: middle;
+    border-color: inherit;
+  }
+  tr {
+    border-top: 1px solid #ccc;
+    background-color: #fff;
+    vertical-align: inherit;
+  }
+  td {
+    border: 1px solid #ddd;
+    padding: 6px 13px;
+  }
+  /* Don't use a margin on code samples within tables */
+  pre {
+    margin-bottom: 0;
+  }
+}
+
+p {
+  line-height: 1.8;
+}
--- a/_sass/modules/_buttons.scss
+++ b/_sass/modules/_buttons.scss
@@ -0,0 +1,34 @@
+.btn {
+  color: $color-white;
+  display: flex;
+  background: $color-blue-5;
+  align-items: center;
+  padding: $spacing-unit/4 $spacing-unit/2;
+  border-radius: 8px;
+  text-decoration: none;
+
+  &:hover {
+    background: $color-blue-4;
+    cursor: pointer;
+    text-decoration: none;
+  }
+}
+
+.btn:visited {
+  color: $color-white;
+}
+
+.btn-row {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0;
+
+  .btn:not(:first-child) {
+    margin-left: $spacing-unit / 2;
+  }
+}
+
+.icon {
+  vertical-align: middle;
+  margin-right: $spacing-unit / 4;
+}
--- a/_sass/modules/_content-area.scss
+++ b/_sass/modules/_content-area.scss
@@ -0,0 +1,31 @@
+.content__item {
+  margin-bottom: $spacing-unit * 2;
+}
+
+.highlight {
+
+  pre {
+    border-top: none;
+    border-radius: 0 0 3px 3px;
+  }
+
+  &:before {
+    content: "Example";
+    display: block;
+    padding: 8px 12px;
+    color: $color-slate;
+    background: #fff;
+    border: 1px solid $color-blue-2;
+    border-radius: 3px 3px 0 0;
+    font-size: 16px;
+    font-weight: bold;
+  }
+
+  // Label every second code block with "Output"
+  & + .highlight:nth-of-type(2n) {
+    &:before {
+      content: "Output";
+    }
+  }
+
+}
--- a/_sass/modules/_home-banner.scss
+++ b/_sass/modules/_home-banner.scss
@@ -0,0 +1,11 @@
+.home-banner {
+  text-align: center;
+  border-bottom: 1px solid lighten($color-slate, 50%);
+  padding-bottom: $spacing-unit;
+  margin-bottom: $spacing-unit;
+
+  h1 {
+    font-weight: bold;
+    font-size: 5em;
+  }
+}
--- a/_sass/modules/_home-users-grid.scss
+++ b/_sass/modules/_home-users-grid.scss
@@ -0,0 +1,20 @@
+.home-users-grid {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: $spacing-unit / 2;
+}
+
+.home-users-grid__item{
+  flex: 1;
+  margin-right: $spacing-unit / 2;
+  max-width: 50%;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.home-users-blurb {
+  text-align: right;
+}
--- a/_sass/modules/_layout.scss
+++ b/_sass/modules/_layout.scss
@@ -0,0 +1,112 @@
+
+$sidebar-width: 250px;
+$logo-height: 130px;
+$wrapper-width: 800px;
+
+/*============================================================================
+  Content Area
+ ==============================================================================*/
+
+.content__area {
+  padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
+  width: 100%;
+}
+
+.content {
+  max-width: $wrapper-width;
+  margin: 0 auto;
+  padding: 0 $spacing-unit;
+  @extend %clearfix;
+}
+
+/*============================================================================
+  Sidebar
+ ==============================================================================*/
+
+.sidebar {
+  background: $color-blue-5;
+  width: $sidebar-width;
+  height: 100vh;
+  position: fixed;
+}
+
+.sidebar--logo {
+  font-size: $base-font-size * 2;
+  font-weight: bold;
+  text-align: center;
+  height: $logo-height;
+  line-height: $logo-height;
+  margin-bottom: 0;
+  border-bottom: 1px solid $color-blue-4;
+
+  a {
+    color: $color-white;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.sidebar--nav {
+  padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height); // Add a bit more padding at the bottom for consistency.
+  font-weight: bold;
+  max-height: 100%;
+  overflow-y: scroll;
+
+  li {
+    list-style: none;
+
+    a {
+      color: $color-white;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+.section {
+  margin: 0px;
+
+  > li {
+    margin-bottom: $spacing-unit / 2;
+
+    &:last-child {
+      margin-bottom: $spacing-unit;
+    }
+  }
+}
+
+.section__header {
+  font-weight: bold;
+  font-size: 1em;
+  text-decoration: none;
+  color: $color-white;
+  margin-bottom: $spacing-unit / 4;
+}
+
+.section__links {
+  margin-left: $spacing-unit / 2;
+  margin-bottom: $spacing-unit;
+  font-weight: normal;
+  font-size: 0.9em;
+}
+
+.section__link {
+  display: inline-block;
+  margin-top: $spacing-unit/4;
+  opacity: 0.75;
+  text-decoration: none;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.section__link--is-active {
+  font-weight: bold;
+  opacity: 1;
+}
--- a/_sass/partials/_colors.scss
+++ b/_sass/partials/_colors.scss
@@ -0,0 +1,10 @@
+// I got the blues, man.
+// 1 --> 5, lightest --> darkest.
+
+$color-blue-1: #E8F8FF;
+$color-blue-2: #B4DCED;
+$color-blue-3: #91C9E8;
+$color-blue-4: #67B8DE;
+$color-blue-5: #3399CC;
+$color-white: #ffffff;
+$color-slate: #5E5E5E;
--- a/_sass/partials/_defaults.scss
+++ b/_sass/partials/_defaults.scss
@@ -0,0 +1,6 @@
+$base-font-family: 'Droid Sans', sans-serif;
+$base-font-size:   18px;
+$small-font-size:  $base-font-size * 0.875;
+$base-line-height: 1.5;
+$spacing-unit:     40px;
+
--- a/_sass/partials/_helpers.scss
+++ b/_sass/partials/_helpers.scss
@@ -0,0 +1,7 @@
+%clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+   }
+}
--- a/_sass/vendors/_syntax-highlighting.scss
+++ b/_sass/vendors/_syntax-highlighting.scss
@@ -0,0 +1,67 @@
+/**
+ * Syntax highlighting styles
+ */
+.highlight {
+    background: #fff;
+    @extend %vertical-rhythm;
+
+    .c     { color: #998; font-style: italic } // Comment
+    .err   { color: #a61717; background-color: #e3d2d2 } // Error
+    .k     { font-weight: bold } // Keyword
+    .o     { font-weight: bold } // Operator
+    .cm    { color: #998; font-style: italic } // Comment.Multiline
+    .cp    { color: #999; font-weight: bold } // Comment.Preproc
+    .c1    { color: #998; font-style: italic } // Comment.Single
+    .cs    { color: #999; font-weight: bold; font-style: italic } // Comment.Special
+    .gd    { color: #000; background-color: #fdd } // Generic.Deleted
+    .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+    .ge    { font-style: italic } // Generic.Emph
+    .gr    { color: #a00 } // Generic.Error
+    .gh    { color: #999 } // Generic.Heading
+    .gi    { color: #000; background-color: #dfd } // Generic.Inserted
+    .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+    .go    { color: #888 } // Generic.Output
+    .gp    { color: #555 } // Generic.Prompt
+    .gs    { font-weight: bold } // Generic.Strong
+    .gu    { color: #aaa } // Generic.Subheading
+    .gt    { color: #a00 } // Generic.Traceback
+    .kc    { font-weight: bold } // Keyword.Constant
+    .kd    { font-weight: bold } // Keyword.Declaration
+    .kp    { font-weight: bold } // Keyword.Pseudo
+    .kr    { font-weight: bold } // Keyword.Reserved
+    .kt    { color: #458; font-weight: bold } // Keyword.Type
+    .m     { color: #099 } // Literal.Number
+    .s     { color: #d14 } // Literal.String
+    .na    { color: #008080 } // Name.Attribute
+    .nb    { color: #0086B3 } // Name.Builtin
+    .nc    { color: #458; font-weight: bold } // Name.Class
+    .no    { color: #008080 } // Name.Constant
+    .ni    { color: #800080 } // Name.Entity
+    .ne    { color: #900; font-weight: bold } // Name.Exception
+    .nf    { color: #900; font-weight: bold } // Name.Function
+    .nn    { color: #555 } // Name.Namespace
+    .nt    { color: #000080 } // Name.Tag
+    .nv    { color: #008080 } // Name.Variable
+    .ow    { font-weight: bold } // Operator.Word
+    .w     { color: #bbb } // Text.Whitespace
+    .mf    { color: #099 } // Literal.Number.Float
+    .mh    { color: #099 } // Literal.Number.Hex
+    .mi    { color: #099 } // Literal.Number.Integer
+    .mo    { color: #099 } // Literal.Number.Oct
+    .sb    { color: #d14 } // Literal.String.Backtick
+    .sc    { color: #d14 } // Literal.String.Char
+    .sd    { color: #d14 } // Literal.String.Doc
+    .s2    { color: #d14 } // Literal.String.Double
+    .se    { color: #d14 } // Literal.String.Escape
+    .sh    { color: #d14 } // Literal.String.Heredoc
+    .si    { color: #d14 } // Literal.String.Interpol
+    .sx    { color: #d14 } // Literal.String.Other
+    .sr    { color: #009926 } // Literal.String.Regex
+    .s1    { color: #d14 } // Literal.String.Single
+    .ss    { color: #990073 } // Literal.String.Symbol
+    .bp    { color: #999 } // Name.Builtin.Pseudo
+    .vc    { color: #008080 } // Name.Variable.Class
+    .vg    { color: #008080 } // Name.Variable.Global
+    .vi    { color: #008080 } // Name.Variable.Instance
+    .il    { color: #099 } // Literal.Number.Integer.Long
+}
--- a/basics/_handles.md
+++ b/basics/_handles.md
@@ -0,0 +1,48 @@
+---
+title: Handles
+---
+
+A handle is used to access the attributes of a Liquid object. By default, the handle is the object's title in lowercase with any spaces and special characters replaced by hyphens (-).
+
+For example, a page with the title "About Us" can be accessed in Liquid via its handle `about-us` as shown below:
+
+{% highlight liquid %}
+{% raw %}
+<!-- the content of the About Us page -->
+{{ pages.about-us.content }}
+{% endraw %}
+{% endhighlight %}
+
+## Creating handles
+
+An object with the title "Shirt" will automatically be given the handle `shirt`. If there is already an object with the handle `shirt`, the handle will auto-increment. In other words, "Shirt" objects created after the first one will receive the handle `shirt-1`, `shirt-2`, and so on.
+
+Whitespace in titles is replaced by hyphens in handles. For example, the title "My Shiny New Title" will be given the handle `my-shiny-new-title`.
+
+Handles also determine the URL of their corresponding objects. For example, a page with the handle `about-us` would have the url `/pages/about-us`.
+
+Websites often rely on static handles for pages, posts, or objects. To preserve design elements and avoid broken links, if you modify the title of an object, **its handle is not automatically updated**. For example, if you were to change a page title from "About Us" to "About This Website", its handle would still be `about-us`.
+
+You can change an object's handle manually (TK how to change a handle manually)
+
+## Accessing handle attributes
+
+In many cases you may know the handle of a object whose attributes you want to access. You can access its attributes by pluralizing the name of the object, then using either the square bracket ( [ ] ) or dot ( . ) notation.
+
+<div class="code-block code-block--input">
+{% highlight liquid %}
+{% raw %}
+{{ pages.about-us.title }}
+{{ pages["about-us"].title }}
+{% endraw %}
+{% endhighlight %}
+</div>
+
+<div class="code-block code-block--output">
+{% highlight text %}
+About Us
+About Us
+{% endhighlight %}
+</div>
+
+In the example above, notice that we are using `pages` as opposed to `page`.
--- a/basics/index.html
+++ b/basics/index.html
@@ -0,0 +1,4 @@
+---
+layout: default
+---
+
--- a/basics/introduction.md
+++ b/basics/introduction.md
@@ -0,0 +1,64 @@
+---
+title: Introduction
+---
+
+Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags), and [**filters**](#filters).
+
+## Objects
+
+**Objects** tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`.
+
+
+```liquid
+{% raw %}
+{{ page.title }}
+{% endraw %}
+```
+
+```text
+Introduction
+```
+
+In this case, Liquid is rendering the content of an object called `page.title`, and that object contains the text `Introduction`.
+
+## Tags
+
+**Tags** create the logic and control flow for templates. They are denoted by curly braces and percent signs: `{% raw %}{%{% endraw %}` and `{% raw %}%}{% endraw %}`.
+
+The markup used in tags does not produce any visible text. This means that you can assign variables and create conditions and loops without showing any of the Liquid logic on the page.
+
+```liquid
+{% raw %}
+{% if user %}
+  Hello {{ user.name }}!
+{% endif %}
+
+{% endraw %}
+```
+
+```text
+Hello Adam!
+```
+
+Tags can be categorized into three types:
+
+- [Control flow](/tags/control-flow)
+- [Iteration](/tags/iteration)
+- [Variable assignments](/tags/variable)
+
+You can read more about each type of tag in their respective sections.
+
+
+## Filters
+
+**Filters** change the output of a Liquid object. They are using within an output and are separated by a `|`.
+
+```liquid
+{% raw %}
+{{ "/my/fancy/url" | append: ".html" }}
+{% endraw %}
+```
+
+```text
+{{ "/my/fancy/url" | append: ".html" }}
+```
--- a/basics/operators.md
+++ b/basics/operators.md
@@ -0,0 +1,88 @@
+---
+title: Operators
+---
+
+Liquid includes many logical and comparison operators.
+
+## Basic operators
+
+<table>
+  <tbody>
+    <tr>
+      <td><code>==</code></td>
+      <td>equals</td>
+    </tr>
+    <tr>
+      <td><code>!=</code></td>
+      <td>does not equal</td>
+    </tr>
+    <tr>
+      <td><code>&gt;</code></td>
+      <td>greater than</td>
+    </tr>
+    <tr>
+      <td><code>&lt;</code></td>
+      <td>less than</td>
+    </tr>
+    <tr>
+      <td><code>&gt;=</code></td>
+      <td>greater than or equal to</td>
+    </tr>
+    <tr>
+      <td><code>&lt;=</code></td>
+      <td>less than or equal to</td>
+    </tr>
+    <tr>
+      <td><code>or</code></td>
+      <td>logical or</td>
+    </tr>
+    <tr>
+      <td><code>and</code></td>
+      <td>logical and</td>
+    </tr>
+  </tbody>
+</table>
+
+For example:
+
+```liquid
+{% raw %}
+{% if product.title == "Awesome Shoes" %}
+  These shoes are awesome!
+{% endif %}
+{% endraw %}
+```
+
+You can use multiple operators in a tag:
+
+```liquid
+{% raw %}
+{% if product.type == "Shirt" or product.type == "Shoes" %}
+  This is a shirt or a pair of shoes.
+{% endif %}
+{% endraw %}
+```
+
+## contains
+
+`contains` checks for the presence of a substring inside a string.
+
+```liquid
+{% raw %}
+{% if product.title contains 'Pack' %}
+  This product's title contains the word Pack.
+{% endif %}
+{% endraw %}
+```
+
+`contains` can also check for the presence of a string in an array of strings.
+
+```liquid
+{% raw %}
+{% if product.tags contains 'Hello' %}
+  This product has been tagged with 'Hello'.
+{% endif %}
+{% endraw %}
+```
+
+`contains` can only search strings. You cannot use it to check for an object in an array of objects.
--- a/basics/truthy-and-falsy.md
+++ b/basics/truthy-and-falsy.md
@@ -0,0 +1,76 @@
+---
+title: Truthy and falsy
+---
+
+In programming, anything that returns `true` in a conditional is called **truthy**. Anything that returns `false` in a conditional is called **falsy**. All object types can be described as either truthy or falsy.
+
+- [Truthy](#truthy)
+- [Falsy](#falsy)
+- [Summary](#summary)
+
+## Truthy
+
+All values in Liquid are truthy except `nil` and `false`.
+
+In the example below, the string "Tobi" is not a boolean, but it is truthy in a conditional:
+
+```liquid
+{% raw %}
+{% assign tobi = "Tobi" %}
+
+{% if tobi == true %}
+  This condition will always be true.
+{% endif %}
+{% endraw %}
+```
+
+[Strings](/basics/types/#string), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty:
+
+```liquid
+{% raw %}
+{% if settings.fp_heading %}
+  <h1>{{ settings.fp_heading }}</h1>
+{% endif %}
+{% endraw %}
+```
+
+```html
+<h1></h1>
+```
+
+[EmptyDrops](/basics/types/#emptydrop) are also truthy. In the example below, if `settings.page` is an empty string or set to a hidden or deleted object, you will end up with an EmptyDrop. The result is an empty `div`:
+
+```liquid
+{% raw %}
+{% if pages[settings.page] %}
+  <div>{{ pages[settings.page].content }}</div>
+{% endif %}
+{% endraw %}
+```
+
+```html
+<div></div>
+```
+
+## Falsy
+
+The falsy values in Liquid are [`nil`](/basics/types/#nil) and [`false`](/basics/types/#boolean).
+
+## Summary
+
+The table below summarizes what is truthy or falsy in Liquid.
+
+|               | truthy        | falsy         |
+| ------------- |:-------------:|:-------------:|
+| true          | •             |               |
+| false         |               | •             |
+| nil           |               | •             |
+| string        | •             |               |
+| empty string  | •             |               |
+| 0             | •             |               |
+| integer       | •             |               |
+| float         | •             |               |
+| array         | •             |               |
+| empty array   | •             |               |
+| page          | •             |               |
+| EmptyDrop     | •             |               |
--- a/basics/types.md
+++ b/basics/types.md
@@ -0,0 +1,160 @@
+---
+title: Types
+---
+
+Liquid objects can have one of six types:
+
+- [String](#string)
+- [Number](#number)
+- [Boolean](#boolean)
+- [Nil](#nil)
+- [Array](#array)
+- [EmptyDrop](#emptydrop)
+
+You can initialize Liquid variables with the [assign](/tags/#assign) or [capture](/tags/#capture) tags.
+
+## String
+
+Declare a string by wrapping a variable's value in single or double quotes:
+
+```liquid
+{% raw %}
+{% assign my_string = "Hello World!" %}
+{% endraw %}
+```
+
+## Number
+
+Numbers include floats and integers:
+
+```liquid
+{% raw %}
+{% assign my_int = 25 %}
+{% assign my_float = 39.756 %}
+{% endraw %}
+```
+
+## Boolean
+
+Booleans are either `true` or `false`. No quotations are necessary when declaring a boolean:
+
+```liquid
+{% raw %}
+{% assign foo = true %}
+{% assign bar = false %}
+{% endraw %}
+```
+
+## Nil
+
+Nil is a special empty value that is returned when Liquid code has no results. It is **not** a string with the characters "nil".
+
+Nil is [treated as false](/basics/truthy-and-falsy) in the conditions of `if` blocks and other Liquid tags that check the truthfulness of a statement.
+
+In the following example, if the user does not exist (that is, `user` returns `nil`), Liquid will not print the greeting:
+
+```liquid
+{% raw %}
+{% if user %}
+  Hello {{ user.name }}!
+{% endif %}
+{% endraw %}
+```
+
+Tags or outputs that return `nil` will not print anything to the page.
+
+```liquid
+{% raw %}
+The current user is {{ user.name }}
+{% endraw %}
+```
+
+```text
+The current user is
+```
+
+## Array
+
+Arrays hold lists of variables of any type.
+
+### Accessing items in arrays
+
+To access all the items in an array, you can loop through each item in the array using an [iteration tag](/tags/iteration/).
+
+```liquid
+{% raw %}
+<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
+{% for user in site.users %}
+  {{ user }}
+{% endfor %}
+{% endraw %}
+```
+
+```text
+{% raw %}
+Tobi Laura Tetsuro Adam
+{% endraw %}
+```
+
+### Accessing specific items in arrays
+
+You can use square bracket `[` `]` notation to access a specific item in an array. Array indexing starts at zero.
+
+```liquid
+{% raw %}
+<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
+{{ site.users[0] }}
+{{ site.users[1] }}
+{{ site.users[3] }}
+{% endraw %}
+```
+
+```text
+Tobi
+Laura
+Adam
+```
+
+### Initializing arrays
+
+You cannot initialize arrays using only Liquid.
+
+You can, however, use the [split](/filters/split) filter to break a string into an array of substrings.
+
+## EmptyDrop
+
+An EmptyDrop object is returned if you try to access a deleted object by name. In the example below, `page_1`, `page_2` and `page_3` are all EmptyDrop objects.
+
+```liquid
+{% raw %}
+{% assign variable = "hello" %}
+{% assign page_1 = pages[variable] %}
+{% assign page_2 = pages["does-not-exist"] %}
+{% assign page_3 = pages.this-handle-does-not-exist %}
+{% endraw %}
+```
+
+EmptyDrop objects only have one attribute, `empty?`, which is always *true*.
+
+Collections and pages that *do* exist do not have an `empty?` attribute. Their `empty?` is "falsy", which means that calling it inside an if statement will return *false*. When using an `unless` statement on existing collections and pages, `empty?` will return `true`.
+
+### Checking for emptiness
+
+Using the `empty?` attribute, you can check to see if an object exists or not before you access any of its attributes.
+
+```liquid
+{% raw %}
+{% unless pages.about.empty? %}
+  <!-- This will only print if the page with handle 'about' is not empty -->
+  <h1>{{ pages.frontpage.title }}</h1>
+  <div>{{ pages.frontpage.content }}</div>
+{% endunless %}
+{% endraw %}
+```
+
+If you don't check for emptiness first, Liquid might print empty HTML elements to the page:
+
+```html
+<h1></h1>
+<div></div>
+```
--- a/feed.xml
+++ b/feed.xml
@@ -0,0 +1,30 @@
+---
+layout: null
+---
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ site.title | xml_escape }}</title>
+    <description>{{ site.description | xml_escape }}</description>
+    <link>{{ site.url }}{{ site.baseurl }}/</link>
+    <atom:link href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml"/>
+    <pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
+    <lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
+    <generator>Jekyll v{{ jekyll.version }}</generator>
+    {% for post in site.posts limit:10 %}
+      <item>
+        <title>{{ post.title | xml_escape }}</title>
+        <description>{{ post.content | xml_escape }}</description>
+        <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
+        <link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
+        <guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
+        {% for tag in post.tags %}
+        <category>{{ tag | xml_escape }}</category>
+        {% endfor %}
+        {% for cat in post.categories %}
+        <category>{{ cat | xml_escape }}</category>
+        {% endfor %}
+      </item>
+    {% endfor %}
+  </channel>
+</rss>
--- a/filters/append.md
+++ b/filters/append.md
@@ -0,0 +1,29 @@
+---
+title: append
+---
+
+Concatenates two strings and returns the concatenated value.
+
+```liquid
+{% raw %}
+{{ "/my/fancy/url" | append: ".html" }}
+{% endraw %}
+```
+
+```text
+{{ "/my/fancy/url" | append: ".html" }}
+```
+
+`append` can also be used with variables:
+
+```liquid
+{% raw %}
+{% assign filename = "/index.html" %}
+{{ "website.com" | append: filename }}
+{% endraw %}
+```
+
+```text
+{% assign filename = "/index.html" %}
+{{ "website.com" | append: filename }}
+```
--- a/filters/capitalize.md
+++ b/filters/capitalize.md
@@ -0,0 +1,27 @@
+---
+title: capitalize
+---
+
+Makes the first character of a string capitalized.
+
+```liquid
+{% raw %}
+{{ "title" | capitalize }}
+{% endraw %}
+```
+
+```text
+Title
+```
+
+`capitalize` only capitalizes the first character of the string, so later words are not affected:
+
+ ```liquid
+{% raw %}
+{{ "my great title" | capitalize }}
+{% endraw %}
+```
+
+```text
+My great title
+```
--- a/filters/ceil.md
+++ b/filters/ceil.md
@@ -0,0 +1,47 @@
+---
+title: ceil
+---
+
+Rounds the input up to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.
+
+```liquid
+{% raw %}
+{{ 1.2 | ceil }}
+{% endraw %}
+```
+
+```text
+{{ 1.2 | ceil }}
+```
+
+```liquid
+{% raw %}
+{{ 2.0 | ceil }}
+{% endraw %}
+```
+
+```text
+{{ 2.0 | ceil }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | ceil }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | ceil }}
+```
+
+Here the input value is a string:
+
+```liquid
+{% raw %}
+{{ "3.5" | ceil }}
+{% endraw %}
+```
+
+```text
+{{ "3.5" | ceil }}
+```
--- a/filters/date.md
+++ b/filters/date.md
@@ -0,0 +1,37 @@
+---
+title: date
+---
+
+Converts a timestamp into another date format. The format for this syntax is the same as [`strftime`](//strftime.net).
+
+```liquid
+{% raw %}
+{{ article.published_at | date: "%a, %b %d, %y" }}
+{% endraw %}
+```
+
+```text
+Fri, Jul 17, 15
+```
+
+```liquid
+{% raw %}
+{{ article.published_at | date: "%Y" }}
+{% endraw %}
+```
+
+```text
+2015
+```
+
+`date` works on strings if they contain well-formatted dates:
+
+```liquid
+{% raw %}
+{{ "March 14, 2016" | date: "%b %d, %y" }}
+{% endraw %}
+```
+
+```text
+{{ "March 14, 2016" | date: "%b %d, %y" }}
+```
--- a/filters/default.md
+++ b/filters/default.md
@@ -0,0 +1,44 @@
+---
+title: default
+---
+
+Allows you to specify a fallback in case a value doesn't exist. `default` will show its value if the left side is `nil`, `false`, or empty.
+
+In this example, `product_price` is not defined, so the default value is used.
+
+```liquid
+{% raw %}
+{{ product_price | default: 2.99 }}
+{% endraw %}
+```
+
+```text
+2.99
+```
+
+In this example, `product_price` is defined, so the default value is not used.
+
+```liquid
+{% raw %}
+{% assign product_price = 4.99 %}
+{{ product_price | default: 2.99 }}
+{% endraw %}
+```
+
+```text
+4.99
+```
+
+In this example, `product_price` is empty, so the default value is used.
+
+```liquid
+{% raw %}
+{% assign product_price = "" %}
+{{ product_price | default: 2.99 }}
+{% endraw %}
+```
+
+```text
+2.99
+```
+
--- a/filters/divided_by.md
+++ b/filters/divided_by.md
@@ -0,0 +1,37 @@
+---
+title: divided_by
+---
+
+Divides a number by the specified number.
+
+The result is rounded down to the nearest integer (that is, the [floor](/filters/floor)).
+
+```liquid
+{% raw %}
+{{ 4 | divided_by: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 4 | divided_by: 2 }}
+```
+
+```liquid
+{% raw %}
+{{ 16 | divided_by: 4 }}
+{% endraw %}
+```
+
+```text
+{{ 16 | divided_by: 4 }}
+```
+
+```liquid
+{% raw %}
+{{ 5 | divided_by: 3 }}
+{% endraw %}
+```
+
+```text
+{{ 5 | divided_by: 3 }}
+```
--- a/filters/downcase.md
+++ b/filters/downcase.md
@@ -0,0 +1,25 @@
+---
+title: downcase
+---
+
+Makes each character in a string lowercase. It has no effect on strings which are already all lowercase.
+
+```liquid
+{% raw %}
+{{ "Parker Moore" | downcase }}
+{% endraw %}
+```
+
+```text
+{{ "Parker Moore" | downcase }}
+```
+
+```liquid
+{% raw %}
+{{ "apple" | downcase }}
+{% endraw %}
+```
+
+```text
+{{ "apple" | downcase }}
+```
--- a/filters/escape.md
+++ b/filters/escape.md
@@ -0,0 +1,25 @@
+---
+title: escape
+---
+
+Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example). It doesn't change strings that don't have anything to escape.
+
+```liquid
+{% raw %}
+{{ "Have you read 'James & the Giant Peach'?" | escape }}
+{% endraw %}
+```
+
+```text
+{{ "Have you read 'James & the Giant Peach'?" | escape }}
+```
+
+```liquid
+{% raw %}
+{{ "Tetsuro Takara" | escape }}
+{% endraw %}
+```
+
+```text
+{{ "Tetsuro Takara" | escape }}
+```
--- a/filters/escape_once.md
+++ b/filters/escape_once.md
@@ -0,0 +1,25 @@
+---
+title: escape_once
+---
+
+Escapes a string without changing existing escaped entities. It doesn't change strings that don't have anything to escape.
+
+```liquid
+{% raw %}
+{{ "1 < 2 & 3" | escape_once }}
+{% endraw %}
+```
+
+```text
+{{ "1 < 2 & 3" | escape_once }}
+```
+
+```liquid
+{% raw %}
+{{ "1 &lt; 2 &amp; 3" | escape_once }}
+{% endraw %}
+```
+
+```text
+{{ "1 &lt; 2 &amp; 3" | escape_once }}
+```
--- a/filters/first.md
+++ b/filters/first.md
@@ -0,0 +1,33 @@
+---
+title: first
+---
+
+Returns the first item of an array.
+
+```liquid
+{% raw %}
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array.first }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array.first }}
+```
+
+```liquid
+{% raw %}
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.first }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.first }}
+```
--- a/filters/floor.md
+++ b/filters/floor.md
@@ -0,0 +1,47 @@
+---
+title: floor
+---
+
+Rounds a number down to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.
+
+```liquid
+{% raw %}
+{{ 1.2 | floor }}
+{% endraw %}
+```
+
+```text
+{{ 1.2 | floor }}
+```
+
+```liquid
+{% raw %}
+{{ 2.0 | floor }}
+{% endraw %}
+```
+
+```text
+{{ 2.0 | floor }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | floor }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | floor }}
+```
+
+Here the input value is a string:
+
+```liquid
+{% raw %}
+{{ "3.5" | floor }}
+{% endraw %}
+```
+
+```text
+{{ "3.5" | floor }}
+```
--- a/filters/index.html
+++ b/filters/index.html
@@ -0,0 +1,10 @@
+---
+layout: default
+---
+
+{% for doc in site.collections["filters"].docs %}
+  <h2 id="{{ doc.title | slugify }}">{{ doc.title }}</h2>
+  <div class="content">
+    {{ doc.content }}
+  </div>
+{% endfor %}
--- a/filters/join.md
+++ b/filters/join.md
@@ -0,0 +1,19 @@
+---
+title: join
+---
+
+Combines the items in an array into a single string using the argument as a separator.
+
+```liquid
+{% raw %}
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
+
+{{ beatles | join: " and " }}
+{% endraw %}
+```
+
+```text
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
+
+{{ beatles | join: " and " }}
+```
--- a/filters/last.md
+++ b/filters/last.md
@@ -0,0 +1,33 @@
+---
+title: last
+---
+
+Returns the last item of an array.
+
+```liquid
+{% raw %}
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array.last }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array.last }}
+```
+
+```liquid
+{% raw %}
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.last }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.last }}
+```
--- a/filters/lstrip.md
+++ b/filters/lstrip.md
@@ -0,0 +1,15 @@
+---
+title: lstrip
+---
+
+Removes all whitespaces (tabs, spaces, and newlines) from the beginning of a string. The filter does not affect spaces between words.
+
+```liquid
+{% raw %}
+{{ "          So much room for activities!          " | lstrip }}
+{% endraw %}
+```
+
+```text
+{{ "          So much room for activities!          " | lstrip }}
+```
--- a/filters/map.md
+++ b/filters/map.md
@@ -0,0 +1,25 @@
+---
+title: map
+---
+
+Creates an array of values by extracting the values of a named property from another object.
+
+In this example, assume the object `site.pages` contains all the metadata for a website. Using `assign` with the `map` filter creates a variable that contains only the values of the `category` properties of everything in the `site.pages` object.
+
+```liquid
+{% raw %}
+{% assign all_categories = site.pages | map: "category" %}
+
+{% for item in all_categories %}
+{{ item }}
+{% endfor %}
+{% endraw %}
+```
+
+```text
+business
+celebrities
+lifestyle
+sports
+technology
+```
--- a/filters/minus.md
+++ b/filters/minus.md
@@ -0,0 +1,35 @@
+---
+title: minus
+---
+
+Subtracts a number from another number.
+
+```liquid
+{% raw %}
+{{ 4 | minus: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 4 | minus: 2 }}
+```
+
+```liquid
+{% raw %}
+{{ 16 | minus: 4 }}
+{% endraw %}
+```
+
+```text
+{{ 16 | minus: 4 }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | minus: 12 }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | minus: 12 }}
+```
--- a/filters/modulo.md
+++ b/filters/modulo.md
@@ -0,0 +1,35 @@
+---
+title: modulo
+---
+
+Returns the remainder of a division operation.
+
+```liquid
+{% raw %}
+{{ 3 | modulo: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 3 | modulo: 2 }}
+```
+
+```liquid
+{% raw %}
+{{ 24 | modulo: 7 }}
+{% endraw %}
+```
+
+```text
+{{ 24 | modulo: 7 }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | modulo: 12 }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | modulo: 12 }}
+```
--- a/filters/newline_to_br.md
+++ b/filters/newline_to_br.md
@@ -0,0 +1,25 @@
+---
+title: newline_to_br
+---
+
+Replaces every newline (`\n`) with an HTML line break (`<br>`).
+
+```liquid
+{% raw %}
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | newline_to_br }}
+{% endraw %}
+```
+
+```html
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | newline_to_br }}
+```
--- a/filters/plus.md
+++ b/filters/plus.md
@@ -0,0 +1,35 @@
+---
+title: plus
+---
+
+Adds a number to another number.
+
+```liquid
+{% raw %}
+{{ 4 | plus: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 4 | plus: 2 }}
+```
+
+```liquid
+{% raw %}
+{{ 16 | plus: 4 }}
+{% endraw %}
+```
+
+```text
+{{ 16 | plus: 4 }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | plus: 12 }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | plus: 12 }}
+```
--- a/filters/prepend.md
+++ b/filters/prepend.md
@@ -0,0 +1,31 @@
+---
+title: prepend
+---
+
+Adds the specified string to the beginning of another string.
+
+```liquid
+{% raw %}
+{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
+{% endraw %}
+```
+
+```text
+{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
+```
+
+You can also `prepend` variables:
+
+```liquid
+{% raw %}
+{% assign url = "liquidmarkup.com" %}
+
+{{ "/index.html" | prepend: url }}
+{% endraw %}
+```
+
+```text
+{% assign url = "liquidmarkup.com" %}
+
+{{ "/index.html" | prepend: url }}
+```
--- a/filters/remove.md
+++ b/filters/remove.md
@@ -0,0 +1,15 @@
+---
+title: remove
+---
+
+Removes every occurrence of the specified substring from a string.
+
+```liquid
+{% raw %}
+{{ "I strained to see the train through the rain" | remove: "rain" }}
+{% endraw %}
+```
+
+```text
+{{ "I strained to see the train through the rain" | remove: "rain" }}
+```
--- a/filters/remove_first.md
+++ b/filters/remove_first.md
@@ -0,0 +1,15 @@
+---
+title: remove_first
+---
+
+Removes only the first occurrence of the specified substring from a string.
+
+```liquid
+{% raw %}
+{{ "I strained to see the train through the rain" | remove_first: "rain" }}
+{% endraw %}
+```
+
+```text
+{{ "I strained to see the train through the rain" | remove_first: "rain" }}
+```
--- a/filters/replace.md
+++ b/filters/replace.md
@@ -0,0 +1,15 @@
+---
+title: replace
+---
+
+Replaces every occurrence of an argument in a string with the second argument.
+
+```liquid
+{% raw %}
+{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
+{% endraw %}
+```
+
+```text
+{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
+```
--- a/filters/replace_first.md
+++ b/filters/replace_first.md
@@ -0,0 +1,17 @@
+---
+title: replace_first
+---
+
+Replaces only the first occurrence of the first argument in a string with the second argument.
+
+```liquid
+{% raw %}
+{% assign my_string = "Take my protein pills and put my helmet on" %}
+{{ my_string | replace_first: "my", "your" }}
+{% endraw %}
+```
+
+```text
+{% assign my_string = "Take my protein pills and put my helmet on" %}
+{{ my_string | replace_first: "my", "your" }}
+```
--- a/filters/reverse.md
+++ b/filters/reverse.md
@@ -0,0 +1,31 @@
+---
+title: reverse
+---
+
+Reverses the order of the items in an array. `reverse` cannot reverse a string.
+
+```liquid
+{% raw %}
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array | reverse | join: ", " }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array | reverse | join: ", " }}
+```
+
+`reverse` cannot be used directly on a string, but you can split a string into an array, reverse the array, and rejoin it by chaining together filters:
+
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
+{% endraw %}
+```
+
+```text
+{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
+```
--- a/filters/round.md
+++ b/filters/round.md
@@ -0,0 +1,35 @@
+---
+title: round
+---
+
+Rounds an input number to the nearest integer or, if a number is specified as an argument, to that number of decimal places.
+
+```liquid
+{% raw %}
+{{ 1.2 | round }}
+{% endraw %}
+```
+
+```text
+{{ 1.2 | round }}
+```
+
+```liquid
+{% raw %}
+{{ 2.7 | round }}
+{% endraw %}
+```
+
+```text
+{{ 2.7 | round }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | round: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | round: 2 }}
+```
--- a/filters/rstrip.md
+++ b/filters/rstrip.md
@@ -0,0 +1,15 @@
+---
+title: rstrip
+---
+
+Removes all whitespace (tabs, spaces, and newlines) from the right side of a string.
+
+```liquid
+{% raw %}
+{{ "          So much room for activities!          " | rstrip }}
+{% endraw %}
+```
+
+```text
+{{ "          So much room for activities!          " | rstrip }}
+```
--- a/filters/size.md
+++ b/filters/size.md
@@ -0,0 +1,39 @@
+---
+title: size
+---
+
+Returns the number of characters in a string or the number of items in an array. `size` can also be used with dot notation (for example, `{% raw %}{{ my_string.size }}{% endraw %}`). This allows you to use `size` inside  tags such as conditionals.
+
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | size }}
+{% endraw %}
+```
+
+```text
+{{ "Ground control to Major Tom." | size }}
+```
+
+```liquid
+{% raw %}
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array | size }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array | size }}
+```
+
+Using dot notation:
+
+```liquid
+{% raw %}
+{% if site.pages.size > 10 %}
+  This is a big website!
+{% endif %}
+{% endraw %}
+```
--- a/filters/slice.md
+++ b/filters/slice.md
@@ -0,0 +1,49 @@
+---
+title: slice
+---
+
+Returns a substring of 1 character beginning at the index specified by the argument passed in. An optional second argument specifies the length of the substring to be returned.
+
+String indices are numbered starting from 0.
+
+```liquid
+{% raw %}
+{{ "Liquid" | slice: 0 }}
+{% endraw %}
+```
+
+```text
+{{ "Liquid" | slice: 0 }}
+```
+
+```liquid
+{% raw %}
+{{ "Liquid" | slice: 2 }}
+{% endraw %}
+```
+
+```text
+{{ "Liquid" | slice: 2 }}
+```
+
+```liquid
+{% raw %}
+{{ "Liquid" | slice: 2, 5 }}
+{% endraw %}
+```
+
+```text
+{{ "Liquid" | slice: 2, 5 }}
+```
+
+If the first parameter is a negative number, the indices are counted from the end of the string:
+
+```liquid
+{% raw %}
+{{ "Liquid" | slice: -3, 2 }}
+{% endraw %}
+```
+
+```text
+{{ "Liquid" | slice: -3, 2 }}
+```
--- a/filters/sort.md
+++ b/filters/sort.md
@@ -0,0 +1,19 @@
+---
+title: sort
+---
+
+Sorts items in an array by a property of an item in the array. The order of the sorted array is case-sensitive.
+
+```liquid
+{% raw %}
+{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
+
+{{ my_array | sort | join: ", " }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
+
+{{ my_array | sort | join: ", " }}
+```
--- a/filters/split.md
+++ b/filters/split.md
@@ -0,0 +1,23 @@
+---
+title: split
+---
+
+Divides an input string into an array using the argument as a separator. `split` is commonly used to convert comma-separated items from a string to an array.
+
+```liquid
+{% raw %}
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
+
+{% for member in beatles %}
+  {{ member }}
+{% endfor %}
+{% endraw %}
+```
+
+```text
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
+
+{% for member in beatles %}
+  {{ member }}
+{% endfor %}
+```
--- a/filters/strip.md
+++ b/filters/strip.md
@@ -0,0 +1,15 @@
+---
+title: strip
+---
+
+Removes all whitespace (tabs, spaces, and newlines) from both the left and right side of a string. It does not affect spaces between words.
+
+```liquid
+{% raw %}
+{{ "          So much room for activities!          " | strip }}
+{% endraw %}
+```
+
+```text
+{{ "          So much room for activities!          " | strip }}
+```
--- a/filters/strip_html.md
+++ b/filters/strip_html.md
@@ -0,0 +1,15 @@
+---
+title: strip_html
+---
+
+Removes any HTML tags from a string.
+
+```liquid
+{% raw %}
+{{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}
+{% endraw %}
+```
+
+```text
+{{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}
+```
--- a/filters/strip_newlines.md
+++ b/filters/strip_newlines.md
@@ -0,0 +1,26 @@
+---
+title: strip_newlines
+---
+
+Removes any newline characters (line breaks) from a string.
+
+```liquid
+{% raw %}
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | strip_newlines }}
+{% endraw %}
+```
+
+```html
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | strip_newlines }}
+```
+
--- a/filters/times.md
+++ b/filters/times.md
@@ -0,0 +1,35 @@
+---
+title: times
+---
+
+Multiplies a number by another number.
+
+```liquid
+{% raw %}
+{{ 3 | times: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 3 | times: 2 }}
+```
+
+```liquid
+{% raw %}
+{{ 24 | times: 7 }}
+{% endraw %}
+```
+
+```text
+{{ 24 | times: 7 }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | times: 12 }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | times: 12 }}
+```
--- a/filters/truncate.md
+++ b/filters/truncate.md
@@ -0,0 +1,15 @@
+---
+title: truncate
+---
+
+`truncate` shortens a string  down to the number of characters passed as a parameter. If the number of characters specified is less than the length of the string, an ellipsis (...) is appended to the string and is included in the character count.
+
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | truncate: 20 }}
+{% endraw %}
+```
+
+```text
+{{ "Ground control to Major Tom." | truncate: 20 }}
+```
--- a/filters/truncatewords.md
+++ b/filters/truncatewords.md
@@ -0,0 +1,15 @@
+---
+title: truncatewords
+---
+
+Shortens a string down to the number of words passed as the argument. If the specified number of words is less than the number of words in the string, an ellipsis (...) is appended to the string.
+
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | truncatewords: 3 }}
+{% endraw %}
+```
+
+```text
+{{ "Ground control to Major Tom." | truncatewords: 3 }}
+```
--- a/filters/uniq.md
+++ b/filters/uniq.md
@@ -0,0 +1,19 @@
+---
+title: uniq
+---
+
+Removes any duplicate elements in an array.
+
+```liquid
+{% raw %}
+{% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}
+
+{{ my_array | uniq | join: ", " }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}
+
+{{ my_array | uniq | join: ", " }}
+```
--- a/filters/upcase.md
+++ b/filters/upcase.md
@@ -0,0 +1,25 @@
+---
+title: upcase
+---
+
+Makes each character in a string uppercase. It has no effect on strings which are already all uppercase.
+
+```liquid
+{% raw %}
+{{ "Parker Moore" | upcase }}
+{% endraw %}
+```
+
+```text
+{{ "Parker Moore" | upcase }}
+```
+
+```liquid
+{% raw %}
+{{ "APPLE" | upcase }}
+{% endraw %}
+```
+
+```text
+{{ "APPLE" | upcase }}
+```
--- a/filters/url_encode.md
+++ b/filters/url_encode.md
@@ -0,0 +1,25 @@
+---
+title: url_encode
+---
+
+Converts any URL-unsafe characters in a string into percent-encoded characters.
+
+```liquid
+{% raw %}
+{{ "john@liquid.com" | url_encode }}
+{% endraw %}
+```
+
+```text
+{{ "john@liquid.com" | url_encode }}
+```
+
+```liquid
+{% raw %}
+{{ "Tetsuro Takara" | url_encode }}
+{% endraw %}
+```
+
+```text
+{{ "Tetsuro Takara" | url_encode }}
+```
--- a/images/500px-logo.png
+++ b/images/500px-logo.png
--- a/images/jekyll-logo.png
+++ b/images/jekyll-logo.png
--- a/images/rails.png
+++ b/images/rails.png
--- a/images/ruby.png
+++ b/images/ruby.png
--- a/images/rubygems.png
+++ b/images/rubygems.png
--- a/images/salesforcedesk-logo.png
+++ b/images/salesforcedesk-logo.png
--- a/images/zendesk-logo.png
+++ b/images/zendesk-logo.png
--- a/index.html
+++ b/index.html
@@ -1,277 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<html xmlns="http://www.w3.org/1999/xhtml">
-<head>
-  <meta http-equiv="Content-type" content="text/html; charset=us-ascii" />
-
-  <title>Liquid Templating language</title>
-  <style type="text/css" media="screen">
-/*<![CDATA[*/
-
-    body { margin: 0; margin-bottom: 25px; padding: 0; background-color: #f0f0f0; font-family: "Lucida Grande", "Bitstream Vera Sans", "Verdana"; font-size: 13px; color: #333; }
-    h1 { font-size: 28px; color: #000; }
-    h2 { font-size: 15px; color: #000; margin-top: 2em; margin-bottom: 0.5em; }
-    a  {color: #03c}
-    a:hover { background-color: #03c; color: white; text-decoration: none; }
-
-    #page { width: 900px; margin: 0; margin-top: 20px; margin-left: auto; margin-right: auto; }
-    #content { float: left; background-color: white; border: 3px solid #aaa; padding: 25px; width: 650px; }
-    #sidebar { float: right; width: 175px; }
-    #footer { clear: both; padding: 5px 2px; color: #999; font-size: 9px; }
-
-    #header, #intro { padding-left: 10px; padding-right: 30px; }
-    #header h1, #header h2 { margin: 0 }
-    #header h2 { color: #888; font-weight: normal; font-size: 16px; }
-
-    #intro { border-top: 1px solid #ccc; margin-top: 25px; padding-top: 15px; }
-    #intro h1 { margin: 0; font-size: 20px; }
-    #intro ol { margin-left: 0; padding-left: 0; }
-    #intro li { font-size: 18px; color: #888; margin-bottom: 25px; }
-    #intro li p { color: #555; font-size: 13px; }
-
-    #sidebar ul { margin-left: 0; padding-left: 0; }
-    #sidebar ul h3 { margin-top: 25px; font-size: 16px; padding-bottom: 10px; border-bottom: 1px solid #ccc; }
-    #sidebar li { list-style-type: none; }
-    #sidebar ul.links li { margin-bottom: 5px; }
-
-    #outtro { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; background: #eee; color: #555; font-size: 9px; padding: 10px; margin: 5em 0 0 0; text-align: center; }
-    #outtro a { color: #333; }
-    #outtro a:hover { color: white; }
-
-    span.highlight { background: #ffc; }
-
-
-    table.downloads { width: 100%; border-spacing: 0 4px; }
-    table.downloads tr { height: 80px; }
-    table.downloads td { background: #efefef; }
-    table.downloads h2 { margin: 0; width: 100%; }
-    table.downloads .icon { text-align: center; width: 105px; }
-    table.downloads p.code { margin-right:10px; padding: 4px 10px; overflow: auto; border: 1px solid #aaa; border-left: 4px solid #aaa; }
-
-    table.code { margin: 0; padding: 0.5em; width: 100%; border-left: 4px solid #ddd; background: #efefef; }
-    /* Pygments */
-    .c { color: #999988; font-style: italic } /* Comment */
-    .err { color: #a61717; background-color: #e3d2d2 } /* Error */
-    .k { font-weight: bold } /* Keyword */
-    .o { font-weight: bold } /* Operator */
-    .cm { color: #999988; font-style: italic } /* Comment.Multiline */
-    .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
-    .c1 { color: #999988; font-style: italic } /* Comment.Single */
-    .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-    .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-    .ge { font-style: italic } /* Generic.Emph */
-    .gr { color: #aa0000 } /* Generic.Error */
-    .gh { color: #999999 } /* Generic.Heading */
-    .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-    .go { color: #888888 } /* Generic.Output */
-    .gp { color: #555555 } /* Generic.Prompt */
-    .gs { font-weight: bold } /* Generic.Strong */
-    .gu { color: #aaaaaa } /* Generic.Subheading */
-    .gt { color: #aa0000 } /* Generic.Traceback */
-    .kc { font-weight: bold } /* Keyword.Constant */
-    .kd { font-weight: bold } /* Keyword.Declaration */
-    .kn { font-weight: bold } /* Keyword.Namespace */
-    .kp { font-weight: bold } /* Keyword.Pseudo */
-    .kr { font-weight: bold } /* Keyword.Reserved */
-    .kt { color: #445588; font-weight: bold } /* Keyword.Type */
-    .m { color: #009999 } /* Literal.Number */
-    .s { color: #bb8844 } /* Literal.String */
-    .na { color: #008080 } /* Name.Attribute */
-    .nb { color: #999999 } /* Name.Builtin */
-    .nc { color: #445588; font-weight: bold } /* Name.Class */
-    .no { color: #008080 } /* Name.Constant */
-    .ni { color: #800080 } /* Name.Entity */
-    .ne { color: #990000; font-weight: bold } /* Name.Exception */
-    .nf { color: #990000; font-weight: bold } /* Name.Function */
-    .nn { color: #555555 } /* Name.Namespace */
-    .nt { color: #000080 } /* Name.Tag */
-    .nv { color: #008080 } /* Name.Variable */
-    .ow { font-weight: bold } /* Operator.Word */
-    .w { color: #bbbbbb } /* Text.Whitespace */
-    .mf { color: #009999 } /* Literal.Number.Float */
-    .mh { color: #009999 } /* Literal.Number.Hex */
-    .mi { color: #009999 } /* Literal.Number.Integer */
-    .mo { color: #009999 } /* Literal.Number.Oct */
-    .sb { color: #bb8844 } /* Literal.String.Backtick */
-    .sc { color: #bb8844 } /* Literal.String.Char */
-    .sd { color: #bb8844 } /* Literal.String.Doc */
-    .s2 { color: #bb8844 } /* Literal.String.Double */
-    .se { color: #bb8844 } /* Literal.String.Escape */
-    .sh { color: #bb8844 } /* Literal.String.Heredoc */
-    .si { color: #bb8844 } /* Literal.String.Interpol */
-    .sx { color: #bb8844 } /* Literal.String.Other */
-    .sr { color: #808000 } /* Literal.String.Regex */
-    .s1 { color: #bb8844 } /* Literal.String.Single */
-    .ss { color: #bb8844 } /* Literal.String.Symbol */
-    .bp { color: #999999 } /* Name.Builtin.Pseudo */
-    .vc { color: #008080 } /* Name.Variable.Class */
-    .vg { color: #008080 } /* Name.Variable.Global */
-    .vi { color: #008080 } /* Name.Variable.Instance */
-    .il { color: #009999 } /* Literal.Number.Integer.Long */
-
-  /*]]>*/
-  </style>
-  <script type="text/javascript" src="javascripts/prototype.js">
-</script>
-  <script type="text/javascript" src="javascripts/effects.js">
-</script>
-</head>
-
-<body>
-  <div id="page">
-    <div id="sidebar">
-      <ul id="sidebar-items">
-        <li>
-          <h3>General</h3>
-
-          <ul class="links">
-            <li><a href="#download">Download</a></li>
-
-            <li><a href="https://groups.google.com/forum/#!forum/liquid-templates">Discussion</a></li>
-
-            <li><a href="https://github.com/Shopify/liquid/wiki">Documentation</a></li>
-          </ul>
-        </li>
-
-        <li>
-          <h3>Development</h3>
-
-          <ul class="links">
-            <li><a href="https://github.com/Shopify/liquid">GitHub</a></li>
-
-            <li><a href="https://github.com/Shopify/liquid/issues">Issues</a></li>
-          </ul>
-        </li>
-
-        <li>
-          <h3>Developers</h3>
-
-          <ul class="links">
-            <li><a href="http://www.shopify.com">Shopify</a></li>
-
-            <li><a href="http://blog.leetsoft.com">Tobias L&uuml;tke</a></li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-
-    <div id="content">
-      <div id="header">
-        <h1>Liquid</h1>
-
-        <h2>Ruby library for rendering safe templates which cannot affect the security of the server they are rendered
-        on.</h2>
-      </div>
-
-      <div id="intro">
-        <p>Liquid is an <span class="highlight">extraction from the e-commerce system <a href=
-        "http://shopify.com">Shopify</a></span>. Shopify powers many thousands of e-commerce stores which all call for
-        unique designs. For this we developed Liquid which allows our customers complete design freedom while
-        maintaining the integrity of our servers.</p>
-
-        <p>Liquid has been in <span class="highlight">production use since June 2006</span> and is now used by many
-        other hosted web applications.</p>
-
-        <p>It was developed for usage in <span class="highlight">Ruby on Rails</span> web applications and
-        integrates seamlessly as a plugin but it also works excellently as a stand alone library.</p>
-
-        <h2>What does it look like?</h2>
-
-        <p>Example snippet:</p>
-
-        <table class="code">
-          <tr>
-            <td class="code">
-              <pre>
-<span class="nt">&lt;ul</span> <span class="na">id=</span><span class="s">&quot;products&quot;</span><span class="nt">&gt;</span>
-  {% for product in products %}
-    <span class="nt">&lt;li&gt;</span>
-      <span class="nt">&lt;h2&gt;</span>{{ product.title }}<span class="nt">&lt;/h2&gt;</span>
-      Only {{ product.price | format_as_money }}
-
-      <span class="nt">&lt;p&gt;</span>{{ product.description | prettyprint | truncate: 200  }}<span class="nt">&lt;/p&gt;</span>
-
-    <span class="nt">&lt;/li&gt;</span>
-  {% endfor %}
-<span class="nt">&lt;/ul&gt;</span>
-</pre>
-            </td>
-          </tr>
-        </table>
-
-        <p>Code to render</p>
-
-        <table class="code">
-          <tr>
-            <td class="code">
-              <pre>
-<span class="no">Liquid</span><span class="o">::</span><span class="no">Template</span><span class="o">.</span><span class="n">parse</span><span class="p">(</span><span class="n">template</span><span class="p">)</span><span class="o">.</span><span class="n">render</span> <span class="s1">&#39;products&#39;</span> <span class="o">=&gt;</span> <span class="no">Product</span><span class="o">.</span><span class="n">find</span><span class="p">(</span><span class="ss">:all</span><span class="p">)</span>
-</pre>
-
-            </td>
-          </tr>
-        </table>
-
-        <h2 id="download">How do I get it?</h2>
-
-        <table class="downloads">
-          <tr>
-            <td class="icon"><img src="images/rubygems.png" width="100" height="100" alt="Rubygems" align=
-            "middle" /></td>
-
-            <td>
-              <h2>Rubygems</h2>
-
-              <p class="code"><code>gem install liquid</code></p>
-            </td>
-          </tr>
-
-          <tr>
-            <td class="icon"><img src="images/rails.png" width="60" alt="Ruby on Rails" /></td>
-
-            <td>
-              <h2>Ruby on Rails plugin</h2>
-              <h4>Rails 3.0</h4>
-              <p>Add <tt>gem 'liquid'</tt> to your Gemfile.</p>
-
-              <h4>Rails 2.3</h4>
-              <p class="code"><code>./script/plugin install \</code>
-              <code>&nbsp;&nbsp;git://github.com/Shopify/liquid.git</code></p>
-            </td>
-          </tr>
-
-          <tr>
-            <td class="icon"><img src="images/ruby.png" width="60" height="60" alt="Ruby" /></td>
-
-            <td>
-              <h2>Download Release</h2>
-
-              <p><a href="http://rubygems.org/gems/liquid">from RubyGems</a></p>
-            </td>
-          </tr>
-
-          <tr>
-            <td class="icon"><img src="images/ruby.png" width="60" height="60" alt="Ruby" /></td>
-
-            <td>
-              <h2>Git Clone</h2>
-
-              <p><a href="http://github.com/Shopify/liquid/commits/master">from Github</a></p>
-            </td>
-          </tr>
-        </table>
-      </div>
-
-      <div id="outtro">
-        <strong>Liquid</strong> is a sponsored and made possible by constant development from <a href=
-        "http://www.shopify.com">Shopify</a>.
-      </div>
-    </div>
-
-    <div id="footer">
-      &copy; 2011
-    </div>
-  </div>
-</body>
-</html>
--- a/index.md
+++ b/index.md
@@ -0,0 +1,16 @@
+---
+layout: default
+---
+
+{% include home-banner.html %}
+
+## What is Liquid?
+
+Liquid is an open-source template language created by [Shopify](https://www.shopify.com) and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts.
+
+Liquid has been in production use since June 2006 and is now used by many other hosted web applications.
+
+## Who uses Liquid?
+
+{% include home-users-grid.html %}
+
--- a/package.json
+++ b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "liquid-docs",
+  "version": "0.1.0",
+  "devDependencies": {
+    "autoprefixer-core": "^5.2.1",
+    "grunt": "~0.4.1",
+    "grunt-autoprefixer": "^3.0.3",
+    "grunt-concurrent": "^1.0.0",
+    "grunt-contrib-concat": "^0.5.1",
+    "grunt-contrib-sass": "^0.9.2",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-postcss": "^0.5.5",
+    "grunt-shell": "^1.1.2",
+    "load-grunt-tasks": "^3.1.0"
+  }
+}
--- a/tags/_theme.md
+++ b/tags/_theme.md
@@ -0,0 +1,238 @@
+---
+title: Theme
+---
+
+
+Theme Tags have various functions, including:
+
+- Outputting template-specific HTML markup
+- Telling the theme which layout and snippets to use
+- Splitting a returned array into multiple pages.
+
+
+### comment
+
+<p>Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing <code>comment</code> blocks will not be output, and any Liquid code within will not be executed.</p>     
+
+<div class="code-block code-block--input">
+{% highlight html %}{% raw %}
+  My name is {% comment %}super{% endcomment %} Shopify.
+{% endraw %}{% endhighlight %}
+</div>
+
+<div class="code-block code-block--output">
+{% highlight html %}{% raw %}
+My name is Shopify.
+{% endraw %}{% endhighlight %}
+</div>
+
+### include
+
+Inserts a snippet from the **snippets** folder of a theme. 
+
+{% highlight html %}{% raw %}
+{% include 'snippet-name' %}
+{% endraw %}{% endhighlight %}
+
+Note that the <tt>.liquid</tt> extension is omitted in the above code. 
+
+When a snippet is included, the code inside it will have access to the variables within its parent template. 
+
+<h3 id="multi-variable-snippet">Including multiple variables in a snippet</h3>
+
+There are two ways to include multiple variables in a snippet. You can assign and include them on different lines:
+
+{% highlight html %}{% raw %}
+{% assign snippet_variable = 'this is it' %}
+{% assign snippet_variable_two = 'this is also it' %}
+{% include 'snippet' %}
+{% endraw %}{% endhighlight %}
+
+Or you can consolidate them into one line of code:
+
+{% highlight html %}{% raw %}
+{% include 'snippet', snippet_variable: 'this is it', snippet_variable_two: 'this is also it' %}
+{% endraw %}{% endhighlight %}
+
+<h2 class="parameter">parameters <span>include</span></h2>
+
+### with
+
+The <code>with</code> parameter assigns a value to a variable inside a snippet that shares the same name as the snippet. 
+
+For example, we can have a snippet named **color.liquid** which contains the following:
+
+{% highlight html %}{% raw %}
+color: '{{ color }}'
+shape: '{{ shape }}'
+{% endraw %}{% endhighlight %}
+
+Within **theme.liquid**, we can include the **color.liquid** snippet as follows:
+
+{% highlight html %}{% raw %}
+{% assign shape = 'circle' %}
+{% include 'color' %}
+{% include 'color' with 'red' %}
+{% include 'color' with 'blue' %}
+{% assign shape = 'square' %}
+{% include 'color' with 'red' %}
+{% endraw %}{% endhighlight %}
+
+The output will be:
+
+{% highlight html %}{% raw %}
+color: shape: 'circle'
+color: 'red' shape: 'circle'
+color: 'blue' shape: 'circle'
+color: 'red' shape: 'square'
+{% endraw %}{% endhighlight %}
+
+### form
+
+Creates an HTML <code>&#60;form&#62;</code> element with all the necessary attributes (action, id, etc.) and <code>&#60;input&#62;</code> to submit the form successfully. 
+
+<h2 class="parameter">parameters <span>form</span></h2>
+
+### new_comment
+
+Generates a form for creating a new comment in the <a href="/themes/theme-development/templates/article-liquid/">article.liquid</a> template. Requires the <code>article</code> object as a parameter. 
+
+<p class="input">Input</p>
+<div>
+{% highlight html %}{% raw %}
+{% form "new_comment", article %}
+...
+{% endform %}
+{% endraw %}{% endhighlight %}
+</div>
+
+
+<p class="output">Output</p>
+<div>
+{% highlight html %}{% raw %}
+<form accept-charset="UTF-8" action="/blogs/news/10582441-my-article/comments" class="comment-form" id="article-10582441-comment-form" method="post">
+	<input name="form_type" type="hidden" value="new_comment" />
+	<input name="utf8" type="hidden" value="✓" />
+	...
+</form>
+{% endraw %}{% endhighlight %}
+</div>
+
+### layout
+
+Loads an alternate template file from the **layout** folder of a theme. If no alternate layout is defined, the **theme.liquid** template is loaded by default. 
+
+{% highlight html %}{% raw %}
+<!-- loads the templates/alternate.liquid template -->
+{% layout 'alternate' %}
+{% endraw %}{% endhighlight %}
+
+If you don't want **any** layout to be used on a specific template, you can use <code>none</code>.
+
+{% highlight html %}{% raw %}
+{% layout none %}
+{% endraw %}{% endhighlight %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### paginate
+
+Splitting products, blog articles, and search results across multiple pages is a necessary component of theme design as you are limited to 50 results per page in any <a href="/themes/liquid-documentation/tags/iteration-tags/#for">for</a> loop. 
+
+The <code>paginate</code> tag works in conjunction with the <code> for </code> tag to split content into numerous pages. It must wrap a <code>for</code> tag block that loops through an array, as shown  in the example below:
+
+{% highlight html %}{% raw %}
+{% paginate collection.products by 5 %}  
+  {% for product in collection.products %}
+    <!--show product details here -->
+  {% endfor %}
+{% endpaginate %}
+{% endraw %}{% endhighlight %}
+
+The <code>by</code> parameter is followed by an integer <strong>between 1 and 50</strong> that tells the <code>paginate</code> tag how many results it should output per page. 
+
+
+Within <code>paginate</code> tags, you can access attributes of the <a href="/themes/liquid-documentation/objects/paginate/">paginate</a> object. This includes the attributes to output the links required to navigate within the generated pages.
+
+
+{% comment %}
+
+Accessing any attributes of the array you are paginating <em>before</em> the opening <code>paginate</code> tag will cause errors. To avoid this, make sure any variables 
+
+
+**Bad Example**
+<div>
+{% highlight html %}{% raw %}
+{{ collection.title }}
+{% paginate collection.products by 5 %}  
+  {% for product in collection.products %}
+		{{ product.title }}
+  {% endfor %}
+{% endpaginate %}
+{% endraw %}{% endhighlight %}
+</div>
+
+
+**Good Example**
+<div>
+{% highlight html %}{% raw %}
+{% paginate collection.products by 5 %}  
+  {% for product in collection.products %}
+    <!--show product details here -->
+  {% endfor %}
+{% endpaginate %}
+{% endraw %}{% endhighlight %}
+</div>
+
+{% endcomment %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### raw
+
+<p>Allows output of Liquid code on a page without being parsed.</p>
+
+<p class="input">Input</p>
+
+<div>
+<div class="highlight"><pre><code class="html">&#123;% raw %&#125;&#123;&#123; 5 | plus: 6 &#125;&#125;&#123;% endraw %&#125; is equal to 11.</code></pre></div>
+</div>
+
+<p class="output">Output</p>
+
+<div>
+<div class="highlight"><pre><code class="html">&#123;&#123; 5 | plus: 6 &#125;&#125; is equal to 11.</code></pre></div>
+</div>
+
+
+
--- a/tags/control-flow.md
+++ b/tags/control-flow.md
@@ -0,0 +1,90 @@
+---
+title: Control flow
+---
+
+Control flow tags can change the information Liquid shows using programming logic.
+
+## case/when
+
+Creates a switch statement to compare a variable with different values. `case` initializes the switch statement, and `when` compares its values.
+
+```liquid
+{% raw %}
+{% assign handle = 'cake' %}
+{% case handle %}
+  {% when 'cake' %}
+     This is a cake
+  {% when 'cookie' %}
+     This is a cookie
+  {% else %}
+     This is not a cake nor a cookie
+{% endcase %}
+{% endraw %}
+```
+
+```text
+This is a cake
+```
+
+## if
+
+Executes a block of code only if a certain condition is `true`.
+
+```liquid
+{% raw %}
+{% if product.title == 'Awesome Shoes' %}
+  These shoes are awesome!
+{% endif %}
+{% endraw %}
+```
+
+```text
+These shoes are awesome!
+```
+
+## unless
+
+The opposite of `if` – executes a block of code only if a certain condition is **not** met.
+
+```liquid
+{% raw %}
+{% unless product.title == 'Awesome Shoes' %}
+  These shoes are not awesome.
+{% endunless %}
+{% endraw %}
+```
+
+```text
+These shoes are not awesome.
+```
+
+This would be the equivalent of doing the following:
+
+```liquid
+{% raw %}
+{% if product.title != 'Awesome Shoes' %}
+  These shoes are not awesome.
+{% endif %}
+{% endraw %}
+```
+
+## elsif / else
+
+Adds more conditions within an `if` or `unless` block.
+
+```liquid
+{% raw %}
+<!-- If customer.name = 'anonymous' -->
+{% if customer.name == 'kevin' %}
+  Hey Kevin!
+{% elsif customer.name == 'anonymous' %}
+  Hey Anonymous!
+{% else %}
+  Hi Stranger!
+{% endif %}
+{% endraw %}
+```
+
+```text
+Hey Anonymous!
+```
--- a/tags/iteration.md
+++ b/tags/iteration.md
@@ -0,0 +1,298 @@
+---
+title: Iteration
+---
+
+Iteration tags run blocks of code repeatedly.
+
+## for
+
+Repeatedly executes a block of code. For a full list of attributes available within a `for` loop, see [forloop (object)](https://docs.shopify.com/themes/liquid/objects/for-loops).
+
+```liquid
+{% raw %}
+  {% for product in collection.products %}
+    {{ product.title }}
+  {% endfor %}
+{% endraw %}
+```
+
+```text
+hat shirt pants
+```
+
+### break
+
+Causes the loop to stop iterating when it encounters the `break` tag.
+
+```liquid
+{% raw %}
+{% for i in (1..5) %}
+  {% if i == 4 %}
+    {% break %}
+  {% else %}
+    {{ i }}
+  {% endif %}
+{% endfor %}
+{% endraw %}
+```
+
+```text
+1 2 3
+```
+
+### continue
+
+Causes the loop to skip the current iteration when it encounters the `continue` tag.
+
+```liquid
+{% raw %}
+{% for i in (1..5) %}
+  {% if i == 4 %}
+    {% continue %}
+  {% else %}
+    {{ i }}
+  {% endif %}
+{% endfor %}
+{% endraw %}
+```
+
+```text
+1 2 3   5
+```
+
+## for (parameters)
+
+### limit
+
+Limits the loop to the specified number of iterations.
+
+```liquid
+{% raw %}
+<!-- if array = [1,2,3,4,5,6] -->
+{% for item in array limit:2 %}
+  {{ item }}
+{% endfor %}
+{% endraw %}
+```
+
+```text
+1 2
+```
+
+### offset
+
+Begins the loop at the specified index.
+
+```liquid
+{% raw %}
+<!-- if array = [1,2,3,4,5,6] -->
+{% for item in array offset:2 %}
+  {{ item }}
+{% endfor %}
+{% endraw %}
+```
+
+```text
+3 4 5 6
+```
+
+### range
+
+Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
+
+```liquid
+{% for i in (3..5) %}
+  {{ i }}
+{% endfor %}
+
+{% raw %}
+{% assign num = 4 %}
+{% for i in (1..num) %}
+  {{ i }}
+{% endfor %}
+{% endraw %}
+```
+
+```text
+3 4 5
+1 2 3 4
+```
+
+### reversed
+
+Reverses the order of the loop.
+
+```liquid
+{% raw %}
+<!-- if array = [1,2,3,4,5,6] -->
+{% for item in array reversed %}
+  {{ item }}
+{% endfor %}
+{% endraw %}
+```
+
+```text
+6 5 4 3 2 1
+```
+
+## cycle
+
+Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time `cycle` is called, the next string that was passed as a parameter is output.
+
+`cycle` must be used within a [for](#for) loop block.
+
+```liquid
+{% raw %}
+{% cycle 'one', 'two', 'three' %}
+{% cycle 'one', 'two', 'three' %}
+{% cycle 'one', 'two', 'three' %}
+{% cycle 'one', 'two', 'three' %}
+{% endraw %}
+```
+
+```text
+one
+two
+three
+one
+```
+
+Uses for `cycle` include:
+
+-   applying odd/even classes to rows in a table
+-   applying a unique class to the last product thumbnail in a row
+
+## cycle (parameters)
+
+`cycle` accepts a parameter called `cycle group` in cases where you need multiple `cycle` blocks in one template. If no name is supplied for the cycle group, then it is assumed that multiple calls with the same parameters are one group.
+
+## tablerow
+
+Generates an HTML table. Must be wrapped in opening `<table>` and closing `</table>` HTML tags.
+
+```liquid
+{% raw %}
+<table>
+{% tablerow product in collection.products %}
+  {{ product.title }}
+{% endtablerow %}
+</table>
+{% endraw %}
+```
+
+```html
+<table>
+  <tr class="row1">
+    <td class="col1">
+      Cool Shirt
+    </td>
+    <td class="col2">
+      Alien Poster
+    </td>
+    <td class="col3">
+      Batman Poster
+    </td>
+    <td class="col4">
+      Bullseye Shirt
+    </td>
+    <td class="col5">
+      Another Classic Vinyl
+    </td>
+    <td class="col6">
+      Awesome Jeans
+    </td>
+  </tr>
+</table>
+```
+
+## tablerow (parameters)
+
+### cols
+
+Defines how many columns the tables should have.
+
+```liquid
+{% raw %}
+{% tablerow product in collection.products cols:2 %}
+  {{ product.title }}
+{% endtablerow %}
+{% endraw %}
+```
+
+```html
+<table>
+  <tr class="row1">
+    <td class="col1">
+      Cool Shirt
+    </td>
+    <td class="col2">
+      Alien Poster
+    </td>
+  </tr>
+  <tr class="row2">
+    <td class="col1">
+      Batman Poster
+    </td>
+    <td class="col2">
+      Bullseye Shirt
+    </td>
+  </tr>
+  <tr class="row3">
+    <td class="col1">
+      Another Classic Vinyl
+    </td>
+    <td class="col2">
+      Awesome Jeans
+    </td>
+  </tr>
+</table>
+```
+
+#### limit
+
+Exits the tablerow after a specific index.
+
+```liquid
+{% raw %}
+{% tablerow product in collection.products cols:2 limit:3 %}
+  {{ product.title }}
+{% endtablerow %}
+{% endraw %}
+```
+
+### offset
+
+Starts the tablerow after a specific index.
+
+```liquid
+{% raw %}
+{% tablerow product in collection.products cols:2 offset:3 %}
+  {{ product.title }}
+{% endtablerow %}
+{% endraw %}
+```
+
+### range
+
+Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
+
+```liquid
+{% raw %}
+<!--variable number example-->
+
+{% assign num = 4 %}
+<table>
+{% tablerow i in (1..num) %}
+  {{ i }}
+{% endtablerow %}
+</table>
+
+<!--literal number example-->
+
+<table>
+{% tablerow i in (3..5) %}
+  {{ i }}
+{% endtablerow %}
+</table>
+{% endraw %}
+```
--- a/tags/variable.md
+++ b/tags/variable.md
@@ -0,0 +1,109 @@
+---
+title: Variable
+---
+
+Variable tags create new Liquid variables.
+
+## assign
+
+Creates a new variable.
+
+```liquid
+{% raw %}
+{% assign my_variable = false %}
+{% if my_variable != true %}
+  This statement is valid.
+{% endif %}
+{% endraw %}
+```
+
+```text
+  This statement is valid.
+```
+
+Wrap a variable in quotations `"` to save it as a string.
+
+```liquid
+{% raw %}
+{% assign foo = "bar" %}
+{{ foo }}
+{% endraw %}
+```
+
+```text
+bar
+```
+
+## capture
+
+Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through `{% raw %}{% capture %}{% endraw %}` are strings.
+
+```liquid
+{% raw %}
+{% capture my_variable %}I am being captured.{% endcapture %}
+{{ my_variable }}
+{% endraw %}
+```
+
+```text
+I am being captured.
+```
+
+## increment
+
+Creates a new number variable, and increases its value by one every time it is called. The initial value is 0.
+
+```liquid
+{% raw %}
+{% increment my_counter %}
+{% increment my_counter %}
+{% increment my_counter %}
+{% endraw %}
+```
+
+```text
+0
+1
+2
+```
+
+Variables created through the `increment` tag are independent from variables created through `assign` or `capture`.
+
+In the example below, a variable named "var" is created through `assign`. The `increment` tag is then used several times on a variable with the same name. Note that the `increment` tag does not affect the value of "var" that was created through `assign`.
+
+```liquid
+{% raw %}
+{% assign var = 10 %}
+{% increment var %}
+{% increment var %}
+{% increment var %}
+{{ var }}
+{% endraw %}
+```
+
+```text
+0
+1
+2
+10
+```
+
+## decrement
+
+Creates a new number variable, and decreases its value by one every time it is called. The initial value is -1.
+
+```liquid
+{% raw %}
+{% decrement variable %}
+{% decrement variable %}
+{% decrement variable %}
+{% endraw %}
+```
+
+```text
+-1
+-2
+-3
+```
+
+Like [increment](#increment), variables declared inside `decrement` are independent from variables created through `assign` or `capture`.