Skip to content

Commit 98b7df9

Browse files
tmmtmm
committed
feat: proxy styles
0 parents  commit 98b7df9

File tree

8 files changed

+173
-0
lines changed

8 files changed

+173
-0
lines changed

‎.github/README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Inspired by [Paco's](https://paco.sh) ["Custom CSS via Serverless Proxy"](https://paco.sh/blog/custom-css-via-proxy)
2+
3+
## Dev
4+
5+
```
6+
yarn
7+
yarn global add vercel
8+
vercel dev
9+
```

‎.gitignore

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# dependencies
2+
/node_modules
3+
/.pnp
4+
.pnp.js
5+
6+
# misc
7+
.DS_Store
8+
9+
# debug
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# tools
15+
.vercel

‎api/index.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const fetch = require('node-fetch')
2+
3+
module.exports = async (req, res) => {
4+
const url = req.url === "/" || req.url === "/index.html" ? "/articles.html" : req.url
5+
const html = (
6+
await (await fetch('http://paulgraham.com' + url)).text()
7+
).replace(
8+
'</head>',
9+
'<link media="all" href="/styles.css" rel="stylesheet" /><script src="/script.js"></script></head>'
10+
)
11+
12+
res.send(html)
13+
res.end()
14+
}

‎package.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "pg-essays",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"dependencies": {
6+
"node-fetch": "^2.6.1"
7+
}
8+
}

‎public/script.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
setTimeout(() => {
2+
const imageEl = document.querySelector("tr td table tbody tr td img")
3+
const titleEl = document.createElement("h1")
4+
titleEl.innerHTML = `<a href="http://paulgraham.com${window.location.pathname}">${imageEl.alt}</a>`
5+
imageEl.parentNode.replaceChild(titleEl, imageEl)
6+
}, 0)

‎public/styles.css

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
:root {
2+
--color-accent: hsl(19, 72%, 61%);
3+
--color-background: hsl(210, 5%, 8%);
4+
--color-body: hsl(210, 3%, 75%);
5+
--color-border: hsl(210, 3%, 30%);
6+
--color-muted: hsl(210, 3%, 50%);
7+
--container-width: 35rem;
8+
--font-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
9+
--font-size: 18px;
10+
--line-height: 1.7;
11+
}
12+
13+
::selection {
14+
background: var(--color-body);
15+
color: var(--color-background);
16+
}
17+
18+
html {
19+
background: var(--color-background);
20+
color: var(--color-body);
21+
font-family: var(--font-sans);
22+
font-size: var(--font-size);
23+
line-height: var(--line-height);
24+
text-rendering: optimizeLegibility;
25+
}
26+
27+
body {
28+
background: var(--color-background);
29+
margin-left: auto;
30+
margin-right: auto;
31+
margin-top: 3rem;
32+
max-width: var(--container-width);
33+
}
34+
35+
font {
36+
color: var(--color-body);
37+
font-family: var(--font-sans);
38+
font-size: var(--font-size);
39+
line-height: var(--line-height);
40+
}
41+
42+
a {
43+
background-image: linear-gradient(var(--color-border), var(--color-border));
44+
background-position: left bottom;
45+
background-repeat: no-repeat;
46+
background-size: 100% 1px;
47+
color: var(--color-body);
48+
text-decoration: none;
49+
}
50+
a:visited { color: var(--color-muted); }
51+
a:hover { color: var(--color-accent); }
52+
53+
u {
54+
text-decoration: none;
55+
}
56+
57+
hr {
58+
border-top: 1px solid var(--colors-border);
59+
}
60+
61+
/* Layout */
62+
body > table {
63+
display: flex;
64+
}
65+
66+
tr td:not(:last-child) {
67+
display: none;
68+
}
69+
70+
tr td:nth-child(3) {
71+
display: flex;
72+
flex-direction: column;
73+
}
74+
75+
tr td table {
76+
width: var(--container-width);
77+
}
78+
79+
/* Hide logo */
80+
a[href="index.html"] {
81+
display: none;
82+
max-width: max-content;
83+
}
84+
a[href="index.html"]:before {
85+
color: var(--color-muted);
86+
content: "Home";
87+
}
88+
img[src="https://sep.yimg.com/ca/I/paulgraham_2271_3232"] {
89+
display: none;
90+
}
91+
92+
/* Page titles */
93+
tr td table tbody tr td img {
94+
height: 3.45rem;
95+
opacity: 0;
96+
}
97+
98+
h1 {
99+
color: var(--color-body);
100+
font-size: 2rem;
101+
margin-bottom: 0;
102+
}
103+
104+
/* Bullet images */
105+
img[src="https://sep.yimg.com/ca/Img/trans_1x1.gif"] {
106+
display: none;
107+
}
108+
img[src="https://sep.yimg.com/ca/I/paulgraham_2272_1423"] {
109+
display: none;
110+
}

‎vercel.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"rewrites": [{ "source": "/(.*)", "destination": "/api" }]
3+
}

‎yarn.lock

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+
5+
node-fetch@^2.6.1:
6+
version "2.6.1"
7+
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
8+
integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==

0 commit comments

Comments
 (0)