m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-01-05 11:25:00 +01:00
Code Releases Activity

Home refactor

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-11-10 15:29:23 +01:00
parent b11367fcc2
commit 3ff8e67fac
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 59 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
gatsby-node.js
View File

@ -26,6 +26,13 @@ function truncate(n, useWordBoundary) {
// //
// Get GitHub repos // Get GitHub repos
// //
const gitHubConfig = {
headers: {
'User-Agent': 'kremalicious/portfolio',
Authorization: `token ${process.env.GITHUB_TOKEN}`
}
}
async function getGithubRepos(data) { async function getGithubRepos(data) {
let repos = [] let repos = []
let holder = {} let holder = {}
@ -35,12 +42,7 @@ async function getGithubRepos(data) {
const repoName = item.split('/')[1] const repoName = item.split('/')[1]
const repo = await axios.get( const repo = await axios.get(
`https://api.github.com/repos/${user}/${repoName}`, `https://api.github.com/repos/${user}/${repoName}`,
{ gitHubConfig
headers: {
'User-Agent': 'kremalicious/portfolio',
Authorization: `token ${process.env.GITHUB_TOKEN}`
}
}
) )
holder.name = repo.data.name holder.name = repo.data.name

1
package.json
View File

@ -51,6 +51,7 @@
"remark": "^11.0.1", "remark": "^11.0.1",
"remark-html": "^10.0.0", "remark-html": "^10.0.0",
"remark-parse": "^7.0.1", "remark-parse": "^7.0.1",
"shortid": "^2.2.15",
"suncalc": "^1.8.0", "suncalc": "^1.8.0",
"vcf": "^2.0.6" "vcf": "^2.0.6"
}, },

89
src/pages/index.jsx
View File

@ -1,6 +1,7 @@
import React, { PureComponent } from 'react' import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Link, graphql } from 'gatsby' import { Link, graphql } from 'gatsby'
import shortid from 'shortid'
import SEO from '../components/atoms/SEO' import SEO from '../components/atoms/SEO'
import ProjectImage from '../components/atoms/ProjectImage' import ProjectImage from '../components/atoms/ProjectImage'
import { ReactComponent as Images } from '../images/images.svg' import { ReactComponent as Images } from '../images/images.svg'
@ -18,50 +19,60 @@ function getImageCount(images, slug) {
return array.length return array.length
} }
export default class Home extends PureComponent { Project.propTypes = {
static propTypes = { node: PropTypes.shape({
data: PropTypes.object.isRequired, slug: PropTypes.string.isRequired,
pageContext: PropTypes.object.isRequired title: PropTypes.string.isRequired,
} img: PropTypes.object.isRequired
}),
images: PropTypes.array.isRequired
}
render() { function Project({ node, images }) {
const { data, pageContext } = this.props const { slug, title, img } = node
const projects = data.allProjectsYaml.edges const imageCount = getImageCount(images, slug)
const images = data.projectImageFiles.edges
return ( return (
<> <article className={styles.project} key={slug}>
<SEO /> <Link to={slug}>
<h1 className={styles.title}>{title}</h1>
<ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
<div className={styles.projects}> {imageCount > 1 && (
{projects.map(({ node }) => { <small
const { slug, title, img } = node className={styles.imageCount}
const imageCount = getImageCount(images, slug) title={`${imageCount} project images`}
>
<Images /> {imageCount}
</small>
)}
</Link>
</article>
)
}
return ( Home.propTypes = {
<article className={styles.project} key={slug}> data: PropTypes.object.isRequired,
<Link to={slug}> pageContext: PropTypes.object.isRequired
<h1 className={styles.title}>{title}</h1> }
<ProjectImage fluid={img.childImageSharp.fluid} alt={title} />
{imageCount > 1 && ( export default function Home({ data, pageContext }) {
<small const projects = data.allProjectsYaml.edges
className={styles.imageCount} const images = data.projectImageFiles.edges
title={`${imageCount} project images`}
>
<Images /> {imageCount}
</small>
)}
</Link>
</article>
)
})}
</div>
<Repositories repos={pageContext.repos} /> return (
</> <>
) <SEO />
}
<div className={styles.projects}>
{projects.map(({ node }) => (
<Project key={shortid.generate()} node={node} images={images} />
))}
</div>
<Repositories repos={pageContext.repos} />
</>
)
} }
export const IndexQuery = graphql` export const IndexQuery = graphql`