Skip to content

Commit

Permalink
Contact Page
Browse files Browse the repository at this point in the history
  • Loading branch information
v4iv committed Apr 2, 2018
1 parent 2be494d commit 1b0e9da
Show file tree
Hide file tree
Showing 20 changed files with 242 additions and 147 deletions.
25 changes: 11 additions & 14 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,18 @@ A [Gatsby](https://www.gatsbyjs.org/) and [Netlify CMS](https://www.netlifycms.o

It follows the [JAMstack architecture](https://jamstack.org) by using Git as a single source of truth, and [Netlify](https://www.netlify.com) for continuous deployment, and CDN distribution.

## Demo
[Gatsby Starter Business](https://gatsby-starter-business.netlify.com)

## Features
- Contains Home Page, About Page, Pricing Page, Contact Page and Blog
- Netlify CMS for Content Management
- SEO
- Uses Bulma for styling
- Progressive Web App
- Auto generated Sitemap.xml
- Tags for Blog Post
- Disqus Support
- Google Tag Manager Support
- Sass
- Offline
- RSS Feed
* Complete Business Website Suite - Home Page, About Page, Pricing Page, Contact Page and Blog
* Netlify CMS for Content Management
* SEO Friendly (Sitemap, Schemas, Meta Tags, GTM etc)
* Bulma and Sass Support for styling
* Progressive Web App & Offline Support
* Tags and RSS Feed for Blog
* Disqus and Share Support

## TODO
- Pagination
- Search
- Pagination for Blog (gatsby-paginate)
- Search (@andrew-codes/gatsby-plugin-elasticlunr-search)
10 changes: 0 additions & 10 deletions gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
const _ = require('lodash');
const path = require('path');
const { createFilePath } = require('gatsby-source-filesystem');
// const createPaginatedPages = require("gatsby-paginate");


exports.createPages = ({ boundActionCreators, graphql }) => {
Expand Down Expand Up @@ -88,12 +87,3 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
})
}
};

// createPaginatedPages({
// edges: result.data.posts.edges,
// createPage: createPage,
// pageTemplate: "src/templates/blog-page.js",
// pageLength: 5,
// pathPrefix: "blog",
// buildPath: (index, pathPrefix) => index > 1 ? `${pathPrefix}/${index}` : `/${pathPrefix}` // This is optional and this is the default
// }}
2 changes: 1 addition & 1 deletion meta/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
module.exports = {
siteTitle: "Gatsby Starter Business", // Site title.
siteTitleAlt: "Gatsby Business", // Alternative site title for SEO.
siteTitleAlt: "Business", // Alternative site title for SEO.
siteLogo: "/logos/logo-512x512.png", // Logo used for SEO and manifest.
siteUrl: "https://gatsby-starter-business.netlify.com", // Domain of your website without pathPrefix.
pathPrefix: "/", // Prefixes all links. For cases when deployed to example.github.io/gatsby-starter-business/.
Expand Down
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
"bulma": "^0.6.2",
"gatsby": "^1.9.241",
"gatsby-link": "^1.6.39",
"gatsby-paginate": "^1.0.13",
"gatsby-plugin-feed": "^1.3.20",
"gatsby-plugin-google-tagmanager": "^1.0.17",
"gatsby-plugin-manifest": "^1.0.15",
Expand Down
2 changes: 2 additions & 0 deletions src/cms/cms.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,11 @@ import HomePagePreview from "./preview-templates/HomePagePreview";
import AboutPagePreview from './preview-templates/AboutPagePreview';
import ArticlePreview from './preview-templates/ArticlePreview';
import PricingPagePreview from './preview-templates/PricingPagePreview';
import ContactPagePreview from "./preview-templates/ContactPagePreview";

CMS.registerPreviewStyle('/styles.css');
CMS.registerPreviewTemplate('home', HomePagePreview);
CMS.registerPreviewTemplate('about', AboutPagePreview);
CMS.registerPreviewTemplate('pricing', PricingPagePreview);
CMS.registerPreviewTemplate('contact', ContactPagePreview);
CMS.registerPreviewTemplate('blog', ArticlePreview);
30 changes: 30 additions & 0 deletions src/cms/preview-templates/ContactPagePreview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/**
* Created by vaibhav on 2/4/18
*/
import React from 'react'
import PropTypes from 'prop-types'
import { ContactPageTemplate } from '../../templates/contact-page'

const ContactPagePreview = ({ entry, getAsset }) => {
const entryContacts = entry.getIn(['data', 'contacts']);
const contacts = entryContacts ? entryContacts.toJS() : [];

return (
<ContactPageTemplate
title={entry.getIn(['data', 'title'])}
subtitle={entry.getIn(['data', 'subtitle'])}
meta_title={entry.getIn(['data', 'meta_title'])}
meta_description={entry.getIn(['data', 'meta_description'])}
contacts={contacts}
/>
)
};

ContactPagePreview.propTypes = {
entry: PropTypes.shape({
getIn: PropTypes.func,
}),
getAsset: PropTypes.func,
};

export default ContactPagePreview;
24 changes: 24 additions & 0 deletions src/components/Contact/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/**
* Created by vaibhav on 2/4/18
*/
import React from 'react';
import PropTypes from 'prop-types';

const Contact = ({email, description}) => {
return (
<div
className="content"
style={{border: '1px solid #eaecee', padding: '2em 4em'}}>
<p><a href={`mailto:${email}`}>{email}</a></p>
<p>{description}</p>
</div>
);
};

Contact.propTypes = {
email: PropTypes.string.isRequired,
description: PropTypes.string,
};


export default Contact
39 changes: 39 additions & 0 deletions src/components/PostCard/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* Created by vaibhav on 2/4/18
*/
import React from 'react'
import Link from 'gatsby-link'

const PostCard = ({posts}) => {
return (
<div className="container">
{posts
.filter(post => post.node.frontmatter.templateKey === 'article-page')
.map(({node: post}) => (
<div
className="content"
style={{border: '1px solid #eaecee', padding: '2em 4em'}}
key={post.id}
>
<p>
<Link className="has-text-primary" to={post.fields.slug}>
{post.frontmatter.title}
</Link>
<span> &bull; </span>
<small>{post.frontmatter.date}</small>
</p>
<p>
{post.excerpt}
<br/>
<br/>
<Link className="button is-small" to={post.fields.slug}>
Keep Reading →
</Link>
</p>
</div>
))}
</div>
);
};

export default PostCard
33 changes: 4 additions & 29 deletions src/pages/blog/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
*/
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import Link from 'gatsby-link'

import Helmet from 'react-helmet'
import Share from "../../components/Share";
import PostCard from "../../components/PostCard";

export default class BlogPage extends Component {
render() {
Expand Down Expand Up @@ -33,33 +33,7 @@ export default class BlogPage extends Component {
</div>
</section>
<section className="section">
<div className="container">
{posts
.filter(post => post.node.frontmatter.templateKey === 'article-page')
.map(({node: post}) => (
<div
className="content"
style={{border: '1px solid #eaecee', padding: '2em 4em'}}
key={post.id}
>
<p>
<Link className="has-text-primary" to={post.fields.slug}>
{post.frontmatter.title}
</Link>
<span> &bull; </span>
<small>{post.frontmatter.date}</small>
</p>
<p>
{post.excerpt}
<br/>
<br/>
<Link className="button is-small" to={post.fields.slug}>
Keep Reading →
</Link>
</p>
</div>
))}
</div>
<PostCard posts={posts}/>
</section>
</div>
)
Expand All @@ -86,6 +60,7 @@ export const blogPageQuery = graphql`
}
frontmatter {
title
cover
templateKey
date(formatString: "MMMM DD, YYYY")
}
Expand Down
20 changes: 20 additions & 0 deletions src/pages/contact/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
templateKey: 'contact-page'
title: Contact Us
subtitle: We'd Love To Help You, Feel Free To Drop A Mail
meta_title: Contact Us | Gatsby Starter Business
meta_description: >-
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis
consectetur purus sit amet fermentum.
contacts:
- email: support@lorem.com
description: >-
Donec scelerisque magna nec condimentum porttitor. Aliquam vel diam sed diam luctus pretium.
Sed quis egestas libero. Vestibulum nec venenatis ligula.
- email: contact@lorem.com
description: >-
Fusce porttitor vulputate enim, nec blandit magna gravida et. Etiam et dignissim ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
---
78 changes: 0 additions & 78 deletions src/templates/blog-page.js

This file was deleted.

Loading

0 comments on commit 1b0e9da

Please sign in to comment.