| … | … | @@ -2,29 +2,336 @@ |
| 2 | 2 | <html lang="en"> |
| 3 | 3 | <head> |
| 4 | 4 | <meta charset="utf-8" /> |
| 5 | | <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> |
| 6 | | <meta name="theme-color" content="#f6f6ef" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| 6 | <meta name="theme-color" content="#ff6600" /> |
| 7 | 7 | <title>p2pbuilders</title> |
| 8 | | <link rel="stylesheet" href="./styles.css" /> |
| 8 | <meta name="description" content="A permissionless peer-to-peer hacker news for anons who build p2p. No servers. No accounts. Run it in your terminal." /> |
| 9 | <meta property="og:title" content="p2pbuilders" /> |
| 10 | <meta property="og:description" content="Permissionless P2P hacker news. Anons who build peer-to-peer because freedom." /> |
| 11 | <meta property="og:type" content="website" /> |
| 12 | <style> |
| 13 | :root { |
| 14 | --bg: #f6f6ef; |
| 15 | --fg: #0b0f14; |
| 16 | --dim: #555; |
| 17 | --faint: #828282; |
| 18 | --orange: #ff6600; |
| 19 | --border: #e0e0d2; |
| 20 | --code-bg: #ebebe1; |
| 21 | } |
| 22 | |
| 23 | @media (prefers-color-scheme: dark) { |
| 24 | :root { |
| 25 | --bg: #14130e; |
| 26 | --fg: #ebe7d7; |
| 27 | --dim: #aaa69a; |
| 28 | --faint: #7a7568; |
| 29 | --orange: #ff7a1a; |
| 30 | --border: #2c2a22; |
| 31 | --code-bg: #1b1a15; |
| 32 | } |
| 33 | } |
| 34 | |
| 35 | * { box-sizing: border-box; } |
| 36 | html, body { |
| 37 | margin: 0; |
| 38 | padding: 0; |
| 39 | background: var(--bg); |
| 40 | color: var(--fg); |
| 41 | font-family: Verdana, Geneva, sans-serif; |
| 42 | line-height: 1.5; |
| 43 | -webkit-text-size-adjust: 100%; |
| 44 | } |
| 45 | |
| 46 | a { color: var(--fg); } |
| 47 | a:hover { color: var(--orange); } |
| 48 | |
| 49 | header { |
| 50 | background: var(--orange); |
| 51 | padding: 6px 12px; |
| 52 | } |
| 53 | header .bar { |
| 54 | max-width: 720px; |
| 55 | margin: 0 auto; |
| 56 | display: flex; |
| 57 | align-items: baseline; |
| 58 | gap: 12px; |
| 59 | } |
| 60 | header .brand { |
| 61 | color: #000; |
| 62 | font-weight: 700; |
| 63 | font-size: 14px; |
| 64 | letter-spacing: -0.01em; |
| 65 | text-decoration: none; |
| 66 | } |
| 67 | header .nav { |
| 68 | display: flex; |
| 69 | gap: 12px; |
| 70 | font-size: 13px; |
| 71 | } |
| 72 | header .nav a { |
| 73 | color: #000; |
| 74 | text-decoration: none; |
| 75 | } |
| 76 | header .nav a:hover { text-decoration: underline; } |
| 77 | |
| 78 | main { |
| 79 | max-width: 720px; |
| 80 | margin: 0 auto; |
| 81 | padding: 24px 16px 80px; |
| 82 | font-size: 15px; |
| 83 | } |
| 84 | |
| 85 | h1 { |
| 86 | font-size: 24px; |
| 87 | margin: 0 0 6px; |
| 88 | letter-spacing: -0.02em; |
| 89 | } |
| 90 | h2 { |
| 91 | font-size: 17px; |
| 92 | margin: 36px 0 8px; |
| 93 | color: var(--fg); |
| 94 | letter-spacing: -0.01em; |
| 95 | } |
| 96 | h2 .num { |
| 97 | color: var(--faint); |
| 98 | font-size: 13px; |
| 99 | font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; |
| 100 | margin-right: 6px; |
| 101 | } |
| 102 | p { margin: 8px 0; } |
| 103 | .tagline { |
| 104 | color: var(--dim); |
| 105 | font-size: 15px; |
| 106 | margin: 4px 0 20px; |
| 107 | } |
| 108 | |
| 109 | code, pre { |
| 110 | font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; |
| 111 | font-size: 13px; |
| 112 | } |
| 113 | code { |
| 114 | background: var(--code-bg); |
| 115 | padding: 1px 5px; |
| 116 | border-radius: 3px; |
| 117 | } |
| 118 | pre { |
| 119 | background: var(--code-bg); |
| 120 | padding: 10px 12px; |
| 121 | border-radius: 4px; |
| 122 | border: 1px solid var(--border); |
| 123 | overflow-x: auto; |
| 124 | line-height: 1.5; |
| 125 | margin: 10px 0; |
| 126 | } |
| 127 | pre code { background: transparent; padding: 0; } |
| 128 | |
| 129 | .manifesto p { |
| 130 | margin: 12px 0; |
| 131 | color: var(--fg); |
| 132 | } |
| 133 | .manifesto em { |
| 134 | font-style: normal; |
| 135 | color: var(--orange); |
| 136 | } |
| 137 | |
| 138 | ol.steps { |
| 139 | counter-reset: step; |
| 140 | list-style: none; |
| 141 | padding: 0; |
| 142 | margin: 16px 0; |
| 143 | } |
| 144 | ol.steps > li { |
| 145 | counter-increment: step; |
| 146 | margin: 20px 0; |
| 147 | padding-left: 32px; |
| 148 | position: relative; |
| 149 | } |
| 150 | ol.steps > li::before { |
| 151 | content: counter(step) "."; |
| 152 | position: absolute; |
| 153 | left: 0; |
| 154 | top: 0; |
| 155 | color: var(--orange); |
| 156 | font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; |
| 157 | font-weight: 700; |
| 158 | font-size: 14px; |
| 159 | } |
| 160 | ol.steps > li p { margin: 4px 0; } |
| 161 | |
| 162 | .cta { |
| 163 | display: inline-block; |
| 164 | margin-top: 8px; |
| 165 | padding: 10px 16px; |
| 166 | background: var(--orange); |
| 167 | color: #000; |
| 168 | text-decoration: none; |
| 169 | font-weight: 700; |
| 170 | border-radius: 4px; |
| 171 | } |
| 172 | .cta:hover { filter: brightness(1.08); color: #000; } |
| 173 | |
| 174 | .pill { |
| 175 | display: inline-block; |
| 176 | font-size: 11px; |
| 177 | padding: 2px 8px; |
| 178 | background: var(--code-bg); |
| 179 | border: 1px solid var(--border); |
| 180 | border-radius: 999px; |
| 181 | color: var(--dim); |
| 182 | margin-right: 4px; |
| 183 | font-family: ui-monospace, monospace; |
| 184 | } |
| 185 | |
| 186 | footer { |
| 187 | max-width: 720px; |
| 188 | margin: 40px auto 20px; |
| 189 | padding: 24px 16px 0; |
| 190 | border-top: 1px solid var(--border); |
| 191 | font-size: 12px; |
| 192 | color: var(--faint); |
| 193 | line-height: 1.8; |
| 194 | } |
| 195 | footer a { color: var(--faint); } |
| 196 | footer a:hover { color: var(--orange); } |
| 197 | footer .powered { |
| 198 | color: var(--dim); |
| 199 | font-weight: 600; |
| 200 | margin-top: 12px; |
| 201 | } |
| 202 | footer .powered a { |
| 203 | color: var(--orange); |
| 204 | text-decoration: none; |
| 205 | } |
| 206 | |
| 207 | @media (max-width: 500px) { |
| 208 | main { padding: 20px 14px 80px; font-size: 14px; } |
| 209 | h1 { font-size: 22px; } |
| 210 | pre { font-size: 12px; } |
| 211 | } |
| 212 | </style> |
| 9 | 213 | </head> |
| 10 | 214 | <body> |
| 11 | | <header class="topbar"> |
| 12 | | <div class="topbar-inner"> |
| 13 | | <a href="#/" class="brand">p2pbuilders</a> |
| 14 | | <nav class="top-nav"> |
| 15 | | <a href="#/" class="nav-link">top</a> |
| 16 | | <a href="#/new" class="nav-link">new</a> |
| 17 | | <a href="#/submit" class="nav-link submit">submit</a> |
| 18 | | <a href="#/me" class="nav-link">me</a> |
| 19 | | <a href="#/settings" class="nav-link">settings</a> |
| 215 | |
| 216 | <header> |
| 217 | <div class="bar"> |
| 218 | <a class="brand" href="/">p2pbuilders</a> |
| 219 | <nav class="nav"> |
| 220 | <a href="#manifesto">manifesto</a> |
| 221 | <a href="#board">board</a> |
| 222 | <a href="#join">join</a> |
| 223 | <a href="https://github.com/bigdestiny2/p2pbuilders">github</a> |
| 20 | 224 | </nav> |
| 21 | 225 | </div> |
| 22 | 226 | </header> |
| 23 | | <main id="view" class="view"></main> |
| 24 | | <footer class="statusbar"> |
| 25 | | <span id="status">connecting…</span> |
| 26 | | <span id="me" class="me"></span> |
| 227 | |
| 228 | <main> |
| 229 | <h1>p2pbuilders</h1> |
| 230 | <p class="tagline">a permissionless hacker news for anons who build peer-to-peer.</p> |
| 231 | |
| 232 | <p> |
| 233 | <span class="pill">pear</span> |
| 234 | <span class="pill">bare</span> |
| 235 | <span class="pill">hypercore</span> |
| 236 | <span class="pill">hyperswarm</span> |
| 237 | <span class="pill">p2p-hiverelay</span> |
| 238 | </p> |
| 239 | |
| 240 | <section id="manifesto" class="manifesto"> |
| 241 | <h2><span class="num">01.</span>who we are</h2> |
| 242 | |
| 243 | <p> |
| 244 | we're the people building peer-to-peer software because we think the |
| 245 | internet should work <em>without asking permission</em>. |
| 246 | </p> |
| 247 | |
| 248 | <p> |
| 249 | no servers. no sign-ups. no account recovery. no companies to shut down. |
| 250 | no terms of service. no one to complain to. just keys, protocols, and code. |
| 251 | </p> |
| 252 | |
| 253 | <p> |
| 254 | if centralized services are fragile, we work on the alternative. |
| 255 | if your data lives in someone else's database, you don't own it. |
| 256 | if your identity requires their approval, you don't have one. |
| 257 | this isn't a rant, it's a building project. |
| 258 | </p> |
| 259 | |
| 260 | <p> |
| 261 | anonymity here isn't pretending. it's the default. everyone on this |
| 262 | network is a 32-byte public key. whatever name you go by is the one |
| 263 | you pick. |
| 264 | </p> |
| 265 | </section> |
| 266 | |
| 267 | <section id="board"> |
| 268 | <h2><span class="num">02.</span>the message board</h2> |
| 269 | |
| 270 | <p> |
| 271 | p2pbuilders is a hacker news clone that runs on no servers. every |
| 272 | user runs their own node. posts sync peer-to-peer via hyperswarm. |
| 273 | every post is signed by its author's hypercore. reputation-weighted |
| 274 | voting, hashcash-gated submissions, no central moderator. |
| 275 | </p> |
| 276 | |
| 277 | <p> |
| 278 | it lives in your terminal. no web app. no phone app. no electron bloat. |
| 279 | you type <code>pear run pear://<key></code> and you're on it. |
| 280 | </p> |
| 281 | </section> |
| 282 | |
| 283 | <section id="join"> |
| 284 | <h2><span class="num">03.</span>join</h2> |
| 285 | |
| 286 | <p>takes two minutes. you'll need <a href="https://nodejs.org">node.js</a> installed.</p> |
| 287 | |
| 288 | <ol class="steps"> |
| 289 | |
| 290 | <li> |
| 291 | <p><strong>install pear</strong> — the p2p runtime holepunch ships.</p> |
| 292 | <pre><code>npm install -g pear |
| 293 | pear</code></pre> |
| 294 | <p>the second command bootstraps the real runtime. takes 30s on first run.</p> |
| 295 | </li> |
| 296 | |
| 297 | <li> |
| 298 | <p><strong>add pear to your path.</strong> one-time setup.</p> |
| 299 | <pre><code>echo 'export PATH="$HOME/Library/Application Support/pear/bin:$PATH"' >> ~/.zshrc |
| 300 | source ~/.zshrc |
| 301 | which pear |
| 302 | # should print: /Users/you/Library/Application Support/pear/bin/pear</code></pre> |
| 303 | </li> |
| 304 | |
| 305 | <li> |
| 306 | <p><strong>run the board.</strong></p> |
| 307 | <pre><code>pear run pear://gopfpwat99tcuaakasfnftrds3j6t7srdmi3qidbhm9xeizt1a5y</code></pre> |
| 308 | <p>type <code>help</code> at the <code>›</code> prompt. submit a post to say hi.</p> |
| 309 | </li> |
| 310 | |
| 311 | </ol> |
| 312 | |
| 313 | <p style="margin-top:30px"> |
| 314 | <a class="cta" href="https://github.com/bigdestiny2/p2pbuilders#readme">full docs on github</a> |
| 315 | </p> |
| 316 | </section> |
| 317 | |
| 318 | </main> |
| 319 | |
| 320 | <footer> |
| 321 | <p> |
| 322 | no cookies. no tracking. no accounts. no server.<br> |
| 323 | this page is static; it calls nothing home. |
| 324 | </p> |
| 325 | <p> |
| 326 | <a href="https://github.com/bigdestiny2/p2pbuilders">github</a> · |
| 327 | <a href="https://github.com/bigdestiny2/p2pbuilders/blob/main/SPEC.md">spec</a> · |
| 328 | <a href="https://docs.pears.com">pear runtime</a> |
| 329 | </p> |
| 330 | <p>apache-2.0</p> |
| 331 | <p class="powered"> |
| 332 | powered by <a href="https://github.com/bigdestiny2/P2P-Hiverelay">hiverelay</a> |
| 333 | </p> |
| 27 | 334 | </footer> |
| 28 | | <script src="./app.js" type="module"></script> |
| 335 | |
| 29 | 336 | </body> |
| 30 | 337 | </html> |