gatsby-source-google-docs-team
gatsby-source-google-docs-team
is a Gatsby plugin to use Google Docs as a data source.
- 🔥 No need for a CMS anymore.
- 🖋 Write your blog posts on Google Docs.
- 🗂 Organize your documents in one or multiple folder in Google Drive (trees allowed)
- 🤡 Add custom metadata fields to yours documents
- Supports Team drives
- Optional Flag to download images to gatsby
- Added folder name to node if a doc is inside a folder
It's that simple
Getting started
gatsby-source-google-docs-team
package
Download
You can download gatsby-source-google-docs-team
from the NPM registry via the
npm
or yarn
commands
npm install gatsby-source-google-docs-team --save
Turn on the Google Docs API and set configuration
- Follow the Step 1: Turn ON the Google Docs API
- Turn ON the Google Drive API
- Get a
client_id
and aclient_secret
from the Google console. If you downloadedcredential.json
file, you can extract them from it - Get an
api_key
from the Google console - Fill the
gatsby-source-google-docs
gatsby config object.
More info can be found on the official Google Docs quickstart guide.
Generate a token file
Run gatsby develop
to generate a token file.
token_path
can be customized in the configuration object (config/token_path
).
Usage
Add the plugin to your configuration:
In your gatsby-node.js
file, configure the gatsby-source-google-docs
and the gatsby-transformer-remark
plugins:
moduleexports = plugins: resolve: "gatsby-source-google-docs" options: // Mandatory // -------- foldersIds: "FOLDER_ID_1" "FOLDER_ID_2" // folders Ids can be found in Google Drive URLs config: api_key: "YOUR_API_KEY" client_id: "YOUR_CLIENT_ID" client_secret: "YOUR_CLIENT_SECRET" // Optional // -------- token_path: "google-docs-token.json" // Optional // -------- fields: "createdTime" // https://developers.google.com/drive/api/v3/reference/files#resource fieldsMapper: createdTime: "date" name: "title" // To rename fields fieldsDefault: draft: false // To add default fields values convertImgToNode: true // To convert images to remote node files // Use gatsby-transformer-remark to modify the generated markdown // Not mandatary, but recommanded to be compliant with gatsby remark ecosystem resolve: "gatsby-transformer-remark" options: plugins:
Add an automatic slug generation
Modify your onCreateNode
function in your gatsby-node.js
to generate a slug
field:
exports { // You need to enable `gatsby-transformer-remark` to transform `GoogleDocs` type to `MarkdownRemark` type. if nodeinternaltype === `MarkdownRemark` const customSlug = nodefrontmatterslug // If you add extra data `slug` with description field actions }
node.frontmatter.name
contains the title of the Google Doc
Create a post template
Create a src/templates/post.js
file where you will define your post template:
import React from "react" const PostTemplate = data: post <> <h1>postfrontmattername</h1> <p>postfrontmatterdate</p> <div = /> </> // You need to enable `gatsby-transformer-remark` to query `markdownRemark`.// If you don't use it, query `googleDocs`// If you use convertImgToNode then add googleDocImages queryconst pageQuery = graphql` query BlogPostBySlug($slug: String!) { post: markdownRemark(fields: {slug: {eq: $slug}}) { html frontmatter { name date(formatString: "DD MMMM YYYY", locale: "fr") } } googleDocImages: allFile( filter: {name: {glob: "google-doc-image-**"}} ) { edges { node { id name childImageSharp { fluid { base64 tracedSVG aspectRatio src srcSet srcWebp srcSetWebp sizes originalImg originalName presentationWidth presentationHeight } } } } } }`
Create a page for each post
Use the createPages
API from gatsby in your gatsby-node.js
to create a page for each post.
const path = // You need to enable `gatsby-transformer-remark` to query `allMarkdownRemark`.// If you don't use it, query `allGoogleDocs`exportscreatePages = async
Add extra data
If you need more data attached to your documents, fill the description field in Google Drive
with a JSON object:
{ "slug": "custom-url", "date": "2019-01-01", "author": "Yourself", "category": "yourCageory", "tags": ["tag1", "tag2"]}
JSON will be transformed to YAML and added to your markdown frontmatter and ovveride the existing ones.
/!\ Do not use
id
,name
,description
or anyGoogle Docs
field you add to the configfields
option
If convertImgToNode is enabled. You will need to search the id in the HTML file and replace it with Gatsby image tag
Create a post template
Create a src/templates/post.js
file where you will define your post template:
import React from "react"import Img from "gatsby-image"import parse from "html-react-parser" const PostTemplate = data: post googleDocImages //This is needed if convertImgToNode is enabled const options = { const children = domNode if !children return const hasImgTag = children if hasImgTag const attribs = hasImgTag const src alt = attribs return <Img fluid= googleDocImagesedgesnodechildImageSharpfluid alt=alt className="ui fluid image" /> } const htmlContent = return <> <h1>postfrontmattername</h1> <p>postfrontmatterdate</p> <React.Fragment>htmlContent</React.Fragment> </> // You need to enable `gatsby-transformer-remark` to query `markdownRemark`.// If you don't use it, query `googleDocs`// If you use convertImgToNode then add googleDocImages queryconst pageQuery = graphql` query BlogPostBySlug($slug: String!) { post: markdownRemark(fields: {slug: {eq: $slug}}) { html frontmatter { name date(formatString: "DD MMMM YYYY", locale: "fr") } } googleDocImages: allFile( filter: {name: {glob: "google-doc-image-**"}} ) { edges { node { id name childImageSharp { fluid { base64 tracedSVG aspectRatio src srcSet srcWebp srcSetWebp sizes originalImg originalName presentationWidth presentationHeight } } } } } }`
Contributing
- ⇄ Pull/Merge requests and ★ Stars are always welcome.
- For bugs and feature requests, please create an issue.
See CONTRIBUTING guidelines
Changelog
See CHANGELOG
Special Thanks
gatsby-source-google-docs
License
This project is licensed under the MIT License - see the LICENCE file for details