├── .gitignore ├── README.md ├── demo ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── content │ ├── copy │ │ ├── about__bio.md │ │ └── homepage__about.md │ ├── img │ │ ├── about__banner.jpg │ │ └── author.jpg │ └── posts │ │ ├── editor-picks.md │ │ ├── eyeshadow.md │ │ ├── friends.md │ │ ├── img │ │ ├── balloons.jpg │ │ ├── eyeshadow.jpg │ │ ├── flatlay.jpg │ │ └── friends.jpg │ │ └── my-post.md ├── gatsby-config.js ├── gatsby-node.js ├── package-lock.json ├── package.json ├── pages │ └── README.md ├── src │ └── gatsby-theme-tyra │ │ └── common │ │ └── components │ │ ├── AuthBtn.js │ │ └── navbar.js ├── static │ └── favicon.ico └── yarn.lock ├── gatsby-theme-netlify-identity ├── .gitignore ├── .prettierrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── gatsby-config.js ├── gatsby-node.js ├── index.js ├── package.json └── src │ ├── components │ └── layout.js │ ├── gatsby-plugin-theme-ui │ └── index.js │ └── templates │ └── page.js ├── gatsby-theme-tyra ├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── gatsby-config.js ├── gatsby-node.js ├── index.js ├── package-lock.json ├── package.json ├── screenshot.jpg ├── src │ ├── blog │ │ ├── category.js │ │ ├── components │ │ │ ├── body.js │ │ │ ├── breadcrumbs.js │ │ │ ├── emailForm.js │ │ │ ├── hero.js │ │ │ ├── post-preview.js │ │ │ ├── sidebar.js │ │ │ └── suggested.js │ │ ├── index.js │ │ ├── post.js │ │ ├── seo.js │ │ └── styles │ │ │ └── grid.css │ ├── common │ │ ├── components │ │ │ ├── footer.js │ │ │ └── navbar.js │ │ ├── layouts │ │ │ └── index.js │ │ ├── seo │ │ │ └── index.js │ │ └── styles │ │ │ └── custom.tachyons.css │ ├── homepage │ │ └── components │ │ │ ├── about.js │ │ │ ├── bio.js │ │ │ ├── card.js │ │ │ └── hero.js │ └── pages │ │ ├── 404.js │ │ ├── about.js │ │ ├── index.js │ │ └── privacy.js ├── static │ ├── favicon.ico │ └── logo.png └── yarn.lock ├── netlify.toml ├── package.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 (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 | 71 | .netlify/ 72 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gatsby Theme Netlify Identity 2 | 3 | This repo is a yarn workspace. 4 | 5 | - **Live Demo**: https://gatsby-theme-netlify-identity.netlify.com/ 6 | - 2hr Livestream: https://www.youtube.com/watch?v=1zuLpkV0jK0 (creating this theme) 7 | 8 | Features: 9 | 10 | - ✅Add Netlify Identity Authentication to any Gatsby app 11 | - 🕵🏼‍Shadow only the components you need to add authentication to 12 | - ♿ Accessible modal component that doesn't require a UI redesign unless you want to 13 | - 💁🏼‍♂️Drop down to use the headless [react-netlify-identity](https://github.com/sw-yx/react-netlify-identity) API if you want to write your own auth UI 14 | 15 | 16 | 17 | ## How to Use In Your Gatsby App 18 | 19 | > ⚠️ Make sure to enable Netlify Identity on your site! 20 | 21 | this theme adds `gatsby-plugin-netlity-identity` for you and ships some nice components! 22 | 23 | ```bash 24 | yarn add gatsby-theme-netlify-identity 25 | ``` 26 | 27 | And add it to your config: 28 | 29 | ```js 30 | // In your gatsby-config.js 31 | module.exports = { 32 | plugins: [ 33 | // You can should only have one instance of this plugin 34 | { 35 | resolve: `gatsby-theme-netlify-identity`, 36 | options: { 37 | url: `https://your-netlify-identity-instance-here.netlify.com/`, // required! Make sure Identity is enabled! 38 | }, 39 | }, 40 | ], 41 | } 42 | ``` 43 | 44 | Now you can use `IdentityModal` and `useIdentityContext` in your application! 45 | 46 | ```js 47 | import React from 'react' 48 | import IdentityModal, { useIdentityContext } from 'react-netlify-identity-widget' 49 | import 'react-netlify-identity-widget/styles.css' // delete if you want to bring your own CSS 50 | 51 | const Layout = ({ children }) => { 52 | const identity = useIdentityContext() 53 | const [dialog, setDialog] = React.useState(false) 54 | const name = 55 | (identity && 56 | identity.user && 57 | identity.user.user_metadata && 58 | (identity.user.user_metadata.name || identity.user.user_metadata.full_name)) || 59 | 'NoName' 60 | 61 | console.log(JSON.stringify(identity)) 62 | const isLoggedIn = identity && identity.isLoggedIn 63 | return ( 64 | <> 65 | 72 |
{children}
73 | setDialog(false)} /> 74 | 75 | ) 76 | } 77 | 78 | export default Layout 79 | ``` 80 | 81 | ## Tyra 82 | 83 | this project also converted https://github.com/madelyneriksen/gatsby-starter-tyra into a theme. 84 | 85 | ## Local Development 86 | 87 | ```sh 88 | yarn workspace demo develop 89 | ``` 90 | 91 | The demo will start at http://localhost:8000 92 | 93 | **NOTE:** If you’re new to Yarn workspaces, check out [this post](https://www.gatsbyjs.org/blog/2019-05-22-setting-up-yarn-workspaces-for-theme-development/) for details. 94 | -------------------------------------------------------------------------------- /demo/.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 | -------------------------------------------------------------------------------- /demo/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": false, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /demo/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Gatsby 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 | -------------------------------------------------------------------------------- /demo/README.md: -------------------------------------------------------------------------------- 1 | 2 |

3 | 4 | Gatsby 5 | 6 |

7 |

8 | Gatsby's hello-world starter 9 |

10 | 11 | Kick off your project with this hello-world 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 hello-world starter. 20 | 21 | ```sh 22 | # create a new Gatsby site using the hello-world starter 23 | gatsby new my-hello-world-starter https://github.com/gatsbyjs/gatsby-starter-hello-world 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-hello-world-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-hello-world-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-hello-world) 96 | 97 | 98 | -------------------------------------------------------------------------------- /demo/content/copy/about__bio.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | type: "copy" 4 | name: "about__bio" 5 | title: "Tyra is a fast, feminine, and chic Gatsby.js Starter. Kickstart your online presence, powered by React." 6 | 7 | --- 8 | 9 | Built on a strong foundation of React and Gatsby, Tyra is a modern, sleek, and _fast_ template for a blog. Created with an emphasis on SEO and the goal of showcasing content, Tyra is the perfect starter for creating your new project. 10 | 11 | Tyra is MIT Licensed, and so works well as a starting point, a springboard, or even a finished product. 12 | -------------------------------------------------------------------------------- /demo/content/copy/homepage__about.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | type: "copy" 4 | name: "homepage__bio" 5 | title: "Showcase Your Personality." 6 | 7 | --- 8 | 9 | Your incredible content deserves an incredible home. Tyra leverages your brilliant blog posts, builds rich SEO data, and makes publishing easy! Fast, dynamic websites are here, powered by Gatsby.js and React. 10 | 11 | This section of the site would be great to feature an author's biography, or maybe a bit about what makes your business special! It's featured towards the end of the homepage, after other descriptive sections. 12 | -------------------------------------------------------------------------------- /demo/content/img/about__banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swyxio/gatsby-theme-netlify-identity/9925a39427c9aa0d42fadcd412a9d3f9e4f002ad/demo/content/img/about__banner.jpg -------------------------------------------------------------------------------- /demo/content/img/author.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swyxio/gatsby-theme-netlify-identity/9925a39427c9aa0d42fadcd412a9d3f9e4f002ad/demo/content/img/author.jpg -------------------------------------------------------------------------------- /demo/content/posts/editor-picks.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | type: "post" 4 | title: "Must-Have Products Selected by Tyra's Editors" 5 | author: "Jane Doe" 6 | category: "makeup" 7 | date: "2018-01-04" 8 | slug: "/editors-picks" 9 | postImage: "./img/flatlay.jpg" 10 | metaDescription: "We went over the best new products and tried them all. Here's what's hot and what's not!" 11 | 12 | --- 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id varius velit. Nullam convallis finibus nisl nec fringilla. Morbi venenatis quam id luctus varius. Mauris quis eros in turpis blandit dapibus. Donec vestibulum cursus tincidunt. Proin laoreet diam ante, at convallis tellus gravida et. Fusce ac varius nulla. Curabitur eget elit aliquam, porta urna at, lacinia velit. 15 | 16 | ![Alt Text](./img/flatlay.jpg) 17 | 18 | Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et erat at lorem convallis pulvinar. Vivamus ac dui neque. Etiam non venenatis eros. Nulla tincidunt vulputate lectus, non placerat nisl viverra id. Donec ac dapibus mi, a auctor urna. Sed elit neque, accumsan in felis eget, varius hendrerit nisl. Quisque urna sem, posuere sit amet porta sit amet, fringilla a quam. Ut aliquet maximus ligula, vitae fermentum nunc rhoncus non. Nullam nec augue sapien. Nulla sed vulputate orci. Vivamus ipsum ipsum, viverra quis tincidunt sed, consectetur ut erat. 19 | 20 | Vestibulum vitae neque a velit efficitur tempor eget eu urna. Praesent et purus sollicitudin, pretium dolor non, laoreet lectus. Donec nisi sem, laoreet quis pulvinar eu, eleifend ac dui. Integer vehicula non turpis a vestibulum. Nulla facilisi. Donec lobortis, ante vitae maximus consectetur, odio augue tempor mi, at vehicula purus orci sed sapien. Maecenas cursus massa id orci fermentum laoreet. Duis elementum justo sit amet tellus dignissim tristique. 21 | 22 | Pellentesque elit justo, viverra nec malesuada eu, dictum id urna. Vivamus et purus nunc. Cras sed massa dignissim, egestas orci ac, molestie purus. Aliquam iaculis neque diam, sed vulputate mauris blandit sit amet. Aenean eu ligula in nunc consequat porta. Nunc efficitur sem eget ante venenatis, ac luctus velit venenatis. Quisque cursus ante vel ligula hendrerit, vel condimentum mi pellentesque. Sed ut felis in odio facilisis maximus. Curabitur ut lacus nisl. Sed rutrum ornare elementum. Pellentesque et velit ullamcorper, lobortis urna at, congue massa. Nulla suscipit congue aliquet. Sed urna augue, ullamcorper tempor pharetra eget, mollis a quam. Cras rhoncus sagittis augue vel lacinia. 23 | 24 | Maecenas hendrerit semper egestas. Pellentesque at erat ligula. Ut a nisl aliquam, laoreet magna vitae, lacinia tortor. Sed at volutpat velit. Maecenas vitae consectetur elit. Fusce ut augue id sapien facilisis semper ac vel enim. In consequat nulla et nulla tincidunt, ac elementum odio molestie. Cras sed nulla finibus, hendrerit erat vitae, consequat magna. Aliquam id lectus iaculis, faucibus eros at, tempus erat. In iaculis ante sem, sit amet hendrerit dolor mattis elementum. Maecenas quis sapien ut turpis consectetur porta. Maecenas vitae consectetur tortor, vel lobortis ligula. 25 | 26 | Praesent eget tellus a augue vulputate vulputate. Phasellus volutpat eros sit amet libero placerat dapibus. Vestibulum hendrerit euismod odio vulputate sodales. Sed vel justo vel turpis rhoncus cursus sed sit amet urna. Suspendisse pellentesque sapien eget nisl commodo maximus. Nulla pharetra magna in ipsum ultricies, eu aliquet ipsum euismod. Etiam nec lectus ac dui blandit maximus. Aenean lobortis pretium ipsum, eget convallis mauris. Ut lobortis condimentum justo a ultricies. Donec accumsan viverra libero, id iaculis dui efficitur sit amet. Cras ut sapien porta, tempus purus in, consectetur nulla. Vivamus efficitur ante non leo euismod cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ex enim, lobortis non tincidunt a, sodales nec leo. Sed blandit tempor ante quis fringilla. Integer sit amet metus nisl. 27 | 28 | Duis elementum, massa ac tincidunt ultricies, ex ligula consectetur enim, quis viverra massa risus quis enim. Duis iaculis tellus at nisi hendrerit, vitae malesuada arcu volutpat. Morbi a elit tincidunt, tincidunt mauris at, convallis erat. Morbi nec ligula tortor. Aenean efficitur scelerisque massa, feugiat tristique massa consectetur a. Nulla lobortis et erat id pretium. Sed nec pharetra libero. 29 | 30 | In vel augue enim. Maecenas in magna ac risus egestas imperdiet. Vivamus consequat vel sem vel dapibus. Suspendisse eget dolor metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ornare purus sed erat porttitor ultrices. Praesent maximus quam in mauris pellentesque porta. Vivamus suscipit pulvinar nunc, ut ornare urna laoreet quis. In eu iaculis dolor, tristique faucibus lectus. Nam iaculis lorem quis leo fermentum facilisis. Sed cursus quam ac porttitor ultrices. Suspendisse tincidunt tortor in molestie hendrerit. Ut blandit congue nibh, ut scelerisque leo pharetra at. Proin ornare, magna convallis mattis malesuada, justo enim pretium ex, vel pellentesque ligula ipsum sed mi. Aenean consequat laoreet ex, sed malesuada lectus convallis ut. 31 | 32 | Vestibulum non feugiat diam, sit amet convallis nisl. Etiam a nunc eget velit tincidunt rhoncus. Phasellus ut euismod nisi. Morbi erat arcu, viverra ut feugiat sit amet, mollis id enim. Quisque venenatis ultricies odio eu mattis. Fusce vel placerat lacus, fermentum fringilla neque. Nam enim lectus, consequat id augue eget, laoreet pulvinar dolor. 33 | 34 | Vivamus a lacus ante. Morbi sed ex est. Nulla tempor risus eu hendrerit efficitur. Sed porta convallis sapien, eu porttitor augue eleifend eget. Suspendisse lorem turpis, elementum non neque tempus, pellentesque laoreet est. Suspendisse rhoncus justo ac scelerisque placerat. Donec ligula mi, luctus in scelerisque eu, lobortis vitae tellus. Aliquam eget tempus augue, egestas hendrerit est. Vivamus egestas nulla nec mi fermentum porta. Integer commodo nibh tristique nulla vehicula, id ultricies neque dictum. Fusce ut egestas diam. Aliquam at dolor efficitur nulla malesuada consequat ac ut ipsum. 35 | -------------------------------------------------------------------------------- /demo/content/posts/eyeshadow.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | type: "post" 4 | title: "Three Eye Makeup Looks for Five Minute Mornings" 5 | author: "Jane Doe" 6 | category: "makeup" 7 | date: "2018-01-03" 8 | slug: "/lazy-morning-looks" 9 | postImage: "./img/eyeshadow.jpg" 10 | metaDescription: "Lazy Day? Here's three essential eye makeup techniques to hang on to." 11 | 12 | --- 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id varius velit. Nullam convallis finibus nisl nec fringilla. Morbi venenatis quam id luctus varius. Mauris quis eros in turpis blandit dapibus. Donec vestibulum cursus tincidunt. Proin laoreet diam ante, at convallis tellus gravida et. Fusce ac varius nulla. Curabitur eget elit aliquam, porta urna at, lacinia velit. 15 | 16 | ![Alt Text](./img/eyeshadow.jpg) 17 | 18 | Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et erat at lorem convallis pulvinar. Vivamus ac dui neque. Etiam non venenatis eros. Nulla tincidunt vulputate lectus, non placerat nisl viverra id. Donec ac dapibus mi, a auctor urna. Sed elit neque, accumsan in felis eget, varius hendrerit nisl. Quisque urna sem, posuere sit amet porta sit amet, fringilla a quam. Ut aliquet maximus ligula, vitae fermentum nunc rhoncus non. Nullam nec augue sapien. Nulla sed vulputate orci. Vivamus ipsum ipsum, viverra quis tincidunt sed, consectetur ut erat. 19 | 20 | ## A Sweet Header 21 | 22 | This section is going to have some awesome sample content for judging markdown typography. 23 | 24 | Here comes a sweet blockquote: 25 | 26 | > The trick to amazing eyeshadow is using great colors. 27 | 28 | That's looking decent! Sweet. 29 | 30 | Vestibulum vitae neque a velit efficitur tempor eget eu urna. Praesent et purus sollicitudin, pretium dolor non, laoreet lectus. Donec nisi sem, laoreet quis pulvinar eu, eleifend ac dui. Integer vehicula non turpis a vestibulum. Nulla facilisi. Donec lobortis, ante vitae maximus consectetur, odio augue tempor mi, at vehicula purus orci sed sapien. Maecenas cursus massa id orci fermentum laoreet. Duis elementum justo sit amet tellus dignissim tristique. 31 | 32 | #### Smaller Headers Work Too 33 | 34 | Let's try adding some links. Have you looked at the template author's [github lately](https://github.com/madelyneriksen)? She's always creating new stuff. 35 | 36 | Of course, we can also *emphasize* text with the **tools** markdown gives us. 37 | 38 | * There's some sweet features to markdown 39 | * Like Lists 40 | * and more lists 41 | 42 | ``` 43 | Prismjs isn't included 44 | 45 | But we can still have code blocks. 46 | ``` 47 | 48 | Pellentesque elit justo, viverra nec malesuada eu, dictum id urna. Vivamus et purus nunc. Cras sed massa dignissim, egestas orci ac, molestie purus. Aliquam iaculis neque diam, sed vulputate mauris blandit sit amet. Aenean eu ligula in nunc consequat porta. Nunc efficitur sem eget ante venenatis, ac luctus velit venenatis. Quisque cursus ante vel ligula hendrerit, vel condimentum mi pellentesque. Sed ut felis in odio facilisis maximus. Curabitur ut lacus nisl. Sed rutrum ornare elementum. Pellentesque et velit ullamcorper, lobortis urna at, congue massa. Nulla suscipit congue aliquet. Sed urna augue, ullamcorper tempor pharetra eget, mollis a quam. Cras rhoncus sagittis augue vel lacinia. 49 | 50 | Maecenas hendrerit semper egestas. Pellentesque at erat ligula. Ut a nisl aliquam, laoreet magna vitae, lacinia tortor. Sed at volutpat velit. Maecenas vitae consectetur elit. Fusce ut augue id sapien facilisis semper ac vel enim. In consequat nulla et nulla tincidunt, ac elementum odio molestie. Cras sed nulla finibus, hendrerit erat vitae, consequat magna. Aliquam id lectus iaculis, faucibus eros at, tempus erat. In iaculis ante sem, sit amet hendrerit dolor mattis elementum. Maecenas quis sapien ut turpis consectetur porta. Maecenas vitae consectetur tortor, vel lobortis ligula. 51 | 52 | Praesent eget tellus a augue vulputate vulputate. Phasellus volutpat eros sit amet libero placerat dapibus. Vestibulum hendrerit euismod odio vulputate sodales. Sed vel justo vel turpis rhoncus cursus sed sit amet urna. Suspendisse pellentesque sapien eget nisl commodo maximus. Nulla pharetra magna in ipsum ultricies, eu aliquet ipsum euismod. Etiam nec lectus ac dui blandit maximus. Aenean lobortis pretium ipsum, eget convallis mauris. Ut lobortis condimentum justo a ultricies. Donec accumsan viverra libero, id iaculis dui efficitur sit amet. Cras ut sapien porta, tempus purus in, consectetur nulla. Vivamus efficitur ante non leo euismod cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ex enim, lobortis non tincidunt a, sodales nec leo. Sed blandit tempor ante quis fringilla. Integer sit amet metus nisl. 53 | 54 | Duis elementum, massa ac tincidunt ultricies, ex ligula consectetur enim, quis viverra massa risus quis enim. Duis iaculis tellus at nisi hendrerit, vitae malesuada arcu volutpat. Morbi a elit tincidunt, tincidunt mauris at, convallis erat. Morbi nec ligula tortor. Aenean efficitur scelerisque massa, feugiat tristique massa consectetur a. Nulla lobortis et erat id pretium. Sed nec pharetra libero. 55 | 56 | In vel augue enim. Maecenas in magna ac risus egestas imperdiet. Vivamus consequat vel sem vel dapibus. Suspendisse eget dolor metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ornare purus sed erat porttitor ultrices. Praesent maximus quam in mauris pellentesque porta. Vivamus suscipit pulvinar nunc, ut ornare urna laoreet quis. In eu iaculis dolor, tristique faucibus lectus. Nam iaculis lorem quis leo fermentum facilisis. Sed cursus quam ac porttitor ultrices. Suspendisse tincidunt tortor in molestie hendrerit. Ut blandit congue nibh, ut scelerisque leo pharetra at. Proin ornare, magna convallis mattis malesuada, justo enim pretium ex, vel pellentesque ligula ipsum sed mi. Aenean consequat laoreet ex, sed malesuada lectus convallis ut. 57 | 58 | Vestibulum non feugiat diam, sit amet convallis nisl. Etiam a nunc eget velit tincidunt rhoncus. Phasellus ut euismod nisi. Morbi erat arcu, viverra ut feugiat sit amet, mollis id enim. Quisque venenatis ultricies odio eu mattis. Fusce vel placerat lacus, fermentum fringilla neque. Nam enim lectus, consequat id augue eget, laoreet pulvinar dolor. 59 | 60 | Vivamus a lacus ante. Morbi sed ex est. Nulla tempor risus eu hendrerit efficitur. Sed porta convallis sapien, eu porttitor augue eleifend eget. Suspendisse lorem turpis, elementum non neque tempus, pellentesque laoreet est. Suspendisse rhoncus justo ac scelerisque placerat. Donec ligula mi, luctus in scelerisque eu, lobortis vitae tellus. Aliquam eget tempus augue, egestas hendrerit est. Vivamus egestas nulla nec mi fermentum porta. Integer commodo nibh tristique nulla vehicula, id ultricies neque dictum. Fusce ut egestas diam. Aliquam at dolor efficitur nulla malesuada consequat ac ut ipsum. 61 | -------------------------------------------------------------------------------- /demo/content/posts/friends.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | type: "post" 4 | title: "The Secret to Sincere Friends? Be Yourself." 5 | author: "Jane Doe" 6 | category: "lifestyle" 7 | date: "2018-01-02" 8 | slug: "/be-yourself" 9 | postImage: "./img/friends.jpg" 10 | metaDescription: "Building friendships as an adult is really, really hard. Our advice? Just be yourself, you'll get there." 11 | 12 | --- 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id varius velit. Nullam convallis finibus nisl nec fringilla. Morbi venenatis quam id luctus varius. Mauris quis eros in turpis blandit dapibus. Donec vestibulum cursus tincidunt. Proin laoreet diam ante, at convallis tellus gravida et. Fusce ac varius nulla. Curabitur eget elit aliquam, porta urna at, lacinia velit. 15 | 16 | ![Alt Text](./img/friends.jpg) 17 | 18 | Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et erat at lorem convallis pulvinar. Vivamus ac dui neque. Etiam non venenatis eros. Nulla tincidunt vulputate lectus, non placerat nisl viverra id. Donec ac dapibus mi, a auctor urna. Sed elit neque, accumsan in felis eget, varius hendrerit nisl. Quisque urna sem, posuere sit amet porta sit amet, fringilla a quam. Ut aliquet maximus ligula, vitae fermentum nunc rhoncus non. Nullam nec augue sapien. Nulla sed vulputate orci. Vivamus ipsum ipsum, viverra quis tincidunt sed, consectetur ut erat. 19 | 20 | Vestibulum vitae neque a velit efficitur tempor eget eu urna. Praesent et purus sollicitudin, pretium dolor non, laoreet lectus. Donec nisi sem, laoreet quis pulvinar eu, eleifend ac dui. Integer vehicula non turpis a vestibulum. Nulla facilisi. Donec lobortis, ante vitae maximus consectetur, odio augue tempor mi, at vehicula purus orci sed sapien. Maecenas cursus massa id orci fermentum laoreet. Duis elementum justo sit amet tellus dignissim tristique. 21 | 22 | Pellentesque elit justo, viverra nec malesuada eu, dictum id urna. Vivamus et purus nunc. Cras sed massa dignissim, egestas orci ac, molestie purus. Aliquam iaculis neque diam, sed vulputate mauris blandit sit amet. Aenean eu ligula in nunc consequat porta. Nunc efficitur sem eget ante venenatis, ac luctus velit venenatis. Quisque cursus ante vel ligula hendrerit, vel condimentum mi pellentesque. Sed ut felis in odio facilisis maximus. Curabitur ut lacus nisl. Sed rutrum ornare elementum. Pellentesque et velit ullamcorper, lobortis urna at, congue massa. Nulla suscipit congue aliquet. Sed urna augue, ullamcorper tempor pharetra eget, mollis a quam. Cras rhoncus sagittis augue vel lacinia. 23 | 24 | Maecenas hendrerit semper egestas. Pellentesque at erat ligula. Ut a nisl aliquam, laoreet magna vitae, lacinia tortor. Sed at volutpat velit. Maecenas vitae consectetur elit. Fusce ut augue id sapien facilisis semper ac vel enim. In consequat nulla et nulla tincidunt, ac elementum odio molestie. Cras sed nulla finibus, hendrerit erat vitae, consequat magna. Aliquam id lectus iaculis, faucibus eros at, tempus erat. In iaculis ante sem, sit amet hendrerit dolor mattis elementum. Maecenas quis sapien ut turpis consectetur porta. Maecenas vitae consectetur tortor, vel lobortis ligula. 25 | 26 | Praesent eget tellus a augue vulputate vulputate. Phasellus volutpat eros sit amet libero placerat dapibus. Vestibulum hendrerit euismod odio vulputate sodales. Sed vel justo vel turpis rhoncus cursus sed sit amet urna. Suspendisse pellentesque sapien eget nisl commodo maximus. Nulla pharetra magna in ipsum ultricies, eu aliquet ipsum euismod. Etiam nec lectus ac dui blandit maximus. Aenean lobortis pretium ipsum, eget convallis mauris. Ut lobortis condimentum justo a ultricies. Donec accumsan viverra libero, id iaculis dui efficitur sit amet. Cras ut sapien porta, tempus purus in, consectetur nulla. Vivamus efficitur ante non leo euismod cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ex enim, lobortis non tincidunt a, sodales nec leo. Sed blandit tempor ante quis fringilla. Integer sit amet metus nisl. 27 | 28 | Duis elementum, massa ac tincidunt ultricies, ex ligula consectetur enim, quis viverra massa risus quis enim. Duis iaculis tellus at nisi hendrerit, vitae malesuada arcu volutpat. Morbi a elit tincidunt, tincidunt mauris at, convallis erat. Morbi nec ligula tortor. Aenean efficitur scelerisque massa, feugiat tristique massa consectetur a. Nulla lobortis et erat id pretium. Sed nec pharetra libero. 29 | 30 | In vel augue enim. Maecenas in magna ac risus egestas imperdiet. Vivamus consequat vel sem vel dapibus. Suspendisse eget dolor metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ornare purus sed erat porttitor ultrices. Praesent maximus quam in mauris pellentesque porta. Vivamus suscipit pulvinar nunc, ut ornare urna laoreet quis. In eu iaculis dolor, tristique faucibus lectus. Nam iaculis lorem quis leo fermentum facilisis. Sed cursus quam ac porttitor ultrices. Suspendisse tincidunt tortor in molestie hendrerit. Ut blandit congue nibh, ut scelerisque leo pharetra at. Proin ornare, magna convallis mattis malesuada, justo enim pretium ex, vel pellentesque ligula ipsum sed mi. Aenean consequat laoreet ex, sed malesuada lectus convallis ut. 31 | 32 | Vestibulum non feugiat diam, sit amet convallis nisl. Etiam a nunc eget velit tincidunt rhoncus. Phasellus ut euismod nisi. Morbi erat arcu, viverra ut feugiat sit amet, mollis id enim. Quisque venenatis ultricies odio eu mattis. Fusce vel placerat lacus, fermentum fringilla neque. Nam enim lectus, consequat id augue eget, laoreet pulvinar dolor. 33 | 34 | Vivamus a lacus ante. Morbi sed ex est. Nulla tempor risus eu hendrerit efficitur. Sed porta convallis sapien, eu porttitor augue eleifend eget. Suspendisse lorem turpis, elementum non neque tempus, pellentesque laoreet est. Suspendisse rhoncus justo ac scelerisque placerat. Donec ligula mi, luctus in scelerisque eu, lobortis vitae tellus. Aliquam eget tempus augue, egestas hendrerit est. Vivamus egestas nulla nec mi fermentum porta. Integer commodo nibh tristique nulla vehicula, id ultricies neque dictum. Fusce ut egestas diam. Aliquam at dolor efficitur nulla malesuada consequat ac ut ipsum. 35 | -------------------------------------------------------------------------------- /demo/content/posts/img/balloons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swyxio/gatsby-theme-netlify-identity/9925a39427c9aa0d42fadcd412a9d3f9e4f002ad/demo/content/posts/img/balloons.jpg -------------------------------------------------------------------------------- /demo/content/posts/img/eyeshadow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swyxio/gatsby-theme-netlify-identity/9925a39427c9aa0d42fadcd412a9d3f9e4f002ad/demo/content/posts/img/eyeshadow.jpg -------------------------------------------------------------------------------- /demo/content/posts/img/flatlay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swyxio/gatsby-theme-netlify-identity/9925a39427c9aa0d42fadcd412a9d3f9e4f002ad/demo/content/posts/img/flatlay.jpg -------------------------------------------------------------------------------- /demo/content/posts/img/friends.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swyxio/gatsby-theme-netlify-identity/9925a39427c9aa0d42fadcd412a9d3f9e4f002ad/demo/content/posts/img/friends.jpg -------------------------------------------------------------------------------- /demo/content/posts/my-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | type: "post" 4 | title: "Gorgeous Makeup Looks For This Winter" 5 | author: "Jane Doe" 6 | category: "makeup" 7 | date: "2018-01-01" 8 | slug: "/post" 9 | postImage: "./img/balloons.jpg" 10 | metaDescription: "The hottest trends for the coolest season. Check out Tyra product picks and get inspired this holiday season!" 11 | 12 | --- 13 | 14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id varius velit. Nullam convallis finibus nisl nec fringilla. Morbi venenatis quam id luctus varius. Mauris quis eros in turpis blandit dapibus. Donec vestibulum cursus tincidunt. Proin laoreet diam ante, at convallis tellus gravida et. Fusce ac varius nulla. Curabitur eget elit aliquam, porta urna at, lacinia velit. 15 | 16 | ![Alt Text](./img/balloons.jpg) 17 | 18 | Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla et erat at lorem convallis pulvinar. Vivamus ac dui neque. Etiam non venenatis eros. Nulla tincidunt vulputate lectus, non placerat nisl viverra id. Donec ac dapibus mi, a auctor urna. Sed elit neque, accumsan in felis eget, varius hendrerit nisl. Quisque urna sem, posuere sit amet porta sit amet, fringilla a quam. Ut aliquet maximus ligula, vitae fermentum nunc rhoncus non. Nullam nec augue sapien. Nulla sed vulputate orci. Vivamus ipsum ipsum, viverra quis tincidunt sed, consectetur ut erat. 19 | 20 | Vestibulum vitae neque a velit efficitur tempor eget eu urna. Praesent et purus sollicitudin, pretium dolor non, laoreet lectus. Donec nisi sem, laoreet quis pulvinar eu, eleifend ac dui. Integer vehicula non turpis a vestibulum. Nulla facilisi. Donec lobortis, ante vitae maximus consectetur, odio augue tempor mi, at vehicula purus orci sed sapien. Maecenas cursus massa id orci fermentum laoreet. Duis elementum justo sit amet tellus dignissim tristique. 21 | 22 | Pellentesque elit justo, viverra nec malesuada eu, dictum id urna. Vivamus et purus nunc. Cras sed massa dignissim, egestas orci ac, molestie purus. Aliquam iaculis neque diam, sed vulputate mauris blandit sit amet. Aenean eu ligula in nunc consequat porta. Nunc efficitur sem eget ante venenatis, ac luctus velit venenatis. Quisque cursus ante vel ligula hendrerit, vel condimentum mi pellentesque. Sed ut felis in odio facilisis maximus. Curabitur ut lacus nisl. Sed rutrum ornare elementum. Pellentesque et velit ullamcorper, lobortis urna at, congue massa. Nulla suscipit congue aliquet. Sed urna augue, ullamcorper tempor pharetra eget, mollis a quam. Cras rhoncus sagittis augue vel lacinia. 23 | 24 | Maecenas hendrerit semper egestas. Pellentesque at erat ligula. Ut a nisl aliquam, laoreet magna vitae, lacinia tortor. Sed at volutpat velit. Maecenas vitae consectetur elit. Fusce ut augue id sapien facilisis semper ac vel enim. In consequat nulla et nulla tincidunt, ac elementum odio molestie. Cras sed nulla finibus, hendrerit erat vitae, consequat magna. Aliquam id lectus iaculis, faucibus eros at, tempus erat. In iaculis ante sem, sit amet hendrerit dolor mattis elementum. Maecenas quis sapien ut turpis consectetur porta. Maecenas vitae consectetur tortor, vel lobortis ligula. 25 | 26 | Praesent eget tellus a augue vulputate vulputate. Phasellus volutpat eros sit amet libero placerat dapibus. Vestibulum hendrerit euismod odio vulputate sodales. Sed vel justo vel turpis rhoncus cursus sed sit amet urna. Suspendisse pellentesque sapien eget nisl commodo maximus. Nulla pharetra magna in ipsum ultricies, eu aliquet ipsum euismod. Etiam nec lectus ac dui blandit maximus. Aenean lobortis pretium ipsum, eget convallis mauris. Ut lobortis condimentum justo a ultricies. Donec accumsan viverra libero, id iaculis dui efficitur sit amet. Cras ut sapien porta, tempus purus in, consectetur nulla. Vivamus efficitur ante non leo euismod cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ex enim, lobortis non tincidunt a, sodales nec leo. Sed blandit tempor ante quis fringilla. Integer sit amet metus nisl. 27 | 28 | Duis elementum, massa ac tincidunt ultricies, ex ligula consectetur enim, quis viverra massa risus quis enim. Duis iaculis tellus at nisi hendrerit, vitae malesuada arcu volutpat. Morbi a elit tincidunt, tincidunt mauris at, convallis erat. Morbi nec ligula tortor. Aenean efficitur scelerisque massa, feugiat tristique massa consectetur a. Nulla lobortis et erat id pretium. Sed nec pharetra libero. 29 | 30 | In vel augue enim. Maecenas in magna ac risus egestas imperdiet. Vivamus consequat vel sem vel dapibus. Suspendisse eget dolor metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce ornare purus sed erat porttitor ultrices. Praesent maximus quam in mauris pellentesque porta. Vivamus suscipit pulvinar nunc, ut ornare urna laoreet quis. In eu iaculis dolor, tristique faucibus lectus. Nam iaculis lorem quis leo fermentum facilisis. Sed cursus quam ac porttitor ultrices. Suspendisse tincidunt tortor in molestie hendrerit. Ut blandit congue nibh, ut scelerisque leo pharetra at. Proin ornare, magna convallis mattis malesuada, justo enim pretium ex, vel pellentesque ligula ipsum sed mi. Aenean consequat laoreet ex, sed malesuada lectus convallis ut. 31 | 32 | Vestibulum non feugiat diam, sit amet convallis nisl. Etiam a nunc eget velit tincidunt rhoncus. Phasellus ut euismod nisi. Morbi erat arcu, viverra ut feugiat sit amet, mollis id enim. Quisque venenatis ultricies odio eu mattis. Fusce vel placerat lacus, fermentum fringilla neque. Nam enim lectus, consequat id augue eget, laoreet pulvinar dolor. 33 | 34 | Vivamus a lacus ante. Morbi sed ex est. Nulla tempor risus eu hendrerit efficitur. Sed porta convallis sapien, eu porttitor augue eleifend eget. Suspendisse lorem turpis, elementum non neque tempus, pellentesque laoreet est. Suspendisse rhoncus justo ac scelerisque placerat. Donec ligula mi, luctus in scelerisque eu, lobortis vitae tellus. Aliquam eget tempus augue, egestas hendrerit est. Vivamus egestas nulla nec mi fermentum porta. Integer commodo nibh tristique nulla vehicula, id ultricies neque dictum. Fusce ut egestas diam. Aliquam at dolor efficitur nulla malesuada consequat ac ut ipsum. 35 | -------------------------------------------------------------------------------- /demo/gatsby-config.js: -------------------------------------------------------------------------------- 1 | // * See: https://www.gatsbyjs.org/docs/gatsby-config/ 2 | module.exports = { 3 | siteMetadata: { 4 | title: "Tyra + Netlify Demo", 5 | }, 6 | plugins: [ 7 | "gatsby-theme-tyra", 8 | { 9 | resolve: `gatsby-theme-netlify-identity`, 10 | options: { 11 | url: `https://gatsby-theme-netlify-identity.netlify.com/`, // required! make sure to enable Netlify Identity 12 | }, 13 | }, 14 | { 15 | resolve: `gatsby-plugin-manifest`, 16 | options: { 17 | name: `Gatsby + Tyra + Netlify Identity`, 18 | short_name: `Gatsby+Netlify`, 19 | start_url: `/`, 20 | background_color: `#f7f0eb`, 21 | theme_color: `#a2466c`, 22 | display: `standalone`, 23 | }, 24 | }, 25 | `gatsby-plugin-offline`, 26 | { 27 | resolve: `gatsby-plugin-netlify`, 28 | options: { 29 | // headers: {}, // option to add more headers. `Link` headers are transformed by the below criteria 30 | // allPageHeaders: [], // option to add headers for all pages. `Link` headers are transformed by the below criteria 31 | allPageHeaders: [ 32 | "Link: ; rel=preload", 33 | "Link: ; rel=preload", 34 | "Link: ; rel=preload", 35 | "Link: ; rel=preload", 36 | ], 37 | // mergeSecurityHeaders: true, // boolean to turn off the default security headers 38 | // mergeLinkHeaders: true, // boolean to turn off the default gatsby js headers 39 | // mergeCachingHeaders: true, // boolean to turn off the default caching headers 40 | // transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc. 41 | // generateMatchPathRewrites: true, // boolean to turn off automatic creation of redirect rules for client only paths 42 | }, 43 | }, 44 | ], 45 | } 46 | -------------------------------------------------------------------------------- /demo/gatsby-node.js: -------------------------------------------------------------------------------- 1 | // exports.createPages = ({ actions, reporter }) => { 2 | // reporter.warn("make sure to load data from somewhere!") 3 | 4 | // // TODO replace this with data from somewhere 5 | // actions.createPage({ 6 | // path: "/", 7 | // component: require.resolve("./pages/oldpage.js"), 8 | // context: { 9 | // heading: "Your Theme Here", 10 | // content: ` 11 | //

