ptr.pet
forked from
nekomimi.pet/wisp.place-monorepo
Monorepo for Wisp.place. A static site hosting service built on top of the AT Protocol.
1# HTML Path Rewriting Example
2
3This document demonstrates how HTML path rewriting works when serving sites via the `/s/:identifier/:site/*` route.
4
5## Problem
6
7When you create a static site with absolute paths like `/style.css` or `/images/logo.png`, these paths work fine when served from the root domain. However, when served from a subdirectory like `/s/alice.bsky.social/mysite/`, these absolute paths break because they resolve to the server root instead of the site root.
8
9## Solution
10
11The hosting service automatically rewrites absolute paths in HTML files to work correctly in the subdirectory context.
12
13## Example
14
15**Original HTML file (index.html):**
16```html
17<!DOCTYPE html>
18<html>
19<head>
20 <meta charset="UTF-8">
21 <title>My Site</title>
22 <link rel="stylesheet" href="/style.css">
23 <link rel="icon" href="/favicon.ico">
24 <script src="/app.js"></script>
25</head>
26<body>
27 <header>
28 <img src="/images/logo.png" alt="Logo">
29 <nav>
30 <a href="/">Home</a>
31 <a href="/about">About</a>
32 <a href="/contact">Contact</a>
33 </nav>
34 </header>
35
36 <main>
37 <h1>Welcome</h1>
38 <img src="/images/hero.jpg"
39 srcset="/images/hero.jpg 1x, /images/hero@2x.jpg 2x"
40 alt="Hero">
41
42 <form action="/submit" method="post">
43 <input type="text" name="email">
44 <button>Submit</button>
45 </form>
46 </main>
47
48 <footer>
49 <a href="https://example.com">External Link</a>
50 <a href="#top">Back to Top</a>
51 </footer>
52</body>
53</html>
54```
55
56**When accessed via `/s/alice.bsky.social/mysite/`, the HTML is rewritten to:**
57```html
58<!DOCTYPE html>
59<html>
60<head>
61 <meta charset="UTF-8">
62 <title>My Site</title>
63 <link rel="stylesheet" href="/s/alice.bsky.social/mysite/style.css">
64 <link rel="icon" href="/s/alice.bsky.social/mysite/favicon.ico">
65 <script src="/s/alice.bsky.social/mysite/app.js"></script>
66</head>
67<body>
68 <header>
69 <img src="/s/alice.bsky.social/mysite/images/logo.png" alt="Logo">
70 <nav>
71 <a href="/s/alice.bsky.social/mysite/">Home</a>
72 <a href="/s/alice.bsky.social/mysite/about">About</a>
73 <a href="/s/alice.bsky.social/mysite/contact">Contact</a>
74 </nav>
75 </header>
76
77 <main>
78 <h1>Welcome</h1>
79 <img src="/s/alice.bsky.social/mysite/images/hero.jpg"
80 srcset="/s/alice.bsky.social/mysite/images/hero.jpg 1x, /s/alice.bsky.social/mysite/images/hero@2x.jpg 2x"
81 alt="Hero">
82
83 <form action="/s/alice.bsky.social/mysite/submit" method="post">
84 <input type="text" name="email">
85 <button>Submit</button>
86 </form>
87 </main>
88
89 <footer>
90 <a href="https://example.com">External Link</a>
91 <a href="#top">Back to Top</a>
92 </footer>
93</body>
94</html>
95```
96
97## What's Preserved
98
99Notice that:
100- ✅ Absolute paths are rewritten: `/style.css` → `/s/alice.bsky.social/mysite/style.css`
101- ✅ External URLs are preserved: `https://example.com` stays the same
102- ✅ Anchors are preserved: `#top` stays the same
103- ✅ The rewriting is safe and won't break your site
104
105## Supported Attributes
106
107The rewriter handles these HTML attributes:
108- `src` - images, scripts, iframes, videos, audio
109- `href` - links, stylesheets
110- `action` - forms
111- `data` - objects
112- `poster` - video posters
113- `srcset` - responsive images
114
115## Testing Your Site
116
117To test if your site works with path rewriting:
118
1191. Upload your site to your PDS as a `place.wisp.fs` record
1202. Access it via: `https://hosting.wisp.place/s/YOUR_HANDLE/SITE_NAME/`
1213. Check that all resources load correctly
122
123If you're using relative paths already (like `./style.css` or `../images/logo.png`), they'll work without any rewriting.