feat: ✨ add flag to mark pages as drafts

filipowm · Aug 3, 2020 · 909ab00 · 909ab00
1 parent bec70cd
commit 909ab00
Show file tree

Hide file tree

Showing 12 changed files with 63 additions and 9 deletions.
diff --git a/config/default.js b/config/default.js
@@ -122,5 +122,6 @@ module.exports = {
       enabled: true,
       default: false,
     },
+    publishDraft: false
   },
 };
diff --git a/content/configuration/setting-up/features.md b/content/configuration/setting-up/features.md
@@ -5,6 +5,18 @@ order: 4
 
 //TODO add screenshots
 
+## Publishing draft docs
+
+BooGi allows marking pages as drafts, thus not publishing
+them while you are still working on them. However, you can
+alter this behavior by setting up `features.publishDraft`
+property, or passing `FEATURES_PUBLISH_DRAFT` environment
+variable.
+
+```yaml
+features:
+  publishDraft: true # set to true to publish draft pages
+```
 
 ## Dark Mode theme
 

diff --git a/content/editing/page_config.md b/content/editing/page_config.md
@@ -23,6 +23,7 @@ title: String # title of the page, visible in navigation sidebar, page content t
 metaTitle: String # used for SEO if provided, otherwise title is used
 description: String # page description used for search and SEO
 order: Int # page order in navigation sidebar, the lower the higher it will appear
+draft: Boolean # set to true to mark page as draft and not publish it (unless overriden by features.publishDraft property)
 editable: Boolean # set to true to show Edit on Repo button, set to false to hide it
 showMetadata: Boolean # set to true to show page metadata, set to false to hide it
 showToc: Boolean # set to true to show Table of Contents, set to false to hide it
@@ -44,6 +45,7 @@ title: 'Navigation'
 ---
 title: 'Navigation'
 order: 4
+draft: true
 editable: true
 tocDepth: 1
 ---

diff --git a/content/index.mdx b/content/index.mdx
@@ -35,6 +35,7 @@ you treat your documentation in the same way as your code.
 - rich-content and rich-text features like text formatting, graphs and diagrams, 
   quotes, columnar layout, cards, emojis, highlights, live code editor, syntax highlighting,
   external code snippets and many many more!
+- draft pages
 - Progressive Web App which can work offline
 
 - search integration with [Algolia](https://www.algolia.com/) (local search capabilities

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -24,6 +24,12 @@ const plugins = [
   },
   'gatsby-plugin-emotion',
   'gatsby-plugin-remove-trailing-slashes',
+  {
+    resolve: require.resolve(`./plugins/gatsby-plugin-draft`),
+    options: {
+      publishDraft: config.features.publishDraft,
+    },
+  },
   'gatsby-transformer-sharp',
   {
     resolve: 'gatsby-plugin-react-svg',
@@ -192,7 +198,7 @@ if (config.features.rss && config.features.rss.enabled) {
           },
           query: `
           {
-            allMdx {
+            allMdx(filter: {fields: {draft: {ne: true}}}) {
               edges {
                 node {
                   excerpt

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -47,14 +47,11 @@ exports.createPages = ({ graphql, actions }) => {
       graphql(
         `
           {
-            allMdx {
+            allMdx(filter: {fields: {draft: {ne: true}}}) {
               edges {
                 node {
                   fields {
                     id
-                  }
-                  tableOfContents
-                  fields {
                     slug
                   }
                 }
@@ -72,7 +69,7 @@ exports.createPages = ({ graphql, actions }) => {
           component: path.join(process.cwd(), 'src/pages/404.js'),
         });
 
-        // Create blog posts pages.
+        // Create pages.
         result.data.allMdx.edges.forEach(({ node }) => {
           createPage({
             path: node.fields.slug ? node.fields.slug : '/',

diff --git a/plugins/gatsby-plugin-draft/gatsby-node.js b/plugins/gatsby-plugin-draft/gatsby-node.js
@@ -0,0 +1,24 @@
+const defaultOptions = {
+    publishDraft: false,
+};
+
+exports.onCreateNode = ({ node, actions }, pluginOptions) => {
+  const { createNodeField } = actions;
+
+  const options = {
+    ...defaultOptions,
+    ...pluginOptions,
+  };
+
+  if (node.internal.type !== 'MarkdownRemark' && node.internal.type !== 'Mdx') {
+    return;
+  }
+
+  const isDraft = options.publishDraft === false && node.frontmatter && node.frontmatter.draft === true;
+  createNodeField({
+    node,
+    name: "draft",
+    value: isDraft
+  });
+
+};
diff --git a/plugins/gatsby-plugin-draft/index.js b/plugins/gatsby-plugin-draft/index.js
diff --git a/plugins/gatsby-plugin-draft/package.json b/plugins/gatsby-plugin-draft/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "gatsby-plugin-draft",
+  "description": "Plugin to manage drafts",
+  "author": "Mateusz Filipowicz <matfilipowicz@gmail.com>",
+  "version": "0.1.0",
+  "dependencies": {
+    "gatsby": "2.23.4"
+  },
+  "license": "MIT",
+  "main": "index.js"
+}
diff --git a/src/components/Navigation/Navigation.js b/src/components/Navigation/Navigation.js
@@ -4,7 +4,7 @@ import config from 'config';
 const getNavigationData = () => {
   const { allMdx } = useStaticQuery(graphql`
     query NavigationQuery {
-      allMdx {
+      allMdx(filter: {fields: {draft: {ne: true}}}) {
         edges {
           node {
             fields {

diff --git a/src/components/TableOfContents/TableOfContents.js b/src/components/TableOfContents/TableOfContents.js
@@ -164,7 +164,7 @@ const TableOfContents = ({ className, location }) => (
   <StaticQuery
     query={graphql`
       query {
-        allMdx {
+        allMdx(filter: {fields: {draft: {ne: true}}}) {
           edges {
             node {
               fields {

diff --git a/src/utils/algolia.js b/src/utils/algolia.js
@@ -1,6 +1,6 @@
 module.exports = (indexName, excerptSize) => {
   const pageQuery = `{
-    pages: allMdx {
+    pages: allMdx(filter: {fields: {draft: {ne: true}}}) {
       edges {
         node {
           objectID: id