Add links and seo

Author: pomber

readme.md

@@ -395,6 +395,7 @@ console.log(3);
 ## Examples
 
 - [React Conf 2018 Hooks Demo](https://github.com/pomber/react-conf-2018-hooks-demo)
+- [Formidable's GraphQL Workshop](https://advanced-graphql-workshop.netlify.com/) by [Phil Pluckthun](https://twitter.com/_philpl)
 
 ## Related
 

sites/docs/gatsby-config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: ["gatsby-theme-mdx-deck"]
+  plugins: ["gatsby-theme-mdx-deck", "gatsby-plugin-react-helmet"]
 };

sites/docs/package.json

@@ -6,10 +6,12 @@
   "dependencies": {
     "code-surfer": "3.0.0-beta.1",
     "gatsby": "^2.15.28",
+    "gatsby-plugin-react-helmet": "^3.1.15",
     "gatsby-theme-mdx-deck": "^3.0.13",
     "prism-react-renderer": "^1.0.2",
     "react": "^16.10.0",
     "react-dom": "^16.10.0",
+    "react-helmet": "^5.2.1",
     "react-vista": "^0.1.1"
   },
   "scripts": {

sites/docs/src/home/app.js

@@ -3,12 +3,29 @@ import "./index.css";
 import Stage from "./stage";
 import Deck from "./deck";
 import Docs from "./docs";
+import { Helmet } from "react-helmet";
+
+const card = "https://codesurfer.pomb.us/card.png";
 
 function App() {
   return (
-    <Stage deck={<Deck />}>
-      <Docs />
-    </Stage>
+    <React.Fragment>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>Code Surfer - Rad Code Slides</title>
+        <meta
+          name="description"
+          content="Code Surfer adds code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides."
+        />
+        <meta name="image" content={card} />
+        <meta property="og:image" content={card} />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:creator" content="@pomber" />
+      </Helmet>
+      <Stage deck={<Deck />}>
+        <Docs />
+      </Stage>
+    </React.Fragment>
   );
 }
 

sites/docs/src/home/docs.js

@@ -3,7 +3,34 @@ import Readme from "./readme.mdx";
 import { MDXProvider } from "@mdx-js/react";
 import CodeBlock from "./code-block";
 
-const components = { pre: props => <div {...props} />, code: CodeBlock };
+const components = {
+  pre: props => <div {...props} />,
+  code: CodeBlock,
+  blockquote: props => (
+    <blockquote
+      {...props}
+      style={{
+        borderLeft: "3px solid #999",
+        marginLeft: "20px",
+        paddingLeft: "10px"
+      }}
+    />
+  ),
+  h1: props => <H as="h1" {...props} />,
+  h2: props => <H as="h2" {...props} />,
+  h3: props => <H as="h3" {...props} />
+};
+
+function H(props) {
+  const text = props.children;
+  const id =
+    text &&
+    text
+      .split(" ")
+      .join("-")
+      .toLowerCase();
+  return React.createElement(props.as, { ...props, id });
+}
 
 export default function Docs() {
   return (

sites/docs/src/home/readme.mdx

@@ -1,7 +1,3 @@
-# Code Surfer
-
-> Help to keep this project alive with your [support](https://opencollective.com/code-surfer) ❤️
-
 Code Surfer adds code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to [MDX Deck](https://github.com/jxnblk/mdx-deck) slides.
 
 To create a new project run:
@@ -387,6 +383,7 @@ console.log(3);
 ## Examples
 
 - [React Conf 2018 Hooks Demo](https://github.com/pomber/react-conf-2018-hooks-demo)
+- [Formidable's GraphQL Workshop](https://advanced-graphql-workshop.netlify.com/) by [Phil Pluckthun](https://twitter.com/_philpl)
 
 ## Related
 

sites/docs/src/home/stage.js

@@ -13,14 +13,9 @@ import {
   Plane,
   Roof,
   Floor,
-  LWall,
-  RWall,
-  RotateX,
   RotateY,
-  RotateZ,
   Move,
   useScale,
-  FabricTexture,
   SpotLight,
   NoLights,
   PointLight
@@ -32,7 +27,7 @@ const dividerTexture = `url("${brightSquares}")`;
 export default function Stage({ children, deck }) {
   const [vw, vh] = useWindowSize();
   if (!vw) return null;
-  const h = Math.max((vw / vh < 1.12 ? vw / 1.12 : vh) * 0.75, 330);
+  const h = Math.max((vw / vh < 1.16 ? vw / 1.16 : vh) * 0.75, 330);
   const scale = h * 0.2;
   const yMiddle = 0.33;
   const yOrigin = (0.6 * h) / vh;

sites/docs/static/card.png

@@ -893,6 +893,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.7.2":
+  version "7.7.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.4.tgz#b23a856751e4bf099262f867767889c0e3fe175b"
+  integrity sha512-r24eVUUr0QqNZa+qrImUk8fn5SPhHq+IfYvIoIMg0do3GdK9sMdiLKP3GYVVaxpPKORgm8KRKaNTEhAjgIpLMw==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/template@^7.1.0", "@babel/template@^7.4.0", "@babel/template@^7.4.4", "@babel/template@^7.6.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.6.0.tgz#7f0159c7f5012230dad64cca42ec9bdb5c9536e6"
@@ -6748,6 +6755,13 @@ gatsby-plugin-react-helmet@^3.1.0:
   dependencies:
     "@babel/runtime" "^7.6.2"
 
+gatsby-plugin-react-helmet@^3.1.15:
+  version "3.1.15"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.1.15.tgz#0f81ec0106e86ac2d44cb714a79a3a928e5c40a6"
+  integrity sha512-VrPv3rD/YrYN7lZsRX7YpFO8qj2uZj0iHvhNEeg2+iEVI2GTegK5wlRut85bnlR/ezpeuzm7v4qhCx2mgeYEKw==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+
 gatsby-plugin-theme-ui@^0.2.6:
   version "0.2.43"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-theme-ui/-/gatsby-plugin-theme-ui-0.2.43.tgz#a2baa2bdba1bd923edeb63f1ebdf48c36b5c63ef"
@@ -12453,6 +12467,16 @@ react-helmet-async@^1.0.2:
     react-fast-compare "2.0.4"
     shallowequal "1.1.0"
 
+react-helmet@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa"
+  integrity sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.5.4"
+    react-fast-compare "^2.0.2"
+    react-side-effect "^1.1.0"
+
 react-helmet@^6.0.0-beta:
   version "6.0.0-beta"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.0.0-beta.tgz#1f2ac04521951486e4fce3296d0c88aae8cabd5c"