webdev.rip/app/head.mjs at main · brianleroux/webdev.rip · GitHub

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
131
132
133
134
135
let css = `
:root {
  --foreground: #212529;
  --background: #f8f9fa;
  --link: #0b7285;
  --accent: #868e96;
  --accent2: #ccc;
  --token-keyword: #cc99cd;
  --token-string: #7ec699;
}

@media (prefers-color-scheme: dark) {
	:root {
    --foreground: #eee;
    --background: #222;
    --link: #99e9f2;
    --accent: #ced4da;
    --accent2: #666;
    --token-keyword: #c046c1;
    --token-string: #388354;
	}
}

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  /*font-size: 120%;*/
  color: var(--foreground);
  background: var(--background);
}

header nav {
  display: flex;
}

header nav a {
  display: block;
  text-decoration: none;
  margin-right: .71em;
}

header nav a:hover {
  text-decoration: underline;
}

header nav a:first-child {
  font-weight: bolder;
}

h1, h2, h3, h4, h5, h6 {
  font-family: serif;
  margin: 1rem 0;
}

h2 {
  margin: 2rem 0 0 0 ;
}

p, li {
  line-height: 160%;
}

header, main, footer {
  max-width: 60em;
  margin: 2em auto;
  padding: 0 1em;
}

header {
  margin-top: 4em;
}

footer p {
  margin-top: 5em;
  font-size: 90%;
  text-align: center;
}

a:link { color: var(--link); }
a:visited { color: var(--link); }
a:hover { color: var(--link); }
a:active { color: var(--link); }

hr {
  border: 0;
  height: 1px;
  background: #333;
  margin: 2em 0;
}

img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

table {
  border-collapse: collapse;
}

td, th {
  padding: .75em;
  text-align: left;
  border: 1px solid var(--accent);
}
`

export default function head (req) {
  let og = req.store.note? req.store.link.replace('notes', 'og-img') : '/_public/og-image-default.jpg'
  let link = req.store.note? req.store.link : (req.req.path || '')
  return `<!DOCTYPE html>
<html lang="en">
<head>
  <title>webdev.rip</title>

  <link rel=apple-touch-icon sizes=180x180 href=/_public/apple-touch-icon.png>
  <link rel=icon type=image/png sizes=32x32 href=/_public/favicon-32x32.png>
  <link rel=icon type=image/png sizes=16x16 href=/_public/favicon-16x16.png>
  <link rel=manifest href=/_public/site.webmanifest>
  <link rel=webmention href=/webmention>

  <meta name=viewport content="width=device-width, initial-scale=1">
  <meta name=description content="Musings about webdev.">
  <meta property=og:title content="webdev.rip - a web developers blog by Brian LeRoux">
  <meta property=og:type content=website>
  <meta property=og:url content=https://webdev.rip${ link }>
  <meta property=og:image content=https://webdev.rip${ og }>

  <style>${css}</style>
</head>`
}