Ignore vendor for travis

The code is not wrapped when reading a document from a smartphone.

.gitignore

@@ -1 +1,42 @@
-_site
+_site/
+.sass-cache/
+node_modules/
+Gemfile.lock
+
+# 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

.travis.yml

@@ -0,0 +1,17 @@
+sudo: false
+language: ruby
+cache: bundler
+rvm: 2.4
+
+before_install:
+  - gem update --system
+install: bundle install
+script: bundle exec jekyll build --trace
+
+branches:
+  only:
+  - gh-pages
+
+env:
+  global:
+  - NOKOGIRI_USE_SYSTEM_LIBRARIES=true

CNAME

@@ -1 +0,0 @@
-liquidmarkup.org

Gemfile

@@ -0,0 +1,3 @@
+source 'https://rubygems.org'
+
+gem 'github-pages', '>=180', group: :jekyll_plugins

Gemfile.lock

@@ -0,0 +1,248 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (4.2.10)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
+      tzinfo (~> 1.1)
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.11.1)
+    colorator (1.1.0)
+    commonmarker (0.17.13)
+      ruby-enum (~> 0.5)
+    concurrent-ruby (1.0.5)
+    dnsruby (1.61.2)
+      addressable (~> 2.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    ethon (0.11.0)
+      ffi (>= 1.3.0)
+    eventmachine (1.2.7)
+    execjs (2.7.0)
+    faraday (0.15.3)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.9.25)
+    forwardable-extended (2.6.0)
+    gemoji (3.0.0)
+    github-pages (192)
+      activesupport (= 4.2.10)
+      github-pages-health-check (= 1.8.1)
+      jekyll (= 3.7.4)
+      jekyll-avatar (= 0.6.0)
+      jekyll-coffeescript (= 1.1.1)
+      jekyll-commonmark-ghpages (= 0.1.5)
+      jekyll-default-layout (= 0.1.4)
+      jekyll-feed (= 0.10.0)
+      jekyll-gist (= 1.5.0)
+      jekyll-github-metadata (= 2.9.4)
+      jekyll-mentions (= 1.4.1)
+      jekyll-optional-front-matter (= 0.3.0)
+      jekyll-paginate (= 1.1.0)
+      jekyll-readme-index (= 0.2.0)
+      jekyll-redirect-from (= 0.14.0)
+      jekyll-relative-links (= 0.5.3)
+      jekyll-remote-theme (= 0.3.1)
+      jekyll-sass-converter (= 1.5.2)
+      jekyll-seo-tag (= 2.5.0)
+      jekyll-sitemap (= 1.2.0)
+      jekyll-swiss (= 0.4.0)
+      jekyll-theme-architect (= 0.1.1)
+      jekyll-theme-cayman (= 0.1.1)
+      jekyll-theme-dinky (= 0.1.1)
+      jekyll-theme-hacker (= 0.1.1)
+      jekyll-theme-leap-day (= 0.1.1)
+      jekyll-theme-merlot (= 0.1.1)
+      jekyll-theme-midnight (= 0.1.1)
+      jekyll-theme-minimal (= 0.1.1)
+      jekyll-theme-modernist (= 0.1.1)
+      jekyll-theme-primer (= 0.5.3)
+      jekyll-theme-slate (= 0.1.1)
+      jekyll-theme-tactile (= 0.1.1)
+      jekyll-theme-time-machine (= 0.1.1)
+      jekyll-titles-from-headings (= 0.5.1)
+      jemoji (= 0.10.1)
+      kramdown (= 1.17.0)
+      liquid (= 4.0.0)
+      listen (= 3.1.5)
+      mercenary (~> 0.3)
+      minima (= 2.5.0)
+      nokogiri (>= 1.8.2, < 2.0)
+      rouge (= 2.2.1)
+      terminal-table (~> 1.4)
+    github-pages-health-check (1.8.1)
+      addressable (~> 2.3)
+      dnsruby (~> 1.60)
+      octokit (~> 4.0)
+      public_suffix (~> 2.0)
+      typhoeus (~> 1.3)
+    html-pipeline (2.8.4)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.7.4)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-avatar (0.6.0)
+      jekyll (~> 3.0)
+    jekyll-coffeescript (1.1.1)
+      coffee-script (~> 2.2)
+      coffee-script-source (~> 1.11.1)
+    jekyll-commonmark (1.2.0)
+      commonmarker (~> 0.14)
+      jekyll (>= 3.0, < 4.0)
+    jekyll-commonmark-ghpages (0.1.5)
+      commonmarker (~> 0.17.6)
+      jekyll-commonmark (~> 1)
+      rouge (~> 2)
+    jekyll-default-layout (0.1.4)
+      jekyll (~> 3.0)
+    jekyll-feed (0.10.0)
+      jekyll (~> 3.3)
+    jekyll-gist (1.5.0)
+      octokit (~> 4.2)
+    jekyll-github-metadata (2.9.4)
+      jekyll (~> 3.1)
+      octokit (~> 4.0, != 4.4.0)
+    jekyll-mentions (1.4.1)
+      html-pipeline (~> 2.3)
+      jekyll (~> 3.0)
+    jekyll-optional-front-matter (0.3.0)
+      jekyll (~> 3.0)
+    jekyll-paginate (1.1.0)
+    jekyll-readme-index (0.2.0)
+      jekyll (~> 3.0)
+    jekyll-redirect-from (0.14.0)
+      jekyll (~> 3.3)
+    jekyll-relative-links (0.5.3)
+      jekyll (~> 3.3)
+    jekyll-remote-theme (0.3.1)
+      jekyll (~> 3.5)
+      rubyzip (>= 1.2.1, < 3.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.5.0)
+      jekyll (~> 3.3)
+    jekyll-sitemap (1.2.0)
+      jekyll (~> 3.3)
+    jekyll-swiss (0.4.0)
+    jekyll-theme-architect (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-cayman (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-dinky (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-hacker (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-leap-day (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-merlot (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-midnight (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-minimal (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-modernist (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-primer (0.5.3)
+      jekyll (~> 3.5)
+      jekyll-github-metadata (~> 2.9)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-slate (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-tactile (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-time-machine (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-titles-from-headings (0.5.1)
+      jekyll (~> 3.3)
+    jekyll-watch (2.0.0)
+      listen (~> 3.0)
+    jemoji (0.10.1)
+      gemoji (~> 3.0)
+      html-pipeline (~> 2.2)
+      jekyll (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.0)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    mini_portile2 (2.3.0)
+    minima (2.5.0)
+      jekyll (~> 3.5)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    minitest (5.11.3)
+    multipart-post (2.0.0)
+    nokogiri (1.8.4)
+      mini_portile2 (~> 2.3.0)
+    octokit (4.12.0)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    pathutil (0.16.1)
+      forwardable-extended (~> 2.6)
+    public_suffix (2.0.5)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.9.10)
+      ffi (>= 0.5.0, < 2)
+    rouge (2.2.1)
+    ruby-enum (0.7.2)
+      i18n
+    ruby_dep (1.5.0)
+    rubyzip (1.2.2)
+    safe_yaml (1.0.4)
+    sass (3.6.0)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sawyer (0.8.1)
+      addressable (>= 2.3.5, < 2.6)
+      faraday (~> 0.8, < 1.0)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    typhoeus (1.3.0)
+      ethon (>= 0.9.0)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    unicode-display_width (1.4.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  github-pages (>= 180)
+
+BUNDLED WITH
+   1.16.5

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: 'compact',
+          sourcemap: 'none'
+        },
+        files: {
+          '_site/css/main.css': '_sass/main.scss'
+        }
+      }
+    },
+
+    shell: {
+      jekyllServe: {
+        command: 'bundle exec jekyll serve --no-watch'
+      },
+
+      jekyllBuild: {
+        command: 'bundle exec jekyll build'
+      }
+    },
+
+    postcss: {
+      options: {
+        map: true,
+        processors: [
+          require('autoprefixer')({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'])
+}

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
+

_basics/introduction.md

@@ -0,0 +1,85 @@
+---
+title: Introduction
+description: An overview of objects, tags, and filters in the Liquid template language.
+redirect_from: /basics/
+---
+
+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 %}`.
+
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ page.title }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% if user %}
+  Hello {{ user.name }}!
+{% endif %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+Hello Adam!
+```
+
+Tags can be categorized into three types:
+
+- [Control flow]({{ "/tags/control-flow" | prepend: site.baseurl }})
+- [Iteration]({{ "/tags/iteration" | prepend: site.baseurl }})
+- [Variable assignments]({{ "/tags/variable" | prepend: site.baseurl }})
+
+You can read more about each type of tag in their respective sections.
+
+
+## Filters
+
+**Filters** change the output of a Liquid object. They are used within an output and are separated by a `|`.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "/my/fancy/url" | append: ".html" }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "/my/fancy/url" | append: ".html" }}
+```
+
+Multiple filters can be used on one output. They are applied from left to right.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "adam!" | capitalize | prepend: "Hello " }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+Hello Adam!
+```

_basics/operators.md

@@ -0,0 +1,114 @@
+---
+title: Operators
+description: Using operators to perform calculations in the Liquid template language.
+---
+
+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.
+
+## Order of operations
+
+In tags with more than one `and` or `or` operator, operators are checked in order *from right to left*. You cannot change the order of operations using parentheses — parentheses are invalid characters in Liquid and will prevent your tags from working.
+
+```liquid
+{% raw %}
+{% if true or false and false %}
+  This evaluates to true, since the 'and' condition is checked first.
+{% endif %}
+{% endraw %}
+```
+
+```liquid
+{% raw %}
+{% if true and false and false or true %}
+  This evaluates to false, since the tags are checked like this:
+
+  true and (false and (false or true))
+  true and (false and true)
+  true and false
+  false
+{% endif %}
+{% endraw %}
+```

_basics/truthy-and-falsy.md

@@ -0,0 +1,65 @@
+---
+title: Truthy and falsy
+description: An overview of boolean logic in the Liquid template language.
+---
+
+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 %}
+  This condition will always be true.
+{% endif %}
+{% endraw %}
+```
+
+[Strings]({{ "/basics/types/#string" | prepend: site.baseurl }}), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty:
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% if settings.fp_heading %}
+  <h1>{{ settings.fp_heading }}</h1>
+{% endif %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```html
+<h1></h1>
+```
+
+## Falsy
+
+The falsy values in Liquid are [`nil`]({{ "/basics/types/#nil" | prepend: site.baseurl }}) and [`false`]({{ "/basics/types/#boolean" | prepend: site.baseurl }}).
+
+## 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     | •             |               |

_basics/types.md

@@ -0,0 +1,128 @@
+---
+title: Types
+description: An overview of data types in the Liquid template language.
+---
+
+Liquid objects can have one of five types:
+
+- [String](#string)
+- [Number](#number)
+- [Boolean](#boolean)
+- [Nil](#nil)
+- [Array](#array)
+
+You can initialize Liquid variables with the [assign]({{ "/tags/variable/#assign" | prepend: site.baseurl }}) or [capture]({{ "/tags/variable/#capture" | prepend: site.baseurl }}) 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" | prepend: site.baseurl }}) 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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+The current user is {{ user.name }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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" | prepend: site.baseurl }}).
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
+{% for user in site.users %}
+  {{ user }}
+{% endfor %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
+{{ site.users[0] }}
+{{ site.users[1] }}
+{{ site.users[3] }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+Tobi
+Laura
+Adam
+```
+
+### Initializing arrays
+
+You cannot initialize arrays using only Liquid.
+
+You can, however, use the [split]({{ "/filters/split" | prepend: site.baseurl }}) filter to break a string into an array of substrings.

_basics/variations.md

@@ -0,0 +1,24 @@
+---
+title: Variations of Liquid
+description: An overview of the different installations of Liquid and how Liquid can change depending on where you're using it.
+---
+
+Liquid is a flexible, safe language, and is used in many different environments. Liquid was created for use in [Shopify](https://www.shopify.com) stores, and is also used extensively on [Jekyll](https://jekyllrb.com) websites. Over time, both Shopify and Jekyll have added their own objects, tags, and filters to Liquid. The most popular versions of Liquid that exist are **Liquid**, **Shopify Liquid**, and **Jekyll Liquid**.
+
+This site documents the latest version of **Liquid** including betas and release candidates — that is, Liquid as it exists outside of Shopify and Jekyll. If you download the Liquid repository or install it as a [gem](https://rubygems.org/gems/liquid), you will get access to whatever objects, tags, and filters are in the version of Liquid that you chose.
+
+## Shopify
+
+Shopify always uses the latest version of Liquid as a base, but Shopify adds a significant number of objects, tags, and filters to Liquid for use in merchants' stores. These include objects representing store, product, and customer information, and filters for displaying store data and manipulating storefront assets like product images.
+
+Shopify's version of Liquid is documented in the [Shopify Help Center](https://help.shopify.com/themes/liquid). If you want to try out Shopify's version of Liquid, you can create a development store through the [Shopify Partner Dashboard](https://help.shopify.com/en/partners/dashboard/development-stores).
+
+## Jekyll
+
+[Jekyll](https://jekyllrb.com) is a static site generator, a command-line tool that creates websites by merging templates with content files. Jekyll uses Liquid as its template language, and adds a few objects, tags, and filters. These include objects representing content pages, tags for including snippets of content in others, and filters for manipulating strings and URLs.
+
+Jekyll also powers [GitHub Pages](https://pages.github.com/), a web hosting service that lets you push a Jekyll installation to a GitHub repository and have the resulting website published. This website is built using GitHub Pages.
+
+Jekyll might not be using the latest version of Liquid. This means that the tags and filters listed on this site may not work in Jekyll. Often the Jekyll project will wait for a stable release of Liquid rather than using a beta or release candidate version. To see what version of Liquid Jekyll is using, check the **runtime dependencies** section of [Jekyll's gem page](https://rubygems.org/gems/jekyll).
+
+Jekyll's version of Liquid is documented in the [Templates section of Jekyll's documentation](http://jekyllrb.com/docs/templates/). If you want to try out Jekyll's version of Liquid, you can clone the Jekyll project or install Jekyll as a gem and test Liquid on a static site.

_basics/whitespace.md

@@ -0,0 +1,80 @@
+---
+title: Whitespace control
+description: An overview of controlling whitespace between code in the Liquid template language.
+---
+
+In Liquid, you can include a hyphen in your tag syntax `{% raw %}{{-{% endraw %}`, `{% raw %}-}}{% endraw %}`, `{% raw %}{%-{% endraw %}`, and `{% raw %}-%}{% endraw %}` to strip whitespace from the left or right side of a rendered tag.
+
+Normally, even if it doesn't output text, any line of Liquid in your template will still output a blank line in your rendered HTML:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{% assign my_variable = "tomato" %}
+{{ my_variable }}
+```
+{% endraw %}
+
+Notice the blank line before "tomato" in the rendered template:
+
+<p class="code-label">Output</p>
+``` text
+{% assign my_variable = "tomato" %}
+{{ my_variable }}
+```
+
+By including hyphens in your `assign` tag, you can strip the generated whitespace from the rendered template:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{%- assign my_variable = "tomato" -%}
+{{ my_variable }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+tomato
+```
+
+If you don't want any of your tags to output whitespace, as a general rule you can add hyphens to both sides of all your tags (`{% raw %}{%-{% endraw %}` and `{% raw %}-%}{% endraw %}`):
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{% assign username = "John G. Chalmers-Smith" %}
+{% if username and username.size > 10 %}
+  Wow, {{ username }}, you have a long name!
+{% else %}
+  Hello there!
+{% endif %}
+```
+{% endraw %}
+
+<p class="code-label">Output without whitespace control</p>
+``` text
+{% assign username = "John G. Chalmers-Smith" %}
+{% if username and username.size > 10 %}
+  Wow, {{ username }}, you have a long name!
+{% else %}
+  Hello there!
+{% endif %}
+```
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{%- assign username = "John G. Chalmers-Smith" -%}
+{%- if username and username.size > 10 -%}
+  Wow, {{ username }}, you have a long name!
+{%- else -%}
+  Hello there!
+{%- endif -%}
+```
+{% endraw %}
+
+<p class="code-label">Output with whitespace control</p>
+``` text
+Wow, John G. Chalmers-Smith, you have a long name!
+```

_config.yml

@@ -0,0 +1,38 @@
+title: Liquid template language
+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:                /liquid # the subpath of your site, e.g. /blog/
+url:                    https://shopify.github.io # the base hostname & protocol for your site
+permalink:              pretty
+exclude:
+  - README.md
+  - CNAME
+  - Gemfile
+  - Gemfile.lock
+  - Gruntfile.js
+  - package.json
+  - package-lock.json
+  - node_modules
+  - vendor
+keep_files:             ["css"]
+
+# Collections
+collections:
+  basics:
+    output: true
+  tags:
+    output: true
+  filters:
+    output: true
+
+# Plugins
+plugins:
+  - jekyll-redirect-from
+
+# Front matter defaults
+defaults:
+  - scope:
+      path: "" # an empty string here means all files in the project
+    values:
+      layout: default

_filters/abs.md

@@ -0,0 +1,45 @@
+---
+title: abs
+description: Liquid filter that gets the absolute value of a number.
+redirect_from: /filters/
+---
+
+Returns the absolute value of a number.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ -17 | abs }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+17
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 4 | abs }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+4
+```
+
+`abs` will also work on a string if the string only contains a number.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "-19.86" | abs }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+19.86
+```

_filters/append.md

@@ -0,0 +1,34 @@
+---
+title: append
+description: Liquid filter that appends a string to another string.
+---
+
+Concatenates two strings and returns the concatenated value.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "/my/fancy/url" | append: ".html" }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "/my/fancy/url" | append: ".html" }}
+```
+
+`append` can also be used with variables:
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign filename = "/index.html" %}
+{{ "website.com" | append: filename }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign filename = "/index.html" %}
+{{ "website.com" | append: filename }}
+```

_filters/at_least.md

@@ -0,0 +1,30 @@
+---
+title: at_least
+description: Liquid filter that limits a number to a minimum value
+---
+
+Limits a number to a minimum value.
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+{{ 4 | at_least: 5 }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```
+5
+```
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+{{ 4 | at_least: 3 }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```
+4
+```

_filters/at_most.md

@@ -0,0 +1,30 @@
+---
+title: at_most
+description: Liquid filter that limits a number to a maximum value
+---
+
+Limits a number to a maximum value.
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+{{ 4 | at_most: 5 }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```
+4
+```
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+{{ 4 | at_most: 3 }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```
+3
+```

_filters/capitalize.md

@@ -0,0 +1,32 @@
+---
+title: capitalize
+description: Liquid filter that capitalizes the first character in a string.
+---
+
+Makes the first character of a string capitalized.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "title" | capitalize }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+Title
+```
+
+`capitalize` only capitalizes the first character of the string, so later words are not affected:
+
+ <p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "my great title" | capitalize }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+My great title
+```

_filters/ceil.md

@@ -0,0 +1,56 @@
+---
+title: ceil
+description: Liquid filter that gets the ceiling of a number by rounding up to the nearest integer.
+---
+
+Rounds the input up to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 1.2 | ceil }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 1.2 | ceil }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 2.0 | ceil }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 2.0 | ceil }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 183.357 | ceil }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 183.357 | ceil }}
+```
+
+Here the input value is a string:
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "3.5" | ceil }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "3.5" | ceil }}
+```

_filters/compact.md

@@ -0,0 +1,53 @@
+---
+title: compact
+description: Liquid filter that removes nil values from an array.
+---
+
+Removes any `nil` values from an array.
+
+For this example, assume `site.pages` is an array of content pages for a website, and some of these pages have an attribute called `category` that specifies their content category. If we `map` those categories to an array, some of the array items might be `nil` if any pages do not have a `category` attribute.
+
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+{% assign site_categories = site.pages | map: 'category' %}
+
+{% for category in site_categories %}
+  {{ category }}
+{% endfor %}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```text
+  business
+  celebrities
+
+  lifestyle
+  sports
+
+  technology
+```
+
+By using `compact` when we create our `site_categories` array, we can remove all the `nil` values in the array.
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+{% assign site_categories = site.pages | map: 'category' | compact %}
+
+{% for category in site_categories %}
+  {{ category }}
+{% endfor %}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```text
+  business
+  celebrities
+  lifestyle
+  sports
+  technology
+```

_filters/concat.md

@@ -0,0 +1,58 @@
+---
+title: concat
+description: Liquid filter that concatenates arrays.
+---
+
+Concatenates (joins together) multiple arrays. The resulting array contains all the items from the input arrays.
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+{% assign fruits = "apples, oranges, peaches" | split: ", " %}
+{% assign vegetables = "carrots, turnips, potatoes" | split: ", " %}
+
+{% assign everything = fruits | concat: vegetables %}
+
+{% for item in everything %}
+- {{ item }}
+{% endfor %}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```text
+- apples
+- oranges
+- peaches
+- carrots
+- turnips
+- potatoes
+```
+
+You can string together `concat` filters to join more than two arrays:
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+{% assign furniture = "chairs, tables, shelves" | split: ", " %}
+
+{% assign everything = fruits | concat: vegetables | concat: furniture %}
+
+{% for item in everything %}
+- {{ item }}
+{% endfor %}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```text
+- apples
+- oranges
+- peaches
+- carrots
+- turnips
+- potatoes
+- chairs
+- tables
+- shelves
+```

_filters/date.md

@@ -0,0 +1,60 @@
+---
+title: date
+description: Liquid filter that prints and formats dates.
+---
+
+Converts a timestamp into another date format. The format for this syntax is the same as [`strftime`](http://strftime.net). The input uses the same format as Ruby's [`Time.parse`](https://ruby-doc.org/stdlib/libdoc/time/rdoc/Time.html#method-c-parse).
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ article.published_at | date: "%a, %b %d, %y" }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+Fri, Jul 17, 15
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ article.published_at | date: "%Y" }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+2015
+```
+
+`date` works on strings if they contain well-formatted dates:
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "March 14, 2016" | date: "%b %d, %y" }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "March 14, 2016" | date: "%b %d, %y" }}
+```
+
+To get the current time, pass the special word `"now"` (or `"today"`) to `date`:
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+This page was last updated at {{ "now" | date: "%Y-%m-%d %H:%M" }}.
+```
+
+Note that the value will be the current time of when the page was last generated from the template, not when the page is presented to a user if caching or static site generation is involved.

_filters/default.md

@@ -0,0 +1,50 @@
+---
+title: default
+description: Liquid filter that specifies a fallback in case a value doesn't exist.
+---
+
+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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ product_price | default: 2.99 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+2.99
+```
+
+In this example, `product_price` is defined, so the default value is not used.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign product_price = 4.99 %}
+{{ product_price | default: 2.99 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+4.99
+```
+
+In this example, `product_price` is empty, so the default value is used.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign product_price = "" %}
+{{ product_price | default: 2.99 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+2.99
+```

_filters/divided_by.md

@@ -0,0 +1,102 @@
+---
+title: divided_by
+description: Liquid filter that divides a number by another number.
+---
+
+Divides a number by the specified number.
+
+The result is rounded down to the nearest integer (that is, the [floor]({{ site.baseurl }}/filters/floor)) if the divisor is an integer.
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ 16 | divided_by: 4 }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ 16 | divided_by: 4 }}
+```
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ 5 | divided_by: 3 }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ 5 | divided_by: 3 }}
+```
+
+### Controlling rounding
+
+`divided_by` produces a result of the same type as the divisor — that is, if you divide by an integer, the result will be an integer. If you divide by a float (a number with a decimal in it), the result will be a float.
+
+For example, here the divisor is an integer:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ 20 | divided_by: 7 }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ 20 | divided_by: 7 }}
+```
+
+Here it is a float:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ 20 | divided_by: 7.0 }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ 20 | divided_by: 7.0 }}
+```
+
+### Changing variable types
+
+You might want to use a variable as a divisor, in which case you can't simply add `.0` to convert it to a float. In these cases, you can `assign` a version of your variable converted to a float using the `times` filter.
+
+In this example, we're dividing by a variable that contains an integer, so we get an integer:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{% assign my_integer = 7 %}
+{{ 20 | divided_by: my_integer }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{% assign my_integer = 7 %}
+{{ 20 | divided_by: my_integer }}
+```
+
+Here, we [multiply]({{ site.baseurl}}/filters/times) the variable by `1.0` to get a float, then divide by the float instead:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{% assign my_integer = 7 %}
+{% assign my_float = my_integer | times: 1.0 %}
+{{ 20 | divided_by: my_float }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{% assign my_integer = 7 %}
+{% assign my_float = my_integer | times: 1.0 %}
+{{ 20 | divided_by: my_float }}
+```

_filters/downcase.md

@@ -0,0 +1,30 @@
+---
+title: downcase
+description: Liquid filter that coverts a string to lowercase.
+---
+
+Makes each character in a string lowercase. It has no effect on strings which are already all lowercase.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Parker Moore" | downcase }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Parker Moore" | downcase }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "apple" | downcase }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "apple" | downcase }}
+```

_filters/escape.md

@@ -0,0 +1,30 @@
+---
+title: escape
+description: Liquid filter that escapes URL-unsafe characters in a string.
+---
+
+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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Have you read 'James & the Giant Peach'?" | escape }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Have you read 'James & the Giant Peach'?" | escape }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Tetsuro Takara" | escape }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Tetsuro Takara" | escape }}
+```

