feat(themes): gatsby official themes (#14276)

* adding wip gatsby blog theme

* move new blog theme from packages to themes dir

* feat(themes): Use new blog theme in example (#14301)

* Use new blog theme in theme example

* Move post in example theme

* Lint blog theme

* Fix lint issues in theme

* feat(themes): Use theme-ui for styles in blog theme (#14377)

* Use new blog theme in theme example

* Move post in example theme

* Disable global styles

* Disable global styles

* Disable typography.js styles

* Add ThemeProvider to blog theme

* Use theme-ui color mode in blog theme

* Add theme context to blog theme

* Update layout in blog theme

* Update styles in blog theme bio component

* Update blog theme footer styles

* Update blog theme page styles

* Remove unused css and typography config

* Adjust spacing in blog theme

* Update theme-ui dependency in blog theme

* Move prism colors in blog theme

* Adjust blog theme layout

* Remove raw color keys from blog theme

* Remove commented code in blog theme

* Update themes/gatsby-theme-blog/src/pages/404.js

Co-Authored-By: Jason Lengstorf <jason@lengstorf.com>

* Import prism styles in blog theme

* Move font imports in blog theme

* Move font imports in blog theme and format code

* Adjust highlight line styles in blog theme

* Remove global.css from blog theme

* Blog theme: update prism config to allow styling MDX inlineCode

* feat(themes): Add gatsbyesque colors (#14519)

* fix starter theme pkg name

* pass at gatsbyfied colors

* color changes

* rm unused var

* feat(themes): Clean up blog theme default content (#14523)

* get rid of mdx fragment in bio

* wip: fixing index page template

* add comments, mini refactor bio component

* 404 page consistency

* add shadowed site title

* fix: linting

* feat(themes): Clean up blog theme config (#14520)

* Remove netlify, analytics, and remark plugins from blog theme

* Use remark-autolink-headings in blog theme

* Use custom MDX components for linked headings in blog theme

* Remove unused style from blog theme

* feat(themes): Add emotion dep to blog theme (#14586)

* add emotion dependencies to blog theme

* add new starter example for just blog

* feat(themes): blog theme a11y fixes (#14719)

* rm heading markup on site title on secondary pages

* move bio and avatar content into header on root page

* incorporate main content into html main tag. Rm "as" when fixed in theme-ui

* add a few extra posts for testing

* pull out blog post footer

* no keywords fallback to empty array

* bump theme-ui version, add theme-ui-typography, rm explicit naming of main elements

* feat(themes): use gatsby-theme-ui in blog and notes themes (#14623)

* Test out gatsby-plugin-theme-ui in themes

* Test out theme-based plugin for blog and notes themes

* Update dependencies and config in themes

* Add components module for gatsby-theme-ui

* Update gatsby-theme-ui dependency

* Format code

* feat(themes): Standardize architecture across themes (#15090)

* consolidate wrapRootElement definitions

* use async-await instead of promises, remove lodash

* move content in theme starters

* add separate notes theme starter

* make blog and notes themes gatsby-node more consistent

* linting

* updated to contain to content directory, use contentPath instead of contentDir

* Update themes/gatsby-theme-blog/gatsby-config.js

Co-Authored-By: John Otander <johnotander@gmail.com>

* gatsby-theme-blog: Mdx -> BlogPost (#15243)

* gatsby-theme-blog: Mdx -> BlogPost

* add slug as required field so empty queries work

* add slug as required field so empty queries work

* feat(themes): add custom toggle switch component for blog theme (#14596)

* Add custom toggle switch component

* chore: format

* Use react-switch for dark mode button

* Format code

* feat(themes): Notes theme header (#15215)

* Use blog layout in notes pages in starter

* Update theme-ui dependencies

* Split out header component and remove theme-ui layout components

* Remove unused variables from layout

* Add container styles

* Shadow blog theme header

* Pass children to blog header component

* Use theme.sizes for blog theme layout

* Fix notes theme breadcrumb component

* Add gatsby-theme-ui to config

* Remove prop from theme starter header

* Add siteMetadata query to notes theme

* feat(themes): Blog theme tweaks (#15300)

* multiple image types for avatar

* consolidate footer content, change footer links from static

* update blog theme starter with necessary content shadowing, ui color shadowing, etc

* add keys to social link mapping

* change how theme colors are overridden

* Remove unused default props

* Adjust styles for react-switch

* Format code

* Remove prototype blog themes

themes/gatsby-starter-blog-theme/content/posts/hello-world.mdx

@@ -0,0 +1,31 @@
+---
+title: Hello World (example)
+date: 2019-04-15
+---
+
+Hello, world! This is a demo post for `gatsby-theme-blog`.
+
+Delete me, and get writing!
+
+```js:title=gatsby-config.js
+module.exports = {
+  __experimentalThemes: [
+    "gatsby-theme-blog", // highlight-line
+    "gatsby-theme-notes"
+  ]
+};
+```
+
+This is another paragraph after the code block.
+
+## This is a secondary heading
+
+```jsx
+import React from "react";
+import { ThemeProvider } from "theme-ui";
+import theme from "./theme";
+
+export default props => (
+  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+);
+```

themes/gatsby-starter-blog-theme/content/posts/my-second-post.mdx

@@ -0,0 +1,10 @@
+---
+title: My Second Post! (example)
+date: 2019-05-15
+---
+
+Wow! I love blogging so much already.
+
+Did you know that "despite its name, salted duck eggs can also be made from chicken eggs, though the taste and texture will be somewhat different, and the egg yolk will be less rich."? ([Wikipedia Link](http://en.wikipedia.org/wiki/Salted_duck_egg))
+
+Yeah, I didn't either.

themes/gatsby-starter-blog-theme/gatsby-config.js

@@ -0,0 +1,25 @@
+module.exports = {
+  __experimentalThemes: [
+    {
+      resolve: `gatsby-theme-blog`,
+      options: {},
+    },
+  ],
+  // Customize your site metadata:
+  siteMetadata: {
+    title: `My Blog Title`,
+    author: `My Name`,
+    description: `My site description...`,
+    siteUrl: `https://www.gatsbyjs.org/`,
+    social: [
+      {
+        name: `twitter`,
+        url: `https://twitter.com/gatsbyjs`,
+      },
+      {
+        name: `github`,
+        url: `https://github.com/gatsbyjs`,
+      },
+    ],
+  },
+}

themes/gatsby-starter-blog-theme/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "gatsby-starter-blog-theme",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build"
+  },
+  "dependencies": {
+    "gatsby": "^2.3.23",
+    "gatsby-theme-blog": "*",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  }
+}

themes/gatsby-starter-blog-theme/src/gatsby-theme-blog/components/bio-content.js

@@ -0,0 +1,16 @@
+import React, { Fragment } from "react"
+import { Styled } from "theme-ui"
+
+/**
+ * Change the content to add your own bio
+ */
+
+export default () => (
+  <Fragment>
+    This is where <Styled.a href="http://example.com/">your name</Styled.a>
+    {` `}
+    goes.
+    <br />
+    Or whatever, you make the rules.
+  </Fragment>
+)

themes/gatsby-starter-blog-theme/src/gatsby-theme-blog/gatsby-theme-ui/colors.js

@@ -0,0 +1,25 @@
+import merge from "lodash.merge"
+import defaultThemeColors from "gatsby-theme-blog/src/gatsby-theme-ui/colors"
+
+/*
+ * Want to change your theme colors?
+ * Try uncommenting the color overrides below
+ * to go from default purple to a blue theme
+ */
+
+// const blue60 = `#007acc`
+// const blue30 = `#66E0FF`
+// const blueGray = `#282c35`
+
+export default merge({}, defaultThemeColors, {
+  // text: blueGray,
+  // primary: blue60,
+  // heading: blueGray,
+  // modes: {
+  //   dark: {
+  //     background: blueGray,
+  //     primary: blue30,
+  //     highlight: blue60,
+  //   },
+  // },
+})

themes/gatsby-starter-notes-theme/gatsby-config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  __experimentalThemes: [
+    {
+      resolve: `gatsby-theme-notes`,
+      options: {},
+    },
+  ],
+  siteMetadata: {
+    title: `Site title`,
+  },
+}

themes/gatsby-starter-notes-theme/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "gatsby-starter-notes-theme",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build"
+  },
+  "dependencies": {
+    "gatsby": "^2.3.23",
+    "gatsby-theme-notes": "*",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  }
+}

themes/gatsby-starter-theme/content/notes/example-dir/hi.mdx

@@ -0,0 +1 @@
+# Hi

themes/gatsby-starter-theme/content/notes/hello.mdx

@@ -0,0 +1 @@
+# Hello!

themes/gatsby-starter-theme/content/posts/hello-world.mdx

@@ -0,0 +1,29 @@
+---
+title: Hello World
+date: 2019-04-15
+---
+
+Hello, world! This is a demo post for `gatsby-theme-blog`.
+
+```js:title=gatsby-config.js
+module.exports = {
+  __experimentalThemes: [
+    "gatsby-theme-blog", // highlight-line
+    "gatsby-theme-notes",
+  ],
+}
+```
+
+This is another paragraph after the code block.
+
+## This is a secondary heading
+
+```jsx
+import React from "react"
+import { ThemeProvider } from "theme-ui"
+import theme from "./theme"
+
+export default props => (
+  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+)
+```

themes/gatsby-starter-theme/content/posts/my-second-post.mdx

@@ -0,0 +1,10 @@
+---
+title: My Second Post!
+date: 2019-05-15
+---
+
+Wow! I love blogging so much already.
+
+Did you know that "despite its name, salted duck eggs can also be made from chicken eggs, though the taste and texture will be somewhat different, and the egg yolk will be less rich."? ([Wikipedia Link](http://en.wikipedia.org/wiki/Salted_duck_egg))
+
+Yeah, I didn't either.

themes/gatsby-theme-blog/src/pages/hi-folks/index.md → themes/gatsby-starter-theme/content/posts/new-beginnings.mdx

@@ -1,6 +1,6 @@
 ---
 title: New Beginnings
-date: "2015-05-28T22:40:32.169Z"
+date: 2019-05-29
 ---
 
 Far far away, behind the word mountains, far from the countries Vokalia and

themes/gatsby-starter-theme/gatsby-config.js

@@ -1,17 +1,17 @@
 module.exports = {
   __experimentalThemes: [
-    {
-      resolve: `gatsby-theme-blog-mdx`,
-      options: {},
-    },
     {
       resolve: `gatsby-theme-notes`,
       options: {
-        mdx: false,
-        notesPath: `/txt`,
-        homeText: `HOME`,
-        breadcrumbSeparator: `⚡️`,
+        mdx: true,
+        basePath: `/notes`,
       },
     },
+    // with gatsby-theme-ui, the last theme in the config
+    // will override the theme-ui context from other themes
+    { resolve: `gatsby-theme-blog` },
   ],
+  siteMetadata: {
+    title: `Shadowed Site Title`,
+  },
 }

themes/gatsby-starter-theme/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "gatsby-starter-theme-blog",
+  "name": "gatsby-starter-theme",
   "private": true,
   "version": "0.0.1",
   "scripts": {
@@ -9,8 +9,8 @@
   },
   "dependencies": {
     "gatsby": "^2.3.23",
-    "gatsby-theme-blog-mdx": "0.0.1",
-    "gatsby-theme-notes": "0.0.1",
+    "gatsby-theme-blog": "*",
+    "gatsby-theme-notes": "*",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   }

themes/gatsby-starter-theme/src/gatsby-theme-blog/components/header.js

@@ -0,0 +1,26 @@
+import React from "react"
+import { Link } from "gatsby"
+import { css, Styled } from "theme-ui"
+import Header from "gatsby-theme-blog/src/components/header"
+
+export default props => (
+  <Header {...props}>
+    <Styled.a
+      as={Link}
+      to="/notes"
+      css={css({
+        ml: 2,
+        mr: `auto`,
+        fontFamily: `heading`,
+        fontWeight: `bold`,
+        textDecoration: `none`,
+        color: `inherit`,
+        ":hover": {
+          textDecoration: `underline`,
+        },
+      })}
+    >
+      Notes
+    </Styled.a>
+  </Header>
+)

themes/gatsby-starter-theme/src/gatsby-theme-notes/components/layout.js

@@ -0,0 +1,4 @@
+import React from "react"
+import BlogLayout from "gatsby-theme-blog/src/components/layout"
+
+export default props => <BlogLayout {...props}>{props.children}</BlogLayout>