12 | // Use this handy theme example as the basis for your own amazing theme! 13 | //

14 | //

15 | // For more information, see 16 | // themejam.gatsbyjs.org. 17 | //

18 | // `, 19 | // }, 20 | // }) 21 | // } 22 | -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "demo", 4 | "version": "0.1.0", 5 | "license": "MIT", 6 | "scripts": { 7 | "build": "gatsby build", 8 | "develop": "gatsby develop", 9 | "format": "prettier --write src/**/*.{js,jsx}", 10 | "start": "npm run develop", 11 | "serve": "gatsby serve", 12 | "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"" 13 | }, 14 | "dependencies": { 15 | "gatsby": "^2.13.1", 16 | "gatsby-plugin-manifest": "^2.2.4", 17 | "gatsby-plugin-netlify": "^2.1.3", 18 | "gatsby-plugin-offline": "^2.2.4", 19 | "gatsby-theme-netlify-identity": "*", 20 | "gatsby-theme-tyra": "*", 21 | "react": "^16.8.6", 22 | "react-dom": "^16.8.6" 23 | }, 24 | "devDependencies": { 25 | "gatsby-theme": "^0.0.6", 26 | "prettier": "^1.18.2" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /demo/pages/README.md: -------------------------------------------------------------------------------- 1 | you can add any React pages you want here as long as it doesnt conflict with an existing path. 2 | -------------------------------------------------------------------------------- /demo/src/gatsby-theme-tyra/common/components/AuthBtn.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import IdentityModal, { 3 | useIdentityContext, 4 | } from "react-netlify-identity-widget" 5 | import "react-netlify-identity-widget/styles.css" // delete if you want to bring your own CSS 6 | 7 | export default function AuthBtn() { 8 | const identity = useIdentityContext() 9 | const [dialog, setDialog] = React.useState(false) 10 | const name = 11 | (identity && 12 | identity.user && 13 | identity.user.user_metadata && 14 | (identity.user.user_metadata.name || 15 | identity.user.user_metadata.full_name)) || 16 | "NoName" 17 | 18 | console.log({ identity }) 19 | const isLoggedIn = identity && identity.isLoggedIn 20 | 21 | return ( 22 | <> 23 | {isLoggedIn && `Welcome ${name}`} 24 | 30 | setDialog(false)} 33 | /> 34 | 35 | ) 36 | } 37 | -------------------------------------------------------------------------------- /demo/src/gatsby-theme-tyra/common/components/navbar.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { StaticQuery, graphql, Link } from "gatsby" 3 | import { FiMenu } from "react-icons/fi" 4 | import "gatsby-theme-tyra/src/common/styles/custom.tachyons.css" 5 | import AuthBtn from "./AuthBtn" 6 | 7 | const MultiLink = props => { 8 | const internal = /^\/(?!\/)/.test(props.to) 9 | let result 10 | 11 | if (internal) { 12 | result = ( 13 | 14 | {props.children} 15 | 16 | ) 17 | } else { 18 | result = ( 19 | 20 | {props.children} 21 | 22 | ) 23 | } 24 | 25 | return result 26 | } 27 | 28 | const SliderMenu = props => { 29 | // Prevents a flash of visible menu items when the entrance is triggered 30 | let extraClasses 31 | 32 | if (props.active === null) { 33 | extraClasses = " dn" 34 | } else { 35 | extraClasses = props.active ? " fadeIn" : " fadeOut" 36 | } 37 | 38 | return ( 39 |
45 | 52 | {props.siteTitle} 53 | 54 | {props.extraLinks.map(navLink => ( 55 | 62 | {navLink.name} 63 | 64 | ))} 65 | 72 | About 73 | 74 |
75 | ) 76 | } 77 | 78 | export default class Navbar extends React.Component { 79 | constructor(props) { 80 | super() 81 | this.state = { 82 | // Null rather than false to check for initialization 83 | menuToggle: null, 84 | } 85 | this.toggleMenu = this.toggleMenu.bind(this) 86 | } 87 | 88 | toggleMenu(event) { 89 | this.setState({ 90 | menuToggle: !this.state.menuToggle, 91 | }) 92 | } 93 | 94 | render() { 95 | return ( 96 | ( 112 | 113 |
119 |
120 | 127 | 131 | {data.site.siteMetadata.siteTitle} 132 | 133 | 137 | HOME 138 | 139 | {data.site.siteMetadata.navbarLinks.map(navLink => ( 140 | 144 | {navLink.name} 145 | 146 | ))} 147 |
148 |
149 | 150 | | 151 | 155 | ABOUT 156 | 157 |
158 |
159 | 164 | 165 | )} 166 | /> 167 | ) 168 | } 169 | } 170 | -------------------------------------------------------------------------------- /demo/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swyxio/gatsby-theme-netlify-identity/9925a39427c9aa0d42fadcd412a9d3f9e4f002ad/demo/static/favicon.ico -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/.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 | -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "endOfLine": "lf", 3 | "semi": false, 4 | "singleQuote": false, 5 | "tabWidth": 2, 6 | "trailingComma": "es5" 7 | } 8 | -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). 9 | 10 | ## 0.0.2 - 2019-07-31 11 | 12 | ### Commits 13 | 14 | - init [`286fffa`](https://github.com/sw-yx/gatsby-theme-netlify-identity/commit/286fffaa4edc74f29024f3e23a4c817f8bb58039) 15 | - v0.1 [`717030b`](https://github.com/sw-yx/gatsby-theme-netlify-identity/commit/717030ba792c41d8f3770ad97e5d01795314b43d) 16 | -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Swyx 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 | -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/README.md: -------------------------------------------------------------------------------- 1 | # Gatsby Theme Netlify Identity 2 | 3 | This is a Gatsby Theme to add Netlify Identity and Authentication UI to any Gatsby App. 4 | 5 | - **Live Demo**: https://gatsby-theme-netlify-identity.netlify.com/ 6 | - 2hr Livestream: https://www.youtube.com/watch?v=1zuLpkV0jK0 (creating this theme) 7 | 8 | Features: 9 | 10 | - ✅Add Netlify Identity Authentication to any Gatsby app 11 | - 🕵🏼‍Shadow only the components you need to add authentication to 12 | - ♿ Accessible modal component that doesn't affect UI 13 | - 💁🏼‍♂️Drop down to use the headless [react-netlify-identity](https://github.com/sw-yx/react-netlify-identity) API if you want to write your own auth UI 14 | 15 | 16 | 17 | See the [live demo](https://gatsby-theme-netlify-identity.netlify.com/) 18 | 19 | ## Installation 20 | 21 | To use this theme in your Gatsby sites, follow these instructions: 22 | 23 | 1. Install the theme 24 | 25 | ```sh 26 | npm install --save gatsby-plugin-netlity-identity 27 | ``` 28 | 29 | 2. Add the theme to your `gatsby-config.js`: 30 | 31 | ```js 32 | module.exports = { 33 | plugins: ["gatsby-plugin-netlity-identity"], 34 | } 35 | ``` 36 | 37 | 3. Start your site 38 | ```sh 39 | gatsby develop 40 | ``` 41 | 42 | ## Gatsby Theme Jam Submission Checklist 43 | 44 | To ensure your Theme Jam submission [follows the rules](https://themejam.gatsbyjs.org/rules), use this checklist: 45 | 46 | - [x] Use our [accessibility guide][a11y] to ensure your site meets our accessibility standards 47 | - [x] Run a performance audit using [Lighthouse][] and/or [WebPageTest][] 48 | - [x] Set up a live demo using [Netlify][] or [GitHub Pages][] 49 | - [x] Add installation documentation to the README 50 | - [x] Update the `name` field in `package.json` 51 | - [x] Update the `author` field in `package.json` 52 | - [x] Update the `repository` field in `package.json` 53 | - [x] Make sure the theme’s `keywords` in `package.json` include `gatsby`, `gatsby-theme`, and `gatsby-plugin` 54 | - [x] Publish your theme to npm ([docs][npmpublish]) 55 | - [x] Submit your theme at https://themejam.gatsbyjs.org 56 | 57 | [a11y]: https://gatsbyjs.org/docs/making-your-site-accessible#how-to-improve-accessibility 58 | [lighthouse]: https://developers.google.com/web/tools/lighthouse/ 59 | [axe]: https://www.deque.com/axe/ 60 | [webpagetest]: http://webpagetest.org/ 61 | [netlify]: https://netlify.com 62 | [github pages]: https://pages.github.com/ 63 | [npmpublish]: https://docs.npmjs.com/cli/publish 64 | -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = ({ url }) => ({ 2 | // // not needed for now 3 | // siteMetadata: { 4 | // title: "Gatsby Theme Jam Example Submission", 5 | // }, 6 | plugins: [ 7 | // You can should only have one instance of this plugin 8 | { 9 | resolve: `gatsby-plugin-netlify-identity`, 10 | options: { 11 | url, 12 | }, 13 | }, 14 | ], 15 | }) 16 | -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/gatsby-node.js: -------------------------------------------------------------------------------- 1 | // exports.createPages = ({ actions, reporter }) => { 2 | // reporter.warn("make sure to load data from somewhere!") 3 | 4 | // // TODO replace this with data from somewhere 5 | // actions.createPage({` 6 | // path: "/", 7 | // component: require.resolve("./src/templates/page.js"), 8 | // context: { 9 | // heading: "Your Theme Here", 10 | // content: ` 11 | //

