├── .gitignore ├── LICENSE ├── README.md └── example ├── .gitignore ├── .prettierrc ├── .vscode ├── launch.json └── settings.json ├── LICENSE ├── README.md ├── content ├── assets │ ├── gatsby-icon.png │ └── profile-pic.jpg └── blog │ ├── archives │ └── 2011-12-25-creating-rebase.md │ ├── hi-folks │ └── index.md │ └── my-second-post │ └── index.md ├── gatsby-browser.js ├── gatsby-config.js ├── gatsby-node.js ├── package.json ├── src ├── ambient.d.ts ├── components │ ├── __generated__ │ │ ├── BioQuery.d.ts │ │ └── SEOMetadata.d.ts │ ├── bio.tsx │ ├── layout.tsx │ └── seo.tsx ├── lib │ ├── createPages.ts │ └── onCreateNode.ts ├── pages │ ├── 404.tsx │ ├── __generated__ │ │ ├── Get404.d.ts │ │ ├── GetDeprecated.d.ts │ │ └── Index.d.ts │ ├── deprecated.tsx │ └── index.tsx ├── templates │ ├── __generated__ │ │ └── BlogPostBySlug.d.ts │ └── blog-post.tsx └── utils │ └── typography.tsx ├── static ├── favicon.ico └── robots.txt ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | 63 | example/schema.json 64 | example/__generated__ 65 | example/apollo.config.js 66 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 and-hyde 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Example Blog for Gatsby & Hyde 2 | 3 | # Goal 4 | 5 | Have a blogging support system that aims to be as simple as Jeykll, but with the underlying power of Gatsby. 6 | 7 | There is a high-level goal of supporting all of the features that have been built into the Artsy blog over the last 8 | 7 years incrementally. 9 | 10 | # This Repo 11 | 12 | This repo serves as the example blog for development of the system. We can build out the blog generically, then switch 13 | it to be a [gatsby-themes][themes] so that anyone can base their blog on it. 14 | 15 | # Features TODO 16 | 17 | These are the goals, not where it is at today: 18 | 19 | - [x] TypeScript support 20 | - [x] TS Types for queries 21 | - [x] Archived pages 22 | - [ ] Author pages - [mine][author] 23 | - [ ] Category pages - [GraphQL][graphql] 24 | - [ ] Site series - [React Native at Artsy][rnaa] 25 | - [ ] Multi-author posts - [Pair Programming][pp] 26 | - [ ] [GitHub Issue Powered Comments][ghc] 27 | - [ ] Real-time [search][search] on the static pages 28 | - [ ] Static stand-alone Pages - [Artsy x React Native][x-rn] 29 | 30 | # Aim 31 | 32 | You as a user would have a blog with a `blog` folder, in that folder you could have: 33 | 34 | ```sh 35 | $ tree blog 36 | 37 | [...] # Your gatsby stuff 38 | content/ 39 | ├── assets 40 | │ ├── gatsby-icon.png 41 | │ └── profile-pic.jpg 42 | ├── blog 43 | │ ├── archives 44 | │ │ ├── 2011-12-25-creating-rebase.md 45 | │ │ ├── 2011-12-26-the-godaddy-kerfuffle.md 46 | │ │ └── 2011-12-27-barriers-of-entry-to-photography.md 47 | │ ├── my-zeroth-post.markdown 48 | │ ├── my-first-post 49 | │ │ ├── index.mdx 50 | │ │ └── hello-world.jpg 51 | │ └── my-second-post 52 | │ └── index.mdx 53 | │ 54 | └── pages 55 | └── cool-lib 56 | └── index.mdx 57 | ``` 58 | 59 | Should generate the following resources: 60 | 61 | ``` 62 | /assets/gatsby-icon.png 63 | /assets/profile-pic.jpg 64 | /blog/creating-rebase/index.html 65 | /blog/the-godaddy-kerfuffle/index.html 66 | /blog/barriers-of-entry-to-photography/index.html 67 | /blog/my-zeroth-post/index.html 68 | /blog/my-first-post/index.html 69 | /blog/my-first-post/hello-world.jpg 70 | /blog/my-second-post/index.html 71 | /cool-lib/index.html 72 | ``` 73 | 74 | ## How do I contribute? 75 | 76 | Right now we have the above TODO list. You can clone this repo, run `yarn install` and start trying to build out some 77 | of the features in that list into the main site. We can figure out how to transform it into a theme once themes are 78 | more stable. 79 | 80 | ```sh 81 | git clone https://github.com/and-hyde/example.git gatsby-and-hyde 82 | cd gatsby-and-hyde 83 | cd example 84 | yarn install 85 | yarn type-check 86 | yarn start 87 | ``` 88 | 89 | 90 | [themes]: https://medium.com/@kyle.robert.gill/a-simple-guide-to-gatsbyjs-themes-a4f9765c5ac7 91 | [author]: /author/orta/ 92 | [ghc]: https://artsy.github.io/blog/2017/07/15/Comments-are-on/ 93 | [graphql]: https://artsy.github.io/blog/categories/graphql/ 94 | [pd]: https://github.com/artsy/artsy.github.io/issues/355#issuecomment-315605280 95 | [pp]: https://artsy.github.io/blog/2018/10/19/pair-programming/ 96 | [rnaa]: https://artsy.github.io/series/react-native-at-artsy/ 97 | [search]: https://github.com/artsy/artsy.github.io/pull/332 98 | [x-rn]: https://artsy.github.io/artsy-x-react-native.html 99 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # dotenv environment variables file 55 | .env 56 | 57 | # gatsby files 58 | .cache/ 59 | public 60 | 61 | # Mac files 62 | .DS_Store 63 | 64 | # Yarn 65 | yarn-error.log 66 | .pnp/ 67 | .pnp.js 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | -------------------------------------------------------------------------------- /example/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": false, 5 | "tabWidth": 2, 6 | "trailingComma": "es5", 7 | "printWidth": 120 8 | } 9 | -------------------------------------------------------------------------------- /example/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://www.gatsbyjs.org/docs/debugging-the-build-process/ 3 | "version": "0.2.0", 4 | "configurations": [ 5 | { 6 | "name": "Gatsby develop", 7 | "type": "node", 8 | "request": "launch", 9 | "protocol": "inspector", 10 | "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby", 11 | "args": ["develop"], 12 | "stopOnEntry": false, 13 | "runtimeArgs": ["--nolazy"], 14 | "sourceMaps": false 15 | }, 16 | { 17 | "name": "Gatsby build", 18 | "type": "node", 19 | "request": "launch", 20 | "protocol": "inspector", 21 | "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby", 22 | "args": ["build"], 23 | "stopOnEntry": false, 24 | "runtimeArgs": ["--nolazy"], 25 | "sourceMaps": false 26 | } 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /example/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /example/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 | 4 | Gatsby 5 | 6 |

