├── src ├── components │ ├── Footer │ │ ├── footer.module.scss │ │ └── Footer.jsx │ ├── TestComponent │ │ ├── testComponent.module.scss │ │ └── TestComponent.jsx │ └── Header │ │ ├── header.module.scss │ │ └── Header.jsx ├── atoms │ ├── support │ │ └── bootstrap.scss │ └── theme │ │ ├── components │ │ ├── footer.scss │ │ └── header.scss │ │ └── index.scss ├── images │ └── gatsby-icon.png ├── store │ └── store.js ├── reducers │ ├── rootReducer.js │ └── someReducer.js ├── pages │ └── index.jsx ├── pagesDefinitions │ └── Index │ │ └── Index.jsx └── containers │ ├── App.jsx │ └── Layout.jsx ├── .prettierrc ├── .gitignore ├── gatsby-node.js ├── gatsby-browser.js ├── gatsby-ssr.js ├── gatsby-config.js ├── LICENSE ├── package.json ├── .eslintrc.json └── README.md /src/components/Footer/footer.module.scss: -------------------------------------------------------------------------------- 1 | 2 | .footer { 3 | 4 | } -------------------------------------------------------------------------------- /src/components/TestComponent/testComponent.module.scss: -------------------------------------------------------------------------------- 1 | .testComponent { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/atoms/support/bootstrap.scss: -------------------------------------------------------------------------------- 1 | @import url("../../../node_modules/bootstrap/scss/bootstrap.scss"); -------------------------------------------------------------------------------- /src/images/gatsby-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AVivero/gatsby-redux-starter/HEAD/src/images/gatsby-icon.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "singleQuote": true, 4 | "trailingComma": "es5", 5 | "printWidth": 100 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Project dependencies 2 | .cache 3 | node_modules 4 | yarn-error.log 5 | 6 | # Build directory 7 | /public 8 | .DS_Store 9 | -------------------------------------------------------------------------------- /src/store/store.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux'; 2 | 3 | import rootReducer from '../reducers/rootReducer'; 4 | 5 | export default createStore(rootReducer); 6 | -------------------------------------------------------------------------------- /src/reducers/rootReducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | 3 | import someReducer from './someReducer'; 4 | 5 | export default combineReducers({ 6 | someReducer, 7 | }); 8 | -------------------------------------------------------------------------------- /gatsby-node.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Node APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/node-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /src/components/Header/header.module.scss: -------------------------------------------------------------------------------- 1 | 2 | .header { 3 | background: transparent; 4 | color: #fff; 5 | font-weight: 700; 6 | font-family: 'Open Sans', Arial, Helvetica, sans-serif; 7 | } -------------------------------------------------------------------------------- /gatsby-browser.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's Browser APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/browser-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /src/pages/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import IndexPage from '../pagesDefinitions/Index/Index'; 4 | 5 | const Index = () => ( 6 | 7 | ); 8 | 9 | export default Index; 10 | -------------------------------------------------------------------------------- /gatsby-ssr.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. 3 | * 4 | * See: https://www.gatsbyjs.org/docs/ssr-apis/ 5 | */ 6 | 7 | // You can delete this file if you're not using it 8 | -------------------------------------------------------------------------------- /src/reducers/someReducer.js: -------------------------------------------------------------------------------- 1 | const TEST_ACTION = 'TEST_ACTION'; 2 | 3 | const someReducer = (state = { }, action) => { 4 | switch (action.type) { 5 | case TEST_ACTION: 6 | return state; 7 | default: 8 | return state; 9 | } 10 | }; 11 | 12 | export default someReducer; 13 | -------------------------------------------------------------------------------- /src/pagesDefinitions/Index/Index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import App from '../../containers/App'; 4 | import TestComponent from '../../components/TestComponent/TestComponent'; 5 | 6 | const IndexPage = () => ( 7 | 8 | 9 | 10 | ); 11 | 12 | export default IndexPage; 13 | -------------------------------------------------------------------------------- /src/atoms/theme/components/footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | background: #7269a7a3; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | height: 72px; 7 | color: #fff; 8 | text-align: center; 9 | font-size: 14px; 10 | font-weight: 500; 11 | p { 12 | margin-bottom: 0; 13 | font-weight: 600; 14 | } 15 | } 16 | 17 | .footer-gatsby { 18 | color: #d3d3d378; 19 | } 20 | -------------------------------------------------------------------------------- /src/containers/App.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { Provider } from 'react-redux'; 5 | import store from '../store/store'; 6 | 7 | import Layout from './Layout'; 8 | 9 | const App = ({ children }) => ( 10 | 11 | 12 | { children } 13 | 14 | 15 | ); 16 | 17 | App.propTypes = { 18 | children: PropTypes.any.isRequired, 19 | }; 20 | 21 | export default App; 22 | -------------------------------------------------------------------------------- /src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { Link } from 'gatsby'; 5 | 6 | import footerStyles from './footer.module.scss'; 7 | 8 | const Footer = () => ( 9 | 19 | ); 20 | 21 | Footer.propTypes = { 22 | 23 | }; 24 | Footer.defaultProps = { 25 | 26 | }; 27 | 28 | export default Footer; 29 | -------------------------------------------------------------------------------- /src/components/TestComponent/TestComponent.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | import { Link } from 'gatsby'; 5 | 6 | import testComponent from './testComponent.module.scss'; 7 | 8 | const TestComponent = () => ( 9 |
10 |
11 |
12 |
13 |

Gatsby Starter

14 |
Gatsby - Redux - Sass - Bootstrap - Css Modules - Material Icons
15 |
16 |
17 |
18 |
19 | ); 20 | 21 | TestComponent.propTypes = { 22 | 23 | }; 24 | TestComponent.defaultProps = { 25 | 26 | }; 27 | 28 | export default TestComponent; 29 | -------------------------------------------------------------------------------- /gatsby-config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | pathPrefix: '/gatsby-redux-starter', 3 | siteMetadata: { 4 | title: 'Gatsby Default Starter', 5 | }, 6 | plugins: [ 7 | 'gatsby-plugin-react-helmet', 8 | { 9 | resolve: 'gatsby-plugin-sass', 10 | options: { 11 | includePaths: ['src/atoms/styles/'], 12 | }, 13 | }, 14 | { 15 | resolve: 'gatsby-plugin-manifest', 16 | options: { 17 | name: 'gatsby-starter-default', 18 | short_name: 'starter', 19 | start_url: '/', 20 | background_color: '#663399', 21 | theme_color: '#663399', 22 | display: 'minimal-ui', 23 | icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site. 24 | }, 25 | }, 26 | 'gatsby-plugin-offline', 27 | ], 28 | }; 29 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 gatsbyjs 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /src/atoms/theme/components/header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | .navbar-header { 3 | width: 100%; 4 | display: flex; 5 | flex: 1; 6 | .navbar-brand img { 7 | width: 60px; 8 | height: 60px; 9 | } 10 | .logo-default { 11 | &:hover { 12 | filter: brightness(125%); 13 | } 14 | } 15 | } 16 | &.header-top-transparent { 17 | .nav-link { 18 | color: rgba(255, 255, 255, 0.8); 19 | &:hover, &:active { 20 | color: #fff; 21 | } 22 | } 23 | .navbar-toggler.navbar-toggler-right.navbar-toggle { 24 | border: none; 25 | color: #fff; 26 | } 27 | } 28 | i.navbar-icon { 29 | font-size: 42px; 30 | color: #181516; 31 | background: transparent; 32 | } 33 | img.navbar-icon { 34 | width: 42px; 35 | height: 42px; 36 | background: transparent; 37 | } 38 | } 39 | 40 | 41 | 42 | @media (max-width: 991px) { 43 | 44 | .header { 45 | .navbar-collapse { 46 | height: auto; 47 | margin-left: 15px; 48 | } 49 | } 50 | 51 | } -------------------------------------------------------------------------------- /src/containers/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Helmet from 'react-helmet'; 4 | import { StaticQuery, graphql } from 'gatsby'; 5 | 6 | import '../atoms/theme/index.scss'; 7 | 8 | import Header from '../components/Header/Header'; 9 | import Footer from '../components/Footer/Footer'; 10 | 11 | const Layout = ({ children }) => ( 12 | ( 23 | <> 24 | 31 | 32 | 33 |
34 |
35 | {children} 36 |
37 |