_filters/escape_once.md

@@ -0,0 +1,30 @@
+---
+title: escape_once
+description: Liquid filter that escapes URL-unsafe characters in a string once.
+---
+
+Escapes a string without changing existing escaped entities. It doesn't change strings that don't have anything to escape.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "1 < 2 & 3" | escape_once }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "1 < 2 & 3" | escape_once }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "1 &lt; 2 &amp; 3" | escape_once }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "1 &lt; 2 &amp; 3" | escape_once }}
+```

_filters/first.md

@@ -0,0 +1,48 @@
+---
+title: first
+description: Liquid filter that returns the first item of an array.
+---
+
+Returns the first item of an array.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array.first }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array.first }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.first }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.first }}
+```
+
+You can use `first` with dot notation when you need to use the filter inside a tag.
+
+```liquid
+{% raw %}
+{% if my_array.first == "zebra" %}
+  Here comes a zebra!
+{% endif %}
+{% endraw %}
+```

_filters/floor.md

@@ -0,0 +1,56 @@
+---
+title: floor
+description: Liquid filter that gets the floor of a number by rounding down to the nearest integer.
+---
+
+Rounds a number down to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 1.2 | floor }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 1.2 | floor }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 2.0 | floor }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 2.0 | floor }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 183.357 | floor }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 183.357 | floor }}
+```
+
+Here the input value is a string:
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "3.5" | floor }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "3.5" | floor }}
+```

