diff --git a/docs/docs/content-and-data.md b/docs/docs/content-and-data.md new file mode 100644 index 0000000000000..ff976d5bd600e --- /dev/null +++ b/docs/docs/content-and-data.md @@ -0,0 +1,6 @@ +--- +title: Sourcing Content and Data +overview: true +--- + +[[guidelist]] diff --git a/docs/docs/headless-cms.md b/docs/docs/headless-cms.md index 8f6dbd78c8d18..37a1901209b85 100644 --- a/docs/docs/headless-cms.md +++ b/docs/docs/headless-cms.md @@ -1,8 +1,20 @@ --- title: Headless CMS +overview: true --- -This is a stub. Help our community expand it. +A core feature of Gatsby is its ability to **load data from anywhere**. This is what makes Gatsby more powerful than many other static site generators that are limited to only loading content from Markdown files. -Please use the [Gatsby Style Guide](/docs/gatsby-style-guide/) to ensure your -pull request gets accepted. +A core benefit of this “data from anywhere” approach is that it allows teams to manage their content in nearly any back-end they prefer. + +Many content management systems (CMS) now support a “headless” mode, which is perfect for Gatsby sites. A headless CMS allows content creators to manage their content through a familiar admin interface, but allows developers to access the content via API endpoints, allowing for a fully customized front-end experience. + +Through use of [source plugins](/plugins/?=source), Gatsby has support for dozens of headless CMS options, allowing your content team the comfort and familiarity of its preferred admin interface, and your development team the improved developer experience and performance gains of using Gatsby, GraphQL, and React to build the front-end. + +The guides in this section will walk through the process of setting up content sourcing from some of the most popular headless CMSes in use today. + +[[guidelist]] + +## How to add new guides to this section + +If you don’t see your preferred CMS in this list, you can [write a new guide yourself](/docs/how-to-contribute/) or [open an issue to request it](https://github.com/gatsbyjs/gatsby/issues/new/choose). diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index a1ef1ca36e875..06e28bd1ab935 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -65,7 +65,7 @@ - title: Working with images in Gatsby link: /docs/working-with-images/ - title: Sourcing content and data* - link: /docs/sourcing-content-and-data + link: /docs/content-and-data/ items: - title: Sourcing from the filesystem* link: /docs/sourcing-from-the-filesystem/ @@ -75,7 +75,7 @@ link: /docs/sourcing-from-saas-services/ - title: Sourcing from private APIs* link: /docs/sourcing-from-private-apis/ - - title: Headless CMS* + - title: Headless CMS link: /docs/headless-cms/ items: - title: Sourcing from Netlify CMS diff --git a/www/src/templates/template-docs-markdown.js b/www/src/templates/template-docs-markdown.js index 5cf2006580709..325b503300a52 100644 --- a/www/src/templates/template-docs-markdown.js +++ b/www/src/templates/template-docs-markdown.js @@ -29,7 +29,19 @@ const getPageHTML = page => { return page.html } - const guides = getChildGuides(page.fields.slug) + // Ugh. This is gross and I want to make it less gross. + let guides + if (page.fields.slug !== `/docs/headless-cms/`) { + // Normally, we’re pulling from the top level of guides. + guides = getChildGuides(page.fields.slug) + } else { + // For the Headless CMS section, we need to dig into sub-items. + // This is hard-coded and fragile and I hate it and I’m sorry. + guides = getChildGuides(`/docs/content-and-data/`).find( + guide => guide.link === page.fields.slug + ).items + } + const guideList = createGuideList(guides) const toc = `