{"id":18584283,"url":"https://github.com/brob/eleventy-plugin-dynamic-categories","last_synced_at":"2025-07-02T19:33:09.370Z","repository":{"id":140975951,"uuid":"536276972","full_name":"brob/eleventy-plugin-dynamic-categories","owner":"brob","description":"An 11ty plugin to dynamically generate categories of posts as well as pagination for those categories","archived":false,"fork":false,"pushed_at":"2023-06-04T01:02:04.000Z","size":173,"stargazers_count":19,"open_issues_count":8,"forks_count":2,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-04-11T00:35:15.058Z","etag":null,"topics":["11ty","11ty-plugin","eleventy-plugin","hacktoberfest","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brob.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-13T19:20:39.000Z","updated_at":"2025-04-10T07:28:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"2bdb7d5a-331f-406a-872c-0d414ef8cbf5","html_url":"https://github.com/brob/eleventy-plugin-dynamic-categories","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/brob/eleventy-plugin-dynamic-categories","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-dynamic-categories","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-dynamic-categories/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-dynamic-categories/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-dynamic-categories/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brob","download_url":"https://codeload.github.com/brob/eleventy-plugin-dynamic-categories/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brob%2Feleventy-plugin-dynamic-categories/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263203504,"owners_count":23430046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty","11ty-plugin","eleventy-plugin","hacktoberfest","javascript"],"created_at":"2024-11-07T00:26:59.830Z","updated_at":"2025-07-02T19:33:09.352Z","avatar_url":"https://github.com/brob.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Eleventy Dynamic Categories\n\nThis plugin is super alpha! \n\nThis plugin will accept a category name and a collection name and create data that can be used to create or display category lists for content.\n\nIt creates two collections. One is named either the `categoryVar` or `categoryCollection` configuration string. This has all posts in the category. The other is named that same string with `ByPage` appended to create a category collection that is paginated.\n\nExample:\n\nWhen you initialize with a `categoryVar` or `categoryCollection` of `categories`, the plugin will create two collections: `categories` and `categoriesByPage`. ``categories` is a collection where each item has the following data:\n\n```js\n{\n    \"title\": \"Category Name\",\n    \"slug\": \"category-name\",\n    \"posts\": [ /* full array of posts in the category */ ]\n}\n```\n\nThis is great for simple loops or for categories with small amounts of content.\n\nYou also get `categoriesByPage` which allows you to use 11ty's Pagination functionality to go deeper and paginate posts per category, as well, with more data and helper functions. Each category page has the following information (required for making the pages)\n\n```js\n{\n    \"title\": \"Category Name\",\n    \"slug\": \"category-name\",\n    \"posts\": [ /* array of posts in the category on this page */ ],\n    \"permalinkScheme\": \"category-name/:num/\",\n    \"totalPages\": 4,\n    \"pages\": {\n        \"current\": 1,\n        \"next\": 2,\n        \"previous\": false // (or num)\n    }\n}\n\n```\nThis is pretty abstract. There are examples below that should hopefully clarify.\n\n## Installation\n\nInstall the plugin with \n\n```sh\nnpm install eleventy-plugin-dynamic-categories\n```\n### Configure\n\nAdd the plugin to your `.eleventy.js` config file. Provide the plugin with the name of the variable that you use in your frontmatter to assign categories to your content. Use `itemsCollection` to specify the key for which collection you want to use.\n\n|property|description|type|default|\n|---|---|---|---|\n|`categoryVar`|The name of the variable in your frontmatter that you use to assign categories to your content.|`string`|`categories`|\n|`itemsCollection`|The name of the collection you want to categorize.|`string`|`posts`|\n|`perPageCount`|The number of items to display per page.|`int`|`5`|\n|`categoryCollection`|The name of the collection that will be created by the plugin (must be unique).|`string`|`categories`|\n\n\n```js\nconst dynamicCategories = require('eleventy-plugin-dynamic-categories');\n\nmodule.exports = function(eleventyConfig) {\n    eleventyConfig.addPlugin(dynamicCategories, {\n        categoryVar: \"categories\", // Name of your category variable from your frontmatter (default: categories)\n        itemsCollection: \"posts\", // Name of your collection to use for the items (default: posts)\n        categoryCollection: \"categories\", // Name of the new collection to use for the categories (default: value in categoryVar)\n        // categoryCollection MUST be unique currently\n        perPageCount: 5 // Number of items to display per page of categoriesByPage (default: 5)\n    })\n}\n```\n\n## Build or loop through your categories\n\nThe plugin creates a data structure of an array of categories that contain a title (based on the string for each category), a slug to be used for URLs (slugified from the category name), and an array of items that are assigned to that category. The data is stored as an 11ty Collection with the key of the `categoryVar` you specified or overridden by the `categoryCollection` you specified. The collection name must be unique.\n\n\n### Usage for pagination:\n\n```html\n---\npagination:\n    data: collections.categories\n    alias: category\n    size: 1\npermalink: /blog/category/{{ category.slug }}/\n---\n\n{% for post in category.posts %}\n\u003cli\u003e\n    \u003ca href=\"{{ post.url }}\"\u003e{{ post.data.title }}\u003c/a\u003e\n\u003c/li\u003e\n{% endfor %}\n```\n\n### Usage for a loop: \n\n```html\n\u003ch1\u003eCategories\u003c/h1\u003e\n{% for category in collections.categories %}\n    \u003cdiv\u003e\n        \u003ch2\u003e\u003ca href=\"/blog/category/{{category.slug}}/\"\u003e{{ category.title }}\u003c/a\u003e\u003c/h2\u003e\n        \u003cul\u003e\n            {% for post in category.posts %}\n                \u003ch3\u003e{{ post.data.title }}\u003c/h3\u003e\n            {% endfor %}\n        \u003c/ul\u003e\n    \u003c/div\u003e\n{% endfor %}\n```\n\n## Paginated Category template example\n\n```html\n---\nlayout: base.html\n# Default permalink scheme (still able to be customized)\npermalink: /posts/{{category.permalinkScheme}}\npagination:\n  data: collections.categoriesByPage\n  size: 1\n  alias: category\n  addAllPagesToCollections: true\neleventyComputed:\n  title: Blog entries with category \u0026quot;{{ category.slug }}\u0026quot; {% if tcategoryag.pageNumber \u003e 0 %}, (Page {{ category.pageNumber + 1 }}) {% endif %}\n---\n\n{% for post in category.posts %}\n\u003cli\u003e\n    \u003ca href=\"{{post.url}}\"\u003e{{ post.data.title }} yo\u003c/a\u003e\n\u003c/li\u003e\n{% endfor %}\n\n\n{# This can still be customized, but then there's markup for basic pagination #}\n{% pagination category %}\n```\n\n\n## Multiple Category usage\nIf you need to create multiple categories out of multiple collections, you can add the plugin multiple times with different configruations.\n\n```js\nconst dynamicCategories = require('eleventy-plugin-dynamic-categories');\n\nmodule.exports = function(eleventyConfig) {\n    eleventyConfig.addPlugin(dynamicCategories, {\n        categoryVar: \"categories\", // Name of your category variable from your frontmatter (default: categories)\n        itemsCollection: \"posts\", // Name of your collection to use for the items (default: posts)\n        categoryCollection: \"categories\" // Name of the new collection to use for the categories (default: value in categoryVar)\n        // categoryCollection MUST be unique currently\n    })\n    eleventyConfig.addPlugin(dynamicCategories, {\n        categoryVar: \"categories2\", // Name of your category variable from your frontmatter (default: categories)\n        itemsCollection: \"posts\", // Name of your collection to use for the items (default: posts)\n        categoryCollection: \"categories2\" // Name of the new collection to use for the categories (default: value in categoryVar)\n        // categoryCollection MUST be unique currently\n    })\n}\n```\n\n## Pagination template tag\nThe pagination template tag is a helper tag that generates markup for basic pagination to save template overhead. It accepts the page information from the pagination item (usually aliased to something like `category`).\n\nFor each page, this will generate pagination that includes next and previous links as well as a list of page numbers. The current page will be styled as active.\n\n### Usage\n```html\n{% pagination category %}\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrob%2Feleventy-plugin-dynamic-categories","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrob%2Feleventy-plugin-dynamic-categories","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrob%2Feleventy-plugin-dynamic-categories/lists"}