search

PacktPublishing / starter-blog

Hands-On Web Development with React and GatsbyJS [Video], by Packt Publishing
9 stars 13 forks source link

readme

Starter Blog

Created by Rachelle Rathbone.

Hey everyone! Thanks for taking my Packt Publishing course! If you run into any issues while working your way through the sections feel free to ping me on twitter @coding_love or email me at gatsbystartblog@gmail.com. I'll do my best to respond to you as quickly as possible. Happy learning :)

NOTE: If you try to run gatsby develop on the master branch before completing section six, you will get an error. You need to set up a Contentful account and add environment variables to a .env file for this to run without error.

Prerequisites

Jump Ahead:

SectionOne

What is GatsbyJS?

What was covered in this section:

Resources:

Installing Gatsby and cloning our Gatsby project

What was covered in this section:

Resources:

Overview of typography and styling

What was covered in this section:

Resources:

Using React Helmet to add metadata

What was covered in this section:

Code you won't want to type:

  htmlAttributes={{
    lang
  }}
  title={title}
  meta={[
    {
       name: `description`,
       content: metaDescription,
     },
     {
       property: `og:title`,
       content: title,
     },
     {
       property: `og:description`,
       content: metaDescription,
     },
     {
       property: `og:type`,
       content: `website`,
     },
     {
       name: `twitter:card`,
       content: `summary`,
     },
     {
       name: `twitter:creator`,
       content: `Rachelle Rathbone`,
     },
     {
       name: `twitter:title`,
       content: title,
     },
     {
       name: `twitter:description`,
       content: metaDescription,
     }
  ].concat(meta)}

Resources:

Creating a new page and linking between pages

What was covered in this section:

SectionTwo

Querying Data with GraphQL

Introduction to GraphQL

What was covered in this section:

Querying data in pages with GraphQL

What was covered in this section:

Our query from the first video:

query {
  site {
    siteMetadata {
      title
      author
    }
  }
}

Using the StaticQuery API

What was covered in this section:

Updating seo.js with useStaticQuery hook

What was covered in this section:

SectionThree

Source Plugins

What was covered in this section:

Transformer Plugins

What was covered in this section:

Resources:

Welcome to the Gatsby Plugin Library

What was covered in this section:

Resources:

Tracking Events with Plugins

What was covered in this section:

Resources:

Increase Your Click Rates with Social Cards

What was covered in this section:

Resouces:

Options for your social card plugin config:

options: {
  title: {
    field: "title",
    font: "DejaVuSansCondensed",
    color: "black", // black|white
    size: 48, // 16|24|32|48|64
    style: "bold", // normal|bold|italic
    x: null, // Will default to xMargin
    y: null, // Will default to yMargin
  },
  meta: {
    parts: [
      "- ",
      { field: "author" },
      " » ",
      { field: "date", format: "mmmm dS" },
    ],
    font: "DejaVuSansCondensed",
    color: "black", // black|white
    size: 24, // 16|24|32|48|64
    style: "normal", // normal|bold|italic
    x: null, // Will default to xMargin
    y: null, // Will default to cardHeight - yMargin - size
  },
  background: "#FFFFFF", // Background color for the card
  xMargin: 24, // Edge margin used when x value is not set
  yMargin: 24,// Edge margin used when y value is not set
}

SectionFour

Programmatically Creating Pages

Making Our Post Markdown Files

What was covered in this section:

Resources:

Prismjs option config code:

  options: {
    // Class prefix for <pre> tags containing syntax highlighting;
    // defaults to 'language-' (eg <pre class="language-js">).
    // If your site loads Prism into the browser at runtime,
    // (eg for use with libraries like react-live),
    // you may use this to prevent Prism from re-processing syntax.
    // This is an uncommon use-case though;
    // If you're unsure, it's best to use the default value.
    classPrefix: "language-",
    // This is used to allow setting a language for inline code
    // (i.e. single backticks) by creating a separator.
    // This separator is a string and will do no white-space
    // stripping.
    // A suggested value for English speakers is the non-ascii
    // character '›'.
    inlineCodeMarker: null,
    // This lets you set up language aliases.  For example,
    // setting this to '{ sh: "bash" }' will let you use
    // the language "sh" which will highlight using the
    // bash highlighter.
    aliases: {},
    // This toggles the display of line numbers globally alongside the code.
    // To use it, add the following line in src/layouts/index.js
    // right after importing the prism color scheme:
    //  `require("prismjs/plugins/line-numbers/prism-line-numbers.css");`
    // Defaults to false.
    // If you wish to only show line numbers on certain code blocks,
    // leave false and use the {numberLines: true} syntax below
    showLineNumbers: false,
    // If setting this to true, the parser won't handle and highlight inline
    // code used in markdown i.e. single backtick code like `this`.
    noInlineHighlight: false,
    // This adds a new language definition to Prism or extend an already
    // existing language definition. More details on this option can be
    // found under the header "Add new language definition or extend an
    // existing language" below.
    languageExtensions: [
      {
        language: "superscript",
        extend: "javascript",
        definition: {
          superscript_types: /(SuperType)/,
        },
        insertBefore: {
          function: {
            superscript_keywords: /(superif|superelse)/,
          },
        },
      },
    ],
  },
}

Building Our Web App's Post Template

What was covered in this section:

Working with the createPage API in gatsby-node.js

What was covered in this section:

Resources:

Adding the onCreateNode API and updating our query

What was covered in this section:

Writing a Page Query to Our Web App Template

What was covered in this section:

Code for our previous and next links:

<ul>
  <li className="post-navigation">
    {previous && (
      <Link to={previous.fields.slug} rel="prev">
        ← {previous.frontmatter.title}
      </Link>
    )}
  </li>
  <li className="post-navigation">
    {next && (
      <Link to={next.fields.slug} rel="next">
        {next.frontmatter.title} →
      </Link>
    )}
  </li>
</ul>

SectionFive

Working with Images in Gatsby

Before we start... Don't forget to

Importing Files with GraphQL

What was covered in this section:

Resources:

Using Gatsby Image

What was covered in this section:

Resources:

Adding Images to Our Markdown Files

What was covered in this section:

Resources:

Adding Videos to Our App

What was covered in this section:

Resources:

SectionSix

Contenful - Content Infrastructure

What is Contentful?

What was covered in this section:

Creating a Contentful account

What was covered in this section:

Resources:

Connecting Gatsby to Contentful

What was covered in this section:

Resources:

Updating gatsby-node with a Contentful query

What was covered in this section:

Updating our app to consume posts from Contentful

What was covered in this section:

Resources:

SectionSeven

Deploying Your App

Deploying and Hosting

What was covered in this section:

Creating a Netlify Account

What was covered in this section:

Resources:

Linking to your repository and deploying your web app

What was covered in this section:

Updating your app

What was covered in this section:

Upping the game with Gatsby Preview

What was covered in this section:

Resources: