Pagination Navigation ESM docs 11ty/eleventy#836

src/_includes/snippets/pagination/nav-array.njk

@@ -0,0 +1,57 @@
+<is-land import="/js/seven-minute-tabs.js">
+<seven-minute-tabs class="tabs-flush">
+ {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "paginationnavarray"} %}
+ <div id="paginationnavarray-liquid" role="tabpanel">
+
+{% raw %}
+
+```liquid
+---
+pagination:
+ data: testdata
+ size: 2
+testdata:
+ - item1
+ - item2
+ - item3
+ - item4
+ - item5
+ - item6
+---
+{% comment %}pagination.items has the data for the current page{% endcomment %}
+```
+
+{% endraw %}
+
+ </div>
+ <div id="paginationnavarray-njk" role="tabpanel">
+
+{% raw %}
+
+```jinja2
+---
+pagination:
+ data: testdata
+ size: 2
+testdata:
+ - item1
+ - item2
+ - item3
+ - item4
+ - item5
+ - item6
+---
+{# pagination.items has the data for the current page #}
+```
+
+{% endraw %}
+
+ </div>
+ <div id="paginationnavarray-js" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+ <div id="paginationnavarray-cjs" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/pagination/nav/combined.cjs

@@ -0,0 +1,16 @@
+{% raw %}
+exports.render = function(data) {
+ return `<nav aria-labelledby="my-pagination">
+ <h2 id="my-pagination">This is my Pagination</h2>
+ <ol>
+ <li>${data.page.url === data.pagination.href.first ? `<a href="${data.pagination.href.first}">First</a>` : `First`}</li>
+ <li>${data.pagination.href.previous ? `<a href="${data.pagination.href.previous}">Previous</a>` : `Previous`}</li>
+ ${data.pagination.pages.map(function (item, index) {
+ return `<li><a href="${data.pagination.hrefs[index]}" ${data.pagination.hrefs[index] ? 'aria-current="page"' : "" }>Page ${index + 1}</a></li>`;
+ }).join("")}
+ <li>${data.pagination.href.next ? `<a href="${data.pagination.href.next}">Next</a>` : `Next`}</li>
+ <li>${data.page.url === data.pagination.href.last ? `<a href="${data.pagination.href.last}">Last</a>` : `Last`}</li>
+ </ol>
+ </nav>`;
+};
+{% endraw %}

src/_includes/snippets/pagination/nav/combined.js

@@ -1,5 +1,5 @@
 {% raw %}