12 | // Use this handy theme example as the basis for your own amazing theme! 13 | //

14 | //

15 | // For more information, see 16 | // themejam.gatsbyjs.org. 17 | //

18 | // `, 19 | // }, 20 | // }) 21 | // } 22 | -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/index.js: -------------------------------------------------------------------------------- 1 | // boop 2 | -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-theme-netlify-identity", 3 | "author": "swyx ", 4 | "repository": { 5 | "type": "git", 6 | "url": "https://github.com/sw-yx/gatsby-theme-netlify-identity.git" 7 | }, 8 | "version": "0.0.2", 9 | "main": "index.js", 10 | "license": "MIT", 11 | "scripts": { 12 | "version": "auto-changelog -p --template keepachangelog && git add .", 13 | "prepublishOnly": "git push && git push --tags && gh-release" 14 | }, 15 | "peerDependencies": { 16 | "gatsby": "^2.13.1", 17 | "react": "^16.8.6", 18 | "react-dom": "^16.8.6" 19 | }, 20 | "devDependencies": { 21 | "auto-changelog": "^1.14.1", 22 | "gatsby": "^2.13.1", 23 | "gh-release": "^3.5.0", 24 | "react": "^16.8.6", 25 | "react-dom": "^16.8.6" 26 | }, 27 | "dependencies": { 28 | "@reach/dialog": "^0.2.9", 29 | "@reach/tabs": "^0.1.6", 30 | "@reach/visually-hidden": "^0.1.4", 31 | "gatsby-plugin-netlify-identity": "^0.0.3", 32 | "react-netlify-identity-widget": "^0.1.4" 33 | }, 34 | "keywords": [ 35 | "gatsby", 36 | "gatsby-theme", 37 | "gatsby-plugin", 38 | "netlify", 39 | "netlify-identity" 40 | ] 41 | } 42 | -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/src/components/layout.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { css, Global } from "@emotion/core" 3 | import { Layout as StyledLayout, Header, Main, Container } from "theme-ui" 4 | import { graphql, useStaticQuery } from "gatsby" 5 | 6 | const Layout = ({ children }) => { 7 | const data = useStaticQuery(graphql` 8 | query { 9 | site { 10 | siteMetadata { 11 | title 12 | } 13 | } 14 | } 15 | `) 16 | 17 | return ( 18 | 19 | 26 |
27 | {data.site.siteMetadata.title} 28 |
29 |
30 | {children} 31 |
32 | 33 | ) 34 | } 35 | 36 | export default Layout 37 | -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/src/gatsby-plugin-theme-ui/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This theme uses `theme-ui` under the hood. 3 | * @see https://theme-ui.com/ 4 | * @see https://theme-ui.com/gatsby-plugin/ 5 | */ 6 | export default { 7 | colors: { 8 | text: "#232129", 9 | background: "#fff", 10 | primary: "#639", 11 | }, 12 | fonts: { 13 | default: 14 | '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', 15 | }, 16 | fontSizes: [16, 18, 20, 22, 27, 36], 17 | lineHeights: { 18 | text: "1.45", 19 | heading: "1.1", 20 | }, 21 | sizes: { 22 | container: 650, 23 | }, 24 | styles: { 25 | Layout: { 26 | backgroundColor: "background", 27 | color: "text", 28 | fontFamily: "default", 29 | fontSize: 1, 30 | lineHeight: "text", 31 | }, 32 | Header: { 33 | backgroundColor: "primary", 34 | color: "background", 35 | fontWeight: "bold", 36 | margin: 0, 37 | span: { 38 | display: "block", 39 | fontSize: 3, 40 | margin: "0 auto", 41 | maxWidth: "container", 42 | padding: 3, 43 | width: "90vw", 44 | }, 45 | }, 46 | Main: { 47 | margin: "0 auto", 48 | maxWidth: "container", 49 | width: "90vw", 50 | }, 51 | Container: { 52 | padding: 0, 53 | paddingBottom: 3, 54 | paddingTop: 3, 55 | }, 56 | h1: { 57 | color: "text", 58 | fontSize: 5, 59 | lineHeight: "heading", 60 | }, 61 | }, 62 | } 63 | -------------------------------------------------------------------------------- /gatsby-theme-netlify-identity/src/templates/page.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import { Styled } from "theme-ui" 3 | import Layout from "../components/layout" 4 | 5 | const PageTemplate = ({ pageContext }) => ( 6 | 7 | {pageContext.heading} 8 |
9 | 10 | ) 11 | 12 | export default PageTemplate 13 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/.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 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. 4 | 5 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) 6 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 7 | 8 | Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). 9 | 10 | ## 0.0.3 - 2019-07-31 11 | 12 | ### Commits 13 | 14 | - init [`286fffa`](https://github.com/sw-yx/gatsby-theme-netlify-identity/commit/286fffaa4edc74f29024f3e23a4c817f8bb58039) 15 | - tyra banking it [`8c1d3d2`](https://github.com/sw-yx/gatsby-theme-netlify-identity/commit/8c1d3d293221e21c1e7922be3b323111f932d9ab) 16 | - a11y and pwa fixes [`04cc5ec`](https://github.com/sw-yx/gatsby-theme-netlify-identity/commit/04cc5ec461adb2ffcaaadcf11302ddb4686e662b) 17 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Madelyn Eriksen 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 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/README.md: -------------------------------------------------------------------------------- 1 | # Tyra - Feminine Gatsby Theme 2 | 3 | This is a theme version of https://github.com/madelyneriksen/gatsby-starter-tyra 4 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/gatsby-config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | module.exports = { 3 | siteMetadata: { 4 | navbarLinks: [ 5 | { to: '/makeup', name: 'Makeup' }, 6 | { to: '/lifestyle', name: 'Lifestyle' }, 7 | { to: '/blog', name: 'blog' }, 8 | ], 9 | title: 'TYRA', 10 | description: 'Tyra is a fast, feminine, and chic Gatsby.js theme.', 11 | siteUrl: 'https://tyra-starter.netlify.com', 12 | homepageHeader: 'Welcome to Your New Blog', 13 | homepageAbout: 14 | 'Tyra is a modern, sleek and feminine Gatsby.js theme. Easily create a beautiful and fast blog and draw attention to your stellar content.', 15 | mailChimpUrl: 'https://mailchimp.com', 16 | mailChimpToken: 'MAILCHIMP TOKEN HERE', 17 | youtube: '', // YOUR YOUTUBE PROFILE HERE 18 | github: '', // YOUR GITHUB PROFILE HERE 19 | pinterest: '', // YOUR PINTEREST PROFILE HERE 20 | facebook: '', // YOUR FACEBOOK PROFILE HERE 21 | twitter: '', // YOUR TWITTER PROFILE HERE 22 | }, 23 | plugins: [ 24 | 'gatsby-plugin-sitemap', 25 | 'gatsby-plugin-react-helmet', 26 | 'gatsby-transformer-sharp', 27 | 'gatsby-plugin-sharp', 28 | { 29 | resolve: 'gatsby-plugin-feed', 30 | options: { 31 | query: ` 32 | { 33 | site { 34 | siteMetadata { 35 | title 36 | description 37 | siteUrl 38 | site_url: siteUrl 39 | } 40 | } 41 | } 42 | `, 43 | feeds: [ 44 | { 45 | serialize: ({ query: { site, allMarkdownRemark } }) => { 46 | return allMarkdownRemark.edges.map((edge) => { 47 | return Object.assign({}, edge.node.frontmatter, { 48 | description: edge.node.excerpt, 49 | date: edge.node.frontmatter.date, 50 | url: site.siteMetadata.siteUrl + edge.node.frontmatter.slug, 51 | guid: site.siteMetadata.siteUrl + edge.node.frontmatter.slug, 52 | custom_elements: [{ 'content:encoded': edge.node.html }], 53 | }) 54 | }) 55 | }, 56 | query: ` 57 | { 58 | allMarkdownRemark( 59 | limit: 1000, 60 | sort: { order: DESC, fields: [frontmatter___date] }, 61 | filter: {frontmatter: {type: {eq: "post"}}} 62 | ) { 63 | edges { 64 | node { 65 | excerpt 66 | html 67 | frontmatter { 68 | slug 69 | title 70 | date 71 | } 72 | } 73 | } 74 | } 75 | } 76 | `, 77 | output: '/rss.xml', 78 | title: 'Gatsby RSS Feed', 79 | }, 80 | ], 81 | }, 82 | }, 83 | { 84 | resolve: 'gatsby-source-filesystem', 85 | options: { 86 | // path: `${__dirname}/content`, 87 | path: path.resolve(`content`), // assumes consumer must have a `/content` folder 88 | name: 'content', 89 | }, 90 | }, 91 | { 92 | resolve: 'gatsby-transformer-remark', 93 | options: { 94 | plugins: [ 95 | 'gatsby-remark-copy-linked-files', 96 | { 97 | resolve: 'gatsby-remark-images', 98 | options: { 99 | maxWidth: 1400, 100 | }, 101 | }, 102 | ], 103 | }, 104 | }, 105 | { 106 | resolve: 'gatsby-plugin-web-font-loader', 107 | options: { 108 | google: { 109 | families: ['Karla', 'Playfair Display', 'Lora'], 110 | }, 111 | }, 112 | }, 113 | { 114 | resolve: 'gatsby-plugin-google-analytics', 115 | options: { 116 | trackingId: '', 117 | head: false, 118 | anonymize: true, 119 | respectDNT: true, 120 | exclude: ['/success'], 121 | cookieDomain: 'tyra-starter.netlify.com', 122 | }, 123 | }, 124 | { 125 | resolve: `gatsby-plugin-page-creator`, 126 | options: { 127 | path: path.join(__dirname, `src`, `pages`), 128 | }, 129 | }, 130 | ], 131 | } 132 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/gatsby-node.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | exports.createPages = ({ graphql, actions }) => { 4 | const { createPage } = actions 5 | 6 | return new Promise((resolve, reject) => { 7 | resolve( 8 | graphql( 9 | ` 10 | { 11 | allPosts: allMarkdownRemark( 12 | filter: { frontmatter: { type: { eq: "post" } } } 13 | sort: { fields: frontmatter___date, order: DESC } 14 | ) { 15 | edges { 16 | node { 17 | frontmatter { 18 | slug 19 | } 20 | } 21 | } 22 | group(field: frontmatter___category) { 23 | fieldValue 24 | edges { 25 | node { 26 | frontmatter { 27 | slug 28 | } 29 | } 30 | } 31 | } 32 | } 33 | } 34 | `, 35 | ).then((result) => { 36 | if (result.errors) { 37 | reject(result.errors) 38 | } 39 | const allPosts = result.data.allPosts.edges 40 | const groupedPosts = result.data.allPosts.group 41 | const paginationTemplate = require.resolve('./src/blog/index.js') 42 | const postsPerPage = 10 43 | let numPages = Math.ceil(allPosts.length / postsPerPage) 44 | 45 | // Creating the main blog index 46 | Array.from({ length: numPages }).forEach((_, i) => { 47 | createPage({ 48 | path: i === 0 ? '/blog' : `/blog/${i + 1}`, 49 | component: paginationTemplate, 50 | context: { 51 | limit: postsPerPage, 52 | skip: i * postsPerPage, 53 | nextPage: `/blog/${i + 2}`, 54 | pageNumber: i + 1, 55 | }, 56 | }) 57 | }) 58 | 59 | // Creating all category pages. 60 | let category 61 | let categoryPosts 62 | const categoryTemplate = require.resolve('./src/blog/category.js') 63 | groupedPosts.forEach((group, _) => { 64 | category = group.fieldValue 65 | categoryPosts = group.edges 66 | numPages = Math.ceil(categoryPosts.length / postsPerPage) 67 | Array.from({ length: numPages }).forEach((_, i) => { 68 | createPage({ 69 | path: i === 0 ? `/${category}` : `/${category}/${i + 1}`, 70 | component: categoryTemplate, 71 | context: { 72 | limit: postsPerPage, 73 | skip: i * postsPerPage, 74 | nextPage: `/${category}/${i + 2}`, 75 | pageNumber: i + 1, 76 | category: category, 77 | }, 78 | }) 79 | }) 80 | }) 81 | 82 | // Create all the blog post pages. 83 | const template = require.resolve('./src/blog/post.js') 84 | allPosts.forEach(({ node }) => { 85 | let slug = node.frontmatter.slug 86 | createPage({ 87 | path: slug, 88 | component: template, 89 | context: { 90 | slug, 91 | }, 92 | }) 93 | }) 94 | }), 95 | ) 96 | }) 97 | } 98 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/index.js: -------------------------------------------------------------------------------- 1 | //noop 2 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-theme-tyra", 3 | "description": "Gatsby Theme Tyra", 4 | "license": "MIT", 5 | "version": "0.0.3", 6 | "main": "index.js", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/sw-yx/gatsby-theme-netlify-identity.git" 10 | }, 11 | "scripts": { 12 | "develop": "gatsby develop", 13 | "start": "npm run develop", 14 | "build": "gatsby build", 15 | "serve": "gatsby serve", 16 | "version": "auto-changelog -p --template keepachangelog && git add .", 17 | "disabled:prepublishOnly": "git push && git push --tags && gh-release" 18 | }, 19 | "peerDependencies": { 20 | "gatsby": "^2.13.1", 21 | "react": "^16.8.6", 22 | "react-dom": "^16.8.6" 23 | }, 24 | "devDependencies": { 25 | "auto-changelog": "^1.14.1", 26 | "gatsby": "^2.13.1", 27 | "gh-release": "^3.5.0", 28 | "react": "^16.8.6", 29 | "react-dom": "^16.8.6" 30 | }, 31 | "dependencies": { 32 | "gatsby-image": "^2.0.33", 33 | "gatsby-plugin-feed": "^2.0.15", 34 | "gatsby-plugin-google-analytics": "^2.0.17", 35 | "gatsby-plugin-page-creator": "^2.1.5", 36 | "gatsby-plugin-react-helmet": "^3.0.9", 37 | "gatsby-plugin-sharp": "^2.0.28", 38 | "gatsby-plugin-sitemap": "^2.0.9", 39 | "gatsby-plugin-web-font-loader": "^1.0.4", 40 | "gatsby-remark-copy-linked-files": "^2.0.10", 41 | "gatsby-remark-images": "^3.0.9", 42 | "gatsby-source-filesystem": "^2.0.26", 43 | "gatsby-transformer-remark": "^2.3.4", 44 | "gatsby-transformer-sharp": "^2.1.17", 45 | "react-helmet": "^5.2.0", 46 | "react-icons": "^3.5.0", 47 | "tachyons": "^4.11.1" 48 | }, 49 | "keywords": [ 50 | "gatsby", 51 | "gatsby-theme", 52 | "gatsby-plugin" 53 | ] 54 | } 55 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swyxio/gatsby-theme-netlify-identity/9925a39427c9aa0d42fadcd412a9d3f9e4f002ad/gatsby-theme-tyra/screenshot.jpg -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/category.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '../common/layouts'; 3 | import { Link, graphql } from 'gatsby'; 4 | import Breadcrumbs from './components/breadcrumbs'; 5 | import Preview from './components/post-preview.js'; 6 | import Seo from '../common/seo'; 7 | import 'tachyons'; 8 | 9 | 10 | export default class BlogIndex extends React.Component { 11 | render() { 12 | const posts = this.props.data.posts.edges; 13 | const hasNext = this.props.data.posts.pageInfo.hasNextPage; 14 | const category = this.props.pageContext.category; 15 | return ( 16 | 17 | 19 |
20 |

