-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.pug
130 lines (130 loc) · 5.42 KB
/
index.pug
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
doctype html
html(lang="en")
head
title Paper HN
meta(charset='utf-8')
meta(name="viewport" content="initial-scale=1")
style.
body {font-family: serif}
h1 {font-size: 300%; text-align: center; margin-bottom: 0.5em}
.mastspan {border-top: 1px solid black; border-bottom: 1px solid black; padding: 0.25em 0.5em; display: flex; justify-content: space-between}
progress {display: block; margin: 2em auto; width: 100%; max-width: 25em}
a:link, a:visited {text-decoration: none; color: inherit}
a:link:hover {text-decoration: underline}
main {margin: -2em auto 0}
.grid-item, .grid-sizer {width: 100%; max-width: 25em; margin: 2em}
@media screen and (max-width: 58em) {.grid-item, .grid-sizer {margin: 2em 0}}
main section {border-bottom: 1px solid black; padding-bottom: 2em; margin-bottom: 0 !important}
main section:nth-child(-n+3) {max-width: 54em}
main section:nth-child(-n+3) h2 {font-size: 220%}
main section:nth-child(-n+3) img {filter: none}
main section:nth-child(n+10) h2 {font-size: 120%}
main section img {max-width: 100%; filter: grayscale(100%); display: block; margin: 0 auto 0.5em}
main section:hover img {filter: none}
h2 {margin: 0 0 0.5em}
main section p {margin-top: 0.25em;}
p {margin: 0; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; word-break:break-word; hyphens: auto; text-align: justify}
.keyword {font-family: sans-serif}
.keyword a:link, .imprint a:link {text-decoration: underline}
.job {margin-top: 1em; padding-bottom: 1em}
.job p {font-size: 90%}
.imprint {margin-top: 2em}
.imprint p {border: 1px solid black; padding: 0.75em}
meta(property='og:url' content='https://www.wolfgangfaust.com/project/paper-hn/')
meta(property='og:title' content='Paper HN')
meta(property='og:description' content="Hacker News front page in the style of a print newspaper")
meta(property='og:image' content='https://www.wolfgangfaust.com/project/paper-hn/screenshot.png')
meta(name='twitter:card' content='summary_large_image')
meta(name='twitter:title' content='Paper HN')
meta(name='twitter:description' content="Hacker News front page in the style of a print newspaper")
meta(name='twitter:image' content='https://www.wolfgangfaust.com/project/paper-hn/screenshot.png')
body
header
h1: a(href='https://news.ycombinator.com') Hacker News
.mastspan
span No. #{Math.max(...stories.map(s => s.id))}
span #{date} UTC
.noscript This looks much nicer if you enable JavaScript.
main
- let imgcnt = 0
for story, idx in stories
section.grid-item
- if (story.image) imgcnt++
if story.image
img(src=story.image)
h2: a(href=story.url)=story.title
p
code=story.domain
!=' — '
=story.paragraph
=' '
strong.keyword
a(href='https://news.ycombinator.com/item?id='+story.id)=story.keyword
| , #{idx+1}
for job in jobs
section.grid-item.job
p
a(href=job.url) #[strong=job.title1] #{job.title2}
=' '
code=job.domain
footer.grid-item.imprint
p.
A project of #[a(href='https://www.wolfgangfaust.com') Wolfgang Faust]. 
Open source on GitHub as #[a(href='https://github.com/wolfgang42/paper-hn') wolfgang42/paper-hn]. 
Data from #[a(href='https://news.ycombinator.com') Hacker News]. 
Inspired by #[a(href='https://unim.press') The Unim.press].
.grid-sizer
script.
var main = document.querySelector('main')
document.querySelector('.noscript').remove()
main.style.display = 'none'
var progress = document.createElement('progress')
progress.innerText = 'Loading...'
document.body.append(progress)
script(src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js")
script(src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js")
script.
if (!window.imagesLoaded || !window.Masonry) {
// Libraries failed to load somehow
main.style.display = 'block'
progress.remove()
}
imagesLoaded(main, function() {
main.style.display = 'block'
var msnry = new Masonry(main, {
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
fitWidth: true,
gutter: 0,
transitionDuration: 0,
})
// Retrigger masonry after window resize
// I don't quite understand why this is necessary---masonry should be doing this already,
// and also it doesn't seem to work unless I introduce a considerable delay---but
// since this works I'm not going to spend any more time messing with it.
var rsevent = null
window.addEventListener('resize', function(event){
if (!rsevent) {
rsevent = window.setTimeout(function() {
msnry.layout()
console.log('resize')
rsevent = null
}, 200)
}
})
progress.remove()
})
// Matomo
script(type="text/javascript").
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//analytics.linestarve.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '10']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
noscript: p: img(src="//analytics.linestarve.com/matomo.php?idsite=10&rec=1" style="border:0;" alt="")