-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
101 lines (92 loc) · 3.1 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import React from "react";
import ReactMarkdown from 'react-markdown/with-html'
import { useStaticQuery } from "gatsby"
export default function IndexPage() {
const data = useStaticQuery(
graphql`
query MyQuery {
allGithubData {
nodes {
data {
user {
repositories {
nodes {
description
forkCount
id
name
openGraphImageUrl
updatedAt(fromNow: true)
url
primaryLanguage {
name
}
languages {
nodes {
name
}
}
readme {
text
}
stargazers {
totalCount
}
}
}
}
}
}
}
}
`
)
const repos = data.allGithubData.nodes[0].data.user.repositories.nodes
console.log(repos)
return (
<div style={{ maxWidth: '80%', margin: 'auto', fontFamily: 'Arial' }}>
<h1>Projects</h1>
<h2>Github Repos</h2>
<div >
</div>
<ul style={{ listStyle: 'none' }}>
{
repos.map(repo =>
<li key={repo.id}>
<div style={{ border: '1px solid gray', margin: '10px', padding: '10px' }}>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
<div style={{ flexBasis: '80%' }}>
<div style={{ fontWeight: 'bold' }}>
<a href={repo.url} target="_blank" rel="noreferrer">
{repo.name}
</a>
</div>
<div style={{ fontSize: '0.875rem' }}>
{repo.description}
</div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', fontSize: '0.75rem' }}>
<span style={{ marginRight: '1rem' }}>{repo.forkCount} 🍴</span>
<span style={{ marginRight: '1rem' }}>{repo.stargazers.totalCount} ⭐</span>
<span style={{ marginRight: '1rem' }}>Updated {repo.updatedAt}</span>
<span>{repo.primaryLanguage.name}</span>
</div>
</div>
<div style={{ flexBasis: '20%' }}>
<img src={repo.openGraphImageUrl} width="100" />
</div>
</div>
{
repo.readme &&
<div style={{ maxHeight: '200px', overflow: 'auto', border: '1px dashed gray', margin: '1rem', padding: '1rem' }}>
<ReactMarkdown source={repo.readme.text} escapeHtml={false} />
...
</div>
}
</div>
</li>
)
}
</ul>
</div >
);
}