├── .gitignore
├── Readme.md
├── package.json
├── pnpm-lock.yaml
├── src
    └── app.tsx
├── static
    ├── app.css
    ├── favicon.ico
    └── og
    │   └── card.png
└── util
    ├── build.mjs
    ├── handler.tsx
    ├── start-shim.ts
    └── start.mjs


/.gitignore:
--------------------------------------------------------------------------------
1 | .out
2 | node_modules
3 | .vercel
4 | 


--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
 1 | # Preact on the Edge
 2 | 
 3 | [`react-on-the-edge`](https://react-on-the-edge.vercel.app/) but on top of Preact. It uses `esbuild` for bundling and [Vercel Edge Functions](https://vercel.com/edge) for SSR.
 4 | 
 5 | This example is for framework builders and advanced usage of the low-level Vercel [Build Output API](https://vercel.com/docs/build-output-api/v3). If you're looking to develop a Preact application with dynamic Edge capabilities, we recommend [Next.js Middleware](https://nextjs.org/docs/advanced-features/middleware) and [Vercel Edge Functions](https://vercel.com/edge), with [`preact/compat`](https://preactjs.com/guide/v10/switching-to-preact).
 6 | 
 7 | ## How to use
 8 | 
 9 | Run `pnpm i` then:
10 | 
11 | - To build: `pnpm build`
12 | - To run a local server: `pnpm start`
13 | 
14 | After building, `.vercel/output` will be created which you can deploy via `vc --prebuilt`.
15 | 
16 | ## Architecture
17 | 
18 | - `util/build.mjs` implements the build process on top of `esbuild` that bundles `src/app` into an Edge Function.
19 | - `util/start.mjs` implements a local server using the `edge-runtime` package that can locally run the build outputs.
20 | 
21 | ## Developing
22 | 
23 | Due to the absence of a dev server, [`watchexec`](https://github.com/watchexec/watchexec) can be used as a replacement. Use `brew install watchexec` to install.
24 | 
25 | ```bash
26 | watchexec -c -r --no-meta 'node util/build.mjs; node util/start.mjs'
27 | ```
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "build": "node util/build.mjs",
 4 |     "start": "node util/start.mjs"
 5 |   },
 6 |   "devDependencies": {
 7 |     "bytes": "^3.1.2",
 8 |     "edge-runtime": "1.1.0-beta.7",
 9 |     "esbuild": "^0.14.54",
10 |     "ms": "^2.1.3",
11 |     "picocolors": "^1.0.0",
12 |     "preact": "^10.10.1",
13 |     "preact-render-to-string": "^5.2.1",
14 |     "sirv": "^2.0.2"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/pnpm-lock.yaml:
--------------------------------------------------------------------------------
  1 | lockfileVersion: 5.4
  2 | 
  3 | specifiers:
  4 |   bytes: ^3.1.2
  5 |   edge-runtime: 1.1.0-beta.7
  6 |   esbuild: ^0.14.54
  7 |   ms: ^2.1.3
  8 |   picocolors: ^1.0.0
  9 |   preact: ^10.10.1
 10 |   preact-render-to-string: ^5.2.1
 11 |   sirv: ^2.0.2
 12 | 
 13 | devDependencies:
 14 |   bytes: 3.1.2
 15 |   edge-runtime: 1.1.0-beta.7
 16 |   esbuild: 0.14.54
 17 |   ms: 2.1.3
 18 |   picocolors: 1.0.0
 19 |   preact: 10.10.1
 20 |   preact-render-to-string: 5.2.1_preact@10.10.1
 21 |   sirv: 2.0.2
 22 | 
 23 | packages:
 24 | 
 25 |   /@edge-runtime/format/1.0.0:
 26 |     resolution: {integrity: sha512-mxi0n00nJwnjaXUQIfTS7l64yvwGXs435gEjuDhzTHZyrmnCYdELXdJr3Q+6v4DO1mmmtNTYFHUvIlpCmMUC6g==}
 27 |     dev: true
 28 | 
 29 |   /@edge-runtime/primitives/1.1.0-beta.7:
 30 |     resolution: {integrity: sha512-ZwuSMpmrf2mAj/O7EWxKOXrC03YMkU64N+CgvVFOtJGfhydk4Db/392Zama3BjNYAMOr/oY9L7HxfPutAFesKw==}
 31 |     dev: true
 32 | 
 33 |   /@edge-runtime/vm/1.1.0-beta.7:
 34 |     resolution: {integrity: sha512-biH/Uxgql+PshksqThvCojd0luA9mnua3s8fvEeCwanPsNa0arajG7uwugNQ/7SOFTT0F/LY81wVZ89QFC2H4Q==}
 35 |     dependencies:
 36 |       '@edge-runtime/primitives': 1.1.0-beta.7
 37 |     dev: true
 38 | 
 39 |   /@esbuild/linux-loong64/0.14.54:
 40 |     resolution: {integrity: sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==}
 41 |     engines: {node: '>=12'}
 42 |     cpu: [loong64]
 43 |     os: [linux]
 44 |     requiresBuild: true
 45 |     dev: true
 46 |     optional: true
 47 | 
 48 |   /@polka/url/1.0.0-next.21:
 49 |     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
 50 |     dev: true
 51 | 
 52 |   /bytes/3.1.2:
 53 |     resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
 54 |     engines: {node: '>= 0.8'}
 55 |     dev: true
 56 | 
 57 |   /convert-hrtime/3.0.0:
 58 |     resolution: {integrity: sha512-7V+KqSvMiHp8yWDuwfww06XleMWVVB9b9tURBx+G7UTADuo5hYPuowKloz4OzOqbPezxgo+fdQ1522WzPG4OeA==}
 59 |     engines: {node: '>=8'}
 60 |     dev: true
 61 | 
 62 |   /edge-runtime/1.1.0-beta.7:
 63 |     resolution: {integrity: sha512-DrLuKeADNuQ5JN9+wl74tDwNOrTusEKL81lz3NRup1qV/sUml+517TUCw3O+h6RxDaTiEpMbAjds9fzbeas8eQ==}
 64 |     hasBin: true
 65 |     dependencies:
 66 |       '@edge-runtime/format': 1.0.0
 67 |       '@edge-runtime/vm': 1.1.0-beta.7
 68 |       exit-hook: 2.2.1
 69 |       http-status: 1.5.2
 70 |       mri: 1.2.0
 71 |       picocolors: 1.0.0
 72 |       pretty-bytes: 5.6.0
 73 |       pretty-ms: 7.0.1
 74 |       time-span: 4.0.0
 75 |     dev: true
 76 | 
 77 |   /esbuild-android-64/0.14.54:
 78 |     resolution: {integrity: sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==}
 79 |     engines: {node: '>=12'}
 80 |     cpu: [x64]
 81 |     os: [android]
 82 |     requiresBuild: true
 83 |     dev: true
 84 |     optional: true
 85 | 
 86 |   /esbuild-android-arm64/0.14.54:
 87 |     resolution: {integrity: sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==}
 88 |     engines: {node: '>=12'}
 89 |     cpu: [arm64]
 90 |     os: [android]
 91 |     requiresBuild: true
 92 |     dev: true
 93 |     optional: true
 94 | 
 95 |   /esbuild-darwin-64/0.14.54:
 96 |     resolution: {integrity: sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==}
 97 |     engines: {node: '>=12'}
 98 |     cpu: [x64]
 99 |     os: [darwin]
100 |     requiresBuild: true
101 |     dev: true
102 |     optional: true
103 | 
104 |   /esbuild-darwin-arm64/0.14.54:
105 |     resolution: {integrity: sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==}
106 |     engines: {node: '>=12'}
107 |     cpu: [arm64]
108 |     os: [darwin]
109 |     requiresBuild: true
110 |     dev: true
111 |     optional: true
112 | 
113 |   /esbuild-freebsd-64/0.14.54:
114 |     resolution: {integrity: sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==}
115 |     engines: {node: '>=12'}
116 |     cpu: [x64]
117 |     os: [freebsd]
118 |     requiresBuild: true
119 |     dev: true
120 |     optional: true
121 | 
122 |   /esbuild-freebsd-arm64/0.14.54:
123 |     resolution: {integrity: sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==}
124 |     engines: {node: '>=12'}
125 |     cpu: [arm64]
126 |     os: [freebsd]
127 |     requiresBuild: true
128 |     dev: true
129 |     optional: true
130 | 
131 |   /esbuild-linux-32/0.14.54:
132 |     resolution: {integrity: sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==}
133 |     engines: {node: '>=12'}
134 |     cpu: [ia32]
135 |     os: [linux]
136 |     requiresBuild: true
137 |     dev: true
138 |     optional: true
139 | 
140 |   /esbuild-linux-64/0.14.54:
141 |     resolution: {integrity: sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==}
142 |     engines: {node: '>=12'}
143 |     cpu: [x64]
144 |     os: [linux]
145 |     requiresBuild: true
146 |     dev: true
147 |     optional: true
148 | 
149 |   /esbuild-linux-arm/0.14.54:
150 |     resolution: {integrity: sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==}
151 |     engines: {node: '>=12'}
152 |     cpu: [arm]
153 |     os: [linux]
154 |     requiresBuild: true
155 |     dev: true
156 |     optional: true
157 | 
158 |   /esbuild-linux-arm64/0.14.54:
159 |     resolution: {integrity: sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==}
160 |     engines: {node: '>=12'}
161 |     cpu: [arm64]
162 |     os: [linux]
163 |     requiresBuild: true
164 |     dev: true
165 |     optional: true
166 | 
167 |   /esbuild-linux-mips64le/0.14.54:
168 |     resolution: {integrity: sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==}
169 |     engines: {node: '>=12'}
170 |     cpu: [mips64el]
171 |     os: [linux]
172 |     requiresBuild: true
173 |     dev: true
174 |     optional: true
175 | 
176 |   /esbuild-linux-ppc64le/0.14.54:
177 |     resolution: {integrity: sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==}
178 |     engines: {node: '>=12'}
179 |     cpu: [ppc64]
180 |     os: [linux]
181 |     requiresBuild: true
182 |     dev: true
183 |     optional: true
184 | 
185 |   /esbuild-linux-riscv64/0.14.54:
186 |     resolution: {integrity: sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==}
187 |     engines: {node: '>=12'}
188 |     cpu: [riscv64]
189 |     os: [linux]
190 |     requiresBuild: true
191 |     dev: true
192 |     optional: true
193 | 
194 |   /esbuild-linux-s390x/0.14.54:
195 |     resolution: {integrity: sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==}
196 |     engines: {node: '>=12'}
197 |     cpu: [s390x]
198 |     os: [linux]
199 |     requiresBuild: true
200 |     dev: true
201 |     optional: true
202 | 
203 |   /esbuild-netbsd-64/0.14.54:
204 |     resolution: {integrity: sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==}
205 |     engines: {node: '>=12'}
206 |     cpu: [x64]
207 |     os: [netbsd]
208 |     requiresBuild: true
209 |     dev: true
210 |     optional: true
211 | 
212 |   /esbuild-openbsd-64/0.14.54:
213 |     resolution: {integrity: sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==}
214 |     engines: {node: '>=12'}
215 |     cpu: [x64]
216 |     os: [openbsd]
217 |     requiresBuild: true
218 |     dev: true
219 |     optional: true
220 | 
221 |   /esbuild-sunos-64/0.14.54:
222 |     resolution: {integrity: sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==}
223 |     engines: {node: '>=12'}
224 |     cpu: [x64]
225 |     os: [sunos]
226 |     requiresBuild: true
227 |     dev: true
228 |     optional: true
229 | 
230 |   /esbuild-windows-32/0.14.54:
231 |     resolution: {integrity: sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==}
232 |     engines: {node: '>=12'}
233 |     cpu: [ia32]
234 |     os: [win32]
235 |     requiresBuild: true
236 |     dev: true
237 |     optional: true
238 | 
239 |   /esbuild-windows-64/0.14.54:
240 |     resolution: {integrity: sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==}
241 |     engines: {node: '>=12'}
242 |     cpu: [x64]
243 |     os: [win32]
244 |     requiresBuild: true
245 |     dev: true
246 |     optional: true
247 | 
248 |   /esbuild-windows-arm64/0.14.54:
249 |     resolution: {integrity: sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==}
250 |     engines: {node: '>=12'}
251 |     cpu: [arm64]
252 |     os: [win32]
253 |     requiresBuild: true
254 |     dev: true
255 |     optional: true
256 | 
257 |   /esbuild/0.14.54:
258 |     resolution: {integrity: sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==}
259 |     engines: {node: '>=12'}
260 |     hasBin: true
261 |     requiresBuild: true
262 |     optionalDependencies:
263 |       '@esbuild/linux-loong64': 0.14.54
264 |       esbuild-android-64: 0.14.54
265 |       esbuild-android-arm64: 0.14.54
266 |       esbuild-darwin-64: 0.14.54
267 |       esbuild-darwin-arm64: 0.14.54
268 |       esbuild-freebsd-64: 0.14.54
269 |       esbuild-freebsd-arm64: 0.14.54
270 |       esbuild-linux-32: 0.14.54
271 |       esbuild-linux-64: 0.14.54
272 |       esbuild-linux-arm: 0.14.54
273 |       esbuild-linux-arm64: 0.14.54
274 |       esbuild-linux-mips64le: 0.14.54
275 |       esbuild-linux-ppc64le: 0.14.54
276 |       esbuild-linux-riscv64: 0.14.54
277 |       esbuild-linux-s390x: 0.14.54
278 |       esbuild-netbsd-64: 0.14.54
279 |       esbuild-openbsd-64: 0.14.54
280 |       esbuild-sunos-64: 0.14.54
281 |       esbuild-windows-32: 0.14.54
282 |       esbuild-windows-64: 0.14.54
283 |       esbuild-windows-arm64: 0.14.54
284 |     dev: true
285 | 
286 |   /exit-hook/2.2.1:
287 |     resolution: {integrity: sha512-eNTPlAD67BmP31LDINZ3U7HSF8l57TxOY2PmBJ1shpCvpnxBF93mWCE8YHBnXs8qiUZJc9WDcWIeC3a2HIAMfw==}
288 |     engines: {node: '>=6'}
289 |     dev: true
290 | 
291 |   /http-status/1.5.2:
292 |     resolution: {integrity: sha512-HzxX+/hV/8US1Gq4V6R6PgUmJ5Pt/DGATs4QhdEOpG8LrdS9/3UG2nnOvkqUpRks04yjVtV5p/NODjO+wvf6vg==}
293 |     engines: {node: '>= 0.4.0'}
294 |     dev: true
295 | 
296 |   /mri/1.2.0:
297 |     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
298 |     engines: {node: '>=4'}
299 |     dev: true
300 | 
301 |   /mrmime/1.0.1:
302 |     resolution: {integrity: sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==}
303 |     engines: {node: '>=10'}
304 |     dev: true
305 | 
306 |   /ms/2.1.3:
307 |     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
308 |     dev: true
309 | 
310 |   /parse-ms/2.1.0:
311 |     resolution: {integrity: sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==}
312 |     engines: {node: '>=6'}
313 |     dev: true
314 | 
315 |   /picocolors/1.0.0:
316 |     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
317 |     dev: true
318 | 
319 |   /preact-render-to-string/5.2.1_preact@10.10.1:
320 |     resolution: {integrity: sha512-Wp3ner1aIVBpKg02C4AoLdBiw4kNaiFSYHr4wUF+fR7FWKAQzNri+iPfPp31sEhAtBfWoJrSxiEFzd5wp5zCgQ==}
321 |     peerDependencies:
322 |       preact: '>=10'
323 |     dependencies:
324 |       preact: 10.10.1
325 |       pretty-format: 3.8.0
326 |     dev: true
327 | 
328 |   /preact/10.10.1:
329 |     resolution: {integrity: sha512-cXljG59ylGtSLismoLojXPAGvnh2ipQr3BYz9KZQr+1sdASCT+sR/v8dSMDS96xGCdtln2wHfAHCnLJK+XcBNg==}
330 |     dev: true
331 | 
332 |   /pretty-bytes/5.6.0:
333 |     resolution: {integrity: sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==}
334 |     engines: {node: '>=6'}
335 |     dev: true
336 | 
337 |   /pretty-format/3.8.0:
338 |     resolution: {integrity: sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==}
339 |     dev: true
340 | 
341 |   /pretty-ms/7.0.1:
342 |     resolution: {integrity: sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==}
343 |     engines: {node: '>=10'}
344 |     dependencies:
345 |       parse-ms: 2.1.0
346 |     dev: true
347 | 
348 |   /sirv/2.0.2:
349 |     resolution: {integrity: sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==}
350 |     engines: {node: '>= 10'}
351 |     dependencies:
352 |       '@polka/url': 1.0.0-next.21
353 |       mrmime: 1.0.1
354 |       totalist: 3.0.0
355 |     dev: true
356 | 
357 |   /time-span/4.0.0:
358 |     resolution: {integrity: sha512-MyqZCTGLDZ77u4k+jqg4UlrzPTPZ49NDlaekU6uuFaJLzPIN1woaRXCbGeqOfxwc3Y37ZROGAJ614Rdv7Olt+g==}
359 |     engines: {node: '>=10'}
360 |     dependencies:
361 |       convert-hrtime: 3.0.0
362 |     dev: true
363 | 
364 |   /totalist/3.0.0:
365 |     resolution: {integrity: sha512-eM+pCBxXO/njtF7vdFsHuqb+ElbxqtI4r5EAvk6grfAFyJ6IvWlSkfZ5T9ozC6xWw3Fj1fGoSmrl0gUs46JVIw==}
366 |     engines: {node: '>=6'}
367 |     dev: true
368 | 


--------------------------------------------------------------------------------
/src/app.tsx:
--------------------------------------------------------------------------------
  1 | export default function App({ req, isCold }) {
  2 |   const parsedCity = decodeURIComponent(req.headers.get('x-vercel-ip-city'));
  3 |   // from vercel we get the string `null` when it can't decode the IP
  4 |   const city = parsedCity === 'null' ? null : parsedCity;
  5 |   const ip = (req.headers.get('x-forwarded-for') ?? '127.0.0.1').split(',')[0];
  6 | 
  7 |   return (
  8 |     <html lang="en">
  9 |       <Head />
 10 |       <body>
 11 |         <div style={{ height: '100%' }}>
 12 |           <Card />
 13 | 
 14 |           <main>
 15 |             <h1>
 16 |               <span>Hello from the edge!</span>
 17 |             </h1>
 18 | 
 19 |             <div class="info">
 20 |               <div class="block">
 21 |                 <div class="contents">
 22 |                   <span>Your city</span>
 23 |                   <strong
 24 |                     title={
 25 |                       city === null
 26 |                         ? 'GeoIP information could not be derived from your IP'
 27 |                         : null
 28 |                     }
 29 |                     class={city === null ? 'na' : null}
 30 |                   >
 31 |                     {city === null ? 'N/A' : city}
 32 |                   </strong>
 33 |                 </div>
 34 |               </div>
 35 | 
 36 |               <div class="block">
 37 |                 <div class="contents">
 38 |                   <span>Your IP address</span>
 39 |                   <strong>{ip}</strong>
 40 |                 </div>
 41 |               </div>
 42 |             </div>
 43 |           </main>
 44 |           <div class="debug">
 45 |             Generated at {new Date().toISOString()} ({isCold ? 'cold' : 'hot'})
 46 |           </div>
 47 |         </div>
 48 | 
 49 |         <Footer />
 50 |       </body>
 51 |     </html>
 52 |   );
 53 | }
 54 | 
 55 | function Head() {
 56 |   return (
 57 |     <head>
 58 |       <title>Preact on the edge</title>
 59 |       <meta charset="utf-8" />
 60 |       <link rel="icon" href="/static/favicon.ico" />
 61 |       <link rel="stylesheet" href="/static/app.css" />
 62 |       <meta name="viewport" content="width=device-width, initial-scale=1" />
 63 |       <meta
 64 |         name="description"
 65 |         content="HTML, dynamically rendered in a city near you"
 66 |       />
 67 |       <meta name="twitter:card" content="summary_large_image" />
 68 |       <meta name="twitter:site" content="@vercel" />
 69 |       <meta name="twitter:creator" content="@vercel" />
 70 |       <meta name="twitter:title" content="Preact on the edge" />
 71 |       <meta
 72 |         name="twitter:description"
 73 |         content="HTML, dynamically rendered in a city near you"
 74 |       />
 75 |       <meta name="twitter:image" content="/static/og/card.png" />
 76 |       <meta name="twitter:image:alt" content="The Vercel and Preact logos" />
 77 |     </head>
 78 |   );
 79 | }
 80 | 
 81 | function Card() {
 82 |   return (
 83 |     <svg className="card" viewBox="0 50 840 440">
 84 |       <defs>
 85 |         <linearGradient
 86 |           id="gradient-1"
 87 |           gradientUnits="userSpaceOnUse"
 88 |           x1={420}
 89 |           y1={275}
 90 |           x2={420}
 91 |           y2={167}
 92 |           gradientTransform="matrix(1 0 0 -1 0 442)"
 93 |         >
 94 |           <stop
 95 |             offset={0.464}
 96 |             style={{
 97 |               stopOpacity: 0.2,
 98 |             }}
 99 |           />
100 |           <stop
101 |             offset={0.9}
102 |             style={{
103 |               stopOpacity: 0,
104 |             }}
105 |           />
106 |         </linearGradient>
107 |         <linearGradient
108 |           id="gradient-2"
109 |           gradientUnits="userSpaceOnUse"
110 |           x1={420}
111 |           y1={325}
112 |           x2={420}
113 |           y2={117.001}
114 |           gradientTransform="matrix(1 0 0 -1 0 442)"
115 |         >
116 |           <stop
117 |             offset={0.464}
118 |             style={{
119 |               stopOpacity: 0.2,
120 |             }}
121 |           />
122 |           <stop
123 |             offset={1}
124 |             style={{
125 |               stopOpacity: 0,
126 |             }}
127 |           />
128 |         </linearGradient>
129 |         <linearGradient
130 |           id="gradient-3"
131 |           gradientUnits="userSpaceOnUse"
132 |           x1={420}
133 |           y1={382}
134 |           x2={420}
135 |           y2={60.001}
136 |           gradientTransform="matrix(1 0 0 -1 0 442)"
137 |         >
138 |           <stop
139 |             offset={0.464}
140 |             style={{
141 |               stopOpacity: 0.16,
142 |             }}
143 |           />
144 |           <stop
145 |             offset={0.9}
146 |             style={{
147 |               stopOpacity: 0,
148 |             }}
149 |           />
150 |         </linearGradient>
151 |         <linearGradient
152 |           id="gradient-4"
153 |           gradientUnits="userSpaceOnUse"
154 |           x1={420}
155 |           y1={488.788}
156 |           x2={420}
157 |           y2={-46.967}
158 |           gradientTransform="matrix(1 0 0 -1 0 442)"
159 |         >
160 |           <stop
161 |             offset={0.089}
162 |             style={{
163 |               stopOpacity: 0.1,
164 |             }}
165 |           />
166 |           <stop
167 |             offset={0.464}
168 |             style={{
169 |               stopOpacity: 0.27,
170 |             }}
171 |           />
172 |           <stop
173 |             offset={0.896}
174 |             style={{
175 |               stopOpacity: 0,
176 |             }}
177 |           />
178 |         </linearGradient>
179 |         <linearGradient
180 |           id="gradient-5"
181 |           gradientUnits="userSpaceOnUse"
182 |           x1={420}
183 |           y1={610}
184 |           x2={420}
185 |           y2={-168.179}
186 |           gradientTransform="matrix(1 0 0 -1 0 442)"
187 |         >
188 |           <stop
189 |             offset={0.172}
190 |             style={{
191 |               stopOpacity: 0,
192 |             }}
193 |           />
194 |           <stop
195 |             offset={0.464}
196 |             style={{
197 |               stopOpacity: 0.21,
198 |             }}
199 |           />
200 |           <stop
201 |             offset={0.771}
202 |             style={{
203 |               stopOpacity: 0,
204 |             }}
205 |           />
206 |         </linearGradient>
207 |         <linearGradient
208 |           id="gradient-vercel"
209 |           gradientUnits="objectBoundingBox"
210 |           x1={0}
211 |           y1={0}
212 |           x2={1.5}
213 |           y2={1}
214 |         >
215 |           <stop
216 |             offset={0.3}
217 |             style={{
218 |               stopColor: 'var(--g1)',
219 |             }}
220 |           />
221 |           <stop
222 |             offset={0.5}
223 |             style={{
224 |               stopColor: 'var(--g2)',
225 |             }}
226 |           />
227 |           <stop
228 |             offset={0.8}
229 |             style={{
230 |               stopColor: 'var(--g1)',
231 |             }}
232 |           />
233 |         </linearGradient>
234 |         <linearGradient
235 |           id="gradient-preact"
236 |           gradientUnits="objectBoundingBox"
237 |           x1={0}
238 |           y1={0}
239 |           x2={1.1}
240 |           y2={1}
241 |         >
242 |           <stop
243 |             offset={0.3}
244 |             style={{
245 |               stopColor: 'var(--preact)',
246 |             }}
247 |           />
248 |           <stop
249 |             offset={0.5}
250 |             style={{
251 |               stopColor: '#BBF0FF',
252 |             }}
253 |           />
254 |           <stop
255 |             offset={0.8}
256 |             style={{
257 |               stopColor: 'var(--preact)',
258 |             }}
259 |           />
260 |         </linearGradient>
261 |         <symbol id="preact-logo" viewBox="0 0 23 20.46348">
262 |           <svg viewBox="-256 -256 512 512">
263 |             <path d="M0,-256 221.7025033688164,-128 221.7025033688164,128 0,256 -221.7025033688164,128 -221.7025033688164,-128z" fill="#673ab8" stroke="white" stroke-width="4px" />
264 |             <ellipse cx="0" cy="0" rx="75px" ry="196px" transform="rotate(52)" fill="none" stroke="white" stroke-width="16px" />
265 |             <ellipse cx="0" cy="0" rx="75px" ry="196px" transform="rotate(-52)" fill="none" stroke="white" stroke-width="16px" />
266 |             <circle cx="0" cy="0" r="34" fill="white" />
267 |           </svg>
268 |         </symbol>
269 |         <linearGradient id="#mask-gradient">
270 |           <stop offset="0" stop-color="black" />
271 |           <stop offset="1" stop-color="white" />
272 |         </linearGradient>
273 |         <mask id="mask">
274 |           <rect
275 |             x="0"
276 |             y="0"
277 |             width="200"
278 |             height="200"
279 |             fill="url(#mask-gradient)"
280 |           />
281 |         </mask>
282 |       </defs>
283 |       <g className="orbits" transform="translate(420, 220)">
284 |         <g>
285 |           <circle
286 |             className="orbit"
287 |             style={{
288 |               stroke: 'url(#gradient-1)',
289 |               animationDelay: 0,
290 |             }}
291 |             r={53.4}
292 |           />
293 |         </g>
294 |         <g>
295 |           <circle
296 |             className="orbit"
297 |             style={{
298 |               stroke: 'url(#gradient-2)',
299 |               animationDelay: '0.03s',
300 |             }}
301 |             r={103.4}
302 |           />
303 |           <circle
304 |             className="gray satellite"
305 |             style={{
306 |               animationDelay: '0.9s',
307 |             }}
308 |             cx={-69.6}
309 |             cy={-76}
310 |             r={5.8}
311 |           />
312 |         </g>
313 |         <g>
314 |           <circle
315 |             className="orbit"
316 |             style={{
317 |               stroke: 'url(#gradient-3)',
318 |               animationDelay: '0.06s',
319 |             }}
320 |             r={160.4}
321 |           />
322 |           <circle
323 |             className="orange satellite"
324 |             style={{
325 |               animationDelay: '0.8s',
326 |             }}
327 |             cx={102.4}
328 |             cy={-123}
329 |             r={5.8}
330 |           />
331 |         </g>
332 |         <g>
333 |           <circle
334 |             className="orbit"
335 |             style={{
336 |               stroke: 'url(#gradient-4)',
337 |               animationDelay: '0.09s',
338 |             }}
339 |             r={267.3}
340 |           />
341 |           <circle
342 |             className="orange satellite"
343 |             style={{
344 |               animationDelay: '0.6s',
345 |             }}
346 |             cx={-243.6}
347 |             cy={111.4}
348 |             r={5.8}
349 |           />
350 |           <circle
351 |             className="gray satellite"
352 |             style={{
353 |               animationDelay: '1s',
354 |             }}
355 |             cx={250}
356 |             cy={94.4}
357 |             r={5.8}
358 |           />
359 |           <circle
360 |             className="orange satellite"
361 |             style={{
362 |               animationDelay: '0.7s',
363 |             }}
364 |             cx={-236.6}
365 |             cy={-123.6}
366 |             r={5.8}
367 |           />
368 |         </g>
369 |         <g>
370 |           <circle
371 |             className="orbit"
372 |             style={{
373 |               stroke: 'url(#gradient-5)',
374 |               animationDelay: '0.12s',
375 |             }}
376 |             r={388.5}
377 |           />
378 |         </g>
379 |       </g>
380 |       <path
381 |         id="vercel-logo"
382 |         d="m336.4 261-46.2-80-46.2 80h92.4z"
383 |         style={{
384 |           fill: 'url(#gradient-vercel)',
385 |         }}
386 |       />
387 |       <g id="center">
388 |         <path
389 |           d="M420 202 v36 M 402 220h36"
390 |           style={{
391 |             strokeWidth: 3.5625,
392 |             strokeLinecap: 'round',
393 |             strokeLinejoin: 'round',
394 |             stroke: '#999',
395 |             fill: 'none',
396 |           }}
397 |         />
398 |       </g>
399 |       <use href="#preact-logo" width={98} x={500} />
400 |       <use href="#preact-logo" width={98} x={500} mask="url(#mask)" />
401 |     </svg>
402 |   );
403 | }
404 | 
405 | function Footer() {
406 |   return (
407 |     <footer>
408 |       <p class="company">
409 |         <a target="_blank" href="https://vercel.com" aria-label="Vercel">
410 |           <svg
411 |             viewBox="0 0 4438 1000"
412 |             fill="none"
413 |             xmlns="http://www.w3.org/2000/svg"
414 |           >
415 |             <path
416 |               d="M2223.75 250C2051.25 250 1926.87 362.5 1926.87 531.25C1926.87 700 2066.72 812.5 2239.38 812.5C2343.59 812.5 2435.47 771.25 2492.34 701.719L2372.81 632.656C2341.25 667.188 2293.28 687.344 2239.38 687.344C2164.53 687.344 2100.94 648.281 2077.34 585.781H2515.16C2518.59 568.281 2520.63 550.156 2520.63 531.094C2520.63 362.5 2396.41 250 2223.75 250ZM2076.09 476.562C2095.62 414.219 2149.06 375 2223.75 375C2298.59 375 2352.03 414.219 2371.41 476.562H2076.09ZM2040.78 78.125L1607.81 828.125L1174.69 78.125H1337.03L1607.66 546.875L1878.28 78.125H2040.78ZM577.344 0L1154.69 1000H0L577.344 0ZM3148.75 531.25C3148.75 625 3210 687.5 3305 687.5C3369.38 687.5 3417.66 658.281 3442.5 610.625L3562.5 679.844C3512.81 762.656 3419.69 812.5 3305 812.5C3132.34 812.5 3008.13 700 3008.13 531.25C3008.13 362.5 3132.5 250 3305 250C3419.69 250 3512.66 299.844 3562.5 382.656L3442.5 451.875C3417.66 404.219 3369.38 375 3305 375C3210.16 375 3148.75 437.5 3148.75 531.25ZM4437.5 78.125V796.875H4296.88V78.125H4437.5ZM3906.25 250C3733.75 250 3609.38 362.5 3609.38 531.25C3609.38 700 3749.38 812.5 3921.88 812.5C4026.09 812.5 4117.97 771.25 4174.84 701.719L4055.31 632.656C4023.75 667.188 3975.78 687.344 3921.88 687.344C3847.03 687.344 3783.44 648.281 3759.84 585.781H4197.66C4201.09 568.281 4203.12 550.156 4203.12 531.094C4203.12 362.5 4078.91 250 3906.25 250ZM3758.59 476.562C3778.13 414.219 3831.41 375 3906.25 375C3981.09 375 4034.53 414.219 4053.91 476.562H3758.59ZM2961.25 265.625V417.031C2945.63 412.5 2929.06 409.375 2911.25 409.375C2820.47 409.375 2755 471.875 2755 565.625V796.875H2614.38V265.625H2755V409.375C2755 330 2847.34 265.625 2961.25 265.625Z"
417 |               fill="var(--fg)"
418 |             />
419 |           </svg>
420 |         </a>
421 |       </p>
422 | 
423 |       <p class="details">
424 |         Built with{' '}
425 |         <a target="_blank" href="https://preactjs.com">
426 |           Preact
427 |         </a>{' '}
428 |         on{' '}
429 |         <a target="_blank" href="https://vercel.com">
430 |           Vercel
431 |         </a>
432 |       </p>
433 | 
434 |       <a
435 |         target="_blank"
436 |         href="https://github.com/preactjs/preact-on-the-edge"
437 |         class="source"
438 |       >
439 |         <svg
440 |           width="24"
441 |           height="24"
442 |           viewBox="0 0 24 24"
443 |           fill="none"
444 |           xmlns="http://www.w3.org/2000/svg"
445 |         >
446 |           <path
447 |             fill-rule="evenodd"
448 |             clip-rule="evenodd"
449 |             d="M12 0C5.37 0 0 5.50583 0 12.3035C0 17.7478 3.435 22.3463 8.205 23.9765C8.805 24.0842 9.03 23.715 9.03 23.3921C9.03 23.0999 9.015 22.131 9.015 21.1005C6 21.6696 5.22 20.347 4.98 19.6549C4.845 19.3012 4.26 18.2092 3.75 17.917C3.33 17.6863 2.73 17.1173 3.735 17.1019C4.68 17.0865 5.355 17.9939 5.58 18.363C6.66 20.2239 8.385 19.701 9.075 19.3781C9.18 18.5783 9.495 18.04 9.84 17.7325C7.17 17.4249 4.38 16.3637 4.38 11.6576C4.38 10.3196 4.845 9.21226 5.61 8.35102C5.49 8.04343 5.07 6.78232 5.73 5.09058C5.73 5.09058 6.735 4.76762 9.03 6.3517C9.99 6.07487 11.01 5.93645 12.03 5.93645C13.05 5.93645 14.07 6.07487 15.03 6.3517C17.325 4.75224 18.33 5.09058 18.33 5.09058C18.99 6.78232 18.57 8.04343 18.45 8.35102C19.215 9.21226 19.68 10.3042 19.68 11.6576C19.68 16.3791 16.875 17.4249 14.205 17.7325C14.64 18.1169 15.015 18.8552 15.015 20.0086C15.015 21.6542 15 22.9768 15 23.3921C15 23.715 15.225 24.0995 15.825 23.9765C18.2072 23.1519 20.2773 21.5822 21.7438 19.4882C23.2103 17.3942 23.9994 14.8814 24 12.3035C24 5.50583 18.63 0 12 0Z"
450 |             fill="var(--fg)"
451 |           />
452 |         </svg>
453 |         Source
454 |       </a>
455 |     </footer>
456 |   );
457 | }
458 | 


--------------------------------------------------------------------------------
/static/app.css:
--------------------------------------------------------------------------------
  1 | html,
  2 | body {
  3 |   height: 100%;
  4 | }
  5 | 
  6 | body {
  7 |   --fg: black;
  8 |   --bg: white;
  9 |   --preact: #673ab8;
 10 |   margin: 0;
 11 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
 12 |     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 13 |   background: var(--bg);
 14 |   color: var(--fg);
 15 |   overflow: hidden;
 16 | }
 17 | 
 18 | ::selection {
 19 |   background: var(--preact);
 20 |   color: var(--bg);
 21 | }
 22 | 
 23 | @media (prefers-color-scheme: dark) {
 24 |   body {
 25 |     --fg: white;
 26 |     --bg: black;
 27 |   }
 28 | }
 29 | 
 30 | /* main */
 31 | 
 32 | main {
 33 |   position: relative;
 34 |   width: 100vw;
 35 |   height: 100%;
 36 |   padding: 2.5rem;
 37 |   box-sizing: border-box;
 38 | }
 39 | 
 40 | main h1 {
 41 |   font-size: min(16vw, 4rem);
 42 |   font-weight: 600;
 43 |   margin: 0;
 44 |   text-align: center;
 45 |   position: absolute;
 46 |   top: 10vh;
 47 |   left: 0;
 48 |   width: 100%;
 49 |   padding: 0 2.5rem;
 50 |   box-sizing: border-box;
 51 |   line-height: 1;
 52 | }
 53 | 
 54 | main h1 span {
 55 |   display: block;
 56 |   max-width: 6em;
 57 |   margin: 0 auto;
 58 | }
 59 | 
 60 | main .info {
 61 |   --border-color: rgba(0, 0, 0, 0.08);
 62 |   position: absolute;
 63 |   bottom: 9rem;
 64 |   left: 0;
 65 |   width: 100%;
 66 |   display: grid;
 67 |   padding: 0 2.5rem;
 68 |   font-size: min(5vw, 2rem);
 69 |   box-sizing: border-box;
 70 | }
 71 | 
 72 | main .block {
 73 |   display: flex;
 74 |   margin: 0;
 75 |   padding: 1rem 0;
 76 | }
 77 | 
 78 | main .block:nth-child(1) {
 79 |   border-bottom: 1px solid var(--border-color);
 80 | }
 81 | 
 82 | main .block span {
 83 |   display: block;
 84 |   margin: 0 0 0.2em 0;
 85 |   text-transform: uppercase;
 86 |   font-size: 0.6em;
 87 | }
 88 | 
 89 | main .block strong {
 90 |   display: block;
 91 |   font-size: 1.4em;
 92 |   margin: 0;
 93 |   font-weight: 600;
 94 | }
 95 | 
 96 | main .block strong.na {
 97 |   color: #ccc;
 98 |   font-weight: normal;
 99 | }
100 | 
101 | .debug {
102 |   position: absolute;
103 |   bottom: 20px;
104 |   text-align: center;
105 |   width: 100%;
106 |   font-size: 11px;
107 |   color: #999;
108 | }
109 | 
110 | @media (min-width: 640px) {
111 |   main h1 {
112 |     font-size: min(8vw, 4rem);
113 |   }
114 |   main h1 span {
115 |     max-width: none;
116 |   }
117 |   main .info {
118 |     display: flex;
119 |     justify-content: center;
120 |     position: relative;
121 |     top: 60vh;
122 |     gap: 4rem;
123 |     grid-template-columns: 1fr 1fr;
124 |   }
125 |   main .block:nth-child(1) {
126 |     border-bottom: none;
127 |     justify-content: end;
128 |   }
129 |   main .block:nth-child(2) {
130 |     justify-content: start;
131 |   }
132 | }
133 | 
134 | @media (prefers-color-scheme: dark) {
135 |   main .block:nth-child(1) {
136 |     --border-color: rgba(255, 255, 255, 0.35);
137 |   }
138 | }
139 | 
140 | /* card */
141 | @keyframes fade-in {
142 |   from {
143 |     opacity: 0;
144 |   }
145 |   to {
146 |     opacity: 1;
147 |   }
148 | }
149 | 
150 | @keyframes grow {
151 |   0% {
152 |     opacity: 0;
153 |     transform: scale(0.96);
154 |   }
155 |   3% {
156 |     opacity: 0.7;
157 |     transform: scale(1.03);
158 |   }
159 |   3.6% {
160 |     opacity: 0.8;
161 |     transform: scale(1.05);
162 |   }
163 |   4.2% {
164 |     opacity: 0.9;
165 |     transform: scale(1.03);
166 |   }
167 |   6% {
168 |     opacity: 1;
169 |     transform: scale(1);
170 |   }
171 |   95% {
172 |     opacity: 1;
173 |     transform: scale(1);
174 |   }
175 |   100% {
176 |     opacity: 0;
177 |     transform: scale(1);
178 |   }
179 | }
180 | 
181 | @keyframes spin {
182 |   0% {
183 |     transform: rotate(0deg);
184 |   }
185 |   100% {
186 |     transform: rotate(-360deg);
187 |   }
188 | }
189 | 
190 | svg.card {
191 |   position: absolute;
192 |   width: 100%;
193 |   height: 100%;
194 |   overflow: visible;
195 | }
196 | 
197 | .card .satellite {
198 |   fill: var(--bg);
199 |   stroke-width: 1.165;
200 |   /* animation: fade-in 1s both; */
201 | }
202 | 
203 | .card .orange.satellite {
204 |   stroke: var(--preact);
205 | }
206 | 
207 | .card .gray.satellite {
208 |   stroke: #999;
209 | }
210 | 
211 | .card .orbit {
212 |   fill: none;
213 |   stroke-width: 1.165;
214 |   animation: grow 5s linear both infinite;
215 | }
216 | 
217 | .card .orbits > g {
218 |   animation: spin 60s linear both infinite;
219 | }
220 | 
221 | .card .orbits > g:nth-child(2) {
222 |   animation-duration: 80s;
223 | }
224 | 
225 | .card .orbits > g:nth-child(3) {
226 |   animation-duration: 100s;
227 | }
228 | 
229 | .card .orbits > g:nth-child(4) {
230 |   animation-duration: 120s;
231 | }
232 | 
233 | .card #gradient-vercel {
234 |   --g1: #000;
235 |   --g2: #333;
236 | }
237 | 
238 | .card stop {
239 |   stop-color: rgba(0, 0, 0, 0.3);
240 | }
241 | 
242 | @media (min-width: 800px) {
243 |   .card .orbits > g:nth-child(2) {
244 |     animation-duration: 120s;
245 |   }
246 | 
247 |   .card .orbits > g:nth-child(3) {
248 |     animation-duration: 150s;
249 |   }
250 | 
251 |   .card .orbits > g:nth-child(4) {
252 |     animation-duration: 180s;
253 |   }
254 | }
255 | 
256 | @media (prefers-color-scheme: dark) {
257 |   .card #gradient-vercel {
258 |     --g1: #eee;
259 |     --g2: #fff;
260 |   }
261 | 
262 |   .card stop {
263 |     stop-color: white;
264 |   }
265 | }
266 | 
267 | @media (prefers-reduced-motion) {
268 |   .card .satellite,
269 |   .card .orbit,
270 |   .card .orbits > g {
271 |     animation: none;
272 |   }
273 | }
274 | 
275 | /* footer */
276 | 
277 | footer {
278 |   display: grid;
279 |   grid-template-columns: 1fr 1fr;
280 |   align-items: center;
281 |   position: absolute;
282 |   bottom: 0;
283 |   left: 0;
284 |   width: 100%;
285 |   text-align: center;
286 |   padding: 2.5rem;
287 |   box-sizing: border-box;
288 |   font-size: 16px;
289 | }
290 | 
291 | footer p {
292 |   margin: 0.5em 0;
293 | }
294 | 
295 | footer a {
296 |   text-decoration: none;
297 | }
298 | 
299 | footer a:hover {
300 |   text-decoration: hover;
301 | }
302 | 
303 | footer .details {
304 |   order: 3;
305 |   grid-column: 1/3;
306 |   white-space: nowrap;
307 | }
308 | 
309 | footer .details a {
310 |   color: var(--preact);
311 | }
312 | 
313 | footer .source,
314 | footer .company {
315 |   display: flex;
316 |   align-items: center;
317 | }
318 | 
319 | footer .source {
320 |   gap: 0.5rem;
321 |   align-items: center;
322 |   justify-content: flex-end;
323 | }
324 | 
325 | footer .company {
326 |   font-weight: 600;
327 |   white-space: nowrap;
328 |   justify-content: start;
329 | }
330 | 
331 | footer .company svg {
332 |   height: 1em;
333 |   position: relative;
334 |   top: 0.2em;
335 | }
336 | 
337 | footer .source,
338 | footer .company a {
339 |   color: var(--fg);
340 | }
341 | 
342 | @media (min-width: 800px) {
343 |   footer {
344 |     display: flex;
345 |     justify-content: space-around;
346 |   }
347 |   footer .source,
348 |   footer .company {
349 |     width: 10em;
350 |   }
351 |   footer .details {
352 |     order: 0;
353 |     grid-column: 1/3;
354 |   }
355 | }
356 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/preactjs/preact-on-the-edge/8e6472c8da1c18c9d88ef994dac89a38cb4643d7/static/favicon.ico


--------------------------------------------------------------------------------
/static/og/card.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/preactjs/preact-on-the-edge/8e6472c8da1c18c9d88ef994dac89a38cb4643d7/static/og/card.png


--------------------------------------------------------------------------------
/util/build.mjs:
--------------------------------------------------------------------------------
  1 | import { build } from 'esbuild';
  2 | import { join } from 'path';
  3 | import { fileURLToPath } from 'url';
  4 | import { stat, rm, mkdir, link, readdir, writeFile } from 'fs/promises';
  5 | import bytes from 'bytes';
  6 | import pc from 'picocolors';
  7 | import ms from 'ms';
  8 | 
  9 | // start date for building
 10 | const buildStart = Date.now();
 11 | 
 12 | // constants
 13 | const __dirname = fileURLToPath(new URL('.', import.meta.url));
 14 | const WORK_DIR = process.cwd();
 15 | const OUT_DIR = join(WORK_DIR, '.out');
 16 | const OUT_FILE = join(OUT_DIR, 'out.js');
 17 | const VERCEL_OUT_DIR = join(WORK_DIR, '.vercel', 'output');
 18 | 
 19 | // remove dist dir
 20 | await rm(OUT_DIR, { recursive: true, force: true });
 21 | 
 22 | // build
 23 | await build({
 24 |   bundle: true,
 25 |   target: ['es2022'],
 26 |   entryPoints: [join(__dirname, 'handler.tsx')],
 27 |   outfile: OUT_FILE,
 28 |   minify: true,
 29 |   format: 'esm',
 30 |   define: {
 31 |     // ensures Preact production build
 32 |     'process.env.NODE_ENV': "'production'",
 33 |   },
 34 |   jsxImportSource: 'preact',
 35 |   jsx: 'automatic',
 36 | });
 37 | 
 38 | // output
 39 | const outLength = (await stat(OUT_FILE)).size;
 40 | console.log(
 41 |   `✓ Built app bundle ${pc.cyan(`(${bytes(outLength)})`)} ${pc.gray(
 42 |     `[${ms(Date.now() - buildStart)}]`
 43 |   )}`
 44 | );
 45 | 
 46 | // turn it into a vercel-specific build
 47 | const vercelBuildStart = Date.now();
 48 | await rm(VERCEL_OUT_DIR, { recursive: true, force: true });
 49 | await mkdir(join(VERCEL_OUT_DIR, 'functions', 'index.func'), {
 50 |   recursive: true,
 51 | });
 52 | await mkdir(join(VERCEL_OUT_DIR, 'static', 'static'), { recursive: true });
 53 | 
 54 | // save config
 55 | await writeFile(
 56 |   join(VERCEL_OUT_DIR, 'config.json'),
 57 |   JSON.stringify({ version: 3 }, null, 2)
 58 | );
 59 | 
 60 | // create function
 61 | await link(
 62 |   OUT_FILE,
 63 |   join(VERCEL_OUT_DIR, 'functions', 'index.func', 'index.js')
 64 | );
 65 | await writeFile(
 66 |   join(VERCEL_OUT_DIR, 'functions', 'index.func', '.vc-config.json'),
 67 |   JSON.stringify(
 68 |     {
 69 |       runtime: 'edge',
 70 |       entrypoint: 'index.js',
 71 |     },
 72 |     null,
 73 |     2
 74 |   )
 75 | );
 76 | 
 77 | // recursively copy static files using hard links
 78 | async function copyStatic(src, dest) {
 79 |   const files = await readdir(src);
 80 |   for (const file of files) {
 81 |     const child = join(src, file);
 82 |     const s = await stat(child);
 83 |     if (s.isDirectory()) {
 84 |       await mkdir(join(dest, file));
 85 |       await copyStatic(child, join(dest, file));
 86 |     } else {
 87 |       await link(join(src, file), join(dest, file));
 88 |     }
 89 |   }
 90 | }
 91 | 
 92 | await copyStatic(
 93 |   join(WORK_DIR, 'static'),
 94 |   join(VERCEL_OUT_DIR, 'static', 'static')
 95 | );
 96 | 
 97 | console.log(
 98 |   `✓ Transformed into Vercel build output ${pc.gray(
 99 |     `[${ms(Date.now() - vercelBuildStart)}]`
100 |   )}`
101 | );
102 | 


--------------------------------------------------------------------------------
/util/handler.tsx:
--------------------------------------------------------------------------------
 1 | import App from '../src/app';
 2 | import renderToString from 'preact-render-to-string';
 3 | 
 4 | let isCold = true;
 5 | 
 6 | export default function Handler(req: Request) {
 7 |   const wasCold = isCold;
 8 |   let html: string;
 9 |   isCold = false;
10 | 
11 |   try {
12 |     html = renderToString(<App req={req} isCold={wasCold} />);
13 |   } catch (err) {
14 |     console.error('Render error:', err.stack);
15 |     return new Response(
16 |       `<!doctype html><h1>Internal application error</h1>
17 |       <p>The app failed to render. Check your Edge Function logs.</p>`,
18 |       {
19 |         status: 500,
20 |         headers: {
21 |           'Content-Type': 'text/html; charset=utf-8',
22 |         },
23 |       }
24 |     );
25 |   }
26 | 
27 |   return new Response(`<!doctype html>` + html, {
28 |     headers: {
29 |       'Content-Type': 'text/html; charset=utf-8',
30 |       'x-is-cold': wasCold ? 'true' : 'false',
31 |     },
32 |   });
33 | }
34 | 


--------------------------------------------------------------------------------
/util/start-shim.ts:
--------------------------------------------------------------------------------
1 | import Handler from '../.out/out';
2 | 
3 | addEventListener('fetch', (event) => {
4 |   return event.respondWith(Handler(event.request));
5 | });
6 | 


--------------------------------------------------------------------------------
/util/start.mjs:
--------------------------------------------------------------------------------
 1 | // this command starts a local server
 2 | import { readFile } from 'fs/promises';
 3 | import { EdgeRuntime } from 'edge-runtime';
 4 | import { join } from 'path';
 5 | import { build } from 'esbuild';
 6 | import { fileURLToPath } from 'url';
 7 | import { createServer } from 'http';
 8 | import createSirv from 'sirv';
 9 | 
10 | process.on('uncaughtException', (err) => {
11 |   throw err;
12 | });
13 | 
14 | // constants
15 | const WORK_DIR = process.cwd();
16 | const OUT_DIR = join(WORK_DIR, '.out');
17 | const __dirname = fileURLToPath(new URL('.', import.meta.url));
18 | const START_FILE = join(__dirname, 'start-shim.js');
19 | const START_FILE_OUT = join(OUT_DIR, 'start.js');
20 | 
21 | // shim to append the `addEventListener` code
22 | await build({
23 |   bundle: true,
24 |   target: ['es2022'],
25 |   entryPoints: [START_FILE],
26 |   outfile: START_FILE_OUT,
27 |   format: 'esm',
28 | });
29 | 
30 | // read the generated code
31 | let code = await readFile(START_FILE_OUT);
32 | 
33 | const runtime = new EdgeRuntime({ initialCode: code });
34 | const sirv = createSirv(join(WORK_DIR, 'static'), { etag: true });
35 | 
36 | createServer(async (req, res) => {
37 |   const urlString = `http://${req.headers.host}${req.url}`;
38 |   const url = new URL(urlString);
39 | 
40 |   // set default cache busting headers
41 |   res.setHeader('Cache-Control', 'public, max-age=0, must-revalidate');
42 | 
43 |   if (/^\/static(\/|$)/.test(url.pathname)) {
44 |     // strip the `/static` prefix
45 |     req.url = req.url.replace(/^\/static/, '');
46 |     sirv(req, res);
47 |   } else {
48 |     try {
49 |       const subReq = await runtime.dispatchFetch(urlString);
50 |       res.writeHead(subReq.status, subReq.headers);
51 |       for await (const chunk of subReq.body) {
52 |         res.write(chunk);
53 |       }
54 |       res.end();
55 |     } catch (err) {
56 |       res.writeHead(500);
57 |       res.end(err.stack);
58 |     }
59 |   }
60 | }).listen(3000, (err) => {
61 |   if (err) throw err;
62 |   console.log('Listening on http://localhost:3000 / http://0.0.0.0:3000');
63 | });
64 | 


--------------------------------------------------------------------------------