1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-22 18:00:06 +01:00

goodies page

This commit is contained in:
Matthias Kretschmann 2018-09-13 21:51:13 +02:00
parent 837a27fa56
commit 505d7c08e7
Signed by: m
GPG Key ID: 606EEEF3C479A91F
8 changed files with 123 additions and 12 deletions

View File

@ -2,4 +2,4 @@
link: /photos
- title: Goodies
link: /tag/goodies
link: /goodies

View File

@ -204,6 +204,8 @@ const generateTagPages = (createPage, posts) => {
const tagList = Array.from(tagSet)
tagList.forEach(tag => {
if (tag === 'goodies') return
// Create tag pages
createPage({
path: `/tag/${tag}/`,

View File

@ -43,6 +43,7 @@
margin-bottom: $spacer * 20; // height of footer
position: relative;
z-index: 2;
min-height: 500px;
:global(.has-menu-open) & {
transform: translate3d(0, ($spacer * 5), 0);

View File

@ -35,7 +35,8 @@ const PostMeta = ({ post, meta }) => {
)}
</div>
{type && (
{type &&
type === 'photo' && (
<div className={styles.type}>
<Link to={`/${slugify(type)}s/`}>{type}s</Link>
</div>
@ -43,11 +44,15 @@ const PostMeta = ({ post, meta }) => {
{tags && (
<div className={styles.tags}>
{tags.map(tag => (
<Link key={tag} className={styles.tag} to={`/tag/${slugify(tag)}/`}>
{tags.map(tag => {
const to = tag === 'goodies' ? '/goodies' : `/tag/${slugify(tag)}/`
return (
<Link key={tag} className={styles.tag} to={to}>
{tag}
</Link>
))}
)
})}
</div>
)}
</footer>

View File

@ -64,9 +64,14 @@
}
}
.tags {
margin-top: $spacer / 2;
}
.tag {
color: $text-color;
margin-right: 5px;
margin-left: $spacer / 2;
margin-right: $spacer / 2;
&::before {
color: $brand-grey-dimmed;

69
src/pages/goodies.jsx Normal file
View File

@ -0,0 +1,69 @@
import React from 'react'
import PropTypes from 'prop-types'
import { graphql, Link } from 'gatsby'
import Layout from '../components/Layout'
import Image from '../components/atoms/Image'
import styles from './goodies.module.scss'
const Goodies = ({ data, location }) => {
const edges = data.goodies.edges
const GoodiesThumbs = edges.map(({ node }) => {
const { title, image } = node.frontmatter
const { slug } = node.fields
return (
<article className={styles.goodie} key={node.id}>
{image && (
<Link to={slug}>
<h1 className={styles.title}>{title}</h1>
<figure className={styles.image}>
<Image fluid={image.childImageSharp.fluid} alt={title} />
</figure>
</Link>
)}
</article>
)
})
return (
<Layout location={location}>
<h1 className={styles.pageTitle}>Goodies</h1>
<section className={styles.goodies}>{GoodiesThumbs}</section>
</Layout>
)
}
Goodies.propTypes = {
location: PropTypes.object.isRequired,
data: PropTypes.object
}
export default Goodies
export const goodiesQuery = graphql`
query {
goodies: allMarkdownRemark(
filter: { frontmatter: { tags: { eq: "goodies" } } }
sort: { order: DESC, fields: [fields___date] }
) {
edges {
node {
id
frontmatter {
title
image {
childImageSharp {
...ImageFluid
}
}
}
fields {
slug
}
}
}
}
}
`

View File

@ -0,0 +1,28 @@
@import 'variables';
@import 'mixins';
.image {
@include breakoutviewport;
max-width: none;
}
.goodie {
margin-bottom: $spacer * 4;
a {
display: block;
}
}
.pageTitle {
composes: archiveTitle from '../templates/Posts.module.scss';
margin-bottom: $spacer * 2;
}
.title {
font-size: $font-size-h3;
color: $brand-grey;
margin-top: 0;
margin-bottom: $spacer;
}

View File

@ -1,3 +1,4 @@
@import 'variables';
@import 'mixins';
.photos {