-exports.render = function(data) {
+export function render(data) {
  return `<nav aria-labelledby="my-pagination">
  <h2 id="my-pagination">This is my Pagination</h2>
  <ol>
@@ -13,4 +13,4 @@ exports.render = function(data) {
  </ol>
  </nav>`;
 };
-{% endraw %}
+{% endraw %}

src/_includes/snippets/pagination/nav/firstlast.cjs

@@ -0,0 +1,14 @@
+{% raw %}
+exports.render = function(data) {
+ return `<nav aria-labelledby="my-pagination">
+ <h2 id="my-pagination">This is my Pagination</h2>
+ <ol>
+ <li>${data.page.url === data.pagination.href.first ? `<a href="${data.pagination.href.first}">First</a>` : `First`}</li>
+ ${data.pagination.pages.map(function (item, index) {
+ return `<li><a href="${data.pagination.hrefs[index]}" ${data.pagination.hrefs[index] ? 'aria-current="page"' : "" }>Page ${index + 1}</a></li>`;
+ }).join("");}
+ <li>${data.page.url === data.pagination.href.last ? `<a href="${data.pagination.href.last}">Last</a>` : `Last`}</li>
+ </ol>
+ </nav>`;
+};
+{% endraw %}

src/_includes/snippets/pagination/nav/firstlast.js

@@ -1,5 +1,5 @@
 {% raw %}
-exports.render = function(data) {
+export function render(data) {
  return `<nav aria-labelledby="my-pagination">
  <h2 id="my-pagination">This is my Pagination</h2>
  <ol>
@@ -11,4 +11,4 @@ exports.render = function(data) {
  </ol>
  </nav>`;
 };
-{% endraw %}
+{% endraw %}

src/_includes/snippets/pagination/nav/nextprev.cjs

@@ -0,0 +1,14 @@
+{% raw %}
+exports.render = function(data) {
+ return `<nav aria-labelledby="my-pagination">
+ <h2 id="my-pagination">This is my Pagination</h2>
+ <ol>
+ <li>${data.pagination.href.previous ? `<a href="${data.pagination.href.previous}">Previous</a>` : `Previous`}</li>
+ ${data.pagination.pages.map(function (item, index) {
+ return `<li><a href="${data.pagination.hrefs[index]}" ${data.pagination.hrefs[index] ? 'aria-current="page"' : "" }>Page ${index + 1}</a></li>`;
+ }).join("");}
+ <li>${data.pagination.href.next ? `<a href="${data.pagination.href.next}">Next</a>` : `Next`}</li>
+ </ol>
+ </nav>`;
+};
+{% endraw %}

src/_includes/snippets/pagination/nav/nextprev.js

@@ -1,5 +1,5 @@
 {% raw %}
-exports.render = function(data) {
+export function render(data) {
  return `<nav aria-labelledby="my-pagination">
  <h2 id="my-pagination">This is my Pagination</h2>
  <ol>
@@ -11,4 +11,4 @@ exports.render = function(data) {
  </ol>
  </nav>`;
 };
-{% endraw %}
+{% endraw %}

src/_includes/snippets/pagination/nav/starter.cjs

@@ -0,0 +1,12 @@
+{% raw %}
+exports.render = function(data) {
+ return `<nav aria-labelledby="my-pagination">
+ <h2 id="my-pagination">This is my Pagination</h2>
+ <ol>
+ ${data.pagination.pages.map(function (item, index) {
+ return `<li><a href="${data.pagination.hrefs[index]}" ${data.pagination.hrefs[index] ? 'aria-current="page"' : "" }>Page ${index + 1}</a></li>`;
+ }).join("");}
+ </ol>
+ </nav>`;
+};
+{% endraw %}

src/_includes/snippets/pagination/nav/starter.js

@@ -1,5 +1,5 @@
 {% raw %}
-exports.render = function(data) {
+export function render(data) {
  return `<nav aria-labelledby="my-pagination">
  <h2 id="my-pagination">This is my Pagination</h2>
  <ol>
@@ -8,5 +8,5 @@ exports.render = function(data) {
  }).join("");}
  </ol>
  </nav>`;
-};
-{% endraw %}
+}
+{% endraw %}

src/_includes/snippets/pagination/object-lit.njk

@@ -0,0 +1,26 @@
+<seven-minute-tabs class="tabs-flush">
+ {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "pagenavobjectlit", valid: "njk"} %}
+ <div id="pagenavobjectlit-liquid" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+ <div id="pagenavobjectlit-njk" role="tabpanel">
+
+{% raw %}
+
+```jinja2
+<!-- Don’t copy this code, it’s been simplified for clarity -->
+{% for pageKey in pagination.pages %}
+<a href="{{ pagination.hrefs[ loop.index0 ] }}">Page {{ loop.index }}</a>
+{% endfor %}
+```
+
+{% endraw %}
+
+ </div>
+ <div id="pagenavobjectlit-js" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+ <div id="pagenavobjectlit-cjs" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+</seven-minute-tabs>

src/_includes/snippets/pagination/original.njk

@@ -0,0 +1,24 @@
+<seven-minute-tabs class="tabs-flush">
+ {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "pagenavorig", valid: "njk"} %}
+ <div id="pagenavorig-liquid" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+ <div id="pagenavorig-njk" role="tabpanel">
+
+{% raw %}
+```jinja2
+<!-- Don’t copy this code, it’s been simplified for clarity -->
+{% for pageEntry in pagination.pages %}
+<a href="{{ pagination.hrefs[ loop.index0 ] }}">Page {{ loop.index }}</a>
+{% endfor %}
+```
+{% endraw %}
+
+ </div>
+ <div id="pagenavorig-js" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+ <div id="pagenavorig-cjs" role="tabpanel">
+ <p><em>This example has not yet been added—you can swap to another template language above! Or maybe you want to contribute it? {% include "edit-on-github.njk" %}</em></p>
+ </div>
+</seven-minute-tabs>