├── .gitignore
├── src
    ├── blog
    │   ├── blog.11tydata.js
    │   ├── 2020-01-01-post-number-one.liquid
    │   ├── 2020-01-03-post-number-two.liquid
    │   ├── 2020-01-05-post-number-three.liquid
    │   ├── 2020-01-08-post-number-four.liquid
    │   ├── 2020-01-13-post-number-six.liquid
    │   ├── 2020-01-15-post-number-seven.liquid
    │   └── 2020-01-10-post-number-five.liquid
    ├── _includes
    │   └── blog-summary.liquid
    └── pages
    │   ├── index.liquid
    │   └── debug.liquid
├── www
    ├── 1
    │   └── index.html
    ├── 2
    │   └── index.html
    ├── blog
    │   ├── 2020-01-01-post-number-one
    │   │   └── index.html
    │   ├── 2020-01-03-post-number-two
    │   │   └── index.html
    │   ├── 2020-01-08-post-number-four
    │   │   └── index.html
    │   ├── 2020-01-05-post-number-three
    │   │   └── index.html
    │   ├── 2020-01-13-post-number-six
    │   │   └── index.html
    │   ├── 2020-01-15-post-number-seven
    │   │   └── index.html
    │   └── 2020-01-10-post-number-five
    │   │   └── index.html
    ├── index.html
    └── debug
    │   └── index.html
├── README.md
├── .eleventy.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/src/blog/blog.11tydata.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   tags: ["blog"]
3 | };
4 | 


--------------------------------------------------------------------------------
/src/_includes/blog-summary.liquid:
--------------------------------------------------------------------------------
1 | <li><a href="{{ post.url }}">{{ post.data.title }}</a> &mdash; <small>{{ post.date | localeDateString }}</small></li>
2 | 


--------------------------------------------------------------------------------
/www/blog/2020-01-01-post-number-one/index.html:
--------------------------------------------------------------------------------
 1 | <header>
 2 |   <h1>Post number one</h1>
 3 | </header>
 4 | 
 5 | <p>This is my blog.</p>
 6 | 
 7 | <footer>
 8 |   <p>Author: Jane Doe</p>
 9 |   <p>Date: 2020-01-01</p>
10 |   <p>Tags: ["blog","liquidjs"]</p>
11 | </footer>
12 | 


--------------------------------------------------------------------------------
/www/blog/2020-01-03-post-number-two/index.html:
--------------------------------------------------------------------------------
 1 | <header>
 2 |   <h1>Post number two</h1>
 3 | </header>
 4 | 
 5 | <p>This is my blog.</p>
 6 | 
 7 | <footer>
 8 |   <p>Author: Jane Doe</p>
 9 |   <p>Date: 2020-01-03</p>
10 |   <p>Tags: ["blog","nunjucks"]</p>
11 | </footer>
12 | 


--------------------------------------------------------------------------------
/www/blog/2020-01-08-post-number-four/index.html:
--------------------------------------------------------------------------------
 1 | <header>
 2 |   <h1>Post number four</h1>
 3 | </header>
 4 | 
 5 | <p>This is my blog.</p>
 6 | 
 7 | <footer>
 8 |   <p>Author: Jane Doe</p>
 9 |   <p>Date: 2020-01-08</p>
10 |   <p>Tags: ["blog","graphql"]</p>
11 | </footer>
12 | 


--------------------------------------------------------------------------------
/www/blog/2020-01-05-post-number-three/index.html:
--------------------------------------------------------------------------------
 1 | <header>
 2 |   <h1>Post number three</h1>
 3 | </header>
 4 | 
 5 | <p>This is my blog.</p>
 6 | 
 7 | <footer>
 8 |   <p>Author: John Doe</p>
 9 |   <p>Date: 2020-01-05</p>
10 |   <p>Tags: ["blog","liquidjs"]</p>
11 | </footer>
12 | 


--------------------------------------------------------------------------------
/www/blog/2020-01-13-post-number-six/index.html:
--------------------------------------------------------------------------------
 1 | <header>
 2 |   <h1>Post number six</h1>
 3 | </header>
 4 | 
 5 | <p>This is my blog.</p>
 6 | 
 7 | <footer>
 8 |   <p>Author: Janet Doe</p>
 9 |   <p>Date: 2020-01-13</p>
10 |   <p>Tags: ["blog","tailwindcss"]</p>
11 | </footer>
12 | 