7 |

8 | Gatsby's blog starter 9 |

10 | 11 | Kick off your project with this blog boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. 12 | 13 | _Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._ 14 | 15 | ## 🚀 Quick start 16 | 17 | 1. **Create a Gatsby site.** 18 | 19 | Use the Gatsby CLI to create a new site, specifying the blog starter. 20 | 21 | ```sh 22 | # create a new Gatsby site using the blog starter 23 | gatsby new my-blog-starter https://github.com/gatsbyjs/gatsby-starter-blog 24 | ``` 25 | 26 | 1. **Start developing.** 27 | 28 | Navigate into your new site’s directory and start it up. 29 | 30 | ```sh 31 | cd my-blog-starter/ 32 | gatsby develop 33 | ``` 34 | 35 | 1. **Open the source code and start editing!** 36 | 37 | Your site is now running at `http://localhost:8000`! 38 | 39 | _Note: You'll also see a second link: _`http://localhost:8000/___graphql`_. This is a tool you can use to experiment with querying your data. Learn more about using this tool in the [Gatsby tutorial](https://www.gatsbyjs.org/tutorial/part-five/#introducing-graphiql)._ 40 | 41 | Open the `my-blog-starter` directory in your code editor of choice and edit `src/pages/index.js`. Save your changes and the browser will update in real time! 42 | 43 | ## 🧐 What's inside? 44 | 45 | A quick look at the top-level files and directories you'll see in a Gatsby project. 46 | 47 | . 48 | ├── node_modules 49 | ├── src 50 | ├── .gitignore 51 | ├── .prettierrc 52 | ├── gatsby-browser.js 53 | ├── gatsby-config.js 54 | ├── gatsby-node.js 55 | ├── gatsby-ssr.js 56 | ├── LICENSE 57 | ├── package-lock.json 58 | ├── package.json 59 | └── README.md 60 | 61 | 1. **`/node_modules`**: This directory contains all of the modules of code that your project depends on (npm packages) are automatically installed. 62 | 63 | 2. **`/src`**: This directory will contain all of the code related to what you will see on the front-end of your site (what you see in the browser) such as your site header or a page template. `src` is a convention for “source code”. 64 | 65 | 3. **`.gitignore`**: This file tells git which files it should not track / not maintain a version history for. 66 | 67 | 4. **`.prettierrc`**: This is a configuration file for [Prettier](https://prettier.io/). Prettier is a tool to help keep the formatting of your code consistent. 68 | 69 | 5. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/) (if any). These allow customization/extension of default Gatsby settings affecting the browser. 70 | 71 | 6. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail). 72 | 73 | 7. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/) (if any). These allow customization/extension of default Gatsby settings affecting pieces of the site build process. 74 | 75 | 8. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/) (if any). These allow customization of default Gatsby settings affecting server-side rendering. 76 | 77 | 9. **`LICENSE`**: Gatsby is licensed under the MIT license. 78 | 79 | 10. **`package-lock.json`** (See `package.json` below, first). This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. **(You won’t change this file directly).** 80 | 81 | 11. **`package.json`**: A manifest file for Node.js projects, which includes things like metadata (the project’s name, author, etc). This manifest is how npm knows which packages to install for your project. 82 | 83 | 12. **`README.md`**: A text file containing useful reference information about your project. 84 | 85 | ## 🎓 Learning Gatsby 86 | 87 | Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.org/). Here are some places to start: 88 | 89 | - **For most developers, we recommend starting with our [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. 90 | 91 | - **To dive straight into code samples, head [to our documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar. 92 | 93 | ## 💫 Deploy 94 | 95 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-blog) 96 | 97 | 98 | -------------------------------------------------------------------------------- /example/content/assets/gatsby-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/and-hyde/example/46276defa736abec63ef2f43e8f3b200d3cf40c2/example/content/assets/gatsby-icon.png -------------------------------------------------------------------------------- /example/content/assets/profile-pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/and-hyde/example/46276defa736abec63ef2f43e8f3b200d3cf40c2/example/content/assets/profile-pic.jpg -------------------------------------------------------------------------------- /example/content/blog/archives/2011-12-25-creating-rebase.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: creating rebase 3 | updated_at: 2011-12-26 4 | --- 5 | 6 | This is an archived post, and should only show up in the archives section 7 | -------------------------------------------------------------------------------- /example/content/blog/hi-folks/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: New Beginnings 3 | date: "2015-05-28T22:40:32.169Z" 4 | description: This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter. 5 | --- 6 | 7 | Far far away, behind the word mountains, far from the countries Vokalia and 8 | Consonantia, there live the blind texts. Separated they live in Bookmarksgrove 9 | right at the coast of the Semantics, a large language ocean. A small river named 10 | Duden flows by their place and supplies it with the necessary regelialia. 11 | 12 | ## On deer horse aboard tritely yikes and much 13 | 14 | The Big Oxmox advised her not to do so, because there were thousands of bad 15 | Commas, wild Question Marks and devious Semikoli, but the Little Blind Text 16 | didn’t listen. She packed her seven versalia, put her initial into the belt and 17 | made herself on the way. 18 | 19 | - This however showed weasel 20 | - Well uncritical so misled 21 | - this is very interesting 22 | - Goodness much until that fluid owl 23 | 24 | When she reached the first hills of the **Italic Mountains**, she had a last 25 | view back on the skyline of her hometown _Bookmarksgrove_, the headline of 26 | [Alphabet Village](http://google.com) and the subline of her own road, the Line 27 | Lane. Pityful a rethoric question ran over her cheek, then she continued her 28 | way. On her way she met a copy. 29 | 30 | ### Overlaid the jeepers uselessly much excluding 31 | 32 | But nothing the copy said could convince her and so it didn’t take long until a 33 | few insidious Copy Writers ambushed her, made her drunk with 34 | [Longe and Parole](http://google.com) and dragged her into their agency, where 35 | they abused her for their projects again and again. And if she hasn’t been 36 | rewritten, then they are still using her. 37 | 38 | > Far far away, behind the word mountains, far from the countries Vokalia and 39 | > Consonantia, there live the blind texts. Separated they live in Bookmarksgrove 40 | > right at the coast of the Semantics, a large language ocean. 41 | 42 | It is a paradisematic country, in which roasted parts of sentences fly into your 43 | mouth. Even the all-powerful Pointing has no control about the blind texts it is 44 | an almost unorthographic life One day however a small line of blind text by the 45 | name of Lorem Ipsum decided to leave for the far World of Grammar. 46 | 47 | ### According a funnily until pre-set or arrogant well cheerful 48 | 49 | The Big Oxmox advised her not to do so, because there were thousands of bad 50 | Commas, wild Question Marks and devious Semikoli, but the Little Blind Text 51 | didn’t listen. She packed her seven versalia, put her initial into the belt and 52 | made herself on the way. 53 | 54 | 1. So baboon this 55 | 2. Mounted militant weasel gregariously admonishingly straightly hey 56 | 3. Dear foresaw hungry and much some overhung 57 | 4. Rash opossum less because less some amid besides yikes jeepers frenetic 58 | impassive fruitlessly shut 59 | 60 | When she reached the first hills of the Italic Mountains, she had a last view 61 | back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet 62 | Village and the subline of her own road, the Line Lane. Pityful a rethoric 63 | question ran over her cheek, then she continued her way. On her way she met a 64 | copy. 65 | 66 | > The copy warned the Little Blind Text, that where it came from it would have 67 | > been rewritten a thousand times and everything that was left from its origin 68 | > would be the word "and" and the Little Blind Text should turn around and 69 | > return to its own, safe country. 70 | 71 | But nothing the copy said could convince her and so it didn’t take long until a 72 | few insidious Copy Writers ambushed her, made her drunk with Longe and Parole 73 | and dragged her into their agency, where they abused her for their projects 74 | again and again. And if she hasn’t been rewritten, then they are still using 75 | her. Far far away, behind the word mountains, far from the countries Vokalia and 76 | Consonantia, there live the blind texts. 77 | 78 | #### Silent delightfully including because before one up barring chameleon 79 | 80 | Separated they live in Bookmarksgrove right at the coast of the Semantics, a 81 | large language ocean. A small river named Duden flows by their place and 82 | supplies it with the necessary regelialia. It is a paradisematic country, in 83 | which roasted parts of sentences fly into your mouth. 84 | 85 | Even the all-powerful Pointing has no control about the blind texts it is an 86 | almost unorthographic life One day however a small line of blind text by the 87 | name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox 88 | advised her not to do so, because there were thousands of bad Commas, wild 89 | Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. 90 | 91 | ##### Wherever far wow thus a squirrel raccoon jeez jaguar this from along 92 | 93 | She packed her seven versalia, put her initial into the belt and made herself on 94 | the way. When she reached the first hills of the Italic Mountains, she had a 95 | last view back on the skyline of her hometown Bookmarksgrove, the headline of 96 | Alphabet Village and the subline of her own road, the Line Lane. Pityful a 97 | rethoric question ran over her cheek, then she continued her way. On her way she 98 | met a copy. 99 | 100 | ###### Slapped cozy a that lightheartedly and far 101 | 102 | The copy warned the Little Blind Text, that where it came from it would have 103 | been rewritten a thousand times and everything that was left from its origin 104 | would be the word "and" and the Little Blind Text should turn around and return 105 | to its own, safe country. But nothing the copy said could convince her and so it 106 | didn’t take long until a few insidious Copy Writers ambushed her, made her drunk 107 | with Longe and Parole and dragged her into their agency, where they abused her 108 | for their projects again and again. 109 | -------------------------------------------------------------------------------- /example/content/blog/my-second-post/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: My Second Post! 3 | date: "2015-05-06T23:46:37.121Z" 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 9 | chicken eggs, though the taste and texture will be somewhat different, and the 10 | egg yolk will be less rich."? 11 | ([Wikipedia Link](http://en.wikipedia.org/wiki/Salted_duck_egg)) 12 | 13 | Yeah, I didn't either. 14 | -------------------------------------------------------------------------------- /example/gatsby-browser.js: -------------------------------------------------------------------------------- 1 | // custom typefaces 2 | import "typeface-montserrat" 3 | import "typeface-merriweather" 4 | -------------------------------------------------------------------------------- /example/gatsby-config.js: -------------------------------------------------------------------------------- 1 | // https://github.com/gatsbyjs/gatsby/issues/1457 2 | require('ts-node').register({ files: true }) 3 | 4 | module.exports = { 5 | siteMetadata: { 6 | title: `rebase -i`, 7 | author: `Orta Therox`, 8 | description: `Writing.`, 9 | siteUrl: `https://orta.io/rebase/`, 10 | social: { 11 | twitter: `orta`, 12 | }, 13 | }, 14 | plugins: [ 15 | "gatsby-plugin-codegen", 16 | "gatsby-plugin-typescript", 17 | { 18 | resolve: `gatsby-source-filesystem`, 19 | options: { 20 | path: `${__dirname}/content/blog`, 21 | name: `blog`, 22 | }, 23 | }, 24 | { 25 | resolve: `gatsby-source-filesystem`, 26 | options: { 27 | path: `${__dirname}/content/assets`, 28 | name: `assets`, 29 | }, 30 | }, 31 | { 32 | resolve: `gatsby-transformer-remark`, 33 | options: { 34 | plugins: [ 35 | { 36 | resolve: `gatsby-remark-images`, 37 | options: { 38 | maxWidth: 590, 39 | }, 40 | }, 41 | { 42 | resolve: `gatsby-remark-responsive-iframe`, 43 | options: { 44 | wrapperStyle: `margin-bottom: 1.0725rem`, 45 | }, 46 | }, 47 | `gatsby-remark-prismjs`, 48 | `gatsby-remark-copy-linked-files`, 49 | `gatsby-remark-smartypants`, 50 | ], 51 | }, 52 | }, 53 | `gatsby-transformer-sharp`, 54 | `gatsby-plugin-sharp`, 55 | `gatsby-plugin-feed`, 56 | { 57 | resolve: `gatsby-plugin-manifest`, 58 | options: { 59 | name: `Gatsby Starter Blog`, 60 | short_name: `GatsbyJS`, 61 | start_url: `/`, 62 | background_color: `#ffffff`, 63 | theme_color: `#663399`, 64 | display: `minimal-ui`, 65 | icon: `content/assets/gatsby-icon.png`, 66 | }, 67 | }, 68 | `gatsby-plugin-offline`, 69 | `gatsby-plugin-react-helmet`, 70 | { 71 | resolve: `gatsby-plugin-typography`, 72 | options: { 73 | pathToConfigModule: `src/utils/typography`, 74 | }, 75 | }, 76 | ], 77 | } 78 | -------------------------------------------------------------------------------- /example/gatsby-node.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | const {createPages} = require("./src/lib/createPages") 4 | const {onCreateNode} = require("./src/lib/onCreateNode") 5 | 6 | exports.createPages = createPages 7 | exports.onCreateNode = onCreateNode 8 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "and-hyde-examples", 3 | "private": true, 4 | "description": "An example blog for and-hyde", 5 | "version": "0.1.0", 6 | "author": "", 7 | "bugs": { 8 | "url": "https://github.com/and-hyde/example" 9 | }, 10 | "dependencies": { 11 | "@babel/core": "^7.6.0", 12 | "@babel/runtime": "7.3.0", 13 | "@types/node": "^12.7.4", 14 | "@types/react": "^16.9.2", 15 | "@types/react-dom": "^16.9.0", 16 | "@types/react-helmet": "^5.0.10", 17 | "@types/typography": "^0.16.3", 18 | "gatsby": "^2.15.14", 19 | "gatsby-image": "^2.2.18", 20 | "gatsby-plugin-codegen": "^1.0.3", 21 | "gatsby-plugin-feed": "^2.3.12", 22 | "gatsby-plugin-google-analytics": "^2.1.16", 23 | "gatsby-plugin-manifest": "^2.2.16", 24 | "gatsby-plugin-offline": "^3.0.6", 25 | "gatsby-plugin-react-helmet": "^3.1.7", 26 | "gatsby-plugin-sharp": "^2.2.21", 27 | "gatsby-plugin-typography": "^2.3.7", 28 | "gatsby-remark-copy-linked-files": "^2.1.19", 29 | "gatsby-remark-images": "^3.1.21", 30 | "gatsby-remark-prismjs": "^3.3.13", 31 | "gatsby-remark-responsive-iframe": "^2.2.16", 32 | "gatsby-remark-smartypants": "^2.1.8", 33 | "gatsby-source-filesystem": "^2.1.22", 34 | "gatsby-transformer-remark": "^2.6.22", 35 | "gatsby-transformer-sharp": "^2.2.14", 36 | "prismjs": "^1.17.1", 37 | "react": "^16.9.0", 38 | "react-dom": "^16.9.0", 39 | "react-helmet": "^5.2.1", 40 | "react-typography": "^0.16.19", 41 | "ts-node": "^8.3.0", 42 | "typeface-merriweather": "0.0.72", 43 | "typeface-montserrat": "0.0.75", 44 | "typescript": "^3.6.2", 45 | "typography": "^0.16.19", 46 | "typography-theme-wordpress-2016": "^0.16.19", 47 | "gatsby-plugin-typescript": "^2.1.7", 48 | "prettier": "^1.18.2" 49 | }, 50 | "resolutions": { 51 | "@types/react": "16.9.2" 52 | }, 53 | "homepage": "https://github.com/and-hyde/example#readme", 54 | "keywords": [ 55 | "gatsby" 56 | ], 57 | "license": "MIT", 58 | "main": "n/a", 59 | "repository": { 60 | "type": "git", 61 | "url": "git+https://github.com/and-hyde/example.git" 62 | }, 63 | "scripts": { 64 | "build": "gatsby build", 65 | "type-check": "tsc --noEmit", 66 | "develop": "gatsby develop", 67 | "format": "prettier --write src/**/*.{js,jsx}", 68 | "start": "npm run develop", 69 | "serve": "gatsby serve", 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /example/src/ambient.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'typography-theme-wordpress-2016'; 2 | -------------------------------------------------------------------------------- /example/src/components/__generated__/BioQuery.d.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | // This file was automatically generated and should not be edited. 4 | 5 | // ==================================================== 6 | // GraphQL query operation: BioQuery 7 | // ==================================================== 8 | 9 | export interface BioQuery_avatar_childImageSharp_fixed { 10 | __typename: "ImageSharpFixed"; 11 | base64: string | null; 12 | width: number | null; 13 | height: number | null; 14 | src: string | null; 15 | srcSet: string | null; 16 | } 17 | 18 | export interface BioQuery_avatar_childImageSharp { 19 | __typename: "ImageSharp"; 20 | fixed: BioQuery_avatar_childImageSharp_fixed | null; 21 | } 22 | 23 | export interface BioQuery_avatar { 24 | __typename: "File"; 25 | childImageSharp: BioQuery_avatar_childImageSharp | null; 26 | } 27 | 28 | export interface BioQuery_site_siteMetadata_social { 29 | __typename: "SiteSiteMetadataSocial"; 30 | twitter: string | null; 31 | } 32 | 33 | export interface BioQuery_site_siteMetadata { 34 | __typename: "SiteSiteMetadata"; 35 | author: string | null; 36 | social: BioQuery_site_siteMetadata_social | null; 37 | } 38 | 39 | export interface BioQuery_site { 40 | __typename: "Site"; 41 | siteMetadata: BioQuery_site_siteMetadata | null; 42 | } 43 | 44 | export interface BioQuery { 45 | avatar: BioQuery_avatar | null; 46 | site: BioQuery_site | null; 47 | } 48 | -------------------------------------------------------------------------------- /example/src/components/__generated__/SEOMetadata.d.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | // This file was automatically generated and should not be edited. 4 | 5 | // ==================================================== 6 | // GraphQL query operation: SEOMetadata 7 | // ==================================================== 8 | 9 | export interface SEOMetadata_site_siteMetadata { 10 | __typename: "SiteSiteMetadata"; 11 | title: string | null; 12 | description: string | null; 13 | author: string | null; 14 | } 15 | 16 | export interface SEOMetadata_site { 17 | __typename: "Site"; 18 | siteMetadata: SEOMetadata_site_siteMetadata | null; 19 | } 20 | 21 | export interface SEOMetadata { 22 | site: SEOMetadata_site | null; 23 | } 24 | -------------------------------------------------------------------------------- /example/src/components/bio.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql, useStaticQuery } from "gatsby" 3 | import Image from "gatsby-image" 4 | 5 | import { rhythm } from "../utils/typography" 6 | 7 | export default function Bio() { 8 | const data = useStaticQuery(bioQuery) 9 | const { author, social } = data.site.siteMetadata 10 | 11 | return ( 12 |
18 | {author} 31 |

