diff --git a/LICENSE b/LICENSE index 78ad7ba..f53f167 100755 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019 Ryan Wiemer +Copyright (c) 2020 Ryan Wiemer Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index 6a6661d..5eef69b 100755 --- a/README.md +++ b/README.md @@ -23,16 +23,20 @@ A Gatsby theme for artists, photographers and other creative folks. [Demo Website](https://amsterdam.netlify.com/) +![](screenshots/demo.jpg) + ## Features - Minimal responsive design - Optional page transitions - Multiple grid options to display posts -- Customizable theme colors and typography +- Customizable theme colors and typography with Theme UI +- MDX support - SEO friendly component - Mobile menu - Optional scroll progress indicator -- Styled components +- Optional toggle to switch color modes +- Emotion using styled-components syntax - Tags - Pagination - Offline support @@ -49,7 +53,7 @@ gatsby new your-themed-site https://github.com/ryanwiemer/gatsby-starter-amsterd ### Manually Add To Your Site -Install the theme +1. Install the theme ```sh npm install --save gatsby-theme-amsterdam @@ -61,7 +65,7 @@ or yarn add gatsby-theme-amsterdam ``` -Add the theme to your `gatsby-config.js` +2. Add the theme to your `gatsby-config.js` ```javascript // gatsby-config.js @@ -81,15 +85,15 @@ module.exports = { ### Theme Options -| Key | Default Value | Description | -| ------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| `basePath` | `/` | Root URL for all posts. | -| `contentPath` | `/content` | Location of markdown files used for the posts. | | -| `transitions` | `true` | Include simple page transitions powered with [framer-motion](https://github.com/framer/motion) | -| `iconPath` | default icon | Path to the icon to be used for the favicon and web manifest. For example `'src/images/favicon.png'`. For best results provide a 512x512 square. | -| `postsPerPage` | `6` | Determines the number of posts shown on each page. This effects both the posts and tag template. | -| `grid` | `basic` | Determines the type of grid used on the posts and tag templates. Two available options: `basic` and `list`. | -| `progressIndicator` | `true` | Include a progress indicator on the post template. | +| Key | Default Value | Description | +| ------------------- | ------------- | ----------------------------------------------------------------------------------------------------------- | +| `basePath` | `/` | Root URL for all posts. | +| `contentPath` | `content` | Location of markdown files used for the posts. | | +| `transitions` | `true` | Include simple page transitions powered with [framer-motion](https://github.com/framer/motion) | +| `postsPerPage` | `6` | Determines the number of posts shown on each page. This effects both the posts and tag template. | +| `grid` | `basic` | Determines the type of grid used on the posts and tag templates. Two available options: `basic` and `list`. | +| `progressIndicator` | `true` | Include a progress indicator on the post template. | +| `colorToggle` | `true` | Include a button in the menu to toggle the color modes. | #### Example Usage @@ -101,9 +105,7 @@ module.exports = { resolve: 'gatsby-theme-amsterdam', options: { // basePath defaults to '/' - basePath: '/photography', - // the path to your icon file - iconPath: 'src/images/favicon.png', + basePath: 'photography', // grid defaults to 'basic' grid: 'list', }, @@ -126,6 +128,8 @@ module.exports = { description: 'My site description...', // Used for SEO. Do not include a trailing slash url: 'https://www.example.com', + // Used for SEO. Must be the full URL for the default image + image: 'https://www.example.com/og-image.jpg', // Used for SEO author: 'John Doe', // Used for an optional intro section at the top of the posts template @@ -162,45 +166,27 @@ module.exports = { ### Customization -Gatsby Theme Amsterdam uses [styled-components](https://github.com/styled-components/styled-components) and defines the theme related tokens in a file called `theme.js`. In order to change these values simply [shadow](https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/) the file and replace with your desired values. See the example below. +Gatsby Theme Amsterdam utilizes [Theme UI](https://theme-ui.com/). In order to customize the theme styling you must create a theme file and then override the default `amsterdamTheme` values. If you're familiar with Styled Components or Emotion it's the same as adapting the theme you pass to `ThemeProvider`. + +All default values can be viewed [here](https://github.com/ryanwiemer/gatsby-theme-amsterdam/blob/master/theme/src/gatsby-plugin-theme-ui/index.js). ```javascript -// Create a theme.js file located at 'src/gatsby-theme-amsterdam/styles/theme.js' +// src/gatsby-plugin-theme-ui/index.js + +import amsterdamTheme from 'gatsby-theme-amsterdam/src/gatsby-plugin-theme-ui' + export default { + ...amsterdamTheme, colors: { - base: '#292929', - secondary: '#686461', - tertiary: '#958E8E', - highlight: '#C29967', - background: '#F5F0EB', - border: '#DCD8D3', - button: '#E9E4DF', - text: '#292929', - code: '#E9E5E0', - }, - fonts: { - body: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', - heading: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', - normalWeight: '400', - boldWeight: '600', - }, - sizes: { - maxWidth: '1050px', - maxWidthCentered: '800px', - }, - responsive: { - small: '35em', - medium: '50em', - large: '70em', + ...amsterdamTheme.colors, + background: '#FCD5C0', }, } ``` ### Writing Content -Posts are written in markdown format `.md` and placed in the `content` directory at the root of the site unless a different `contentPath` is defined in the theme options. There are four front matter variables used in the theme which are shown below. +Posts are written in markdown / mdx format with either `.md` or `.mdx` and placed in the `content` directory at the root of the site unless a different `contentPath` is defined in the theme options. There are four front matter variables used in the theme which are shown below. ```markdown --- diff --git a/package.json b/package.json index b98f442..78c9118 100755 --- a/package.json +++ b/package.json @@ -11,13 +11,13 @@ "serve": "yarn workspace site serve" }, "devDependencies": { - "eslint": "5.16.0", + "eslint": "6.8.0", "eslint-config-gatsby-standard": "^2.2.0", - "prettier": "^1.18.2", - "stylelint": "10.1.0", - "stylelint-config-prettier": "^5.2.0", - "stylelint-config-standard": "^18.3.0", + "prettier": "^1.19.1", + "stylelint": "13.0.0", + "stylelint-config-prettier": "^8.0.1", + "stylelint-config-standard": "^19.0.0", "stylelint-config-styled-components": "^0.1.1", - "stylelint-processor-styled-components": "^1.8.0" + "stylelint-processor-styled-components": "^1.9.0" } } diff --git a/screenshots/demo.jpg b/screenshots/demo.jpg new file mode 100644 index 0000000..3dd7faf Binary files /dev/null and b/screenshots/demo.jpg differ diff --git a/site/content/public-transit-in-motion/Example.js b/site/content/public-transit-in-motion/Example.js new file mode 100644 index 0000000..3307254 --- /dev/null +++ b/site/content/public-transit-in-motion/Example.js @@ -0,0 +1,44 @@ +import React, { useState } from 'react'; +import styled from '@emotion/styled' + +const Wrapper = styled.button` + height: 150px; + width: 100%; + max-width: 300px; + background: ${props => props.theme.colors.highlight}; + margin: 0 0 1rem 0; + display: flex; + justify-content: center; + align-items: center; + padding: 1em; + border-radius: 2px; + cursor: pointer; +` + +const Text = styled.p` + color: white; + line-height: 1.5; +` + +const Number = styled.p` + color: white; + font-weight: ${props => props.theme.fonts.boldWeight}; + font-size: 2em; + margin: 0 0 1rem 0; +` + +const Box = props => { + const [count, setCount] = useState(0); + return ( + setCount(count + 1)}> +
+ + {count} + + {props.children} +
+ + ) +} + +export default Box diff --git a/site/content/public-transit-in-motion/index.md b/site/content/public-transit-in-motion/index.mdx similarity index 86% rename from site/content/public-transit-in-motion/index.md rename to site/content/public-transit-in-motion/index.mdx index 7ee71f7..054c151 100644 --- a/site/content/public-transit-in-motion/index.md +++ b/site/content/public-transit-in-motion/index.mdx @@ -43,6 +43,11 @@ tags: [photography, transit] 1. Item 2 1. Item 3 + +import Example from './Example' + +Mdx example. Click to increment. + ![test-image](cover.jpg) diff --git a/site/documentation/about.md b/site/documentation/about.md new file mode 100644 index 0000000..3996aa8 --- /dev/null +++ b/site/documentation/about.md @@ -0,0 +1,58 @@ +--- +title: About +description: Learn about Gatsby Theme Amsterdam +--- + +

