v1.0.0 updates

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

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
 ---

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"
   }
 }

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 (
+    <Wrapper onClick={() => setCount(count + 1)}>
+      <div>
+        <Number>
+          {count}
+        </Number>
+        <Text>{props.children}</Text>
+      </div>
+    </Wrapper>
+    )
+}
+
+export default Box

site/content/public-transit-in-motion/index.md → site/content/public-transit-in-motion/index.mdx

@@ -43,6 +43,11 @@ tags: [photography, transit]
 1. Item 2
 1. Item 3
 
+<!-- MDX example -->
+import Example from './Example'
+
+<Example>Mdx example. Click to increment.</Example>
+
 <!-- Images -->
 ![test-image](cover.jpg)
 

site/documentation/about.md

@@ -0,0 +1,58 @@
+---
+title: About
+description: Learn about Gatsby Theme Amsterdam
+---
+
+<p>
+  <img
+    src="https://upload.wikimedia.org/wikipedia/commons/2/20/Flag_of_the_Netherlands.svg"
+    alt="Flag of the Netherlands"
+  />
+  <span style="display: inline-block; color:#686461; padding:.5rem 0 0 0;">
+    Official flag of the Netherlands (source:
+    <a
+      href="https://en.wikipedia.org/wiki/Netherlands"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      Wikipedia
+    </a>
+    )
+  </span>
+</p>
+
+**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.
+
+<p>
+  <iframe
+    title="github"
+    src="https://ghbtns.com/github-btn.html?user=ryanwiemer&repo=gatsby-theme-amsterdam&type=star&count=true&size=large"
+    frameBorder="0"
+    scrolling="0"
+    width="160px"
+    height="30px"
+  ></iframe>
+</p>
+
+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