comparing 0bd12ac16f1eff9b0702b11cad8fb54a5f4605fe and op/tupssoolqvus on tangled.org/site

+1

.gitignore

··· 4 4 *.ttf 5 5 *.woff2 6 6 !.gitignore 7 + .DS_Store

+16

.tangled/workflows/deploy.yaml

··· 1 + engine: nixery 2 + when: 3 + - event: ["push", "pull_request"] 4 + branch: ["master"] 5 + 6 + dependencies: 7 + nixpkgs: 8 + - nodejs 9 + 10 + steps: 11 + - name: build site 12 + command: | 13 + nix develop --command bash -c 'vite build' 14 + - name: deploy 15 + command: | 16 + npx --yes wrangler pages deploy --branch master --project-name tangled-blog ./build/

+1 -1

config.yaml

··· 2 2 - tailwindcss -i input.css -o static/tw.css 3 3 title: tangled engineering 4 4 # note the trailing slash! 5 - url: "https://tangled.sh" 5 + url: "https://blog.tangled.sh/" 6 6 description: "" 7 7 author: 8 8 name: "Anirudh Oppiliappan"

+6 -6

flake.lock

··· 69 69 "nixpkgs": "nixpkgs_2" 70 70 }, 71 71 "locked": { 72 - "lastModified": 1744745948, 73 - "narHash": "sha256-8Sda70LhLVDXChifA52xdaIyCS5Sr7UB2bN0Qe4v4eY=", 72 + "lastModified": 1768109018, 73 + "narHash": "sha256-ePHsZ62UURGy44rkLva16RILZKI7PWcnGzyrP5Qmqt8=", 74 74 "ref": "refs/heads/master", 75 - "rev": "92c9c9f24b0f0b78c4a81ab2d3490c756813fe71", 76 - "revCount": 89, 75 + "rev": "0368173f7a3672916d26ac7c3183dd9998d1a514", 76 + "revCount": 98, 77 77 "type": "git", 78 - "url": "https://tangled.sh/@icyphox.sh/vite" 78 + "url": "https://tangled.org/oppi.li/vite" 79 79 }, 80 80 "original": { 81 81 "type": "git", 82 - "url": "https://tangled.sh/@icyphox.sh/vite" 82 + "url": "https://tangled.org/oppi.li/vite" 83 83 } 84 84 } 85 85 },

+1 -1

flake.nix

