Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 7fd3f9a

Browse files
ShMcKShMcK
committed
0 parents  commit 7fd3f9a

26 files changed

+10627
-0
lines changed

‎.gitignore

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
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+
69+
# Yarn Integrity file
70+
.yarn-integrity

‎.prettierrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"endOfLine": "lf",
3+
"semi": false,
4+
"singleQuote": false,
5+
"tabWidth": 2,
6+
"trailingComma": "es5"
7+
}

‎LICENSE

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2019 gillkyle
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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<p align="center">
2+
<img alt="preview of page" src="https://github.com/gillkyle/images/blob/master/Screen%20Shot%202019-03-21%20at%209.14.46%20PM.png" />
3+
</p>
4+
<h1 align="center">
5+
Gatsby Landing Page Starter
6+
</h1>
7+
8+
A simple, minimal, easy-to-use landing page starter without all sorts of bells and whistles bolted on that you'll just have to strip out later. Create a super fast, beautiful landing page from a barebones template with a single page that already looks good.
9+
10+
## Prerequisites
11+
12+
If you do not have the Gatsby CLI installed yet, do it first.
13+
14+
```bash
15+
npm install --global gatsby-cli
16+
```
17+
18+
The Gatsby CLI uses Node and npm which you will also need installed. More information can be found on [GatsbyJS.org](https://www.gatsbyjs.org/tutorial/part-one/).
19+
20+
## 🚀 Getting Started
21+
22+
Install the starter using the Gatsby new command.
23+
24+
```bash
25+
gatsby new landing-page https://github.com/gillkyle/gatsby-starter-landing-page.git
26+
```
27+
28+
Navigate into the project directory and launch the site.
29+
30+
```bash
31+
cd landing-page && gatsby develop
32+
```
33+
34+
The site will be opened up in your default browser on http://localhost:8000
35+
36+
Edit code in the `/src`, save your changes, and they'll reload instantly in the browser.
37+
38+
## 🧐 What's inside?
39+
40+
The minimal landing page starter comes with a few plugins installed already, but it's main focus is on staying simple and looking clean. These things are included by default:
41+
42+
- 🖼 Gatsby Image: images added to the `src/images` folder are automatically optimized by the `gatsby-image` plugin and can be pulled into components with lazy loading and blur up effects
43+
- 📊 Analytics: add your Google Analytics tracking id to `gatsby-config.js` to automatically begin tracking visitors to the site
44+
- 🗺 Sitemap: any new pages added to the site are automically assembled together into a sitemap through `gatsby-plugin-sitemap`
45+
- 🎨 Color Theme: the `src/styles/constants.js` file contains a set of colors and default styles that are applied inline to components on the site that can be overriden with your own styles
46+
47+
## 🧪 Experiment
48+
49+
If you want to try playing with the source code in an online playground you can open the repo in Codesandox with this button.
50+
51+
[![Edit gatsby-starter-portfolio-cara](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/gillkyle/gatsby-starter-landing-page/tree/master/)
52+
53+
## 💫 Deploy
54+
55+
If you just want to see a site online real fast you can deploy a copy of the site to Netlify with this button.
56+
57+
[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/gillkyle/gatsby-starter-landing-page)
58+
59+
To create an optimized build of the site run this command
60+
61+
```bash
62+
gatsby build
63+
```
64+
65+
A `/public` folder will be assembled that can be deployed to a service like Netlify, Surge, GitHub Pages, AWS S3, Firebase hosting, or your own file server.

‎gatsby-config.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
module.exports = {
2+
siteMetadata: {
3+
title: `Starter Landing Page`,
4+
description: `A barebone landing page starter with some minimal styles.`,
5+
author: `@gillkyle`,
6+
siteUrl: `https://gatsby-starter-landing-page.netlify.com`,
7+
},
8+
plugins: [
9+
`gatsby-plugin-react-helmet`,
10+
`gatsby-transformer-sharp`,
11+
`gatsby-plugin-sharp`,
12+
`gatsby-plugin-sitemap`,
13+
{
14+
resolve: `gatsby-plugin-google-analytics`,
15+
options: {
16+
trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
17+
},
18+
},
19+
{
20+
resolve: `gatsby-source-filesystem`,
21+
options: {
22+
name: `images`,
23+
path: `${__dirname}/src/images`,
24+
},
25+
},
26+
],
27+
}

‎package.json

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "gatsby-starter-landing-page",
3+
"private": true,
4+
"description": "A simple starter to create a minimal landing page with Gatsby",
5+
"version": "0.1.0",
6+
"author": "Kyle Gill <[email protected]>",
7+
"dependencies": {
8+
"gatsby": "^2.1.37",
9+
"gatsby-image": "^2.0.34",
10+
"gatsby-plugin-google-analytics": "^2.0.17",
11+
"gatsby-plugin-react-helmet": "^3.0.10",
12+
"gatsby-plugin-sharp": "^2.0.29",
13+
"gatsby-plugin-sitemap": "^2.0.10",
14+
"gatsby-source-filesystem": "^2.0.27",
15+
"gatsby-transformer-sharp": "^2.1.17",
16+
"prop-types": "^15.7.2",
17+
"react": "^16.8.4",
18+
"react-dom": "^16.8.4",
19+
"react-helmet": "^5.2.0",
20+
"sharp": "^0.22.0"
21+
},
22+
"devDependencies": {
23+
"prettier": "^1.16.4"
24+
},
25+
"keywords": [
26+
"gatsby"
27+
],
28+
"license": "MIT",
29+
"scripts": {
30+
"build": "gatsby build",
31+
"develop": "gatsby develop",
32+
"format": "prettier --write src/**/*.{js,jsx}",
33+
"start": "npm run develop",
34+
"serve": "gatsby serve",
35+
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
36+
},
37+
"repository": {
38+
"type": "git",
39+
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
40+
},
41+
"bugs": {
42+
"url": "https://github.com/gatsbyjs/gatsby/issues"
43+
}
44+
}

‎src/components/button.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from "react"
2+
3+
import { COLORS, BORDER_RADIUS, GRADIENT } from "../styles/constants"
4+
import "../styles/button.css"
5+
6+
const Button = ({ children }) => (
7+
<button
8+
style={{
9+
padding: ".5rem 2.5rem",
10+
color: COLORS.lightWhite,
11+
fontWeight: 700,
12+
background: GRADIENT,
13+
borderRadius: BORDER_RADIUS,
14+
borderWidth: 0,
15+
cursor: "pointer",
16+
}}
17+
>
18+
{children}
19+
</button>
20+
)
21+
22+
export default Button

‎src/components/content.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from "react"
2+
3+
import feature from "../images/feature.png"
4+
import SectionHeader from "./section-header"
5+
import { COLORS } from "../styles/constants"
6+
7+
const Content = () => (
8+
<div style={{ padding: "4rem 1rem", textAlign: "center" }}>
9+
<SectionHeader
10+
title="Minimal Features"
11+
description="Don't spend time ripping out unneeded plugins and bloat."
12+
/>
13+
<content
14+
style={{
15+
display: "grid",
16+
alignItems: "center",
17+
justifyContent: "center",
18+
gridTemplateColumns: "repeat(auto-fit, minmax(240px, 340px))",
19+
}}
20+
>
21+
<div>
22+
<h3>What you need to Start</h3>
23+
<p style={{ color: COLORS.gray }}>
24+
Includes plugins for analytics, building sitemaps, and optimizing
25+
images
26+
</p>
27+
</div>
28+
<div>
29+
<img src={feature} alt="a blank card floating over colorful graphics" />
30+
</div>
31+
</content>
32+
</div>
33+
)
34+
35+
export default Content

‎src/components/cta.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react"
2+
3+
import Button from "../components/button"
4+
import SectionHeader from "./section-header"
5+
6+
const CallToAction = () => (
7+
<div style={{ padding: "4rem 1rem", textAlign: "center" }}>
8+
<SectionHeader
9+
title="Stay Updated"
10+
description="Give a final call to action because that's what the cool kids are doing."
11+
/>
12+
<Button>Get Early Access</Button>
13+
</div>
14+
)
15+
16+
export default CallToAction

‎src/components/footer.js

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from "react"
2+
import PropTypes from "prop-types"
3+
4+
import { COLORS } from "../styles/constants"
5+
6+
const Footer = ({ siteTitle }) => (
7+
<footer
8+
style={{
9+
padding: "1rem",
10+
backgroundColor: COLORS.lightGray,
11+
}}
12+
>
13+
<div
14+
style={{
15+
display: "grid",
16+
alignItems: "center",
17+
justifyContent: "space-between",
18+
gridTemplateColumns: "repeat(auto-fit, minmax(200px, 240px))",
19+
padding: "1rem 2rem",
20+
fontSize: ".85rem",
21+
}}
22+
>
23+
<div style={{ color: COLORS.blue, fontWeight: 700 }}>
24+
<a
25+
style={{ textDecoration: "none" }}
26+
href="https://github.com/gillkyle/gatsby-starter-landing-page"
27+
>
28+
Contact Us
29+
</a>
30+
</div>
31+
<div style={{ color: COLORS.gray }}>
32+
© {new Date().getFullYear()}
33+
{` `}
34+
{siteTitle}
35+
</div>
36+
</div>
37+
</footer>
38+
)
39+
40+
Footer.propTypes = {
41+
siteTitle: PropTypes.string,
42+
}
43+
44+
Footer.defaultProps = {
45+
siteTitle: ``,
46+
}
47+
48+
export default Footer

0 commit comments

Comments
 (0)