+4

appview/pages/funcmap.go

Reviewed

··· 12 12 "html/template" 13 13 "log" 14 14 "math" 15 15 + "math/rand" 15 16 "net/url" 16 17 "path/filepath" 17 18 "reflect" ··· 123 124 }, 124 125 "mod": func(a, b int) int { 125 126 return a % b 127 127 + }, 128 128 + "randInt": func(bound int) int { 129 129 + return rand.Intn(bound) 126 130 }, 127 131 "f64": func(a int) float64 { 128 132 return float64(a)

+51 -69

appview/state/state.go

Reviewed

··· 251 251 }) 252 252 } 253 253 254 254 - func (s *State) HomeOrTimeline(w http.ResponseWriter, r *http.Request) { 255 255 - if s.oauth.GetMultiAccountUser(r) != nil { 256 256 - s.Timeline(w, r) 257 257 - return 258 258 - } 259 259 - s.Home(w, r) 260 260 - } 261 261 - 262 262 - func (s *State) Timeline(w http.ResponseWriter, r *http.Request) { 263 263 - user := s.oauth.GetMultiAccountUser(r) 264 264 - 265 265 - // TODO: set this flag based on the UI 266 266 - filtered := false 267 267 - 268 268 - var userDid string 269 269 - if user != nil && user.Active != nil { 270 270 - userDid = user.Active.Did 271 271 - } 272 272 - timeline, err := db.MakeTimeline(s.db, 50, userDid, filtered) 273 273 - if err != nil { 274 274 - s.logger.Error("failed to make timeline", "err", err) 275 275 - s.pages.Notice(w, "timeline", "Uh oh! Failed to load timeline.") 276 276 - } 277 277 - 278 278 - repos, err := db.GetTopStarredReposLastWeek(s.db) 279 279 - if err != nil { 280 280 - s.logger.Error("failed to get top starred repos", "err", err) 281 281 - s.pages.Notice(w, "topstarredrepos", "Unable to load.") 282 282 - return 283 283 - } 284 284 - 285 285 - gfiLabel, err := db.GetLabelDefinition(s.db, orm.FilterEq("at_uri", s.config.Label.GoodFirstIssue)) 286 286 - if err != nil { 287 287 - // non-fatal 288 288 - } 289 289 - 290 290 - s.pages.Timeline(w, pages.TimelineParams{ 291 291 - LoggedInUser: user, 292 292 - Timeline: timeline, 293 293 - Repos: repos, 294 294 - GfiLabel: gfiLabel, 295 295 - }) 296 296 - } 297 297 - 298 254 func (s *State) UpgradeBanner(w http.ResponseWriter, r *http.Request) { 299 255 user := s.oauth.GetMultiAccountUser(r) 300 256 if user == nil { ··· 329 285 s.pages.UpgradeBanner(w, pages.UpgradeBannerParams{ 330 286 Registrations: regs, 331 287 Spindles: spindles, 332 332 - }) 333 333 - } 334 334 - 335 335 - func (s *State) Home(w http.ResponseWriter, r *http.Request) { 336 336 - // TODO: set this flag based on the UI 337 337 - filtered := false 338 338 - 339 339 - timeline, err := db.MakeTimeline(s.db, 5, "", filtered) 340 340 - if err != nil { 341 341 - s.logger.Error("failed to make timeline", "err", err) 342 342 - s.pages.Notice(w, "timeline", "Uh oh! Failed to load timeline.") 343 343 - return 344 344 - } 345 345 - 346 346 - repos, err := db.GetTopStarredReposLastWeek(s.db) 347 347 - if err != nil { 348 348 - s.logger.Error("failed to get top starred repos", "err", err) 349 349 - s.pages.Notice(w, "topstarredrepos", "Unable to load.") 350 350 - return 351 351 - } 352 352 - 353 353 - s.pages.Home(w, pages.TimelineParams{ 354 354 - LoggedInUser: nil, 355 355 - Timeline: timeline, 356 356 - Repos: repos, 357 288 }) 358 289 } 359 290 ··· 675 606 } 676 607 677 608 return nil 609 609 + } 610 610 + 611 611 + func fetchBskyPosts(ctx context.Context, res *idresolver.Resolver, config *config.Config, d *db.DB, logger *slog.Logger) { 612 612 + resolved, err := res.ResolveIdent(context.Background(), consts.TangledDid) 613 613 + if err != nil { 614 614 + logger.Error("failed to resolve tangled.org DID", "err", err) 615 615 + return 616 616 + } 617 617 + 618 618 + pdsEndpoint := resolved.PDSEndpoint() 619 619 + if pdsEndpoint == "" { 620 620 + logger.Error("no PDS endpoint found for tangled.sh DID") 621 621 + return 622 622 + } 623 623 + 624 624 + session, err := oauth.CreateAppPasswordSession(res, config.Core.AppPassword, consts.TangledDid) 625 625 + if err != nil { 626 626 + logger.Error("failed to create appassword session... skipping fetch", "err", err) 627 627 + return 628 628 + } 629 629 + 630 630 + client := xrpc.Client{ 631 631 + Auth: &xrpc.AuthInfo{ 632 632 + AccessJwt: session.AccessJwt, 633 633 + Did: session.Did, 634 634 + }, 635 635 + Host: session.PdsEndpoint, 636 636 + } 637 637 + 638 638 + l := log.SubLogger(logger, "bluesky") 639 639 + 640 640 + ticker := time.NewTicker(config.Bluesky.UpdateInterval) 641 641 + defer ticker.Stop() 642 642 + 643 643 + for { 644 644 + posts, _, err := bsky.FetchPosts(ctx, &client, 20, "") 645 645 + if err != nil { 646 646 + l.Error("failed to fetch bluesky posts", "err", err) 647 647 + } else if err := db.InsertBlueskyPosts(d, posts); err != nil { 648 648 + l.Error("failed to insert bluesky posts", "err", err) 649 649 + } else { 650 650 + l.Info("inserted bluesky posts", "count", len(posts)) 651 651 + } 652 652 + 653 653 + select { 654 654 + case <-ticker.C: 655 655 + case <-ctx.Done(): 656 656 + l.Info("stopping bluesky updater") 657 657 + return 658 658 + } 659 659 + } 678 660 }

+76

appview/state/timeline.go

Reviewed

··· 1 1 + package state 2 2 + 3 3 + import ( 4 4 + "fmt" 5 5 + "net/http" 6 6 + 7 7 + "tangled.org/core/appview/db" 8 8 + "tangled.org/core/appview/pages" 9 9 + "tangled.org/core/orm" 10 10 + ) 11 11 + 12 12 + func (s *State) Home(w http.ResponseWriter, r *http.Request) { 13 13 + // TODO: set this flag based on the UI 14 14 + filtered := false 15 15 + 16 16 + timeline, err := db.MakeTimeline(s.db, 50, "", filtered) 17 17 + if err != nil { 18 18 + s.logger.Error("failed to make timeline", "err", err) 19 19 + s.pages.Notice(w, "timeline", "Uh oh! Failed to load timeline.") 20 20 + return 21 21 + } 22 22 + 23 23 + blueskyPosts, err := db.GetBlueskyPosts(s.db, 8) 24 24 + if err != nil { 25 25 + s.logger.Error("failed to get bluesky posts", "err", err) 26 26 + } 27 27 + 28 28 + fmt.Println(s.pages.Home(w, pages.TimelineParams{ 29 29 + LoggedInUser: nil, 30 30 + Timeline: timeline, 31 31 + BlueskyPosts: blueskyPosts, 32 32 + })) 33 33 + } 34 34 + func (s *State) HomeOrTimeline(w http.ResponseWriter, r *http.Request) { 35 35 + if s.oauth.GetMultiAccountUser(r) != nil { 36 36 + s.Timeline(w, r) 37 37 + return 38 38 + } 39 39 + s.Home(w, r) 40 40 + } 41 41 + 42 42 + func (s *State) Timeline(w http.ResponseWriter, r *http.Request) { 43 43 + user := s.oauth.GetMultiAccountUser(r) 44 44 + 45 45 + // TODO: set this flag based on the UI 46 46 + filtered := false 47 47 + 48 48 + var userDid string 49 49 + if user != nil && user.Active != nil { 50 50 + userDid = user.Active.Did 51 51 + } 52 52 + timeline, err := db.MakeTimeline(s.db, 50, userDid, filtered) 53 53 + if err != nil { 54 54 + s.logger.Error("failed to make timeline", "err", err) 55 55 + s.pages.Notice(w, "timeline", "Uh oh! Failed to load timeline.") 56 56 + } 57 57 + 58 58 + repos, err := db.GetTopStarredReposLastWeek(s.db) 59 59 + if err != nil { 60 60 + s.logger.Error("failed to get top starred repos", "err", err) 61 61 + s.pages.Notice(w, "topstarredrepos", "Unable to load.") 62 62 + return 63 63 + } 64 64 + 65 65 + gfiLabel, err := db.GetLabelDefinition(s.db, orm.FilterEq("at_uri", s.config.Label.GoodFirstIssue)) 66 66 + if err != nil { 67 67 + // non-fatal 68 68 + } 69 69 + 70 70 + s.pages.Timeline(w, pages.TimelineParams{ 71 71 + LoggedInUser: user, 72 72 + Timeline: timeline, 73 73 + Repos: repos, 74 74 + GfiLabel: gfiLabel, 75 75 + }) 76 76 + }

+2 -2

appview/pages/templates/layouts/base.html

Reviewed

··· 42 42 <title>{{ block "title" . }}{{ end }}</title> 43 43 {{ block "extrameta" . }}{{ end }} 44 44 </head> 45 45 - <body class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200"> 45 45 + <body class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200 {{ block "bodyClasses" . }} {{ end }}"> 46 46 {{ block "topbarLayout" . }} 47 47 - <header class="w-full col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;"> 47 47 + <header class="w-full col-span-full md:col-span-1 md:col-start-2 drop-shadow-sm dark:text-white bg-white dark:bg-gray-800" style="z-index: 20;"> 48 48 49 49 {{ if .LoggedInUser }} 50 50 <div id="upgrade-banner"

+578 -65

appview/pages/templates/timeline/home.html

Reviewed

··· 19 19 <!-- Additional SEO --> 20 20 <meta name="description" content="The next-generation social coding platform. Host repos on your infrastructure with knots, use stacked pull requests, and run CI with spindles." /> 21 21 <link rel="canonical" href="https://tangled.org" /> 22 22 - 23 23 - 24 22 {{ end }} 25 23 26 24 27 25 {{ define "content" }} 28 28 - <div class="flex flex-col gap-4"> 26 26 + <div class="flex flex-col gap-24 md:gap-40 my-24 md:my-32"> 29 27 {{ template "timeline/fragments/hero" . }} 30 30 - {{ template "features" . }} 31 31 - {{ template "timeline/fragments/goodfirstissues" . }} 32 32 - {{ template "timeline/fragments/trending" . }} 33 33 - {{ template "timeline/fragments/timeline" . }} 28 28 + {{ template "timeline/fragments/preview" . }} 29 29 + {{ template "features1" . }} 30 30 + {{ template "features2" . }} 31 31 + {{ template "recentUpdates" . }} 32 32 + {{ template "community" . }} 33 33 + </div> 34 34 + {{ end }} 35 35 + 36 36 + {{ block "topbarLayout" . }} 37 37 + <header class="max-w-screen-xl mx-auto w-full col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;"> 38 38 + {{ if .LoggedInUser }} 39 39 + <div id="upgrade-banner" 40 40 + hx-get="/upgradeBanner" 41 41 + hx-trigger="load" 42 42 + hx-swap="innerHTML"> 43 43 + </div> 44 44 + {{ end }} 45 45 + {{ template "layouts/fragments/topbar" . }} 46 46 + </header> 47 47 + {{ end }} 48 48 + 49 49 + {{ block "footerLayout" . }} 50 50 + <footer class="z-10"> 51 51 + {{ template "layouts/fragments/footer" . }} 52 52 + </footer> 53 53 + {{ end }} 54 54 + 55 55 + {{ block "bodyClasses" . }} 56 56 + bg-transparent bg-gradient-to-b from-white to-slate-100 dark:bg-none dark:bg-gray-900 57 57 + {{ end }} 58 58 + 59 59 + {{ block "mainLayout" . }} 60 60 + <div class="flex-grow relative"> 61 61 + <div 62 62 + class="absolute opacity-50 dark:opacity-5 inset-x-0 top-0 bottom-[-50px] md:bottom-[-150px] pointer-events-none bg-[url('https://assets.tangled.network/yarn_ball.svg')] bg-no-repeat bg-right-bottom bg-[length:500px] md:bg-[length:1000px] w-full"> 63 63 + </div> 64 64 + <div class="max-w-screen-xl mx-auto flex flex-col gap-4 relative z-10"> 65 65 + {{ block "contentLayout" . }} 66 66 + <main> 67 67 + {{ block "content" . }}{{ end }} 68 68 + </main> 69 69 + {{ end }} 70 70 + 71 71 + {{ block "contentAfterLayout" . }} 72 72 + <main> 73 73 + {{ block "contentAfter" . }}{{ end }} 74 74 + </main> 75 75 + {{ end }} 76 76 + </div> 77 77 + </div> 78 78 + {{ end }} 79 79 + 80 80 + {{ define "features1" }} 81 81 + {{ $labelStyle := "normal-case cursor-pointer w-auto md:w-full p-4 md:px-6 rounded bg-white dark:bg-gray-800 font-medium text-base md:text-lg opacity-50 border border-gray-200 dark:border-gray-700 relative overflow-hidden" }} 82 82 + {{ $spanStyle := "z-10 items-center justify-between gap-2 w-full" }} 83 83 + {{ $connectorStyle := "w-0.5 h-6 bg-gray-300 dark:bg-gray-600 opacity-0 mx-auto" }} 84 84 + {{ $contentStyle := "hidden bg-white dark:bg-gray-800 rounded shadow-sm p-6 border border-gray-200 dark:border-gray-700 grid-cols-1 md:grid-cols-2" }} 85 85 + {{ $progressOverlayStyle := "absolute inset-0 bg-gray-600/10 dark:bg-gray-100/10 w-0 transition-none" }} 86 86 + 87 87 + <style> 88 88 + @media (max-width: 768px) { 89 89 + .features-grid:has(#feature-prs:checked) { 90 90 + grid-template-columns: 1fr auto auto; 91 91 + } 92 92 + 93 93 + .features-grid:has(#feature-knots:checked) { 94 94 + grid-template-columns: auto 1fr auto; 95 95 + } 96 96 + 97 97 + .features-grid:has(#feature-spindles:checked) { 98 98 + grid-template-columns: auto auto 1fr; 99 99 + } 100 100 + 101 101 + #feature-prs:checked ~ label[for="feature-prs"] .label-text, 102 102 + #feature-knots:checked ~ label[for="feature-knots"] .label-text, 103 103 + #feature-spindles:checked ~ label[for="feature-spindles"] .label-text { 104 104 + display: inline-flex !important; 105 105 + } 106 106 + #feature-prs:checked ~ label[for="feature-prs"] .icon-only, 107 107 + #feature-knots:checked ~ label[for="feature-knots"] .icon-only, 108 108 + #feature-spindles:checked ~ label[for="feature-spindles"] .icon-only { 109 109 + display: none !important; 110 110 + } 111 111 + } 112 112 + </style> 113 113 + 114 114 + <div class="features-grid w-full grid grid-cols-3 gap-x-6 px-2"> 115 115 + <input type="radio" id="feature-prs" name="feature" class="peer/prs hidden" checked /> 116 116 + <input type="radio" id="feature-knots" name="feature" class="peer/knots hidden" /> 117 117 + <input type="radio" id="feature-spindles" name="feature" class="peer/spindles hidden" /> 118 118 + 119 119 + <label for="feature-prs" class="{{ $labelStyle }} peer-checked/prs:opacity-100 peer-checked/prs:shadow-sm"> 120 120 + <span class="label-text hidden md:inline-flex {{ $spanStyle }}">A better way to review {{ i "git-pull-request" "size-5" }}</span> 121 121 + <span class="icon-only inline-flex md:hidden {{ $spanStyle }}">{{ i "git-pull-request" "size-5" }}</span> 122 122 + <div class="{{ $progressOverlayStyle }}" data-progress="prs"></div> 123 123 + </label> 124 124 + 125 125 + <label for="feature-knots" class="{{ $labelStyle }} peer-checked/knots:opacity-100 peer-checked/knots:shadow-sm"> 126 126 + <span class="label-text hidden md:inline-flex {{ $spanStyle }}">Completely self-hostable {{ i "hard-drive" "size-5" }}</span> 127 127 + <span class="icon-only inline-flex md:hidden {{ $spanStyle }}">{{ i "hard-drive" "size-5" }}</span> 128 128 + <div class="{{ $progressOverlayStyle }}" data-progress="knots"></div> 129 129 + </label> 130 130 + 131 131 + <label for="feature-spindles" class="{{ $labelStyle }} peer-checked/spindles:opacity-100 peer-checked/spindles:shadow-sm"> 132 132 + <span class="label-text hidden md:inline-flex {{ $spanStyle }}">Quick and easy CI {{ i "layers-2" "size-5" }}</span> 133 133 + <span class="icon-only inline-flex md:hidden {{ $spanStyle }}">{{ i "layers-2" "size-5" }}</span> 134 134 + <div class="{{ $progressOverlayStyle }}" data-progress="spindles"></div> 135 135 + </label> 136 136 + 137 137 + <div class="{{ $connectorStyle }} peer-checked/prs:opacity-100"></div> 138 138 + <div class="{{ $connectorStyle }} peer-checked/knots:opacity-100"></div> 139 139 + <div class="{{ $connectorStyle }} peer-checked/spindles:opacity-100"></div> 140 140 + 141 141 + {{ $titleStyle := "text-xl md:text-2xl font-bold my-2 text-gray-900 dark:text-gray-100" }} 142 142 + {{ $textContentStyle := "pb-6 md:p-6 md:pr-12 md:text-lg" }} 143 143 + {{ $imgContentStyle := "w-full p-6 min-h-96 min-h-[400px] md:min-h-[500px] rounded overflow-hidden place-content-center bg-gradient-to-b from-slate-50 to-slate-100 dark:from-gray-800 dark:to-gray-900 border border-gray-200 dark:border-gray-700" }} 144 144 + 145 145 + <div class="col-span-3 {{ $contentStyle }} peer-checked/prs:grid "> 146 146 + <div class="{{ $textContentStyle }} flex flex-col gap-4 md:gap-8 place-self-center"> 147 147 + <section> 148 148 + <h1 class="{{ $titleStyle }}">Stacked PRs</h1> 149 149 + <p> 150 150 + Break down large features into small, reviewable chunks. Stack pull 151 151 + requests on top of each other and ship faster with better code 152 152 + reviews. Tangled natively supports stacking using Jujutsu <a 153 153 + href="https://docs.jj-vcs.dev/latest/glossary/#change-id" 154 154 + class="underline">Change-Ids</a>. 155 155 + </p> 156 156 + </section> 157 157 + <section> 158 158 + <h1 class="{{ $titleStyle }}">Round-based review</h1> 159 159 + <p> 160 160 + Pull-requests in Tangled are round-based, which means, each 161 161 + submission is "immutable". To update a PR, the author must start a 162 162 + second revision or "round". As a reviewer, you never have to worry 163 163 + about a PR changing <em>during</em> a review! 164 164 + </p> 165 165 + </section> 166 166 + </div> 167 167 + <div class="{{ $imgContentStyle }} pl-24 md:pl-40"> 168 168 + <div class="flex flex-col" style="transform: perspective(1000px) rotateX(15deg)"> 169 169 + {{ $mockPRs := list 170 170 + (dict "Id" 941 "Title" "spindle/nixery: update setup command docs" "State" "open" ) 171 171 + (dict "Id" 940 "Title" "appview/pulls: fix search not updating count of pull requests" "State" "open" ) 172 172 + (dict "Id" 939 "Title" "appview/pages: improved seo tags for home, repo and profile" "State" "open" ) 173 173 + (dict "Id" 938 "Title" "appview/state: update robots.txt" "State" "merged" ) 174 174 + (dict "Id" 937 "Title" "appview/profile: show dummy profile when no tangled profile" "State" "merged" ) 175 175 + (dict "Id" 936 "Title" "appview/pipelines: fix incorrect totals" "State" "merged" ) 176 176 + }} 177 177 + {{ range $index, $pr := $mockPRs }} 178 178 + {{ $scale := 1.4 }} 179 179 + {{ if gt $index 0 }} 180 180 + {{ $scale = subf64 1.4 (mulf64 (f64 $index) 0.04) }} 181 181 + {{ if lt $scale 1.0 }}{{ $scale = 1.0 }}{{ end }} 182 182 + {{ end }} 183 183 + {{ $zIndex := sub 100 $index }} 184 184 + {{ template "mockPRRow" (dict "PR" $pr "Scale" $scale "ZIndex" $zIndex) }} 185 185 + {{ end }} 186 186 + </div> 187 187 + </div> 188 188 + </div> 189 189 + 190 190 + <div class="col-span-3 {{ $contentStyle }} peer-checked/knots:grid"> 191 191 + <div class="{{ $textContentStyle }} flex flex-col gap-4 md:gap-8 place-self-center"> 192 192 + <section> 193 193 + <h1 class="{{ $titleStyle }}">Knots</h1> 194 194 + <p> 195 195 + Host your repositories on your own infrastructure with <a 196 196 + href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide" class="underline">knots</a>. 197 197 + Knots are lightweight git repository hosts that syndicate git 198 198 + operations across the network. You can setup a knot server on a 199 199 + machine as small as a Raspberry Pi! 200 200 + <br> 201 201 + <br> 202 202 + If you want to try Tangled without self-hosting, fear not! All users 203 203 + are added to our hosted knot by default. 204 204 + </p> 205 205 + </section> 206 206 + <section> 207 207 + <h1 class="{{ $titleStyle }}">Spindles</h1> 208 208 + <p> 209 209 + Host CI runners on your own infrastructure with <a 210 210 + href="https://docs.tangled.org/spindles.html#self-hosting-guide" class="underline">spindles</a>. 211 211 + Spindles are responsible for queuing up CI jobs and syndicating 212 212 + pipeline statuses to the network. Presently, the task of sandboxing 213 213 + workflows and caching dependencies is delegated to Docker. 214 214 + </p> 215 215 + </section> 216 216 + </div> 217 217 + {{ $planetWrapperStyle := "absolute left-1/2 bottom-0 flex items-start justify-center -translate-x-1/2 translate-y-1/2" }} 218 218 + {{ $orbitStyle := "absolute left-1/2 bottom-0 rounded-full border-2 border-gray-200 dark:border-gray-700 -translate-x-1/2 translate-y-1/2 shadow-lg" }} 219 219 + {{ $planetStyle := "-mt-8 size-16 md:-mt-10 md:size-20 rounded-full shadow-sm border flex items-center justify-center" }} 220 220 + <div class="{{ $imgContentStyle }} min-h-[500px] relative"> 221 221 + <div class="size-[250px] {{ $orbitStyle }}"></div> 222 222 + <div class="size-[500px] {{ $orbitStyle }}"></div> 223 223 + <div class="size-[750px] {{ $orbitStyle }}"></div> 224 224 + 225 225 + <!-- planets on inner orbit --> 226 226 + <div class="{{ $planetWrapperStyle }} size-[250px] rotate-[12deg]"> 227 227 + <div class="{{ $planetStyle }} -rotate-[12deg] bg-blue-100 dark:bg-blue-900 border-blue-500 dark:border-blue-500"> 228 228 + {{ i "server" "size-8" "text-blue-500" "dark:text-blue-500" }} 229 229 + </div> 230 230 + </div> 231 231 + 232 232 + <!-- Planets on middle orbit --> 233 233 + <div class="{{ $planetWrapperStyle }} size-[500px] -rotate-[32deg]"> 234 234 + <div class="{{ $planetStyle }} rotate-[32deg] bg-green-100 dark:bg-green-900 border-green-500 dark:border-green-500"> 235 235 + {{ i "hard-drive" "size-8" "text-green-500" "dark:text-green-500" }} 236 236 + </div> 237 237 + </div> 238 238 + <div class="{{ $planetWrapperStyle }} size-[500px] rotate-[24deg]"> 239 239 + <div class="{{ $planetStyle }} -rotate-[24deg] bg-amber-100 dark:bg-amber-900 border-amber-500 dark:border-amber-500"> 240 240 + {{ i "server" "size-8" "text-amber-500" "dark:text-amber-500" }} 241 241 + </div> 242 242 + </div> 243 243 + 244 244 + <!-- Planets on outer orbit --> 245 245 + <div class="{{ $planetWrapperStyle }} size-[750px] -rotate-[40deg]"> 246 246 + <div class="{{ $planetStyle }} rotate-[40deg] bg-blue-100 dark:bg-blue-900 border-blue-500 dark:border-blue-500"> 247 247 + {{ i "server" "size-8" "text-blue-500" "dark:text-blue-500" }} 248 248 + </div> 249 249 + </div> 250 250 + <div class="{{ $planetWrapperStyle }} size-[750px] rotate-[3deg]"> 251 251 + <div class="{{ $planetStyle }} -rotate-[3deg] bg-green-100 dark:bg-green-900 border-green-500 dark:border-green-500"> 252 252 + {{ i "router" "size-8" "text-green-500" "dark:text-green-500" }} 253 253 + </div> 254 254 + </div> 255 255 + <div class="{{ $planetWrapperStyle }} size-[750px] rotate-[44deg]"> 256 256 + <div class="{{ $planetStyle }} -rotate-[44deg] bg-amber-100 dark:bg-amber-900 border-amber-500 dark:border-amber-500"> 257 257 + {{ i "database" "size-8" "text-amber-500" "dark:text-amber-500" }} 258 258 + </div> 259 259 + </div> 260 260 + </div> 261 261 + </div> 262 262 + 263 263 + <div class="col-span-3 {{ $contentStyle }} peer-checked/spindles:grid"> 264 264 + <div class="{{ $textContentStyle }} flex flex-col gap-4 md:gap-8 place-self-center"> 265 265 + <section> 266 266 + <h1 class="{{ $titleStyle }}">Nix-powered CI</h1> 267 267 + <p> 268 268 + Pick and choose dependencies for your CI pipelines from <a 269 269 + href="https://docs.tangled.org/spindles.html#dependencies" 270 270 + class="underline"><code>nixpkgs</code></a>, one of the biggest 271 271 + package repositories. 272 272 + <br> 273 273 + <br> 274 274 + All dependencies and workflow images are cached using <a 275 275 + href="https://nixery.dev/">nixery</a>. Subsuquent runs of your CI 276 276 + pipeline will load all dependencies almost instantly. 277 277 + </p> 278 278 + </section> 279 279 + <section> 280 280 + <div class="flex items-center gap-2 my-4"> 281 281 + <h1 class="{{ $titleStyle }}">Customizable Engines</h1> 282 282 + <span class="text-sm text-blue-500 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/50 rounded p-1">coming soon</span> 283 283 + </div> 284 284 + <p> 285 285 + We know nix is not for everybody! Spindles are built to have 286 286 + swappable engines, on our roadmap are Docker and Firecracker based 287 287 + engines. 288 288 + </p> 289 289 + </section> 290 290 + </div> 291 291 + <div class="{{ $imgContentStyle }} flex items-end pb-0"> 292 292 + <div class="w-full mx-auto border-t border-l border-r border-gray-200 dark:border-gray-700 rounded-t overflow-hidden shadow-lg"> 293 293 + <div class="bg-white dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700 flex items-center gap-2 justify-between"> 294 294 + <span class="font-mono text-gray-600 dark:text-gray-400 text-sm md:text-lg">.tangled/workflows/test.yml</span> 295 295 + <div class="flex items-center gap-2"> 296 296 + <div class="size-3 rounded-full bg-red-500"></div> 297 297 + <div class="size-3 rounded-full bg-yellow-500"></div> 298 298 + <div class="size-3 rounded-full bg-green-500"></div> 299 299 + </div> 300 300 + </div> 301 301 + <div class="bg-white dark:bg-gray-800 p-4 overflow-x-auto text-sm md:text-lg"> 302 302 + {{ $yamlContent := `when: 303 303 + - event: push 304 304 + branch: main 305 305 + 306 306 + dependencies: 307 307 + nixpkgs: 308 308 + - go 309 309 + - gcc 310 310 + 311 311 + environment: 312 312 + CGO_ENABLED: 1 313 313 + 314 314 + steps: 315 315 + - name: run all tests 316 316 + command: go test -v ./...` }} 317 317 + <div class="whitespace-pre">{{ code $yamlContent ".tangled/workflows/test.yml" | escapeHtml }}</div> 318 318 + </div> 319 319 + </div> 320 320 + </div> 321 321 + </div> 322 322 + </div> 323 323 + 324 324 + <script> 325 325 + document.addEventListener('DOMContentLoaded', function() { 326 326 + const featureIds = ['feature-prs', 'feature-knots', 'feature-spindles']; 327 327 + const progressNames = ['prs', 'knots', 'spindles']; 328 328 + let currentIndex = 0; 329 329 + let timerInterval = null; 330 330 + 331 331 + function stopTimer() { 332 332 + if (timerInterval) { 333 333 + clearInterval(timerInterval); 334 334 + timerInterval = null; 335 335 + } 336 336 + document.querySelectorAll('[data-progress]').forEach(el => { 337 337 + el.classList.remove('animate-progress'); 338 338 + }); 339 339 + } 340 340 + 341 341 + const firstProgress = document.querySelector('[data-progress="prs"]'); 342 342 + if (firstProgress) { 343 343 + firstProgress.classList.add('animate-progress'); 344 344 + } 345 345 + 346 346 + document.querySelectorAll('label[for^="feature-"]').forEach(label => { 347 347 + label.addEventListener('click', stopTimer); 348 348 + }); 349 349 + 350 350 + timerInterval = setInterval(function() { 351 351 + document.querySelectorAll('[data-progress]').forEach(el => { 352 352 + el.classList.remove('animate-progress'); 353 353 + void el.offsetWidth; // force reflow 354 354 + }); 355 355 + 356 356 + currentIndex = (currentIndex + 1) % featureIds.length; 357 357 + document.getElementById(featureIds[currentIndex]).checked = true; 358 358 + 359 359 + const activeProgress = document.querySelector('[data-progress="' + progressNames[currentIndex] + '"]'); 360 360 + if (activeProgress) { 361 361 + activeProgress.classList.add('animate-progress'); 362 362 + } 363 363 + }, 5000); 364 364 + }); 365 365 + </script> 366 366 + {{ end }} 367 367 + 368 368 + {{ define "mockPRRow" }} 369 369 + {{ $pr := .PR }} 370 370 + <div class="flex text-sm items-center justify-between w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded p-3 shadow relative" style="transform: scale({{ .Scale }}); transform-origin: top center; z-index: {{ .ZIndex }};"> 371 371 + <div class="flex items-center gap-2 min-w-0 flex-1 pr-2"> 372 372 + <div class="flex-shrink-0"> 373 373 + {{ if eq $pr.State "open" }} 374 374 + {{ i "git-pull-request" "size-4 text-green-500" }} 375 375 + {{ else }} 376 376 + {{ i "git-merge" "size-4 text-purple-500" }} 377 377 + {{ end }} 378 378 + </div> 379 379 + <span class="truncate text-sm text-gray-800 dark:text-gray-200"> 380 380 + <span class="text-gray-500 dark:text-gray-400">#{{ $pr.Id }}</span> 381 381 + {{ $pr.Title }} 382 382 + </span> 383 383 + </div> 384 384 + </div> 385 385 + {{ end }} 386 386 + 387 387 + {{ define "features2" }} 388 388 + {{ $cardStyle := "bg-white dark:bg-gray-800 rounded shadow-sm border border-gray-200 dark:border-gray-700" }} 389 389 + {{ $cardInnerStyle := "flex flex-row items-center gap-4 md:gap-6 p-4 md:p-6 md:pt-8 relative" }} 390 390 + {{ $contentStyle := "flex-1 flex flex-col" }} 391 391 + {{ $titleStyle := "text-xl md:text-2xl font-bold mb-2 md:mb-3 text-gray-900 dark:text-gray-100" }} 392 392 + {{ $descriptionStyle := "text-gray-600 dark:text-gray-300 text-sm md:text-base leading-relaxed mb-3 md:mb-0" }} 393 393 + {{ $linkMobileStyle := "hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-gray-700 dark:text-gray-300 font-medium" }} 394 394 + {{ $iconContainerStyle := "relative shrink-0 w-24 h-24 md:w-48 md:h-48" }} 395 395 + {{ $iconCircleStyle := "w-full h-full rounded-full flex items-center justify-center" }} 396 396 + {{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 p-3 text-base btn" }} 397 397 + 398 398 + <div class="w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2"> 399 399 + <div class="{{ $cardStyle }} md:mr-32"> 400 400 + <div class="{{ $cardInnerStyle }}"> 401 401 + <div class="{{ $contentStyle }}"> 402 402 + <h3 class="{{ $titleStyle }}">Built on AT Protocol</h3> 403 403 + <p class="{{ $descriptionStyle }}"> 404 404 + AT Protocol enables federated code-collaboration. Submit 405 405 + pull-requests or bug-reports to any repository hosted on any 406 406 + server. 407 407 + <br> 408 408 + <br> 409 409 + Bring an existing AT Protocol account (such as your Bluesky 410 410 + account), or signup for one with us. 411 411 + <a class="underline" href="https://docs.tangled.org/quick-start-guide.html#login-or-sign-up">Read the docs to know more.</a> 412 412 + </p> 413 413 + <a href="TODO" class="{{ $linkMobileStyle }}"> 414 414 + Learn more 415 415 + {{ i "arrow-right" "size-4" }} 416 416 + </a> 417 417 + </div> 418 418 + <div class="{{ $iconContainerStyle }}"> 419 419 + <div class="{{ $iconCircleStyle }} bg-blue-100 dark:bg-blue-900/50"> 420 420 + {{ i "at-sign" "size-12 md:size-24" "text-blue-500 dark:text-blue-500" "rotate-12" }} 421 421 + </div> 422 422 + <a href="TODO" class="{{ $linkDesktopStyle }}"> 423 423 + Learn more 424 424 + {{ i "arrow-right" "size-4" }} 425 425 + </a> 426 426 + </div> 427 427 + </div> 428 428 + </div> 429 429 + 430 430 + <div class="{{ $cardStyle }} md:ml-32"> 431 431 + <div class="{{ $cardInnerStyle }}"> 432 432 + <div class="{{ $contentStyle }}"> 433 433 + <h3 class="{{ $titleStyle }}">Free and Open-source</h3> 434 434 + <p class="{{ $descriptionStyle }}"> 435 435 + All of Tangled is open-source and built in the open! 436 436 + Check out the <a class="underline" href="https://tangled.org/core">monorepo</a> and join in on the fun. 437 437 + <br> 438 438 + <br> 439 439 + We welcome contributions however big or small. You can start contributing by picking up a 440 440 + <a class="underline" href="https://tangled.org/tangled.org/core/issues">good-first-issue</a>. 441 441 + </p> 442 442 + <a href="TODO" class="{{ $linkMobileStyle }}"> 443 443 + Learn more 444 444 + {{ i "arrow-right" "size-4" }} 445 445 + </a> 446 446 + </div> 447 447 + <div class="{{ $iconContainerStyle }}"> 448 448 + <div class="{{ $iconCircleStyle }} bg-green-100 dark:bg-green-900/50"> 449 449 + {{ i "package-open" "size-12 md:size-24" "text-green-500 dark:text-green-500" "-rotate-12" }} 450 450 + </div> 451 451 + <a href="TODO" class="{{ $linkDesktopStyle }}"> 452 452 + Learn more 453 453 + {{ i "arrow-right" "size-4" }} 454 454 + </a> 455 455 + </div> 456 456 + </div> 457 457 + </div> 458 458 + 459 459 + <div class="{{ $cardStyle }} md:mr-32"> 460 460 + <div class="{{ $cardInnerStyle }}"> 461 461 + <div class="{{ $contentStyle }}"> 462 462 + <h3 class="{{ $titleStyle }}">Social coding is back</h3> 463 463 + <p class="{{ $descriptionStyle }}"> 464 464 + Discover trending projects, follow your friends and star your favourite repositories. Coding is better together! 465 465 + <br> 466 466 + <br> 467 467 + You can use one account for all of the atmosphere. If you have 468 468 + friends on Bluesky, you will find them on Tangled with the same 469 469 + handle. 470 470 + </p> 471 471 + <a href="TODO" class="{{ $linkMobileStyle }}"> 472 472 + Learn more 473 473 + {{ i "arrow-right" "size-4" }} 474 474 + </a> 475 475 + </div> 476 476 + <div class="{{ $iconContainerStyle }}"> 477 477 + <div class="{{ $iconCircleStyle }} bg-amber-100 dark:bg-amber-900/50"> 478 478 + {{ i "message-circle-heart" "size-12 md:size-24" "text-amber-500 dark:text-amber-500" "rotate-12" }} 479 479 + </div> 480 480 + <a href="TODO" class="{{ $linkDesktopStyle }}"> 481 481 + Learn more 482 482 + {{ i "arrow-right" "size-4" }} 483 483 + </a> 484 484 + </div> 485 485 + </div> 486 486 + </div> 487 487 + </div> 488 488 + {{ end }} 489 489 + 490 490 + {{ define "changelog" }} 491 491 + <div class="w-full px-2 py-16 md:py-24"> 492 492 + <h2 class="text-3xl md:text-4xl font-bold mb-8 text-gray-900 dark:text-gray-100">Changelog</h2> 493 493 + 494 494 + <div class="grid grid-cols-1 gap-6 mb-6"> 495 495 + {{ range $index := list 0 1 2 3 }} 496 496 + <div class="bg-white dark:bg-gray-800 rounded shadow-sm border border-gray-200 dark:border-gray-700 p-6"> 497 497 + <div class="flex items-center gap-2 mb-3"> 498 498 + <span class="text-xs font-medium text-gray-500 dark:text-gray-400">v1.{{ sub 3 $index }}.0</span> 499 499 + <span class="text-xs text-gray-400 dark:text-gray-500">•</span> 500 500 + <span class="text-xs text-gray-500 dark:text-gray-400">Feb {{ sub 16 $index }}, 2026</span> 501 501 + </div> 502 502 + <h3 class="text-lg font-semibold mb-2 text-gray-900 dark:text-gray-100">Feature Update {{ sub 4 $index }}</h3> 503 503 + <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed"> 504 504 + Improvements to the platform including bug fixes, performance enhancements, and new features. 505 505 + </p> 506 506 + </div> 507 507 + {{ end }} 508 508 + </div> 509 509 + 34 510 <div class="flex justify-end"> 35 35 - <a href="/timeline" class="inline-flex items-center gap-2 text-gray-500 dark:text-gray-400"> 36 36 - view more 511 511 + <a href="/changelog" class="hover:no-underline inline-flex items-center gap-2 px-4 py-2 text-base btn"> 512 512 + View full changelog 37 513 {{ i "arrow-right" "size-4" }} 38 514 </a> 39 515 </div> 40 516 </div> 41 517 {{ end }} 42 518 43 43 - 44 44 - {{ define "feature" }} 45 45 - {{ $info := index . 0 }} 46 46 - {{ $bullets := index . 1 }} 47 47 - <div class="flex flex-col items-center gap-6 md:flex-row md:items-top"> 48 48 - <div class="flex-1"> 49 49 - <h2 class="text-2xl font-bold text-black dark:text-white mb-6">{{ $info.title }}</h2> 50 50 - <ul class="leading-normal"> 51 51 - {{ range $bullets }} 52 52 - <li><p>{{ escapeHtml . }}</p></li> 53 53 - {{ end }} 54 54 - </ul> 519 519 + {{ define "recentUpdates" }} 520 520 + <div class="w-full px-2 py-16 md:py-24"> 521 521 + <h2 class="px-4 text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2">Recent updates</h2> 522 522 + <p class="px-4 mb-8 text-gray-500 dark:text-gray-400"> 523 523 + Follow <a href="https://bsky.app/profile/tangled.org">@tangled.org</a> on Bluesky for more! 524 524 + </p> 525 525 + <div class="columns-1 md:columns-2 lg:columns-3 gap-6"> 526 526 + {{ range $index, $post := .BlueskyPosts }} 527 527 + <div class="{{ if ge $index 3 }}hidden md:block{{ end }}"> 528 528 + {{ template "post" $post }} 55 529 </div> 56 56 - <div class="flex-shrink-0 w-96 md:w-1/3"> 57 57 - <a href="{{ $info.image }}"> 58 58 - <img src="{{ $info.image }}" alt="{{ $info.alt }}" class="w-full h-auto rounded shadow-sm" /> 59 59 - </a> 60 60 - </div> 530 530 + {{ end }} 61 531 </div> 532 532 + </div> 62 533 {{ end }} 63 534 64 64 - {{ define "features" }} 65 65 - <div class="prose dark:text-gray-200 space-y-12 px-6 py-4 bg-white dark:bg-gray-800 rounded drop-shadow-sm"> 66 66 - {{ template "feature" (list 67 67 - (dict 68 68 - "title" "lightweight git repo hosting" 69 69 - "image" "https://assets.tangled.network/what-is-tangled-repo.png" 70 70 - "alt" "A repository hosted on Tangled" 71 71 - ) 72 72 - (list 73 73 - "Host your repositories on your own infrastructure using <em>knots</em>&mdash;tiny, headless servers that facilitate git operations." 74 74 - "Add friends to your knot or invite collaborators to your repository." 75 75 - "Guarded by fine-grained role-based access control." 76 76 - "Use SSH to push and pull." 77 77 - ) 78 78 - ) }} 535 535 + {{ define "post" }} 536 536 + <div class="bg-white dark:bg-gray-800 rounded shadow-sm border border-gray-200 dark:border-gray-700 px-6 py-4 flex flex-col gap-2 break-inside-avoid mb-6"> 537 537 + <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400"> 538 538 + <span class="flex items-center gap-2"> 539 539 + {{ template "user/fragments/picHandle" "tangled.org" }} 540 540 + </span> 541 541 + <span>{{ template "repo/fragments/shortTimeAgo" .CreatedAt }}</span> 542 542 + </div> 543 543 + <p class="text-gray-900 dark:text-gray-100 text-base leading-relaxed whitespace-pre-wrap">{{ .Text }}</p> 79 544 80 80 - {{ template "feature" (list 81 81 - (dict 82 82 - "title" "improved pull request model" 83 83 - "image" "https://assets.tangled.network/pulls.png" 84 84 - "alt" "Round-based pull requests." 85 85 - ) 86 86 - (list 87 87 - "An intuitive and effective round-based pull request flow, with inter-diffing between rounds." 88 88 - "Stacked pull requests using Jujutsu's change IDs." 89 89 - "Paste a <code>git diff</code> or <code>git format-patch</code> for quick drive-by changes." 90 90 - ) 91 91 - ) }} 545 545 + {{ if .Embed }} 546 546 + {{ if .Embed.EmbedImages_View }} 547 547 + <div class="grid {{ if eq (len .Embed.EmbedImages_View.Images) 1 }}grid-cols-1{{ else if eq (len .Embed.EmbedImages_View.Images) 2 }}grid-cols-2{{ else }}grid-cols-2{{ end }} gap-2"> 548 548 + {{ range .Embed.EmbedImages_View.Images }} 549 549 + <img src="{{ .Fullsize }}" alt="{{ .Alt }}" class="rounded w-full h-auto object-cover border border-gray-200 dark:border-gray-700" loading="lazy" /> 550 550 + {{ end }} 551 551 + </div> 552 552 + {{ else if .Embed.EmbedExternal_View }} 553 553 + <a href="{{ .Embed.EmbedExternal_View.External.Uri }}" target="_blank" rel="noopener noreferrer" class="hover:no-underline block border border-gray-200 dark:border-gray-700 rounded overflow-hidden hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"> 554 554 + {{ if .Embed.EmbedExternal_View.External.Thumb }} 555 555 + <img src="{{ .Embed.EmbedExternal_View.External.Thumb }}" alt="" class="w-full h-48 object-cover" loading="lazy" /> 556 556 + {{ end }} 557 557 + <div class="p-3"> 558 558 + <div class="font-medium text-gray-900 dark:text-gray-100 text-sm mb-1">{{ .Embed.EmbedExternal_View.External.Title }}</div> 559 559 + <div class="text-xs text-gray-600 dark:text-gray-400 line-clamp-2">{{ .Embed.EmbedExternal_View.External.Description }}</div> 560 560 + <div class="text-xs text-gray-500 dark:text-gray-500 mt-1">{{ .Embed.EmbedExternal_View.External.Uri }}</div> 561 561 + </div> 562 562 + </a> 563 563 + {{ else if .Embed.EmbedVideo_View }} 564 564 + <div class="rounded overflow-hidden bg-gray-100 dark:bg-gray-700 aspect-video flex items-center justify-center"> 565 565 + <span class="text-gray-500 dark:text-gray-400 text-sm">Video embed</span> 566 566 + </div> 567 567 + {{ end }} 568 568 + {{ end }} 92 569 93 93 - {{ template "feature" (list 94 94 - (dict 95 95 - "title" "run pipelines using spindles" 96 96 - "image" "https://assets.tangled.network/pipelines.png" 97 97 - "alt" "CI pipeline running on spindle" 98 98 - ) 99 99 - (list 100 100 - "Run pipelines on your own infrastructure using <em>spindles</em>&mdash;lightweight CI runners." 101 101 - "Natively supports Nix for package management." 102 102 - "Easily extended to support different execution backends." 103 103 - ) 104 104 - ) }} 570 570 + <a href="https://bsky.app/profile/tangled.org/post/{{ .Rkey }}" 571 571 + target="_blank" 572 572 + rel="noopener noreferrer" 573 573 + class="flex items-center justify-between gap-4 text-sm text-gray-500 dark:text-gray-400 pt-2 no-underline hover:no-underline"> 574 574 + <div class="flex items-center gap-4"> 575 575 + <div class="flex items-center gap-1"> 576 576 + {{ i "heart" "size-4" }} 577 577 + <span>{{ .LikeCount }}</span> 578 578 + </div> 579 579 + <div class="flex items-center gap-1"> 580 580 + {{ i "repeat-2" "size-4" }} 581 581 + <span>{{ .RepostCount }}</span> 582 582 + </div> 583 583 + <div class="flex items-center gap-1"> 584 584 + {{ i "reply" "size-4 -scale-x-1" }} 585 585 + <span>{{ add64 .ReplyCount .QuoteCount }}</span> 586 586 + </div> 587 587 + </div> 588 588 + {{ i "arrow-up-right" "size-4" }} 589 589 + </a> 590 590 + </div> 591 591 + {{ end }} 592 592 + 593 593 + {{ define "community" }} 594 594 + <div class="w-full px-2 py-16 md:py-24"> 595 595 + <div class="max-w-2xl mx-auto text-center space-y-6"> 596 596 + <h2 class="text-3xl md:text-6xl font-bold text-gray-900 dark:text-gray-100">Join the network</h2> 597 597 + <p class="text-xl text-gray-600 dark:text-gray-300"> 598 598 + You can participate in the Tangled network with an AT account. If you 599 599 + don't know what that is, you can sign up for one below. 600 600 + <br> 601 601 + <a href="https://docs.tangled.org/quick-start-guide.html#login-or-sign-up">Read more on the docs.</a> 602 602 + </p> 603 603 + <form class="flex gap-2 items-stretch w-full md:max-w-md mx-auto p-2 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 rounded shadow-sm"> 604 604 + <input 605 605 + type="email" 606 606 + id="email" 607 607 + name="email" 608 608 + tabindex="4" 609 609 + required 610 610 + placeholder="Enter your email" 611 611 + class="py-2 w-full" 612 612 + /> 613 613 + <button class="btn-create flex items-center gap-2 text-base whitespace-nowrap" type="submit"> 614 614 + join now 615 615 + {{ i "arrow-right" "size-4" }} 616 616 + </button> 617 617 + </form> 105 618 </div> 106 619 {{ end }}

+1 -1

appview/pages/templates/layouts/fragments/topbar.html

Reviewed

··· 1 1 {{ define "layouts/fragments/topbar" }} 2 2 - <nav class="mx-auto space-x-4 px-6 py-2 dark:text-white drop-shadow-sm bg-white dark:bg-gray-800"> 2 2 + <nav class="mx-auto space-x-4 px-6 py-2"> 3 3 <div class="flex justify-between p-0 items-center"> 4 4 <div id="left-items"> 5 5 <a href="/" hx-boost="true" class="text-2xl no-underline hover:no-underline flex items-center gap-2">

+27 -30

appview/pages/templates/timeline/fragments/hero.html

Reviewed

··· 1 1 {{ define "timeline/fragments/hero" }} 2 2 - <div class="mx-auto max-w-[100rem] flex flex-col text-black dark:text-white px-6 py-4 gap-6 items-center md:flex-row"> 3 3 - <div class="flex flex-col gap-6"> 4 4 - <h1 class="font-bold text-4xl">tightly-knit<br>social coding.</h1> 5 5 - 6 6 - <p class="text-lg"> 7 7 - Tangled is a decentralized Git hosting and collaboration platform. 8 8 - </p> 9 9 - <p class="text-lg"> 10 10 - We envision a place where developers have complete ownership of their 11 11 - code, open source communities can freely self-govern and most 12 12 - importantly, coding can be social and fun again. 13 13 - </p> 14 14 - 15 15 - <div class="flex gap-6 items-center"> 16 16 - <a href="/signup" class="no-underline hover:no-underline "> 17 17 - <button class="btn-create flex gap-2 px-4 items-center"> 18 18 - join now {{ i "arrow-right" "size-4" }} 19 19 - </button> 20 20 - </a> 21 21 - </div> 22 22 - </div> 23 23 - 24 24 - <figure class="w-full hidden md:block md:w-auto"> 25 25 - <a href="https://tangled.org/@tangled.org/core" class="block"> 26 26 - <img src="https://assets.tangled.network/hero-repo.png" alt="Screenshot of the Tangled monorepo." class="max-w-md mx-auto md:max-w-none w-full md:w-[30vw] h-auto shadow-sm rounded" /> 27 27 - </a> 28 28 - <figcaption class="text-sm text-gray-600 dark:text-gray-400 mt-2 text-center"> 29 29 - Monorepo for Tangled, built in the open with the community. 30 30 - </figcaption> 31 31 - </figure> 2 2 + <div class="mx-auto max-w-[100rem] grid grid-cols-1 md:grid-cols-2 text-black dark:text-white px-6 py-4 gap-6 items-center md:flex-row"> 3 3 + <h1 class="font-bold text-5xl md:text-6xl lg:text-8xl">tightly-knit<br>social coding.</h1> 4 4 + <div id="hero-right" class="space-y-6"> 5 5 + <p class="text-xl"> 6 6 + The next-generation social coding platform. 7 7 + </p> 8 8 + <p class="text-xl"> 9 9 + We envision a place where developers have ownership of their code, 10 10 + communities can freely self-govern and most importantly, coding can 11 11 + be social and fun again. 12 12 + </p> 13 13 + <form class="flex gap-2 items-stretch"> 14 14 + <input 15 15 + type="email" 16 16 + id="email" 17 17 + name="email" 18 18 + tabindex="4" 19 19 + required 20 20 + placeholder="Enter your email" 21 21 + class="py-2 w-full md:w-fit" 22 22 + /> 23 23 + <button class="btn-create flex items-center gap-2 text-base whitespace-nowrap" type="submit"> 24 24 + join now 25 25 + {{ i "arrow-right" "size-4" }} 26 26 + </button> 27 27 + </form> 28 28 + </div> 32 29 </div> 33 30 {{ end }}

+133

appview/pages/templates/timeline/fragments/preview.html

Reviewed

··· 1 1 + {{ define "timeline/fragments/preview" }} 2 2 + <div class="flex flex-col gap-4 overflow-hidden"> 3 3 + <div class="relative h-80 w-full"> 4 4 + <!-- left fade overlay (fixed on left edge) --> 5 5 + <div class="absolute left-0 top-0 h-full w-16 pointer-events-none z-10 bg-gradient-to-r from-white to-transparent dark:from-gray-900"></div> 6 6 + 7 7 + <!-- right fade overlay (fixed on right edge) --> 8 8 + <div class="absolute right-0 top-0 h-full w-16 pointer-events-none z-10 bg-gradient-to-l from-white to-transparent dark:from-gray-900"></div> 9 9 + 10 10 + {{ template "marquee" $ }} 11 11 + </div> 12 12 + </div> 13 13 + {{ end }} 14 14 + 15 15 + {{ define "marquee" }} 16 16 + {{ $rowOffsets := list 10 80 150 220 }} 17 17 + {{ $prev := -1 }} 18 18 + {{ $w := mul (len .Timeline) 150 }} 19 19 + 20 20 + <div class="absolute h-full flex animate-marquee"> 21 21 + <div class="relative h-full flex-shrink-0 bottom-4 border-b border-gray-200 dark:border-gray-700" style="width: {{ $w }}px;"> 22 22 + {{ range $i, $e := .Timeline }} 23 23 + {{ $curr := randInt 4 }} 24 24 + {{ if eq $curr $prev }} 25 25 + {{ $curr = mod (add $curr 1) 4 }} 26 26 + {{ end }} 27 27 + {{ $offset := index $rowOffsets $curr }} 28 28 + {{ template "timelineEvent" (list $i $e $offset) }} 29 29 + {{ $prev = $curr }} 30 30 + {{ end }} 31 31 + </div> 32 32 + 33 33 + <div 34 34 + class="absolute left-0 bottom-0 h-3 flex-shrink-0 bg-[linear-gradient(to_right,currentColor_1px,transparent_1px)] bg-[length:6px_100%] bg-repeat-x text-gray-400 dark:text-gray-500" 35 35 + style="width: {{ $w }}px;"> 36 36 + </div> 37 37 + 38 38 + </div> 39 39 + {{ end }} 40 40 + 41 41 + {{ define "timelineEvent" }} 42 42 + {{ $i := index . 0 }} 43 43 + {{ $e := index . 1 }} 44 44 + {{ $variance := randInt 10 }} 45 45 + {{ $offset := add (index . 2) $variance }} 46 46 + {{ $left := mul $i 175 }} 47 47 + {{ with $e }} 48 48 + <div 49 49 + class="absolute left-0 flex flex-col divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-sm bg-white dark:bg-gray-800 drop-shadow-sm" 50 50 + style="bottom: {{ $offset }}px; left: {{ $left }}px; transform: translateX(-50%); z-index: 5;" 51 51 + > 52 52 + {{ if .Repo }} 53 53 + {{ template "repoEvent" (list $ .) }} 54 54 + {{ else if .RepoStar }} 55 55 + {{ template "starEvent" (list $ .) }} 56 56 + {{ else if .Follow }} 57 57 + {{ template "followEvent" (list $ .) }} 58 58 + {{ end }} 59 59 + </div> 60 60 + {{ end }} 61 61 + 62 62 + <!-- vertical connector --> 63 63 + <div 64 64 + class="absolute w-px bg-gray-300 dark:bg-gray-700" 65 65 + style="left: {{ $left }}px; bottom: 0px; height: {{ $offset }}px; z-index: 0;" 66 66 + ></div> 67 67 + 68 68 + <!-- dot at the bottom --> 69 69 + <div 70 70 + class="absolute size-2 bg-gray-300 dark:bg-gray-600 rounded-full" 71 71 + style="left: {{ sub $left 3 }}px; bottom: -3px; z-index: 0;"> 72 72 + </div> 73 73 + {{ end }} 74 74 + 75 75 + {{ define "repoEvent" }} 76 76 + {{ $root := index . 0 }} 77 77 + {{ $event := index . 1 }} 78 78 + {{ $repo := $event.Repo }} 79 79 + {{ $source := $event.Source }} 80 80 + {{ $userHandle := resolve $repo.Did }} 81 81 + <div class="px-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-center gap-2 text-sm"> 82 82 + {{ template "user/fragments/picHandleLink" $repo.Did }} 83 83 + {{ with $source }} 84 84 + {{ $sourceDid := resolve .Did }} 85 85 + forked 86 86 + <a href="/{{ $sourceDid }}/{{ .Name }}"class="no-underline hover:underline"> 87 87 + {{ $sourceDid }}/{{ .Name }} 88 88 + </a> 89 89 + to 90 90 + <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline">{{ $repo.Name }}</a> 91 91 + {{ else }} 92 92 + created 93 93 + <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline"> 94 94 + {{ $repo.Name }} 95 95 + </a> 96 96 + {{ end }} 97 97 + </div> 98 98 + {{ end }} 99 99 + 100 100 + {{ define "starEvent" }} 101 101 + {{ $root := index . 0 }} 102 102 + {{ $event := index . 1 }} 103 103 + {{ $star := $event.RepoStar }} 104 104 + {{ with $star }} 105 105 + {{ $starrerHandle := resolve .Did }} 106 106 + {{ $repoOwnerHandle := resolve .Repo.Did }} 107 107 + <div class="px-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-center gap-2 text-sm"> 108 108 + {{ template "user/fragments/picHandleLink" $starrerHandle }} 109 109 + starred 110 110 + {{ template "user/fragments/pic" (list $repoOwnerHandle "size-6") }} 111 111 + <a href="/{{ $repoOwnerHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline"> 112 112 + {{ $repoOwnerHandle | truncateAt30 }}/{{ .Repo.Name }} 113 113 + </a> 114 114 + </div> 115 115 + {{ end }} 116 116 + {{ end }} 117 117 + 118 118 + {{ define "followEvent" }} 119 119 + {{ $root := index . 0 }} 120 120 + {{ $event := index . 1 }} 121 121 + {{ $follow := $event.Follow }} 122 122 + {{ $profile := $event.Profile }} 123 123 + {{ $followStats := $event.FollowStats }} 124 124 + {{ $followStatus := $event.FollowStatus }} 125 125 + 126 126 + {{ $userHandle := resolve $follow.UserDid }} 127 127 + {{ $subjectHandle := resolve $follow.SubjectDid }} 128 128 + <div class="px-6 py-2 bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-center gap-2 text-sm"> 129 129 + {{ template "user/fragments/picHandleLink" $userHandle }} 130 130 + followed 131 131 + {{ template "user/fragments/picHandleLink" $subjectHandle }} 132 132 + </div> 133 133 + {{ end }}