_filters/join.md

@@ -0,0 +1,22 @@
+---
+title: join
+description: Liquid filter that joins an array of strings into a single string.
+---
+
+Combines the items in an array into a single string using the argument as a separator.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
+
+{{ beatles | join: " and " }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
+
+{{ beatles | join: " and " }}
+```

_filters/last.md

@@ -0,0 +1,48 @@
+---
+title: last
+description: Liquid filter that gets the last value in an array.
+---
+
+Returns the last item of an array.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array.last }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array.last }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.last }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.last }}
+```
+
+You can use `last` with dot notation when you need to use the filter inside a tag.
+
+```liquid
+{% raw %}
+{% if my_array.last == "tiger" %}
+  There goes a tiger!
+{% endif %}
+{% endraw %}
+```

_filters/lstrip.md

@@ -0,0 +1,18 @@
+---
+title: lstrip
+description: Liquid filter that removes whitespace from the left side of a string.
+---
+
+Removes all whitespaces (tabs, spaces, and newlines) from the beginning of a string. The filter does not affect spaces between words.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "          So much room for activities!          " | lstrip }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "          So much room for activities!          " | lstrip }}
+```

_filters/map.md

@@ -0,0 +1,28 @@
+---
+title: map
+description: Liquid filter that creates an array of values by extracting a named property from an object.
+---
+
+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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign all_categories = site.pages | map: "category" %}
+
+{% for item in all_categories %}
+{{ item }}
+{% endfor %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+business
+celebrities
+lifestyle
+sports
+technology
+```