32 | Written by {author} who lives and works in San 33 | Francisco building useful things. 34 | {` `} 35 | 36 | You should follow him on Twitter 37 | 38 |

39 |
40 | ) 41 | } 42 | 43 | const bioQuery = graphql` 44 | query BioQuery { 45 | avatar: file(absolutePath: { regex: "/profile-pic.jpg/" }) { 46 | childImageSharp { 47 | fixed(width: 50, height: 50) { 48 | ...GatsbyImageSharpFixed 49 | } 50 | } 51 | } 52 | site { 53 | siteMetadata { 54 | author 55 | social { 56 | twitter 57 | } 58 | } 59 | } 60 | } 61 | ` 62 | -------------------------------------------------------------------------------- /example/src/components/layout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link } from "gatsby" 3 | 4 | declare const __PATH_PREFIX__: string; 5 | 6 | import { rhythm, scale } from "../utils/typography" 7 | 8 | export default function Layout(props: any) { 9 | const { location, title, children } = props 10 | const rootPath = `${__PATH_PREFIX__}/` 11 | let header 12 | 13 | if (location.pathname === rootPath) { 14 | header = ( 15 |

22 | 30 | {title} 31 | 32 |

33 | ) 34 | } else { 35 | header = ( 36 |

42 | 50 | {title} 51 | 52 |

53 | ) 54 | } 55 | return ( 56 |
64 |
{header}
65 |
{children}
66 | 72 |
73 | ) 74 | } 75 | -------------------------------------------------------------------------------- /example/src/components/seo.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * SEO component that queries for data with 3 | * Gatsby's useStaticQuery React hook 4 | * 5 | * See: https://www.gatsbyjs.org/docs/use-static-query/ 6 | */ 7 | 8 | import React from "react" 9 | import PropTypes from "prop-types" 10 | import Helmet from "react-helmet" 11 | import { useStaticQuery, graphql } from "gatsby" 12 | 13 | export default function SEO({ description, lang, meta, keywords, title }: any) { 14 | const { site } = useStaticQuery( 15 | graphql` 16 | query SEOMetadata { 17 | site { 18 | siteMetadata { 19 | title 20 | description 21 | author 22 | } 23 | } 24 | } 25 | ` 26 | ) 27 | 28 | const metaDescription = description || site.siteMetadata.description 29 | 30 | return ( 31 | 0 73 | ? { 74 | name: `keywords`, 75 | content: keywords.join(`, `), 76 | } 77 | : [] 78 | ) 79 | .concat(meta)} 80 | /> 81 | ) 82 | } 83 | 84 | SEO.defaultProps = { 85 | lang: `en`, 86 | meta: [], 87 | keywords: [], 88 | description: ``, 89 | } 90 | 91 | SEO.propTypes = { 92 | description: PropTypes.string, 93 | lang: PropTypes.string, 94 | meta: PropTypes.arrayOf(PropTypes.object), 95 | keywords: PropTypes.arrayOf(PropTypes.string), 96 | title: PropTypes.string.isRequired, 97 | } 98 | -------------------------------------------------------------------------------- /example/src/lib/createPages.ts: -------------------------------------------------------------------------------- 1 | import { GatsbyNode } from "gatsby" 2 | import * as path from "path" 3 | 4 | export const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => { 5 | const { createPage } = actions 6 | 7 | const blogPost = path.resolve(`./src/templates/blog-post.tsx`) 8 | const result = await graphql(` 9 | { 10 | allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }, limit: 1000) { 11 | edges { 12 | node { 13 | fields { 14 | slug 15 | } 16 | frontmatter { 17 | title 18 | } 19 | } 20 | } 21 | } 22 | } 23 | `) 24 | 25 | if (result.errors) { 26 | throw result.errors 27 | } 28 | 29 | // @ts-ignore 30 | const posts: any[] = result.data.allMarkdownRemark.edges 31 | posts.forEach((post, index) => { 32 | const previous = index === posts.length - 1 ? null : posts[index + 1].node 33 | const next = index === 0 ? null : posts[index - 1].node 34 | 35 | createPage({ 36 | path: post.node.fields.slug, 37 | component: blogPost, 38 | context: { 39 | slug: post.node.fields.slug, 40 | previous, 41 | next, 42 | }, 43 | }) 44 | }) 45 | 46 | return null 47 | } 48 | -------------------------------------------------------------------------------- /example/src/lib/onCreateNode.ts: -------------------------------------------------------------------------------- 1 | import { createFilePath } from "gatsby-source-filesystem" 2 | import { GatsbyNode } from "gatsby" 3 | 4 | export const onCreateNode: GatsbyNode["onCreateNode"] = ({ node, actions, getNode }) => { 5 | const { createNodeField } = actions 6 | 7 | if (node.internal.type === `MarkdownRemark`) { 8 | const value = createFilePath({ node, getNode }) 9 | createNodeField({ 10 | name: `slug`, 11 | node, 12 | value, 13 | }) 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /example/src/pages/404.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { graphql } from "gatsby" 3 | 4 | import Layout from "../components/layout" 5 | import SEO from "../components/seo" 6 | 7 | export default function NotFoundPage(props) { 8 | const { data } = props 9 | const siteTitle = data.site.siteMetadata.title 10 | 11 | return ( 12 | 13 | 14 |

