andri.dk
[READ-ONLY] Mirror of https://github.com/andrioid/gatsby-theme-links. Turn your Gatsby site into a link-site, sourced from Github stars and Pinboard
gatsby-theme-links.netlify.com/links
3.0 kB
132 lines
1// import React from "react"
2import { graphql, useStaticQuery } from "gatsby"
3/** @jsx jsx */
4import { jsx, Styled } from "theme-ui"
5
6import Layout from "../components/layout"
7
8const LinkFormatter = ({ children }) => {
9 const data = useStaticQuery(query)
10
11 // Keeping Pinboards data model, adapting Github output
12 // Maybe move this into a custom resolver at some point
13 const gh = data.allGithubData.nodes[0] || []
14 const pb = data.allPinboardBookmark.nodes || []
15
16 const edges = gh.data.viewer.starredRepositories.edges
17 const ghItems = edges.map(e => {
18 return {
19 id: e.node.id,
20 href: e.node.url,
21 description: e.node.nameWithOwner,
22 tags: e.node.languages.edges.map(l => l.node.name.toLowerCase()),
23 time: e.starredAt,
24 }
25 })
26
27 const pbItems = pb.map(e => {
28 return {
29 id: e.id,
30 href: e.href,
31 description: e.description,
32 tags: e.tags && e.tags.length > 0 && e.tags.split(" "),
33 time: e.time,
34 }
35 })
36
37 const combined = [...ghItems, ...pbItems].sort((a, b) => {
38 return new Date(b.time) - new Date(a.time)
39 })
40 return children(combined.slice(0, 100))
41}
42
43const LinkItem = ({ title, href, tags, time }) => (
44 <Styled.li sx={{ marginBottom: 2 }}>
45 <a sx={{}} href={href} target="_blank" rel="noopener noreferrer">
46 {title}
47 </a>
48 <div sx={{ fontSize: 16, color: "#aaa" }}>
49 <span sx={{ marginRight: 2 }}>{new Date(time).toLocaleDateString()}</span>
50 </div>
51
52 {tags ? (
53 <div sx={{ fontSize: 16, color: "#aaa" }}>
54 <div>
55 tags:
56 {tags.map(t => (
57 <span key={t} sx={{ marginRight: 2 }}>
58 {t}
59 </span>
60 ))}
61 </div>
62 </div>
63 ) : null}
64 </Styled.li>
65)
66
67const LinksTemplate = () => {
68 return (
69 <Layout>
70 <h1>Links</h1>
71 <LinkFormatter>
72 {links => (
73 <Styled.ol>
74 {links
75 ? links.map((n, idx) => (
76 <LinkItem
77 title={n.description}
78 href={n.href}
79 tags={n.tags}
80 time={n.time}
81 key={n.id}
82 />
83 ))
84 : null}
85 </Styled.ol>
86 )}
87 </LinkFormatter>
88 </Layout>
89 )
90}
91
92const query = graphql`
93 query MyQuery {
94 allPinboardBookmark {
95 nodes {
96 id
97 href
98 description
99 tags
100 time
101 }
102 }
103 allGithubData {
104 nodes {
105 data {
106 viewer {
107 starredRepositories {
108 edges {
109 starredAt
110 node {
111 description
112 id
113 nameWithOwner
114 url
115 languages {
116 edges {
117 node {
118 name
119 }
120 }
121 }
122 }
123 }
124 }
125 }
126 }
127 }
128 }
129 }
130`
131
132export default LinksTemplate