Use `_data` directory for site data.

8 years ago · 51e3d71b32
parent d6c90eaabd
commit 51e3d71b32
12 changed files with 207 additions and 144 deletions
--- a/_config.yml
+++ b/_config.yml
@ -1,7 +1,8 @@
 source:      .
-destination: ./_site
-plugins_dir: ./_plugins
-layouts_dir: ./_layouts
+destination: _site
+plugins_dir: _plugins
+layouts_dir: _layouts
+data_dir:    _data
 include:     ['.htaccess']
 exclude:     [
  '_scss',
@ -33,134 +34,3 @@ defaultDescription: 'Categorize, sort, and filter a responsive grid of items'
 defaultImage: '/img/shuffle.png'

 longDescription: 'Shuffle.js is a package for sorting, filtering, and laying out a group of items. It&rsquo;s performant, responsive, and fast. Check out the demos!'
-
-demos:
-  - url: 'demos/2013-05-01-basic'
-    slug: basic
-    label: Basic masonry layout
-  - url: 'demos/2013-06-19-adding-removing'
-    slug: adding-removing
-    label: Adding and removing items
-  - url: 'demos/2013-05-02-compound-filters'
-    slug: compound-filters
-    label: Compound filtering
-  - url: 'demos/2013-05-03-images'
-    slug: images
-    label: Using images
-  - url: 'demos/2013-08-25-animated'
-    slug: animated
-    label: Animated viewport entry
-  - url: 'demos/2014-03-08-bootstrap3-grid'
-    slug: bootstrap3-grid
-    label: Bootstrap 3 Grid Demo
-  - url: 'demos/2014-04-09-requirejs'
-    slug: requirejs
-    label: RequireJS with Shuffle
-
-shapes:
-  - shape: circle
-    color: blue
-  - shape: diamond
-    color: red
-  - shape: triangle
-    color: green
-  - shape: triangle
-    color: orange
-  - shape: square
-    color: red
-  - shape: diamond
-    color: green
-  - shape: circle
-    color: red
-  - shape: square
-    color: green
-  - shape: circle
-    color: orange
-  - shape: diamond
-    color: blue
-  - shape: square
-    color: orange
-  - shape: square
-    color: blue
-
-items:
-  - groups: [ photography ]
-    date: 2010-09-14
-    title: Baseball
-    img: baseball.png
-    original: baseball.jpg
-    cols: [ 3, 4, 3 ]
-  - groups: [ wallpaper, 3d ]
-    date: 2011-08-14
-    title: Tennis
-    img: tennis-ball.png
-    original: tennis-ball.jpg
-    extras: [ overlay ]
-    cols: [3, 8, 6]
-  - groups: [ wallpaper, 3d ]
-    date: 2009-05-27
-    title: iMac
-    img: imac.png
-    original: imac.jpg
-    cols: [ 3, 4, 3 ]
-  - groups: [ graphics ]
-    date: 2012-05-14
-    title: Master Chief
-    img: master-chief.png
-    original: Master_Chief_Portrait_by_Eightfold_Studios.jpg
-    description: longDescription
-    extras: [ h2 ]
-    cols: [ 6, 4, 3 ]
-  - groups: [ wallpaper, 3d ]
-    date: 2009-09-14
-    title: Eightfold
-    img: es-blue.png
-    original: es-blue.jpg
-    cols: [ 3, 4, 3 ]
-  - groups: [ photography ]
-    date: 2012-03-14
-    title: Pumpkin
-    img: pumpkin.png
-    original: pumpkin.jpg
-    extras: [ overlay ]
-    cols: [3, 8, 6]
-  - groups: [ wallpaper, 3d ]
-    date: 2013-05-19
-    title: Vestride
-    img: vestride-red.png
-    original: vestride-red.jpg
-    extras: [ h2 ]
-    cols: [3, 8, 6]
-  - groups: [ graphics ]
-    date: 2013-02-01
-    title: Newegg
-    img: newegg.png
-    original: newegg.jpg
-    description: longDescription
-    extras: [ h2 ]
-    cols: [ 6, 4, 3 ]
-  - groups: [ wallpaper ]
-    date: 2000-01-01
-    title: Arc
-    img: eightfoldarc.png
-    original: eightfoldarc.jpg
-    cols: [ 3, 4, 3 ]
-  - groups: [ photography ]
-    date: 2012-07-04
-    title: Ground
-    img: ground.png
-    original: ground!.jpg
-    cols: [ 3, 4, 3 ]
-  - groups: [ wallpaper ]
-    date: 2011-08-12
-    title: Grass
-    img: grassy-hills.png
-    original: grassy-hills.tif
-    extras: [ overlay ]
-    cols: [3, 8, 6]
-  - groups: [ wallpaper, 3d ]
-    date: 2013-05-19
-    title: Vestride
-    img: vestride-classy.png
-    original: vestride-classy.jpg
-    cols: [ 3, 4, 3 ]
--- a/_data/demos.json
+++ b/_data/demos.json
@ -0,0 +1,37 @@
+[
+  {
+    "url": "demos/2013-05-01-basic",
+    "slug": "basic",
+    "label": "Basic masonry layout"
+  },
+  {
+    "url": "demos/2013-06-19-adding-removing",
+    "slug": "adding-removing",
+    "label": "Adding and removing items"
+  },
+  {
+    "url": "demos/2013-05-02-compound-filters",
+    "slug": "compound-filters",
+    "label": "Compound filtering"
+  },
+  {
+    "url": "demos/2013-05-03-images",
+    "slug": "images",
+    "label": "Using images"
+  },
+  {
+    "url": "demos/2013-08-25-animated",
+    "slug": "animated",
+    "label": "Animated viewport entry"
+  },
+  {
+    "url": "demos/2014-03-08-bootstrap3-grid",
+    "slug": "bootstrap3-grid",
+    "label": "Bootstrap 3 Grid Demo"
+  },
+  {
+    "url": "demos/2014-04-09-requirejs",
+    "slug": "requirejs",
+    "label": "RequireJS with Shuffle"
+  }
+]
--- a/_data/items.json
+++ b/_data/items.json
@ -0,0 +1,106 @@
+[
+  {
+    "groups": ["photography"],
+    "date": "2010-09-14",
+    "title": "Baseball",
+    "img": "baseball.png",
+    "original": "baseball.jpg",
+    "cols": [3, 4, 3]
+  },
+  {
+    "groups": ["wallpaper", "3d"],
+    "date": "2011-08-14",
+    "title": "Tennis",
+    "img": "tennis-ball.png",
+    "original": "tennis-ball.jpg",
+    "extras": ["overlay"],
+    "cols": [3, 8, 6]
+  },
+  {
+    "groups": ["wallpaper", "3d"],
+    "date": "2009-05-27",
+    "title": "iMac",
+    "img": "imac.png",
+    "original": "imac.jpg",
+    "cols": [3, 4, 3]
+  },
+  {
+    "groups": ["graphics"],
+    "date": "2012-05-14",
+    "title": "Master Chief",
+    "img": "master-chief.png",
+    "original": "Master_Chief_Portrait_by_Eightfold_Studios.jpg",
+    "description": "Shuffle.js is a package for sorting, filtering, and laying out a group of items. It&rsquo;s performant, responsive, and fast. Check out the demos!",
+    "extras": ["h2"],
+    "cols": [6, 4, 3]
+  },
+  {
+    "groups": ["wallpaper", "3d"],
+    "date": "2009-09-14",
+    "title": "Eightfold",
+    "img": "es-blue.png",
+    "original": "es-blue.jpg",
+    "cols": [3, 4, 3]
+  },
+  {
+    "groups": ["photography"],
+    "date": "2012-03-14",
+    "title": "Pumpkin",
+    "img": "pumpkin.png",
+    "original": "pumpkin.jpg",
+    "extras": ["overlay"],
+    "cols": [3, 8, 6]
+  },
+  {
+    "groups": ["wallpaper", "3d"],
+    "date": "2013-05-19",
+    "title": "Vestride",
+    "img": "vestride-red.png",
+    "original": "vestride-red.jpg",
+    "extras": ["h2"],
+    "cols": [3, 8, 6]
+  },
+  {
+    "groups": ["graphics"],
+    "date": "2013-02-01",
+    "title": "Newegg",
+    "img": "newegg.png",
+    "original": "newegg.jpg",
+    "description": "Shuffle.js is a package for sorting, filtering, and laying out a group of items. It&rsquo;s performant, responsive, and fast. Check out the demos!",
+    "extras": ["h2"],
+    "cols": [6, 4, 3]
+  },
+  {
+    "groups": ["wallpaper"],
+    "date": "2000-01-01",
+    "title": "Arc",
+    "img": "eightfoldarc.png",
+    "original": "eightfoldarc.jpg",
+    "cols": [3, 4, 3]
+  },
+  {
+    "groups": ["photography"],
+    "date": "2012-07-04",
+    "title": "Ground",
+    "img": "ground.png",
+    "original": "ground!.jpg",
+    "cols": [3, 4, 3]
+  },
+  {
+    "groups": ["wallpaper"],
+    "date": "2011-08-12",
+    "title": "Grass",
+    "img": "grassy-hills.png",
+    "original": "grassy-hills.tif",
+    "extras": ["overlay"],
+    "cols": [3, 8, 6]
+  },
+  {
+    "groups": ["wallpaper", "3d"],
+    "date": "2013-05-19",
+    "title": "Vestride",
+    "img": "vestride-classy.png",
+    "original": "vestride-classy.jpg",
+    "cols": [3, 4, 3]
+  }
+]
--- a/_data/shapes.json
+++ b/_data/shapes.json
@ -0,0 +1,50 @@
+[
+  {
+    "shape": "circle",
+    "color": "blue"
+  },
+  {
+    "shape": "diamond",
+    "color": "red"
+  },
+  {
+    "shape": "triangle",
+    "color": "green"
+  },
+  {
+    "shape": "triangle",
+    "color": "orange"
+  },
+  {
+    "shape": "square",
+    "color": "red"
+  },
+  {
+    "shape": "diamond",
+    "color": "green"
+  },
+  {
+    "shape": "circle",
+    "color": "red"
+  },
+  {
+    "shape": "square",
+    "color": "green"
+  },
+  {
+    "shape": "circle",
+    "color": "orange"
+  },
+  {
+    "shape": "diamond",
+    "color": "blue"
+  },
+  {
+    "shape": "square",
+    "color": "orange"
+  },
+  {
+    "shape": "square",
+    "color": "blue"
+  }
+]
--- a/_includes/demo-list.html
+++ b/_includes/demo-list.html
@ -1,5 +1,5 @@
 <div class="row js-demos demo-list">
-  {% for post in site.demos %}
+  {% for post in site.data.demos %}
    <div class="col-3@sm col-3@xs figure-wrap js-demo">
      <a href="{{ site.baseurl }}/{{ post.slug }}">
        <figure>
--- a/_posts/2013-05-01-basic.html
+++ b/_posts/2013-05-01-basic.html
@ -15,7 +15,7 @@ extraJS: [ "demos/homepage.js" ]

 <div class="container">
  <div id="grid" class="row my-shuffle-container">
-    {% for item in site.items %}
+    {% for item in site.data.items %}
        {% assign item = item %}
        {% include picture-item.html %}
    {% endfor %}
--- a/_posts/2013-05-02-compound-filters.html
+++ b/_posts/2013-05-02-compound-filters.html
@ -49,7 +49,7 @@ prism: true

  <div class="row">
    <div class="shape-shuffle-container js-shuffle">
-      {% for shape in site.shapes %}
+      {% for shape in site.data.shapes %}
      <div class="col-3@xs col-3@sm shape shape--{{ shape.shape }} shape--{{ shape.color }}" data-shape="{{ shape.shape }}" data-color="{{ shape.color }}">
        <div class="aspect">
          <div class="aspect__inner">
--- a/_posts/2013-05-03-images.html
+++ b/_posts/2013-05-03-images.html
@ -42,7 +42,7 @@ prism: true

 <div class="container shuffle-wrap">
  <div class="my-grid-with-images row">
-    {% for item in site.items %}
+    {% for item in site.data.items %}
    <figure class="js-item img-item col-3@sm col-3@xs">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner">
--- a/_posts/2013-06-29-image-problems.html
+++ b/_posts/2013-06-29-image-problems.html
@ -35,7 +35,7 @@ extraJS: [ "demos/images.js"]

 <div class="container">
  <div class="my-grid-with-images row">
-    {% for item in site.items %}
+    {% for item in site.data.items %}
    <figure class="js-item img-item col-3@sm col-3@xs">
      <img src="{{ site.baseurl }}/img/{{ item.img }}" alt="{{item.title}}"/>
      <figcaption>{{ item.groups | join: ', ' }}</figcaption>
--- a/_posts/2013-08-25-animated.html
+++ b/_posts/2013-08-25-animated.html
@ -16,15 +16,15 @@ extraJS: [ "viewport.js", "demos/animate-in.js" ]

 <div class="container">
  <div id="grid" class="row my-shuffle-container shuffle--animatein">
-    {% for item in site.items %}
+    {% for item in site.data.items %}
        {% assign item = item %}
        {% include picture-item.html %}
    {% endfor %}
-    {% for item in site.items %}
+    {% for item in site.data.items %}
        {% assign item = item %}
        {% include picture-item.html %}
    {% endfor %}
-    {% for item in site.items %}
+    {% for item in site.data.items %}
        {% assign item = item %}
        {% include picture-item.html %}
    {% endfor %}
--- a/_posts/2014-04-09-requirejs.html
+++ b/_posts/2014-04-09-requirejs.html
@ -38,7 +38,7 @@ pagejs: false

 <div class="container shuffle-wrap">
  <div id="grid" class="my-shuffle-container row">
-    {% for item in site.items %}
+    {% for item in site.data.items %}
    <figure class="js-item img-item col-3@sm col-3@xs">
      <div class="aspect aspect--16x9">
        <div class="aspect__inner">
--- a/index.html
+++ b/index.html
@ -71,7 +71,7 @@ prism: true

  <div class="container">
    <div id="grid" class="row my-shuffle-container">
-      {% for item in site.items %}
+      {% for item in site.data.items %}
          {% assign item = item %}
          {% include picture-item.html %}
      {% endfor %}