Pagination ESM docs 11ty/eleventy#836

src/_includes/snippets/pagination/alias-size.njk

@@ -0,0 +1,115 @@
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs persist sync class="tabs-flush">
+  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "pagedchunk"} %}
+  <div id="pagedchunk-liquid" role="tabpanel">
+
+{% raw %}
+
+```liquid
+---
+pagination:
+  data: testdata
+  size: 2
+  alias: wonder
+testdata:
+  - Item1
+  - Item2
+  - Item3
+  - Item4
+permalink: "different/{{ wonder[0] | slugify }}/index.html"
+---
+You can use the alias in your content too {{ wonder[0] }}.
+```
+
+{% endraw %}
+
+  </div>
+  <div id="pagedchunk-njk" role="tabpanel">
+
+{% raw %}
+
+```jinja2
+---
+pagination:
+  data: testdata
+  size: 2
+  alias: wonder
+testdata:
+  - Item1
+  - Item2
+  - Item3
+  - Item4
+permalink: "different/{{ wonder[0] | slugify }}/index.html"
+---
+You can use the alias in your content too {{ wonder[0] }}.
+```
+
+{% endraw %}
+
+  </div>
+  <div id="pagedchunk-js" role="tabpanel">
+
+{% raw %}
+
+```js
+export const data = {
+  pagination: {
+    data: "testdata",
+    size: 2,
+    alias: "wonder"
+  },
+  testdata: [
+    "Item1",
+    "Item2",
+    "Item3",
+    "Item4"
+  ],
+  permalink: {
+    function(data) {
+      return `different/${this.slugify(data.wonder[0])}/index.html`
+    };
+  }
+};
+
+export function render(data) {
+  return `You can use the alias in your content too ${data.wonder[0]}.`;
+}
+```
+
+{% endraw %}
+
+  </div>
+	<div id="pagedchunk-cjs" role="tabpanel">
+
+{% raw %}
+
+```js
+exports.data = {
+  pagination: {
+    data: "testdata",
+    size: 2,
+    alias: "wonder"
+  },
+  testdata: [
+    "Item1",
+    "Item2",
+    "Item3",
+    "Item4"
+  ],
+  permalink: {
+    function(data) {
+      return `different/${this.slugify(data.wonder[0])}/index.html`
+    };
+  }
+};
+
+exports.render = function (data) {
+  return `You can use the alias in your content too ${data.wonder[0]}.`;
+}
+```
+
+{% endraw %}
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/pagination/alias.njk

@@ -0,0 +1,97 @@
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs persist sync class="tabs-flush">
+  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "pagedalias"} %}
+  <div id="pagedalias-liquid" role="tabpanel">
+
+{% raw %}
+
+```liquid
+---
+pagination:
+  data: testdata
+  size: 1
+  alias: wonder
+testdata:
+  - Item1
+  - Item2
+permalink: "different/{{ wonder | slugify }}/index.html"
+---
+You can use the alias in your content too {{ wonder }}.
+```
+
+{% endraw %}
+
+  </div>
+  <div id="pagedalias-njk" role="tabpanel">
+
+{% raw %}
+
+```jinja2
+---
+pagination:
+  data: testdata
+  size: 1
+  alias: wonder
+testdata:
+  - Item1
+  - Item2
+permalink: "different/{{ wonder | slugify }}/index.html"
+---
+You can use the alias in your content too {{ wonder }}.
+```
+
+{% endraw %}
+
+  </div>
+  <div id="pagedalias-js" role="tabpanel">
+
+{% raw %}
+
+```js
+export const data = {
+	pagination: {
+		data: "testdata",
+		size: 1,
+		alias: "wonder",
+	},
+	testdata: ["Item1", "Item2"],
+	permalink: function (data) {
+		return `different/${this.slugify(data.wonder)}/index.html`;
+	},
+};
+
+export function render(data) {
+	return `You can use the alias in your content too ${data.wonder}.`;
+};
+```
+
+{% endraw %}
+
+  </div>
+	<div id="pagedalias-cjs" role="tabpanel">
+
+{% raw %}
+
+```js
+exports.data = {
+	pagination: {
+		data: "testdata",
+		size: 1,
+		alias: "wonder",
+	},
+	testdata: ["Item1", "Item2"],
+	permalink: function (data) {
+		return `different/${this.slugify(data.wonder)}/index.html`;
+	},
+};
+
+exports.render = function (data) {
+	return `You can use the alias in your content too ${data.wonder}.`;
+};
+```
+
+{% endraw %}
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/pagination/collection.njk

@@ -0,0 +1,107 @@
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs persist sync class="tabs-flush">
+  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: "pagedcollection"} %}
+  <div id="pagedcollection-liquid" role="tabpanel">
+
+{% raw %}
+
+```liquid
+---
+title: My Posts
+pagination:
+  data: collections.post
+  size: 6
+  alias: posts
+---
+
+<ol>
+{% for post in posts %}
+  <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
+{% endfor %}
+</ol>
+```
+
+{% endraw %}
+
+  </div>
+  <div id="pagedcollection-njk" role="tabpanel">
+
+{% raw %}
+
+```jinja2
+---
+title: My Posts
+pagination:
+  data: collections.post
+  size: 6
+  alias: posts
+---
+
+<ol>
+{% for post in posts %}
+  <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
+{% endfor %}
+</ol>
+```
+
+{% endraw %}
+
+  </div>
+  <div id="pagedcollection-js" role="tabpanel">
+
+{% raw %}
+
+```js
+export const data = {
+	title: "My Posts",
+	pagination: {
+		data: "collections.post",
+		size: 6,
+		alias: "posts",
+	},
+};
+
+export function render(data) {
+	return `<ol>
+		${data.posts
+			.map(function (post) {
+				return `<li><a href="${post.url}">${post.title}</a></li>`;
+			})
+			.join("")}
+	</ol>`;
+};
+```
+
+{% endraw %}
+
+  </div>
+	<div id="pagedcollection-cjs" role="tabpanel">
+
+{% raw %}
+
+```js
+exports.data = {
+	title: "My Posts",
+	pagination: {
+		data: "collections.post",
+		size: 6,
+		alias: "posts",
+	},
+};
+
+exports.render = function (data) {
+	return `<ol>
+		${data.posts
+			.map(function (post) {
+				return `<li><a href="${post.url}">${post.title}</a></li>`;
+			})
+			.join("")}
+	</ol>`;
+};
+```
+
+{% endraw %}
+
+  </div>
+</seven-minute-tabs>
+</is-land>

src/_includes/snippets/pagination/paged-array.cjs

@@ -0,0 +1,23 @@
+{% raw %}
+exports.data = {
+  pagination: {
+    data: "testdata",
+    size: 2
+  },
+  testdata: [
+    "item1",
+    "item2",
+    "item3",
+    "item4"
+  ]
+};
+
+exports.render = function(data) {
+  return `<ol>
+    ${data.pagination.items.map(function(item) {
+        return `<li>${item}</li>`;
+      }).join("")
+    }
+  </ol>`;
+};
+{% endraw %}

src/_includes/snippets/pagination/paged-array.js

@@ -1,5 +1,5 @@
 {% raw %}
-exports.data = {
+export const data = {
   pagination: {
     data: "testdata",
     size: 2
@@ -12,7 +12,7 @@ exports.data = {
   ]
 };
 
-exports.render = function(data) {
+export function render(data) {
   return `<ol>
     ${data.pagination.items.map(function(item) {
         return `<li>${item}</li>`;