Skip to content

Commit

Permalink
Merge pull request #169 from ZoltanVeres/kaldi-indexpage-improvements
Browse files Browse the repository at this point in the history
Kaldi indexpage improvements
  • Loading branch information
ZoltanVeres committed Feb 15, 2019
2 parents 208880e + de2a997 commit b3f92f2
Show file tree
Hide file tree
Showing 26 changed files with 986 additions and 318 deletions.
7 changes: 4 additions & 3 deletions gatsby-config.js
@@ -1,7 +1,8 @@
module.exports = {
siteMetadata: {
title: 'Gatsby + Netlify CMS Starter',
description: 'This repo contains an example business website that is built with Gatsby, and Netlify CMS.It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.',
description:
'This repo contains an example business website that is built with Gatsby, and Netlify CMS.It follows the JAMstack architecture by using Git as a single source of truth, and Netlify for continuous deployment, and CDN distribution.',
},
plugins: [
'gatsby-plugin-react-helmet',
Expand Down Expand Up @@ -53,8 +54,8 @@ module.exports = {
resolve: 'gatsby-remark-copy-linked-files',
options: {
destinationDir: 'static',
}
}
},
},
],
},
},
Expand Down
2 changes: 2 additions & 0 deletions src/cms/cms.js
Expand Up @@ -3,7 +3,9 @@ import CMS from 'netlify-cms'
import AboutPagePreview from './preview-templates/AboutPagePreview'
import BlogPostPreview from './preview-templates/BlogPostPreview'
import ProductPagePreview from './preview-templates/ProductPagePreview'
import IndexPagePreview from './preview-templates/IndexPagePreview'

CMS.registerPreviewTemplate('index', IndexPagePreview)
CMS.registerPreviewTemplate('about', AboutPagePreview)
CMS.registerPreviewTemplate('products', ProductPagePreview)
CMS.registerPreviewTemplate('blog', BlogPostPreview)
44 changes: 44 additions & 0 deletions src/cms/preview-templates/IndexPagePreview.js
@@ -0,0 +1,44 @@
import React from 'react'
import PropTypes from 'prop-types'
import { IndexPageTemplate } from '../../templates/index-page'

const IndexPagePreview = ({ entry, getAsset }) => {
const entryBlurbs = entry.getIn(['data', 'intro', 'blurbs'])
const blurbs = entryBlurbs ? entryBlurbs.toJS() : []

return (
<IndexPageTemplate
image={entry.getIn(['data', 'image'])}
title={entry.getIn(['data', 'title'])}
heading={entry.getIn(['data', 'heading'])}
subheading = {entry.getIn(['data', 'subheading'])}
description={entry.getIn(['data', 'description'])}
intro={{ blurbs }}
main={{
heading: entry.getIn(['data', 'main', 'heading']),
description: entry.getIn(['data', 'main', 'description']),
mainpitch: {
title: entry.getIn(['data','mainpitch', 'title']),
description: entry.getIn(['data','mainpitch', 'description'])
},
image1: {
image: getAsset(entry.getIn(['data', 'main', 'image1', 'image'])),
alt: entry.getIn(['data', 'main', 'image1', 'alt']),
},
image2: {
image: getAsset(entry.getIn(['data', 'main', 'image2', 'image'])),
alt: entry.getIn(['data', 'main', 'image2', 'alt']),
},
}}
/>
)
}

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

export default IndexPagePreview
80 changes: 80 additions & 0 deletions src/components/BlogRoll.js
@@ -0,0 +1,80 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Link, graphql, StaticQuery } from 'gatsby'

class BlogRoll extends React.Component {

render() {
const { data } = this.props
const { edges: posts } = data.allMarkdownRemark

return (
<div className="columns is-multiline">
{posts && (posts
.map(({ node: post }) => (
<div
className="is-parent column is-6"
key={post.id}
>
<article class="tile is-child box notification">
<p>
<Link className="title has-text-primary is-size-4" to={post.fields.slug}>
{post.frontmatter.title}
</Link>
<span> &bull; </span>
<p className="subtitle is-size-5">{post.frontmatter.date}</p>
</p>
<p>
{post.excerpt}
<br />
<br />
<Link className="button" to={post.fields.slug}>
Keep Reading →
</Link>
</p>
</article>
</div>
)))}
</div>
);
}
}

BlogRoll.propTypes = {
data: PropTypes.shape({
allMarkdownRemark: PropTypes.shape({
edges: PropTypes.array,
}),
}),
}