Not Found

15 |

You just hit a route that doesn't exist... the sadness.

16 | 17 | ) 18 | } 19 | 20 | export const pageQuery = graphql` 21 | query Get404 { 22 | site { 23 | siteMetadata { 24 | title 25 | } 26 | } 27 | } 28 | ` 29 | -------------------------------------------------------------------------------- /example/src/pages/__generated__/Get404.d.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | // This file was automatically generated and should not be edited. 4 | 5 | // ==================================================== 6 | // GraphQL query operation: Get404 7 | // ==================================================== 8 | 9 | export interface Get404_site_siteMetadata { 10 | __typename: "SiteSiteMetadata"; 11 | title: string | null; 12 | } 13 | 14 | export interface Get404_site { 15 | __typename: "Site"; 16 | siteMetadata: Get404_site_siteMetadata | null; 17 | } 18 | 19 | export interface Get404 { 20 | site: Get404_site | null; 21 | } 22 | -------------------------------------------------------------------------------- /example/src/pages/__generated__/GetDeprecated.d.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | // This file was automatically generated and should not be edited. 4 | 5 | // ==================================================== 6 | // GraphQL query operation: GetDeprecated 7 | // ==================================================== 8 | 9 | export interface GetDeprecated_site_siteMetadata { 10 | __typename: "SiteSiteMetadata"; 11 | title: string | null; 12 | } 13 | 14 | export interface GetDeprecated_site { 15 | __typename: "Site"; 16 | siteMetadata: GetDeprecated_site_siteMetadata | null; 17 | } 18 | 19 | export interface GetDeprecated_allMarkdownRemark_edges_node_fields { 20 | __typename: "MarkdownRemarkFields"; 21 | slug: string | null; 22 | } 23 | 24 | export interface GetDeprecated_allMarkdownRemark_edges_node_frontmatter { 25 | __typename: "MarkdownRemarkFrontmatter"; 26 | date: any | null; 27 | title: string | null; 28 | description: string | null; 29 | } 30 | 31 | export interface GetDeprecated_allMarkdownRemark_edges_node { 32 | __typename: "MarkdownRemark"; 33 | excerpt: string | null; 34 | fields: GetDeprecated_allMarkdownRemark_edges_node_fields | null; 35 | frontmatter: GetDeprecated_allMarkdownRemark_edges_node_frontmatter | null; 36 | } 37 | 38 | export interface GetDeprecated_allMarkdownRemark_edges { 39 | __typename: "MarkdownRemarkEdge"; 40 | node: GetDeprecated_allMarkdownRemark_edges_node; 41 | } 42 | 43 | export interface GetDeprecated_allMarkdownRemark { 44 | __typename: "MarkdownRemarkConnection"; 45 | edges: GetDeprecated_allMarkdownRemark_edges[]; 46 | } 47 | 48 | export interface GetDeprecated { 49 | site: GetDeprecated_site | null; 50 | allMarkdownRemark: GetDeprecated_allMarkdownRemark; 51 | } 52 | -------------------------------------------------------------------------------- /example/src/pages/__generated__/Index.d.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | // This file was automatically generated and should not be edited. 4 | 5 | // ==================================================== 6 | // GraphQL query operation: Index 7 | // ==================================================== 8 | 9 | export interface Index_site_siteMetadata { 10 | __typename: "SiteSiteMetadata"; 11 | title: string | null; 12 | } 13 | 14 | export interface Index_site { 15 | __typename: "Site"; 16 | siteMetadata: Index_site_siteMetadata | null; 17 | } 18 | 19 | export interface Index_allMarkdownRemark_edges_node_fields { 20 | __typename: "MarkdownRemarkFields"; 21 | slug: string | null; 22 | } 23 | 24 | export interface Index_allMarkdownRemark_edges_node_frontmatter { 25 | __typename: "MarkdownRemarkFrontmatter"; 26 | date: any | null; 27 | title: string | null; 28 | description: string | null; 29 | } 30 | 31 | export interface Index_allMarkdownRemark_edges_node { 32 | __typename: "MarkdownRemark"; 33 | excerpt: string | null; 34 | fields: Index_allMarkdownRemark_edges_node_fields | null; 35 | frontmatter: Index_allMarkdownRemark_edges_node_frontmatter | null; 36 | } 37 | 38 | export interface Index_allMarkdownRemark_edges { 39 | __typename: "MarkdownRemarkEdge"; 40 | node: Index_allMarkdownRemark_edges_node; 41 | } 42 | 43 | export interface Index_allMarkdownRemark { 44 | __typename: "MarkdownRemarkConnection"; 45 | edges: Index_allMarkdownRemark_edges[]; 46 | } 47 | 48 | export interface Index { 49 | site: Index_site | null; 50 | allMarkdownRemark: Index_allMarkdownRemark; 51 | } 52 | -------------------------------------------------------------------------------- /example/src/pages/deprecated.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link, graphql } from "gatsby" 3 | 4 | import Bio from "../components/bio" 5 | import Layout from "../components/layout" 6 | import SEO from "../components/seo" 7 | import { rhythm } from "../utils/typography" 8 | 9 | export default function BlogIndex(props) { 10 | const { data } = props 11 | const siteTitle = data.site.siteMetadata.title 12 | 13 | const isArchived = (f) => !!f.node.fields.slug.includes("archives/") 14 | const posts = data.allMarkdownRemark.edges.filter(isArchived).reverse() 15 | 16 | return ( 17 | 18 | 22 | 23 | {posts.map(({ node }) => { 24 | const title = node.frontmatter.title || node.fields.slug 25 | return ( 26 |
27 |

