├── .gitignore ├── README.md ├── examples ├── blank │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── posts │ │ └── hello.mdx ├── conference-styled │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ ├── data │ │ ├── mc.yml │ │ ├── schedule.yml │ │ ├── speakers.yml │ │ ├── sponsors.yml │ │ └── venue.yml │ │ ├── gatsby-plugin-theme-ui │ │ └── index.js │ │ └── gatsby-theme-conference │ │ └── components │ │ ├── banner.js │ │ └── header.js ├── conference │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── data │ │ ├── mc.yml │ │ ├── schedule.yml │ │ ├── speakers.yml │ │ ├── sponsors.yml │ │ └── venue.yml ├── css │ ├── content │ │ └── posts │ │ │ └── hello.mdx │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── gatsby-theme-css │ │ ├── header.module.css │ │ └── layout.js ├── jxnblk-blog │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── gatsby-theme-blog │ │ └── components │ │ ├── bio-content.js │ │ └── header.js ├── mono-blog │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── gatsby-theme-blog │ │ └── components │ │ ├── bio-content.js │ │ └── header.js ├── mono-notes │ ├── content │ │ └── notes │ │ │ ├── getting-started.mdx │ │ │ └── hello.mdx │ ├── gatsby-config.js │ └── package.json ├── swiss-blog │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── gatsby-theme-blog │ │ └── components │ │ ├── bio-content.js │ │ └── header.js ├── system │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ ├── gatsby-theme-system │ │ └── header.mdx │ │ ├── layout.js │ │ └── pages │ │ └── index.mdx ├── theme-ui-blog │ ├── content │ │ └── posts │ │ │ └── hello.mdx │ ├── gatsby-config.js │ └── package.json ├── tomato-blog │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── gatsby-theme-ui-blog │ │ └── layout.js └── www │ ├── gatsby-config.js │ ├── package.json │ └── src │ ├── index.js │ └── pages │ ├── index.mdx │ └── notes.mdx ├── lerna.json ├── now.json ├── package.json ├── packages ├── blank │ ├── README.md │ ├── gatsby-config.js │ ├── gatsby-node.js │ ├── index.js │ ├── package.json │ └── src │ │ ├── post.js │ │ ├── posts.js │ │ ├── posts │ │ └── hello.mdx │ │ └── templates │ │ ├── post.js │ │ └── posts.js ├── blog-demo │ ├── content │ │ ├── assets │ │ │ └── avatar.png │ │ └── posts │ │ │ ├── hello-world.mdx │ │ │ ├── my-second-post.mdx │ │ │ └── new-beginnings.mdx │ ├── gatsby-config.js │ └── package.json ├── brutalist │ ├── README.md │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── gatsby-plugin-theme-ui │ │ └── index.js ├── conference │ ├── .npmignore │ ├── README.md │ ├── gatsby-config.js │ ├── gatsby-node.js │ ├── index.js │ ├── package.json │ └── src │ │ ├── components │ │ ├── background-image.js │ │ ├── banner.js │ │ ├── button.js │ │ ├── card.js │ │ ├── cta.js │ │ ├── desktop-only.js │ │ ├── flex-list.js │ │ ├── footer.js │ │ ├── header.js │ │ ├── icon-link.js │ │ ├── index.js │ │ ├── layout.js │ │ ├── list.js │ │ ├── mc-card.js │ │ ├── mcs.js │ │ ├── nav-link.js │ │ ├── schedule-item.js │ │ ├── schedule.js │ │ ├── section-heading.js │ │ ├── speaker-card.js │ │ ├── speakers.js │ │ ├── sponsors.js │ │ └── venue.js │ │ ├── data │ │ ├── mc.yml │ │ ├── schedule.yml │ │ ├── speakers.yml │ │ ├── sponsors.yml │ │ └── venue.yml │ │ ├── gatsby-plugin-theme-ui │ │ └── index.js │ │ ├── index.js │ │ ├── layouts │ │ ├── index.js │ │ ├── schedule.js │ │ └── speakers.js │ │ ├── pages │ │ ├── index.js │ │ ├── schedule.js │ │ └── speakers.js │ │ └── use-site-metadata.js ├── css │ ├── README.md │ ├── content │ │ └── posts │ │ │ └── hello.mdx │ ├── gatsby-browser.js │ ├── gatsby-config.js │ ├── gatsby-ssr.js │ ├── index.js │ ├── package.json │ ├── src │ │ ├── context.js │ │ ├── gatsby-theme-blog-core │ │ │ └── components │ │ │ │ ├── post.js │ │ │ │ └── posts.js │ │ ├── index.js │ │ ├── layout.js │ │ ├── layout.module.css │ │ ├── post.js │ │ ├── posts.js │ │ ├── posts.module.css │ │ ├── root.js │ │ ├── theme.js │ │ └── toggle-color-mode.js │ └── yarn.lock ├── jxnblk │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── gatsby-plugin-theme-ui │ │ └── index.js ├── mono │ ├── README.md │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── gatsby-plugin-theme-ui │ │ └── index.js ├── sidebar │ ├── README.md │ ├── gatsby-browser.js │ ├── gatsby-config.js │ ├── gatsby-ssr.js │ ├── index.js │ ├── package.json │ └── src │ │ ├── _config.js │ │ ├── config.js │ │ ├── container.js │ │ ├── content.js │ │ ├── footer.js │ │ ├── header.js │ │ ├── hooks.js │ │ ├── index.js │ │ ├── layout.js │ │ ├── main.js │ │ ├── mobile-only.js │ │ ├── root.js │ │ ├── sidebar.js │ │ └── spacer.js ├── swiss │ ├── README.md │ ├── gatsby-config.js │ ├── package.json │ └── src │ │ └── gatsby-plugin-theme-ui │ │ └── index.js ├── system │ ├── README.md │ ├── gatsby-config.js │ ├── index.js │ ├── package.json │ └── src │ │ ├── footer.mdx │ │ ├── gatsby-plugin-theme-ui │ │ └── index.js │ │ ├── header.mdx │ │ └── index.js ├── theme-ui-blog │ ├── README.md │ ├── content │ │ ├── assets │ │ │ └── avatar.png │ │ └── posts │ │ │ └── hello.mdx │ ├── gatsby-config.js │ ├── index.js │ ├── package.json │ └── src │ │ ├── gatsby-plugin-theme-ui │ │ └── index.js │ │ ├── gatsby-theme-blog-core │ │ └── components │ │ │ ├── post.js │ │ │ └── posts.js │ │ ├── head.js │ │ ├── layout.js │ │ ├── post.js │ │ └── posts.js └── tomato │ ├── README.md │ ├── gatsby-config.js │ ├── package.json │ └── src │ └── gatsby-plugin-theme-ui │ └── index.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | .cache 2 | public 3 | package-lock.json 4 | _notes.md 5 | Users 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Gatsby Themes 3 | 4 | **WIP/Experimental** 5 | A collection of experimental Gatsby themes. Use at your own risk :ghost: 6 | 7 | https://gatsby-themes.now.sh 8 | 9 | :warning: **This repo is very unstable and likely to change.** 10 | 11 | ## Running the examples locally 12 | 13 | Clone this repo and run `yarn` in the root directory. 14 | From one of the examples in `packages/` run `yarn start` to start the Gatsby development server. 15 | 16 | ## Learn more about Gatsby themes 17 | 18 | - [Gatsby Docs](https://www.gatsbyjs.org/docs/themes/) 19 | - [Introducing Gatsby Themes][] 20 | - [Gatsby Themes: Watch Us Build a Theme Live][livestream] 21 | - [Themes Update: Child Theming and Component Shadowing][update] 22 | - [Chris Biscardi's Gatsby Days Talk](https://www.youtube.com/watch?v=wX84vXBpMR8) 23 | 24 | [introducing gatsby themes]: https://www.gatsbyjs.org/blog/2018-11-11-introducing-gatsby-themes/ 25 | [update]: https://www.gatsbyjs.org/blog/2019-01-29-themes-update-child-theming-and-component-shadowing/ 26 | [livestream]: https://www.gatsbyjs.org/blog/2019-02-11-gatsby-themes-livestream-and-example/ 27 | 28 | -------------------------------------------------------------------------------- /examples/blank/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/examples/blank', 3 | plugins: [ 4 | 'gatsby-theme-blank', 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /examples/blank/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "blank-example", 4 | "version": "1.0.2", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "clean": "gatsby clean", 9 | "start": "gatsby develop", 10 | "build": "gatsby build", 11 | "now-build": "gatsby build --prefix-paths" 12 | }, 13 | "dependencies": { 14 | "gatsby": "^2.13.36" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/blank/src/posts/hello.mdx: -------------------------------------------------------------------------------- 1 | 2 | export const date = '2019-07-23' 3 | 4 | # Hello 5 | 6 | This is an unstyled Gatsby MDX blog theme. 7 | -------------------------------------------------------------------------------- /examples/conference-styled/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/examples/conference-styled', 3 | siteMetadata: { 4 | title: 'Purple Conf 2019', 5 | description: 'The purplest conference ever', 6 | twitter: 'https://twitter.com/gatsbyjs', 7 | instagram: '', 8 | }, 9 | plugins: [ 10 | 'gatsby-theme-conference', 11 | { 12 | resolve: 'gatsby-plugin-google-fonts', 13 | options: { 14 | fonts: [ 15 | 'poppins\:400,600,900' 16 | ] 17 | } 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /examples/conference-styled/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "conference-example-styled", 4 | "version": "1.0.2", 5 | "scripts": { 6 | "clean": "rm -rf node_modules .cache public", 7 | "start": "gatsby develop", 8 | "build": "gatsby build", 9 | "now-build": "gatsby build --prefix-paths" 10 | }, 11 | "dependencies": { 12 | "gatsby": "^2.1.19", 13 | "gatsby-plugin-google-fonts": "^1.0.0", 14 | "gatsby-theme-conference": "^0.1.1", 15 | "react": "^16.8.3", 16 | "react-dom": "^16.8.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/conference-styled/src/data/mc.yml: -------------------------------------------------------------------------------- 1 | - id: mc-jay 2 | name: Jay Gatsby 3 | image: https://upload.wikimedia.org/wikipedia/en/4/42/JayGatsby1.jpg 4 | bio: A mysterious millionaire with shady business connections. 5 | company: Gatsby 6 | twitter: gatsbyjs 7 | github: gatsbyjs 8 | -------------------------------------------------------------------------------- /examples/conference-styled/src/data/schedule.yml: -------------------------------------------------------------------------------- 1 | - date: 2019-04-15 09:00 2 | title: Keynote 3 | speaker: daisy 4 | description: > 5 | Lollipop jelly beans tart biscuit icing croissant. Gummies apple pie candy canes. Candy canes gingerbread candy gummies jelly-o fruitcake. Jelly beans gummi bears caramels oat cake halvah cake gummies. Powder chupa chups jelly cake candy liquorice. Pie sweet roll fruitcake marshmallow chocolate. Sesame snaps biscuit apple pie cupcake cake jujubes icing gummi bears. Donut biscuit soufflé macaroon bear claw halvah toffee macaroon. 6 | - date: 2019-04-15 09:45 7 | title: Coffee Break 8 | description: Mix and mingle with other conference attendees and speakers 9 | - date: 2019-04-15 10:30 10 | title: Candy Canes 11 | speaker: jay 12 | description: > 13 | Candy canes cake pudding. Soufflé cake chocolate bar chocolate cake chocolate cake cheesecake cupcake cupcake muffin. Jujubes liquorice sesame snaps pie. Caramels pudding tiramisu jelly-o dragée pie tootsie roll. Macaroon candy halvah tart. Lollipop croissant pie tootsie roll bear claw bear claw donut ice cream. Gummies chupa chups sugar plum cupcake tiramisu candy canes danish wafer. Bonbon candy powder dessert muffin lemon drops. Bonbon brownie cotton candy topping donut ice cream jujubes soufflé. 14 | - date: 2019-04-16 09:00 15 | title: Pudding 16 | speaker: daisy 17 | description: > 18 | Candy canes cake pudding. Soufflé cake chocolate bar chocolate cake chocolate cake cheesecake cupcake cupcake muffin. Jujubes liquorice sesame snaps pie. Caramels pudding tiramisu jelly-o dragée pie tootsie roll. Macaroon candy halvah tart. Lollipop croissant pie tootsie roll bear claw bear claw donut ice cream. Gummies chupa chups sugar plum cupcake tiramisu candy canes danish wafer. Bonbon candy powder dessert muffin lemon drops. Bonbon brownie cotton candy topping donut ice cream jujubes soufflé. 19 | -------------------------------------------------------------------------------- /examples/conference-styled/src/data/speakers.yml: -------------------------------------------------------------------------------- 1 | - id: jay 2 | name: Jay Gatsby 3 | image: https://upload.wikimedia.org/wikipedia/en/4/42/JayGatsby1.jpg 4 | bio: A mysterious millionaire 5 | company: Gatsby 6 | twitter: gatsbyjs 7 | github: gatsbyjs 8 | - id: daisy 9 | name: Daisy Buchanan 10 | _image: https://upload.wikimedia.org/wikipedia/en/d/df/Daisy_Buchanan.png 11 | image: https://compote.slate.com/images/589ce9de-a6be-4167-b1ef-59be7f707ed6.jpg 12 | bio: Courteous driver 13 | company: Gatsby 14 | twitter: gatsbyjs 15 | github: gatsbyjs 16 | -------------------------------------------------------------------------------- /examples/conference-styled/src/data/sponsors.yml: -------------------------------------------------------------------------------- 1 | - id: gatsby 2 | name: Gatsby 3 | url: https://gatsbyjs.org 4 | logo: https://mutability.netlify.com/Gatsby-Logo.svg 5 | tier: platinum 6 | -------------------------------------------------------------------------------- /examples/conference-styled/src/data/venue.yml: -------------------------------------------------------------------------------- 1 | venue: 2 | title: Grand Theater 3 | address: 1234 Main St 4 | url: http://example.com 5 | description: > 6 | Wafer caramels sweet dessert oat cake cotton candy marshmallow gingerbread. Dragée danish danish icing gummi bears brownie bear claw donut. Muffin marzipan marshmallow lollipop marshmallow cake bonbon brownie. 7 | image: https://lh5.googleusercontent.com/p/AF1QipOb3qewSnTdEdo1d7_ZojPFpDpm3h8i2jPLfNz9=w408-h272-k-no 8 | mapURL: https://www.google.com/maps/place/Empire+State+Building/@40.7484445,-73.9878531,17z/data=!3m1!4b1!4m5!3m4!1s0x89c259a9b3117469:0xd134e199a405a163!8m2!3d40.7484405!4d-73.9856644 9 | -------------------------------------------------------------------------------- /examples/conference-styled/src/gatsby-plugin-theme-ui/index.js: -------------------------------------------------------------------------------- 1 | import theme from 'gatsby-theme-conference/src/gatsby-plugin-theme-ui' 2 | 3 | export default { 4 | ...theme, 5 | colors: { 6 | ...theme.colors, 7 | primary: 'rebeccapurple', 8 | secondary: '#407', 9 | muted: '#f6eeff' 10 | }, 11 | fonts: { 12 | body: 'Poppins, sans-serif', 13 | heading: 'Poppins, sans-serif', 14 | }, 15 | fontWeights: { 16 | body: 400, 17 | bold: 600, 18 | heading: 900, 19 | }, 20 | styles: { 21 | ...theme.styles, 22 | h1: { 23 | ...theme.styles.h1, 24 | color: 'primary', 25 | }, 26 | h2: { 27 | ...theme.styles.h2, 28 | color: 'primary', 29 | }, 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /examples/conference-styled/src/gatsby-theme-conference/components/banner.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { 3 | jsx, 4 | Flex, 5 | Container, 6 | Styled, 7 | } from 'theme-ui' 8 | import { 9 | Button, 10 | } from 'gatsby-theme-conference' 11 | 12 | export default props => 13 |
18 | 19 | 25 |
26 | 31 |
32 |
33 | 34 | Purple Conf 2019 35 | 36 | 40 | The purplest conference ever. 41 | 42 | 45 |
46 | 47 | 48 |
49 | -------------------------------------------------------------------------------- /examples/conference-styled/src/gatsby-theme-conference/components/header.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { Link } from 'gatsby' 3 | import { Fragment } from 'react' 4 | import { 5 | jsx, 6 | Styled, 7 | } from 'theme-ui' 8 | import { 9 | Button, 10 | NavLink, 11 | } from 'gatsby-theme-conference' 12 | 13 | 14 | export default props => 15 | 16 | 24 | 29 |
30 | Purple Conf 31 | 32 |
33 | 36 | 37 | -------------------------------------------------------------------------------- /examples/conference/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/examples/conference', 3 | plugins: [ 4 | 'gatsby-theme-conference' 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /examples/conference/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "conference-example", 4 | "version": "1.0.2", 5 | "scripts": { 6 | "clean": "rm -rf node_modules .cache public", 7 | "start": "gatsby develop", 8 | "build": "gatsby build", 9 | "now-build": "gatsby build --prefix-paths" 10 | }, 11 | "dependencies": { 12 | "gatsby": "^2.1.19", 13 | "gatsby-theme-conference": "^0.1.1", 14 | "react": "^16.8.3", 15 | "react-dom": "^16.8.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/conference/src/data/mc.yml: -------------------------------------------------------------------------------- 1 | - id: mc-jay 2 | name: Jay Gatsby 3 | image: https://upload.wikimedia.org/wikipedia/en/4/42/JayGatsby1.jpg 4 | bio: A mysterious millionaire with shady business connections. 5 | company: Gatsby 6 | twitter: gatsbyjs 7 | github: gatsbyjs 8 | -------------------------------------------------------------------------------- /examples/conference/src/data/schedule.yml: -------------------------------------------------------------------------------- 1 | - date: 2019-04-15 09:00 2 | title: Keynote 3 | speaker: daisy 4 | description: > 5 | Lollipop jelly beans tart biscuit icing croissant. Gummies apple pie candy canes. Candy canes gingerbread candy gummies jelly-o fruitcake. Jelly beans gummi bears caramels oat cake halvah cake gummies. Powder chupa chups jelly cake candy liquorice. Pie sweet roll fruitcake marshmallow chocolate. Sesame snaps biscuit apple pie cupcake cake jujubes icing gummi bears. Donut biscuit soufflé macaroon bear claw halvah toffee macaroon. 6 | - date: 2019-04-15 09:45 7 | title: Coffee Break 8 | description: Mix and mingle with other conference attendees and speakers 9 | - date: 2019-04-15 10:30 10 | title: Candy Canes 11 | speaker: jay 12 | description: > 13 | Candy canes cake pudding. Soufflé cake chocolate bar chocolate cake chocolate cake cheesecake cupcake cupcake muffin. Jujubes liquorice sesame snaps pie. Caramels pudding tiramisu jelly-o dragée pie tootsie roll. Macaroon candy halvah tart. Lollipop croissant pie tootsie roll bear claw bear claw donut ice cream. Gummies chupa chups sugar plum cupcake tiramisu candy canes danish wafer. Bonbon candy powder dessert muffin lemon drops. Bonbon brownie cotton candy topping donut ice cream jujubes soufflé. 14 | - date: 2019-04-16 09:00 15 | title: Pudding 16 | speaker: daisy 17 | description: > 18 | Candy canes cake pudding. Soufflé cake chocolate bar chocolate cake chocolate cake cheesecake cupcake cupcake muffin. Jujubes liquorice sesame snaps pie. Caramels pudding tiramisu jelly-o dragée pie tootsie roll. Macaroon candy halvah tart. Lollipop croissant pie tootsie roll bear claw bear claw donut ice cream. Gummies chupa chups sugar plum cupcake tiramisu candy canes danish wafer. Bonbon candy powder dessert muffin lemon drops. Bonbon brownie cotton candy topping donut ice cream jujubes soufflé. 19 | -------------------------------------------------------------------------------- /examples/conference/src/data/speakers.yml: -------------------------------------------------------------------------------- 1 | - id: jay 2 | name: Jay Gatsby 3 | image: https://upload.wikimedia.org/wikipedia/en/4/42/JayGatsby1.jpg 4 | bio: A mysterious millionaire 5 | company: Gatsby 6 | twitter: gatsbyjs 7 | github: gatsbyjs 8 | - id: daisy 9 | name: Daisy Buchanan 10 | _image: https://upload.wikimedia.org/wikipedia/en/d/df/Daisy_Buchanan.png 11 | image: https://compote.slate.com/images/589ce9de-a6be-4167-b1ef-59be7f707ed6.jpg 12 | bio: Courteous driver 13 | company: Gatsby 14 | twitter: gatsbyjs 15 | github: gatsbyjs 16 | -------------------------------------------------------------------------------- /examples/conference/src/data/sponsors.yml: -------------------------------------------------------------------------------- 1 | - id: gatsby 2 | name: Gatsby 3 | url: https://gatsbyjs.org 4 | logo: https://mutability.netlify.com/Gatsby-Logo.svg 5 | tier: platinum 6 | -------------------------------------------------------------------------------- /examples/conference/src/data/venue.yml: -------------------------------------------------------------------------------- 1 | venue: 2 | title: Grand Theater 3 | address: 1234 Main St 4 | url: http://example.com 5 | description: > 6 | Wafer caramels sweet dessert oat cake cotton candy marshmallow gingerbread. Dragée danish danish icing gummi bears brownie bear claw donut. Muffin marzipan marshmallow lollipop marshmallow cake bonbon brownie. 7 | image: https://lh5.googleusercontent.com/p/AF1QipOb3qewSnTdEdo1d7_ZojPFpDpm3h8i2jPLfNz9=w408-h272-k-no 8 | mapURL: https://www.google.com/maps/place/Empire+State+Building/@40.7484445,-73.9878531,17z/data=!3m1!4b1!4m5!3m4!1s0x89c259a9b3117469:0xd134e199a405a163!8m2!3d40.7484405!4d-73.9856644 9 | -------------------------------------------------------------------------------- /examples/css/content/posts/hello.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hello 3 | date: 2019-07-23 4 | --- 5 | 6 | This is a Gatsby theme made with Theme UI & CSS modules – 7 | create Theme UI standard themes and use them with CSS custom properties in CSS modules. 8 | This theme also includes support for color modes. 9 | 10 | ## Installation 11 | 12 | ```sh 13 | npm i gatsby-theme-css 14 | ``` 15 | 16 | ```js 17 | // gatsby-config.js 18 | module.exports = { 19 | plugins: [ 20 | 'gatsby-theme-css', 21 | ] 22 | } 23 | ``` 24 | 25 | Add MDX blog posts to `content/posts/`, and use frontmatter for metadata. 26 | -------------------------------------------------------------------------------- /examples/css/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/examples/css', 3 | plugins: [ 4 | 'gatsby-theme-css', 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /examples/css/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "css-example", 4 | "version": "1.0.3", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "gatsby develop", 9 | "clean": "gatsby clean", 10 | "build": "gatsby build", 11 | "now-build": "gatsby build --prefix-paths" 12 | }, 13 | "dependencies": { 14 | "gatsby": "*", 15 | "gatsby-theme-css": "^0.2.1", 16 | "react": "^16.8.6", 17 | "react-dom": "^16.8.6" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /examples/css/src/gatsby-theme-css/header.module.css: -------------------------------------------------------------------------------- 1 | .header { 2 | display: flex; 3 | align-items: center; 4 | } 5 | 6 | .spacer { margin-right: auto } 7 | -------------------------------------------------------------------------------- /examples/css/src/gatsby-theme-css/layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | import Layout from 'gatsby-theme-css/src/layout' 4 | import ToggleColorMode from 'gatsby-theme-css/src/toggle-color-mode' 5 | import css from './header.module.css' 6 | 7 | export default props => 8 | 9 |
10 | Home 11 |
12 | 13 |
14 | {props.children} 15 | 16 | -------------------------------------------------------------------------------- /examples/jxnblk-blog/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/examples/jxnblk-blog', 3 | plugins: [ 4 | 'gatsby-theme-demo', 5 | 'gatsby-theme-jxnblk', 6 | ], 7 | siteMetadata: { 8 | title: 'Gatsby Theme Jxnblk', 9 | description: 'A Theme UI preset theme for Gatsby', 10 | author: 'Brent Jackson', 11 | social: [ 12 | { 13 | name: 'twitter', 14 | url: 'https://twitter.com/jxnblk', 15 | }, 16 | { 17 | name: 'github', 18 | url: 'https://github.com/jxnblk', 19 | }, 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/jxnblk-blog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "jxnblk-blog", 4 | "version": "1.0.3", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "gatsby develop", 9 | "clean": "gatsby clean", 10 | "build": "gatsby build", 11 | "logo": "npx capture-website-cli 'https://contrast.now.sh/fff/000?size=96&text=S&radius=32&fontSize=2&baseline=1' --width=96 --height=96 --overwrite content/assets/avatar.png", 12 | "now-build": "gatsby build --prefix-paths" 13 | }, 14 | "dependencies": { 15 | "gatsby": "^2.13.36", 16 | "gatsby-theme-demo": "^0.1.2", 17 | "gatsby-theme-jxnblk": "^0.1.1", 18 | "react": "^16.8.6", 19 | "react-dom": "^16.8.6" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/jxnblk-blog/src/gatsby-theme-blog/components/bio-content.js: -------------------------------------------------------------------------------- 1 | export default props => false 2 | -------------------------------------------------------------------------------- /examples/jxnblk-blog/src/gatsby-theme-blog/components/header.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx, useColorMode } from 'theme-ui' 3 | import { Link } from 'gatsby' 4 | 5 | const modes = [ 6 | 'light', 7 | 'dark', 8 | ] 9 | 10 | export default props => { 11 | const [ mode, setMode ] = useColorMode() 12 | const toggleMode = e => { 13 | const i = modes.indexOf(mode) 14 | const n = (i + 1) % modes.length 15 | setMode(modes[n]) 16 | } 17 | 18 | return ( 19 |
28 |
32 | 40 | gatsby-theme-jxnblk 41 | 42 |
43 |
44 | 58 |
59 | ) 60 | } 61 | -------------------------------------------------------------------------------- /examples/mono-blog/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/examples/mono-blog', 3 | plugins: [ 4 | 'gatsby-theme-demo', 5 | 'gatsby-theme-mono', 6 | ], 7 | siteMetadata: { 8 | title: 'Gatsby Theme Mono', 9 | description: 'A Theme UI preset theme for Gatsby', 10 | author: 'Brent Jackson', 11 | social: [ 12 | { 13 | name: 'twitter', 14 | url: 'https://twitter.com/jxnblk', 15 | }, 16 | { 17 | name: 'github', 18 | url: 'https://github.com/jxnblk', 19 | }, 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/mono-blog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "mono-blog", 4 | "version": "1.0.3", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "gatsby develop", 9 | "clean": "gatsby clean", 10 | "build": "gatsby build", 11 | "logo": "npx capture-website-cli 'https://contrast.now.sh/fff/000?size=96&text=S&radius=32&fontSize=2&baseline=1' --width=96 --height=96 --overwrite content/assets/avatar.png", 12 | "now-build": "gatsby build --prefix-paths" 13 | }, 14 | "dependencies": { 15 | "gatsby": "^2.13.36", 16 | "gatsby-theme-demo": "^0.1.2", 17 | "gatsby-theme-mono": "^0.1.2", 18 | "react": "^16.8.6", 19 | "react-dom": "^16.8.6" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/mono-blog/src/gatsby-theme-blog/components/bio-content.js: -------------------------------------------------------------------------------- 1 | export default props => false 2 | -------------------------------------------------------------------------------- /examples/mono-blog/src/gatsby-theme-blog/components/header.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx, useColorMode } from 'theme-ui' 3 | import { Link } from 'gatsby' 4 | 5 | const modes = [ 6 | 'light', 7 | 'dark', 8 | ] 9 | 10 | export default props => { 11 | const [ mode, setMode ] = useColorMode() 12 | const toggleMode = e => { 13 | const i = modes.indexOf(mode) 14 | const n = (i + 1) % modes.length 15 | setMode(modes[n]) 16 | } 17 | 18 | return ( 19 |
28 |
32 | 40 | gatsby-theme-mono 41 | 42 |
43 |
44 | 58 |
59 | ) 60 | } 61 | -------------------------------------------------------------------------------- /examples/mono-notes/content/notes/getting-started.mdx: -------------------------------------------------------------------------------- 1 | import Readme from 'gatsby-theme-mono/README.md' 2 | 3 | # Getting Started 4 | 5 | See https://github.com/jxnblk/gatsby-themes/tree/master/packages/mono 6 | 7 | -------------------------------------------------------------------------------- /examples/mono-notes/content/notes/hello.mdx: -------------------------------------------------------------------------------- 1 | 2 | # Hello 3 | 4 | This is `gatsby-theme-mono` *horizontally* composed with `gatsby-theme-notes`. 5 | The Mono theme is built with [Theme UI][], 6 | and can be used to style other Gatsby themes that use `gatsby-plugin-theme-ui`. 7 | 8 | [theme ui]: https://theme-ui.com 9 | -------------------------------------------------------------------------------- /examples/mono-notes/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/examples/mono-notes', 3 | plugins: [ 4 | 'gatsby-theme-notes', 5 | 'gatsby-theme-mono', 6 | ], 7 | siteMetadata: { 8 | title: 'Gatsby Theme Mono', 9 | description: 'A Theme UI preset theme for Gatsby', 10 | author: 'Brent Jackson', 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/mono-notes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "mono-notes", 4 | "version": "1.0.2", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "gatsby develop", 9 | "clean": "gatsby clean", 10 | "build": "gatsby build", 11 | "now-build": "gatsby build --prefix-paths" 12 | }, 13 | "dependencies": { 14 | "gatsby": "^2.13.36", 15 | "gatsby-theme-mono": "^0.1.2", 16 | "gatsby-theme-notes": "*", 17 | "react": "^16.8.6", 18 | "react-dom": "^16.8.6" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/swiss-blog/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/examples/swiss-blog', 3 | plugins: [ 4 | 'gatsby-theme-demo', 5 | 'gatsby-theme-swiss', 6 | ], 7 | siteMetadata: { 8 | title: 'Gatsby Theme Swiss', 9 | description: 'A Theme UI preset theme for Gatsby', 10 | author: 'Brent Jackson', 11 | social: [ 12 | { 13 | name: 'twitter', 14 | url: 'https://twitter.com/jxnblk', 15 | }, 16 | { 17 | name: 'github', 18 | url: 'https://github.com/jxnblk', 19 | }, 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/swiss-blog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "swiss-blog", 4 | "version": "1.0.3", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "gatsby develop", 9 | "clean": "gatsby clean", 10 | "build": "gatsby build", 11 | "logo": "npx capture-website-cli 'https://contrast.now.sh/fff/000?size=96&text=S&radius=32&fontSize=2&baseline=1' --width=96 --height=96 --overwrite content/assets/avatar.png", 12 | "now-build": "gatsby build --prefix-paths" 13 | }, 14 | "dependencies": { 15 | "gatsby": "^2.13.36", 16 | "gatsby-theme-demo": "^0.1.2", 17 | "gatsby-theme-swiss": "^0.1.2", 18 | "react": "^16.8.6", 19 | "react-dom": "^16.8.6" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/swiss-blog/src/gatsby-theme-blog/components/bio-content.js: -------------------------------------------------------------------------------- 1 | export default props => false 2 | -------------------------------------------------------------------------------- /examples/swiss-blog/src/gatsby-theme-blog/components/header.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx, useColorMode } from 'theme-ui' 3 | import { Link } from 'gatsby' 4 | 5 | const modes = [ 6 | 'light', 7 | 'dark', 8 | ] 9 | 10 | export default props => { 11 | const [ mode, setMode ] = useColorMode() 12 | const toggleMode = e => { 13 | const i = modes.indexOf(mode) 14 | const n = (i + 1) % modes.length 15 | setMode(modes[n]) 16 | } 17 | 18 | return ( 19 |
28 |
32 | 40 | gatsby-theme-swiss 41 | 42 |
43 |
44 | 58 |
59 | ) 60 | } 61 | -------------------------------------------------------------------------------- /examples/system/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/examples/system', 3 | plugins: [ 4 | 'gatsby-theme-system' 5 | ], 6 | siteMetadata: { 7 | title: 'Gatsby Theme System', 8 | description: 'An MDX/Styled System Gatsby theme', 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/system/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "system-example", 4 | "version": "1.0.2", 5 | "scripts": { 6 | "clean": "rm -rf node_modules .cache public", 7 | "start": "gatsby develop", 8 | "build": "gatsby build", 9 | "now-build": "gatsby build --prefix-paths" 10 | }, 11 | "dependencies": { 12 | "gatsby": "^2.1.19", 13 | "gatsby-theme-system": "^0.2.1", 14 | "react": "^16.8.3", 15 | "react-dom": "^16.8.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/system/src/gatsby-theme-system/header.mdx: -------------------------------------------------------------------------------- 1 | 2 | - Gatsby Theme System Example 3 | -------------------------------------------------------------------------------- /examples/system/src/layout.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | import { 4 | Styled, 5 | css, 6 | Layout, 7 | Header, 8 | Main, 9 | Footer, 10 | Box, 11 | } from 'theme-ui' 12 | 13 | export default props => 14 | 15 |
16 | 17 | Gatsby Theme System 18 | 19 | 20 | 21 | Home 22 | 23 | Demo 24 |
25 |
26 | {props.children} 27 |
28 | 36 | 37 | -------------------------------------------------------------------------------- /examples/system/src/pages/index.mdx: -------------------------------------------------------------------------------- 1 | import { Layout } from 'gatsby-theme-system' 2 | import Readme from 'gatsby-theme-system/README.md' 3 | 4 | export default Layout 5 | 6 | 7 | -------------------------------------------------------------------------------- /examples/theme-ui-blog/content/posts/hello.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hello 3 | date: 2019-08-15 4 | --- 5 | 6 | Hello, this is an example site built with `gatsby-theme-ui-blog`. 7 | This theme includes only minimal styles to get started with building a custom blog with Theme UI. 8 | -------------------------------------------------------------------------------- /examples/theme-ui-blog/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/examples/theme-ui-blog', 3 | plugins: [ 4 | 'gatsby-theme-ui-blog', 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /examples/theme-ui-blog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "theme-ui-blog-example", 4 | "version": "1.0.1", 5 | "license": "MIT", 6 | "scripts": { 7 | "start": "gatsby develop", 8 | "build": "gatsby build --prefix-paths", 9 | "clean": "gatsby clean", 10 | "serve": "gatsby serve" 11 | }, 12 | "dependencies": { 13 | "gatsby": "*", 14 | "gatsby-theme-ui-blog": "^1.0.1", 15 | "react": "^16.9.0", 16 | "react-dom": "^16.9.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/tomato-blog/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/examples/tomato-blog', 3 | plugins: [ 4 | 'gatsby-theme-demo', 5 | 'gatsby-theme-tomato', 6 | ], 7 | siteMetadata: { 8 | title: 'Gatsby Theme Tomato', 9 | description: 'A Theme UI preset theme for Gatsby', 10 | author: 'Tomato', 11 | social: [ 12 | { 13 | name: 'twitter', 14 | url: 'https://twitter.com/jxnblk', 15 | }, 16 | { 17 | name: 'github', 18 | url: 'https://github.com/jxnblk', 19 | }, 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/tomato-blog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "tomato-blog", 4 | "version": "1.0.3", 5 | "main": "index.js", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "gatsby develop", 9 | "clean": "gatsby clean", 10 | "build": "gatsby build", 11 | "now-build": "gatsby build --prefix-paths" 12 | }, 13 | "dependencies": { 14 | "gatsby": "^2.13.36", 15 | "gatsby-theme-blog": "^1.0.2", 16 | "gatsby-theme-demo": "^0.1.2", 17 | "gatsby-theme-mono": "^0.1.2", 18 | "gatsby-theme-swiss": "^0.1.2", 19 | "gatsby-theme-tomato": "^0.1.2", 20 | "react": "^16.8.6", 21 | "react-dom": "^16.8.6" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/tomato-blog/src/gatsby-theme-ui-blog/layout.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from 'theme-ui' 3 | import { Global } from '@emotion/core' 4 | import { Link } from 'gatsby' 5 | 6 | export default props => 7 |
13 | 18 |
22 | 29 | gatsby-theme-tomato 30 | 31 |
32 |
33 | {props.children} 34 |
35 |
36 | -------------------------------------------------------------------------------- /examples/www/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | 'gatsby-plugin-mdx', 4 | 'gatsby-theme-mono', 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /examples/www/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "www", 4 | "version": "1.0.4", 5 | "scripts": { 6 | "clean": "gatsby clean && rm -rf node_modules", 7 | "start": "gatsby develop", 8 | "build": "gatsby build", 9 | "now-build": "gatsby build" 10 | }, 11 | "dependencies": { 12 | "gatsby": "^2.1.19", 13 | "gatsby-plugin-mdx": "^1.0.16", 14 | "gatsby-theme-mono": "^0.1.2", 15 | "react": "^16.8.3", 16 | "react-dom": "^16.8.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/www/src/index.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx, Styled } from 'theme-ui' 3 | 4 | export const Layout = props => 5 | 10 | {props.children} 11 | 12 | -------------------------------------------------------------------------------- /examples/www/src/pages/index.mdx: -------------------------------------------------------------------------------- 1 | import { Layout } from '..' 2 | 3 | export default Layout 4 | 5 | # Gatsby Themes 6 | 7 | A work-in-progress exploration of Gatsby themes 8 | 9 | https://github.com/jxnblk/gatsby-themes 10 | 11 | ## Examples 12 | 13 | - [Theme UI Blog](/examples/theme-ui-blog) 14 | - [Tomato](/examples/tomato-blog) 15 | - [Swiss](/examples/swiss-blog) 16 | - [Mono](/examples/mono-blog) 17 | - [Mono Notes](/examples/mono-notes) 18 | - [Jxnblk](/examples/jxnblk-blog) 19 | - [CSS](/examples/css) 20 | - [System](/examples/system) 21 | - [Conference](/examples/conference-styled) 22 | 23 | [theme ui]: https://theme-ui.com 24 | [mdx]: https://mdxjs.com 25 | [emotion]: https://emotion.sh 26 | [styled system]: https://styled-system.com 27 | -------------------------------------------------------------------------------- /examples/www/src/pages/notes.mdx: -------------------------------------------------------------------------------- 1 | import { Layout } from '..' 2 | 3 | export default Layout 4 | 5 | # Notes 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "independent", 3 | "npmClient": "yarn", 4 | "useWorkspaces": true, 5 | "packages": [ 6 | "packages/*" 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /now.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "public": true, 4 | "version": 2, 5 | "name": "gatsby-themes", 6 | "alias": "gatsby-themes.now.sh", 7 | "builds": [ 8 | { 9 | "src": "examples/www/package.json", 10 | "use": "@now/static-build", 11 | "config": { 12 | "distDir": "public" 13 | } 14 | }, 15 | { 16 | "src": "examples/**/package.json", 17 | "use": "@now/static-build", 18 | "config": { 19 | "distDir": "public" 20 | } 21 | } 22 | ], 23 | "routes": [ 24 | { "src": "/(.*)", "dest": "/examples/www/$1" } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "gatsby-themes", 4 | "description": "A collection of Gatsby themes", 5 | "author": "Brent Jackson ", 6 | "license": "MIT", 7 | "scripts": { 8 | "clean": "npx lerna run clean", 9 | "start:www": "yarn workspace www start", 10 | "start:blank": "yarn workspace blank-example start", 11 | "start:system": "yarn workspace system-example start", 12 | "start:css": "yarn workspace gatsby-theme-css start", 13 | "start:tomato": "yarn workspace tomato-blog start", 14 | "start:conference": "yarn workspace conference-example start", 15 | "start:conf2": "yarn workspace conference-example-styled start" 16 | }, 17 | "workspaces": [ 18 | "packages/*", 19 | "examples/*" 20 | ], 21 | "devDependencies": { 22 | "lerna": "^3.16.4" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/blank/README.md: -------------------------------------------------------------------------------- 1 | 2 | # gatsby-theme-blank 3 | 4 | **WIP** A bare-bones, unstyled MDX blog theme for Gatsby 5 | 6 | This theme is intended for use as a base (i.e. parent) theme which can be used to create custom blog themes. 7 | 8 | ## Usage 9 | 10 | ```sh 11 | npm i gatsby-theme-blank 12 | ``` 13 | 14 | In your own theme's `gatsby-config.js`, add this theme to the `plugins` array. 15 | 16 | ```js 17 | // gatsby-config.js 18 | module.exports = { 19 | plugins: [ 20 | 'gatsby-theme-blank', 21 | ] 22 | } 23 | ``` 24 | 25 | Add other plugins as needed, and shadow these components to customize the presentation layer: 26 | 27 | - `src/gatsby-theme-blank/posts.js`: root-level index page 28 | - `src/gatsby-theme-blank/post.js`: post detail page 29 | 30 | In the consuming site, add `.mdx` files to the `src/posts/` directory to add blog posts. 31 | 32 | **Notes:** 33 | 34 | - The implementation details in `gatsby-node.js` are likely to change in the near future, but the outward API should stay the same. 35 | - Posts are ordered by an exported `date` value *or* a `date` frontmatter field 36 | - Titles are derived from the first heading found in the MDX document 37 | 38 | This theme does **not**: 39 | 40 | - Include any styling 41 | - Include features like RSS, authors, image processing, etc. 42 | - Include any additional theme options 43 | -------------------------------------------------------------------------------- /packages/blank/gatsby-config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | plugins: [ 5 | 'gatsby-plugin-mdx', 6 | { 7 | resolve: 'gatsby-source-filesystem', 8 | options: { 9 | name: 'posts', 10 | path: path.resolve('src/posts'), 11 | } 12 | }, 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /packages/blank/gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const { createFilePath } = require('gatsby-source-filesystem') 3 | const mkdirp = require('mkdirp') 4 | const get = require('lodash.get') 5 | 6 | exports.onPreBootstrap = ({ store }) => { 7 | const { program } = store.getState() 8 | const dir = path.join(program.directory, `src/posts`) 9 | mkdirp.sync(dir) 10 | } 11 | 12 | const mdxResolverPassthrough = fieldName => async ( 13 | source, 14 | args, 15 | context, 16 | info 17 | ) => { 18 | const type = info.schema.getType(`Mdx`) 19 | const mdxNode = context.nodeModel.getNodeById({ 20 | id: source.parent, 21 | }) 22 | const resolver = type.getFields()[fieldName].resolve 23 | const result = await resolver(mdxNode, args, context, { 24 | fieldName, 25 | }) 26 | return result 27 | } 28 | 29 | const resolveTitle = async (...args) => { 30 | const headings = await mdxResolverPassthrough('headings')(...args) 31 | return get(headings, '0.value', '') 32 | } 33 | 34 | exports.sourceNodes = ({ actions, schema }) => { 35 | actions.createTypes( 36 | schema.buildObjectType({ 37 | name: 'Post', 38 | fields: { 39 | id: { 40 | type: 'ID!', 41 | }, 42 | slug: { 43 | type: 'String!', 44 | }, 45 | date: { 46 | type: 'Date', 47 | extensions: { 48 | dateformat: {} 49 | } 50 | }, 51 | title: { 52 | type: 'String', 53 | resolve: resolveTitle, 54 | }, 55 | body: { 56 | type: 'String!', 57 | resolve: mdxResolverPassthrough('body'), 58 | }, 59 | }, 60 | interfaces: [ 'Node' ] 61 | }) 62 | ) 63 | } 64 | 65 | exports.onCreateNode = ({ 66 | node, 67 | actions, 68 | getNode, 69 | createNodeId, 70 | createContentDigest, 71 | }) => { 72 | if (node.internal.type !== 'Mdx') return 73 | const parent = getNode(node.parent) 74 | if (parent.sourceInstanceName !== 'posts') return 75 | const child = getNode(node.id) 76 | const slug = createFilePath({ node, getNode }) 77 | const title = get(node, 'headings[1].value', '') 78 | const date = get(node, 'exports.date', 79 | get(node, 'frontmatter.date') 80 | ) 81 | 82 | actions.createNode({ 83 | title, 84 | date, 85 | slug, 86 | id: createNodeId(`${node.id} >>> Post`), 87 | parent: node.id, 88 | children: [], 89 | internal: { 90 | type: 'Post', 91 | contentDigest: createContentDigest({ 92 | slug, 93 | date, 94 | body: node.rawBody, 95 | }), 96 | content: node.rawBody, 97 | description: 'Blog Posts', 98 | }, 99 | }) 100 | 101 | actions.createParentChildLink({ 102 | parent, 103 | child: node, 104 | }) 105 | } 106 | 107 | 108 | 109 | exports.createPages = async ({ 110 | graphql, 111 | actions, 112 | }) => { 113 | 114 | const result = await graphql(` 115 | { 116 | allPost( 117 | sort: { 118 | fields: date, 119 | order: DESC 120 | } 121 | ) { 122 | edges { 123 | node { 124 | id 125 | slug 126 | date 127 | title 128 | } 129 | } 130 | } 131 | } 132 | `) 133 | if (result.errors) { 134 | console.log(result.errors) 135 | return 136 | } 137 | const posts = result.data.allPost.edges.map(edge => edge.node) 138 | 139 | posts.forEach(post => { 140 | actions.createPage({ 141 | path: post.slug, 142 | component: require.resolve('./src/templates/post.js'), 143 | context: { 144 | id: post.id, 145 | }, 146 | }) 147 | }) 148 | 149 | const filtered = await graphql(` 150 | { 151 | allPost( 152 | sort: { fields: date, order: DESC } 153 | limit: 1000 154 | ) { 155 | edges { 156 | node { 157 | id 158 | slug 159 | } 160 | } 161 | } 162 | } 163 | `) 164 | if (filtered.errors) { 165 | console.log(filtered.errors) 166 | return 167 | } 168 | const index = filtered.data.allPost.edges.map(edge => edge.node) 169 | const limit = 16 170 | const length = Math.ceil(index.length / limit) 171 | 172 | Array.from({ length }).forEach((_, i) => { 173 | const previousIndex = i 174 | const nextIndex = i + 2 175 | const previous = (i > 0) ? ( 176 | previousIndex === 1 177 | ? '/' 178 | : '/' + previousIndex + '' 179 | ) : '' 180 | 181 | const next = nextIndex <= length ? '/' + nextIndex : '' 182 | actions.createPage({ 183 | path: i === 0 ? '/' : '/' + (i + 1), 184 | component: require.resolve('./src/templates/posts.js'), 185 | context: { 186 | previous, 187 | next, 188 | limit, 189 | skip: i * limit, 190 | }, 191 | }) 192 | }) 193 | } 194 | -------------------------------------------------------------------------------- /packages/blank/index.js: -------------------------------------------------------------------------------- 1 | // noop 2 | -------------------------------------------------------------------------------- /packages/blank/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-theme-blank", 3 | "version": "0.1.1", 4 | "description": "A bare-bones, unstyled MDX blog theme for Gatsby", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "gatsby develop" 8 | }, 9 | "keywords": [ 10 | "gatsby", 11 | "gatsby-plugin", 12 | "gatsby-theme", 13 | "blog", 14 | "mdx" 15 | ], 16 | "author": "Brent Jackson", 17 | "license": "MIT", 18 | "peerDependencies": { 19 | "gatsby": "^2.13.23", 20 | "react": "^16.8.6", 21 | "react-dom": "^16.8.6" 22 | }, 23 | "devDependencies": { 24 | "gatsby": "^2.13.23", 25 | "react": "^16.8.6", 26 | "react-dom": "^16.8.6" 27 | }, 28 | "dependencies": { 29 | "@mdx-js/mdx": "^1.1.0", 30 | "@mdx-js/react": "^1.0.27", 31 | "gatsby-plugin-mdx": "^1.0.13", 32 | "gatsby-source-filesystem": "^2.1.5", 33 | "lodash.get": "^4.4.2", 34 | "mkdirp": "^1.0.3" 35 | }, 36 | "repository": "jxnblk/gatsby-themes" 37 | } 38 | -------------------------------------------------------------------------------- /packages/blank/src/post.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default ({ 4 | children, 5 | ...props 6 | }) => 7 |
8 | {children} 9 | 
12 |
13 | -------------------------------------------------------------------------------- /packages/blank/src/posts.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link } from 'gatsby' 3 | 4 | export default props => 5 |
6 |
    7 | {props.posts.map(post => ( 8 |
  • 9 | 10 | {post.title || post.slug} 11 | 12 |
    • 13 | ))} 14 |
15 | 
18 |
19 | -------------------------------------------------------------------------------- /packages/blank/src/posts/hello.mdx: -------------------------------------------------------------------------------- 1 | 2 | export const date = '2019-07-15' 3 | 4 | # Hello World 5 | -------------------------------------------------------------------------------- /packages/blank/src/templates/post.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { graphql } from 'gatsby' 3 | import { MDXRenderer } from 'gatsby-plugin-mdx' 4 | import Post from '../post' 5 | 6 | export default props => { 7 | const { post } = props.data 8 | const children = 9 | 10 | return ( 11 | 16 | ) 17 | } 18 | 19 | export const query = graphql` 20 | query ($id: String!) { 21 | post(id: { eq: $id }) { 22 | id 23 | date 24 | title 25 | body 26 | } 27 | } 28 | ` 29 | -------------------------------------------------------------------------------- /packages/blank/src/templates/posts.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { graphql } from 'gatsby' 3 | import Posts from '../posts' 4 | 5 | export default props => { 6 | const posts = props.data.posts.edges 7 | .map(edge => edge.node) 8 | 9 | return ( 10 | 14 | ) 15 | } 16 | 17 | export const query = graphql` 18 | query ($skip: Int!, $limit: Int!) { 19 | posts: allPost( 20 | sort: { 21 | fields: date, 22 | order: DESC 23 | } 24 | limit: $limit 25 | skip: $skip 26 | ) { 27 | edges { 28 | node { 29 | id 30 | slug 31 | date 32 | title 33 | } 34 | } 35 | } 36 | } 37 | ` 38 | -------------------------------------------------------------------------------- /packages/blog-demo/content/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jxnblk/gatsby-themes/ea0e19cfeef7fba0d112ffe7e78c94137f50a6dc/packages/blog-demo/content/assets/avatar.png -------------------------------------------------------------------------------- /packages/blog-demo/content/posts/hello-world.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: Hello, World! 3 | date: 2019-07-26 4 | --- 5 | 6 | This is demo content for `gatsby-theme-blog`. 7 | You can install this theme as a replacement for `gatsby-theme-blog` but with some default content included for development. 8 | -------------------------------------------------------------------------------- /packages/blog-demo/content/posts/my-second-post.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: My Second Post! 3 | date: 2019-05-15 4 | --- 5 | 6 | Wow! I love blogging so much already. 7 | 8 | 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)) 9 | 10 | Yeah, I didn't either. 11 | 12 | ![picture of a salty egg](https://source.unsplash.com/random?salted-egg) 13 | -------------------------------------------------------------------------------- /packages/blog-demo/content/posts/new-beginnings.mdx: -------------------------------------------------------------------------------- 1 | --- 2 | title: New Beginnings 3 | date: 2019-05-29 4 | --- 5 | 6 | Far far away, behind the word mountains, far from the countries Vokalia and 7 | Consonantia, there live the blind texts. Separated they live in Bookmarksgrove 8 | right at the coast of the Semantics, a large language ocean. A small river named 9 | Duden flows by their place and supplies it with the necessary regelialia. 10 | 11 | ## On deer horse aboard tritely yikes and much 12 | 13 | The Big Oxmox advised her not to do so, because there were thousands of bad 14 | Commas, wild Question Marks and devious Semikoli, but the Little Blind Text 15 | didn’t listen. She packed her seven versalia, put her initial into the belt and 16 | made herself on the way. 17 | 18 | - This however showed weasel 19 | - Well uncritical so misled 20 | - this is very interesting 21 | - Goodness much until that fluid owl 22 | 23 | When she reached the first hills of the **Italic Mountains**, she had a last 24 | view back on the skyline of her hometown _Bookmarksgrove_, the headline of 25 | [Alphabet Village](http://google.com) and the subline of her own road, the Line 26 | Lane. Pityful a rethoric question ran over her cheek, then she continued her 27 | way. On her way she met a copy. 28 | 29 | ### Overlaid the jeepers uselessly much excluding 30 | 31 | But nothing the copy said could convince her and so it didn’t take long until a 32 | few insidious Copy Writers ambushed her, made her drunk with 33 | [Longe and Parole](http://google.com) and dragged her into their agency, where 34 | they abused her for their projects again and again. And if she hasn’t been 35 | rewritten, then they are still using her. 36 | 37 | > Far far away, behind the word mountains, far from the countries Vokalia and 38 | > Consonantia, there live the blind texts. Separated they live in Bookmarksgrove 39 | > right at the coast of the Semantics, a large language ocean. 40 | 41 | It is a paradisematic country, in which roasted parts of sentences fly into your 42 | mouth. Even the all-powerful Pointing has no control about the blind texts it is 43 | an almost unorthographic life One day however a small line of blind text by the 44 | name of Lorem Ipsum decided to leave for the far World of Grammar. 45 | 46 | ### According a funnily until pre-set or arrogant well cheerful 47 | 48 | The Big Oxmox advised her not to do so, because there were thousands of bad 49 | Commas, wild Question Marks and devious Semikoli, but the Little Blind Text 50 | didn’t listen. She packed her seven versalia, put her initial into the belt and 51 | made herself on the way. 52 | 53 | 1. So baboon this 54 | 2. Mounted militant weasel gregariously admonishingly straightly hey 55 | 3. Dear foresaw hungry and much some overhung 56 | 4. Rash opossum less because less some amid besides yikes jeepers frenetic 57 | impassive fruitlessly shut 58 | 59 | When she reached the first hills of the Italic Mountains, she had a last view 60 | back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet 61 | Village and the subline of her own road, the Line Lane. Pityful a rethoric 62 | question ran over her cheek, then she continued her way. On her way she met a 63 | copy. 64 | 65 | > The copy warned the Little Blind Text, that where it came from it would have 66 | > been rewritten a thousand times and everything that was left from its origin 67 | > would be the word "and" and the Little Blind Text should turn around and 68 | > return to its own, safe country. 69 | 70 | But nothing the copy said could convince her and so it didn’t take long until a 71 | few insidious Copy Writers ambushed her, made her drunk with Longe and Parole 72 | and dragged her into their agency, where they abused her for their projects 73 | again and again. And if she hasn’t been rewritten, then they are still using 74 | her. Far far away, behind the word mountains, far from the countries Vokalia and 75 | Consonantia, there live the blind texts. 76 | 77 | #### Silent delightfully including because before one up barring chameleon 78 | 79 | Separated they live in Bookmarksgrove right at the coast of the Semantics, a 80 | large language ocean. A small river named Duden flows by their place and 81 | supplies it with the necessary regelialia. It is a paradisematic country, in 82 | which roasted parts of sentences fly into your mouth. 83 | 84 | Even the all-powerful Pointing has no control about the blind texts it is an 85 | almost unorthographic life One day however a small line of blind text by the 86 | name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox 87 | advised her not to do so, because there were thousands of bad Commas, wild 88 | Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. 89 | 90 | ##### Wherever far wow thus a squirrel raccoon jeez jaguar this from along 91 | 92 | She packed her seven versalia, put her initial into the belt and made herself on 93 | the way. When she reached the first hills of the Italic Mountains, she had a 94 | last view back on the skyline of her hometown Bookmarksgrove, the headline of 95 | Alphabet Village and the subline of her own road, the Line Lane. Pityful a 96 | rethoric question ran over her cheek, then she continued her way. On her way she 97 | met a copy. 98 | 99 | ###### Slapped cozy a that lightheartedly and far 100 | 101 | The copy warned the Little Blind Text, that where it came from it would have 102 | been rewritten a thousand times and everything that was left from its origin 103 | would be the word "and" and the Little Blind Text should turn around and return 104 | to its own, safe country. But nothing the copy said could convince her and so it 105 | didn’t take long until a few insidious Copy Writers ambushed her, made her drunk 106 | with Longe and Parole and dragged her into their agency, where they abused her 107 | for their projects again and again. 108 | -------------------------------------------------------------------------------- /packages/blog-demo/gatsby-config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | plugins: [ 5 | { 6 | resolve: 'gatsby-theme-ui-blog', 7 | // resolve: 'gatsby-theme-blog', 8 | options: { 9 | // absolute dirnames are created in the site 10 | contentPath: path.resolve( 11 | path.join(__dirname, 'content/posts') 12 | ), 13 | assetPath: path.resolve( 14 | path.join(__dirname, 'content/assets') 15 | ), 16 | } 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /packages/blog-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-theme-demo", 3 | "version": "0.1.2", 4 | "main": "gatsby-config.js", 5 | "license": "MIT", 6 | "dependencies": { 7 | "gatsby-theme-ui-blog": "^1.0.1" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /packages/brutalist/README.md: -------------------------------------------------------------------------------- 1 | 2 | # gatsby-theme-brutalist 3 | 4 | A [Theme UI][] preset theme for [Gatsby][] 5 | 6 | ```sh 7 | npm i gatsby-theme-brutalist 8 | ``` 9 | 10 | ## Usage 11 | 12 | This theme is built with composition in mind and can be used as the basis for a custom theme or to adjust the styles in other themes. 13 | 14 | ### Composed with other themes 15 | 16 | ```js 17 | // gatsby-config.js 18 | module.exports = { 19 | plugins: [ 20 | 'gatsby-theme-blog', 21 | 'gatsby-theme-brutalist', 22 | ] 23 | } 24 | ``` 25 | 26 | ```js 27 | // gatsby-config.js 28 | module.exports = { 29 | plugins: [ 30 | 'gatsby-theme-notes', 31 | 'gatsby-theme-brutalist', 32 | ] 33 | } 34 | ``` 35 | 36 | ### As a base theme 37 | 38 | The styles in this theme can be used as a starting point for custom themes. 39 | 40 | ```js 41 | // gatsby-config.js 42 | module.exports = { 43 | plugins: [ 44 | 'gatsby-theme-brutalist', 45 | 'gatsby-plugin-theme-ui', 46 | ] 47 | } 48 | ``` 49 | 50 | ```js 51 | // src/gatsby-plugin-theme-ui/index.js 52 | import baseTheme from 'gatsby-theme-brutalist' 53 | 54 | export default { 55 | ...baseTheme, 56 | // add custom styles to override the base theme 57 | } 58 | ``` 59 | 60 | See the [Theme UI][] docs for more info on how to use the styles in your custom theme. 61 | 62 | MIT License 63 | 64 | [gatsby]: https://gatsbyjs.org 65 | [theme ui]: https://theme-ui.com 66 | -------------------------------------------------------------------------------- /packages/brutalist/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | 'gatsby-plugin-theme-ui', 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /packages/brutalist/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-theme-brutalist", 3 | "version": "0.1.2", 4 | "main": "gatsby-config.js", 5 | "license": "MIT", 6 | "peerDependencies": { 7 | "gatsby": "^2.13.36", 8 | "react": "^16.8.6", 9 | "react-dom": "^16.8.6" 10 | }, 11 | "dependencies": { 12 | "@emotion/core": "^10.0.14", 13 | "@mdx-js/react": "^1.0.27", 14 | "gatsby-plugin-theme-ui": "^0.2.18", 15 | "theme-ui": "^0.2.18" 16 | }, 17 | "repository": "jxnblk/gatsby-themes", 18 | "keywords": [ 19 | "gatsby", 20 | "gatsby-theme", 21 | "gatsby-plugin", 22 | "blog", 23 | "mdx", 24 | "theme-ui" 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /packages/brutalist/src/gatsby-plugin-theme-ui/index.js: -------------------------------------------------------------------------------- 1 | export default { 2 | initialColorMode: 'light', 3 | colors: { 4 | text: '#000', 5 | background: '#fff', 6 | primary: '#00e', 7 | secondary: '#551a8b', 8 | muted: '#f6f6f9', 9 | modes: { 10 | dark: { 11 | text: '#fff', 12 | background: '#353944', 13 | primary: '#3cf', 14 | secondary: '#39c', 15 | muted: '#2d313a', 16 | } 17 | } 18 | }, 19 | fonts: { 20 | heading: 'Georgia, serif', 21 | body: 'Verdana, sans-serif', 22 | monospace: 'monospace', 23 | }, 24 | lineHeights: { 25 | body: 1.5, 26 | heading: 1.5, 27 | }, 28 | fontWeights: { 29 | body: 400, 30 | heading: 700, 31 | bold: 700, 32 | }, 33 | sizes: { 34 | container: 768, 35 | }, 36 | type: { 37 | heading: { 38 | fontFamily: 'heading', 39 | fontWeight: 'heading', 40 | lineHeight: 'heading', 41 | }, 42 | mono: { 43 | fontFamily: 'monospace', 44 | }, 45 | }, 46 | styles: { 47 | root: { 48 | fontFamily: 'body', 49 | fontWeight: 'body', 50 | lineHeight: 'body', 51 | }, 52 | a: { 53 | color: 'primary', 54 | ':hover,:focus': { 55 | color: 'secondary', 56 | }, 57 | }, 58 | h1: { 59 | variant: 'type.heading', 60 | }, 61 | h2: { 62 | variant: 'type.heading', 63 | }, 64 | h3: { 65 | variant: 'type.heading', 66 | }, 67 | h4: { 68 | variant: 'type.heading', 69 | }, 70 | h5: { 71 | variant: 'type.heading', 72 | }, 73 | h6: { 74 | variant: 'type.heading', 75 | }, 76 | pre: { 77 | variant: 'type.mono', 78 | overflow: 'auto', 79 | fontSize: 1, 80 | color: 'secondary', 81 | }, 82 | code: { 83 | variant: 'type.mono', 84 | }, 85 | inlineCode: { 86 | variant: 'type.mono', 87 | color: 'secondary', 88 | }, 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /packages/conference/.npmignore: -------------------------------------------------------------------------------- 1 | public 2 | .cache 3 | -------------------------------------------------------------------------------- /packages/conference/README.md: -------------------------------------------------------------------------------- 1 | 2 | # gatsby-theme-conference 3 | 4 | -------------------------------------------------------------------------------- /packages/conference/gatsby-config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | module.exports = { 4 | siteMetadata: { 5 | title: 'Conference Theme', 6 | description: 'A Gatsby theme for building conference sites', 7 | twitter: 'https://twitter.com/gatsbyjs', 8 | instagram: 'https://twitter.com/gatsbyjs', 9 | }, 10 | mapping: { 11 | 'ScheduleYaml.speaker': `SpeakersYaml`, 12 | }, 13 | plugins: [ 14 | 'gatsby-plugin-theme-ui', 15 | { 16 | resolve: 'gatsby-source-filesystem', 17 | options: { 18 | path: 'src/data', 19 | name: 'data' 20 | } 21 | }, 22 | 'gatsby-transformer-yaml', 23 | { 24 | resolve: 'gatsby-plugin-page-creator', 25 | options: { 26 | path: path.join(__dirname, 'src/pages'), 27 | } 28 | }, 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /packages/conference/gatsby-node.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs-extra') 2 | const path = require('path') 3 | const mkdirp = require('mkdirp') 4 | const Debug = require('debug') 5 | const pkg = require('./package.json') 6 | 7 | const debug = Debug(pkg.name) 8 | 9 | exports.onPreBootstrap = ({ store }) => { 10 | const { program } = store.getState() 11 | 12 | const dir = path.join(program.directory, `src/data`) 13 | 14 | debug(`Initializing ${dir} directory`) 15 | mkdirp.sync(dir) 16 | 17 | // todo: find a better way to bootstrap site data 18 | const src = path.join(__dirname, 'src/data') 19 | const dest = path.resolve('src/data') 20 | const files = fs.readdirSync(dest) 21 | if (!files.length && src !== dest) { 22 | fs.copySync(src, dest) 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /packages/conference/index.js: -------------------------------------------------------------------------------- 1 | export * from './src' 2 | -------------------------------------------------------------------------------- /packages/conference/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-theme-conference", 3 | "description": "A Gatsby theme for creating conference sites", 4 | "version": "0.1.1", 5 | "main": "index.js", 6 | "author": "Brent Jackson ", 7 | "license": "MIT", 8 | "scripts": { 9 | "clean": "rm -rf node_modules", 10 | "start": "gatsby develop" 11 | }, 12 | "dependencies": { 13 | "@emotion/core": "^10.0.10", 14 | "debug": "^4.1.1", 15 | "fs-extra": "^8.0.1", 16 | "gatsby-plugin-page-creator": "^2.0.12", 17 | "gatsby-plugin-theme-ui": "^0.2.18", 18 | "gatsby-source-filesystem": "^2.0.29", 19 | "gatsby-transformer-yaml": "^2.1.11", 20 | "lodash.groupby": "^4.6.0", 21 | "mkdirp": "^1.0.3", 22 | "react-feather": "^2.0.3", 23 | "theme-ui": "^0.2.16" 24 | }, 25 | "peerDependencies": { 26 | "gatsby": "^2.1.18", 27 | "react": "^16.8.3", 28 | "react-dom": "^16.8.3" 29 | }, 30 | "devDependencies": { 31 | "gatsby": "^2.3.23", 32 | "react": "^16.8.6", 33 | "react-dom": "^16.8.6" 34 | }, 35 | "repository": "jxnblk/gatsby-themes", 36 | "keywords": [ 37 | "gatsby", 38 | "gatsby-theme", 39 | "gatsby-plugin", 40 | "theme-ui" 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /packages/conference/src/components/background-image.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from 'theme-ui' 3 | 4 | export default ({ 5 | src, 6 | ratio = 1, 7 | ...props 8 | }) => 9 |
20 | -------------------------------------------------------------------------------- /packages/conference/src/components/banner.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React from 'react' 3 | import { jsx, Styled, Container } from 'theme-ui' 4 | import useSiteMetadata from '../use-site-metadata' 5 | import Button from './button' 6 | 7 | export default props => { 8 | const { 9 | title, 10 | description 11 | } = useSiteMetadata() 12 | 13 | return ( 14 |
19 | 20 | 25 | {title} 26 | 27 | 32 | {description} 33 | 34 |
35 |
36 | 39 | 40 |
41 | ) 42 | } 43 | -------------------------------------------------------------------------------- /packages/conference/src/components/button.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { Styled, jsx } from 'theme-ui' 3 | 4 | export default props => 5 | 24 | -------------------------------------------------------------------------------- /packages/conference/src/components/card.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { Styled, jsx } from 'theme-ui' 3 | 4 | export default ({ 5 | width = 320, 6 | ...props 7 | }) => 8 | 17 | -------------------------------------------------------------------------------- /packages/conference/src/components/cta.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx, Container } from 'theme-ui' 3 | import Button from './button' 4 | 5 | export default props => 6 |
11 | 12 | 15 | 16 |
17 | -------------------------------------------------------------------------------- /packages/conference/src/components/desktop-only.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { jsx } from 'theme-ui' 3 | 4 | export default props => { 5 | const children = React.Children.toArray(props.children) 6 | .map((child, i) => { 7 | return jsx(child.type, { 8 | key: i, 9 | ...child.props, 10 | css: theme => ({ 11 | [`@media screen and (max-width: ${theme.breakpoints[1]})`]: { 12 | display: 'none', 13 | } 14 | }) 15 | }) 16 | }) 17 | 18 | return ( 19 | <> 20 | {children} 21 | 22 | ) 23 | } 24 | -------------------------------------------------------------------------------- /packages/conference/src/components/flex-list.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { jsx } from 'theme-ui' 3 | import List from './list' 4 | 5 | export default props => 6 | 13 | -------------------------------------------------------------------------------- /packages/conference/src/components/footer.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { Link } from 'gatsby' 3 | import { jsx, Styled, Flex, Container } from 'theme-ui' 4 | import { Twitter, Instagram } from 'react-feather' 5 | import useSiteMetadata from '../use-site-metadata' 6 | import List from './list' 7 | import NavLink from './nav-link' 8 | import IconLink from './icon-link' 9 | 10 | export default props => { 11 | const { twitter, instagram } = useSiteMetadata() 12 | 13 | return ( 14 | 15 | 20 |
21 | 22 |
  • Speakers
    • 23 |
  • Schedule
    • 24 |
  • Venue
    • 25 |
  • Sponsors
    • 26 |     27 |
    28 |
    29 | 30 |
  • Tickets
    • 31 |
  • Code of Conduct
    • 32 |
  • Scholarship
    • 33 |
  • Privacy Policy
    • 34 |     35 |
    36 |
    37 | {twitter && ( 38 | 39 | 40 | 41 | )} 42 | {instagram && ( 43 | 44 | 45 | 46 | )} 47 |
    48 |     49 |
    50 | 55 | © 2019 Gatsby, Inc. 56 | 57 |
    58 |     59 | ) 60 | } 61 | -------------------------------------------------------------------------------- /packages/conference/src/components/header.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import React from 'react' 3 | import { Link } from 'gatsby' 4 | import { jsx } from 'theme-ui' 5 | import useSiteMetadata from '../use-site-metadata' 6 | import NavLink from './nav-link' 7 | import Button from './button' 8 | import DesktopOnly from './desktop-only' 9 | 10 | export default props => { 11 | const { title } = useSiteMetadata() 12 | 13 | return ( 14 | <> 15 | {title} 16 |
    17 | 18 | Speakers 19 | Schedule 20 | Venue 21 | Sponsors 22 | 23 | 24 | 25 | ) 26 | } 27 | -------------------------------------------------------------------------------- /packages/conference/src/components/icon-link.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { Styled, jsx } from 'theme-ui' 3 | 4 | export default props => 5 | svg': { 16 | display: 'inline-block', 17 | verticalAlign: 'middle', 18 | } 19 | }} 20 | /> 21 | -------------------------------------------------------------------------------- /packages/conference/src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Button } from './button' 2 | export { default as NavLink } from './nav-link' 3 | export { default as IconLink } from './icon-link' 4 | export { default as DesktopOnly } from './desktop-only' 5 | export { default as List } from './list' 6 | export { default as FlexList } from './flex-list' 7 | export { default as Card } from './card' 8 | export { default as BackgroundImage } from './background-image' 9 | -------------------------------------------------------------------------------- /packages/conference/src/components/layout.js: -------------------------------------------------------------------------------- 1 | /** @jsx jsx */ 2 | import { Global } from '@emotion/core' 3 | import * as UI from 'theme-ui' 4 | import { jsx } from 'theme-ui' 5 | import Header from './header' 6 | import Footer from './footer' 7 | 8 | export default props => 9 | 18 | 24 | 31 |
    32 | 33 | 34 | {props.children} 35 | 36 | 40 |