{"id":13433681,"url":"https://github.com/opstrace/next-product-docs","last_synced_at":"2025-03-17T13:30:41.114Z","repository":{"id":39300941,"uuid":"373061721","full_name":"opstrace/next-product-docs","owner":"opstrace","description":"Next.js component to fetch and render /docs from a different repository","archived":true,"fork":false,"pushed_at":"2023-01-13T11:52:58.000Z","size":586,"stargazers_count":53,"open_issues_count":2,"forks_count":11,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-10T18:19:27.286Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opstrace.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-02T06:23:01.000Z","updated_at":"2024-12-02T06:40:58.000Z","dependencies_parsed_at":"2023-02-09T15:31:41.225Z","dependency_job_id":null,"html_url":"https://github.com/opstrace/next-product-docs","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opstrace%2Fnext-product-docs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opstrace%2Fnext-product-docs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opstrace%2Fnext-product-docs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opstrace%2Fnext-product-docs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opstrace","download_url":"https://codeload.github.com/opstrace/next-product-docs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244041358,"owners_count":20388221,"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":[],"created_at":"2024-07-31T02:01:32.978Z","updated_at":"2025-03-17T13:30:40.621Z","avatar_url":"https://github.com/opstrace.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"assets/opstrace-docs.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/opstrace/next-product-docs/actions/workflows/publish.yml\"\u003e\u003cimg alt=\"test status\" src=\"https://github.com/opstrace/next-product-docs/actions/workflows/publish.yml/badge.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/opstrace/next-product-docs/actions/workflows/test.yml\"\u003e\u003cimg alt=\"test status\" src=\"https://github.com/opstrace/next-product-docs/actions/workflows/test.yml/badge.svg\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://semantic-release.gitbook.io/semantic-release/\"\u003e\u003cimg alt=\"Semantic Release bagde\" src=\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# Deprecation Notice\n\nThis module is no longer maintained. For an up-to-date version, please see https://github.com/zentered/next-product-docs.\n\n# Next.js Component for Product Docs\n\nThis component helps you to render your product documentation (`/docs`) on your\nproduct website.\n[Check out the Opstrace Docs for a full impression](https://opstrace.com/docs)\nwhat this component does. Typically the website and product (docs) are in\nseparate repositories. This library offers three key functions:\n\n1. `staticPaths` returns all available paths for static site generation in\n   next.js\n2. `pageProps` returns the required content such as sidebar routes, Table of\n   Contents and Markdown\n3. `Documentation` is a JSX function that contains the render function\n\nYou can read more about the whys and hows of this component in the\n[Opstrace Blog](http://opstrace.com/blog/product-documentation-with-nextjs)\n\n## Prerequisites\n\nThe main purpose of this component is to fetch and render Markdown from a\ndifferent repo. In this folder you need to create a `manifest.json` file which\ncontains the link structure for the documentation you want to show. This allows\nyou to control the sidebar levels and titles for links.\n\nSample:\n\n```\n/docs\n/docs/README.md\n...\n```\n\nManifest:\n\n```json\n{\n  \"routes\": [\n    {\n      \"heading\": true,\n      \"title\": \"Next Docs Documentation\",\n      \"routes\": [\n        {\n          \"title\": \"Introduction\",\n          \"path\": \"/docs/README.md\"\n        }\n      ]\n    }\n  ]\n}\n```\n\nYou can find\n[complete example here](https://github.com/zentered/next-product-docs-example/blob/main/docs/manifest.json)\nor check out the\n[Opstrace Documentation Manifest](https://github.com/opstrace/opstrace/blob/main/docs/manifest.json).\n\n## Installation \u0026 Usage\n\nIn your Next.js website repo, run:\n\n    yarn add @opstrace/next-product-docs\n\nor\n\n    npm install @opstrace/next-product-docs\n\nThe location of your product docs can be configured through environment\nvariables in your `.env` file:\n\n```\nGITHUB_TOKEN=\nDOCS_FOLDER=docs\nDOCS_ORG=zentered\nDOCS_REPO=next-product-docs-example\nDOCS_BRANCH=main\nDOCS_FALLBACK=README\nASSETS_DESTINATION=/assets\n```\n\nCreate a new page `pages/docs/[[...slug]].jsx` which calls the provided\n`staticPaths` and `pageProps` functions:\n\n```\nimport Head from 'next/head'\nimport {\n  pageProps,\n  staticPaths\n} from 'next-product-docs/serialize'\nimport Documentation from 'next-product-docs'\n\nexport default function Docs({ title, source }) {\n  return (\n    \u003cmain\u003e\n      \u003cDocumentation source={source} /\u003e\n    \u003c/main\u003e\n  )\n}\n\nexport async function getStaticPaths() {\n  const paths = await staticPaths()\n  return { paths, fallback: false }\n}\n\nexport async function getStaticProps(ctx) {\n  return {\n    props: {\n      ...(await pageProps(ctx))\n    }\n  }\n}\n```\n\n# Run Locally\n\n```bash\n    npm run watch\n    # or yarn watch\n```\n\nRead how to link component in\n[next-product-docs-example](https://github.com/zentered/next-product-docs-example)\n\n## Additional Components\n\nFor convenience we're providing two additional components that help you get\nstarted with a sidebar and table of contents. They contain styling classes, so\nyou should customize them as you\n\n- [Sidebar](https://github.com/zentered/next-product-docs-example/blob/main/components/Sidebar.jsx)\n- [Table of Contents (TOC)](https://github.com/zentered/next-product-docs-example/blob/main/components/Toc.jsx)\n\nYou can modify the page `[[slug]].jsx` and pass on `sidebarRoutes` and\n`tocHeadings`, which contain the (nested) routes for the sidebar and toc. We're\nusing `react-scroll` to highlight the current section of the page in the table\nof contents. In the sidebar you can easily integrate search for example with\n[Algolia React InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/).\n\n## Contributing\n\nConsidering contributing to next-product-docs? We'd love to work with you!\n\nTo start a local development environment, have a look at our\n[example repo](https://github.com/zentered/next-product-docs-example/blob/main/package.json#L20)\non how to link/unlink the component in a Next.js project.\n\nPlease join us for\n[discussions in our community](https://go.opstrace.com/community).\n\nYou can also ping us on Twitter [@opstrace](http://twitter.com/opstrace) or\n[@zenteredco](http://twitter.com/zenteredco). The only workaround we have at the\nmoment is forking the repository, publish new package versions to GitHub and\ninstall them in the Next.js project where we use the component.\n\nPlease adhere to the Opstrace\n[code of conduct](https://github.com/opstrace/opstrace/blob/main/CODE_OF_CONDUCT.md).\n\n## Acknowledgements \u0026 Thanks\n\n- [Next.js](https://nextjs.org) which showed us the approach of fetching and\n  rendering docs from a remote repo (https://nextjs.org/docs and\n  https://github.com/vercel/next.js/tree/canary/docs)\n- [next-mdx-remote](https://github.com/hashicorp/next-mdx-remote) which allows\n  us to load mdx/md content from anywhere\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopstrace%2Fnext-product-docs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopstrace%2Fnext-product-docs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopstrace%2Fnext-product-docs/lists"}