Posts Tagged {category}

21 |
22 |
23 | 27 | {posts.map(({node}) => ( 28 | 35 | ))} 36 |
37 | {hasNext && 38 | Next Page → 41 | } 42 |
43 |
44 | 45 | ) 46 | } 47 | } 48 | 49 | 50 | export const blogListQuery = graphql` 51 | query categoryPosts($skip: Int!, $limit: Int!, $category: String!) { 52 | posts: allMarkdownRemark( 53 | filter: {frontmatter: {type: {eq: "post"}, category: {eq: $category}}}, 54 | sort: {fields: frontmatter___date, order: DESC}, 55 | limit: $limit, 56 | skip: $skip, 57 | ) { 58 | edges { 59 | node { 60 | frontmatter { 61 | title 62 | date(formatString: "MMM Do YYYY") 63 | category 64 | metaDescription 65 | slug 66 | postImage { 67 | childImageSharp { 68 | fluid(maxWidth: 1080, maxHeight: 512) { 69 | ...GatsbyImageSharpFluid 70 | } 71 | } 72 | } 73 | } 74 | } 75 | } 76 | pageInfo { 77 | hasNextPage 78 | } 79 | } 80 | } 81 | ` 82 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/components/body.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Sidebar from "./sidebar.js"; 3 | import Suggested from './suggested.js'; 4 | import "tachyons"; 5 | import "../../common/styles/custom.tachyons.css"; 6 | import "../styles/grid.css"; 7 | 8 | 9 | export default props => ( 10 |
11 |
12 |
16 | 21 | 22 |
23 | ) 24 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/components/breadcrumbs.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'gatsby'; 3 | import 'tachyons'; 4 | 5 | 6 | export default (props) => ( 7 |
8 | Home 11 |  >  12 | {props.lastName} 15 |  >  16 | {props.currentPage} 17 |
18 | ) 19 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/components/emailForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StaticQuery, graphql } from 'gatsby'; 3 | 4 | 5 | 6 | export default props => ( 7 |
8 |
9 | Subscribe For More 10 | Get updates delivered weekly! 11 |
12 | ( 24 |
25 | 26 | 27 | 28 |
29 | )} /> 30 |
31 | ) 32 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/components/hero.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'gatsby'; 3 | import "tachyons"; 4 | 5 | 6 | export default props => ( 7 |
8 | {props.category} 9 |

{props.title}

10 | by {props.author} 11 | {props.date} 12 |
13 | ) 14 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/components/post-preview.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from 'gatsby'; 3 | import Img from 'gatsby-image'; 4 | import 'tachyons'; 5 | 6 | 7 | export default (props) => ( 8 |
9 | 13 |
14 | 15 | {props.title} 18 | 19 |
20 |
{props.date}
21 |
TAGGED: {props.category}
22 |
23 |
{props.description}
24 |
25 |
26 | ) 27 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/components/sidebar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | FaPinterestP, 4 | FaFacebookF 5 | } from 'react-icons/fa'; 6 | import {FiMail} from 'react-icons/fi' 7 | import { StaticQuery, graphql } from 'gatsby'; 8 | import 'tachyons'; 9 | 10 | 11 | export default (props) => { 12 | let { desc, img, location } = props; 13 | location = encodeURIComponent(location.pathname); 14 | desc = encodeURIComponent(desc); 15 | img = encodeURIComponent(img); 16 | return ( 17 | { 28 | const base = encodeURIComponent(data.site.siteMetadata.siteUrl); 29 | return ( 30 |
31 |
32 | 35 | 38 | 41 |
42 |
43 | )}} /> 44 | ) 45 | } 46 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/components/suggested.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import EmailForm from './emailForm.js'; 3 | import { StaticQuery, graphql, Link } from 'gatsby'; 4 | import Img from 'gatsby-image'; 5 | import 'tachyons'; 6 | 7 | 8 | export default props => ( 9 |
10 | CONTINUE READING 11 | data.allMarkdownRemark.edges.map(({ node }) => ( 38 |
39 | 40 | {node.frontmatter.metaDescription} 44 | 45 | 48 | {node.frontmatter.title} 49 | 50 |
51 | ))} /> 52 | 53 |
54 | ) 55 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '../common/layouts'; 3 | import { Link, graphql } from 'gatsby'; 4 | import Breadcrumbs from './components/breadcrumbs'; 5 | import Preview from './components/post-preview.js'; 6 | import Seo from '../common/seo'; 7 | import 'tachyons'; 8 | 9 | 10 | export default class BlogIndex extends React.Component { 11 | render() { 12 | const posts = this.props.data.posts.edges; 13 | const hasNext = this.props.data.posts.pageInfo.hasNextPage; 14 | return ( 15 | 16 | 20 |
21 |

All Blog Posts

22 |
23 |
24 | 28 | {posts.map(({node}) => ( 29 | 36 | ))} 37 |
38 | {hasNext && 39 | Next Page → 42 | } 43 |
44 |
45 | 46 | ) 47 | } 48 | } 49 | 50 | 51 | export const blogListQuery = graphql` 52 | query posts($skip: Int!, $limit: Int!) { 53 | posts: allMarkdownRemark( 54 | filter: {frontmatter: {type: {eq: "post"}}}, 55 | sort: {fields: frontmatter___date, order: DESC}, 56 | limit: $limit, 57 | skip: $skip, 58 | ) { 59 | edges { 60 | node { 61 | frontmatter { 62 | title 63 | date(formatString: "MMM Do YYYY") 64 | category 65 | metaDescription 66 | slug 67 | postImage { 68 | childImageSharp { 69 | fluid(maxWidth: 1080, maxHeight: 512) { 70 | ...GatsbyImageSharpFluid 71 | } 72 | } 73 | } 74 | } 75 | } 76 | } 77 | pageInfo { 78 | hasNextPage 79 | } 80 | } 81 | } 82 | ` 83 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/post.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from '../common/layouts'; 3 | import Hero from './components/hero.js'; 4 | import Body from './components/body.js'; 5 | import Seo from './seo.js'; 6 | import MetaSeo from '../common/seo'; 7 | import { graphql } from 'gatsby'; 8 | 9 | 10 | export default ({location, data }) => { 11 | const { 12 | category, 13 | date, 14 | dateOriginal, 15 | author, 16 | title, 17 | slug, 18 | metaDescription 19 | } = data.post.frontmatter; 20 | const content = data.post.html; 21 | return ( 22 | 23 | 30 | 33 | 34 | 40 | 41 | ) 42 | } 43 | 44 | 45 | export const query = graphql` 46 | query($slug: String!) { 47 | post: markdownRemark(frontmatter: {slug: {eq: $slug}}) { 48 | html 49 | frontmatter { 50 | date(formatString: "MMM Do, YYYY") 51 | dateOriginal: date 52 | category 53 | author 54 | title 55 | metaDescription 56 | slug 57 | postImage { 58 | childImageSharp { 59 | original { 60 | src 61 | } 62 | fluid(maxWidth: 1080) { 63 | ...GatsbyImageSharpFluid 64 | } 65 | } 66 | } 67 | } 68 | } 69 | date: markdownRemark(frontmatter: {slug: {eq: $slug}}) { 70 | frontmatter { 71 | date 72 | } 73 | } 74 | } 75 | ` 76 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/seo.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Helmet from 'react-helmet'; 3 | import {StaticQuery, graphql} from 'gatsby'; 4 | 5 | 6 | export default props => ( 7 | ( 19 | 20 | 47 | 48 | )} /> 49 | ) 50 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/blog/styles/grid.css: -------------------------------------------------------------------------------- 1 | .blog__grid { 2 | display: grid; 3 | grid-template-rows: 3rem auto auto 3rem; 4 | grid-template-columns: 100vw; 5 | grid-template-areas: 6 | "header" 7 | "content" 8 | "suggested" 9 | "footer" 10 | } 11 | 12 | @media screen and (min-width: 60em) { 13 | .blog__grid { 14 | grid-template-columns: .3fr 1fr .3fr; 15 | grid-template-rows: 3rem 1fr 3rem; 16 | grid-template-areas: 17 | "sidebar header suggested" 18 | "sidebar content suggested" 19 | "footer footer footer" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/common/components/footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link, StaticQuery, graphql } from 'gatsby' 3 | import { FaPinterestP, FaFacebookF, FaTwitter, FaYoutube, FaGithub } from 'react-icons/fa' 4 | import 'tachyons' 5 | 6 | export default () => ( 7 | ( 24 |
25 |
26 |
27 | {data.site.siteMetadata.siteTitle} 28 |
29 |
30 | {data.site.siteMetadata.facebook && ( 31 | 32 | 33 | 34 | )} 35 | 36 | {data.site.siteMetadata.youtube && ( 37 | 38 | 39 | 40 | )} 41 | 42 | {data.site.siteMetadata.github && ( 43 | 44 | 45 | 46 | )} 47 | 48 | {data.site.siteMetadata.pinterest && ( 49 | 50 | 51 | 52 | )} 53 | 54 | {data.site.siteMetadata.twitter && ( 55 | 56 | 57 | 58 | )} 59 |
60 |
61 |
62 | 63 | WRITING BY {data.site.siteMetadata.siteTitle} 64 | 65 | 66 | ALL POSTS 67 | 68 | 69 | RSS FEED 70 | 71 |
72 |
73 | MORE ON {data.site.siteMetadata.siteTitle} 74 | 75 | ABOUT US 76 | 77 | 78 | NEWS LETTER 79 | 80 |
81 |
82 |
83 |
84 |
85 | 86 | SITEMAP 87 | 88 | | 89 | 90 | PRIVACY 91 | 92 | | 93 | 97 | THEME 98 | 99 |
100 |
101 |
102 |

Tyra Theme (C) 2018 by Madelyn Eriksen under terms of the "MIT" software license.

103 |
104 |
105 | )} 106 | /> 107 | ) 108 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/common/components/navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { StaticQuery, graphql, Link } from 'gatsby' 3 | import { FiMenu } from 'react-icons/fi' 4 | import '../styles/custom.tachyons.css' 5 | 6 | const MultiLink = (props) => { 7 | const internal = /^\/(?!\/)/.test(props.to) 8 | let result 9 | if (internal) { 10 | result = ( 11 | 12 | {props.children} 13 | 14 | ) 15 | } else { 16 | result = ( 17 | 18 | {props.children} 19 | 20 | ) 21 | } 22 | return result 23 | } 24 | 25 | const SliderMenu = (props) => { 26 | // Prevents a flash of visible menu items when the entrance is triggered 27 | let extraClasses 28 | if (props.active === null) { 29 | extraClasses = ' dn' 30 | } else { 31 | extraClasses = props.active ? ' fadeIn' : ' fadeOut' 32 | } 33 | return ( 34 |
40 | 41 | {props.siteTitle} 42 | 43 | {props.extraLinks.map((navLink) => ( 44 | 45 | {navLink.name} 46 | 47 | ))} 48 | 49 | About 50 | 51 |
52 | ) 53 | } 54 | 55 | export default class Navbar extends React.Component { 56 | constructor(props) { 57 | super() 58 | this.state = { 59 | // Null rather than false to check for initialization 60 | menuToggle: null, 61 | } 62 | this.toggleMenu = this.toggleMenu.bind(this) 63 | } 64 | 65 | toggleMenu(event) { 66 | this.setState({ 67 | menuToggle: !this.state.menuToggle, 68 | }) 69 | } 70 | 71 | render() { 72 | return ( 73 | ( 89 | 90 |
94 |
95 | 102 | 103 | {data.site.siteMetadata.siteTitle} 104 | 105 | 106 | HOME 107 | 108 | {data.site.siteMetadata.navbarLinks.map((navLink) => ( 109 | 110 | {navLink.name} 111 | 112 | ))} 113 |
114 |
115 | 119 | SIGN UP 120 | 121 | | 122 | 123 | ABOUT 124 | 125 |
126 |
127 | 132 | 133 | )} 134 | /> 135 | ) 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /gatsby-theme-tyra/src/common/layouts/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Helmet from 'react-helmet'; 3 | import Navbar from '../components/navbar.js'; 4 | import Footer from '../components/footer.js'; 5 | import 'tachyons'; 6 | import '../styles/custom.tachyons.css'; 7 | 8 | 9 | export default (props) => ( 10 | 11 | 12 | 13 | 14 | 15 | {props.children} 16 |