_filters/minus.md

@@ -0,0 +1,42 @@
+---
+title: minus
+description: Liquid filter that subtracts one number from another.
+---
+
+Subtracts a number from another number.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 4 | minus: 2 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 4 | minus: 2 }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 16 | minus: 4 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 16 | minus: 4 }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 183.357 | minus: 12 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 183.357 | minus: 12 }}
+```

_filters/modulo.md

@@ -0,0 +1,42 @@
+---
+title: modulo
+description: Liquid filter that returns the remainder from a division operation.
+---
+
+Returns the remainder of a division operation.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 3 | modulo: 2 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 3 | modulo: 2 }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 24 | modulo: 7 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 24 | modulo: 7 }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 183.357 | modulo: 12 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 183.357 | modulo: 12 }}
+```

_filters/newline_to_br.md

@@ -0,0 +1,28 @@
+---
+title: newline_to_br
+description: Liquid filter that converts newlines in an input string to HTML <br> tags.
+---
+
+Replaces every newline (`\n`) with an HTML line break (`<br>`).
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | newline_to_br }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```html
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | newline_to_br }}
+```

_filters/plus.md

@@ -0,0 +1,42 @@
+---
+title: plus
+description: Liquid filter that adds a number to another number.
+---
+
+Adds a number to another number.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 4 | plus: 2 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 4 | plus: 2 }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 16 | plus: 4 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 16 | plus: 4 }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 183.357 | plus: 12 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 183.357 | plus: 12 }}
+```

_filters/prepend.md

@@ -0,0 +1,36 @@
+---
+title: prepend
+description: Liquid filter that prepends a string to the beginning of another string.
+---
+
+Adds the specified string to the beginning of another string.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
+```
+
+You can also `prepend` variables:
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign url = "example.com" %}
+
+{{ "/index.html" | prepend: url }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign url = "example.com" %}
+
+{{ "/index.html" | prepend: url }}
+```

_filters/remove.md

@@ -0,0 +1,18 @@
+---
+title: remove
+description: Liquid filter that removes all occurences of a given substring from a string.
+---
+
+Removes every occurrence of the specified substring from a string.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "I strained to see the train through the rain" | remove: "rain" }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "I strained to see the train through the rain" | remove: "rain" }}
+```

_filters/remove_first.md

@@ -0,0 +1,18 @@
+---
+title: remove_first
+description: Liquid filter that removes the first occurence of a given substring from a string.
+---
+
+Removes only the first occurrence of the specified substring from a string.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "I strained to see the train through the rain" | remove_first: "rain" }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "I strained to see the train through the rain" | remove_first: "rain" }}
+```

_filters/replace.md

@@ -0,0 +1,18 @@
+---
+title: replace
+description: Liquid filter that replaces all occurences of a given substring in a string.
+---
+
+Replaces every occurrence of an argument in a string with the second argument.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
+```

_filters/replace_first.md

@@ -0,0 +1,20 @@
+---
+title: replace_first
+description: Liquid filter that replaces the first occurrence of a given substring in a string.
+---
+
+Replaces only the first occurrence of the first argument in a string with the second argument.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_string = "Take my protein pills and put my helmet on" %}
+{{ my_string | replace_first: "my", "your" }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign my_string = "Take my protein pills and put my helmet on" %}
+{{ my_string | replace_first: "my", "your" }}
+```

_filters/reverse.md

@@ -0,0 +1,36 @@
+---
+title: reverse
+description: Liquid filter that reverses an array, or a string converted to an array.
+---
+
+Reverses the order of the items in an array. `reverse` cannot reverse a string.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array | reverse | join: ", " }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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:
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
+```

