├── .gitignore ├── 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 ├── 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 /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Tyra - Feminine Blog Powered by Gatsby 2 | ===== 3 | [![Contributions Welcome](https://img.shields.io/badge/Contributions-Welcome-green.svg)](https://shields.io/) [![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://shields.io/) 4 | 5 | Tyra is a Gatsby starter that focuses on legibility and a clean, feminine design with 2010 influences. Technically, the goals for Tyra are having a "plug and play" blog, with great SEO, tooling, and integrations all included. 6 | 7 | [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/madelyneriksen/gatsby-starter-tyra) 8 | 9 | ## Getting Started 10 | 11 | The first step with using Tyra is customizing your metadata in `gatsby-config.js`. 12 | 13 | ```javascript 14 | siteMetadata: { 15 | navbarLinks: [ 16 | {to: "/makeup", name: "Makeup"}, 17 | {to: "/lifestyle", name: "Lifestyle"}, 18 | {to: "/blog", name: "blog"}, 19 | ], 20 | title: "", // The name of your blog 21 | description: "", // SEO Description 22 | siteUrl: "", // Base URL of your blog (https://example.com) 23 | homepageHeader: "", // Header text for the homepage 24 | homepageAbout: "", // Banner body for the homepage 25 | mailChimpUrl: "", // Link you your mailchimp campaign (From the embedded form maker) 26 | mailChimpToken: "", // The hidden field on mailchimp forms 27 | pinterest: "", // Your pinterest profile 28 | facebook: "", // Your facebook profile 29 | twitter: "", // Your twitter profile 30 | } 31 | ``` 32 | 33 | This is used for configuring data across the site, improving SEO, and increasing engagement on social media. 34 | 35 | Next up, you can begin customizing the images and copy in `content/`. Finally, you can add your own blog posts! Posts are written in Markup, an easy way to create webpages. 36 | 37 | ## Installation with `gatsby-cli` 38 | `gatsby new my-site https://github.com/madelyneriksen/gatsby-starter-tyra` 39 | 40 | ## Installation with `git clone` 41 | `git clone git@github.com:madelyneriksen/gatsby-starter-tyra.git my-site` 42 | `cd my-site` 43 | `yarn install` 44 | 45 | ## To develop 46 | `yarn develop` 47 | 48 | ## To build 49 | `yarn build` 50 | 51 | 52 | ## Screenshot 53 | 54 | ![Screenshot of Tyra Homepage](./screenshot.jpg) 55 | 56 | ## Adding your Content 57 | 58 | Tyra uses markdown for writing blog posts, and follows a simple template for adding new posts. To add a new blog post, create a file in `content/posts/` with the following: 59 | 60 | ```markdown 61 | --- 62 | 63 | type: "post" 64 | title: "My Awesome Post Title" 65 | author: "My Name" 66 | category: "My Category" 67 | date: "2019-01-05" 68 | slug: "/my-awesome-post" 69 | postImage: "./img/myimage.jpg" 70 | metaDescription: "This is my first awesome and cool post!!!" 71 | 72 | --- 73 | 74 | You can write your post here using markdown! Link to images in the `img` folder using this syntax: 75 | 76 | ![Alt Text](./img/my-image.jpeg) 77 | ``` 78 | 79 | Images for posts are stored in `content/posts/img/`. Images in the frontmatter will be used as thumbnails for the articles, as well as in search results. 80 | 81 | ## License 82 | 83 | Tyra is licensed under the terms of the MIT License. 84 | 85 | ## Thanks and Mentions 86 | 87 | * The [GatsbyJS](https://www.gatsbyjs.org/) Team for creating an amazing platform. 88 | * [Netlify](https://www.netlify.com/) for making static site hosting even easier. 89 | * [Unsplash](https://unsplash.com/) and the Free Photography Community. 90 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /content/img/about__banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/madelyneriksen/gatsby-starter-tyra/4363653b54595103fbd7133be0bc7480b56786bd/content/img/about__banner.jpg -------------------------------------------------------------------------------- /content/img/author.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/madelyneriksen/gatsby-starter-tyra/4363653b54595103fbd7133be0bc7480b56786bd/content/img/author.jpg -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /content/posts/img/balloons.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/madelyneriksen/gatsby-starter-tyra/4363653b54595103fbd7133be0bc7480b56786bd/content/posts/img/balloons.jpg -------------------------------------------------------------------------------- /content/posts/img/eyeshadow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/madelyneriksen/gatsby-starter-tyra/4363653b54595103fbd7133be0bc7480b56786bd/content/posts/img/eyeshadow.jpg -------------------------------------------------------------------------------- /content/posts/img/flatlay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/madelyneriksen/gatsby-starter-tyra/4363653b54595103fbd7133be0bc7480b56786bd/content/posts/img/flatlay.jpg -------------------------------------------------------------------------------- /content/posts/img/friends.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/madelyneriksen/gatsby-starter-tyra/4363653b54595103fbd7133be0bc7480b56786bd/content/posts/img/friends.jpg -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteMetadata: { 3 | navbarLinks: [ 4 | {to: "/makeup", name: "Makeup"}, 5 | {to: "/lifestyle", name: "Lifestyle"}, 6 | {to: "/blog", name: "blog"}, 7 | ], 8 | title: "TYRA", 9 | description: "Tyra is a fast, feminine, and chic Gatsby.js theme.", 10 | siteUrl: "https://tyra-starter.netlify.com", 11 | homepageHeader: "Welcome to Your New Blog", 12 | homepageAbout: "Tyra is a modern, sleek and feminine Gatsby.js theme. Easily create a beautiful and fast blog and draw attention to your stellar content.", 13 | mailChimpUrl: "https://mailchimp.com", 14 | mailChimpToken: "MAILCHIMP TOKEN HERE", 15 | youtube: "", // YOUR YOUTUBE PROFILE HERE 16 | github: "", // YOUR GITHUB PROFILE HERE 17 | pinterest: "", // YOUR PINTEREST PROFILE HERE 18 | facebook: "", // YOUR FACEBOOK PROFILE HERE 19 | twitter: "", // YOUR TWITTER PROFILE HERE 20 | }, 21 | plugins: [ 22 | 'gatsby-plugin-sitemap', 23 | 'gatsby-plugin-react-helmet', 24 | 'gatsby-transformer-sharp', 25 | 'gatsby-plugin-sharp', 26 | { 27 | resolve: 'gatsby-plugin-feed', 28 | options: { 29 | query: ` 30 | { 31 | site { 32 | siteMetadata { 33 | title 34 | description 35 | siteUrl 36 | site_url: siteUrl 37 | } 38 | } 39 | } 40 | `, 41 | feeds: [ 42 | { 43 | serialize: ({ query: { site, allMarkdownRemark } }) => { 44 | return allMarkdownRemark.edges.map(edge => { 45 | return Object.assign({}, edge.node.frontmatter, { 46 | description: edge.node.excerpt, 47 | date: edge.node.frontmatter.date, 48 | url: site.siteMetadata.siteUrl + edge.node.frontmatter.slug, 49 | guid: site.siteMetadata.siteUrl + edge.node.frontmatter.slug, 50 | custom_elements: [{ "content:encoded": edge.node.html }], 51 | }) 52 | }) 53 | }, 54 | query: ` 55 | { 56 | allMarkdownRemark( 57 | limit: 1000, 58 | sort: { order: DESC, fields: [frontmatter___date] }, 59 | filter: {frontmatter: {type: {eq: "post"}}} 60 | ) { 61 | edges { 62 | node { 63 | excerpt 64 | html 65 | frontmatter { 66 | slug 67 | title 68 | date 69 | } 70 | } 71 | } 72 | } 73 | } 74 | `, 75 | output: "/rss.xml", 76 | title: "Gatsby RSS Feed", 77 | }, 78 | ], 79 | }, 80 | }, 81 | { 82 | resolve: 'gatsby-source-filesystem', 83 | options: { 84 | path: `${__dirname}/content`, 85 | name: 'content', 86 | }, 87 | }, 88 | { 89 | resolve: 'gatsby-transformer-remark', 90 | options: { 91 | plugins: [ 92 | 'gatsby-remark-copy-linked-files', 93 | { 94 | resolve: 'gatsby-remark-images', 95 | options: { 96 | maxWidth: 1400, 97 | }, 98 | }, 99 | ], 100 | } 101 | }, 102 | { 103 | resolve: 'gatsby-plugin-web-font-loader', 104 | options: { 105 | google: { 106 | families: ['Karla', 'Playfair Display', 'Lora'] 107 | } 108 | } 109 | }, 110 | { 111 | resolve: 'gatsby-plugin-google-analytics', 112 | options: { 113 | trackingId: "", 114 | head: false, 115 | anonymize: true, 116 | respectDNT: true, 117 | exclude: ['/success'], 118 | cookieDomain: "tyra-starter.netlify.com", 119 | } 120 | } 121 | ] 122 | } 123 | -------------------------------------------------------------------------------- /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 = path.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 = path.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 = path.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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gatsby-starter-tyra", 3 | "description": "Gatsby Tyra Starter", 4 | "license": "MIT", 5 | "scripts": { 6 | "develop": "gatsby develop", 7 | "start": "npm run develop", 8 | "build": "gatsby build", 9 | "serve": "gatsby serve" 10 | }, 11 | "dependencies": { 12 | "gatsby": "^2.19.49", 13 | "gatsby-image": "^2.11.0", 14 | "gatsby-plugin-feed": "^2.12.0", 15 | "gatsby-plugin-google-analytics": "^2.11.0", 16 | "gatsby-plugin-react-helmet": "^3.10.0", 17 | "gatsby-plugin-sharp": "^2.4.13", 18 | "gatsby-plugin-sitemap": "^2.12.0", 19 | "gatsby-plugin-web-font-loader": "^1.0.4", 20 | "gatsby-remark-copy-linked-files": "^2.10.0", 21 | "gatsby-remark-images": "^3.11.1", 22 | "gatsby-source-filesystem": "^2.11.1", 23 | "gatsby-transformer-remark": "^2.16.1", 24 | "gatsby-transformer-sharp": "^2.3.19", 25 | "react": "^16.14.0", 26 | "react-dom": "^16.14.0", 27 | "react-helmet": "^5.2.1", 28 | "react-icons": "^3.11.0", 29 | "tachyons": "^4.12.0" 30 | }, 31 | "devDependencies": {} 32 | } 33 | -------------------------------------------------------------------------------- /screenshot.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/madelyneriksen/gatsby-starter-tyra/4363653b54595103fbd7133be0bc7480b56786bd/screenshot.jpg -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/common/components/footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link, StaticQuery, graphql } from 'gatsby'; 3 | import { 4 | FaPinterestP, 5 | FaFacebookF, 6 | FaTwitter, 7 | FaYoutube, 8 | FaGithub 9 | } from 'react-icons/fa'; 10 | import 'tachyons'; 11 | 12 | 13 | export default () => ( 14 | ( 31 |
32 |
33 |
34 | {data.site.siteMetadata.siteTitle} 35 |
36 |
37 | {data.site.siteMetadata.facebook && ( 38 | 42 | 43 | 44 | )} 45 | 46 | {data.site.siteMetadata.youtube && ( 47 | 51 | 52 | 53 | )} 54 | 55 | {data.site.siteMetadata.github && ( 56 | 60 | 61 | 62 | )} 63 | 64 | {data.site.siteMetadata.pinterest && ( 65 | 69 | 70 | 71 | )} 72 | 73 | {data.site.siteMetadata.twitter && ( 74 | 75 | 76 | 77 | )} 78 |
79 |
80 |
81 | WRITING BY {data.site.siteMetadata.siteTitle} 82 | ALL POSTS 83 | RSS FEED 84 |
85 |
86 | MORE ON {data.site.siteMetadata.siteTitle} 87 | ABOUT US 88 | NEWS LETTER 89 |
90 |
91 |
92 |
93 |
94 | SITEMAP 95 | | 96 | PRIVACY 97 | | 98 | THEME 99 |
100 |
101 |
102 |

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

103 |
104 |
105 | )} /> 106 | ) 107 | -------------------------------------------------------------------------------- /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 | 7 | const MultiLink = (props) => { 8 | const internal = /^\/(?!\/)/.test(props.to); 9 | let result; 10 | if (internal) { 11 | result = ({props.children}) 12 | } else { 13 | result = ({props.children}) 14 | } 15 | return result; 16 | } 17 | 18 | const SliderMenu = (props) => { 19 | // Prevents a flash of visible menu items when the entrance is triggered 20 | let extraClasses; 21 | if (props.active === null) { 22 | extraClasses = " dn"; 23 | } else { 24 | extraClasses = (props.active ? " fadeIn" : " fadeOut"); 25 | } 26 | return ( 27 |
31 | {props.siteTitle} 35 | 36 | {props.extraLinks.map(navLink => ( 37 | {navLink.name} 41 | 42 | ))} 43 | About 47 |
48 | ) 49 | } 50 | 51 | 52 | export default class Navbar extends React.Component { 53 | constructor(props) { 54 | super(); 55 | this.state = { 56 | // Null rather than false to check for initialization 57 | menuToggle: null, 58 | }; 59 | this.toggleMenu = this.toggleMenu.bind(this); 60 | }; 61 | 62 | toggleMenu(event) { 63 | this.setState({ 64 | menuToggle: !this.state.menuToggle, 65 | }) 66 | }; 67 | 68 | render () { 69 | return ( 70 | ( 86 | 87 |
90 |
91 | 96 | {data.site.siteMetadata.siteTitle} 97 | HOME 98 | {data.site.siteMetadata.navbarLinks.map(navLink => ( 99 | {navLink.name} 100 | ))} 101 |
102 |
103 | SIGN UP 104 | | 105 | ABOUT 106 |
107 |
108 | 112 | 113 | )} /> 114 | ) 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /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 |