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
tweaking
author
Andri Oskarsson
date
(Jul 26, 2019, 9:03 AM +0200)
commit
fbe78c8d
fbe78c8db3757583a783ab6ac95ea080fb161e98
parent
6cef2f78
6cef2f78497c1c95a62f33a2e7b6eb5091868349
+87
-86
+2
-65
theme/src/gatsby-plugin-theme-ui/index.js
+2
-65
theme/src/gatsby-plugin-theme-ui/index.js
···
1
-
/**
2
-
* This theme uses `theme-ui` under the hood.
3
-
* @see https://theme-ui.com/
4
-
* @see https://theme-ui.com/gatsby-plugin/
5
-
*/
6
-
export default {
7
-
colors: {
8
-
text: "#232129",
9
-
background: "#fff",
10
-
primary: "#639",
11
-
},
12
-
fonts: {
13
-
default:
14
-
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
15
-
},
16
-
fontSizes: [16, 18, 20, 22, 27, 36],
17
-
lineHeights: {
18
-
text: "1.45",
19
-
heading: "1.1",
20
-
},
21
-
sizes: {
22
-
container: 650,
23
-
},
24
-
styles: {
25
-
Layout: {
26
-
backgroundColor: "background",
27
-
color: "text",
28
-
fontFamily: "default",
29
-
fontSize: 1,
30
-
lineHeight: "text",
31
-
},
32
-
Header: {
33
-
backgroundColor: "primary",
34
-
color: "background",
35
-
fontWeight: "bold",
36
-
margin: 0,
37
-
span: {
38
-
display: "block",
39
-
fontSize: 3,
40
-
margin: "0 auto",
41
-
maxWidth: "container",
42
-
padding: 3,
43
-
width: "90vw",
44
-
},
45
-
},
46
-
Main: {
47
-
margin: "0 auto",
48
-
maxWidth: "container",
49
-
width: "90vw",
50
-
},
51
-
Container: {
52
-
padding: 0,
53
-
paddingBottom: 3,
54
-
paddingTop: 3,
55
-
},
56
-
LinkItem: {
57
-
padding: 10,
58
-
},
59
-
h1: {
60
-
color: "text",
61
-
fontSize: 5,
62
-
lineHeight: "heading",
63
-
},
64
-
},
65
-
}
1
+
import { theme } from "../theme"
2
+
export default theme
+18
-9
theme/src/templates/links.js
+18
-9
theme/src/templates/links.js
···
30
30
href: e.href,
31
31
description: e.description,
32
32
tags: e.tags && e.tags.length > 0 && e.tags.split(" "),
33
+
time: e.time,
33
34
}
34
35
})
35
36
···
39
40
return children(combined.slice(0, 100))
40
41
}
41
42
42
-
const LinkItem = ({ title, href, tags }) => (
43
-
<li sx={{ marginBottom: 2 }}>
43
+
const LinkItem = ({ title, href, tags, time }) => (
44
+
<Styled.li sx={{ marginBottom: 2 }}>
44
45
<a sx={{}} href={href} target="_blank" rel="noopener noreferrer">
45
46
{title}
46
47
</a>
48
+
<div sx={{ fontSize: 16, color: "#aaa" }}>
49
+
<span sx={{ marginRight: 2 }}>{new Date(time).toLocaleDateString()}</span>
50
+
</div>
51
+
47
52
{tags ? (
48
-
<div sx={{ fontSize: 16 }}>
49
-
{tags.map(t => (
50
-
<span key={t} sx={{ marginRight: 2 }}>
51
-
{t}
52
-
</span>
53
-
))}
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>
54
62
</div>
55
63
) : null}
56
-
</li>
64
+
</Styled.li>
57
65
)
58
66
59
67
const LinksTemplate = () => {
···
69
77
title={n.description}
70
78
href={n.href}
71
79
tags={n.tags}
80
+
time={n.time}
72
81
key={n.id}
73
82
/>
74
83
))
-12
theme/src/templates/page.js
-12
theme/src/templates/page.js
···
1
-
import React from "react"
2
-
import { Styled } from "theme-ui"
3
-
import Layout from "../components/layout"
4
-
5
-
const PageTemplate = ({ pageContext }) => (
6
-
<Layout>
7
-
<Styled.h1>{pageContext.heading}</Styled.h1>
8
-
<div dangerouslySetInnerHTML={{ __html: pageContext.content }} />
9
-
</Layout>
10
-
)
11
-
12
-
export default PageTemplate
+67
theme/src/theme.js
+67
theme/src/theme.js
···
1
+
/**
2
+
* This theme uses `theme-ui` under the hood.
3
+
* @see https://theme-ui.com/
4
+
* @see https://theme-ui.com/gatsby-plugin/
5
+
*/
6
+
export const theme = {
7
+
colors: {
8
+
text: "#232129",
9
+
background: "#fff",
10
+
primary: "#639",
11
+
},
12
+
fonts: {
13
+
default:
14
+
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
15
+
},
16
+
fontSizes: [16, 18, 20, 22, 27, 36],
17
+
lineHeights: {
18
+
text: "1.45",
19
+
heading: "1.1",
20
+
},
21
+
sizes: {
22
+
container: 650,
23
+
},
24
+
styles: {
25
+
Layout: {
26
+
backgroundColor: "background",
27
+
color: "text",
28
+
fontFamily: "default",
29
+
fontSize: 1,
30
+
lineHeight: "text",
31
+
},
32
+
Header: {
33
+
backgroundColor: "primary",
34
+
color: "background",
35
+
fontWeight: "bold",
36
+
margin: 0,
37
+
span: {
38
+
display: "block",
39
+
fontSize: 3,
40
+
margin: "0 auto",
41
+
maxWidth: "container",
42
+
padding: 3,
43
+
width: "90vw",
44
+
},
45
+
},
46
+
Main: {
47
+
margin: "0 auto",
48
+
maxWidth: "container",
49
+
width: "90vw",
50
+
},
51
+
Container: {
52
+
padding: 0,
53
+
paddingBottom: 3,
54
+
paddingTop: 3,
55
+
},
56
+
LinkItem: {
57
+
padding: 10,
58
+
},
59
+
h1: {
60
+
color: "text",
61
+
fontSize: 5,
62
+
lineHeight: "heading",
63
+
},
64
+
},
65
+
}
66
+
67
+
export default theme