--------------------------------------------------------------------------------
/www/blog/2020-01-15-post-number-seven/index.html:
--------------------------------------------------------------------------------
 1 | <header>
 2 |   <h1>Post number seven</h1>
 3 | </header>
 4 | 
 5 | <p>This is my blog.</p>
 6 | 
 7 | <footer>
 8 |   <p>Author: Janine Doe</p>
 9 |   <p>Date: 2020-01-15</p>
10 |   <p>Tags: ["blog","github-actions"]</p>
11 | </footer>
12 | 


--------------------------------------------------------------------------------
/src/blog/2020-01-01-post-number-one.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Post number one
 3 | author: Jane Doe
 4 | tags:
 5 |   - liquidjs
 6 | ---
 7 | 
 8 | <header>
 9 |   <h1>{{ title }}</h1>
10 | </header>
11 | 
12 | <p>This is my blog.</p>
13 | 
14 | <footer>
15 |   <p>Author: {{ author }}</p>
16 |   <p>Date: {{ page.date | localeDateString }}</p>
17 |   <p>Tags: {{ tags }}</p>
18 | </footer>


--------------------------------------------------------------------------------
/src/blog/2020-01-03-post-number-two.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Post number two
 3 | author: Jane Doe
 4 | tags:
 5 |   - nunjucks
 6 | ---
 7 | 
 8 | <header>
 9 |   <h1>{{ title }}</h1>
10 | </header>
11 | 
12 | <p>This is my blog.</p>
13 | 
14 | <footer>
15 |   <p>Author: {{ author }}</p>
16 |   <p>Date: {{ page.date | localeDateString }}</p>
17 |   <p>Tags: {{ tags }}</p>
18 | </footer>


--------------------------------------------------------------------------------
/www/2/index.html:
--------------------------------------------------------------------------------
 1 | <p>This is the Homepage.</p>
 2 | <p>There are many like it, but this one is mine.</p>
 3 | 
 4 | <section>
 5 |   <h2>Looping over a collection (max 3 posts per page)</h2>
 6 |   <ul>
 7 |     <li>
 8 |       <a href="/blog/2020-01-01-post-number-one/">Post number one</a> &mdash;
 9 |       <small>2020-01-01</small>
10 |     </li>
11 |   </ul>
12 | </section>
13 | 


--------------------------------------------------------------------------------
/src/blog/2020-01-05-post-number-three.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Post number three
 3 | author: John Doe
 4 | tags:
 5 |   - liquidjs
 6 | ---
 7 | 
 8 | <header>
 9 |   <h1>{{ title }}</h1>
10 | </header>
11 | 
12 | <p>This is my blog.</p>
13 | 
14 | <footer>
15 |   <p>Author: {{ author }}</p>
16 |   <p>Date: {{ page.date | localeDateString }}</p>
17 |   <p>Tags: {{ tags }}</p>
18 | </footer>


--------------------------------------------------------------------------------
/src/blog/2020-01-08-post-number-four.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Post number four
 3 | author: Jane Doe
 4 | tags:
 5 |   - graphql
 6 | ---
 7 | 
 8 | <header>
 9 |   <h1>{{ title }}</h1>
10 | </header>
11 | 
12 | <p>This is my blog.</p>
13 | 
14 | <footer>
15 |   <p>Author: {{ author }}</p>
16 |   <p>Date: {{ page.date | localeDateString }}</p>
17 |   <p>Tags: {{ tags }}</p>
18 | </footer>


--------------------------------------------------------------------------------
/src/blog/2020-01-13-post-number-six.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Post number six
 3 | author: Janet Doe
 4 | tags:
 5 |   - tailwindcss
 6 | ---
 7 | 
 8 | <header>
 9 |   <h1>{{ title }}</h1>
10 | </header>
11 | 
12 | <p>This is my blog.</p>
13 | 
14 | <footer>
15 |   <p>Author: {{ author }}</p>
16 |   <p>Date: {{ page.date | localeDateString }}</p>
17 |   <p>Tags: {{ tags }}</p>
18 | </footer>


--------------------------------------------------------------------------------
/src/blog/2020-01-15-post-number-seven.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Post number seven
 3 | author: Janine Doe
 4 | tags:
 5 |   - github-actions
 6 | ---
 7 | 
 8 | <header>
 9 |   <h1>{{ title }}</h1>
