Merge pull request #1 from edieblu/master

full course notes 💃

00-intro-and-welcome.md

@@ -0,0 +1,35 @@
+# Intro and Welcome
+
+**[📹 Video](https://egghead.io/playlists/building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb)**
+
+
+## Notes on Notes 🤓
+
+This is a rather fast-paced course and some knowledge of React, the command line and GitHub is required to fully benefit from it. Chris will cover a lot of ground in just 13 videos and I recommended that you watch the collection several times. In between the main content (building the Jamstack application) Chris mentions several tips for improved worfklow, preferred tools and other recommendations that I've included in these notes as well. All in all, you will learn a lot, but try not to blink, or you might miss something 😃.
+
+## What is Jamstack?
+
+JamStack stands for:
+- JavaScript
+- APIs
+- Markup
+
+And so it is a "modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup".
+
+🤔 More on [jamstack.wtf](https://jamstack.wtf/#what-is-jamstack).
+
+## Who is Chris Biscardi? 👨‍💻
+
+Chris helps early stage open-source based startups like Gatsby and Docker build products. He gets excited about open source, works across a full stack (from design to containers), and lifts heavy objects to relax.
+
+[Other Egghead content](https://egghead.io/instructors/chris-biscardi) created by Chris.
+
+### Emoji Legend
+
+| emoji| explanation              |
+| -----|:------------------------:|
+| 📹   | links to the course video|
+| 💻   | course repository        |
+| ⌨️    | keyboard shortcut        |
+| 🤔   | additional resources     |
+| 👍   | good practice            |

01-initializing-a-new-git-repo-with-github-s-hub-cli.md

@@ -0,0 +1,42 @@
+# Initializing a new git repo with Github's hub CLI
+
+**[📹 Video](https://egghead.io/lessons/git-initializing-a-new-git-repo-with-github-s-hub-cli?pl=building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb)**
+
+**[💻 Code](https://github.com/christopherbiscardi/serverless-todo-netlify-fauna-egghead/tree/6675157984acc6972c038b09be20c54e2588fc6e)**
+
+**Objective**: Let's initialize our project.
+
+* `git init .`
+
+Initialize a new repository.
+
+* `echo "Serverless TODOs" > README.md`
+
+Add a readme file.
+
+* `git add README.md`
+* `git commit -m "initial commit"`
+
+To add and commit the README file to the repository.
+
+* `which git`
+
+To see which binary your `git` is aliased to. (For me it was `/usr/local/bin/git`, for Chris, `git` is alised to `hub`).
+
+🤔 Install the command-line tool [Hub](https://github.com/github/hub) for easier Github wrangling.
+
+* `brew install hub`
+
+👍 If you are using `homebrew` as your package manager.
+
+* `hub create`
+
+This will create a github repository and output the repository link.
+
+👍 You'll have to add your username and password when using `hub` for the first time.
+
+👍 If you want to make a link clickable in your command line (at least in `iterm`), press `cmd` key then click.
+
+* `git push -u origin master`
+
+Push your local changes to your Github repository.

02-initialize-a-new-gatsby-project-with-a-gitignore-in-yarn-workspaces.md

@@ -0,0 +1,132 @@
+# Initialize a new Gatsby project with a gitignore in yarn workspaces
+
+**[📹 Video](https://egghead.io/lessons/gatsby-initialize-a-new-gatsby-project-with-a-gitignore-in-yarn-workspaces?pl=building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb)**
+
+**[💻 Code](https://github.com/christopherbiscardi/serverless-todo-netlify-fauna-egghead/tree/ef1942a300bc248a27e5667dd6ce61194837d30d)**
+
+**Objective**: Let's setup `yarn workspaces`.
+
+We will be working on a `gatsby` project using a `yarn workspaces` setup.
+
+* `yarn init -y`
+
+Initialize a new project using `yarn`. The `-y` flag is to get the default `package.json` setup.
+
+```js
+{
+  "name": "My amazing app",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "github@repo",
+  "author": "ME",
+  "license": "MIT"
+}
+```
+
+👍 If you're using VSCode as your text editor, you can open the contents of your current folder (in VSCode) with:
+
+* `code .`
+
+🤔 Notetaker's addition: [`yarn workspaces`](https://classic.yarnpkg.com/en/docs/workspaces/): are used when you're working with multiple packages in a single project. With `yarn workspaces` you can:
+
+-  set up a single `node_modules` without repetitions.
+- change the code of one of your packages and have those changes instantly visible to the other packages that use it.
+
+Add some extra configuration to the `package.json` file in order to use `yarn workspaces`:
+
+```js
+// required in your yarn workspace root package.json
+  "private": true,
+
+// pointing to any npm package inside the packages directory
+  "workspaces": [
+    "packages/*"
+  ]
+```
+
+Create a `packages` directory. Create another directory inside `packages` called `www` and initialize a new project with:
+
+* `yarn init -y`
+
+Your project's tree structure should look like this:
+```
+├── README.md
+├── package.json
+└── packages
+    └── www
+        └── package.json
+```
+
+Install dependencies:
+
+* `yarn add gatsby react react-dom`
+
+The `package.json` inside `www` should now look like this:
+
+```js
+{
+  "name": "www",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "gatsby": "^2.21.9",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  }
+}
+```
+
+Add a couple of scripts:
+
+```js
+  "scripts": {
+    "develop": "gatsby develop",
+    "build": "gatsby build",
+    "clean": "gatsby clean"
+  },
+
+```
+
+`develop` for development, `build` for production and `clean` will remove any caches.
+
+Create a `gatsby-config.js` file at the root of your `gatsby` project.
+
+```js
+module.exports = {};
+```
+
+Then create a `src/pages/index.js` (you'll have to create the two directories along with the file).
+
+Add the following to the `index.js` file (don't forget to import `React`!):
+
+```js
+import React from "react";
+export default props => (
+  <div>
+    <h1>My Amazing Site</h1>
+  </div>
+);
+```
+
+Which exports a simple `react` component.
+
+To run the project, go to the root of your project and type:
+
+* `yarn workspace www develop`
+
+
+ Your site will now be live on: `http://localhost:8000/`
+
+Create a `.gitignore` file at the root of the project and add:
+
+```bash
+.cache
+public
+```
+
+ Push to Github.
+
+ * `git browse`
+
+ 👍 To open the repository in the browser (if you've installed `hub`).

03-setting-up-continuous-deployment-for-a-gatsby-site-in-yarn-workspaces-using-netlify.md

@@ -0,0 +1,24 @@
+# Setting up continuous deployment for a Gatsby site in yarn workspaces using Netlify
+
+**[📹 Video](https://egghead.io/lessons/gatsby-setting-up-continuous-deployment-for-a-gatsby-site-in-yarn-workspaces-using-netlify?pl=building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb)**
+
+**Objective**: Let's deploy!
+
+We'll be deploying to [Netlify](https://www.netlify.com/), since it enables:
+- static site hosting
+- lambda functions
+
+Go to Netlify and:
+
+* Click on **New site from Git**, log into GitHub and add the repository - we'll be deploying from the `master` branch.
+
+**Build settings**:
+
+* Build command: `yarn workspace www build`
+* Publish directory: `packages/www/public`
+
+Click **Deploy site**!
+
+👍 Go to **Site settings** and **Change site name**.
+
+From now on, whenever we push changes to the GitHub repo, they will automatically be deployed to the live Netlify site as well!

04-taking-advantage-of-theme-ui-to-build-a-landing-page-on-a-gatsby-project-without-plugins.md

@@ -0,0 +1,77 @@
+# Taking advantage of theme-ui to build a landing page on a Gatsby project without plugins
+
+**[📹 Video](https://egghead.io/lessons/gatsby-taking-advantage-of-theme-ui-to-build-a-landing-page-on-a-gatsby-project-without-plugins?pl=building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb)**
+
+**[💻 Code](https://github.com/christopherbiscardi/serverless-todo-netlify-fauna-egghead/tree/43b5114e0b7cb055be0aa814cf895ce036eac6fe)**
+
+**Objective**: Let's add [Theme UI's](https://theme-ui.com/) `deep` preset for styling (this will make our site look pretty in no time!).
+
+Navigate to the `www` directory and add two dependencies:
+
+* `yarn add theme-ui @theme-ui/presets`
+
+👍 if you run into an integrity issue, run `yarn cache clean` (I didn't, but Chris did)
+
+* Create a file: `packages/www/wrap-root-element.js`
+
+With the following contents (copied from the `Theme UI` docs):
+
+```js
+const React = require("react");
+const { ThemeProvider } = require("theme-ui");
+
+// since we know which preset we'll be using, we can import deep directly
+const { deep } = require("@theme-ui/presets");
+
+// We need to add the container's max-width to the existing presets using object spread
+const tokens = {
+  ...deep,
+  sizes: { container: 1024 },
+};
+
+// change prop to element to work with Gatsby's wrapRootElement
+module.exports = ({ element }) => (
+  <ThemeProvider theme={tokens}>{element}</ThemeProvider>
+);
+```
+
+Create `packages/www/gatsby-ssr.js` and `packages/www/gatsby-browser.js` (they will have the same contents):
+
+```js
+const React = require("react");
+const wrapRootElement = require("./wrap-root-element");
+
+exports.wrapRootElement = wrapRootElement;
+```
+
+🤔 Notetaker's addition: "[`gatsby-ssr.js`](https://www.gatsbyjs.org/docs/api-files-gatsby-ssr/) lets you alter the content of static HTML files as they are being Server-Side Rendered (SSR) by Gatsby and Node.js.
+
+The above settings will allow for our theme to be available throughout the entire project.
+
+Let's add our theme wrapper to our `index.js` page:
+
+```js
+import React from "react";
+import { Container, Heading, Button, Flex } from "theme-ui";
+export default props => (
+  <Container>
+    <Flex sx={{ flexDirection: "column", padding: 3 }}>
+      <Heading as="h1">Get Stuff Done</Heading>
+      <Button
+        sx={{ marginTop: 2 }}
+        onClick={() => {
+          alert("clicked");
+        }}
+      >
+        Log In
+      </Button>
+    </Flex>
+  </Container>
+);
+```
+
+We've added a click handler to the button, which will pop out an alert when clicked.
+
+* We can add any custom styling to the `sx` prop.
+
+* `add`, `commit` and `push` changes to GitHub!

05-implementing-authentication-with-netlify-identity-react-hooks-and-gatsby.md

@@ -0,0 +1,58 @@
+# Implementing Authentication with Netlify Identity, React hooks, and Gatsby
+
+**[📹 Video](https://egghead.io/lessons/react-implementing-authentication-with-netlify-identity-react-hooks-and-gatsby?pl=building-a-serverless-jamstack-todo-app-with-netlify-gatsby-graphql-and-faunadb-53bb)**
+
+**[💻 Code](https://github.com/christopherbiscardi/serverless-todo-netlify-fauna-egghead/tree/eaa5f81458f76a0e0e15e0c3545aacfb9f7fb4c0)**
+
+**Objective**: Let's add [Netlify Identity](https://docs.netlify.com/visitor-access/identity/) to authenticate our users.
+
+Netlify Identify is based on [GoTrue](https://github.com/netlify/gotrue) API. We'll be using the [Netlify Identity Widget](https://github.com/netlify/netlify-identity-widget) (because it's the least complicated option). See the demo in action [here](https://identity.netlify.com/).
+
+
+To add it to our project:
+
+* `yarn add netlify-identity-widget`
+
+
+We'll import it to our `packages/www/src/pages/index.js` and initialize it.
+
+```js
+import netlifyIdentity from "netlify-identity-widget";
+
+netlifyIdentity.init({});
+```
+
+We'll fire up the widget on button click:
+
+```js
+      <Button
+        sx={{ marginTop: 2 }}
+        onClick={() => {
+          netlifyIdentity.open();
+        }}
+      >
+```
+
+The `index.js` should now look like [this](https://github.com/ChristopherBiscardi/serverless-todo-netlify-fauna-egghead/blob/eaa5f81458f76a0e0e15e0c3545aacfb9f7fb4c0/packages/www/src/pages/index.js).
+
+We will have to run the widget against our Netlify deployed site (not `localhost`). Make sure to enable **Identify** in your Netlify site settings - you just need to configure this once.
+
+👍 Note that Registration defaults to open - which is something you might want to change to "invite only" before making your site public.
+
+👍 Your build will fail once you've added `Identity`. To fix it, comment out the `netlifyIdentity.init({});`, deploy, then uncomment it again.
+
+👍 Use the `useEffect` hook to fire up the `Identity` on mount:
+
+```js
+  useEffect(() => {
+    netlifyIdentity.init({});
+  });
+```
+
+You can log the current user with:
+
+```js
+console.log(netlifyIdentity.currentUser());
+```
+
+Check out the full [`index.js` code](https://github.com/ChristopherBiscardi/serverless-todo-netlify-fauna-egghead/blob/2139683631518be8ead32b2a351d9b986cc49a8e/packages/www/src/pages/index.js).