Added svg badges to projects that have them

This commit is contained in:
mitchelljfs 2018-07-21 19:23:58 -07:00
parent 65c1f85277
commit 34dba26cb3
4 changed files with 66 additions and 2 deletions

View File

@ -16,6 +16,7 @@ class Experience extends React.PureComponent<Props> {
constructor(props: Props) {
super(props)
this.listedBullets = this.props.bullets.map((bullet, index) => (
<li key={index}>{bullet}</li>
))

View File

@ -1,3 +1,8 @@
.project-badge {
display: inline-block;
margin: 3px 2px 0 2px;
}
.project-container {
border-bottom: 2px solid rgb(139, 191, 209);
flex: 1 0 45%;

View File

@ -1,5 +1,5 @@
// @flow
import React from "react"
import * as React from "react"
import ClearButton from "../../components/ClearButton"
@ -8,14 +8,28 @@ import "./index.css"
type Props = {
title: string,
children: string,
repoUrl: string
repoUrl: string,
badges: Array<{ imgUrl: string, linkUrl: string, alt: string }>
}
class Project extends React.PureComponent<Props> {
badges: Array<React.Element<string>>
constructor(props: Props) {
super(props)
this.badges = this.props.badges.map((badge, index) => (
<a className="project-badge" href={badge.linkUrl} key={index}>
<img src={badge.imgUrl} alt={badge.alt} />
</a>
))
}
render() {
return (
<div className="project-container">
<h4>{this.props.title}</h4>
{this.badges}
<p>{this.props.children}</p>
<ClearButton href={this.props.repoUrl}>Repository</ClearButton>
</div>

View File

@ -14,6 +14,20 @@ class Projects extends React.PureComponent<Props> {
<Project
title="mjfs.us"
repoUrl="https://github.com/mitchelljfs/react-website"
badges={[
{
imgUrl:
"https://travis-ci.org/mitchelljfs/react-website.svg?branch=master",
linkUrl: "https://travis-ci.org/mitchelljfs/react-website",
alt: "Travis Build Status"
},
{
imgUrl:
"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat",
linkUrl: "https://github.com/prettier/prettier",
alt: "Prettier Style"
}
]}
>
This website has taken many forms over the years, as my frontend and
design skills increase. It has been simple HTML, CSS, and JS, and a
@ -25,6 +39,34 @@ class Projects extends React.PureComponent<Props> {
<Project
title="lambdarouter"
repoUrl="https://github.com/mitchelljfs/lambdarouter"
badges={[
{
imgUrl:
"https://godoc.org/github.com/mitchelljfs/lambdarouter?status.svg",
linkUrl: "https://godoc.org/github.com/mitchelljfs/lambdarouter",
alt: "Go Doc"
},
{
imgUrl:
"https://travis-ci.org/mitchelljfs/lambdarouter.svg?branch=master",
linkUrl: "https://travis-ci.org/mitchelljfs/lambdarouter",
alt: "Build Status"
},
{
imgUrl:
"https://coveralls.io/repos/github/mitchelljfs/lambdarouter/badge.svg?branch=master",
linkUrl:
"https://coveralls.io/github/mitchelljfs/lambdarouter?branch=master",
alt: "Code Coverage"
},
{
imgUrl:
"https://goreportcard.com/badge/github.com/mitchelljfs/lambdarouter",
linkUrl:
"https://goreportcard.com/report/github.com/mitchelljfs/lambdarouter",
alt: "Code Coverage"
}
]}
>
This package will become a fully featured AWS Lambda function router,
able to respond to HTTP, Schedule, Cognito, and SNS events. It will
@ -36,6 +78,7 @@ class Projects extends React.PureComponent<Props> {
<Project
title="destinate"
repoUrl="https://github.com/mitchelljfs/destinate"
badges={[]}
>
destinate is a react-native, iOS (and Android) app. Its main objective
is to suggest places or activities to the user based on their past
@ -47,6 +90,7 @@ class Projects extends React.PureComponent<Props> {
<Project
title="sys-mgmt"
repoUrl="https://github.com/mitchelljfs/sys-mgmt"
badges={[]}
>
A minimal, cross-platform, unix-like-system management program. This
program is designed to detect which programs are affiliated with the