10 | </header>
11 | 
12 | <p>This is my blog.</p>
13 | 
14 | <footer>
15 |   <p>Author: {{ author }}</p>
16 |   <p>Date: {{ page.date | localeDateString }}</p>
17 |   <p>Tags: {{ tags }}</p>
18 | </footer>


--------------------------------------------------------------------------------
/www/blog/2020-01-10-post-number-five/index.html:
--------------------------------------------------------------------------------
 1 | <header>
 2 |   <h1>Post number five</h1>
 3 | </header>
 4 | 
 5 | <p>
 6 |   This is my blog. I have overwritten the content date. Instead of using the
 7 |   filename, it now uses a hardcoded date from the frontmatter.
 8 | </p>
 9 | 
10 | <footer>
11 |   <p>Author: Janie Doe</p>
12 |   <p>Date: 2020-01-14</p>
13 |   <p>Tags: ["blog","typescript"]</p>
14 | </footer>
15 | 


--------------------------------------------------------------------------------
/src/blog/2020-01-10-post-number-five.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Post number five
 3 | author: Janie Doe
 4 | tags:
 5 |   - typescript
 6 | date: 2020-01-15
 7 | ---
 8 | 
 9 | <header>
10 |   <h1>{{ title }}</h1>
11 | </header>
12 | 
13 | <p>This is my blog. I have overwritten the content date. Instead of using the filename, it now uses a hardcoded date from the frontmatter.</p>
14 | 
15 | <footer>
16 |   <p>Author: {{ author }}</p>
17 |   <p>Date: {{ page.date | localeDateString }}</p>
18 |   <p>Tags: {{ tags }}</p>
19 | </footer>


--------------------------------------------------------------------------------
/src/pages/index.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Home
 3 | pagination:
 4 |   data: collections.blogRecentByTags
 5 |   size: 3
 6 |   alias: posts
 7 | permalink: "{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber }}{% endif %}/"
 8 | ---
 9 | 
10 | <p>This is the Homepage.</p>
11 | <p>There are many like it, but this one is mine.</p>
12 | 
13 | <section>
14 |   <h2>Looping over a collection (max {{ pagination.size }} posts per page)</h2>
15 |   <ul>
16 |   {% for post in posts %}
17 |     {% include blog-summary.liquid %}
18 |   {% endfor %}
19 |   </ul>
20 | </section>
21 | 


--------------------------------------------------------------------------------
/www/1/index.html:
--------------------------------------------------------------------------------
 1 | <p>This is the Homepage.</p>
 2 | <p>There are many like it, but this one is mine.</p>
 3 | 
 4 | <section>
 5 |   <h2>Looping over a collection (max 3 posts per page)</h2>
 6 |   <ul>
 7 |     <li>
 8 |       <a href="/blog/2020-01-08-post-number-four/">Post number four</a> &mdash;
 9 |       <small>2020-01-08</small>
10 |     </li>
11 | 
12 |     <li>
13 |       <a href="/blog/2020-01-05-post-number-three/">Post number three</a>
14 |       &mdash; <small>2020-01-05</small>
15 |     </li>
16 | 
17 |     <li>
18 |       <a href="/blog/2020-01-03-post-number-two/">Post number two</a> &mdash;
19 |       <small>2020-01-03</small>
20 |     </li>
21 |   </ul>
22 | </section>
23 | 


--------------------------------------------------------------------------------
/www/index.html:
--------------------------------------------------------------------------------
 1 | <p>This is the Homepage.</p>
 2 | <p>There are many like it, but this one is mine.</p>
 3 | 
 4 | <section>
 5 |   <h2>Looping over a collection (max 3 posts per page)</h2>
 6 |   <ul>
 7 |     <li>
 8 |       <a href="/blog/2020-01-15-post-number-seven/">Post number seven</a>
 9 |       &mdash; <small>2020-01-15</small>
