feat: Add Google Docs support

adobe · Mar 24, 2021 · 228d4dd · 228d4dd
1 parent b7acca4
commit 228d4dd
Show file tree

Hide file tree

Showing 5 changed files with 224 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Adobe I/O Gatsby Theme
 
-A [Gatsby Theme](https://gatsbyjs.org/docs/themes) for building markdown powered Adobe I/O sites.
+A [Gatsby Theme](https://gatsbyjs.org/docs/themes) for building markdown/gdocs powered Adobe I/O sites.
 
 **Why Gatsby ?**
 
@@ -53,6 +53,7 @@ Using a theme, all of your default configuration lives in an npm package.
   + [Markdown pages](#markdown-pages)
   + [Links](#links)
   + [Assets](#assets)
+  + [Google Docs support](#google-docs-support)
 * [Configuration](#configuration)
   + [.env file](#env-file)
   + [Global Navigation](#global-navigation)
@@ -281,6 +282,28 @@ You'll find more information about the `static` folder at [Using the Static Fold
 
 Please find guidance on ideal illustration sizes in this [document](docs/documents/MCS_Media_+_Image_Recommendations.pdf).
 
+### Google Docs support
+
+Instead of writing markdown pages, you can use Google Docs as external content source. Google Docs documents will be transformed into markdown pages under the hood and placed by default into `src/pages`.
+To connect to Google Docs, you'll need to setup 4 `.env` variables in your Gatsby project : 
+
+```
+GOOGLE_OAUTH_CLIENT_ID=2...m.apps.googleusercontent.com
+GOOGLE_OAUTH_CLIENT_SECRET=Q...axL
+GOOGLE_DOCS_TOKEN={"access_token":"ya...J0","refresh_token":"1..mE","scope":"https://www.googleapis.com/auth/drive.metadata.readonly https://www.googleapis.com/auth/documents.readonly","token_type":"Bearer","expiry_date":1598284554759}
+GOOGLE_DOCS_FOLDER_ID=1GHc4k.....8E5OyzuAT0Fy9 
+```  
+
+To generate the first 3 variables, open the terminal at the root of your project and run the command: 
+
+```bash
+gatsby-source-gdocs2md-token
+```
+
+Then simply follow the instructions.
+
+The last variable `GOOGLE_DOCS_FOLDER_ID` can be generated by retrieving the Google Docs root folder ID of your documents e.g. https://drive.google.com/drive/folders/FOLDER_ID 
+
 ## Configuration
 
 To make sure you don't run into troubles during the site build process, please follow the below configuration steps.

diff --git a/packages/gatsby-theme-aio/gatsby-config.js b/packages/gatsby-theme-aio/gatsby-config.js
@@ -30,6 +30,12 @@ module.exports = {
         component: require.resolve(`./src/components/Layout/index.js`)
       }
     },
+    {
+      resolve: `gatsby-source-gdocs2md`,
+      options: {
+        folder: process.env.GOOGLE_DOCS_FOLDER_ID
+      }
+    },
     {
       resolve: `gatsby-source-filesystem`,
       options: {

diff --git a/packages/gatsby-theme-aio/package.json b/packages/gatsby-theme-aio/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@adobe/gatsby-theme-aio",
   "version": "3.0.9",
-  "description": "Gatsby theme for building markdown powered Adobe I/O sites",
+  "description": "Gatsby theme for building markdown/gdocs powered Adobe I/O sites",
   "main": "index.js",
   "license": "Apache-2.0",
   "repository": {
@@ -84,6 +84,7 @@
     "gatsby-remark-copy-linked-files": "^3.0.0",
     "gatsby-remark-images-remote": "^1.0.2",
     "gatsby-source-filesystem": "^3.0.0",
+    "gatsby-source-gdocs2md": "^1.0.0",
     "https-browserify": "^1.0.0",
     "mdx-embed": "^0.0.19",
     "mobx": "^5.15.7",

diff --git a/packages/gatsby-theme-aio/src/components/Hero/index.js b/packages/gatsby-theme-aio/src/components/Hero/index.js
@@ -113,6 +113,9 @@ const HeroTexts = ({ texts }) => {
 const HeroHeading = ({ heading, variant }) =>
   heading
     ? cloneElement(heading, {
+        // force h1 to support gdocs
+        mdxType: 'h1',
+        originalType: 'h1',
         className:
           variant === 'default' ? 'spectrum-Heading--sizeXL' : 'spectrum-Heading--sizeXXL spectrum-Heading--serif',
         css: css`