··· 4 4 inputs = { 5 5 nixpkgs.url = "github:nixos/nixpkgs"; 6 6 vite = { 7 - url = "git+https://tangled.sh/@icyphox.sh/vite"; 7 + url = "git+https://tangled.org/oppi.li/vite"; 8 8 flake = true; 9 9 }; 10 10 inter-fonts-src = {

+928 -58

input.css

··· 2 2 @tailwind components; 3 3 @tailwind utilities; 4 4 @layer base { 5 - @font-face { 6 - font-family: "InterVariable"; 7 - src: url("/static/fonts/InterVariable.woff2") format("woff2"); 8 - font-weight: normal; 9 - font-style: normal; 10 - font-display: swap; 11 - } 5 + @font-face { 6 + font-family: "InterVariable"; 7 + src: url("/static/fonts/InterVariable.woff2") format("woff2"); 8 + font-weight: normal; 9 + font-style: normal; 10 + font-display: swap; 11 + } 12 12 13 - @font-face { 14 - font-family: "InterVariable"; 15 - src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2"); 16 - font-weight: normal; 17 - font-style: italic; 18 - font-display: swap; 19 - } 13 + @font-face { 14 + font-family: "InterVariable"; 15 + src: url("/static/fonts/InterVariable-Italic.woff2") format("woff2"); 16 + font-weight: normal; 17 + font-style: italic; 18 + font-display: swap; 19 + } 20 20 21 - @font-face { 22 - font-family: "InterDisplay"; 23 - src: url("/static/fonts/InterDisplay-Regular.woff2") format("woff2"); 24 - font-weight: normal; 25 - font-style: normal; 26 - font-display: swap; 27 - } 21 + @font-face { 22 + font-family: "InterVariable"; 23 + src: url("/static/fonts/InterDisplay-Bold.woff2") format("woff2"); 24 + font-weight: bold; 25 + font-style: normal; 26 + font-display: swap; 27 + } 28 28 29 - @font-face { 30 - font-family: "IBMPlexMono"; 31 - src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); 32 - font-weight: normal; 33 - font-style: italic; 34 - font-display: swap; 35 - } 29 + @font-face { 30 + font-family: "InterVariable"; 31 + src: url("/static/fonts/InterDisplay-BoldItalic.woff2") format("woff2"); 32 + font-weight: bold; 33 + font-style: italic; 34 + font-display: swap; 35 + } 36 36 37 - h1 { 38 - @apply text-2xl; 39 - @apply text-black; 40 - @apply font-bold; 37 + @font-face { 38 + font-family: "IBMPlexMono"; 39 + src: url("/static/fonts/IBMPlexMono-Regular.woff2") format("woff2"); 40 + font-weight: normal; 41 + font-style: normal; 42 + font-display: swap; 43 + } 44 + 45 + @font-face { 46 + font-family: "IBMPlexMono"; 47 + src: url("/static/fonts/IBMPlexMono-Italic.woff2") format("woff2"); 48 + font-weight: normal; 49 + font-style: italic; 50 + font-display: swap; 51 + } 52 + 53 + @font-face { 54 + font-family: "IBMPlexMono"; 55 + src: url("/static/fonts/IBMPlexMono-Bold.woff2") format("woff2"); 56 + font-weight: bold; 57 + font-style: normal; 58 + font-display: swap; 59 + } 60 + 61 + @font-face { 62 + font-family: "IBMPlexMono"; 63 + src: url("/static/fonts/IBMPlexMono-BoldItalic.woff2") format("woff2"); 64 + font-weight: bold; 65 + font-style: italic; 66 + font-display: swap; 41 67 } 42 68 43 69 ::selection { 44 - @apply bg-yellow-400; 45 - @apply bg-opacity-30; 70 + @apply bg-yellow-400 text-black bg-opacity-30 dark:bg-yellow-600 dark:bg-opacity-50 dark:text-white; 46 71 } 47 72 48 73 @layer base { 49 74 html { 50 - font-size: 15px; 75 + font-size: 14px; 76 + scrollbar-gutter: stable; 51 77 } 52 78 @supports (font-variation-settings: normal) { 53 - html { 54 - font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'tnum' 1; 55 - } 79 + html { 80 + font-feature-settings: 81 + "kern" 1, 82 + "liga" 1, 83 + "cv05" 1, 84 + "tnum" 1; 85 + } 86 + } 87 + 88 + img { 89 + @apply border border-gray-200 rounded dark:border-gray-700; 90 + } 91 + 92 + img.icon { 93 + @apply border-0 dark:brightness-100 dark:opacity-100; 56 94 } 57 95 58 96 a { 59 97 @apply no-underline text-black hover:underline hover:text-gray-800 dark:text-white dark:hover:text-gray-300; 60 98 } 61 99 62 - img { 63 - @apply dark:brightness-75 dark:opacity-90; 64 - } 65 - 66 100 label { 67 - @apply block mb-2 text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100; 101 + @apply block text-gray-900 text-sm font-bold py-2 uppercase dark:text-gray-100; 68 102 } 69 103 input { 70 - @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400; 104 + @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400; 71 105 } 72 106 textarea { 73 - @apply bg-white border border-gray-400 rounded-sm focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400; 107 + @apply border border-gray-400 block rounded bg-gray-50 focus:ring-black p-3 dark:bg-gray-800 dark:border-gray-600 dark:text-white dark:focus:ring-gray-400; 74 108 } 75 109 details summary::-webkit-details-marker { 76 110 display: none; 77 111 } 112 + 113 + code { 114 + @apply font-mono rounded bg-gray-100 dark:bg-gray-700 text-black dark:text-white; 115 + } 78 116 } 79 117 80 118 @layer components { 81 119 .btn { 82 - @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center 83 - justify-center bg-transparent px-2 pb-[0.2rem] text-base 84 - text-gray-900 before:absolute before:inset-0 before:-z-10 85 - before:block before:rounded-sm before:border before:border-gray-200 86 - before:bg-white before:drop-shadow-sm 87 - before:content-[''] hover:before:border-gray-300 88 - hover:before:bg-gray-50 89 - hover:before:shadow-[0_2px_2px_0_rgba(20,20,96,0.1),inset_0_-2px_0_0_#f5f5f5] 90 - focus:outline-none focus-visible:before:outline 91 - focus-visible:before:outline-4 focus-visible:before:outline-gray-500 92 - active:before:shadow-[inset_0_2px_2px_0_rgba(20,20,96,0.1)]; 120 + @apply relative z-10 inline-flex min-h-[30px] cursor-pointer items-center justify-center 121 + bg-transparent px-2 pb-[0.2rem] text-sm text-gray-900 122 + before:absolute before:inset-0 before:-z-10 before:block before:rounded 123 + before:border before:border-gray-200 before:bg-white 124 + before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.1),0_1px_0_0_rgba(0,0,0,0.04)] 125 + before:content-[''] before:transition-all before:duration-150 before:ease-in-out 126 + hover:before:shadow-[inset_0_-2px_0_0_rgba(0,0,0,0.15),0_2px_1px_0_rgba(0,0,0,0.06)] 127 + hover:before:bg-gray-50 128 + dark:hover:before:bg-gray-700 129 + active:before:shadow-[inset_0_2px_2px_0_rgba(0,0,0,0.1)] 130 + focus:outline-none focus-visible:before:outline focus-visible:before:outline-2 focus-visible:before:outline-gray-400 131 + disabled:cursor-not-allowed disabled:opacity-50 132 + dark:text-gray-100 dark:before:bg-gray-800 dark:before:border-gray-700; 133 + } 134 + 135 + .btn-create { 136 + @apply btn text-white 137 + before:bg-green-600 hover:before:bg-green-700 138 + dark:before:bg-green-700 dark:hover:before:bg-green-800 139 + before:border before:border-green-700 hover:before:border-green-800 140 + focus-visible:before:outline-green-500 141 + disabled:before:bg-green-400 dark:disabled:before:bg-green-600; 142 + } 143 + 144 + .prose hr { 145 + @apply my-2; 146 + } 147 + 148 + .prose li:has(input) { 149 + @apply list-none; 150 + } 151 + 152 + .prose ul:has(input) { 153 + @apply pl-2; 154 + } 155 + 156 + .prose .heading .anchor { 157 + @apply no-underline mx-2 opacity-0; 158 + } 159 + 160 + .prose .heading:hover .anchor { 161 + @apply opacity-70; 162 + } 163 + 164 + .prose .heading .anchor:hover { 165 + @apply opacity-70; 166 + } 167 + 168 + .prose a.footnote-backref { 169 + @apply no-underline; 170 + } 171 + 172 + .prose a.mention { 173 + @apply no-underline hover:underline font-bold; 174 + } 175 + 176 + .prose li { 177 + @apply my-0 py-0; 178 + } 179 + 180 + .prose ul, 181 + .prose ol { 182 + @apply my-1 py-0; 183 + } 184 + 185 + .prose img { 186 + display: inline; 187 + margin: 0; 188 + vertical-align: middle; 189 + } 190 + 191 + .prose input { 192 + @apply inline-block my-0 mb-1 mx-1; 193 + } 194 + 195 + .prose input[type="checkbox"] { 196 + @apply disabled:accent-blue-500 checked:accent-blue-500 disabled:checked:accent-blue-500; 197 + } 198 + 199 + /* Base callout */ 200 + details[data-callout] { 201 + @apply border-l-4 pl-3 py-2 text-gray-800 dark:text-gray-200 my-4; 202 + } 203 + 204 + details[data-callout] > summary { 205 + @apply font-bold cursor-pointer mb-1; 206 + } 207 + 208 + details[data-callout] > .callout-content { 209 + @apply text-sm leading-snug; 210 + } 211 + 212 + /* Note (blue) */ 213 + details[data-callout="note" i] { 214 + @apply border-blue-400 dark:border-blue-500; 215 + } 216 + details[data-callout="note" i] > summary { 217 + @apply text-blue-700 dark:text-blue-400; 218 + } 219 + 220 + /* Important (purple) */ 221 + details[data-callout="important" i] { 222 + @apply border-purple-400 dark:border-purple-500; 223 + } 224 + details[data-callout="important" i] > summary { 225 + @apply text-purple-700 dark:text-purple-400; 226 + } 227 + 228 + /* Warning (yellow) */ 229 + details[data-callout="warning" i] { 230 + @apply border-yellow-400 dark:border-yellow-500; 231 + } 232 + details[data-callout="warning" i] > summary { 233 + @apply text-yellow-700 dark:text-yellow-400; 234 + } 235 + 236 + /* Caution (red) */ 237 + details[data-callout="caution" i] { 238 + @apply border-red-400 dark:border-red-500; 239 + } 240 + details[data-callout="caution" i] > summary { 241 + @apply text-red-700 dark:text-red-400; 242 + } 243 + 244 + /* Tip (green) */ 245 + details[data-callout="tip" i] { 246 + @apply border-green-400 dark:border-green-500; 247 + } 248 + details[data-callout="tip" i] > summary { 249 + @apply text-green-700 dark:text-green-400; 250 + } 251 + 252 + /* Optional: hide the disclosure arrow like GitHub */ 253 + details[data-callout] > summary::-webkit-details-marker { 254 + display: none; 93 255 } 256 + 94 257 } 95 258 @layer utilities { 96 259 .error { 97 - @apply py-1 text-red-400; 260 + @apply py-1 text-red-400 dark:text-red-300; 98 261 } 99 262 .success { 100 - @apply py-1 text-black; 263 + @apply py-1 text-gray-900 dark:text-gray-100; 101 264 } 102 265 } 266 + 267 + } 268 + 269 + /* Background */ 270 + .bg { 271 + color: #4c4f69; 272 + background-color: #eff1f5; 273 + } 274 + /* PreWrapper */ 275 + .chroma { 276 + color: #4c4f69; 277 + } 278 + /* Error */ 279 + .chroma .err { 280 + color: #d20f39; 281 + } 282 + /* LineLink */ 283 + .chroma .lnlinks { 284 + outline: none; 285 + text-decoration: none; 286 + color: inherit; 287 + } 288 + /* LineTableTD */ 289 + .chroma .lntd { 290 + vertical-align: top; 291 + padding: 0; 292 + margin: 0; 293 + border: 0; 294 + } 295 + /* LineTable */ 296 + .chroma .lntable { 297 + border-spacing: 0; 298 + padding: 0; 299 + margin: 0; 300 + border: 0; 301 + } 302 + /* LineHighlight */ 303 + .chroma .hl { 304 + @apply bg-amber-400/30 dark:bg-amber-500/20; 305 + } 306 + 307 + /* LineNumbersTable */ 308 + .chroma .lnt { 309 + white-space: pre; 310 + -webkit-user-select: none; 311 + user-select: none; 312 + margin-right: 0.4em; 313 + padding: 0 0.4em 0 0.4em; 314 + color: #8c8fa1; 315 + } 316 + /* LineNumbers */ 317 + .chroma .ln { 318 + white-space: pre; 319 + -webkit-user-select: none; 320 + user-select: none; 321 + margin-right: 0.4em; 322 + padding: 0 0.4em 0 0.4em; 323 + color: #8c8fa1; 324 + } 325 + /* Line */ 326 + .chroma .line { 327 + display: flex; 328 + } 329 + /* Keyword */ 330 + .chroma .k { 331 + color: #8839ef; 332 + } 333 + /* KeywordConstant */ 334 + .chroma .kc { 335 + color: #fe640b; 336 + } 337 + /* KeywordDeclaration */ 338 + .chroma .kd { 339 + color: #d20f39; 340 + } 341 + /* KeywordNamespace */ 342 + .chroma .kn { 343 + color: #179299; 344 + } 345 + /* KeywordPseudo */ 346 + .chroma .kp { 347 + color: #8839ef; 348 + } 349 + /* KeywordReserved */ 350 + .chroma .kr { 351 + color: #8839ef; 352 + } 353 + /* KeywordType */ 354 + .chroma .kt { 355 + color: #d20f39; 356 + } 357 + /* NameAttribute */ 358 + .chroma .na { 359 + color: #1e66f5; 360 + } 361 + /* NameBuiltin */ 362 + .chroma .nb { 363 + color: #04a5e5; 364 + } 365 + /* NameBuiltinPseudo */ 366 + .chroma .bp { 367 + color: #04a5e5; 368 + } 369 + /* NameClass */ 370 + .chroma .nc { 371 + color: #df8e1d; 372 + } 373 + /* NameConstant */ 374 + .chroma .no { 375 + color: #df8e1d; 376 + } 377 + /* NameDecorator */ 378 + .chroma .nd { 379 + color: #1e66f5; 380 + font-weight: bold; 381 + } 382 + /* NameEntity */ 383 + .chroma .ni { 384 + color: #179299; 385 + } 386 + /* NameException */ 387 + .chroma .ne { 388 + color: #fe640b; 389 + } 390 + /* NameFunction */ 391 + .chroma .nf { 392 + color: #1e66f5; 393 + } 394 + /* NameFunctionMagic */ 395 + .chroma .fm { 396 + color: #1e66f5; 397 + } 398 + /* NameLabel */ 399 + .chroma .nl { 400 + color: #04a5e5; 401 + } 402 + /* NameNamespace */ 403 + .chroma .nn { 404 + color: #fe640b; 405 + } 406 + /* NameProperty */ 407 + .chroma .py { 408 + color: #fe640b; 409 + } 410 + /* NameTag */ 411 + .chroma .nt { 412 + color: #8839ef; 413 + } 414 + /* NameVariable */ 415 + .chroma .nv { 416 + color: #dc8a78; 417 + } 418 + /* NameVariableClass */ 419 + .chroma .vc { 420 + color: #dc8a78; 421 + } 422 + /* NameVariableGlobal */ 423 + .chroma .vg { 424 + color: #dc8a78; 425 + } 426 + /* NameVariableInstance */ 427 + .chroma .vi { 428 + color: #dc8a78; 429 + } 430 + /* NameVariableMagic */ 431 + .chroma .vm { 432 + color: #dc8a78; 433 + } 434 + /* LiteralString */ 435 + .chroma .s { 436 + color: #40a02b; 437 + } 438 + /* LiteralStringAffix */ 439 + .chroma .sa { 440 + color: #d20f39; 441 + } 442 + /* LiteralStringBacktick */ 443 + .chroma .sb { 444 + color: #40a02b; 445 + } 446 + /* LiteralStringChar */ 447 + .chroma .sc { 448 + color: #40a02b; 449 + } 450 + /* LiteralStringDelimiter */ 451 + .chroma .dl { 452 + color: #1e66f5; 453 + } 454 + /* LiteralStringDoc */ 455 + .chroma .sd { 456 + color: #9ca0b0; 457 + } 458 + /* LiteralStringDouble */ 459 + .chroma .s2 { 460 + color: #40a02b; 461 + } 462 + /* LiteralStringEscape */ 463 + .chroma .se { 464 + color: #1e66f5; 465 + } 466 + /* LiteralStringHeredoc */ 467 + .chroma .sh { 468 + color: #9ca0b0; 469 + } 470 + /* LiteralStringInterpol */ 471 + .chroma .si { 472 + color: #40a02b; 473 + } 474 + /* LiteralStringOther */ 475 + .chroma .sx { 476 + color: #40a02b; 477 + } 478 + /* LiteralStringRegex */ 479 + .chroma .sr { 480 + color: #179299; 481 + } 482 + /* LiteralStringSingle */ 483 + .chroma .s1 { 484 + color: #40a02b; 485 + } 486 + /* LiteralStringSymbol */ 487 + .chroma .ss { 488 + color: #40a02b; 489 + } 490 + /* LiteralNumber */ 491 + .chroma .m { 492 + color: #fe640b; 493 + } 494 + /* LiteralNumberBin */ 495 + .chroma .mb { 496 + color: #fe640b; 497 + } 498 + /* LiteralNumberFloat */ 499 + .chroma .mf { 500 + color: #fe640b; 501 + } 502 + /* LiteralNumberHex */ 503 + .chroma .mh { 504 + color: #fe640b; 505 + } 506 + /* LiteralNumberInteger */ 507 + .chroma .mi { 508 + color: #fe640b; 509 + } 510 + /* LiteralNumberIntegerLong */ 511 + .chroma .il { 512 + color: #fe640b; 513 + } 514 + /* LiteralNumberOct */ 515 + .chroma .mo { 516 + color: #fe640b; 517 + } 518 + /* Operator */ 519 + .chroma .o { 520 + color: #04a5e5; 521 + font-weight: bold; 522 + } 523 + /* OperatorWord */ 524 + .chroma .ow { 525 + color: #04a5e5; 526 + font-weight: bold; 527 + } 528 + /* Comment */ 529 + .chroma .c { 530 + color: #9ca0b0; 531 + font-style: italic; 532 + } 533 + /* CommentHashbang */ 534 + .chroma .ch { 535 + color: #9ca0b0; 536 + font-style: italic; 537 + } 538 + /* CommentMultiline */ 539 + .chroma .cm { 540 + color: #9ca0b0; 541 + font-style: italic; 542 + } 543 + /* CommentSingle */ 544 + .chroma .c1 { 545 + color: #9ca0b0; 546 + font-style: italic; 547 + } 548 + /* CommentSpecial */ 549 + .chroma .cs { 550 + color: #9ca0b0; 551 + font-style: italic; 552 + } 553 + /* CommentPreproc */ 554 + .chroma .cp { 555 + color: #9ca0b0; 556 + font-style: italic; 557 + } 558 + /* CommentPreprocFile */ 559 + .chroma .cpf { 560 + color: #9ca0b0; 561 + font-weight: bold; 562 + font-style: italic; 563 + } 564 + /* GenericDeleted */ 565 + .chroma .gd { 566 + color: #d20f39; 567 + background-color: oklch(93.6% 0.032 17.717); 568 + } 569 + /* GenericEmph */ 570 + .chroma .ge { 571 + font-style: italic; 572 + } 573 + /* GenericError */ 574 + .chroma .gr { 575 + color: #d20f39; 576 + } 577 + /* GenericHeading */ 578 + .chroma .gh { 579 + color: #fe640b; 580 + font-weight: bold; 581 + } 582 + /* GenericInserted */ 583 + .chroma .gi { 584 + color: #40a02b; 585 + background-color: oklch(96.2% 0.044 156.743); 586 + } 587 + /* GenericStrong */ 588 + .chroma .gs { 589 + font-weight: bold; 590 + } 591 + /* GenericSubheading */ 592 + .chroma .gu { 593 + color: #fe640b; 594 + font-weight: bold; 595 + } 596 + /* GenericTraceback */ 597 + .chroma .gt { 598 + color: #d20f39; 599 + } 600 + /* GenericUnderline */ 601 + .chroma .gl { 602 + text-decoration: underline; 603 + } 604 + 605 + @media (prefers-color-scheme: dark) { 606 + /* Background */ 607 + .bg { 608 + color: #cad3f5; 609 + background-color: #24273a; 610 + } 611 + /* PreWrapper */ 612 + .chroma { 613 + color: #cad3f5; 614 + } 615 + /* Error */ 616 + .chroma .err { 617 + color: #ed8796; 618 + } 619 + /* LineLink */ 620 + .chroma .lnlinks { 621 + outline: none; 622 + text-decoration: none; 623 + color: inherit; 624 + } 625 + /* LineTableTD */ 626 + .chroma .lntd { 627 + vertical-align: top; 628 + padding: 0; 629 + margin: 0; 630 + border: 0; 631 + } 632 + /* LineTable */ 633 + .chroma .lntable { 634 + border-spacing: 0; 635 + padding: 0; 636 + margin: 0; 637 + border: 0; 638 + } 639 + /* LineHighlight */ 640 + .chroma .hl { 641 + background-color: #494d64; 642 + } 643 + /* LineNumbersTable */ 644 + .chroma .lnt { 645 + white-space: pre; 646 + -webkit-user-select: none; 647 + user-select: none; 648 + margin-right: 0.4em; 649 + padding: 0 0.4em 0 0.4em; 650 + color: #8087a2; 651 + } 652 + /* LineNumbers */ 653 + .chroma .ln { 654 + white-space: pre; 655 + -webkit-user-select: none; 656 + user-select: none; 657 + margin-right: 0.4em; 658 + padding: 0 0.4em 0 0.4em; 659 + color: #8087a2; 660 + } 661 + /* Line */ 662 + .chroma .line { 663 + display: flex; 664 + } 665 + /* Keyword */ 666 + .chroma .k { 667 + color: #c6a0f6; 668 + } 669 + /* KeywordConstant */ 670 + .chroma .kc { 671 + color: #f5a97f; 672 + } 673 + /* KeywordDeclaration */ 674 + .chroma .kd { 675 + color: #ed8796; 676 + } 677 + /* KeywordNamespace */ 678 + .chroma .kn { 679 + color: #8bd5ca; 680 + } 681 + /* KeywordPseudo */ 682 + .chroma .kp { 683 + color: #c6a0f6; 684 + } 685 + /* KeywordReserved */ 686 + .chroma .kr { 687 + color: #c6a0f6; 688 + } 689 + /* KeywordType */ 690 + .chroma .kt { 691 + color: #ed8796; 692 + } 693 + /* NameAttribute */ 694 + .chroma .na { 695 + color: #8aadf4; 696 + } 697 + /* NameBuiltin */ 698 + .chroma .nb { 699 + color: #91d7e3; 700 + } 701 + /* NameBuiltinPseudo */ 702 + .chroma .bp { 703 + color: #91d7e3; 704 + } 705 + /* NameClass */ 706 + .chroma .nc { 707 + color: #eed49f; 708 + } 709 + /* NameConstant */ 710 + .chroma .no { 711 + color: #eed49f; 712 + } 713 + /* NameDecorator */ 714 + .chroma .nd { 715 + color: #8aadf4; 716 + font-weight: bold; 717 + } 718 + /* NameEntity */ 719 + .chroma .ni { 720 + color: #8bd5ca; 721 + } 722 + /* NameException */ 723 + .chroma .ne { 724 + color: #f5a97f; 725 + } 726 + /* NameFunction */ 727 + .chroma .nf { 728 + color: #8aadf4; 729 + } 730 + /* NameFunctionMagic */ 731 + .chroma .fm { 732 + color: #8aadf4; 733 + } 734 + /* NameLabel */ 735 + .chroma .nl { 736 + color: #91d7e3; 737 + } 738 + /* NameNamespace */ 739 + .chroma .nn { 740 + color: #f5a97f; 741 + } 742 + /* NameProperty */ 743 + .chroma .py { 744 + color: #f5a97f; 745 + } 746 + /* NameTag */ 747 + .chroma .nt { 748 + color: #c6a0f6; 749 + } 750 + /* NameVariable */ 751 + .chroma .nv { 752 + color: #f4dbd6; 753 + } 754 + /* NameVariableClass */ 755 + .chroma .vc { 756 + color: #f4dbd6; 757 + } 758 + /* NameVariableGlobal */ 759 + .chroma .vg { 760 + color: #f4dbd6; 761 + } 762 + /* NameVariableInstance */ 763 + .chroma .vi { 764 + color: #f4dbd6; 765 + } 766 + /* NameVariableMagic */ 767 + .chroma .vm { 768 + color: #f4dbd6; 769 + } 770 + /* LiteralString */ 771 + .chroma .s { 772 + color: #a6da95; 773 + } 774 + /* LiteralStringAffix */ 775 + .chroma .sa { 776 + color: #ed8796; 777 + } 778 + /* LiteralStringBacktick */ 779 + .chroma .sb { 780 + color: #a6da95; 781 + } 782 + /* LiteralStringChar */ 783 + .chroma .sc { 784 + color: #a6da95; 785 + } 786 + /* LiteralStringDelimiter */ 787 + .chroma .dl { 788 + color: #8aadf4; 789 + } 790 + /* LiteralStringDoc */ 791 + .chroma .sd { 792 + color: #6e738d; 793 + } 794 + /* LiteralStringDouble */ 795 + .chroma .s2 { 796 + color: #a6da95; 797 + } 798 + /* LiteralStringEscape */ 799 + .chroma .se { 800 + color: #8aadf4; 801 + } 802 + /* LiteralStringHeredoc */ 803 + .chroma .sh { 804 + color: #6e738d; 805 + } 806 + /* LiteralStringInterpol */ 807 + .chroma .si { 808 + color: #a6da95; 809 + } 810 + /* LiteralStringOther */ 811 + .chroma .sx { 812 + color: #a6da95; 813 + } 814 + /* LiteralStringRegex */ 815 + .chroma .sr { 816 + color: #8bd5ca; 817 + } 818 + /* LiteralStringSingle */ 819 + .chroma .s1 { 820 + color: #a6da95; 821 + } 822 + /* LiteralStringSymbol */ 823 + .chroma .ss { 824 + color: #a6da95; 825 + } 826 + /* LiteralNumber */ 827 + .chroma .m { 828 + color: #f5a97f; 829 + } 830 + /* LiteralNumberBin */ 831 + .chroma .mb { 832 + color: #f5a97f; 833 + } 834 + /* LiteralNumberFloat */ 835 + .chroma .mf { 836 + color: #f5a97f; 837 + } 838 + /* LiteralNumberHex */ 839 + .chroma .mh { 840 + color: #f5a97f; 841 + } 842 + /* LiteralNumberInteger */ 843 + .chroma .mi { 844 + color: #f5a97f; 845 + } 846 + /* LiteralNumberIntegerLong */ 847 + .chroma .il { 848 + color: #f5a97f; 849 + } 850 + /* LiteralNumberOct */ 851 + .chroma .mo { 852 + color: #f5a97f; 853 + } 854 + /* Operator */ 855 + .chroma .o { 856 + color: #91d7e3; 857 + font-weight: bold; 858 + } 859 + /* OperatorWord */ 860 + .chroma .ow { 861 + color: #91d7e3; 862 + font-weight: bold; 863 + } 864 + /* Comment */ 865 + .chroma .c { 866 + color: #6e738d; 867 + font-style: italic; 868 + } 869 + /* CommentHashbang */ 870 + .chroma .ch { 871 + color: #6e738d; 872 + font-style: italic; 873 + } 874 + /* CommentMultiline */ 875 + .chroma .cm { 876 + color: #6e738d; 877 + font-style: italic; 878 + } 879 + /* CommentSingle */ 880 + .chroma .c1 { 881 + color: #6e738d; 882 + font-style: italic; 883 + } 884 + /* CommentSpecial */ 885 + .chroma .cs { 886 + color: #6e738d; 887 + font-style: italic; 888 + } 889 + /* CommentPreproc */ 890 + .chroma .cp { 891 + color: #6e738d; 892 + font-style: italic; 893 + } 894 + /* CommentPreprocFile */ 895 + .chroma .cpf { 896 + color: #6e738d; 897 + font-weight: bold; 898 + font-style: italic; 899 + } 900 + /* GenericDeleted */ 901 + .chroma .gd { 902 + color: #ed8796; 903 + background-color: oklch(44.4% 0.177 26.899 / 0.5); 904 + } 905 + /* GenericEmph */ 906 + .chroma .ge { 907 + font-style: italic; 908 + } 909 + /* GenericError */ 910 + .chroma .gr { 911 + color: #ed8796; 912 + } 913 + /* GenericHeading */ 914 + .chroma .gh { 915 + color: #f5a97f; 916 + font-weight: bold; 917 + } 918 + /* GenericInserted */ 919 + .chroma .gi { 920 + color: #a6da95; 921 + background-color: oklch(44.8% 0.119 151.328 / 0.5); 922 + } 923 + /* GenericStrong */ 924 + .chroma .gs { 925 + font-weight: bold; 926 + } 927 + /* GenericSubheading */ 928 + .chroma .gu { 929 + color: #f5a97f; 930 + font-weight: bold; 931 + } 932 + /* GenericTraceback */ 933 + .chroma .gt { 934 + color: #ed8796; 935 + } 936 + /* GenericUnderline */ 937 + .chroma .gl { 938 + text-decoration: underline; 939 + } 940 + } 941 + 942 + actor-typeahead { 943 + --color-background: #ffffff; 944 + --color-border: #d1d5db; 945 + --color-shadow: #000000; 946 + --color-hover: #f9fafb; 947 + --color-avatar-fallback: #e5e7eb; 948 + --radius: 0.0; 949 + --padding-menu: 0.0rem; 950 + z-index: 1000; 951 + } 952 + 953 + actor-typeahead::part(handle) { 954 + color: #111827; 955 + } 956 + 957 + actor-typeahead::part(menu) { 958 + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); 959 + } 960 + 961 + @media (prefers-color-scheme: dark) { 962 + actor-typeahead { 963 + --color-background: #1f2937; 964 + --color-border: #4b5563; 965 + --color-shadow: #000000; 966 + --color-hover: #374151; 967 + --color-avatar-fallback: #4b5563; 968 + } 969 + 970 + actor-typeahead::part(handle) { 971 + color: #f9fafb; 972 + } 103 973 }

+3

pages/_redirects

··· 1 + /blog/ / 200 2 + /blog/feed.xml /blog/feed.xml 200 3 + /blog/* /:splat

+160

pages/blog/6-months.md

··· 1 + --- 2 + atroot: true 3 + template: 4 + slug: 6-months 5 + title: 6 months of Tangled 6 + subtitle: a quick recap, and notes on the future 7 + date: 2025-10-21 8 + image: /static/img/6-months.png 9 + authors: 10 + - name: Anirudh 11 + email: anirudh@tangled.org 12 + handle: anirudh.fi 13 + - name: Akshay 14 + email: akshay@tangled.org 15 + handle: oppi.li 16 + draft: false 17 + --- 18 + 19 + Hello Tanglers! It's been over 6 months since we first announced 20 + Tangled, so we figured we'd do a quick retrospective of what we built so 21 + far and what's next. 22 + 23 + If you're new here, here's a quick overview: Tangled is a git hosting 24 + and collaboration platform built on top of the [AT 25 + Protocol](https://atproto.com). You can read a bit more about our 26 + architecture [here](/intro). 27 + 28 + ## new logo and mascot: dolly! 29 + 30 + Tangled finally has a logo! Designed by Akshay himself, Dolly is in 31 + reference to the first ever *cloned* mammal. For a full set of brand assets and guidelines, see our new [branding page](https://tangled.org/brand). 32 + 33 + ![logo with text](/static/img/logo_with_text.jpeg) 34 + 35 + With that, let's recap the major platform improvements so far! 36 + 37 + ## pull requests: doubling down on jujutsu 38 + 39 + One of the first major features we built was our [pull requests 40 + system](/pulls), which follows a unique round-based submission & review 41 + approach. This was really fun to innovate on -- it remains one of 42 + Tangled's core differentiators, and one we plan to keep improving. 43 + 44 + In the same vein, we're the first ever code forge to support [stacking 45 + pull requests](/stacking) using Jujutsu! We're big fans of the tool and 46 + we use it everyday as we hack on 47 + [tangled.org/core](https://tangled.org/@tangled.org/core). 48 + 49 + Ultimately, we think PR-based collaboration should evolve beyond the 50 + traditional model, and we're excited to keep experimenting with new 51 + ideas that make code review and contribution easier! 52 + 53 + ## spindle 54 + 55 + CI was our most requested feature, and we spent a *lot* of time debating 56 + how to approach it. We considered integrating with existing platforms, 57 + but none were good fits. So we gave in to NIH and [built spindle 58 + ourselves](/ci)! This allowed us to go in on Nix using Nixery to build 59 + CI images on the fly and cache them. 60 + 61 + Spindle is still early but designed to be extensible and is AT-native. 62 + The current Docker/Nixery-based engine is limiting -- we plan to switch 63 + to micro VMs down the line to run full-fledged NixOS (and other base 64 + images). Meanwhile, if you've got ideas for other spindle backends 65 + (Kubernetes?!), we'd love to [hear from you](https://chat.tangled.org). 66 + 67 + ## XRPC APIs 68 + 69 + We introduced a complete migration of the knotserver to an 70 + [XRPC](https://atproto.com/specs/xrpc) API. Alongside this, we also 71 + decoupled the knot from the appview by getting rid of the registration 72 + secret, which was centralizing. Knots (and spindles) simply declare 73 + their owner, and any appview can verify ownership. Once we stabilize the 74 + [lexicon definitions](lexicons) for these XRPC calls, building clients 75 + for knots, or alternate implementations should become much simpler. 76 + 77 + [lexicons]: https://tangled.sh/@tangled.sh/core/tree/master/lexicons 78 + 79 + ## issues rework 80 + 81 + Issues got a major rework (and facelift) too! They are now threaded: 82 + top-level comments with replies. This makes Q/A style discussions much 83 + easier to follow! 84 + 85 + ![issue thread](/static/img/issue-threading.webp) 86 + 87 + ## hosted PDS 88 + 89 + A complaint we often recieved was the need for a Bluesky account to use 90 + Tangled; and besides, we realised that the overlap between Bluesky users 91 + and possible Tangled users only goes so far -- we aim to be a generic 92 + code forge after all, AT just happens to be an implementation 93 + detail. 94 + 95 + To address this, we spun up the tngl.sh PDS hosted right here in 96 + Finland. The only way to get an account on this PDS is by [signing 97 + up](https://tangled.sh/signup). There's a lot we can do to improve this 98 + experience as a generic PDS host, but we're still working out details 99 + around that. 100 + 101 + ## labels 102 + 103 + You can easily categorize issues and pulls via labels! There is plenty 104 + of customization available: 105 + 106 + - labels can be basic, or they can have a key and value set, for example: 107 + `wontfix` or `priority/high` 108 + - labels can be constrained to a set of values: `priority: [high medium low]` 109 + - there can be multiple labels of a given type: `reviewed-by: @oppi.li`, 110 + `reviewed-by: @anirudh.fi` 111 + 112 + The options are endless! You can access them via your repo's settings page. 113 + 114 + <div class="flex justify-center items-center gap-2"> 115 + <figure class="w-full m-0 flex flex-col items-center"> 116 + <a href="static/img/labels_vignette.webp"> 117 + <img class="my-1 w-full h-auto cursor-pointer" src="static/img/labels_vignette.webp" alt="A set of labels applied to an issue."> 118 + </a> 119 + <figcaption class="text-center">A set of labels applied to an issue.</figcaption> 120 + </figure> 121 + 122 + <figure class="w-1/3 m-0 flex flex-col items-center"> 123 + <a href="static/img/new_label_modal.png"> 124 + <img class="my-1 w-full h-auto cursor-pointer" src="static/img/new_label_modal.png" alt="Create custom key-value type labels."> 125 + </a> 126 + <figcaption class="text-center">Create custom key-value type labels.</figcaption> 127 + </figure> 128 + </div> 129 + 130 + 131 + ## notifications 132 + 133 + In-app notifications now exist! You get notifications for a variety of events now: 134 + 135 + * new issues/pulls on your repos (also for collaborators) 136 + * comments on your issues/pulls (also for collaborators) 137 + * close/reopen (or merge) of issues/pulls 138 + * new stars 139 + * new follows 140 + 141 + All of this can be fine-tuned in [/settings/notifications](https://tangled.org/settings/notifications). 142 + 143 + ![notifications](static/img/notifications.png) 144 + 145 + 146 + ## the future 147 + 148 + We're working on a *lot* of exciting new things and possibly some big 149 + announcements to come. Be on the lookout for: 150 + 151 + * email notifications 152 + * preliminary support for issue and PR search 153 + * total "atprotation" [^1] -- the last two holdouts here are repo and pull records 154 + * total federation -- i.e. supporting third-party appviews by making it 155 + reproducible 156 + * achieve complete independence from Bluesky PBC by hosting our own relay 157 + 158 + That's all for now; we'll see you in the atmosphere! Meanwhile, if you'd like to contribute to projects on Tangled, make sure to check out the [good first issues page](https://tangled.org/goodfirstissues) to get started! 159 + 160 + [^1]: atprotation implies a two-way sync between the PDS and appview. Currently, pull requests and repositories are not ingested -- so writing/updating either records on your PDS will not show up on the appview.

+214

pages/blog/ci.md

··· 1 + --- 2 + atroot: true 3 + template: 4 + slug: ci 5 + title: introducing spindle 6 + subtitle: tangled's new CI runner is now generally available 7 + date: 2025-08-06 8 + authors: 9 + - name: Anirudh 10 + email: anirudh@tangled.sh 11 + handle: icyphox.sh 12 + - name: Akshay 13 + email: akshay@tangled.sh 14 + handle: oppi.li 15 + --- 16 + 17 + Since launching Tangled, continuous integration has 18 + consistently topped our feature request list. Today, CI is 19 + no longer a wishlist item, but a fully-featured reality. 20 + 21 + Meet **spindle**: Tangled's new CI runner built atop Nix and 22 + AT Protocol. In typical Tangled fashion we've been 23 + dogfooding spindle for a while now; this very blog post 24 + you're reading was [built and published using 25 + spindle](https://tangled.sh/@tangled.sh/site/pipelines/452/workflow/deploy.yaml). 26 + 27 + Tangled is a new social-enabled Git collaboration platform, 28 + [read our intro](/intro) for more about the project. 29 + 30 + ![spindle architecture](/static/img/spindle-arch.png) 31 + 32 + ## how spindle works 33 + 34 + Spindle is designed around simplicity and the decentralized 35 + nature of the AT Protocol. In ingests "pipeline" records and 36 + emits job status updates. 37 + 38 + When you push code or open a pull request, the knot hosting 39 + your repository emits a pipeline event 40 + (`sh.tangled.pipeline`). Running as a dedicated service, 41 + spindle subscribes to these events via websocket connections 42 + to your knot. 43 + 44 + Once triggered, spindle reads your pipeline manifest, spins 45 + up the necessary execution environment (covered below), and 46 + runs your defined workflow steps. Throughout execution, it 47 + streams real-time logs and status updates 48 + (`sh.tangled.pipeline.status`) back through websockets, 49 + which the Tangled appview subscribes to for live updates. 50 + 51 + Over at the appview, these updates are ingested and stored, 52 + and logs are streamed live. 53 + 54 + ## spindle pipelines 55 + 56 + The pipeline manifest is defined in YAML, and should be 57 + relatively familiar to those that have used other CI 58 + solutions. Here's a minimal example: 59 + 60 + ```yaml 61 + # test.yaml 62 + 63 + when: 64 + - event: ["push", "pull_request"] 65 + branch: ["master"] 66 + 67 + dependencies: 68 + nixpkgs: 69 + - go 70 + 71 + steps: 72 + - name: run all tests 73 + environment: 74 + CGO_ENABLED: 1 75 + command: | 76 + go test -v ./... 77 + ``` 78 + 79 + You can read the [full manifest spec 80 + here](https://tangled.sh/@tangled.sh/core/blob/master/docs/spindle/pipeline.md), 81 + but the `dependencies` block is the real interesting bit. 82 + Dependencies for your workflow, like Go, Node.js, Python 83 + etc. can be pulled in from nixpkgs. 84 + [Nixpkgs](https://github.com/nixos/nixpkgs/) -- for the 85 + uninitiated -- is a vast collection of packages for the Nix 86 + package manager. Fortunately, you needn't know nor care 87 + about Nix to use it! Just head to https://search.nixos.org 88 + to find your package of choice (I'll bet 1€ that it's 89 + there[^1]), toss it in the list and run your build. The 90 + Nix-savvy of you lot will be happy to know that you can use 91 + custom registries too. 92 + 93 + [^1]: I mean, if it isn't there, it's nowhere. 94 + 95 + Workflow manifests are intentionally simple. We do not want 96 + to include a "marketplace" of workflows or complex job 97 + orchestration. The bulk of the work should be offloaded to a 98 + build system, and CI should be used simply for finishing 99 + touches. That being said, this is still the first revision 100 + for CI, there is a lot more on the roadmap! 101 + 102 + Let's take a look at how spindle executes workflow steps. 103 + 104 + ## workflow execution 105 + 106 + At present, the spindle "engine" supports just the Docker 107 + backend[^2]. Podman is known to work with the Docker socket 108 + feature enabled. Each step is run in a separate container, 109 + with the `/tangled/workspace` and `/nix` volumes persisted 110 + across steps. 111 + 112 + [^2]: Support for additional backends like Firecracker are 113 + planned. Contributions welcome! 114 + 115 + The container image is built using 116 + [Nixery](https://nixery.dev). Nixery is a nifty little tool 117 + that takes a path-separated set of Nix packages and returns 118 + an OCI image with each package in a separate layer. Try this 119 + in your terminal if you've got Docker installed: 120 + 121 + ``` 122 + docker run nixery.dev/bash/hello-go hello-go 123 + ``` 124 + 125 + This should output `Hello, world!`. This is running the 126 + [hello-go](https://search.nixos.org/packages?channel=25.05&show=hello-go) 127 + package from nixpkgs. 128 + 129 + Nixery is super handy since we can construct these images 130 + for CI environments on the fly, with all dependencies baked 131 + in, and the best part: caching for commonly used packages is 132 + free thanks to Docker (pre-existing layers get reused). We 133 + run a Nixery instance of our own at 134 + https://nixery.tangled.sh but you may override that if you 135 + choose to. 136 + 137 + ## debugging CI 138 + 139 + We understand that debugging CI can be the worst. There are 140 + two parts to this problem: 141 + 142 + - CI services often bring their own workflow definition 143 + formats and it can sometimes be difficult to know why the 144 + workflow won't run or why the workflow definition is 145 + incorrect 146 + - The CI job itself fails, but this has more to do with the 147 + build system of choice 148 + 149 + To mend the first problem: we are making use of git 150 + [push-options](https://git-scm.com/docs/git-push#Documentation/git-push.txt--ooption). 151 + When you push to a repository with an option like so: 152 + 153 + ``` 154 + git push origin master -o verbose-ci 155 + ``` 156 + 157 + The server runs a basic set of analysis rules on your 158 + workflow file, and reports any errors: 159 + 160 + ``` 161 + λ git push origin main -o verbose-ci 162 + . 163 + . 164 + . 165 + . 166 + remote: error: failed to parse workflow(s): 167 + remote: - at .tangled/workflows/fmt.yml: yaml: line 14: did not find expected key 168 + remote: 169 + remote: warning(s) on pipeline: 170 + remote: - at build.yml: workflow skipped: did not match trigger push 171 + ``` 172 + 173 + The analysis performed at the moment is quite basic (expect 174 + it to get better over time), but it is already quite useful 175 + to help debug workflows that don't trigger! 176 + 177 + ## pipeline secrets 178 + 179 + Secrets are a bit tricky since atproto has no notion of 180 + private data. Secrets are instead written directly from the 181 + appview to the spindle instance using [service 182 + auth](https://docs.bsky.app/docs/api/com-atproto-server-get-service-auth). 183 + In essence, the appview makes a signed request using the 184 + logged-in user's DID key; spindle verifies this signature by 185 + fetching the public key from the DID document. 186 + 187 + ![pipeline secrets](/static/img/pipeline-secrets.png) 188 + 189 + The secrets themselves are stored in a secret manager. By 190 + default, this is the same sqlite database that spindle uses. 191 + This is *fine* for self-hosters. The hosted, flagship 192 + instance at https://spindle.tangled.sh however uses 193 + [OpenBao](https://openbao.org), an OSS fork of HashiCorp 194 + Vault. 195 + 196 + ## get started now 197 + 198 + You can run your own spindle instance pretty easily: the 199 + [spindle self-hosting 200 + guide](https://tangled.sh/@tangled.sh/core/blob/master/docs/spindle/hosting.md) 201 + should have you covered. Once done, head to your 202 + repository's settings tab and set it up! Doesn't work? Feel 203 + free to pop into [Discord](https://chat.tangled.sh) to get 204 + help -- we have a nice little crew that's always around to 205 + help. 206 + 207 + All Tangled users have access to our hosted spindle 208 + instance, free of charge[^3]. You don't have any more 209 + excuses to not migrate to Tangled now -- [get 210 + started](https://tangled.sh/login) with your AT Protocol 211 + account today. 212 + 213 + [^3]: We can't promise we won't charge for it at some point 214 + but there will always be a free tier.

+241

pages/blog/docs.md

··· 1 + --- 2 + atroot: true 3 + template: 4 + slug: docs 5 + title: why we rolled our own documentation site 6 + subtitle: you don't need mintlify 7 + date: 2026-01-06 8 + authors: 9 + - name: Akshay 10 + email: akshay@tangled.org 11 + handle: oppi.li 12 + draft: true 13 + --- 14 + 15 + We recently organized our documentation and put it up on 16 + https://docs.tangled.org, using just pandoc. For several 17 + reasons, using pandoc to roll your own static sites is more 18 + than sufficient for small projects. 19 + 20 + ![docs.tangled.org](/static/img/docs_homepage.png) 21 + 22 + ## requirements 23 + 24 + - Lives in [our 25 + monorepo](https://tangled.org/tangled.org/core). 26 + - No JS: a collection of pages containing just text 27 + should not require JS to view! 28 + - Searchability: in practice, documentation engines that 29 + come bundled with a search-engine have always been lack 30 + lustre. I tend to Ctrl+F or use an actual search engine in 31 + most scenarios. 32 + - Low complexity: building, testing, deploying should be 33 + easy. 34 + - Easy to style 35 + 36 + ## evaluating the ecosystem 37 + 38 + I took the time to evaluate several documentation engine 39 + solutions: 40 + 41 + - [Mintlify](https://www.mintlify.com/): It is quite obvious 42 + from their homepage that mintlify is performing an AI 43 + pivot for the sake of doing so. 44 + - [Docusaurus](https://docusaurus.io/): The generated 45 + documentation site is quite nice, but the value of pages 46 + being served as a full-blown React SPA is questionable. 47 + - [MkDocs](https://www.mkdocs.org/): Works great with JS 48 + disabled, however the table of contents needs to be 49 + maintained via `mkdocs.yml`, which can be quite tedious. 50 + - [MdBook](https://rust-lang.github.io/mdBook/index.html): 51 + As above, you need a `SUMMARY.md` file to control the 52 + table-of-contents. 53 + 54 + MkDocs and MdBook are still on my radar however, in case we 55 + need a bigger feature set. 56 + 57 + ## using pandoc 58 + 59 + [pandoc](https://pandoc.org/) is a wonderfully customizable 60 + markup converter. It provides a "chunkedhtml" output format, 61 + which is perfect for generating documentation sites. Without 62 + any customization, 63 + [this](https://pandoc.org/demo/example33/) is the generated 64 + output, for this [markdown file 65 + input](https://pandoc.org/demo/MANUAL.txt). 66 + 67 + - You get an autogenerated TOC based on the document layout 68 + - Each section is turned into a page of its own 69 + 70 + Massaging pandoc to work for us was quite straightforward: 71 + 72 + - I first combined all our individual markdown files into 73 + [one big 74 + `DOCS.md`](https://tangled.org/tangled.org/core/blob/master/docs/DOCS.md) 75 + file. 76 + - Modified the [default 77 + template](https://github.com/jgm/pandoc-templates/blob/master/default.chunkedhtml) 78 + to put the TOC on every page, to form a "sidebar", see 79 + [`docs/template.html`](https://tangled.org/tangled.org/core/blob/master/docs/template.html) 80 + - Inserted tailwind `prose` classes where necessary, such 81 + that markdown content is rendered the same way between 82 + `tangled.org` and `docs.tangled.org` 83 + 84 + Generating the docs is done with one pandoc command: 85 + 86 + ```bash 87 + pandoc docs/DOCS.md \ 88 + -o out/ \ 89 + -t chunkedhtml \ 90 + --variable toc \ 91 + --toc-depth=2 \ 92 + --css=docs/stylesheet.css \ 93 + --chunk-template="%i.html" \ 94 + --highlight-style=docs/highlight.theme \ 95 + --template=docs/template.html 96 + ``` 97 + 98 + ## avoiding javascript 99 + 100 + The "sidebar" style table-of-contents needs to be collapsed 101 + on mobile displays. Most of the engines I evaluated seem to 102 + require JS to collapse and expand the sidebar, with MkDocs 103 + being the outlier, it uses a checkbox with the 104 + [`:checked`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:checked) 105 + pseudo-class trick to avoid JS. 106 + 107 + The other ways to do this are: 108 + 109 + - Use `<details` and `<summary>`: this is definitely a 110 + "hack", clicking outside the sidebar does not collapse it. 111 + Using Ctrl+F or "Find in page" still works through the 112 + details tag though. 113 + - Use the new `popover` API: this seems like the perfect fit 114 + for a "sidebar" component. 115 + 116 + The bar at the top includes a button to trigger the popover: 117 + 118 + ```html 119 + <button popovertarget="toc-popover">Table of Contents</button> 120 + ``` 121 + 122 + And a `fixed` position div includes the TOC itself: 123 + 124 + ```html 125 + <div id="toc-popover" popover class="fixed top-0"> 126 + <ul> 127 + Quick Start 128 + <li>...</li> 129 + <li>...</li> 130 + <li>...</li> 131 + </ul> 132 + </div> 133 + ``` 134 + 135 + The TOC is scrollable independently and can be collapsed by 136 + clicking anywhere on the screen outside the sidebar. 137 + Searching for content in the page via "Find in page" does 138 + not show any results that are present in the popover 139 + however. The collapsible TOC is only available on smaller 140 + viewports, the TOC is not hidden on larger viewports. 141 + 142 + ## search 143 + 144 + There is native search on the site for now. Taking 145 + inspiration from https://htmx.org's search bar, our search 146 + bar also simply redirects to Google: 147 + 148 + ``` 149 + <form action="https://google.com/search"> 150 + <input type="hidden" name="q" value="+[inurl:https://docs.tangled.org]"> 151 + ... 152 + </form> 153 + ``` 154 + 155 + I mentioned earlier that Ctrl+F has typically worked better 156 + for me than, say, the search engine provided by Docusaurus. 157 + To that end, the same docs have been exported to a ["single 158 + page" format](https://docs.tangled.org/single-page.html), by 159 + just removing the `chunkedhtml` related options: 160 + 161 + ```diff 162 + pandoc docs/DOCS.md \ 163 + -o out/ \ 164 + - -t chunkedhtml \ 165 + --variable toc \ 166 + --toc-depth=2 \ 167 + --css=docs/stylesheet.css \ 168 + - --chunk-template="%i.html" \ 169 + --highlight-style=docs/highlight.theme \ 170 + --template=docs/template.html 171 + ``` 172 + 173 + With all the content on a single page, it is trivial to 174 + search through the entire site with the browser. If the docs 175 + do outgrow this, I will consider other options! 176 + 177 + ## building and deploying 178 + 179 + We use [nix](https://nixos.org) and 180 + [colmena](https://colmena.cli.rs/) to build and deploy all 181 + Tangled services. A nix derivation to [build the 182 + documentation](https://tangled.org/tangled.org/core/blob/master/nix/pkgs/docs.nix) 183 + site is written very easily with the `runCommandLocal` 184 + helper: 185 + 186 + ```nix 187 + runCommandLocal "docs" {} '' 188 + . 189 + . 190 + . 191 + ${pandoc}/bin/pandoc ${src}/docs/DOCS.md ... 192 + . 193 + . 194 + . 195 + '' 196 + ``` 197 + 198 + The nixos machine is configured to serve the site [via 199 + nginx](https://tangled.org/tangled.org/infra/blob/master/hosts/nixery/services/nginx.nix#L7): 200 + 201 + ```nix 202 + services.nginx = { 203 + enable = true; 204 + virtualHosts = { 205 + "docs.tangled.org" = { 206 + root = "${tangled-pkgs.docs}"; 207 + locations."/" = { 208 + tryFiles = "$uri $uri/ =404"; 209 + index = "index.html"; 210 + }; 211 + }; 212 + }; 213 + }; 214 + ``` 215 + 216 + And deployed using `colmena`: 217 + 218 + ```bash 219 + nix run nixpkgs#colmena -- apply 220 + ``` 221 + 222 + To update the site, I first run: 223 + 224 + ```bash 225 + nix flake update tangled 226 + ``` 227 + 228 + Which bumps the `tangled` flake input, and thus 229 + `tangled-pkgs.docs`. The above `colmena` invocation applies 230 + the changes to the machine serving the site. 231 + 232 + ## notes 233 + 234 + Going homegrown has made it a lot easier to style the 235 + documentation site to match the main site. Unfortunately 236 + there are still a few discrepancies between pandoc's 237 + markdown rendering and 238 + [goldmark's](https://pkg.go.dev/github.com/yuin/goldmark/) 239 + markdown rendering (which is what we use in Tangled). We may 240 + yet roll our own SSG, 241 + [TigerStyle](https://tigerbeetle.com/blog/2025-02-27-why-we-designed-tigerbeetles-docs-from-scratch/)!

+16 -6

pages/blog/pulls.md

··· 13 13 - name: Akshay 14 14 email: akshay@tangled.sh 15 15 handle: oppili.bsky.social 16 - draft: true 16 + draft: false 17 17 --- 18 18 19 19 We've spent the last couple of weeks building out a pull ··· 116 116 latest state of the target branch. 117 117 118 118 And just like earlier, we produce the patch by diffing your 119 - feature branch with the hidden tracking ref and do the whole 120 - atproto record thing. 119 + feature branch with the hidden tracking ref. Also, the entire pull 120 + request is stored as [an atproto record][atproto-record] and updated 121 + each time the patch changes. 122 + 123 + [atproto-record]: https://pdsls.dev/at://did:plc:qfpnj4og54vl56wngdriaxug/sh.tangled.repo.pull/3lmwniim2i722 121 124 122 125 Neat, now that we have a patch; we can move on the hard 123 126 part: code review. ··· 132 135 your patch till it is good enough, and eventually merged (or 133 136 closed if you are unlucky). 134 137 135 - <figure class="max-w-[450px] m-auto flex flex-col items-center justify-center"> 138 + <figure class="max-w-[700px] m-auto flex flex-col items-center justify-center"> 136 139 <img class="h-auto max-w-full" src="/static/img/patch-pr-main.png"> 137 140 <figcaption class="text-center">A new pull request with a couple 138 - rounds of reviews. Thanks Jay!</figcaption> 141 + rounds of reviews.</figcaption> 139 142 </figure> 140 143 141 144 Rounds are a far superior to standard branch-based ··· 167 170 internally. This allows us to show commits in the PR page, 168 171 and offer different merge strategies to choose from 169 172 (squash, rebase, ...). 173 + **Update 2025-08-12**: We have format-patch support! 170 174 171 175 * Gerrit-style `refs/for/main`: we're still hashing out the 172 176 details but being able to push commits to a ref to ··· 175 179 * Change ID support: This will allow us to group changes 176 180 together and track them across multiple commits, and to 177 181 provide "history" for each change. This works great with [Jujutsu][jj]. 182 + **Update 2025-08-12**: This has now landed: https://blog.tangled.sh/stacking 178 183 179 - Join us on [Discord](https://discord.gg/W7SRR4xHhd) or 184 + Join us on [Discord](https://chat.tangled.sh) or 180 185 `#tangled` on libera.chat (the two are bridged, so we will 181 186 never miss a message!). We are always available to help 182 187 setup knots, listen to feedback on features, or even 183 188 shepherd contributions! 189 + 190 + **Update 2025-08-12**: We move fast, and we now have jujutsu support, and an 191 + early in-house CI: https://blog.tangled.sh/ci. You no longer need a Bluesky 192 + account to sign-up; head to https://tangled.sh/signup and sign up with your 193 + email! 184 194 185 195 [jj]: https://jj-vcs.github.io/jj/latest/

+351

pages/blog/stacking.md

··· 1 + --- 2 + atroot: true 3 + template: 4 + slug: stacking 5 + title: jujutsu on tangled 6 + subtitle: tangled now supports jujutsu change-ids! 7 + date: 2025-06-02 8 + image: /static/img/interdiff_difference.jpeg 9 + authors: 10 + - name: Akshay 11 + email: akshay@tangled.sh 12 + handle: oppi.li 13 + draft: false 14 + --- 15 + 16 + Jujutsu is built around structuring your work into 17 + meaningful commits. Naturally, during code-review, you'd 18 + expect reviewers to be able to comment on individual 19 + commits, and also see the evolution of a commit over time, 20 + as reviews are addressed. We set out to natively support 21 + this model of code-review on Tangled. 22 + 23 + Tangled is a new social-enabled Git collaboration platform, 24 + [read our intro](/intro) for more about the project. 25 + 26 + For starters, I would like to contrast the two schools of 27 + code-review, the "diff-soup" model and the interdiff model. 28 + 29 + ## the diff-soup model 30 + 31 + When you create a PR on traditional code forges (GitHub 32 + specifically), the UX implicitly encourages you to address 33 + your code review by *adding commits* on top of your original 34 + set of changes: 35 + 36 + - GitHub's "Apply Suggestion" button directly commits the 37 + suggestion into your PR 38 + - GitHub only shows you the diff of all files at once by 39 + default 40 + - It is difficult to know what changed across force pushes 41 + 42 + Consider a hypothetical PR that adds 3 commits: 43 + 44 + ``` 45 + [c] implement new feature across the board (HEAD) 46 + | 47 + [b] introduce new feature 48 + | 49 + [a] some small refactor 50 + ``` 51 + 52 + And when only newly added commits are easy to review, this 53 + is what ends up happening: 54 + 55 + ``` 56 + [f] formatting & linting (HEAD) 57 + | 58 + [e] update name of new feature 59 + | 60 + [d] fix bug in refactor 61 + | 62 + [c] implement new feature across the board 63 + | 64 + [b] introduce new feature 65 + | 66 + [a] some small refactor 67 + ``` 68 + 69 + It is impossible to tell what addresses what at a glance, 70 + there is an implicit relation between each change: 71 + 72 + ``` 73 + [f] formatting & linting 74 + | 75 + [e] update name of new feature -------------. 76 + | | 77 + [d] fix bug in refactor -----------. | 78 + | | | 79 + [c] implement new feature across the board | 80 + | | | 81 + [b] introduce new feature <-----------------' 82 + | | 83 + [a] some small refactor <----------' 84 + ``` 85 + 86 + This has the downside of clobbering the output of `git 87 + blame` (if there is a bug in the new feature, you will first 88 + land on `e`, and upon digging further, you will land on 89 + `b`). This becomes incredibly tricky to navigate if reviews 90 + go on through multiple cycles. 91 + 92 + 93 + ## the interdiff model 94 + 95 + With jujutsu however, you have the tools at hand to 96 + fearlessly edit, split, squash and rework old commits (you 97 + can absolutely achieve this with git and interactive 98 + rebasing, but it is certainly not trivial). 99 + 100 + Let's try that again: 101 + 102 + ``` 103 + [c] implement new feature across the board (HEAD) 104 + | 105 + [b] introduce new feature 106 + | 107 + [a] some small refactor 108 + ``` 109 + 110 + To fix the bug in the refactor: 111 + 112 + ``` 113 + $ jj edit a 114 + Working copy (@) now at: [a] some small refactor 115 + 116 + $ # hack hack hack 117 + 118 + $ jj log -r a:: 119 + Rebased 2 descendant commits onto updated working copy 120 + [c] implement new feature across the board (HEAD) 121 + | 122 + [b] introduce new feature 123 + | 124 + [a] some small refactor 125 + ``` 126 + 127 + Jujutsu automatically rebases the descendants without having 128 + to lift a finger. Brilliant! You can repeat the same 129 + exercise for all review comments, and effectively, your 130 + PR will have evolved like so: 131 + 132 + ``` 133 + a -> b -> c initial attempt 134 + | | | 135 + v v v 136 + a' -> b' -> c' after first cycle of reviews 137 + ``` 138 + 139 + ## the catch 140 + 141 + If you use `git rebase`, you will know that it modifies 142 + history and therefore changes the commit SHA. How then, 143 + should one tell the difference between the "old" and "new" 144 + state of affairs? 145 + 146 + Tools like `git-range-diff` make use of a variety of 147 + text-based heuristics to roughly match `a` to `a'` and `b` 148 + to `b'` etc. 149 + 150 + Jujutsu however, works around this by assigning stable 151 + "change id"s to each change (which internally point to a git 152 + commit, if you use the git backing). If you edit a commit, 153 + its SHA changes, but its change-id remains the same. 154 + 155 + And this is the essence of our new stacked PRs feature! 156 + 157 + ## interdiff code review on tangled 158 + 159 + To really explain how this works, let's start with a [new 160 + codebase](https://tangled.sh/@oppi.li/stacking-demo/): 161 + 162 + ``` 163 + $ jj git init --colocate 164 + 165 + # -- initialize codebase -- 166 + 167 + $ jj log 168 + @ n set: introduce Set type main HEAD 1h 169 + ``` 170 + 171 + I have kicked things off by creating a new go module that 172 + adds a `HashSet` data structure. My first changeset 173 + introduces some basic set operations: 174 + 175 + ``` 176 + $ jj log 177 + @ so set: introduce set difference HEAD 178 + ├ sq set: introduce set intersection 179 + ├ mk set: introduce set union 180 + ├ my set: introduce basic set operations 181 + ~ 182 + 183 + $ jj git push -c @ 184 + Changes to push to origin: 185 + Add bookmark push-soqmukrvport to fc06362295bd 186 + ``` 187 + 188 + When submitting a pull request, select "Submit as stacked PRs": 189 + 190 + <figure class="max-w-[550px] m-auto flex flex-col items-center justify-center"> 191 + <a href="static/img/submit_stacked.jpeg"> 192 + <img class="my-1 h-auto max-w-full" src="static/img/submit_stacked.jpeg"> 193 + </a> 194 + <figcaption class="text-center">Submitting Stacked PRs</figcaption> 195 + </figure> 196 + 197 + This submits each change as an individual pull request: 198 + 199 + <figure class="max-w-[550px] m-auto flex flex-col items-center justify-center"> 200 + <a href="static/img/top_of_stack.jpeg"> 201 + <img class="my-1 h-auto max-w-full" src="static/img/top_of_stack.jpeg"> 202 + </a> 203 + <figcaption class="text-center">The "stack" is similar to Gerrit's relation chain</figcaption> 204 + </figure> 205 + 206 + After a while, I receive a couple of review comments, not on 207 + my entire submission, but rather, on each *individual 208 + change*. Additionally, the reviewer is happy with my first 209 + change, and has gone ahead and merged that: 210 + 211 + <div class="flex justify-center items-start gap-2"> 212 + <figure class="w-1/3 m-0 flex flex-col items-center"> 213 + <a href="static/img/basic_merged.jpeg"> 214 + <img class="my-1 w-full h-auto cursor-pointer" src="static/img/basic_merged.jpeg" alt="The first change has been merged"> 215 + </a> 216 + <figcaption class="text-center">The first change has been merged</figcaption> 217 + </figure> 218 + 219 + <figure class="w-1/3 m-0 flex flex-col items-center"> 220 + <a href="static/img/review_union.jpeg"> 221 + <img class="my-1 w-full h-auto cursor-pointer" src="static/img/review_union.jpeg" alt="A review on the set union implementation"> 222 + </a> 223 + <figcaption class="text-center">A review on the set union implementation</figcaption> 224 + </figure> 225 + 226 + <figure class="w-1/3 m-0 flex flex-col items-center"> 227 + <a href="static/img/review_difference.jpeg"> 228 + <img class="my-1 w-full h-auto cursor-pointer" src="static/img/review_difference.jpeg" alt="A review on the set difference implementation"> 229 + </a> 230 + <figcaption class="text-center">A review on the set difference implementation</figcaption> 231 + </figure> 232 + </div> 233 + 234 + Let us address the first review: 235 + 236 + > can you use the new `maps.Copy` api here? 237 + 238 + ``` 239 + $ jj log 240 + @ so set: introduce set difference push-soqmukrvport 241 + ├ sq set: introduce set intersection 242 + ├ mk set: introduce set union 243 + ├ my set: introduce basic set operations 244 + ~ 245 + 246 + # let's edit the implementation of `Union` 247 + $ jj edit mk 248 + 249 + # hack, hack, hack 250 + 251 + $ jj log 252 + Rebased 2 descendant commits onto updated working copy 253 + ├ so set: introduce set difference push-soqmukrvport* 254 + ├ sq set: introduce set intersection 255 + @ mk set: introduce set union 256 + ├ my set: introduce basic set operations 257 + ~ 258 + ``` 259 + 260 + Next, let us address the bug: 261 + 262 + > there is a logic bug here, the condition should be negated. 263 + 264 + ``` 265 + # let's edit the implementation of `Difference` 266 + $ jj edit so 267 + 268 + # hack, hack, hack 269 + ``` 270 + 271 + We are done addressing reviews: 272 + ``` 273 + $ jj git push 274 + Changes to push to origin: 275 + Move sideways bookmark push-soqmukrvport from fc06362295bd to dfe2750f6d40 276 + ``` 277 + 278 + Upon resubmitting the PR for review, Tangled is able to 279 + accurately trace the commit across rewrites, using jujutsu 280 + change-ids, and map it to the corresponding PR: 281 + 282 + <div class="flex justify-center items-start gap-2"> 283 + <figure class="w-1/2 m-0 flex flex-col items-center"> 284 + <a href="static/img/round_2_union.jpeg"> 285 + <img class="my-1 w-full h-auto" src="static/img/round_2_union.jpeg" alt="PR #2 advances to the next round"> 286 + </a> 287 + <figcaption class="text-center">PR #2 advances to the next round</figcaption> 288 + </figure> 289 + 290 + <figure class="w-1/2 m-0 flex flex-col items-center"> 291 + <a href="static/img/round_2_difference.jpeg"> 292 + <img class="my-1 w-full h-auto" src="static/img/round_2_difference.jpeg" alt="PR #4 advances to the next round"> 293 + </a> 294 + <figcaption class="text-center">PR #4 advances to the next round</figcaption> 295 + </figure> 296 + </div> 297 + 298 + Of note here are a few things: 299 + 300 + - The initial submission is still visible under `round #0` 301 + - By resubmitting, the round has simply advanced to `round 302 + #1` 303 + - There is a helpful "interdiff" button to look at the 304 + difference between the two submissions 305 + 306 + The individual diffs are still available, but most 307 + importantly, the reviewer can view the *evolution* of a 308 + change by hitting the interdiff button: 309 + 310 + <div class="flex justify-center items-start gap-2"> 311 + <figure class="w-1/2 m-0 flex flex-col items-center"> 312 + <a href="static/img/diff_1_difference.jpeg"> 313 + <img class="my-1 w-full h-auto" src="static/img/diff_1_difference.jpeg" alt="Diff from round #0"> 314 + </a> 315 + <figcaption class="text-center">Diff from round #0</figcaption> 316 + </figure> 317 + 318 + <figure class="w-1/2 m-0 flex flex-col items-center"> 319 + <a href="static/img/diff_2_difference.jpeg"> 320 + <img class="my-1 w-full h-auto" src="static/img/diff_2_difference.jpeg" alt="Diff from round #1"> 321 + </a> 322 + <figcaption class="text-center">Diff from round #1</figcaption> 323 + </figure> 324 + </div> 325 + 326 + <figure class="max-w-[550px] m-auto flex flex-col items-center justify-center"> 327 + <a href="static/img/interdiff_difference.jpeg"> 328 + <img class="my-1 w-full h-auto" src="static/img/interdiff_difference.jpeg" alt="Interdiff between round #0 and #1"> 329 + </a> 330 + <figcaption class="text-center">Interdiff between round #1 and #0</figcaption> 331 + </figure> 332 + 333 + Indeed, the logic bug has been addressed! 334 + 335 + ## start stacking today 336 + 337 + If you are a jujutsu user, you can enable this flag on more 338 + recent versions of jujutsu: 339 + 340 + ``` 341 + λ jj --version 342 + jj 0.29.0-8c7ca30074767257d75e3842581b61e764d022cf 343 + 344 + # -- in your config.toml file -- 345 + [git] 346 + write-change-id-header = true 347 + ``` 348 + 349 + This feature writes `change-id` headers directly into the 350 + git commit object, and is visible to code forges upon push, 351 + and allows you to stack your PRs on Tangled.

+4

static/icons/bluesky.svg

··· 1 + <svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="-3 -3 30 30" width="24" height="24"> 2 + <title>Bluesky</title> 3 + <path fill="none" stroke="currentColor" d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.039.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 0 1-.415-.056c.14.017.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8Z" stroke-width="2.25"/> 4 + </svg>

+13

static/icons/message-circle.svg

··· 1 + <svg 2 + xmlns="http://www.w3.org/2000/svg" 3 + width="24" 4 + height="24" 5 + viewBox="0 0 24 24" 6 + fill="none" 7 + stroke="currentColor" 8 + stroke-width="2" 9 + stroke-linecap="round" 10 + stroke-linejoin="round" 11 + > 12 + <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" /> 13 + </svg>

+15

static/icons/rss.svg

··· 1 + <svg 2 + xmlns="http://www.w3.org/2000/svg" 3 + width="24" 4 + height="24" 5 + viewBox="0 0 24 24" 6 + fill="none" 7 + stroke="currentColor" 8 + stroke-width="2" 9 + stroke-linecap="round" 10 + stroke-linejoin="round" 11 + > 12 + <path d="M4 11a9 9 0 0 1 9 9" /> 13 + <path d="M4 4a16 16 0 0 1 16 16" /> 14 + <circle cx="5" cy="19" r="1" /> 15 + </svg>

static/img/6-months.png