+ Flag of the Netherlands + + Official flag of the Netherlands (source: + + Wikipedia + + ) + +

+ +**Gatsby Theme Amsterdam** was designed to be a minimal +and clean theme geared towards photographers, artists and other +creative folks. Inspired by the capital city of the Netherlands known +for its artistic heritage, impressive architecture and canals that +criss-cross the city. Truthfully I have never visited before but it +sounds like a pretty cool place so I decided to use the name. + +

+ +

+ +Created by **[Ryan Wiemer](https://twitter.com/ryanwiemer)** + +## Features + +- Minimal responsive design +- Optional page transitions +- Multiple grid options to display posts +- Customizable theme colors and typography with Theme UI +- MDX support +- SEO friendly component +- Mobile menu +- Optional scroll progress indicator +- Optional toggle to switch color modes +- Emotion using styled-components syntax +- Tags +- Pagination +- Offline support diff --git a/site/documentation/docs.md b/site/documentation/docs.md new file mode 100644 index 0000000..428af1e --- /dev/null +++ b/site/documentation/docs.md @@ -0,0 +1,175 @@ +--- +title: Docs +description: Documentation for Gatsby Theme Amsterdam +--- + +## Gatsby Theme Amsterdam + +A Gatsby theme for artists, photographers and other creative folks. + +

+ +

+ +## Installation + +### Use [Gatsby Starter Amsterdam](https://github.com/ryanwiemer/gatsby-starter-amsterdam) + +This will generate a new site pre-configured to use Gatsby Theme Amsterdam. + +```shell +gatsby new your-themed-site https://github.com/ryanwiemer/gatsby-starter-amsterdam +``` + +### Manually Add To Your Site + +1. Install the theme + +```shell +npm install --save gatsby-theme-amsterdam +``` + +or + +```shell +yarn add gatsby-theme-amsterdam +``` + +2. Add the theme to your `gatsby-config.js` + +```javascript +// gatsby-config.js +module.exports = { + plugins: [ + { + resolve: 'gatsby-theme-amsterdam', + options: { + // See theme options section for more information + }, + }, + ], +} +``` + +## Usage + +### Theme Options + +| Key | Default Value | Description | +| ------------------- | ------------- | ----------------------------------------------------------------------------------------------------------- | +| `basePath` | `/` | Root URL for all posts. | +| `contentPath` | `content` | Location of markdown files used for the posts. | | +| `transitions` | `true` | Include simple page transitions powered with [framer-motion](https://github.com/framer/motion) | +| `postsPerPage` | `6` | Determines the number of posts shown on each page. This effects both the posts and tag template. | +| `grid` | `basic` | Determines the type of grid used on the posts and tag templates. Two available options: `basic` and `list`. | +| `progressIndicator` | `true` | Include a progress indicator on the post template. | +| `colorToggle` | `true` | Include a button in the menu to toggle the color modes. | + +### Example Usage + +```javascript +// gatsby-config.js +module.exports = { + plugins: [ + { + resolve: 'gatsby-theme-amsterdam', + options: { + // basePath defaults to '/' + basePath: 'photography', + // grid defaults to 'basic' + grid: 'list', + }, + }, + ], +} +``` + +### Additional Configuration + +In addition to the theme options, there are a handful of items you can customize via the `siteMetadata` object in your site's `gatsby-config.js`. + +```javascript +// gatsby-config.js +module.exports = { + siteMetadata: { + // Used for the site title and SEO + title: 'My Site Title', + // Used for SEO + description: 'My site description...', + // Used for SEO. Do not include a trailing slash + url: 'https://www.example.com', + // Used for SEO. Must be the full URL for the default image + image: 'https://www.example.com/og-image.jpg', + // Used for SEO + author: 'John Doe', + // Used for an optional intro section at the top of the posts template + intro: 'John Doe is a photographer....', + // Used for the links in the menu + menuLinks: [ + { + name: 'Home', + slug: '/', + }, + { + name: 'About', + slug: '/about/', + }, + { + name: 'Contact', + slug: '/contact/', + }, + ], + // Used for the links in the footer + footerLinks: [ + { + name: 'Dribbble', + url: 'https://www.dribbble.com/johndoe', + }, + { + name: 'Instagram', + url: 'https://www.instagram.com/johndoe', + }, + ], + }, +} +``` + +### Customization + +Gatsby Theme Amsterdam utilizes [Theme UI](https://theme-ui.com/). In order to customize the theme styling you must create a theme file and then override the default `amsterdamTheme` values. If you're familiar with Styled Components or Emotion it's the same as adapting the theme you pass to `ThemeProvider`. + +All default values can be viewed [here](https://github.com/ryanwiemer/gatsby-theme-amsterdam/blob/master/theme/src/gatsby-plugin-theme-ui/index.js). + +```javascript +// src/gatsby-plugin-theme-ui/index.js + +import amsterdamTheme from 'gatsby-theme-amsterdam/src/gatsby-plugin-theme-ui' + +export default { + ...amsterdamTheme, + colors: { + ...amsterdamTheme.colors, + background: '#FCD5C0', + }, +} +``` + +### Writing Content + +Posts are written in markdown / mdx format with either `.md` or `.mdx` and placed in the `content` directory at the root of the site unless a different `contentPath` is defined in the theme options. There are four front matter variables used in the theme which are shown below. + +``` +--- +title: Hello World +date: 2019-07-06 +cover: cover.jpg +tags: [greeting, blog] +--- +``` diff --git a/site/documentation/faq.md b/site/documentation/faq.md new file mode 100644 index 0000000..b2ca9b9 --- /dev/null +++ b/site/documentation/faq.md @@ -0,0 +1,30 @@ +--- +title: FAQ +description: Frequently asked questions related to Gatsby Theme Amsterdam +--- + +### What is Gatsby? + +[Gatsby](https://www.gatsbyjs.org/) is a free and open source framework based on React that helps developers build blazing fast websites and apps. + +### What are Gatsby themes? + +[Gatsby themes](https://www.gatsbyjs.org/docs/themes/what-are-gatsby-themes) are pre-built, installable packages for setting up a site’s default styling, components, plugins, and overall configuration. This allows developers to have a fully functional Gatsby site with just a few lines of code. + +### What does a minimum setup look like? + +A minimum setup requires only two files. A `package.json` and `gatsby-config.js`. That will get the site up and running but to take advantage of the theme you will want to add content. For more information please review the [docs](/docs/). + +### Can Gatsby Theme Amsterdam be used alongside other themes? + +Yes. Gatsby Theme Amsterdam can be installed alongside other themes. + +### Why can't it do this, that or the other thing? + +Gatsby Theme Amsterdam was designed to be a minimal and clean theme geared towards photographers, artists and other creative folks. If you have an idea for an enhancement or feature that fits within that vision please log a ticket on [GitHub](https://github.com/ryanwiemer/gatsby-theme-amsterdam) or better yet submit a pull request. + +
+ +### Still have a question? + +Send me a tweet on Twitter [@ryanwiemer](https://twitter.com/ryanwiemer). diff --git a/site/gatsby-config.js b/site/gatsby-config.js index 77f3407..389610b 100755 --- a/site/gatsby-config.js +++ b/site/gatsby-config.js @@ -38,9 +38,22 @@ module.exports = { }, plugins: [ { - resolve: 'gatsby-theme-amsterdam', + resolve: `gatsby-plugin-manifest`, options: { - postsPerPage: 6, + name: `Gatsby Theme Amsterdam`, + short_name: `Amsterdam`, + background_color: `#f5f0eb`, + theme_color: `#f5f0eb`, + start_url: `/`, + display: `standalone`, + icon: require.resolve('./src/images/favicon.png'), + }, + }, + { + resolve: `gatsby-source-filesystem`, + options: { + path: `documentation`, + name: `documentation`, }, }, { @@ -51,5 +64,11 @@ module.exports = { pageTransitionDelay: 350, }, }, + { + resolve: 'gatsby-theme-amsterdam', + options: { + postsPerPage: 6, + }, + }, ], } diff --git a/site/gatsby-node.js b/site/gatsby-node.js new file mode 100644 index 0000000..3cb6e40 --- /dev/null +++ b/site/gatsby-node.js @@ -0,0 +1,114 @@ +const { createFilePath } = require(`gatsby-source-filesystem`) + +// Schema customization +exports.createSchemaCustomization = ({ actions, schema }) => { + actions.createTypes(` + type Page implements Node { + id: ID! + slug: String! + title: String + description: String + excerpt(pruneLength: Int = 140): String + body: String + } + `) +} + +// Helper to resolve mdx fields +const mdxResolverPassthrough = fieldName => async ( + source, + args, + context, + info +) => { + const type = info.schema.getType(`Mdx`) + const mdxNode = context.nodeModel.getNodeById({ + id: source.parent, + }) + const resolver = type.getFields()[fieldName].resolve + return resolver(mdxNode, args, context, { + fieldName, + }) +} + +// Pass mdx body and excerpt +exports.createResolvers = ({ createResolvers }) => { + createResolvers({ + Page: { + body: { + resolve: mdxResolverPassthrough(`body`), + }, + excerpt: { + resolve: mdxResolverPassthrough(`excerpt`), + }, + }, + }) +} + +// Create 'Page' nodes +exports.onCreateNode = async ( + { node, actions, getNode, createNodeId, createContentDigest }, + themeOptions +) => { + function generateSlug(...arguments_) { + return `/${arguments_.join('/')}`.replace(/\/\/+/g, '/') + } + + const contentPath = 'documentation' + + if (node.internal.type !== `Mdx`) { + return + } + + const parent = getNode(node.parent) + if (parent.sourceInstanceName !== contentPath) { + return + } + + // Create nodes + if (node.internal.type === `Mdx`) { + const filePath = createFilePath({ node, getNode }) + actions.createNode({ + id: createNodeId(`${node.id} >>> Page`), + slug: node.frontmatter.slug || generateSlug('/', filePath), + title: node.frontmatter.title, + description: node.frontmatter.description, + parent: node.id, + internal: { + type: 'Page', + contentDigest: createContentDigest(node.internal.contentDigest), + }, + }) + } +} + +// Create pages for documentation +exports.createPages = async ({ graphql, actions, reporter }) => { + const { createPage } = actions + const result = await graphql( + ` + { + allPage { + edges { + node { + slug + } + } + } + } + ` + ) + if (result.errors) { + reporter.panic(result.errors) + } + const pages = result.data.allPage.edges + pages.forEach((page, index) => { + createPage({ + path: page.node.slug, + component: require.resolve(`./src/templates/page`), + context: { + slug: page.node.slug, + }, + }) + }) +} diff --git a/site/package.json b/site/package.json index a419fc7..f55aed5 100755 --- a/site/package.json +++ b/site/package.json @@ -15,10 +15,11 @@ "clean": "gatsby clean" }, "dependencies": { - "gatsby": "^2.13.72", - "gatsby-plugin-google-analytics": "^2.1.8", + "gatsby": "^2.19.10", + "gatsby-plugin-google-analytics": "^2.1.34", + "gatsby-plugin-manifest": "^2.2.40", "gatsby-theme-amsterdam": "*", - "react": "^16.9.0", - "react-dom": "^16.9.0" + "react": "^16.12.0", + "react-dom": "^16.12.0" } } diff --git a/theme/src/images/favicon.png b/site/src/images/favicon.png similarity index 100% rename from theme/src/images/favicon.png rename to site/src/images/favicon.png diff --git a/site/src/pages/about.js b/site/src/pages/about.js deleted file mode 100644 index 418ec87..0000000 --- a/site/src/pages/about.js +++ /dev/null @@ -1,84 +0,0 @@ -import React from 'react' -import Container from 'gatsby-theme-amsterdam/src/components/Container' -import Content from 'gatsby-theme-amsterdam/src/components/Content' -import SEO from 'gatsby-theme-amsterdam/src/components/SEO' - -const AboutPage = ({ data }) => { - return ( - - - -

About

-

- Flag of the Netherlands - - Official flag of the Netherlands (source:{' '} - - Wikipedia - - ) - -

-

- Gatsby Theme Amsterdam was designed to be a minimal - and clean theme geared towards photographers, artists and other - creative folks. Inspired by the capital city of the Netherlands known - for its artistic heritage, impressive architecture and canals that - criss-cross the city. Truthfully I have never visited before but it - sounds like a pretty cool place so I decided to use the name. -

-

- -

-

- Created by{' '} - - - Ryan Wiemer - - -

-

Features

-
    -
  • Minimal responsive design
    • -
  • Optional page transitions
    • -
  • Multiple grid options to display posts
    • -
  • Customizable theme colors and typography
    • -
  • SEO friendly component
    • -
  • Mobile menu
    • -
  • Optional scroll progress indicator
    • -
  • Styled components
    • -
  • Tags
    • -
  • Pagination
    • -
  • Offline support
    • -
- - - ) -} - -export default AboutPage diff --git a/site/src/pages/docs.js b/site/src/pages/docs.js deleted file mode 100644 index 579afde..0000000 --- a/site/src/pages/docs.js +++ /dev/null @@ -1,656 +0,0 @@ -import React from 'react' -import Container from 'gatsby-theme-amsterdam/src/components/Container' -import Content from 'gatsby-theme-amsterdam/src/components/Content' -import SEO from 'gatsby-theme-amsterdam/src/components/SEO' - -const DocsPage = ({ data }) => { - return ( - - - -

Docs

-

Gatsby Theme Amsterdam

-

- A Gatsby theme for artists, photographers and other creative folks. -

-

- -

-

Installation

-

- Use{' '} - - Gatsby Starter Amsterdam - -

-

- This will generate a new site pre-configured to use Gatsby Theme - Amsterdam. -

-
- 
-            
-              gatsby new your-themed-site
-              https://github.com/ryanwiemer/gatsby-starter-amsterdam
-            
-
-
-

Manually Add To Your Site

-
    -
  1. Install the theme
    2. -
    - 
    -              
-                npm install --save gatsby-theme-amsterdam
-              
-
    -
    -

    or

    -
    - 
    -              
-                yarn add gatsby-theme-amsterdam
-              
-
    -
    -
  2. - Add the theme to your gatsby-config.js -
    3. -
    - 
    -              
-                {'//'} gatsby-config.js
-                
    
-                module.exports{' '}
-                ={' '}
-                {
-                
    
-                {'  '}plugins:{' '}
-                [
-                
    
-                {'    '}
-                {
-                
    
-                {'      '}resolve:{' '}
-                
-                  'gatsby-theme-amsterdam'
-                
-                ,
-                
    
-                {'      '}options:{' '}
-                {
-                
    
-                {'        '}
-                
-                  {'//'} See theme options section for more information
-                
-                
    
-                {'      '}
-                }
-                ,
-                
    
-                {'    '}
-                }
-                ,
-                
    
-                {'  '}
-                ]
-                ,
-                
    
-                }
-                  
-
    -
    -
-

Usage

-

Theme Options

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KeyDefault ValueDescription
- basePath - - / - Root URL for all posts.
- contentPath - - /content - - Location of markdown files used for the posts. -
- transitions - - true - - Include simple page transitions powered with{' '} - - framer-motion - - . -
- iconPath - - default icon - - Path to the icon to be used for the favicon and web manifest. - For example 'src/images/favicon.png'. For best - results provide a 512x512 square. -
- postsPerPage - - 6 - - Determines the number of posts shown on each page. This effects - both the posts and tag template. -
- grid - - basic - - Determines the type of grid used on the posts and tag templates. - Two available options: basic and list. -
- progressIndicator - - true - - Include a progress indicator on the post template. -
-

Example Usage

-
- 
-            
-              {'//'} gatsby-config.js
-              

-              module.exports{' '}
-              ={' '}
-              {
-              

-              {'  '}plugins:{' '}
-              [
-              

-              {'    '}
-              {
-              

-              {'      '}resolve:{' '}
-              
-                'gatsby-theme-amsterdam'
-              
-              ,
-              

-              {'      '}options:{' '}
-              {
-              

-              {'      '}
-              
-                {'//'} basePath defaults to '/'
-              
-              

-              {'      '}basePath:{' '}
-              
-                '/photography'
-              
-              ,
-              

-              {'      '}
-              
-                {'//'} the path to your icon file'
-              
-              

-              {'      '}iconPath:{' '}
-              
-                'src/images/favicon.png'
-              
-              ,
-              

-              {'      '}
-              
-                {'//'} grid defaults to 'basic'
-              
-              

-              {'      '}grid:{' '}
-              
-                'list'
-              
-              

-              {'      '}
-              }
-              ,
-              

-              {'    '}
-              }
-              ,
-              

-              {'  '}
-              ]
-              ,
-              

-              }
-            
-
-
-

Additional Configuration

-

- In addition to the theme options, there are a handful of items you can - customize via the siteMetadata object in your site's{' '} - gatsby-config.js. -

-
- 
-            
-              {'//'} gatsby-config.js
-              

-              module.exports{' '}
-              ={' '}
-              {
-              

-              {'  '}siteMetadata:{' '}
-              {
-              

-              {'    '}
-              
-                {'//'} Used for the site title and SEO
-              
-              

-              {'    '}title:{' '}
-              
-                'My Site Title'
-              
-              ,
-              

-              {'    '}
-              {'//'} Used for SEO
-              

-              {'    '}description:{' '}
-              
-                'My site description...'
-              
-              ,
-              

-              {'    '}
-              
-                {'//'} Used for SEO. Do not include a trailing slash
-              
-              

-              {'    '}url:{' '}
-              
-                'https://www.example.com'
-              
-              ,
-              

-              {'    '}
-              {'//'} Used for SEO
-              

-              {'    '}author:{' '}
-              
-                'John Doe'
-              
-              ,
-              

-              {'    '}
-              
-                {'//'} Used for an optional intro section at the top of the
-                posts template
-              
-              

-              {'    '}intro:{' '}
-              
-                'John Doe is a photographer....'
-              
-              ,
-              

-              {'    '}
-              
-                {'//'} Used for the links in the menu
-              
-              

-              {'    '}menuLinks:{' '}
-              [
-              

-              {'      '}
-              {
-              

-              {'        '}name:{' '}
-              'Home'
-              ,
-              

-              {'        '}slug:{' '}
-              '/'
-              ,
-              

-              {'      '}
-              }
-              ,
-              

-              {'      '}
-              {
-              

-              {'        '}name:{' '}
-              'About'
-              ,
-              

-              {'        '}slug:{' '}
-              '/about/'
-              ,
-              

-              {'      '}
-              }
-              ,
-              

-              {'      '}
-              {
-              

-              {'        '}name:{' '}
-              'Contact'
-              ,
-              

-              {'        '}slug:{' '}
-              '/contact/'
-              ,
-              

-              {'      '}
-              }
-              ,
-              

-              {'    '}
-              ]
-              ,
-              

-              {'    '}
-              
-                {'//'} Used for the links in the footer
-              
-              

-              {'    '}footerLinks:{' '}
-              [
-              

-              {'      '}
-              {
-              

-              {'        '}name:{' '}
-              'Dribbble'
-              ,
-              

-              {'        '}url:{' '}
-              
-                'https://www.dribbble.com/johndoe'
-              
-              ,
-              

-              {'      '}
-              }
-              ,
-              

-              {'      '}
-              {
-              

-              {'        '}name:{' '}
-              'Instagram'
-              ,
-              

-              {'        '}url:{' '}
-              
-                'https://www.instagram.com/johndoe'
-              
-              ,
-              

-              {'      '}
-              }
-              ,
-              

-              {'    '}
-              ]
-              ,
-              

-              {'  '}
-              }
-              ,
-              

-              }
-            
-
-
-

Customization

-

- Gatsby Theme Amsterdam uses{' '} - - styled-components - {' '} - and defines the theme related tokens in a file called{' '} - theme.js. In order to change these values simply{' '} - - shadow - {' '} - the file and replace with your desired values. See the example below. -

-
- 
-            
-              
-                {'//'} Create a theme.js file located at
-                'src/gatsby-theme-amsterdam/styles/theme.js'
-              
-              

-              export{' '}
-              default{' '}
-              {
-              

-              {'  '}colors:{' '}
-              {
-              

-              {'    '}base:{' '}
-              '#292929'
-              ,
-              

-              {'    '}secondary:{' '}
-              '#686461'
-              ,
-              

-              {'    '}tertiary:{' '}
-              '#958E8E'
-              ,
-              

-              {'    '}highlight:{' '}
-              '#C29967'
-              ,
-              

-              {'    '}background:{' '}
-              '#F5F0EB'
-              ,
-              

-              {'    '}border:{' '}
-              '#DCD8D3'
-              ,
-              

-              {'    '}button:{' '}
-              '#E9E4DF'
-              ,
-              

-              {'    '}text:{' '}
-              '#292929'
-              ,
-              

-              {'    '}code:{' '}
-              '#E9E5E0'
-              ,
-              

-              {'  '}
-              }
-              ,
-              

-              {'  '}fonts:{' '}
-              {
-              

-              {'    '}body:
-              
-                

-                {'      '}'-apple-system, BlinkMacSystemFont, "Segoe UI",
-                Roboto,
-                

-                {'      '}Helvetica, Arial, sans-serif'
-              
-              ,
-              

-              {'    '}heading:
-              
-                

-                {'      '}'-apple-system, BlinkMacSystemFont, "Segoe UI",
-                Roboto,
-                

-                {'      '}Helvetica, Arial, sans-serif'
-              
-              ,
-              

-              {'    '}normalWeight:{' '}
-              '400'
-              ,
-              

-              {'    '}boldWeight:{' '}
-              '600'
-              ,
-              

-              {'  '}
-              }
-              ,
-              

-              {'  '}sizes:{' '}
-              {
-              

-              {'    '}maxWidth:{' '}
-              '1050px'
-              ,
-              

-              {'    '}maxWidthCentered
-              :{' '}
-              '800px'
-              ,
-              

-              {'  '}
-              }
-              ,
-              

-              {'  '}responsive:{' '}
-              {
-              

-              {'    '}small:{' '}
-              '35em'
-              ,
-              

-              {'    '}medium:{' '}
-              '50em'
-              ,
-              

-              {'    '}large:{' '}
-              '70em'
-              ,
-              

-              {'  '}
-              }
-              ,
-              

-              }
-            
-
-
-

Writing Content

-

- Posts are written in markdown format .md and placed in - the content directory at the root of the site unless a - different contentPath is defined in the theme options. - There are four front matter variables used in the theme which are - shown below. -

-
- 
-            
-              ---
-              

-              title: Hello World
-              

-              date: 2019-07-06
-              

-              cover: cover.jpg
-              

-              tags: [greeting, blog]
-              

-              ---
-            
-
-
- - - ) -} - -export default DocsPage diff --git a/site/src/pages/faq.js b/site/src/pages/faq.js deleted file mode 100644 index 47b00d5..0000000 --- a/site/src/pages/faq.js +++ /dev/null @@ -1,87 +0,0 @@ -import React from 'react' -import { Link } from 'gatsby' -import Container from 'gatsby-theme-amsterdam/src/components/Container' -import Content from 'gatsby-theme-amsterdam/src/components/Content' -import SEO from 'gatsby-theme-amsterdam/src/components/SEO' - -const FAQPage = ({ data }) => { - return ( - - - -

Frequently Asked Questions

-

What is Gatsby?

-

- - Gatsby - {' '} - is a free and open source framework based on React that helps - developers build blazing fast websites and apps. -

-

What are Gatsby themes?

-

- - Gatsby themes - {' '} - are pre-built, installable packages for setting up a site’s default - styling, components, plugins, and overall configuration. This allows - developers to have a fully functional Gatsby site with just a few - lines of code. -

-

What does a minimum setup look like?

-

- A minimum setup requires only two files. A package.json{' '} - and gatsby-config.js. That will get the site up and - running but to take advantage of the theme you will want to add - content. For more information please review the{' '} - docs. -

-

Can Gatsby Theme Amsterdam be used alongside other themes?

-

- Yes. Gatsby Theme Amsterdam can be installed alongside other themes. -

-

Why can't it do this, that or the other thing?

-

- Gatsby Theme Amsterdam was designed to be a minimal and clean theme - geared towards photographers, artists and other creative folks. If you - have an idea for an enhancement or feature that fits within that - vision please log a ticket on{' '} - - GitHub - {' '} - or better yet submit a pull request. -

-
-

Still have a question?

-

- Send me a tweet on Twitter{' '} - - @ryanwiemer - - . -

- - - ) -} - -export default FAQPage diff --git a/site/src/templates/page.js b/site/src/templates/page.js new file mode 100644 index 0000000..b03376b --- /dev/null +++ b/site/src/templates/page.js @@ -0,0 +1,46 @@ +import React from 'react' +import { graphql } from 'gatsby' +import styled from '@emotion/styled' +import Container from 'gatsby-theme-amsterdam/src/components/Container' +import MDX from 'gatsby-theme-amsterdam/src/components/MDX' +import SEO from 'gatsby-theme-amsterdam/src/components/SEO' + +const Title = styled.h1` + font-weight: ${props => props.theme.fonts.boldWeight}; + line-height: 1.25; + max-width: ${props => props.theme.sizes.maxWidthCentered}; + margin: 0 auto 1rem; + font-size: 2rem; + @media screen and (min-width: ${props => props.theme.responsive.small}) { + font-size: 2.5rem; + } +` + +const PageTemplate = ({ data }) => { + return ( + <> + + + {data.page.title} + + + + ) +} + +export default PageTemplate + +export const pageQuery = graphql` + query($slug: String!) { + page(slug: { eq: $slug }) { + body + title + description + slug + } + } +` diff --git a/theme/.prettierignore b/theme/.prettierignore new file mode 100644 index 0000000..0b55ca3 --- /dev/null +++ b/theme/.prettierignore @@ -0,0 +1 @@ +/src/styles/*.* diff --git a/theme/README.md b/theme/README.md index 6a6661d..5eef69b 100755 --- a/theme/README.md +++ b/theme/README.md @@ -23,16 +23,20 @@ A Gatsby theme for artists, photographers and other creative folks. [Demo Website](https://amsterdam.netlify.com/) +![](screenshots/demo.jpg) + ## Features - Minimal responsive design - Optional page transitions - Multiple grid options to display posts -- Customizable theme colors and typography +- Customizable theme colors and typography with Theme UI +- MDX support - SEO friendly component - Mobile menu - Optional scroll progress indicator -- Styled components +- Optional toggle to switch color modes +- Emotion using styled-components syntax - Tags - Pagination - Offline support @@ -49,7 +53,7 @@ gatsby new your-themed-site https://github.com/ryanwiemer/gatsby-starter-amsterd ### Manually Add To Your Site -Install the theme +1. Install the theme ```sh npm install --save gatsby-theme-amsterdam @@ -61,7 +65,7 @@ or yarn add gatsby-theme-amsterdam ``` -Add the theme to your `gatsby-config.js` +2. Add the theme to your `gatsby-config.js` ```javascript // gatsby-config.js @@ -81,15 +85,15 @@ module.exports = { ### Theme Options -| Key | Default Value | Description | -| ------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -| `basePath` | `/` | Root URL for all posts. | -| `contentPath` | `/content` | Location of markdown files used for the posts. | | -| `transitions` | `true` | Include simple page transitions powered with [framer-motion](https://github.com/framer/motion) | -| `iconPath` | default icon | Path to the icon to be used for the favicon and web manifest. For example `'src/images/favicon.png'`. For best results provide a 512x512 square. | -| `postsPerPage` | `6` | Determines the number of posts shown on each page. This effects both the posts and tag template. | -| `grid` | `basic` | Determines the type of grid used on the posts and tag templates. Two available options: `basic` and `list`. | -| `progressIndicator` | `true` | Include a progress indicator on the post template. | +| Key | Default Value | Description | +| ------------------- | ------------- | ----------------------------------------------------------------------------------------------------------- | +| `basePath` | `/` | Root URL for all posts. | +| `contentPath` | `content` | Location of markdown files used for the posts. | | +| `transitions` | `true` | Include simple page transitions powered with [framer-motion](https://github.com/framer/motion) | +| `postsPerPage` | `6` | Determines the number of posts shown on each page. This effects both the posts and tag template. | +| `grid` | `basic` | Determines the type of grid used on the posts and tag templates. Two available options: `basic` and `list`. | +| `progressIndicator` | `true` | Include a progress indicator on the post template. | +| `colorToggle` | `true` | Include a button in the menu to toggle the color modes. | #### Example Usage @@ -101,9 +105,7 @@ module.exports = { resolve: 'gatsby-theme-amsterdam', options: { // basePath defaults to '/' - basePath: '/photography', - // the path to your icon file - iconPath: 'src/images/favicon.png', + basePath: 'photography', // grid defaults to 'basic' grid: 'list', }, @@ -126,6 +128,8 @@ module.exports = { description: 'My site description...', // Used for SEO. Do not include a trailing slash url: 'https://www.example.com', + // Used for SEO. Must be the full URL for the default image + image: 'https://www.example.com/og-image.jpg', // Used for SEO author: 'John Doe', // Used for an optional intro section at the top of the posts template @@ -162,45 +166,27 @@ module.exports = { ### Customization -Gatsby Theme Amsterdam uses [styled-components](https://github.com/styled-components/styled-components) and defines the theme related tokens in a file called `theme.js`. In order to change these values simply [shadow](https://www.gatsbyjs.org/blog/2019-04-29-component-shadowing/) the file and replace with your desired values. See the example below. +Gatsby Theme Amsterdam utilizes [Theme UI](https://theme-ui.com/). In order to customize the theme styling you must create a theme file and then override the default `amsterdamTheme` values. If you're familiar with Styled Components or Emotion it's the same as adapting the theme you pass to `ThemeProvider`. + +All default values can be viewed [here](https://github.com/ryanwiemer/gatsby-theme-amsterdam/blob/master/theme/src/gatsby-plugin-theme-ui/index.js). ```javascript -// Create a theme.js file located at 'src/gatsby-theme-amsterdam/styles/theme.js' +// src/gatsby-plugin-theme-ui/index.js + +import amsterdamTheme from 'gatsby-theme-amsterdam/src/gatsby-plugin-theme-ui' + export default { + ...amsterdamTheme, colors: { - base: '#292929', - secondary: '#686461', - tertiary: '#958E8E', - highlight: '#C29967', - background: '#F5F0EB', - border: '#DCD8D3', - button: '#E9E4DF', - text: '#292929', - code: '#E9E5E0', - }, - fonts: { - body: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', - heading: - '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', - normalWeight: '400', - boldWeight: '600', - }, - sizes: { - maxWidth: '1050px', - maxWidthCentered: '800px', - }, - responsive: { - small: '35em', - medium: '50em', - large: '70em', + ...amsterdamTheme.colors, + background: '#FCD5C0', }, } ``` ### Writing Content -Posts are written in markdown format `.md` and placed in the `content` directory at the root of the site unless a different `contentPath` is defined in the theme options. There are four front matter variables used in the theme which are shown below. +Posts are written in markdown / mdx format with either `.md` or `.mdx` and placed in the `content` directory at the root of the site unless a different `contentPath` is defined in the theme options. There are four front matter variables used in the theme which are shown below. ```markdown --- diff --git a/theme/gatsby-browser.js b/theme/gatsby-browser.js index 89402b9..252f6d0 100644 --- a/theme/gatsby-browser.js +++ b/theme/gatsby-browser.js @@ -8,6 +8,8 @@ export const wrapPageElement = ({ element, props }, pluginOptions) => { grid: 'grid', postsPerPage: 6, progressIndicator: true, + basePath: '/', + colorToggle: true, ...pluginOptions, } diff --git a/theme/gatsby-config.js b/theme/gatsby-config.js index 95649bd..3e77e67 100755 --- a/theme/gatsby-config.js +++ b/theme/gatsby-config.js @@ -1,12 +1,11 @@ -const path = require('path') - module.exports = options => { - const { contentPath, iconPath, basePath } = options + const { contentPath } = options return { siteMetadata: { title: 'Gatsby Theme Amsterdam', description: '', + image: '', url: '', author: '', intro: '', @@ -32,9 +31,10 @@ module.exports = options => { }, }, { - resolve: `gatsby-transformer-remark`, + resolve: `gatsby-plugin-mdx`, options: { - plugins: [ + extensions: [`.mdx`, `.md`], + gatsbyRemarkPlugins: [ `gatsby-remark-prismjs`, { resolve: `gatsby-remark-images`, @@ -47,22 +47,9 @@ module.exports = options => { ], }, }, - { - resolve: `gatsby-plugin-manifest`, - options: { - name: `Gatsby Theme Amsterdam`, - short_name: `Amsterdam`, - background_color: `#f5f0eb`, - theme_color: `#292929`, - start_url: basePath || `/`, - display: `standalone`, - icon: iconPath - ? path.resolve(iconPath) - : require.resolve('./src/images/favicon.png'), - }, - }, + `gatsby-plugin-theme-ui`, + `gatsby-plugin-emotion`, `gatsby-plugin-react-helmet`, - `gatsby-plugin-styled-components`, `gatsby-plugin-sharp`, `gatsby-transformer-sharp`, `gatsby-plugin-offline`, diff --git a/theme/gatsby-node.js b/theme/gatsby-node.js index 92259a4..982b63f 100755 --- a/theme/gatsby-node.js +++ b/theme/gatsby-node.js @@ -2,8 +2,9 @@ const path = require(`path`) const fs = require(`fs`) const mkdirp = require(`mkdirp`) const _ = require(`lodash`) -const { createFilePath } = require(`gatsby-source-filesystem`) const { paginate } = require(`gatsby-awesome-pagination`) +const { createFilePath } = require(`gatsby-source-filesystem`) +const slugify = require('slugify') // Ensure that content directory exist at the site-level exports.onPreBootstrap = ({ store }, themeOptions) => { @@ -17,54 +18,115 @@ exports.onPreBootstrap = ({ store }, themeOptions) => { }) } -// Schema Customization -exports.sourceNodes = ({ actions, schema }) => { - const { createTypes } = actions - createTypes(` - type Frontmatter @infer { +// Schema customization for Post type +exports.createSchemaCustomization = ({ actions, schema }) => { + actions.createTypes(` + type Post implements Node { + id: ID! + slug: String! title: String + tags: [String] date: Date @dateformat + excerpt(pruneLength: Int = 140): String + body: String cover: File @fileByRelativePath - tags: [String] - } - type Fields @infer { - slug: String - } - type MarkdownRemark implements Node @infer { - frontmatter: Frontmatter - fields: Fields } `) } -// Create Pages +// Helper to resolve mdx fields +const mdxResolverPassthrough = fieldName => async ( + source, + args, + context, + info +) => { + const type = info.schema.getType(`Mdx`) + const mdxNode = context.nodeModel.getNodeById({ + id: source.parent, + }) + const resolver = type.getFields()[fieldName].resolve + return resolver(mdxNode, args, context, { + fieldName, + }) +} + +// Pass mdx body and excerpt to Post type +exports.createResolvers = ({ createResolvers }) => { + createResolvers({ + Post: { + body: { + resolve: mdxResolverPassthrough(`body`), + }, + excerpt: { + resolve: mdxResolverPassthrough(`excerpt`), + }, + }, + }) +} + +// Create Post type nodes +exports.onCreateNode = async ( + { node, actions, getNode, createNodeId, createContentDigest }, + themeOptions +) => { + if (node.internal.type !== `Mdx`) { + return + } + const contentPath = themeOptions.contentPath || 'content' + const parent = getNode(node.parent) + if (parent.sourceInstanceName !== contentPath) { + return + } + function generateSlug(...arguments_) { + return `/${arguments_.join('/')}`.replace(/\/\/+/g, '/') + } + + if (node.internal.type === `Mdx`) { + const filePath = createFilePath({ node, getNode }) + + actions.createNode({ + id: createNodeId(`${node.id} >>> Post`), + slug: node.frontmatter.slug + ? `${generateSlug( + themeOptions.basePath, + slugify(node.frontmatter.slug) + )}/` + : generateSlug(themeOptions.basePath, filePath), + title: node.frontmatter.title, + date: node.frontmatter.date, + cover: node.frontmatter.cover, + tags: node.frontmatter.tags, + parent: node.id, + internal: { + type: 'Post', + contentDigest: createContentDigest(node.internal.contentDigest), + }, + }) + } +} + exports.createPages = async ({ graphql, actions, reporter }, themeOptions) => { const { createPage } = actions const result = await graphql( ` { - allMarkdownRemark( - sort: { fields: [frontmatter___date], order: DESC } - limit: 1000 - ) { + allPost(sort: { fields: [date], order: DESC }) { edges { node { - fields { - slug - } - frontmatter { - title - tags - cover { - childImageSharp { - fluid(maxWidth: 1000) { - aspectRatio - src - srcSet - srcWebp - srcSetWebp - sizes - } + title + date + tags + slug + cover { + childImageSharp { + fluid(maxWidth: 1000) { + aspectRatio + src + srcSet + srcWebp + srcSetWebp + sizes } } } @@ -77,7 +139,7 @@ exports.createPages = async ({ graphql, actions, reporter }, themeOptions) => { if (result.errors) { reporter.panic(result.errors) } - const posts = result.data.allMarkdownRemark.edges + const posts = result.data.allPost.edges const basePath = themeOptions.basePath || `/` // Create individual post pages @@ -86,13 +148,10 @@ exports.createPages = async ({ graphql, actions, reporter }, themeOptions) => { const next = index === 0 ? null : posts[index - 1].node createPage({ - path: - basePath === '/' - ? post.node.fields.slug - : basePath + post.node.fields.slug, + path: post.node.slug, component: require.resolve(`./src/templates/post`), context: { - slug: post.node.fields.slug, + slug: post.node.slug, basePath: basePath === '/' ? '' : basePath, previous, next, @@ -102,7 +161,6 @@ exports.createPages = async ({ graphql, actions, reporter }, themeOptions) => { // Create posts list page and paginate const postsPerPage = themeOptions.postsPerPage || 6 - paginate({ createPage, items: posts, @@ -118,16 +176,14 @@ exports.createPages = async ({ graphql, actions, reporter }, themeOptions) => { // Create tag pages and paginate let tags = [] _.each(posts, post => { - if (_.get(post, 'node.frontmatter.tags')) { - tags = tags.concat(post.node.frontmatter.tags) + if (_.get(post, 'node.tags')) { + tags = tags.concat(post.node.tags) } }) tags = _.uniq(tags) tags.forEach(tag => { const postsWithTag = posts.filter( - post => - post.node.frontmatter.tags && - post.node.frontmatter.tags.indexOf(tag) !== -1 + post => post.node.tags && post.node.tags.indexOf(tag) !== -1 ) const tagPagination = @@ -149,16 +205,3 @@ exports.createPages = async ({ graphql, actions, reporter }, themeOptions) => { }) }) } - -exports.onCreateNode = ({ node, actions, getNode }) => { - const { createNodeField } = actions - - if (node.internal.type === `MarkdownRemark`) { - const value = createFilePath({ node, getNode }) - createNodeField({ - name: `slug`, - node, - value, - }) - } -} diff --git a/theme/gatsby-ssr.js b/theme/gatsby-ssr.js index 642a8b8..9907760 100644 --- a/theme/gatsby-ssr.js +++ b/theme/gatsby-ssr.js @@ -8,6 +8,8 @@ export const wrapPageElement = ({ element, props }, pluginOptions) => { grid: 'grid', postsPerPage: 6, progressIndicator: true, + basePath: '/', + colorToggle: true, ...pluginOptions, } diff --git a/theme/package.json b/theme/package.json index d7d02e7..15b25fe 100755 --- a/theme/package.json +++ b/theme/package.json @@ -1,7 +1,7 @@ { "name": "gatsby-theme-amsterdam", "description": "A Gatsby theme for artists, photographers and other creative people", - "version": "0.1.2", + "version": "1.0.0", "author": "Ryan Wiemer ", "keywords": [ "gatsby", @@ -16,33 +16,39 @@ "license": "MIT", "main": "index.js", "dependencies": { - "babel-plugin-styled-components": "^1.10.6", - "framer-motion": "^1.6.3", - "gatsby": "^2.13.72", - "gatsby-awesome-pagination": "^0.3.4", - "gatsby-image": "^2.2.10", - "gatsby-plugin-manifest": "^2.2.6", - "gatsby-plugin-offline": "^2.2.7", - "gatsby-plugin-page-creator": "^2.1.6", - "gatsby-plugin-react-helmet": "^3.1.4", - "gatsby-plugin-sharp": "^2.2.13", - "gatsby-plugin-styled-components": "^3.1.0", - "gatsby-remark-images": "^3.1.13", - "gatsby-remark-prismjs": "^3.3.6", - "gatsby-source-filesystem": "^2.1.10", - "gatsby-transformer-remark": "^2.6.15", - "gatsby-transformer-sharp": "^2.2.7", + "@emotion/core": "^10.0.27", + "@emotion/styled": "^10.0.27", + "@mdx-js/mdx": "^1.5.5", + "@mdx-js/react": "^1.5.5", + "babel-plugin-styled-components": "^1.10.7", + "framer-motion": "^1.8.3", + "gatsby": "^2.19.10", + "gatsby-awesome-pagination": "^0.3.5", + "gatsby-image": "^2.2.39", + "gatsby-plugin-emotion": "^4.1.21", + "gatsby-plugin-manifest": "^2.2.40", + "gatsby-plugin-mdx": "^1.0.69", + "gatsby-plugin-offline": "^3.0.33", + "gatsby-plugin-page-creator": "^2.1.39", + "gatsby-plugin-react-helmet": "^3.1.21", + "gatsby-plugin-sharp": "^2.4.4", + "gatsby-plugin-theme-ui": "^0.3.0", + "gatsby-remark-images": "^3.1.43", + "gatsby-remark-prismjs": "^3.3.30", + "gatsby-source-filesystem": "^2.1.47", + "gatsby-transformer-sharp": "^2.3.13", "lodash": "^4.17.14", - "prismjs": "^1.16.0", - "react": "^16.9.0", - "react-dom": "^16.9.0", + "prismjs": "^1.19.0", + "react": "^16.12.0", + "react-dom": "^16.12.0", "react-helmet": "^5.2.1", - "styled-components": "^4.3.2" + "slugify": "^1.3.6", + "theme-ui": "^0.3.1" }, "peerDependencies": { - "gatsby": "^2.13.42", - "react": "^16.8.6", - "react-dom": "^16.8.6" + "gatsby": "^2.19.7", + "react": "^16.12.0", + "react-dom": "^16.12.0" }, "scripts": { "build": "gatsby build", diff --git a/theme/src/components/BasicGrid.js b/theme/src/components/BasicGrid.js index 8d4e5fc..6bc7934 100644 --- a/theme/src/components/BasicGrid.js +++ b/theme/src/components/BasicGrid.js @@ -1,6 +1,6 @@ import React from 'react' import { Link } from 'gatsby' -import styled from 'styled-components' +import styled from '@emotion/styled' import Img from 'gatsby-image' import Placeholder from './Placeholder' const _ = require(`lodash`) @@ -44,17 +44,19 @@ const Item = styled.li` a { text-decoration: none; transition: color 0.3s; - color: ${props => props.theme.colors.base}; + color: ${props => props.theme.colors.tertiary}; &:hover { color: ${props => props.theme.colors.highlight}; } @media (hover: none) { - color: ${props => props.theme.colors.base} !important; + color: ${props => props.theme.colors.tertiary} !important; } } ` const Title = styled.h2` + transition: color 0.3s; + color: ${props => props.theme.colors.text}; font-weight: ${props => props.theme.fonts.boldWeight}; margin: 1rem 0 0 0; display: block; @@ -63,6 +65,12 @@ const Title = styled.h2` @media screen and (min-width: ${props => props.theme.responsive.small}) { font-size: 1.1rem; } + &:hover { + color: ${props => props.theme.colors.highlight}; + } + @media (hover: none) { + color: ${props => props.theme.colors.text} !important; + } ` const Excerpt = styled.p` @@ -104,33 +112,29 @@ const BasicGrid = props => { return ( {props.posts.map(({ node: post }) => ( - - - {post.frontmatter.cover && ( + + + {post.cover && ( )} - {post.frontmatter.cover === null ? ( - - ) : ( - '' - )} + {post.cover === null ? : ''} - - {post.frontmatter.title} + + {post.title} {post.excerpt} - {post.frontmatter.date && {post.frontmatter.date}} - {post.frontmatter.tags && ( + {post.date && {post.date}} + {post.tags && ( <> / - {post.frontmatter.tags.map(tag => ( + {post.tags.map(tag => ( (props.flip ? '1' : '-1')}); + @media screen and (min-width: ${props => props.theme.responsive.medium}) { + top: 6px; + } + svg { + fill: ${props => props.theme.colors.text}; + width: 1.75rem; + @media screen and (min-width: ${props => props.theme.responsive.medium}) { + width: 1.4rem; + } + } +` + +const ColorToggle = props => { + const [colorMode, setColorMode] = useColorMode() + const nextColorMode = colorMode === 'default' ? 'dark' : 'default' + return ( + setColorMode(nextColorMode)} + flip={colorMode === 'dark'} + > + + + ) +} + +export default ColorToggle diff --git a/theme/src/components/Container.js b/theme/src/components/Container.js index fc70eb3..81b5501 100644 --- a/theme/src/components/Container.js +++ b/theme/src/components/Container.js @@ -1,22 +1,13 @@ import React from 'react' -import styled, { css } from 'styled-components' +import styled from '@emotion/styled' const Wrapper = styled.section` flex-grow: 1; - max-width: ${props => props.theme.sizes.maxWidth}; margin: 0 auto; width: 100%; - padding: 2.5rem 1.5rem; - ${props => - props.fullWidth && - css` - max-width: 100%; - `} - ${props => - props.noPadding && - css` - padding: 0; - `} + padding: ${props => (props.noPadding ? 0 : '2.5rem 1.5rem')}; + max-width: ${props => + props.fullWidth ? '100%' : props.theme.sizes.maxWidth}; ` const Container = props => { diff --git a/theme/src/components/Content.js b/theme/src/components/Content.js deleted file mode 100644 index 9c644c9..0000000 --- a/theme/src/components/Content.js +++ /dev/null @@ -1,211 +0,0 @@ -import React from 'react' -import styled from 'styled-components' -require('prismjs/themes/prism.css') - -const Wrapper = styled.div` - width: 100%; - max-width: ${props => props.theme.sizes.maxWidthCentered}; - margin: 0 auto; - h1, - h2, - h3, - h4, - h5, - h6 { - font-weight: ${props => props.theme.fonts.boldWeight}; - line-height: 1.25; - margin: 0 0 1rem; - } - - h1 { - font-size: 1.75rem; - @media screen and (min-width: ${props => props.theme.responsive.small}) { - font-size: 2rem; - } - } - - h2 { - font-size: 1.25rem; - @media screen and (min-width: ${props => props.theme.responsive.small}) { - font-size: 1.5rem; - } - } - - h3 { - font-size: 1.1rem; - @media screen and (min-width: ${props => props.theme.responsive.small}) { - font-size: 1.25rem; - } - } - - h4 { - font-size: 1rem; - @media screen and (min-width: ${props => props.theme.responsive.small}) { - font-size: 1.1rem; - } - } - - h5 { - font-size: 0.875rem; - @media screen and (min-width: ${props => props.theme.responsive.small}) { - font-size: 0.95rem; - } - } - - h6 { - font-size: 0.75rem; - @media screen and (min-width: ${props => props.theme.responsive.small}) { - font-size: 0.875rem; - } - } - - p { - line-height: 1.5; - margin: 0 0 1.75rem; - } - - ul, - ol { - line-height: 1.5; - margin: 0 0 1.75rem; - li { - position: relative; - } - } - - ul { - li { - list-style: disc; - list-style-position: inside; - margin: 0 0 0.5rem 0; - &:last-child { - margin: 0; - } - } - } - - ol { - li { - list-style: decimal; - list-style-position: inside; - margin: 0 0 0.5rem 0; - &:last-child { - margin: 0; - } - } - } - - .task-list-item { - list-style: none; - } - - input[type='checkbox'] { - appearance: checkbox; - position: relative; - top: -1px; - } - - hr { - border: 0; - height: 1px; - background: ${props => props.theme.colors.border}; - margin: 0 0 1.75rem; - } - - blockquote { - border-left: 2px solid ${props => props.theme.colors.highlight}; - margin: 0 0 1.75rem; - padding: 0.5rem; - font-style: italic; - p:last-child { - margin: 0; - } - } - - strong { - font-weight: ${props => props.theme.fonts.boldWeight}; - } - - em { - font-style: italic; - } - - pre { - text-shadow: none !important; - border: 0 !important; - margin: 0 0 1.75rem 0 !important; - border-radius: 2px !important; - background: ${props => props.theme.colors.code} !important; - code, - span { - text-shadow: none !important; - background: ${props => props.theme.colors.code} !important; - padding: 0 !important; - } - } - - code { - font-size: 0.9rem !important; - padding: 0.25rem !important; - background: ${props => props.theme.colors.code} !important; - } - - td, - th { - padding: 0; - } - - table { - display: block; - overflow: auto; - width: 100%; - margin: 0 0 1.75rem; - } - - table th { - font-weight: 600; - } - - table td, - table th { - vertical-align: center !important; - border: 1px solid ${props => props.theme.colors.border}; - padding: 0.75rem; - } - - td { - line-height: 1.5; - } - - table tr { - background: ${props => props.theme.colors.background}; - border-top: 1px solid ${props => props.theme.colors.border}; - } - - table tr:nth-child(2n) { - background: ${props => props.theme.colors.code}; - } - - a { - transition: 0.3s color; - color: ${props => props.theme.colors.secondary}; - text-decoration: underline; - &:hover { - color: ${props => props.theme.colors.highlight}; - } - @media (hover: none) { - color: ${props => props.theme.colors.secondary} !important; - } - } -` - -const Content = props => { - return ( - - {props.children} - {props.html &&
} - - ) -} - -export default Content diff --git a/theme/src/components/Footer.js b/theme/src/components/Footer.js index f0179e9..67b5259 100644 --- a/theme/src/components/Footer.js +++ b/theme/src/components/Footer.js @@ -1,5 +1,5 @@ import React from 'react' -import styled from 'styled-components' +import styled from '@emotion/styled' import { useSiteMetadata } from '../hooks/use-site-metadata' const Wrapper = styled.footer` @@ -7,7 +7,7 @@ const Wrapper = styled.footer` ` const Container = styled.div` - color: ${props => props.theme.colors.tertiary}; + color: white; font-size: 0.9em; max-width: ${props => props.theme.sizes.maxWidth}; width: 100%; @@ -24,6 +24,7 @@ const Container = styled.div` ` const Copyright = styled.p` + opacity: 0.5; margin: 0 0 1rem 0; @media screen and (min-width: ${props => props.theme.responsive.medium}) { margin: 0; diff --git a/theme/src/components/Hero.js b/theme/src/components/Hero.js index 791e53e..ca84b54 100644 --- a/theme/src/components/Hero.js +++ b/theme/src/components/Hero.js @@ -1,5 +1,5 @@ import React from 'react' -import styled from 'styled-components' +import styled from '@emotion/styled' import Img from 'gatsby-image' import TagList from './TagList' import DateIcon from '../icons/DateIcon' diff --git a/theme/src/components/Intro.js b/theme/src/components/Intro.js index 5d8ce2f..340276d 100644 --- a/theme/src/components/Intro.js +++ b/theme/src/components/Intro.js @@ -1,16 +1,12 @@ import React from 'react' -import styled, { css } from 'styled-components' +import styled from '@emotion/styled' const Wrapper = styled.div` max-width: ${props => props.theme.sizes.maxWidth}; width: 100%; margin: 3rem auto 0; padding: 0 1.5rem; - ${props => - props.capitalize && - css` - text-transform: capitalize; - `}; + text-transform: ${props => (props.capitalize ? 'capitalize' : 'none')}; ` const Title = styled.h2` diff --git a/theme/src/components/Layout.js b/theme/src/components/Layout.js index 11a2fe0..f4e8774 100644 --- a/theme/src/components/Layout.js +++ b/theme/src/components/Layout.js @@ -1,8 +1,7 @@ import React, { useEffect, useContext } from 'react' -import styled, { ThemeProvider } from 'styled-components' -import Helmet from 'react-helmet' -import theme from '../styles/theme' -import GlobalStyle from '../styles/global' +import styled from '@emotion/styled' +import { Global } from '@emotion/core' +import { globalStyles } from '../styles/globalStyles.js' import Menu from './Menu' import Footer from './Footer' import Transition from './Transition' @@ -26,6 +25,24 @@ const Skip = styled.a` } ` +const Root = styled.main` + font-family: ${props => props.theme.fonts.body}; + font-weight: ${props => props.theme.fonts.normalWeight}; + padding: 60px 0 0 0; + margin: 0 auto; + display: flex; + min-height: 100vh; + flex-direction: column; + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: ${props => props.theme.fonts.heading}; + } +` + const Layout = props => { function handleFirstTab(e) { if (e.keyCode === 9) { @@ -38,38 +55,29 @@ const Layout = props => { return ( <> - - - - Skip to content - - + {options.transitions ? ( + <> + + + + {props.children} +