10 |     </li>
11 | 
12 |     <li>
13 |       <a href="/blog/2020-01-10-post-number-five/">Post number five</a> &mdash;
14 |       <small>2020-01-14</small>
15 |     </li>
16 | 
17 |     <li>
18 |       <a href="/blog/2020-01-13-post-number-six/">Post number six</a> &mdash;
19 |       <small>2020-01-13</small>
20 |     </li>
21 |   </ul>
22 | </section>
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 11ty-1587-pagination
2 | 
3 | This repo shows how you can use 11ty's [`pagination`](https://www.11ty.dev/docs/pagination/) feature in the front-matter to loop over a collection and dynamically create some archives.
4 | 
5 | The main /index.html archive page is generated from the ./src/pages/index.liquid file, which loops over the custom `blogRecentByTags` collection and displays 3 blog posts per page. The initial loop iteration over the `blogRecentByTags` collection will generate the /index.html page, while subsequent pages use the `permalink` key in the frontmatter to dynamically set the output file name to /1/index.html, /2/index.html; where /1/ and /2/ are the current value of `pagination.pageNumber`.
6 | 
7 | The paginated archive page blog posts are displayed using `{% for post in posts %}...{% endfor %}` loop, where `posts` is the current pagination `alias` value.
8 | 


--------------------------------------------------------------------------------
/.eleventy.js:
--------------------------------------------------------------------------------
 1 | const del = require("del").sync;
 2 | 
 3 | module.exports = (eleventyConfig) => {
 4 |   // Purge the output directory before rebuiding site.
 5 |   del("./www");
 6 | 
 7 |   // Sort these custom collections by descending date (newest first).
 8 |   eleventyConfig.addCollection("blogRecentByTags", (collectionApi) => collectionApi.getFilteredByTags("blog").sort(sortDateDesc));
 9 |   eleventyConfig.addCollection("blogRecentByGlob", (collectionApi) => collectionApi.getFilteredByGlob("src/blog/*.liquid").sort(sortDateDesc));
10 | 
11 |   eleventyConfig.addFilter("localeDateString", date => new Date(date).toLocaleDateString());
12 | 
13 |   // https://www.11ty.dev/docs/data-deep-merge/
14 |   eleventyConfig.setDataDeepMerge(true);
15 | 
16 |   return {
17 |     dir: {
18 |       input: "src",
19 |       output: "www"
20 |     }
21 |   };
22 | };
23 | 
24 | function sortDateDesc(a, b) {
25 |   return b.date - a.date;
26 | }
27 | 


--------------------------------------------------------------------------------
/src/pages/debug.liquid:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Home
 3 | permalink: /debug/
 4 | ---
 5 | 
 6 | <p>This is the Homepage.</p>
 7 | <p>There are many like it, but this one is mine.</p>
 8 | 
 9 | <section>
10 |   <h2>`collections.blog` and liquidjs loop</h2>
11 |   {%- assign recentBlogs = collections.blog | reverse | slice: 0, 3 -%}
12 |   <ul>
13 |   {% for post in recentBlogs %}
14 |     {% include blog-summary.liquid %}
15 |   {% endfor %}
16 |   </ul>
17 | </section>
18 | 
19 | <hr/>
20 | 
21 | <section>
22 |   <h2>Custom `collections.blogRecentByTags` collection</h2>
23 |   <ul>
24 |   {% for post in collections.blogRecentByTags %}
25 |     {% include blog-summary.liquid %}
26 |   {% endfor %}
27 |   </ul>
28 | </section>
29 | 
30 | <hr/>
31 | 
32 | <section>
33 |   <h2>Custom `collections.blogRecentByGlob` collection</h2>
34 |   <ul>
35 |   {% for post in collections.blogRecentByGlob %}
36 |     {% include blog-summary.liquid %}
37 |   {% endfor %}
38 |   </ul>
39 | </section>
40 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "11ty-1587-pagination",
 3 |   "description": "This repo shows how you can use 11ty's `pagination` feature in the front-matter to loop over a collection and dynamically create some archives.",
 4 |   "version": "1.0.0",
 5 |   "author": "Peter deHaan <peter@deseloper.com> (https://about.me/peterdehaan)",
 6 |   "bugs": {
 7 |     "url": "https://github.com/pdehaan/11ty-1587-pagination/issues"
 8 |   },
 9 |   "dependencies": {},