32 | 33 | {title} 34 | 35 |

36 | {node.frontmatter.date} 37 |

42 |

43 | ) 44 | })} 45 | 46 | ) 47 | } 48 | 49 | export const pageQuery = graphql` 50 | query GetDeprecated { 51 | site { 52 | siteMetadata { 53 | title 54 | } 55 | } 56 | allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) { 57 | edges { 58 | node { 59 | excerpt 60 | fields { 61 | slug 62 | } 63 | frontmatter { 64 | date(formatString: "MMMM DD, YYYY") 65 | title 66 | description 67 | } 68 | } 69 | } 70 | } 71 | } 72 | ` 73 | -------------------------------------------------------------------------------- /example/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link, graphql } from "gatsby" 3 | 4 | import Bio from "../components/bio" 5 | import Layout from "../components/layout" 6 | import SEO from "../components/seo" 7 | import { rhythm } from "../utils/typography" 8 | 9 | export default function BlogIndex(props) { 10 | const { data, location } = props 11 | const siteTitle = data.site.siteMetadata.title 12 | 13 | const isModernPost = (f) => !f.node.fields.slug.includes("archives/") 14 | const posts = data.allMarkdownRemark.edges.filter(isModernPost) 15 | 16 | return ( 17 | 18 | 22 | 23 | {posts.map(({ node }) => { 24 | const title = node.frontmatter.title || node.fields.slug 25 | return ( 26 |
27 |

32 | 33 | {title} 34 | 35 |

36 | {node.frontmatter.date} 37 |

42 |

43 | ) 44 | })} 45 | 46 | ) 47 | } 48 | 49 | export const pageQuery = graphql` 50 | query Index { 51 | site { 52 | siteMetadata { 53 | title 54 | } 55 | } 56 | allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) { 57 | edges { 58 | node { 59 | excerpt 60 | fields { 61 | slug 62 | } 63 | frontmatter { 64 | date(formatString: "MMMM DD, YYYY") 65 | title 66 | description 67 | } 68 | } 69 | } 70 | } 71 | } 72 | ` 73 | -------------------------------------------------------------------------------- /example/src/templates/__generated__/BlogPostBySlug.d.ts: -------------------------------------------------------------------------------- 1 | /* tslint:disable */ 2 | /* eslint-disable */ 3 | // This file was automatically generated and should not be edited. 4 | 5 | // ==================================================== 6 | // GraphQL query operation: BlogPostBySlug 7 | // ==================================================== 8 | 9 | export interface BlogPostBySlug_site_siteMetadata { 10 | __typename: "SiteSiteMetadata"; 11 | title: string | null; 12 | author: string | null; 13 | } 14 | 15 | export interface BlogPostBySlug_site { 16 | __typename: "Site"; 17 | siteMetadata: BlogPostBySlug_site_siteMetadata | null; 18 | } 19 | 20 | export interface BlogPostBySlug_markdownRemark_frontmatter { 21 | __typename: "MarkdownRemarkFrontmatter"; 22 | title: string | null; 23 | date: any | null; 24 | description: string | null; 25 | } 26 | 27 | export interface BlogPostBySlug_markdownRemark { 28 | __typename: "MarkdownRemark"; 29 | id: string; 30 | excerpt: string | null; 31 | html: string | null; 32 | frontmatter: BlogPostBySlug_markdownRemark_frontmatter | null; 33 | } 34 | 35 | export interface BlogPostBySlug { 36 | site: BlogPostBySlug_site | null; 37 | markdownRemark: BlogPostBySlug_markdownRemark | null; 38 | } 39 | 40 | export interface BlogPostBySlugVariables { 41 | slug: string; 42 | } 43 | -------------------------------------------------------------------------------- /example/src/templates/blog-post.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Link, graphql } from "gatsby" 3 | 4 | import Bio from "../components/bio" 5 | import Layout from "../components/layout" 6 | import SEO from "../components/seo" 7 | import { rhythm, scale } from "../utils/typography" 8 | 9 | export default function BlogPostTemplate(props: any) { 10 | const post = props.data.markdownRemark 11 | const siteTitle = props.data.site.siteMetadata.title 12 | const { previous, next } = props.pageContext 13 | 14 | return ( 15 | 16 | 20 |