_filters/round.md

@@ -0,0 +1,42 @@
+---
+title: round
+description: Liquid filter that rounds a number to the nearest integer.
+---
+
+Rounds an input number to the nearest integer or, if a number is specified as an argument, to that number of decimal places.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 1.2 | round }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 1.2 | round }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 2.7 | round }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 2.7 | round }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 183.357 | round: 2 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 183.357 | round: 2 }}
+```

_filters/rstrip.md

@@ -0,0 +1,18 @@
+---
+title: rstrip
+description: Liquid filter that removes all whitespace from the right side of a string.
+---
+
+Removes all whitespace (tabs, spaces, and newlines) from the right side of a string.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "          So much room for activities!          " | rstrip }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "          So much room for activities!          " | rstrip }}
+```

_filters/size.md

@@ -0,0 +1,44 @@
+---
+title: size
+description: Liquid filter that returns the number of characters in a string or the number of items in an array.
+---
+
+Returns the number of characters in a string or the number of items in an array.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | size }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Ground control to Major Tom." | size }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array | size }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array | size }}
+```
+
+You can use `size` with dot notation when you need to use the filter inside a tag.
+
+```liquid
+{% raw %}
+{% if site.pages.size > 10 %}
+  This is a big website!
+{% endif %}
+{% endraw %}
+```

_filters/slice.md

@@ -0,0 +1,58 @@
+---
+title: slice
+description: Liquid filter that returns a substring from a given position in a string.
+---
+
+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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Liquid" | slice: 0 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Liquid" | slice: 0 }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Liquid" | slice: 2 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Liquid" | slice: 2 }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Liquid" | slice: 2, 5 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Liquid" | slice: 2, 5 }}
+```
+
+If the first parameter is a negative number, the indices are counted from the end of the string:
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Liquid" | slice: -3, 2 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Liquid" | slice: -3, 2 }}
+```

_filters/sort.md

@@ -0,0 +1,33 @@
+---
+title: sort
+description: Liquid filter that sorts an array in case-sensitive order.
+---
+
+Sorts items in an array in case-sensitive order.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
+
+{{ my_array | sort | join: ", " }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
+
+{{ my_array | sort | join: ", " }}
+```
+
+An optional parameter specifies which property of the array's items to use for sorting.
+
+```liquid
+{% raw %}
+{% assign products_by_price = collection.products | sort: "price" %}
+{% for product in products_by_price %}
+  <h4>{{ product.title }}</h4>
+{% endfor %}
+{% endraw %}
+```

_filters/sort_natural.md

@@ -0,0 +1,33 @@
+---
+title: sort_natural
+description: Liquid filter that sorts an array in case-insensitive order.
+---
+
+Sorts items in an array in case-insensitive order.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
+
+{{ my_array | sort_natural | join: ", " }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
+
+{{ my_array | sort_natural | join: ", " }}
+```
+
+An optional parameter specifies which property of the array's items to use for sorting.
+
+```liquid
+{% raw %}
+{% assign products_by_company = collection.products | sort_natural: "company" %}
+{% for product in products_by_company %}
+  <h4>{{ product.title }}</h4>
+{% endfor %}
+{% endraw %}
+```

_filters/split.md

@@ -0,0 +1,26 @@
+---
+title: split
+description: Liquid filter that splits a string into an array using separators.
+---
+
+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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
+
+{% for member in beatles %}
+  {{ member }}
+{% endfor %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
+
+{% for member in beatles %}
+  {{ member }}
+{% endfor %}
+```

_filters/strip.md

@@ -0,0 +1,18 @@
+---
+title: strip
+description: Liquid filter that removes whitespace from the left and right sides of a string.
+---
+
+Removes all whitespace (tabs, spaces, and newlines) from both the left and right side of a string. It does not affect spaces between words.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "          So much room for activities!          " | strip }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "          So much room for activities!          " | strip }}
+```

_filters/strip_html.md

@@ -0,0 +1,18 @@
+---
+title: strip_html
+description: Liquid filter that removes HTML tags from a string.
+---
+
+Removes any HTML tags from a string.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}
+```

_filters/strip_newlines.md

@@ -0,0 +1,28 @@
+---
+title: strip_newlines
+description: Liquid filter that removes newline characters from a string.
+---
+
+Removes any newline characters (line breaks) from a string.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | strip_newlines }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```html
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | strip_newlines }}
+```

_filters/times.md

@@ -0,0 +1,42 @@
+---
+title: times
+description: Liquid filter that multiplies a number by another number.
+---
+
+Multiplies a number by another number.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 3 | times: 2 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 3 | times: 2 }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 24 | times: 7 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 24 | times: 7 }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ 183.357 | times: 12 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ 183.357 | times: 12 }}
+```

_filters/truncate.md

@@ -0,0 +1,52 @@
+---
+title: truncate
+description: Liquid filter that truncates a string to a given number of characters.
+---
+
+`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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | truncate: 20 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Ground control to Major Tom." | truncate: 20 }}
+```
+
+### Custom ellipsis
+
+`truncate` takes an optional second parameter that specifies the sequence of characters to be appended to the truncated string. By default this is an ellipsis (...), but you can specify a different sequence.
+
+The length of the second parameter counts against the number of characters specified by the first parameter. For example, if you want to truncate a string to exactly 10 characters, and use a 3-character ellipsis, use **13** for the first parameter of `truncate`, since the ellipsis counts as 3 characters.
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ "Ground control to Major Tom." | truncate: 25, ", and so on" }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ "Ground control to Major Tom." | truncate: 25, ", and so on" }}
+```
+
+### No ellipsis
+
+You can truncate to the exact number of characters specified by the first parameter and show no trailing characters by passing a blank string as the second parameter:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ "Ground control to Major Tom." | truncate: 20, "" }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ "Ground control to Major Tom." | truncate: 20, "" }}
+```

_filters/truncatewords.md

@@ -0,0 +1,50 @@
+---
+title: truncatewords
+description: Liquid filter that truncates a string to the given number of words.
+---
+
+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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | truncatewords: 3 }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Ground control to Major Tom." | truncatewords: 3 }}
+```
+
+### Custom ellipsis
+
+`truncatewords` takes an optional second parameter that specifies the sequence of characters to be appended to the truncated string. By default this is an ellipsis (...), but you can specify a different sequence.
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ "Ground control to Major Tom." | truncatewords: 3, "--" }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ "Ground control to Major Tom." | truncatewords: 3, "--" }}
+```
+
+### No ellipsis
+
+You can avoid showing trailing characters by passing a blank string as the second parameter:
+
+<p class="code-label">Input</p>
+{% raw %}
+``` liquid
+{{ "Ground control to Major Tom." | truncatewords: 3, "" }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+``` text
+{{ "Ground control to Major Tom." | truncatewords: 3, "" }}
+```

_filters/uniq.md

@@ -0,0 +1,22 @@
+---
+title: uniq
+description: Liquid filter that removes duplicate items from an array.
+---
+
+Removes any duplicate elements in an array.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}
+
+{{ my_array | uniq | join: ", " }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}
+
+{{ my_array | uniq | join: ", " }}
+```

_filters/upcase.md

@@ -0,0 +1,30 @@
+---
+title: upcase
+description: Liquid filter that capitalizes every character in a string.
+---
+
+Makes each character in a string uppercase. It has no effect on strings which are already all uppercase.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Parker Moore" | upcase }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Parker Moore" | upcase }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "APPLE" | upcase }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "APPLE" | upcase }}
+```

_filters/url_decode.md

