ESM docs for collections 11ty/eleventy#836

11ty · Sep 24, 2024 · 8f1405f · 8f1405f
1 parent 97637de
commit 8f1405f
Show file tree

Hide file tree

Showing 20 changed files with 1,014 additions and 597 deletions.
diff --git a/src/_includes/snippets/collections/add.njk b/src/_includes/snippets/collections/add.njk
@@ -0,0 +1,33 @@
+{%- set tabid = "collections-add" %}
+<div class="codetitle codetitle-right-md">eleventy.config.js</div>
+<is-land on:visible import="/js/seven-minute-tabs.js">
+<seven-minute-tabs class="tabs-flush" persist sync>
+  {% renderFile "./src/_includes/syntax-chooser-tablist.11ty.js", {id: tabid, only: "jsesm,jscjs"} %}
+  <div id="{{ tabid }}-jsesm" role="tabpanel">
+
+```js
+export default function (eleventyConfig) {
+	// async-friendly
+	eleventyConfig.addCollection("myCollectionName", async (collectionsApi) => {
+		// get unsorted items
+		return collectionsApi.getAll();
+	});
+};
+```
+
+  </div>
+  <div id="{{ tabid }}-jscjs" role="tabpanel">
+
+```js
+module.exports = function (eleventyConfig) {
+	// async-friendly
+	eleventyConfig.addCollection("myCollectionName", async (collectionsApi) => {
+		// get unsorted items
+		return collectionsApi.getAll();
+	});
+};
+```
+
+  </div>
+</seven-minute-tabs>
+</is-land>
diff --git a/src/_includes/snippets/collections/all.njk b/src/_includes/snippets/collections/all.njk
@@ -0,0 +1,69 @@
+<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: "collectionsall"} %}
+  <div id="collectionsall-liquid" role="tabpanel">
+
+{% raw %}
+
+```liquid
+<ul>
+{%- for post in collections.all -%}
+  <li><a href="{{ post.url }}">{{ post.url }}</a></li>
+{%- endfor -%}
+</ul>
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collectionsall-njk" role="tabpanel">
+
+{% raw %}
+
+```jinja2
+<ul>
+{%- for post in collections.all -%}
+  <li><a href="{{ post.url }}">{{ post.url }}</a></li>
+{%- endfor -%}
+</ul>
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collectionsall-js" role="tabpanel">
+
+{% raw %}
+
+```js
+export function render(data) {
+  return `<ul>
+    ${data.collections.all
+      .map((post) => `<li><a href="${post.url}">${post.url}</a></li>`)
+      .join("\n")}
+  </ul>`;
+};
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collectionsall-cjs" role="tabpanel">
+
+{% raw %}
+
+```js
+exports.render = function (data) {
+  return `<ul>
+    ${data.collections.all
+      .map((post) => `<li><a href="${post.url}">${post.url}</a></li>`)
+      .join("\n")}
+  </ul>`;
+};
+```
+
+{% endraw %}
+
+  </div>
+</seven-minute-tabs>
+</is-land>
diff --git a/src/_includes/snippets/collections/aria.njk b/src/_includes/snippets/collections/aria.njk
@@ -0,0 +1,79 @@
+<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: "collectionsnav"} %}
+  <div id="collectionsnav-liquid" role="tabpanel">
+
+{% raw %}
+
+```liquid
+<ul>
+{%- for post in collections.post -%}
+  <li{% if page.url == post.url %} aria-current="page"{% endif %}>{{ post.data.title }}</li>
+{%- endfor -%}
+</ul>
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collectionsnav-njk" role="tabpanel">
+
+{% raw %}
+
+```jinja2
+<ul>
+{%- for post in collections.post -%}
+  <li{% if page.url == post.url %} aria-current="page"{% endif %}>{{ post.data.title }}</li>
+{%- endfor -%}
+</ul>
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collectionsnav-js" role="tabpanel">
+
+{% raw %}
+
+```js
+export function render(data) {
+	return `<ul>
+    ${data.collections.post
+			.map(
+				(post) =>
+					`<li${data.page.url === post.url ? ` aria-current="page"` : ""}>${
+						post.data.title
+					}</li>`
+			)
+			.join("\n")}
+  </ul>`;
+};
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collectionsnav-cjs" role="tabpanel">
+
+{% raw %}
+
+```js
+exports.render = function (data) {
+	return `<ul>
+    ${data.collections.post
+			.map(
+				(post) =>
+					`<li${data.page.url === post.url ? ` aria-current="page"` : ""}>${
+						post.data.title
+					}</li>`
+			)
+			.join("\n")}
+  </ul>`;
+};
+```
+
+{% endraw %}
+
+  </div>
+</seven-minute-tabs>
+</is-land>
diff --git a/src/_includes/snippets/collections/blog.njk b/src/_includes/snippets/collections/blog.njk
@@ -0,0 +1,69 @@
+<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: "collections"} %}
+  <div id="collections-liquid" role="tabpanel">
+
+{% raw %}
+
+```liquid
+<ul>
+{%- for post in collections.post -%}
+  <li>{{ post.data.title }}</li>
+{%- endfor -%}
+</ul>
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collections-njk" role="tabpanel">
+
+{% raw %}
+
+```jinja2
+<ul>
+{%- for post in collections.post -%}
+  <li>{{ post.data.title }}</li>
+{%- endfor -%}
+</ul>
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collections-js" role="tabpanel">
+
+{% raw %}
+
+```js
+export function render(data) {
+  return `<ul>
+    ${data.collections.post
+      .map((post) => `<li>${post.data.title}</li>`)
+      .join("\n")}
+  </ul>`;
+};
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collections-cjs" role="tabpanel">
+
+{% raw %}
+
+```js
+exports.render = function (data) {
+  return `<ul>
+    ${data.collections.post
+      .map((post) => `<li>${post.data.title}</li>`)
+      .join("\n")}
+  </ul>`;
+};
+```
+
+{% endraw %}
+
+  </div>
+</seven-minute-tabs>
+</is-land>
diff --git a/src/_includes/snippets/collections/dashes.njk b/src/_includes/snippets/collections/dashes.njk
@@ -0,0 +1,69 @@
+<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: "collections-dashwarn"} %}
+  <div id="collections-dashwarn-liquid" role="tabpanel">
+
+{% raw %}
+
+```liquid
+<ul>
+{%- for post in collections.post-with-dash -%}
+  <li>{{ post.data.title }}</li>
+{%- endfor -%}
+</ul>
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collections-dashwarn-njk" role="tabpanel">
+
+{% raw %}
+
+```jinja2
+<ul>
+{%- for post in collections['post-with-dash'] -%}
+  <li>{{ post.data.title }}</li>
+{%- endfor -%}
+</ul>
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collections-dashwarn-js" role="tabpanel">
+
+{% raw %}
+
+```js
+export function render(data) {
+  return `<ul>
+    ${data.collections['post-with-dash']
+      .map((post) => `<li>${post.data.title}</li>`)
+      .join("\n")}
+  </ul>`;
+};
+```
+
+{% endraw %}
+
+  </div>
+  <div id="collections-dashwarn-cjs" role="tabpanel">
+
+{% raw %}
+
+```js
+exports.render = function (data) {
+  return `<ul>
+    ${data.collections['post-with-dash']
+      .map((post) => `<li>${post.data.title}</li>`)
+      .join("\n")}
+  </ul>`;
+};
+```
+
+{% endraw %}
+
+  </div>
+</seven-minute-tabs>
+</is-land>