From 3d1ffde156b7090562c69f350a5e163d837eb902 Mon Sep 17 00:00:00 2001 From: Jason Lengstorf Date: Mon, 13 Aug 2018 14:16:05 -0700 Subject: [PATCH 1/3] wip: headless CMS docs; guidelist not working yet re #6585 --- docs/docs/headless-cms.md | 12 +++++++++--- www/src/data/sidebars/doc-links.yaml | 2 +- www/src/templates/template-docs-markdown.js | 16 +++++++++++++++- 3 files changed, 25 insertions(+), 5 deletions(-) diff --git a/docs/docs/headless-cms.md b/docs/docs/headless-cms.md index 8f6dbd78c8d18..86c0922f4d734 100644 --- a/docs/docs/headless-cms.md +++ b/docs/docs/headless-cms.md @@ -1,8 +1,14 @@ --- 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. + +[[guidelist]] diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index a1ef1ca36e875..afe5b645a2307 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -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..1e546d321a68e 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/sourcing-content-and-data/`).items.find( + guide => guide.link === page.fields.slug + ) + } + const guideList = createGuideList(guides) const toc = `

Guides in this section:

@@ -76,6 +88,8 @@ class DocsTemplate extends React.Component { __html: html, }} /> + 
{JSON.stringify(page, null, 2)}
+ 
{JSON.stringify(guides, null, 2)}
From 2db7369cac03fcfa832532e53bc6c4c3084fb00a Mon Sep 17 00:00:00 2001 From: Jason Lengstorf Date: Mon, 13 Aug 2018 15:20:00 -0700 Subject: [PATCH 2/3] feat: headless CMS overview ready --- docs/docs/content-and-data.md | 6 ++++++ docs/docs/headless-cms.md | 8 +++++++- www/src/data/sidebars/doc-links.yaml | 2 +- www/src/templates/template-docs-markdown.js | 6 ++---- 4 files changed, 16 insertions(+), 6 deletions(-) create mode 100644 docs/docs/content-and-data.md 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 86c0922f4d734..95bd740efcda3 100644 --- a/docs/docs/headless-cms.md +++ b/docs/docs/headless-cms.md @@ -1,6 +1,6 @@ --- title: Headless CMS -# overview: true +overview: true --- 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. @@ -11,4 +11,10 @@ Many content management systems (CMS) now support a “headless” mode, which i 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](http://localhost:8000/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 afe5b645a2307..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/ diff --git a/www/src/templates/template-docs-markdown.js b/www/src/templates/template-docs-markdown.js index 1e546d321a68e..325b503300a52 100644 --- a/www/src/templates/template-docs-markdown.js +++ b/www/src/templates/template-docs-markdown.js @@ -37,9 +37,9 @@ const getPageHTML = page => { } 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/sourcing-content-and-data/`).items.find( + guides = getChildGuides(`/docs/content-and-data/`).find( guide => guide.link === page.fields.slug - ) + ).items } const guideList = createGuideList(guides) @@ -88,8 +88,6 @@ class DocsTemplate extends React.Component { __html: html, }} /> - 
{JSON.stringify(page, null, 2)}
- 
{JSON.stringify(guides, null, 2)}
From a0c09a537aa24d1290ca2a11bbf3ff51662408b6 Mon Sep 17 00:00:00 2001 From: Mike Allanson Date: Mon, 13 Aug 2018 23:34:21 +0100 Subject: [PATCH 3/3] Relative link --- docs/docs/headless-cms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/headless-cms.md b/docs/docs/headless-cms.md index 95bd740efcda3..37a1901209b85 100644 --- a/docs/docs/headless-cms.md +++ b/docs/docs/headless-cms.md @@ -17,4 +17,4 @@ The guides in this section will walk through the process of setting up content s ## 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](http://localhost:8000/docs/how-to-contribute/) or [open an issue to request it](https://github.com/gatsbyjs/gatsby/issues/new/choose). +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).