feat: headless CMS overview

docs/docs/content-and-data.md

@@ -0,0 +1,6 @@
+---
+title: Sourcing Content and Data
+overview: true
+---
+
+[[guidelist]]

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).

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

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 = `
     <h2>Guides in this section:</h2>