Additional slide content.

smthomas · Mar 19, 2019 · ab0ddc7 · ab0ddc7
1 parent 6fcead7
commit ab0ddc7
Show file tree

Hide file tree

Showing 23 changed files with 72 additions and 124 deletions.
diff --git a/README.md b/README.md
@@ -1,61 +1,8 @@
-# gatsby-starter-deck
+# Gatsby and Drupal Sitting in a Tree
 
-[![dependencies](https://img.shields.io/david/fabe/gatsby-starter-deck.svg)](./package.json)
-[![deploys by netlify](https://img.shields.io/badge/deploys%20by-netlify-00c7b7.svg)](https://www.netlify.com)
-[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+My slide deck (built with Gatsby) on how to use Gatsby with Drupal.
 
-Create presentations using Gatsby, React & Markdown. Inspired by Guillermo Rauch’s [deck on Next.js](https://deck.now.sh/) and [mdx-deck](https://github.com/jxnblk/mdx-deck).
+## Gatsby Starter Deck
 
-➡️ **[See a live example](//gatsby-deck.netlify.com)**
+Created with gatsby-starter-deck - https://github.com/fabe/gatsby-starter-deck
 
-## Installation
-
-### With [`gatsby-cli`](https://www.npmjs.com/package/gatsby-cli)
-
-```bash
-$ gatsby new my-slides https://github.com/fabe/gatsby-starter-deck
-```
-
-### With `git clone`
-
-```bash
-$ git clone my-slides [email protected]:fabe/gatsby-starter-deck.git
-$ cd my-slides
-$ yarn
-```
-
-## Usage
-
-Edit and extend your slides inside the `src/slides.md` file. Navigate with the arrow keys.
-
-```bash
-# To develop & write
-$ yarn develop
-
-# To build
-$ yarn build
-```
-
-## Writing
-
-By default, use [src/slides/](src/slides/).
-
-Markdown files are loaded in sorted path order. Slides are generated by
-splitting each markdown file along `<hr/>` elements (`---` in Markdown lingo).
-
-Examples:
-
-```md
-# This is the first slide
-
----
-
-## This is the second slide
-
-![Monkey](//i.imgur.com/PnbINJ6.gif)
-```
-
-## Authors
-
-- Fabian Schultz ([@fschultz\_](https://twitter.com/fschultz_))
-- Frank Murphy ([AnIrishDuck](https://github.com/AnIrishDuck))
diff --git a/src/layouts/index.css b/src/layouts/index.css
@@ -119,12 +119,15 @@ pre {
 
   color: var(--accent);
 }
-
+*/
 code {
   font-family: menlo, monospace;
-  font-size: 90%;
+  font-size: 1rem;
+  background-color: #2f4f4f;
+  padding: 20px;
+  color: white;
 }
-
+/*
 a:hover {
   color: var(--accent);
 }*/

diff --git a/src/slides/01-intro.md b/src/slides/01-intro.md
@@ -14,7 +14,7 @@ Shane Thomas
 
 - An Entrepreneurial Web Developer
 - Drupal and I go way back
-- Like to keep my pulse on the new hotness
+- Like to keep my pulse on the new trends
 
 </div>
 

diff --git a/src/slides/04-articletemplate.png b/src/slides/04-articletemplate.png
diff --git a/src/slides/04-content-types.png b/src/slides/04-content-types.png
diff --git a/src/slides/04-create.png b/src/slides/04-create.png
diff --git a/src/slides/04-create1.png b/src/slides/04-create1.png
diff --git a/src/slides/04-create12.png b/src/slides/04-create12.png
diff --git a/src/slides/04-create2.png b/src/slides/04-create2.png
diff --git a/src/slides/04-fields.png b/src/slides/04-fields.png
diff --git a/src/slides/04-gatsby-config.png b/src/slides/04-gatsby-config.png
diff --git a/src/slides/04-gatsby-config1.png b/src/slides/04-gatsby-config1.png
diff --git a/src/slides/04-jsonapi.png b/src/slides/04-jsonapi.png
diff --git a/src/slides/04-review.md b/src/slides/04-review.md
@@ -10,24 +10,39 @@ ___
 
 # Content Types
 
+<div class="image-slide">
+
+![Drupal Content Types](./04-content-types.png)
+
 - Drupal uses Content Types that allow you to store data.
 - These could be things like Blog Posts, Articles, Pages, or any type of "content" you want on your site.
 
+</div>
+
 ___
 
 # Fields
 
+<div class="image-slide">
+
+![Drupal Fields](./04-fields.png)
+
 - You can add fields to these content types
 - Fields could be any type of information related to that content
 - Examples are images, text, dates, taxonomy terms/categories
 
+</div>
+
 ___
 
 # Expose the Data
 
-We expose the data by turning on the *JSON:API* module
+<div class="image-slide">
+
+![Drupal Fields](./04-jsonapi.png)
 
-<cite>that's it</cite>
+- We expose the data by turning on the *JSON:API* module
+- <cite>that's it</cite>
 
 ___
 
@@ -51,20 +66,9 @@ npm install --save gatsby-source-drupal
 
 ___
 
+## In gatsby-config.js
 
-```
-// In your gatsby-config.js
-module.exports = {
-  plugins: [
-    {
-      resolve: `gatsby-source-drupal`,
-      options: {
-        baseUrl: `https://drupal-local.lndo.site/`,
-      },
-    },
-  ],
-}
-```
+![Gatsby Config](./04-gatsby-config1.png)
 
 ___
 
@@ -74,25 +78,17 @@ It allows us to pull in data using something that looks like...
 
 ___
 
-```
-{
-  allArticle {
-    edges {
-      node {
-        title
-        internalId
-        created(formatString: "DD-MMM-YYYY")
-      }
-    }
-  }
-}
-```
+![GraphQL Example](./04-teaser.png)
 
 ___
 
 ## Gatsby creates all of the pages in gatsby-node.js
 
-Using the CreatePages process (@todo look for code example)
+![GraphQL Example](./04-create.png)
+
+___
+
+![GraphQL Example](./04-create2.png)
 
 ___
 
@@ -104,9 +100,10 @@ as well a how to display that data
 
 ___
 
-## In the end, it's all React components
-
-This means you can do anything that you normally could do with React.
+![GraphQL Example](./04-articletemplate.png)
 
+___
 
+## In the end, it's all React components
 
+This means you can do anything that you normally could do with React.
diff --git a/src/slides/04-teaser.png b/src/slides/04-teaser.png
diff --git a/src/slides/04-teaser1.png b/src/slides/04-teaser1.png
diff --git a/src/slides/05-gotchas.md b/src/slides/05-gotchas.md
@@ -1,20 +1,27 @@
 ## There are some gotchas though
 
-[Funny image]
+[Add funny image here]
+
 ___
 
 # Images/Videos with Drupal Media
 
-Be default you need to look in *relationships {}* in your graphql query.
+<div class="image-slide">
+
+![Inline Images](./04-teaser.png)
+
+- By default you need to look in *relationships {}* in your graphql query.
+
+</div>
 
-[Screenshot]
 ___
 
 # Inline Images
 
 You have to go through extra steps to get images that are entered through the WYSIWYG editor.
 
-[Image]
+![Inline Images](./05-inline-images2.png)
+
 ___
 
 # Embedded video
@@ -33,26 +40,27 @@ ___
 
 # Hosting is... different
 
-[Funny Image]
-
 ___
 
 # Deploying a Gatsby site
 
+Step 1:
+
 ```
 gastby build
 ```
 
-Upload static files to hosting provider
+Step 2: Upload static files to hosting provider
 
 Overall, it's pretty simple
 
 ___
 
 # Hosting is...
 
-- Cheaper
-- More secure
+Cheaper
+
+More secure
 
 ___
 
@@ -70,16 +78,12 @@ ___
 
 # Pantheon
 
-[Pantheon Logo]
-
 Free development environment (which means you could host your Drupal backend for free)
 
 ___
 
 # Netlify, Github Pages, Cloudfront, etc
 
-[Logos]
-
 ___
 
 # Drupal Build Hooks Module
@@ -96,9 +100,11 @@ ___
 
 # Special Considerations
 
-- Multiple content editors
-- CDN concerns
-- Posts that need to go live at a specific time
+Multiple content editors
+
+CDN concerns
+
+Posts that need to go live at a specific time
 
 ___
 

diff --git a/src/slides/05-inline-images.png b/src/slides/05-inline-images.png
diff --git a/src/slides/05-inline-images2.png b/src/slides/05-inline-images2.png
diff --git a/src/slides/06-supercharge.md b/src/slides/06-supercharge.md
@@ -14,28 +14,23 @@ ___
 
 ## This would allow you to
 
-- Display dynamic content based on the user (orders, user info, etc)
-- Allow interactions that send data back to the Drupal site (adding comments, filling out contact forms, etc)
+Display dynamic content based on the user (orders, user info, etc)
+
+Allow interactions that send data back to the Drupal site (adding comments, filling out contact forms, etc)
 
 ___
 
 ## You could also do things like
 
-- Interact with a third party search library (like Solr)
-- Display search results with React components
-- Index the search results through your Drupal website
-
-___
+Interact with a third party search library (like Solr)
 
-# The Tech Stack
+Display search results with React components
 
-Image on the Trifecta of Gatsby, Drupal, and Solr
+Index the search results through your Drupal website
 
-Gatsby and Drupal are connected through GraphQL
-
-Gatsby and Solr are connected through Axios (or something similar)
+___
 
-Solr and Drupal are bucketed in Pantheon and communicate with each other directly
+# The Tech Stack
 
-Gatsby is bucketed on Netfily
+![Tech Stack](./06-techstack.png)
 
diff --git a/src/slides/06-techstack.png b/src/slides/06-techstack.png
diff --git a/src/slides/06-techstack2.png b/src/slides/06-techstack2.png
diff --git a/src/slides/08-outro.md b/src/slides/08-outro.md
@@ -4,7 +4,7 @@
 
 # Gatsby and Drupal can be a powerful combination
 
-![Third and Grove Logo](./01-titleslide.png)
+![Gatsby and Drupal](./01-titleslide.jpg)
 
 ___
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ @@
     # Gatsby and Drupal can be a powerful combination
-    ![Third and Grove Logo](./01-titleslide.png)
+    ![Gatsby and Drupal](./01-titleslide.jpg)
     ___
@@ Expand Down @@