feat: merge the Gatsby themes version of the site upstream (#18)

* feat: switch from WordPress to Gatsby (#1)

* Updates to home page introduction

* Front Page update 09.04.2017

* header changes 09.04.2017

* Update header.php

* chore: initial repo setup

* feat: initial site structure

* feat: get page and post content building

* feat: IA + progress on home page

* feat: add some of the old site’s posts

* feat: make all home page text dynamic

* feat: style and layout improvements

* feat: add more posts from the old WP site

* feat: add Twitter plugin

* feat: add remaining blog posts

* refactor: move all markdown under one directory

* feat: add numbered footnotes + stylelint

* feat: add blog previews and rough styles

* feat: move to gatsby@2

* feat: remove WP files

* feat: add a README

* fix: update footer styles for larger screens (#2)

* Updates to home page introduction

* Front Page update 09.04.2017

* header changes 09.04.2017

* Update header.php

* fix: adjust footer styles for larger screens

* feat: add a styled contact form (#3)

* feat: WIP contact form

* feat: add trailing slashes to match stored slug

* feat: style contact form

* fix: add form-name hidden field to make Netlify happy

* feat: article previews, page content, CSS-in-JS (#4)

* feat: rename portfolio to work

* feat: add template for speaking gigs

* fix: update article template

* feat: update nav, add colors

* feat: update home page headline and image

* fix: update styles, add external link support

* feat: update styles

* feat: add location for post layout

* feat: remove styles

* feat: set color variables in context

* feat: remove articles from nav

The articles page will still exist to avoid any SEO problems, but it won’t be linked from anywhere.

* fix: add redirect from old blog URL

* chore: upgrade dependencies

* fix: remove all CSS modules

* feat: use Link from gatsby, upgrade dependencies

* feat: move fonts

* feat: update buttons to use new style

* feat: refactor Header to be less of a spaghettish nightmare

* feat: I, for one, welcome our new CSS-in-JS overlords

* feat: refactor for simplicity + CSS-in-JS

* feat: style cleanup and minor tweaks (#6)

* feat: add favicons

* chore: remove stylelint since we’re not using it

* feat: button animation, screen reader text, global styles

* feat: improve outline appearance for focus/hover

* chore: remove unused page

* feat: improve blog preview styles

* feat: minor style tweaks and polish

* feat: convert to SPA (#7)

* feat: add favicons

* chore: remove stylelint since we’re not using it

* feat: button animation, screen reader text, global styles

* feat: improve outline appearance for focus/hover

* chore: remove unused page

* feat: improve blog preview styles

* feat: minor style tweaks and polish

* feat: add Airtable source

* feat: update templates for SPA configuration

* feat: convert to SPA per Marisa’s design

* fix: remove unnecessary footer nav items

"home" goes to the same place as "about" now.

* fix: miscellaneous compatibility and a11y fixes (#8)

* feat: lazy load images in the process section (#9)

This addresses Lighthouse recommendations and should boost the perf score.

* feat: add offline support (#10)

* feat: add webfonts from Typekit (#11)

* fix: switch to async web font loading (#12)

* fix: font weights

* fix: update meta tags and add missing social image

* fix: try data attribute to fix Netlify spam

* chore: upgrade dependencies

* feat: migrate to Gatsby themes + Sanity (#15)

* feat: Sanity-powered blog w/MDX-powered pages

* feat: set up the theme to be publishable

* fix: tweaks and adjustments to get a build working

* fix: add lockfile and remove env var setup that didn’t work

* fix: add a lockfile and Node version

* fix: I am bad at environment variables

* fix: use Gatsby images

* fix: bump dependencies

* feat: add Sanity studio

* feat: add an SEO component

* chore: remove unused deps, add react-helmet

* feat: refactor post object to a more generic shape + add SEO component

* feat: use plain text description instead of Portable Text

* fix: meta key

* feat: add path to posts

* fix: upgrade Sanity + add guard for missing slugs

* feat: switch over to use theme-ui

* wip: trying to get a Twitter embed preview working

* feat: add call script PDF

* feat: add support for Twitter embeds

* fix: temporarily disable Twitter embed previews pending bugfix from Sanity team

* chore: upgrade deps

* fix: work around Theme UI p collision

see system-ui/theme-ui#194

* feat: add blockquote styles

* fix: mobile nav styles

* fix: clean up typography

* fix: add specificity hack

* chore: upgrade deps

* feat: add contact confirmation page

.gitignore

@@ -0,0 +1,68 @@
+.DS*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env*
+!.env*EXAMPLE
+
+.cache/
+public
+yarn-error.log
+
+# Netlify stuff that I don’t think we need
+.netlify

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

LICENSE

@@ -0,0 +1,7 @@
+Copyright 2019 Marisa Morby
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,24 @@
+# MarisaMorby.com
+
+This is Marisa Morby’s website source code. It’s made of two parts:
+
+1. A Gatsby theme that loads blog posts from Sanity.io and creates pages for them
+2. A Gatsby site that implements and extends the theme to include the rest of the pages and styling
+
+## Development Instructions
+
+This repo is a [Yarn workspace](https://yarnpkg.com/en/docs/workspaces). This makes it easier to develop the site while tweaking the underlying theme.
+
+To run the site locally:
+
+```sh
+# clone the repo and move into the project
+git clone [email protected]:jlengstorf/marisamorby.com.git
+cd marisamorby.com/
+
+# install dependencies
+yarn
+
+# start the development server
+yarn workspace site develop
+```

package.json

@@ -0,0 +1,8 @@
+{
+  "private": true,
+  "workspaces": [
+    "packages/*",
+    "site",
+    "studio"
+  ]
+}

packages/gatsby-theme-blog-sanity/README.md

@@ -0,0 +1,52 @@
+# gatsby-theme-blog-sanity
+
+A Gatsby theme to pull blog posts from Sanity.io.
+
+To install:
+
+```sh
+# in your Gatsby project, install the theme
+yarn add gatsby-theme-blog-sanity
+```
+
+In your `gatsby-config.js`:
+```js
+module.exports = {
+  __experimentalThemes: [
+    'gatsby-theme-blog-sanity'
+  ]
+}
+```
+
+## Options
+
+option        | default                                  | description
+------------- | ---------------------------------------- | -----------------------------------------
+projectId     |                                          | the Sanity project ID from Sanity Studio
+dataset       |                                          | the Sanity dataset (usually "production" by default)
+token         |                                          | a Sanity read token (see your [API settings](https://manage.sanity.io))
+watchMode     | `true` in develop, `false` in production | when true, updates the UI in real time during development
+overlayDrafts | `true` in develop, `false` in production | when true, displays draft content
+
+### How to set options via `gatsby-config.js`
+
+In your `gatsby-config.js`:
+
+```js
+module.exports = {
+  __experimentalThemes: [
+    {
+      resolve: 'gatsby-theme-blog-sanity',
+      options: {
+        sanity: {
+          projectId: 'xxx',
+          dataset: 'production',
+          token: 'xxx',
+          watchMode: true,
+          overlayDrafts: false,
+        }
+      }
+    }
+  ]
+}
+```

packages/gatsby-theme-blog-sanity/gatsby-config.js

@@ -0,0 +1,25 @@
+const isProd = process.env.NODE_ENV === 'production';
+
+module.exports = ({ baseUrl = '', image = '', sanity = {} }) => ({
+  siteMetadata: {
+    title: 'Gatsby Blog Powered By Sanity',
+    description: 'This is a Gatsby blog that uses Sanity.io for writing posts.',
+    baseUrl, // used to create absolute URLs for SEO
+    image, //
+  },
+  plugins: [
+    'gatsby-plugin-theme-ui',
+    {
+      resolve: 'gatsby-source-sanity',
+      options: {
+        projectId: sanity.projectId || process.env.GATSBY_SANITY_PROJECT_ID,
+        dataset: sanity.dataset || process.env.GATSBY_SANITY_DATASET,
+        token: sanity.token || process.env.SANITY_READ_TOKEN,
+        watchMode: sanity.watchMode || !isProd,
+        overlayDrafts: sanity.overlayDrafts || !isProd,
+      },
+    },
+    'gatsby-plugin-react-helmet',
+    'gatsby-plugin-emotion',
+  ],
+});

packages/gatsby-theme-blog-sanity/gatsby-node.js

@@ -0,0 +1,85 @@
+const _ = require('lodash');
+const { paginate, groupPostsByCategory } = require('./gatsby-utils/pagination');
+
+exports.createPages = async ({ graphql, actions, reporter }, options) => {
+  const result = await graphql(`
+    query {
+      allSanityPost(
+        filter: { slug: { current: { ne: null } }, publishedAt: { ne: null } }
+        sort: { fields: publishedAt, order: DESC }
+      ) {
+        nodes {
+          id
+          title
+          description
+          slug {
+            current
+          }
+          categories {
+            title
+          }
+          mainImage {
+            asset {
+              fixed(width: 150, height: 150) {
+                base64
+                height
+                src
+                srcSet
+                srcSetWebp
+                srcWebp
+                width
+              }
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  if (result.errors) {
+    reporter.panic('unable to load posts from Sanity', result.errors);
+  }
+
+  const posts = (result.data.allSanityPost.nodes || []).map(post => ({
+    ...post,
+    path: options.includePathInPosts
+      ? `${options.path}/${post.slug.current}`
+      : `/${post.slug.current}`,
+  }));
+
+  // create a page for each post
+  posts.forEach(post => {
+    actions.createPage({
+      path: post.path,
+      component: require.resolve('./src/templates/post.js'),
+      context: {
+        id: post.id,
+        postPath: post.path,
+      },
+    });
+  });
+
+  const paginationDefaults = {
+    createPage: actions.createPage,
+    component: require.resolve('./src/templates/post-previews.js'),
+  };
+
+  // create pages for all posts
+  paginate(posts, {
+    ...paginationDefaults,
+    pathTemplate: `${options.path}/<%= pageNumber %>`,
+  });
+
+  // create category-specific pages
+  const postsByCategory = groupPostsByCategory(posts);
+
+  Object.entries(postsByCategory).forEach(([category, postGroup]) => {
+    const catSlug = _.kebabCase(category);
+
+    paginate(postGroup, {
+      ...paginationDefaults,
+      pathTemplate: `${options.path}/category/${catSlug}/<%= pageNumber %>`,
+      category,
+    });
+  });
+};

packages/gatsby-theme-blog-sanity/gatsby-utils/pagination.js

@@ -0,0 +1,67 @@
+// we’re not sending this to the browser, so we don’t need to stress about bundle size
+const _ = require('lodash');
+
+const paginate = (
+  posts,
+  {
+    reporter = console,
+    postsPerPage = 10,
+    pathTemplate = '/blog/<%= pageNumber %>',
+    category = '.*', // load all posts by default
+    createPage,
+    component,
+  },
+) => {
+  if (posts.length < 1) {
+    reporter.error('no posts supplied');
+  }
+
+  const pages = _.chunk(posts, postsPerPage);
+
+  pages.forEach((group, index, allGroups) => {
+    const isFirstPage = index === 0;
+    const currentPage = index + 1;
+    const totalPages = allGroups.length;
+    const getPath = _.template(pathTemplate);
+    const path = getPath({ pageNumber: isFirstPage ? '' : currentPage });
+
+    createPage({
+      path,
+      component,
+      context: {
+        group,
+        category: `/${category}/`,
+        // TODO add a template for page headings
+        isFirstPage,
+        currentPage,
+        totalPages,
+        isLastPage: currentPage === totalPages,
+        linkBase: getPath({ pageNumber: '' }),
+      },
+    });
+  });
+};
+
+// get unique category titles from the Sanity data
+const getCategories = posts =>
+  _.map(_.uniqBy(_.flatMap(posts, 'categories'), 'title'), 'title');
+
+const groupPostsByCategory = posts => {
+  const categories = getCategories(posts);
+
+  return categories.reduce(
+    (grouped, unique) => ({
+      ...grouped,
+      [unique]: posts.filter(post => {
+        const cats = post.categories || [];
+        return cats.some(cat => cat.title === unique);
+      }),
+    }),
+    {},
+  );
+};
+
+module.exports = {
+  paginate,
+  groupPostsByCategory,
+};

packages/gatsby-theme-blog-sanity/index.js

@@ -0,0 +1 @@
+export { default as theme } from './src/theme';

packages/gatsby-theme-blog-sanity/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "gatsby-theme-blog-sanity",
+  "author": "Jason Lengstorf <[email protected]>",
+  "version": "1.0.2",
+  "main": "index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "gatsby": "^2.7.1",
+    "gatsby-image": "^2.1.1",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
+  },
+  "dependencies": {
+    "@emotion/core": "^10.0.14",
+    "@jlengstorf/react-tweet-embed": "^0.0.4",
+    "@mdx-js/react": "^1.0.27",
+    "@sanity/block-content-to-react": "^2.0.6",
+    "dotenv": "^8.0.0",
+    "gatsby-plugin-emotion": "^4.0.7",
+    "gatsby-plugin-react-helmet": "^3.0.12",
+    "gatsby-plugin-theme-ui": "^0.2.6",
+    "gatsby-source-sanity": "^5.0.1",
+    "lodash": "^4.17.11",
+    "react-helmet": "^5.2.1",
+    "theme-ui": "^0.2.14"
+  }
+}