export default () => (
<StaticQuery
query={graphql`
query BlogRollQuery {
allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] },
filter: { frontmatter: { templateKey: { eq: "blog-post" } }}
) {
edges {
node {
excerpt(pruneLength: 400)
id
fields {
slug
}
frontmatter {
title
templateKey
date(formatString: "MMMM DD, YYYY")
}
}
}
}
}
`}
render={(data, count) => (
<BlogRoll data={data} count={count} />
)}
/>
)
105 changes: 105 additions & 0 deletions src/components/Footer.js
@@ -0,0 +1,105 @@
import React from 'react'
import { Link } from 'gatsby'

import logo from '../img/logo.svg'
import facebook from '../img/social/facebook.svg'
import instagram from '../img/social/instagram.svg'
import twitter from '../img/social/twitter.svg'
import vimeo from '../img/social/vimeo.svg'

const Footer = class extends React.Component {
render() {
return (
<footer className="footer has-background-black has-text-white-ter">
<div className="content has-text-centered">
<img
src={logo}
alt="Kaldi"
style={{ width: '14em', height: '10em' }}
/>
</div>
<div className="content has-text-centered has-background-black has-text-white-ter">
<div className="container has-background-black has-text-white-ter">
<div className="columns">
<div className="column is-4">
<section className="menu">
<ul className="menu-list">
<li><Link to="/" className="navbar-item">Home</Link></li>
<li><Link className="navbar-item" to="/about">About</Link></li>
<li><Link className="navbar-item" to="/products">
Products
</Link>
</li>
<li>
<Link className="navbar-item" to="/contact/examples">
Form Examples
</Link>
</li>
<li><a
className="navbar-item"
href="/admin/"
target="_blank"
rel="noopener noreferrer"
>
Admin
</a></li>
</ul>
</section>
</div>
<div className="column is-4">
<section>
<ul className="menu-list">
<li>
<Link className="navbar-item" to="/blog">
Latest Stories
</Link>
</li>
<li>
<Link className="navbar-item" to="/contact">
Contact
</Link>
</li>
</ul>
</section>
</div>
<div className="column is-4 social">

<a title="facebook" href="https://facebook.com">
<img
src={facebook}
alt="Facebook"
style={{ width: '1em', height: '1em' }}
/>
</a>
<a title="twitter" href="https://twitter.com">
<img
className="fas fa-lg"
src={twitter}
alt="Twitter"
style={{ width: '1em', height: '1em' }}
/>
</a>
<a title="instagram" href="https://instagram.com">
<img
src={instagram}
alt="Instagram"
style={{ width: '1em', height: '1em' }}
/>
</a>
<a title="vimeo" href="https://vimeo.com">
<img
src={vimeo}
alt="Vimeo"
style={{ width: '1em', height: '1em' }}
/>
</a>
</div>
</div>
</div>
</div>
</footer>
)
}
}

export default Footer
54 changes: 39 additions & 15 deletions src/components/Layout.js
@@ -1,43 +1,67 @@
import React from 'react'
import Helmet from 'react-helmet'
import { StaticQuery, graphql } from "gatsby"
import { StaticQuery, graphql } from 'gatsby'

import Navbar from '../components/Navbar'
import Footer from '../components/Footer'

import './all.sass'

const TemplateWrapper = ({ children }) => (
<StaticQuery
query={graphql`
query HeadingQuery {
site {
siteMetadata {
title,
description,
}
site {
siteMetadata {
title
description
}
}
}
`}
render={data => (
<div>
<Helmet>
<html lang="en" />
<title>{data.site.siteMetadata.title}</title>
<meta name="description" content={data.site.siteMetadata.description} />

<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png" />
<link rel="icon" type="image/png" href="/img/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/img/favicon-16x16.png" sizes="16x16" />

<link rel="mask-icon" href="/img/safari-pinned-tab.svg" color="#ff4400" />
<meta name="theme-color" content="#fff" />
<meta
name="description"
content={data.site.siteMetadata.description}
/>

<link
rel="apple-touch-icon"
sizes="180x180"
href="/img/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
href="/img/favicon-32x32.png"
sizes="32x32"
/>
<link
rel="icon"
type="image/png"
href="/img/favicon-16x16.png"
sizes="16x16"
/>

<link
rel="mask-icon"
href="/img/safari-pinned-tab.svg"
color="#ff4400"
/>
<meta name="theme-color" content="#fff" />

<meta property="og:type" content="business.business" />
<meta property="og:type" content="business.business" />
<meta property="og:title" content={data.site.siteMetadata.title} />
<meta property="og:url" content="/" />
<meta property="og:image" content="/img/og-image.jpg" />
</Helmet>
<Navbar />
<div>{children}</div>
<Footer />
</div>
)}
/>
Expand Down

0 comments on commit b3f92f2

Please sign in to comment.