@@ -0,0 +1,18 @@
+---
+title: url_decode
+description: Liquid filter that decodes percent-encoded characters in a string.
+---
+
+Decodes a string that has been encoded as a URL or by [`url_encode`]({{ '/filters/url_encode' | prepend: site.baseurl }}).
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "%27Stop%21%27+said+Fred" | url_decode }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+'Stop!' said Fred
+```

_filters/url_encode.md

@@ -0,0 +1,30 @@
+---
+title: url_encode
+description: Liquid filter that encodes URL-unsafe characters in a string.
+---
+
+Converts any URL-unsafe characters in a string into percent-encoded characters.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "john@liquid.com" | url_encode }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "john@liquid.com" | url_encode }}
+```
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{{ "Tetsuro Takara" | url_encode }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+{{ "Tetsuro Takara" | url_encode }}
+```

_filters/where.md

@@ -0,0 +1,90 @@
+---
+title: where
+description: Liquid filter that selects from arrays.
+---
+
+Creates an array including only the objects with a given property value, or any [truthy]({{ "/basics/truthy-and-falsy#truthy" | prepend: site.baseurl }}) value by default.
+
+In this example, assume you have a list of products and you want to show your kitchen products separately. Using `where`, you can create an array containing only the products that have a `"type"` of `"kitchen"`.
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+All products:
+{% for product in products %}
+- {{ product.title }}
+{% endfor %} 
+
+{% assign kitchen_products = products | where: "type", "kitchen" %}
+
+Kitchen products:
+{% for product in kitchen_products %}
+- {{ product.title }}
+{% endfor %} 
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```text
+All products:
+- Vacuum
+- Spatula
+- Television
+- Garlic press
+
+Kitchen products:
+- Spatula
+- Garlic press
+
+```
+
+Say instead you have a list of products and you only want to show those that are available to buy. You can `where` with a property name but no target value to include all products with a [truthy]({{ "/basics/truthy-and-falsy#truthy" | prepend: site.baseurl }}) `"available"` value.
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+All products:
+{% for product in products %} 
+- {{ product.title }}
+{% endfor %}
+
+{% assign available_products = products | where: "available" %}
+
+Available products:
+{% for product in available_products %} 
+- {{ product.title }}
+{% endfor %}
+
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+
+```text
+All products:
+- Coffee mug
+- Limited edition sneakers
+- Boring sneakers
+
+Available products:
+- Coffee mug
+- Boring sneakers
+
+```
+
+
+The `where` filter can also be used to find a single object in an array when combined with the `first` filter. For example, say you want to show off the shirt in your new fall collection.
+
+<p class="code-label">Input</p>
+{% raw %}
+```liquid
+{% assign new_shirt = products | where: "type", "shirt" | first %}
+
+Featured product: {{ new_shirt.title }}
+```
+{% endraw %}
+
+<p class="code-label">Output</p>
+```text
+Featured product: Hawaiian print sweater vest
+```

_includes/home-banner.html

@@ -0,0 +1,12 @@
+<div 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">
+      <span aria-hidden="true">{% include icons/desktop-download.svg %}</span> Download
+    </a>
+    <a href="https://github.com/Shopify/liquid" target="_blank" class="btn">
+      <span aria-hidden="true">{% include icons/mark-github.svg %}</span> View on GitHub
+    </a>
+  </p>
+</div>

_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' | relative_url }}" alt="Jekyll logo" />
+    </a>
+  </div>
+  <div class="home-users-grid__item">
+    <a href="http://www.desk.com" target="_blank">
+      <img src="{{ '/images/salesforcedesk-logo.png' | relative_url }}" alt="Desk logo" />
+    </a>
+  </div>
+  <div class="home-users-grid__item">
+    <a href="//www.zendesk.com" target="_blank">
+      <img src="{{ '/images/zendesk-logo.png' | relative_url }}" alt="ZenDesk logo" />
+    </a>
+  </div>
+  <div class="home-users-grid__item">
+    <a href="//500px.com" target="_blank">
+      <img src="{{ '/images/500px-logo.png' | relative_url }}" alt="500px logo" />
+    </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>

_includes/icons/desktop-download.svg

@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m4 6h3v-6h2v6h3l-4 4zm11-4h-4v1h4v8h-14v-8h4v-1h-4c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2h5.34c.55 0 1-.45 1-1v-9c0-.55-.45-1-1-1z" fill-rule="evenodd"/></svg>

_includes/icons/mark-github.svg

@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg"><path d="m8 0c-4.42 0-8 3.58-8 8 0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38l-.01-1.49c-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38 3.16-1.06 5.45-4.06 5.45-7.59 0-4.42-3.58-8-8-8z" fill-rule="evenodd"/></svg>

_includes/icons/three-bars.svg

@@ -0,0 +1 @@
+<svg height="16" viewBox="0 0 12 16" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m11.41 9h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm0-4h-10.82c-.59 0-.59-.41-.59-1s0-1 .59-1h10.81c.59 0 .59.41.59 1s0 1-.59 1zm-10.82 6h10.81c.59 0 .59.41.59 1s0 1-.59 1h-10.81c-.59 0-.59-.41-.59-1s0-1 .59-1z"/></svg>

_includes/sidebar.html

@@ -0,0 +1,33 @@
+<div class="sidebar">
+  <header class="sidebar__logo" role="banner">
+    {% if page.home %}
+      Liquid
+    {% else %}
+      <a href="{{ "/" | relative_url }}">Liquid</a>
+    {% endif %}
+  </header>
+
+  {%- assign sections = "basics, tags, filters" | split: ", " -%}
+
+  <nav class="sidebar__nav">
+    <div class="sidebar__nav-interior">
+      {%- for section in sections -%}
+        <h3 class="section__header" id="{{ section }}">{{ section | capitalize }}</h3>
+
+        <ul class="section__links">
+        {%- for item in site[section] -%}
+            <li class="section__item">
+                <a href="{{ item.url | relative_url }}" class="section__link{% if item.url == page.url %} section__link--is-active{% endif %}">{{ item.title }}</a>
+            </li>
+        {%- endfor -%}
+        </ul>
+      {%- endfor -%}
+    </div>
+
+    {%- if sections contains page.collection -%}
+    <script type="text/javascript">
+        document.getElementById("{{ page.collection }}").scrollIntoView();
+    </script>
+    {%- endif -%}
+  </nav>
+</div>

_layouts/default.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <title>{% if page.title %}{{ page.title }} – {% endif %}{{ site.title }}</title>
+
+    <meta name="description" content="{{ page.description | default: site.description }}">
+    <meta name="author" content="Shopify">
+
+    <meta name="robots" content="index, follow">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+
+    <link rel="stylesheet" href="{{ '/css/main.css' | relative_url }}">
+    <link rel="icon" type="image/png" href="{{ '/images/icons/water-drop-32x.png' | relative_url }}" sizes="32x32">
+    <link rel="icon" type="image/png" href="{{ '/images/icons/water-drop-64x.png' | relative_url }}" sizes="64x64">
+    <link rel="canonical" href="{{ page.url | replace: 'index.html','' | absolute_url }}">
+    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | relative_url }}" />
+
+    <meta property="og:site_name" content="{{ site.title }}">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="{{ page.url | relative_url }}">
+    <meta property="og:title" content="{{ page.title | default: site.title }}">
+    <meta property="og:description" content="{{ page.description | default: site.description }}">
+
+    <meta name="twitter:site" content="{{ site.title }}">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:url" content="{{ site.url | relative_url }}">
+    <meta name="twitter:title" content="{{ page.title | default: site.title }}">
+    <meta name="twitter:description" content="{{ page.description | default: site.description }}">
+    
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-49178120-52"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'UA-49178120-52');
+    </script>
+  </head>
+
+  <body>
+
+    {% include sidebar.html %}
+
+    <div class="content__overlay"></div>
+    <main class="content__area" role="main">
+      <div class="content">
+        <button class="menu-button">
+          <span aria-hidden="true">{% include icons/three-bars.svg %}</span>
+          <span>Menu</span>
+        </button>
+        {% if page.title %}<h1>{{ page.title }}</h1>{% endif %}
+        {{ content }}
+      </div>
+    </main>
+    <script src="{{ '/js/script.js' | relative_url }}"></script>
+  </body>
+</html>

_sass/modules/_base.scss

@@ -0,0 +1,184 @@
+* {
+  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;
+  }
+}
+
+/** Links */
+a {
+    color: $color-blue-5;
+
+    &:visited {
+      color: #609;
+    }
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+
+/** Headings */
+
+h1 {
+  font-size: 2em;
+  font-weight: 300;
+}
+
+h2 {
+  font-size: 1.5em;
+  font-weight: 300;
+  margin-top: $spacing-unit;
+}
+
+h3 {
+  margin-top: $spacing-unit;
+  font-size: 1em;
+}
+
+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-family: Menlo, Monaco, monospace;
+  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;
+  white-space: pre-wrap;
+
+  > 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;
+}

_sass/modules/_buttons.scss

@@ -0,0 +1,84 @@
+.btn {
+  color: $color-white;
+  fill: currentColor;
+  display: flex;
+  background: $color-blue-5;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-unit/4 $spacing-unit/2;
+  border-radius: 8px;
+  text-decoration: none;
+  text-align: center;
+  white-space: nowrap;
+
+  &:hover {
+    background: $color-blue-4;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  &:first-child {
+    margin-bottom: $spacing-unit / 2;
+  }
+
+  @include phone-and-up {
+    justify-content: center;
+
+    &:first-child {
+      justify-content: flex-start;
+      margin-bottom: 0;
+    }
+  }
+
+  svg {
+    margin-right: $spacing-unit / 4;
+    width: $base-font-size * 1.5;
+    height: $base-font-size * 1.5;
+    vertical-align: middle;
+  }
+
+}
+
+.btn:visited {
+  color: $color-white;
+}
+
+.btn-row {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-bottom: 0;
+
+  @include phone-and-up {
+    flex-direction: row;
+
+    .btn:not(:first-child) {
+      margin-left: $spacing-unit / 2;
+    }
+  }
+}
+
+/*============================================================================
+  Menu button
+ ==============================================================================*/
+.menu-button {
+  display: inline-block;
+  font-size: $small-font-size;
+  background: none;
+  border: none;
+  margin: $spacing-unit / 2 0 $spacing-unit / 2 ($spacing-unit / 4 * -1);
+  padding: $spacing-unit / 4;
+  color: $color-slate;
+
+  @include tablet-and-up {
+    display: none;
+  }
+
+  svg {
+    margin-right: $spacing-unit / 4;
+    width: $base-font-size;
+    height: $base-font-size;
+    vertical-align: middle;
+  }
+
+}

_sass/modules/_content-area.scss

@@ -0,0 +1,22 @@
+.content__item {
+  margin-bottom: $spacing-unit * 2;
+}
+
+.highlight {
+  background: lighten($color-blue-1, 1);
+}
+
+.code-label {
+  padding: 4px 12px;
+  margin-bottom: 0;
+  font-size: 15px;
+  background: darken($color-blue-1, 5);
+  border: 1px solid $color-blue-2;
+  border-bottom: none;
+  border-radius: 3px 3px 0 0;
+}
+
+.code-label + .highlighter-rouge .highlight {
+  border-top: none;
+  border-radius: 0 0 3px 3px;
+}

_sass/modules/_home-banner.scss

@@ -0,0 +1,23 @@
+.home-banner {
+  text-align: center;
+  border-bottom: 1px solid lighten($color-slate, 50%);
+  padding-bottom: $spacing-unit;
+  margin-bottom: $spacing-unit;
+
+  h1 {
+    font-size: 4em;
+
+    // &:after {
+    //   content: '\01F4A7'; // Water droplet emoji
+    //   vertical-align: middle;
+    // }
+
+    @include phone-and-up {
+      font-size: 5em;
+    }
+  }
+
+  p {
+    color: lighten($color-slate, 20%);
+  }
+}

_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;
+}

_sass/modules/_layout.scss

@@ -0,0 +1,160 @@
+$sidebar-width: 250px;
+$logo-height: 130px;
+$wrapper-width: 800px;
+
+body {
+  // display: flex;
+  // flex-direction: column;
+
+  // @include tablet-and-up {
+  //   flex-direction: row;
+  // }
+}
+
+
+/*============================================================================
+  Content Area
+ ==============================================================================*/
+
+.content__area {
+  width: 100%;
+
+  @include tablet-and-up {
+    padding: $spacing-unit $spacing-unit $spacing-unit ($spacing-unit + $sidebar-width);
+  }
+}
+
+.content__overlay {
+  background: rgba(0, 0, 0, 0.4);
+  width: 100%;
+  height: 100vh;
+  position: fixed;
+  z-index: 1;
+  display: none;
+}
+
+.content__overlay--is-active {
+  display: block;
+}
+
+.content {
+  max-width: $wrapper-width;
+  margin: 0 auto;
+  padding: 0 $spacing-unit;
+  @extend %clearfix;
+}
+
+/*============================================================================
+  Sidebar
+ ==============================================================================*/
+
+.sidebar {
+  background: $color-blue-5;
+  width: $sidebar-width;
+  position: fixed;
+  transform: translateX($sidebar-width * -1);
+  transition: all 0.15s ease;
+  z-index: 2;
+  height: 100vh;
+  -webkit-overflow-scrolling: touch;
+
+  @include tablet-and-up {
+    transform: translateX(0);
+  }
+}
+
+.sidebar--is-visible {
+  transform: translateX(0);
+}
+
+.sidebar__logo {
+  border-bottom: 1px solid $color-blue-4;
+  color: $color-white;
+  font-size: $base-font-size * 2;
+  font-weight: 300;
+  height: $logo-height;
+  line-height: $logo-height;
+  margin-bottom: 0;
+  text-align: center;
+
+
+  // &:after {
+  //   content: '\01F4A7'; // Water droplet emoji
+  //   vertical-align: middle;
+  // }
+
+  a {
+    color: $color-white;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.sidebar__nav {
+
+  font-weight: bold;
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+.sidebar__nav-interior {
+  height: 100%;
+  // Add a bit more padding at the bottom for consistency.
+  padding: $spacing-unit $spacing-unit ($spacing-unit + $logo-height);
+}
+
+.section__header {
+  font-size: 1em;
+  text-decoration: none;
+  color: $color-white;
+  margin-top: 0;
+  margin-bottom: $spacing-unit / 4;
+
+  .section__links + & {
+    margin-top: $spacing-unit;
+  }
+}
+
+.section__links {
+  font-size: 0.9em;
+  font-weight: normal;
+
+  list-style: none;
+  margin-left: $spacing-unit / 2;
+}
+
+.section__item {
+  list-style: none;
+}
+
+.section__link {
+  display: inline-block;
+  margin-top: $spacing-unit/4;
+  opacity: 0.75;
+  text-decoration: none;
+  color: $color-white;
+
+  &:hover {
+    opacity: 1;
+    text-decoration: none;
+  }
+
+  &:empty {
+    // there is an error in the liquid logic that spits out a
+    // empty last-child
+    display: none;
+  }
+
+  &:visited {
+    color: $color-white;
+  }
+}
+
+.section__link--is-active {
+  font-weight: bold;
+  opacity: 1;
+  color: $color-white;
+}

_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;

_sass/partials/_defaults.scss

@@ -0,0 +1,5 @@
+$base-font-family: -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
+$base-font-size:   18px;
+$small-font-size:  $base-font-size * 0.875;
+$base-line-height: 1.5;
+$spacing-unit:     40px;

_sass/partials/_helpers.scss

@@ -0,0 +1,16 @@
+%clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+   }
+}
+
+.visually-hidden {
+  position:absolute;
+  left:-10000px;
+  top:auto;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+}

_sass/partials/_media-queries.scss

@@ -0,0 +1,43 @@
+/*============================================================================
+  Media queries
+==============================================================================*/
+
+$phone-width: 375px;
+$tablet-width: 768px;
+$desktop-width: 1024px;
+
+@mixin phone {
+  @media (max-width: #{$phone-width}) {
+    @content;
+  }
+}
+
+@mixin phone-and-up {
+  @media (min-width: #{$phone-width}) {
+    @content;
+  }
+}
+
+@mixin phone-to-tablet {
+  @media (min-width: #{$phone-width}) and (max-width: #{$tablet-width - 1px}) {
+    @content;
+  }
+}
+
+@mixin tablet {
+  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
+    @content;
+  }
+}
+
+@mixin tablet-and-up {
+  @media (min-width: #{$tablet-width}) {
+    @content;
+  }
+}
+
+@mixin desktop {
+  @media (min-width: #{$desktop-width}) {
+    @content;
+  }
+}

_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
+}

_tags/comment.md

@@ -0,0 +1,22 @@
+---
+title: Comment
+description: An overview of comments tags in the Liquid template language.
+---
+
+Allows you to leave un-rendered code inside a Liquid template. Any text within
+the opening and closing `comment` blocks will not be output, and any Liquid code
+within will not be executed.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+Anything you put between {% comment %} and {% endcomment %} tags
+is turned into a comment.
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```liquid
+Anything you put between {% comment %} and {% endcomment %} tags
+is turned into a comment.
+```

_tags/control-flow.md

@@ -0,0 +1,100 @@
+---
+title: Control flow
+description: An overview of control flow and conditional tags in the Liquid template language.
+redirect_from: /tags/
+---
+
+Control flow tags can change the information Liquid shows using programming logic.
+
+## if
+
+Executes a block of code only if a certain condition is `true`.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% if product.title == 'Awesome Shoes' %}
+  These shoes are awesome!
+{% endif %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+These shoes are awesome!
+```
+
+## unless
+
+The opposite of `if` – executes a block of code only if a certain condition is **not** met.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% unless product.title == 'Awesome Shoes' %}
+  These shoes are not awesome.
+{% endunless %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+<!-- If customer.name = 'anonymous' -->
+{% if customer.name == 'kevin' %}
+  Hey Kevin!
+{% elsif customer.name == 'anonymous' %}
+  Hey Anonymous!
+{% else %}
+  Hi Stranger!
+{% endif %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+Hey Anonymous!
+```
+
+## case/when
+
+Creates a switch statement to compare a variable with different values. `case` initializes the switch statement, and `when` compares its values.
+
+<p class="code-label">Input</p>
+```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 %}
+```
+
+<p class="code-label">Output</p>
+```text
+This is a cake
+```

_tags/iteration.md

@@ -0,0 +1,339 @@
+---
+title: Iteration
+description: An overview of iteration or 'loop' tags in the Liquid template language.
+---
+
+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).
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+  {% for product in collection.products %}
+    {{ product.title }}
+  {% endfor %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+hat shirt pants
+```
+
+### else
+
+Specifies a fallback case for a `for` loop which will run if the loop has zero length.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% for product in collection.products %}
+  {{ product.title }}
+{% else %}
+  The collection is empty.
+{% endfor %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+The collection is empty.
+```
+
+### break
+
+Causes the loop to stop iterating when it encounters the `break` tag.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% for i in (1..5) %}
+  {% if i == 4 %}
+    {% break %}
+  {% else %}
+    {{ i }}
+  {% endif %}
+{% endfor %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+1 2 3
+```
+
+### continue
+
+Causes the loop to skip the current iteration when it encounters the `continue` tag.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% for i in (1..5) %}
+  {% if i == 4 %}
+    {% continue %}
+  {% else %}
+    {{ i }}
+  {% endif %}
+{% endfor %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+1 2 3   5
+```
+
+## for (parameters)
+
+### limit
+
+Limits the loop to the specified number of iterations.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+<!-- if array = [1,2,3,4,5,6] -->
+{% for item in array limit:2 %}
+  {{ item }}
+{% endfor %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+1 2
+```
+
+### offset
+
+Begins the loop at the specified index.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+<!-- if array = [1,2,3,4,5,6] -->
+{% for item in array offset:2 %}
+  {{ item }}
+{% endfor %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% for i in (3..5) %}
+  {{ i }}
+{% endfor %}
+
+{% assign num = 4 %}
+{% for i in (1..num) %}
+  {{ i }}
+{% endfor %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+3 4 5
+1 2 3 4
+```
+
+### reversed
+
+Reverses the order of the loop. Note that the flag’s spelling is different to the filter `reverse`.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+<!-- if array = [1,2,3,4,5,6] -->
+{% for item in array reversed %}
+  {{ item }}
+{% endfor %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% cycle 'one', 'two', 'three' %}
+{% cycle 'one', 'two', 'three' %}
+{% cycle 'one', 'two', 'three' %}
+{% cycle 'one', 'two', 'three' %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+<table>
+{% tablerow product in collection.products %}
+  {{ product.title }}
+{% endtablerow %}
+</table>
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% tablerow product in collection.products cols:2 %}
+  {{ product.title }}
+{% endtablerow %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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 %}
+```

_tags/raw.md

@@ -0,0 +1,22 @@
+---
+title: Raw
+description: An overview of raw tags in the Liquid template language.
+---
+
+Raw temporarily disables tag processing. This is useful for generating content
+(eg, Mustache, Handlebars) which uses conflicting syntax.
+
+<p class="code-label">Input</p>
+<pre class="highlight">
+<code>{% raw %}
+&#123;&#37; raw &#37;&#125;
+  In Handlebars, {{ this }} will be HTML-escaped, but
+  {{{ that }}} will not.
+&#123;&#37; endraw &#37;&#125;
+{% endraw %}</code>
+</pre>
+
+<p class="code-label">Output</p>
+```text
+{% raw %}In Handlebars, {{ this }} will be HTML-escaped, but {{{ that }}} will not.{% endraw %}
+```

_tags/variable.md

@@ -0,0 +1,142 @@
+---
+title: Variable
+description: An overview of tags for creating variables in the Liquid template language.
+---
+
+Variable tags create new Liquid variables.
+
+## assign
+
+Creates a new variable.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign my_variable = false %}
+{% if my_variable != true %}
+  This statement is valid.
+{% endif %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+  This statement is valid.
+```
+
+Wrap a variable in quotations `"` to save it as a string.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign foo = "bar" %}
+{{ foo }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% capture my_variable %}I am being captured.{% endcapture %}
+{{ my_variable }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+I am being captured.
+```
+Using `capture`, you can create complex strings using other variables created with `assign`.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign favorite_food = 'pizza' %}
+{% assign age = 35 %}
+
+{% capture about_me %}
+I am {{ age }} and my favorite food is {{ favorite_food }}.
+{% endcapture %}
+
+{{ about_me }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+I am 35 and my favourite food is pizza.
+```
+
+## increment
+
+Creates a new number variable, and increases its value by one every time it is called. The initial value is 0.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% increment my_counter %}
+{% increment my_counter %}
+{% increment my_counter %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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`.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% assign var = 10 %}
+{% increment var %}
+{% increment var %}
+{% increment var %}
+{{ var }}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```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.
+
+<p class="code-label">Input</p>
+```liquid
+{% raw %}
+{% decrement variable %}
+{% decrement variable %}
+{% decrement variable %}
+{% endraw %}
+```
+
+<p class="code-label">Output</p>
+```text
+-1
+-2
+-3
+```
+
+Like [increment](#increment), variables declared inside `decrement` are independent from variables created through `assign` or `capture`.

css/main.scss

@@ -0,0 +1,19 @@
+---
+layout: null
+---
+
+@charset "utf-8";
+
+@import "partials/defaults";
+@import "partials/colors";
+@import "partials/helpers";
+@import "partials/media-queries";
+
+@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";

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>

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>

index.md

@@ -0,0 +1,15 @@
+---
+layout: default
+home: true
+description: Documentation for the Liquid template language, created by Shopify.
+---
+
+{% include home-banner.html %}
+
+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 at Shopify since 2006 and is now used by many other hosted web applications.
+
+## Used by
+
+{% include home-users-grid.html %}

js/script.js

@@ -0,0 +1,15 @@
+var menuButton = document.querySelector('.menu-button')
+var sidebar = document.querySelector('.sidebar')
+var contentOverlay = document.querySelector('.content__overlay')
+
+document.addEventListener('DOMContentLoaded', function () {
+  menuButton.addEventListener('click', function () {
+    sidebar.classList.toggle('sidebar--is-visible')
+    contentOverlay.classList.toggle('content__overlay--is-active')
+  })
+
+  contentOverlay.addEventListener('click', function () {
+    sidebar.classList.toggle('sidebar--is-visible')
+    contentOverlay.classList.toggle('content__overlay--is-active')
+  })
+})