{"id":15538937,"url":"https://github.com/weirdpattern/gatsby-remark-series","last_synced_at":"2025-04-23T15:43:14.427Z","repository":{"id":34479991,"uuid":"176874757","full_name":"weirdpattern/gatsby-remark-series","owner":"weirdpattern","description":"Gatsby remark table of content generator for series","archived":false,"fork":false,"pushed_at":"2023-01-03T18:16:58.000Z","size":2105,"stargazers_count":4,"open_issues_count":14,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-09T12:42:44.279Z","etag":null,"topics":["gatsby","gatsby-plugin","gatsby-remark","gatsbyjs","plugin","remark","series","table-of-contents","toc"],"latest_commit_sha":null,"homepage":null,"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/weirdpattern.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-21T05:16:12.000Z","updated_at":"2020-05-06T16:32:10.000Z","dependencies_parsed_at":"2023-01-15T07:30:45.091Z","dependency_job_id":null,"html_url":"https://github.com/weirdpattern/gatsby-remark-series","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weirdpattern%2Fgatsby-remark-series","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weirdpattern%2Fgatsby-remark-series/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weirdpattern%2Fgatsby-remark-series/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weirdpattern%2Fgatsby-remark-series/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weirdpattern","download_url":"https://codeload.github.com/weirdpattern/gatsby-remark-series/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250462723,"owners_count":21434651,"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":["gatsby","gatsby-plugin","gatsby-remark","gatsbyjs","plugin","remark","series","table-of-contents","toc"],"created_at":"2024-10-02T12:08:01.301Z","updated_at":"2025-04-23T15:43:14.382Z","avatar_url":"https://github.com/weirdpattern.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-remark-series\n\nThis plugin dynamically creates and updates table of content (toc) for all\narticles in a series.\n\n## Installation\n\n`yarn add gatsby-remark-series`\n\n## Usage\n\nIn your gatsby-config.js file\n\n```javascript\n{\n  resolve: \"gatsby-transformer-remark\",\n  options: {\n    plugins: [\n      {\n        resolve: \"gatsby-remark-series\",\n        options: {\n          render: {\n            // The location where the toc should be rendered.\n            // Default: bottom\n            // Optional\n            placeholder: \"both\" | \"top\" | \"bottom\" | string,\n\n            // Provides a way to customize the output of the toc.\n            // Default: check utils/DefaultTemplate for details\n            // Optional\n            template: (templateContext) =\u003e string,\n\n            // Indicates a landing page is required.\n            // This will render the toc using template and will generate\n            // a landing page for the series with all articles listed.\n            // Default: false\n            // Optional\n            useLandingPage: boolean,\n\n            // This can only be used in conjunction with useLandingPage=true.\n            // Provides a way to specify a prefix for the slug of the series.\n            // This prefix is independent of the pathPrefix provided by gatsby.\n            // Default: null\n            // Optional\n            landingPagePathPrefix: string,\n\n            // This can only be used in conjunction with useLandingPage=true.\n            // Provides the path to the template layout (react component)\n            // to be used to render the external toc.\n            // This component receives the series articles in the pageContext.\n            // For more information please refer to examples/series.jsx\n            // Defaults: null\n            // Required!\n            landingPageComponent: string\n          },\n          resolvers: {\n            // Locates and resolves the slug on the node.\n            // Default: node.frontmatter.slug\n            // Returns: string\n            // Optional\n            slug: (markdownNode) =\u003e string,\n\n            // Locates and resolves the date on the node.\n            // Default: node.frontmatter.date\n            // Returns: string\n            // Optional\n            date: (markdownNode) =\u003e string,\n\n            // Locates and resolves the draft flag on the node.\n            // Indicates the post is a draft, default behavior is to show the title,\n            // but without a link to the post. This can be overridden with a new template.\n            // Default: node.frontmatter.draft\n            // Returns: boolean\n            // Optional\n            draft: (markdownNode) =\u003e boolean,\n\n            // Locates and resolves the order on the node.\n            // Indicates the position of the post in the series.\n            // Default: node.frontmatter.order\n            // Returns: number\n            // Optional\n            order: (markdownNode) =\u003e number,\n\n            // Locates and resolves the name of the series on the node.\n            // Default: node.frontmatter.series\n            // Returns: string\n            // Optional\n            series: (markdownNode) =\u003e string,\n\n            // Takes a string and converts it to a slug representation.\n            // This is used to calculate the path for the external landing page.\n            // In theory, should match the algorithm you are using to generate\n            // your urls.\n            // Default: converts the string to kebab-case using lodash.kebabCase.\n            toSlug: (markdownNode) =\u003e string\n          }\n        }\n      }\n    ]\n  }\n}\n```\n\nIn your markdown files\n\n```markdown\n---\ntitle: **article title**\nseries: **series name**\norder: **number**\ndraft: **true | false**\n---\n\n\u003c!-- **placeholder** --\u003e\n```\n\nNotes:\n\n1. **series** is required to identify the articles.\n2. **order** and **draft** are optional, just in case you want to reorder things\n   or make people aware there are more articles coming.\n3. A `\u003c!-- placeholder --\u003e` is only required when the `render.placeholder` setting\n   has a value other than both, top or bottom. In those case, the placeholder has to\n   be expressed as a comment in the code using `\u003c!--` and `--\u003e`.\n\n## Examples\n\nGiven the following configuration\n\n```javascript\n{\n  resolve: \"gatsby-transformer-remark\",\n  options: {\n    plugins: [\n      {\n        resolve: \"gatsby-remark-series\",\n        render: {\n          placeholder: \"toc\"\n        }\n      }\n    ]\n  }\n}\n```\n\nWill turn this\n\n```markdown\n---\ntitle: My Title\nseries: CSS and HTML tricks\n---\n\n# My Title\n\n\u003c!-- toc --\u003e\n\nContent\n```\n\nInto this (approximately)\n\n```html\n\u003ch1\u003eMy Title\u003c/h1\u003e\n\n\u003cdiv class=\"series-table-of-content\"\u003e\n  \u003cdiv\u003eOther posts in the CSS and HTML tricks series\u003c/div\u003e\n  \u003col\u003e\n    \u003cli\u003e\u003ca href=\"/my-title\"\u003eMy Title\u003c/a\u003e\u003c/li\u003e\n    \u003c!-- more \u003cli\u003e with all articles that match the series name --\u003e\n  \u003c/ol\u003e\n\u003c/div\u003e\n\n\u003cp\u003eContent\u003c/p\u003e\n```\n\n## Notes\n\n1. The plugin does not provide any default styling for the toc.\n2. The plugin does not provide a default layout for series landing pages, but\n   it provides a concrete example in examples/series.jsx\n\n## License\n\nMIT, by Patricio Trevino\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweirdpattern%2Fgatsby-remark-series","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweirdpattern%2Fgatsby-remark-series","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweirdpattern%2Fgatsby-remark-series/lists"}