10 |   "devDependencies": {
11 |     "@11ty/eleventy": "^0.11.1",
12 |     "del": "^6.0.0",
13 |     "prettier": "^2.2.1"
14 |   },
15 |   "homepage": "https://github.com/pdehaan/11ty-1587-pagination#readme",
16 |   "keywords": [],
17 |   "license": "MPL-2.0",
18 |   "main": "index.js",
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git+https://github.com/pdehaan/11ty-1587-pagination.git"
22 |   },
23 |   "scripts": {
24 |     "build": "eleventy",
25 |     "postbuild": "prettier www --write",
26 |     "test": "echo \"Error: no test specified\" && exit 1"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/www/debug/index.html:
--------------------------------------------------------------------------------
  1 | <p>This is the Homepage.</p>
  2 | <p>There are many like it, but this one is mine.</p>
  3 | 
  4 | <section>
  5 |   <h2>`collections.blog` and liquidjs loop</h2>
  6 |   <ul>
  7 |     <li>
  8 |       <a href="/blog/2020-01-15-post-number-seven/">Post number seven</a>
  9 |       &mdash; <small>2020-01-15</small>
 10 |     </li>
 11 | 
 12 |     <li>
 13 |       <a href="/blog/2020-01-10-post-number-five/">Post number five</a> &mdash;
 14 |       <small>2020-01-14</small>
 15 |     </li>
 16 | 
 17 |     <li>
 18 |       <a href="/blog/2020-01-13-post-number-six/">Post number six</a> &mdash;
 19 |       <small>2020-01-13</small>
 20 |     </li>
 21 |   </ul>
 22 | </section>
 23 | 
 24 | <hr />
 25 | 
 26 | <section>
 27 |   <h2>Custom `collections.blogRecentByTags` collection</h2>
 28 |   <ul>
 29 |     <li>
 30 |       <a href="/blog/2020-01-15-post-number-seven/">Post number seven</a>
 31 |       &mdash; <small>2020-01-15</small>
 32 |     </li>
 33 | 
 34 |     <li>
 35 |       <a href="/blog/2020-01-10-post-number-five/">Post number five</a> &mdash;
 36 |       <small>2020-01-14</small>
 37 |     </li>
 38 | 
 39 |     <li>
 40 |       <a href="/blog/2020-01-13-post-number-six/">Post number six</a> &mdash;
 41 |       <small>2020-01-13</small>
 42 |     </li>
 43 | 
 44 |     <li>
 45 |       <a href="/blog/2020-01-08-post-number-four/">Post number four</a> &mdash;
 46 |       <small>2020-01-08</small>
 47 |     </li>
 48 | 
 49 |     <li>
 50 |       <a href="/blog/2020-01-05-post-number-three/">Post number three</a>
 51 |       &mdash; <small>2020-01-05</small>
 52 |     </li>
 53 | 
 54 |     <li>
 55 |       <a href="/blog/2020-01-03-post-number-two/">Post number two</a> &mdash;
 56 |       <small>2020-01-03</small>
 57 |     </li>
 58 | 
 59 |     <li>
 60 |       <a href="/blog/2020-01-01-post-number-one/">Post number one</a> &mdash;
 61 |       <small>2020-01-01</small>
 62 |     </li>
 63 |   </ul>
 64 | </section>
 65 | 
 66 | <hr />
 67 | 
 68 | <section>
 69 |   <h2>Custom `collections.blogRecentByGlob` collection</h2>
 70 |   <ul>
 71 |     <li>
 72 |       <a href="/blog/2020-01-15-post-number-seven/">Post number seven</a>
 73 |       &mdash; <small>2020-01-15</small>
 74 |     </li>
 75 | 
 76 |     <li>
 77 |       <a href="/blog/2020-01-10-post-number-five/">Post number five</a> &mdash;
 78 |       <small>2020-01-14</small>
 79 |     </li>
 80 | 
 81 |     <li>
 82 |       <a href="/blog/2020-01-13-post-number-six/">Post number six</a> &mdash;
 83 |       <small>2020-01-13</small>
 84 |     </li>
 85 | 
 86 |     <li>
 87 |       <a href="/blog/2020-01-08-post-number-four/">Post number four</a> &mdash;
 88 |       <small>2020-01-08</small>
 89 |     </li>
 90 | 
 91 |     <li>
 92 |       <a href="/blog/2020-01-05-post-number-three/">Post number three</a>
 93 |       &mdash; <small>2020-01-05</small>
 94 |     </li>
 95 | 
 96 |     <li>
 97 |       <a href="/blog/2020-01-03-post-number-two/">Post number two</a> &mdash;
 98 |       <small>2020-01-03</small>
 99 |     </li>
100 | 
101 |     <li>
102 |       <a href="/blog/2020-01-01-post-number-one/">Post number one</a> &mdash;
103 |       <small>2020-01-01</small>
104 |     </li>
105 |   </ul>
106 | </section>
107 | 


--------------------------------------------------------------------------------