{post.frontmatter.title}

21 |

29 | {post.frontmatter.date} 30 |

31 |
32 |
37 | 38 | 39 |
    48 |
  • 49 | {previous && ( 50 | 51 | ← {previous.frontmatter.title} 52 | 53 | )} 54 |
    • 55 |
  • 56 | {next && ( 57 | 58 | {next.frontmatter.title} → 59 | 60 | )} 61 |
    • 62 |
63 | 64 | ) 65 | } 66 | 67 | export const pageQuery = graphql` 68 | query BlogPostBySlug($slug: String!) { 69 | site { 70 | siteMetadata { 71 | title 72 | author 73 | } 74 | } 75 | markdownRemark(fields: { slug: { eq: $slug } }) { 76 | id 77 | excerpt(pruneLength: 160) 78 | html 79 | frontmatter { 80 | title 81 | date(formatString: "MMMM DD, YYYY") 82 | description 83 | } 84 | } 85 | } 86 | ` 87 | -------------------------------------------------------------------------------- /example/src/utils/typography.tsx: -------------------------------------------------------------------------------- 1 | import Typography from "typography" 2 | import Wordpress2016 from "typography-theme-wordpress-2016" 3 | 4 | Wordpress2016.overrideThemeStyles = () => { 5 | return { 6 | "a.gatsby-resp-image-link": { 7 | boxShadow: `none`, 8 | }, 9 | } 10 | } 11 | 12 | delete Wordpress2016.googleFonts 13 | 14 | const typography = new Typography(Wordpress2016) 15 | 16 | // Hot reload typography in development. 17 | if (process.env.NODE_ENV !== `production`) { 18 | typography.injectStyles() 19 | } 20 | 21 | export default typography 22 | export const rhythm = typography.rhythm 23 | export const scale = typography.scale 24 | -------------------------------------------------------------------------------- /example/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/and-hyde/example/46276defa736abec63ef2f43e8f3b200d3cf40c2/example/static/favicon.ico -------------------------------------------------------------------------------- /example/static/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | // "incremental": true, /* Enable incremental compilation */ 5 | "target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */ 6 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 7 | "lib": ["es2015", "dom"], /* Specify library files to be included in the compilation. */ 8 | // "allowJs": true, /* Allow javascript files to be compiled. */ 9 | // "checkJs": true, /* Report errors in .js files. */ 10 | "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 11 | // "declaration": true, /* Generates corresponding '.d.ts' file. */ 12 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 13 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 14 | // "outFile": "./", /* Concatenate and emit output to single file. */ 15 | // "outDir": "./", /* Redirect output structure to the directory. */ 16 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 17 | // "composite": true, /* Enable project compilation */ 18 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 19 | // "removeComments": true, /* Do not emit comments to output. */ 20 | // "noEmit": true, /* Do not emit outputs. */ 21 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 22 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 23 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 24 | 25 | /* Strict Type-Checking Options */ 26 | "strict": true, /* Enable all strict type-checking options. */ 27 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 28 | // "strictNullChecks": true, /* Enable strict null checks. */ 29 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 30 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 31 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 32 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 33 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 34 | 35 | /* Additional Checks */ 36 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 37 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 38 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 39 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 40 | 41 | /* Module Resolution Options */ 42 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 43 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 44 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 45 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 46 | // "typeRoots": [], /* List of folders to include type definitions from. */ 47 | // "types": [], /* Type declaration files to be included in compilation. */ 48 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 49 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 50 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 51 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ 52 | 53 | /* Source Map Options */ 54 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 55 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 56 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 57 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 58 | 59 | /* Experimental Options */ 60 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 61 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 62 | } 63 | } 64 | --------------------------------------------------------------------------------