From ba0fa7a64e7b225ef9cca188b8894f6fda7502a4 Mon Sep 17 00:00:00 2001
From: Ines Montani <ines@ines.io>
Date: Wed, 15 Dec 2021 09:27:08 +0100
Subject: [PATCH] Support Google Sheets embeds in docs (#9861)

---
 website/src/components/embed.js      | 22 +++++++++++++++++++++-
 website/src/styles/embed.module.sass |  4 ++++
 website/src/templates/index.js       |  3 ++-
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/website/src/components/embed.js b/website/src/components/embed.js
index 8d82bfaae..9f959bc99 100644
--- a/website/src/components/embed.js
+++ b/website/src/components/embed.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import Link from './link'
+import Button from './button'
 import { InlineCode } from './code'
 import { markdownToReact } from './util'
 
@@ -104,4 +105,23 @@ const Image = ({ src, alt, title, ...props }) => {
     )
 }
 
-export { YouTube, SoundCloud, Iframe, Image }
+const GoogleSheet = ({ id, link, height, button = 'View full table' }) => {
+    return (
+        <figure className={classes.root}>
+            <iframe
+                title={id}
+                scrolling="no"
+                className={classes.googleSheet}
+                height={height}
+                src={`https://docs.google.com/spreadsheets/d/e/${id}/pubhtml?widget=true&amp;headers=false`}
+            />
+            {link && (
+                <Button href={`https://docs.google.com/spreadsheets/d/${link}/view`}>
+                    {button}
+                </Button>
+            )}
+        </figure>
+    )
+}
+
+export { YouTube, SoundCloud, Iframe, Image, GoogleSheet }
diff --git a/website/src/styles/embed.module.sass b/website/src/styles/embed.module.sass
index ba8a896c8..1eaf7b8d2 100644
--- a/website/src/styles/embed.module.sass
+++ b/website/src/styles/embed.module.sass
@@ -32,3 +32,7 @@
 
 .image-link
     display: block
+
+.google-sheet
+    width: 100%
+    margin-bottom: 1rem
diff --git a/website/src/templates/index.js b/website/src/templates/index.js
index 56ac0dbed..353ff6067 100644
--- a/website/src/templates/index.js
+++ b/website/src/templates/index.js
@@ -29,7 +29,7 @@ import Aside from '../components/aside'
 import Button from '../components/button'
 import Tag from '../components/tag'
 import Grid from '../components/grid'
-import { YouTube, SoundCloud, Iframe, Image } from '../components/embed'
+import { YouTube, SoundCloud, Iframe, Image, GoogleSheet } from '../components/embed'
 import Alert from '../components/alert'
 import Search from '../components/search'
 import Project from '../widgets/project'
@@ -72,6 +72,7 @@ const scopeComponents = {
     YouTube,
     SoundCloud,
     Iframe,
+    GoogleSheet,
     Abbr,
     Tag,
     Accordion,