
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
gatsby-source-google-docs
Advanced tools
gatsby-source-google-docs
is a Gatsby plugin to use Google Docs as a data source.
MDX
support to use <ReactComponents />
in your documentsgatsby-plugin-image
and gatsby-image
supportTo preview what you can do, please checkout the documentation website.
💯 100% content of the website is from Google Docs. Please suggest edits to improve it.
Download gatsby-source-google-docs
and gatsby-transformer-remark
(or gatsby-plugin-mdx
for advanced usage)
yarn add gatsby-source-google-docs gatsby-transformer-remark
gatsby-source-google-docs
transform Google Docs to Markdowngatsby-transformer-remark
transform Markdown to HTMLgatsby-plugin-mdx
transform Markdown to MDXThe package needs 3 .env
variables.
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-docs
expose a script to generate it.
npx 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
There are special metadata
- For folders:
exclude: true
: Exclude the folder and its documentsskip: true
: Remove the folder from slug but keep its documents- For documents:
index:true
: Use document as the folder indexpage: false
: Prevent page creation whencreatePages
option is set totrue
⬆️ 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- "en" folder will be removed from slug because of
skip: true
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 ofexclude: 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 documentMy year 2020
{ 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 documentPost 2
will have a custom slug
{ 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.js
fileOption | Required | Type | Default | Example |
---|---|---|---|---|
folder | true | String | null | "1Tn1dCbIc" |
createPages | false | Boolean | false | true |
pageContext | false | Array | [] | ["locale"] |
demoteHeadings | false | Boolean | true | false |
imagesOptions | false | Object | null | {width: 512} |
keepDefaultStyle | false | Boolean | false | true |
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 |
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",
//
// OR "gatsby-plugin-mdx" for advanced usage using MDX
//
// 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")
Using createPages: true
option, pages will be created automatically.
You need to create templates and define wich template to use using YAML
metadata.
You can set
page: false
metadata for a document to prevent a page creation
Checkout the example template and adapt it to your needs.
You can use
pageContext
option 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.
Right Click -> Make a copy
A2
This method works with any hosting services: Gatsby Cloud, Netlify...
You are using gatsby-source-google-docs
for your website? Thank you!
Please add the link bellow:
FAQs
Gatsby plugin to use Google Docs as a data source
The npm package gatsby-source-google-docs receives a total of 17 weekly downloads. As such, gatsby-source-google-docs popularity was classified as not popular.
We found that gatsby-source-google-docs demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.