diff --git a/gatsby-node.js b/gatsby-node.js index 5fd1526..c42b4ef 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -1,7 +1,13 @@ +/* eslint-disable no-console */ + const path = require('path') const remark = require('remark') const markdown = require('remark-parse') const html = require('remark-html') +const axios = require('axios') +const fs = require('fs') +const yaml = require('js-yaml') +const reposYaml = yaml.load(fs.readFileSync('./content/repos.yml', 'utf8')) function truncate(n, useWordBoundary) { if (this.length <= n) { @@ -15,6 +21,30 @@ function truncate(n, useWordBoundary) { ) } +async function getGithubRepos(data) { + const allRepos = await axios.get( + `https://api.github.com/users/${data.user}/repos?per_page=100` + ) + const repos = allRepos.data + // filter by what's defined in content/repos.yml + .filter(({ name }) => data.repos.includes(name)) + // sort by pushed to, newest first + .sort((a, b) => b.pushed_at.localeCompare(a.pushed_at)) + + return repos +} + +let repos + +exports.onPreBootstrap = async () => { + try { + repos = await getGithubRepos(reposYaml[0]) + console.log(`success getGithubRepos: ${repos.length} repos`) + } catch (error) { + console.error(error.message) + } +} + exports.onCreateNode = ({ node, actions }) => { const { createNodeField } = actions @@ -53,6 +83,20 @@ exports.onCreateNode = ({ node, actions }) => { } } +exports.onCreatePage = async ({ page, actions }) => { + const { createPage } = actions + + // Add repos to front page's context + if (page.path === '/') + createPage({ + ...page, + context: { + ...page.context, + repos + } + }) +} + // // Create project pages from projects.yml // diff --git a/src/components/organisms/Repositories.jsx b/src/components/organisms/Repositories.jsx index 55e7c82..3535ffd 100644 --- a/src/components/organisms/Repositories.jsx +++ b/src/components/organisms/Repositories.jsx @@ -1,43 +1,20 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import axios from 'axios' + import Repository from '../molecules/Repository' import styles from './Repositories.module.scss' export default class Repositories extends PureComponent { static propTypes = { - user: PropTypes.string.isRequired, repos: PropTypes.array.isRequired } - state = { repos: [] } - - async componentDidMount() { - try { - const repos = await this.getGithubRepos(this.props.user) - this.setState({ repos }) - } catch (error) { - console.error(error.message) // eslint-disable-line - } - } - - async getGithubRepos(user) { - const allRepos = await axios.get( - `https://api.github.com/users/${user}/repos?per_page=100` - ) - const repos = allRepos.data - .filter(({ name }) => this.props.repos.includes(name)) - .sort((a, b) => b.pushed_at.localeCompare(a.pushed_at)) // sort by pushed to, newest first - - return repos - } - render() { return (

Open Source Projects

- {this.state.repos.map(repo => ( + {this.props.repos.map(repo => ( ))}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 0c85b1d..598b016 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -20,12 +20,13 @@ function getImageCount(images, slug) { export default class Home extends PureComponent { static propTypes = { - data: PropTypes.object, - location: PropTypes.object + data: PropTypes.object.isRequired, + pageContext: PropTypes.object.isRequired, + location: PropTypes.object.isRequired } render() { - const { data } = this.props + const { data, pageContext } = this.props const projects = data.allProjectsYaml.edges const images = data.projectImageFiles.edges @@ -58,7 +59,7 @@ export default class Home extends PureComponent { })} - + ) } @@ -91,10 +92,5 @@ export const IndexQuery = graphql` } } } - - reposYaml { - user - repos - } } `