Gatsby plugin to use Google Docs as a data source
[![Npm][badge-npm]][npm] [![Build Status][badge-build]][travis] [![Coverage][badge-coverage]][codecov] [![Downloads][badge-downloads]][npm] ![PRs welcome][badge-prs] ![MIT license][badge-licence] ![Paypal][badge-paypal]
gatsby-source-google-docsis a Gatsby plugin to use Google Docs as a data source.
Download
gatsby-source-google-docsand
gatsby-transformer-remark
yarn add gatsby-source-google-docs gatsby-transformer-remark
gatsby-source-google-docstransform Google Docs to Markdown
gatsby-transformer-remarktransform Markdown to HTML
The package needs 3
.envvariables.
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}
gatsby-source-google-docsexpose a script to generate them.
gatsby-source-google-docs-token
Go to your Google Drive, create a folder and put some documents inside it.
β³ π Root folder `template: page` β³ π en `locale: en` `skip: true` β³ π Home `template: home` β³ π About β³ π Posts `template: post` β³ π Drafts `exclude: true` β³ π Draft 1 β³ π My year 2020 `date: 2021-01-01` β³ π Post 2 `slug: /custom/slug` `template: special-post` β³ π fr `locale: fr` β³ π Accueil `template: home`
description
field in Google Drive with a YAML
objectlocale: fr
template: post
category: Category Name
tags: [tag1, tag2]
slug: /custom-slug
date: 2019-01-01
> β¬οΈ For the tree example above:
>
> - Every node will have template: page
defined as default excepts if you redefine it later.
> - You need to create 3 different templates: page
(default), home
, post
. Checkout the example template
exclude: true
. Perfect to keep drafts documents. One you want to publish a page, juste move the document one level up.> β¬οΈ For the tree example above:
>
> - Documents under Drafts
will be exclude because of exclude: true
.
GoogleDocs
nodes and you can use everywhere in you Gatsby
siteAdd an image in your Google Document first page header
slug
and breadcrumb
fields add automatically generated using the folders tree structure and transformed using kebab-case
.
> β¬οΈ For the tree example above:
> The GoogleDocs
node for document My year 2020
>
> js > { > path: "/en/posts/my-year-2020" // Original Google Drive path > slug: "/posts/my-year-2020" // `en` is out because of `skip: true` > breadcrumb: [ > {name: "Posts", slug: "/posts"}, > {name: "My year 2020", slug: "/posts/my-year-2020"}, > ], > template: "post" ,// src/templates/post.js > locale: "fr", > date: "2021-01-01" // Fixed date ! > } >
>
> The GoogleDocs
node for document Post 2
will have a custom slug
>
> js > { > path: "/en/posts/post-2" > slug: "/custom/slug" > breadcrumb: [ > {name: "Posts", slug: "/posts"}, > {name: "Post 2", slug: "/custom/slug"}, > ], > template: "special-post", // src/templates/special-post.js > locale: "en", > date: "2020-09-12" // Google Drive document creation date > } >
You also can add metadata (locale
, date
, template
, ...) to your documents.
gatsby-config.jsfile
module.exports = { plugins: [ { resolve: "gatsby-source-google-docs", options: { // https://drive.google.com/drive/folders/FOLDER_ID folder: "FOLDER_ID", createPages: true, }, }, "gatsby-transformer-remark", // You need some transformations? // Checkout https://www.gatsbyjs.com/plugins/?=gatsby-remark // And pick-up some plugins ], }
gatsby-plugin-sharp
, gatsby-transformer-sharp
and gatsby-remark-images
are required if you want to take advantage of gatsby-image blur-up technique.
yarn add gatsby-plugin-sharp gatsby-transformer-sharp gatsby-remark-images
module.exports = {
plugins: [
"gatsby-source-google-docs",
"gatsby-plugin-sharp",
"gatsby-transformer-sharp",
{
resolve: "gatsby-transformer-remark",
options: {
plugins: ["gatsby-remark-images"],
},
},
],
}
Use Code Blocks Google Docs extension to format your code blocks.
To specify the lang, you need to add a fist line in your code block following the format lang:javascript
.
To get Syntax highlighting, I recommend using prismjs
but it's not mandatory.
yarn add gatsby-remark-prismjs prismjs
Add the gatsby-remark-prismjs
plugin to your gatsby-config.js
module.exports = {
plugins: [
"gatsby-source-google-docs",
{
resolve: "gatsby-transformer-remark",
options: {
plugins: ["gatsby-remark-prismjs"],
},
},
],
}
Import a prismjs
theme in your gatsby-browser.js
require("prismjs/themes/prism.css")
| Option | Required | Type | Default | Example | | -------------- | -------- | ------- | ------- | ------------ | | folder | true | String | - | "1Tn1dCbIc" | | createPages | false | Boolean | false | true | | pageContext | false | Array | [] | ["locale"] | | demoteHeadings | false | Boolean | true | false | | imagesOptions | false | Object | - | {width: 512} | | skipCodes | false | Boolean | false | true | | skipFootnotes | false | Boolean | false | true | | skipHeadings | false | Boolean | false | true | | skipImages | false | Boolean | false | true | | skipLists | false | Boolean | false | true | | skipQuotes | false | Boolean | false | true | | skipTables | false | Boolean | false | true | | debug | false | Boolean | false | true |
Using
createPages: trueoption, pages will be created automatically. You need to create templates and define wich template to use using
YAMLmetadata.
Checkout the example template et adapt it to your needs.
You can use
pageContextoption if you need extra data into the context of your pages.
If you prefer to create pages manualy, checkout the createPages API et adapt it to your needs.
You are using
gatsby-source-google-docsfor your website? Thank you! Please add the link bellow: