appview/pages: add icons to timeline preview

+34 -19

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

··· 1 1 {{ define "timeline/fragments/preview" }} 2 2 <div class="flex flex-col gap-4 overflow-hidden"> 3 - <div class="relative h-80 w-full"> 3 + <div class="relative h-96 w-full"> 4 4  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 ··· 78 78 {{ $repo := $event.Repo }} 79 79 {{ $source := $event.Source }} 80 80 {{ $userHandle := resolve $repo.Did }} 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 - {{ template "user/fragments/picHandleLink" $repo.Did }} 83 - {{ with $source }} 84 - {{ $sourceDid := resolve .Did }} 85 - forked 86 - <a href="/{{ $sourceDid }}/{{ .Name }}"class="no-underline hover:underline"> 87 - {{ $sourceDid }}/{{ .Name }} 88 - </a> 89 - to 90 - <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline">{{ $repo.Name }}</a> 91 - {{ else }} 92 - created 93 - <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline"> 94 - {{ $repo.Name }} 95 - </a> 96 - {{ end }} 81 + <div class="bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-stretch divide-x divide-gray-200 dark:divide-gray-700 text-sm"> 82 + <div class="p-4 bg-gray-100 dark:bg-gray-900/50 h-full"> 83 + {{ i "folder-plus" "size-4" }} 84 + </div> 85 + <div class="px-4 flex items-center gap-2"> 86 + {{ template "user/fragments/picHandleLink" $repo.Did }} 87 + {{ with $source }} 88 + {{ $sourceDid := resolve .Did }} 89 + forked 90 + <a href="/{{ $sourceDid }}/{{ .Name }}"class="no-underline hover:underline"> 91 + {{ $sourceDid }}/{{ .Name }} 92 + </a> 93 + to 94 + <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline">{{ $repo.Name }}</a> 95 + {{ else }} 96 + created 97 + <a href="/{{ $userHandle }}/{{ $repo.Name }}" class="no-underline hover:underline"> 98 + {{ $repo.Name }} 99 + </a> 100 + {{ end }} 101 + </div> 97 102 </div> 98 103 {{ end }} 99 104 ··· 104 109 {{ with $star }} 105 110 {{ $starrerHandle := resolve .Did }} 106 111 {{ $repoOwnerHandle := resolve .Repo.Did }} 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"> 112 + <div class="bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-stretch divide-x divide-gray-200 dark:divide-gray-700 text-sm"> 113 + <div class="p-4 bg-gray-100 dark:bg-gray-900/50 h-full"> 114 + {{ i "star" "size-4" }} 115 + </div> 116 + <div class="px-4 flex items-center gap-2"> 108 117 {{ template "user/fragments/picHandleLink" $starrerHandle }} 109 118 starred 110 119 {{ template "user/fragments/pic" (list $repoOwnerHandle "size-6") }} 111 120 <a href="/{{ $repoOwnerHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline"> 112 121 {{ $repoOwnerHandle | truncateAt30 }}/{{ .Repo.Name }} 113 122 </a> 123 + </div> 114 124 </div> 115 125 {{ end }} 116 126 {{ end }} ··· 125 135 126 136 {{ $userHandle := resolve $follow.UserDid }} 127 137 {{ $subjectHandle := resolve $follow.SubjectDid }} 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"> 138 + <div class="bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 flex w-max items-stretch divide-x divide-gray-200 dark:divide-gray-700 text-sm"> 139 + <div class="p-4 bg-gray-100 dark:bg-gray-900/50 h-full"> 140 + {{ i "user-plus" "size-4" }} 141 + </div> 142 + <div class="px-4 flex items-center gap-2"> 129 143 {{ template "user/fragments/picHandleLink" $userHandle }} 130 144 followed 131 145 {{ template "user/fragments/picHandleLink" $subjectHandle }} 146 + </div> 132 147 </div> 133 148 {{ end }}

+98 -193

appview/pages/templates/timeline/home.html

··· 23 23 24 24 25 25 {{ define "content" }} 26 - <div class="flex flex-col gap-24 md:gap-40 my-24 md:my-32"> 26 + <div class="flex flex-col gap-20 md:gap-40 my-20 md:my-32"> 27 27 {{ template "timeline/fragments/hero" . }} 28 28 {{ template "timeline/fragments/preview" . }} 29 29 {{ template "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 - {{ $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" }} 84 + {{ $contentStyle := "hidden bg-white dark:bg-gray-800 rounded shadow-sm p-6 md:p-8 border border-gray-200 dark:border-gray-700 grid-cols-1 animate-fadein" }} 85 85 {{ $progressOverlayStyle := "absolute inset-0 bg-gray-600/10 dark:bg-gray-100/10 w-0 transition-none" }} 86 86 87 87 <style> ··· 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 - {{ $titleStyle := "text-xl md:text-2xl font-bold my-2 text-gray-900 dark:text-gray-100" }} 142 - {{ $textContentStyle := "pb-6 md:p-6 md:pr-12 md:text-lg" }} 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" }} 141 + {{ $titleStyle := "text-2xl md:text-6xl my-2 md:mb-4 text-black dark:text-white font-medium" }} 142 + {{ $textContentStyle := "pb-6 md:text-xl" }} 143 + {{ $imgContentStyle := "w-full 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 + {{ $linkDesktopStyle := "hover:no-underline items-center gap-2 p-3 text-base btn" }} 144 145 145 - <div class="col-span-3 {{ $contentStyle }} peer-checked/prs:grid "> 146 - <div class="{{ $textContentStyle }} flex flex-col gap-4 md:gap-8 place-self-center"> 147 - <section> 148 - <h1 class="{{ $titleStyle }}">Stacked PRs</h1> 149 - <p> 146 + <div class="col-span-3 {{ $contentStyle }} peer-checked/prs:grid relative"> 147 + <div class="{{ $textContentStyle }} flex gap-4 md:gap-8"> 148 + <section class="space-y-4"> 149 + <h1 class="{{ $titleStyle }}">Pull requests, reimagined</h1> 150 + <p class="text-gray-600 dark:text-gray-400"> 150 151 Break down large features into small, reviewable chunks. Stack pull 151 152 requests on top of each other and ship faster with better code 152 - reviews. Tangled natively supports stacking using Jujutsu <a 153 - href="https://docs.jj-vcs.dev/latest/glossary/#change-id" 154 - class="underline">Change-Ids</a>. 153 + reviews. Tangled natively supports stacking using Jujutsu. 155 154 </p> 155 + <a href="https://blog.tangled.org/stacking" class="hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-black dark:text-white font-medium"> 156 + Learn more 157 + {{ i "arrow-right" "size-4" }} 158 + </a> 156 159 </section> 157 - <section> 158 - <h1 class="{{ $titleStyle }}">Round-based review</h1> 159 - <p> 160 - Pull-requests in Tangled are round-based, which means, each 161 - submission is "immutable". To update a PR, the author must start a 162 - second revision or "round". As a reviewer, you never have to worry 163 - about a PR changing <em>during</em> a review! 164 - </p> 165 - </section> 160 + <div class="w-fit hidden md:flex items-center"> 161 + <div class="size-32 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 -mr-4" > 162 + {{ i "wand-sparkles" "size-16 text-green-500 dark:text-green-500" }} 163 + </div> 164 + <div class="size-40 rounded-full flex items-center justify-center bg-indigo-100 dark:bg-indigo-900 z-10"> 165 + {{ i "git-pull-request" "size-24 text-indigo-500 dark:text-indigo-500 rotate-12" }} 166 + </div> 167 + </div> 166 168 </div> 167 - <div class="{{ $imgContentStyle }} pl-24 md:pl-40"> 168 - <div class="flex flex-col" style="transform: perspective(1000px) rotateX(15deg)"> 169 - {{ $mockPRs := list 170 - (dict "Id" 941 "Title" "spindle/nixery: update setup command docs" "State" "open" ) 171 - (dict "Id" 940 "Title" "appview/pulls: fix search not updating count of pull requests" "State" "open" ) 172 - (dict "Id" 939 "Title" "appview/pages: improved seo tags for home, repo and profile" "State" "open" ) 173 - (dict "Id" 938 "Title" "appview/state: update robots.txt" "State" "merged" ) 174 - (dict "Id" 937 "Title" "appview/profile: show dummy profile when no tangled profile" "State" "merged" ) 175 - (dict "Id" 936 "Title" "appview/pipelines: fix incorrect totals" "State" "merged" ) 176 - }} 177 - {{ range $index, $pr := $mockPRs }} 178 - {{ $scale := 1.4 }} 179 - {{ if gt $index 0 }} 180 - {{ $scale = subf64 1.4 (mulf64 (f64 $index) 0.04) }} 181 - {{ if lt $scale 1.0 }}{{ $scale = 1.0 }}{{ end }} 182 - {{ end }} 183 - {{ $zIndex := sub 100 $index }} 184 - {{ template "mockPRRow" (dict "PR" $pr "Scale" $scale "ZIndex" $zIndex) }} 185 - {{ end }} 169 + <div class="{{ $imgContentStyle }} min-h-[500px] relative overflow-hidden"> 170 + <div class="w-full h-full relative overflow-hidden"> 171 + <img src="https://assets.tangled.network/home-page-prs.png" class="h-full w-[200%] md:w-full object-cover object-left" /> 186 172 </div> 187 173 </div> 174 + <a href="https://blog.tangled.org/stacking" class="hover:no-underline hidden md:inline-flex absolute -bottom-6 -right-12 items-center gap-2 p-3 text-base btn"> 175 + Learn more 176 + {{ i "arrow-right" "size-4" }} 177 + </a> 188 178 </div> 189 179 190 180 <div class="col-span-3 {{ $contentStyle }} peer-checked/knots:grid"> 191 - <div class="{{ $textContentStyle }} flex flex-col gap-4 md:gap-8 place-self-center"> 192 - <section> 193 - <h1 class="{{ $titleStyle }}">Knots</h1> 194 - <p> 195 - Host your repositories on your own infrastructure with <a 196 - href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide" class="underline">knots</a>. 197 - Knots are lightweight git repository hosts that syndicate git 198 - operations across the network. You can setup a knot server on a 199 - machine as small as a Raspberry Pi! 200 - <br> 201 - <br> 202 - If you want to try Tangled without self-hosting, fear not! All users 203 - are added to our hosted knot by default. 181 + <div class="{{ $textContentStyle }} flex place-content-between gap-4 md:gap-8"> 182 + <section class="space-y-4"> 183 + <h1 class="{{ $titleStyle }}">Run it at home</h1> 184 + <p class="text-gray-600 dark:text-gray-400"> 185 + Host your repositories on your own infrastructure with <a href="https://docs.tangled.org/knot-self-hosting-guide.html#knot-self-hosting-guide" class="no-underline">knots</a>. 186 + Run CI on your own machines with <a href="https://docs.tangled.org/spindles.html#self-hosting-guide" class="no-underline">spindles</a>. 187 + <br> 188 + Don't want to self-host? All are welcome on our hosted instances. 204 189 </p> 205 190 </section> 206 - <section> 207 - <h1 class="{{ $titleStyle }}">Spindles</h1> 208 - <p> 209 - Host CI runners on your own infrastructure with <a 210 - href="https://docs.tangled.org/spindles.html#self-hosting-guide" class="underline">spindles</a>. 211 - Spindles are responsible for queuing up CI jobs and syndicating 212 - pipeline statuses to the network. Presently, the task of sandboxing 213 - workflows and caching dependencies is delegated to Docker. 214 - </p> 215 - </section> 216 - </div> 217 - {{ $planetWrapperStyle := "absolute left-1/2 bottom-0 flex items-start justify-center -translate-x-1/2 translate-y-1/2" }} 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 - {{ $planetStyle := "-mt-8 size-16 md:-mt-10 md:size-20 rounded-full shadow-sm border flex items-center justify-center" }} 220 - <div class="{{ $imgContentStyle }} min-h-[500px] relative"> 221 - <div class="size-[250px] {{ $orbitStyle }}"></div> 222 - <div class="size-[500px] {{ $orbitStyle }}"></div> 223 - <div class="size-[750px] {{ $orbitStyle }}"></div> 224 - 225 -  226 - <div class="{{ $planetWrapperStyle }} size-[250px] rotate-[12deg]"> 227 - <div class="{{ $planetStyle }} -rotate-[12deg] bg-blue-100 dark:bg-blue-900 border-blue-500 dark:border-blue-500"> 228 - {{ i "server" "size-8" "text-blue-500" "dark:text-blue-500" }} 191 + <div class="w-fit hidden md:flex items-center"> 192 + <div class="size-32 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 -mr-4" > 193 + {{ i "workflow" "size-16 text-green-500 dark:text-green-500" }} 229 194 </div> 230 - </div> 231 - 232 -  233 - <div class="{{ $planetWrapperStyle }} size-[500px] -rotate-[32deg]"> 234 - <div class="{{ $planetStyle }} rotate-[32deg] bg-green-100 dark:bg-green-900 border-green-500 dark:border-green-500"> 235 - {{ i "hard-drive" "size-8" "text-green-500" "dark:text-green-500" }} 236 - </div> 237 - </div> 238 - <div class="{{ $planetWrapperStyle }} size-[500px] rotate-[24deg]"> 239 - <div class="{{ $planetStyle }} -rotate-[24deg] bg-amber-100 dark:bg-amber-900 border-amber-500 dark:border-amber-500"> 240 - {{ i "server" "size-8" "text-amber-500" "dark:text-amber-500" }} 195 + <div class="size-40 rounded-full flex items-center justify-center bg-indigo-100 dark:bg-indigo-900 z-10"> 196 + {{ i "server" "size-24 text-indigo-500 dark:text-indigo-500" }} 241 197 </div> 242 198 </div> 243 - 244 -  245 - <div class="{{ $planetWrapperStyle }} size-[750px] -rotate-[40deg]"> 246 - <div class="{{ $planetStyle }} rotate-[40deg] bg-blue-100 dark:bg-blue-900 border-blue-500 dark:border-blue-500"> 247 - {{ i "server" "size-8" "text-blue-500" "dark:text-blue-500" }} 248 - </div> 249 - </div> 250 - <div class="{{ $planetWrapperStyle }} size-[750px] rotate-[3deg]"> 251 - <div class="{{ $planetStyle }} -rotate-[3deg] bg-green-100 dark:bg-green-900 border-green-500 dark:border-green-500"> 252 - {{ i "router" "size-8" "text-green-500" "dark:text-green-500" }} 253 - </div> 254 - </div> 255 - <div class="{{ $planetWrapperStyle }} size-[750px] rotate-[44deg]"> 256 - <div class="{{ $planetStyle }} -rotate-[44deg] bg-amber-100 dark:bg-amber-900 border-amber-500 dark:border-amber-500"> 257 - {{ i "database" "size-8" "text-amber-500" "dark:text-amber-500" }} 258 - </div> 199 + </div> 200 + <div class="{{ $imgContentStyle }} min-h-[500px] relative overflow-hidden"> 201 + <div class="w-full h-full relative overflow-hidden"> 202 + <img src="https://assets.tangled.network/home-page-self-host.png" class="h-full w-[200%] md:w-full object-cover object-center" /> 259 203 </div> 260 204 </div> 261 205 </div> 262 206 263 207 <div class="col-span-3 {{ $contentStyle }} peer-checked/spindles:grid"> 264 - <div class="{{ $textContentStyle }} flex flex-col gap-4 md:gap-8 place-self-center"> 265 - <section> 208 + <div class="{{ $textContentStyle }} flex place-content-between gap-4 md:gap-8"> 209 + <section class="space-y-4"> 266 210 <h1 class="{{ $titleStyle }}">Nix-powered CI</h1> 267 - <p> 268 - Pick and choose dependencies for your CI pipelines from <a 269 - href="https://docs.tangled.org/spindles.html#dependencies" 270 - class="underline"><code>nixpkgs</code></a>, one of the biggest 271 - package repositories. 272 - <br> 273 - <br> 274 - All dependencies and workflow images are cached using <a 275 - href="https://nixery.dev/">nixery</a>. Subsuquent runs of your CI 276 - pipeline will load all dependencies almost instantly. 211 + <p class="text-gray-600 dark:text-gray-400"> 212 + Pick and choose dependencies for your CI pipelines from <a 213 + href="https://docs.tangled.org/spindles.html#dependencies" 214 + class="no-underline"><code>nixpkgs</code></a>, one of the biggest 215 + package repositories. 216 + <br> 217 + Support for Docker and MicroVM based runners coming soon! 277 218 </p> 278 219 </section> 279 - <section> 280 - <div class="flex items-center gap-2 my-4"> 281 - <h1 class="{{ $titleStyle }}">Customizable Engines</h1> 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> 220 + <div class="w-fit hidden md:flex items-center"> 221 + <div class="size-32 rounded-full flex items-center justify-center bg-green-100 dark:bg-green-900 -mr-4" > 222 + {{ i "package" "size-16 text-green-500 dark:text-green-500" }} 223 + </div> 224 + <div class="size-40 rounded-full flex items-center justify-center bg-indigo-100 dark:bg-indigo-900 z-10"> 225 + {{ i "snowflake" "size-24 text-indigo-500 dark:text-indigo-500 rotate-12" }} 283 226 </div> 284 - <p> 285 - We know nix is not for everybody! Spindles are built to have 286 - swappable engines, on our roadmap are Docker and Firecracker based 287 - engines. 288 - </p> 289 - </section> 227 + </div> 290 228 </div> 291 - <div class="{{ $imgContentStyle }} flex items-end pb-0"> 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 - <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 - <span class="font-mono text-gray-600 dark:text-gray-400 text-sm md:text-lg">.tangled/workflows/test.yml</span> 295 - <div class="flex items-center gap-2"> 296 - <div class="size-3 rounded-full bg-red-500"></div> 297 - <div class="size-3 rounded-full bg-yellow-500"></div> 298 - <div class="size-3 rounded-full bg-green-500"></div> 299 - </div> 300 - </div> 301 - <div class="bg-white dark:bg-gray-800 p-4 overflow-x-auto text-sm md:text-lg"> 302 - {{ $yamlContent := `when: 303 - - event: push 304 - branch: main 305 - 306 - dependencies: 307 - nixpkgs: 308 - - go 309 - - gcc 310 - 311 - environment: 312 - CGO_ENABLED: 1 313 - 314 - steps: 315 - - name: run all tests 316 - command: go test -v ./...` }} 317 - <div class="whitespace-pre">{{ code $yamlContent ".tangled/workflows/test.yml" | escapeHtml }}</div> 318 - </div> 229 + <div class="{{ $imgContentStyle }} flex items-end pb-0 overflow-hidden"> 230 + <div class="w-full h-full relative overflow-hidden"> 231 + <img src="https://assets.tangled.network/home-page-ci.png" class="h-full w-[200%] md:w-full object-cover object-left md:object-center" /> 319 232 </div> 320 233 </div> 321 234 </div> ··· 365 278 </script> 366 279 {{ end }} 367 280 368 - {{ define "mockPRRow" }} 369 - {{ $pr := .PR }} 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 - <div class="flex items-center gap-2 min-w-0 flex-1 pr-2"> 372 - <div class="flex-shrink-0"> 373 - {{ if eq $pr.State "open" }} 374 - {{ i "git-pull-request" "size-4 text-green-500" }} 375 - {{ else }} 376 - {{ i "git-merge" "size-4 text-purple-500" }} 377 - {{ end }} 378 - </div> 379 - <span class="truncate text-sm text-gray-800 dark:text-gray-200"> 380 - <span class="text-gray-500 dark:text-gray-400">#{{ $pr.Id }}</span> 381 - {{ $pr.Title }} 382 - </span> 383 - </div> 384 - </div> 385 - {{ end }} 386 - 387 281 {{ define "features2" }} 388 282 {{ $cardStyle := "bg-white dark:bg-gray-800 rounded shadow-sm border border-gray-200 dark:border-gray-700" }} 389 283 {{ $cardInnerStyle := "flex flex-row items-center gap-4 md:gap-6 p-4 md:p-6 md:pt-8 relative" }} 390 284 {{ $contentStyle := "flex-1 flex flex-col" }} 391 285 {{ $titleStyle := "text-xl md:text-2xl font-bold mb-2 md:mb-3 text-gray-900 dark:text-gray-100" }} 392 - {{ $descriptionStyle := "text-gray-600 dark:text-gray-300 text-sm md:text-base leading-relaxed mb-3 md:mb-0" }} 393 - {{ $linkMobileStyle := "hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-gray-700 dark:text-gray-300 font-medium" }} 286 + {{ $descriptionStyle := "text-gray-600 dark:text-gray-300 text-sm md:text-base leading-relaxed mb-5 md:mb-0" }} 287 + {{ $linkMobileStyle := "hover:no-underline inline-flex md:hidden items-center gap-2 text-sm text-black dark:text-white font-medium" }} 394 288 {{ $iconContainerStyle := "relative shrink-0 w-24 h-24 md:w-48 md:h-48" }} 395 - {{ $iconCircleStyle := "w-full h-full rounded-full flex items-center justify-center" }} 289 + {{ $iconCircleStyle := "rounded-full flex items-center justify-center border border-gray-200 dark:border-gray-700" }} 396 290 {{ $linkDesktopStyle := "hover:no-underline hidden md:inline-flex absolute -bottom-10 -right-14 items-center gap-2 p-3 text-base btn" }} 397 291 398 292 <div class="w-full flex flex-col gap-6 md:gap-40 max-w-5xl mx-auto px-2"> 399 293 <div class="{{ $cardStyle }} md:mr-32"> 400 294 <div class="{{ $cardInnerStyle }}"> 295 + {{ $moreLink := "https://docs.tangled.org/quick-start-guide.html#login-or-sign-up" }} 401 296 <div class="{{ $contentStyle }}"> 402 297 <h3 class="{{ $titleStyle }}">Built on AT Protocol</h3> 403 298 <p class="{{ $descriptionStyle }}"> ··· 408 303 <br> 409 304 Bring an existing AT Protocol account (such as your Bluesky 410 305 account), or signup for one with us. 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 306 </p> 413 - <a href="TODO" class="{{ $linkMobileStyle }}"> 307 + <a href="{{ $moreLink }}" class="{{ $linkMobileStyle }}"> 414 308 Learn more 415 309 {{ i "arrow-right" "size-4" }} 416 310 </a> 417 311 </div> 418 312 <div class="{{ $iconContainerStyle }}"> 419 - <div class="{{ $iconCircleStyle }} bg-blue-100 dark:bg-blue-900/50"> 313 + <div class="{{ $iconCircleStyle }} w-full h-full bg-blue-100 dark:bg-blue-900/50"> 420 314 {{ i "at-sign" "size-12 md:size-24" "text-blue-500 dark:text-blue-500" "rotate-12" }} 421 315 </div> 422 - <a href="TODO" class="{{ $linkDesktopStyle }}"> 316 + <div class="{{ $iconCircleStyle }} absolute -top-2 -left-2 w-10 h-10 md:w-16 md:h-16 rounded-full bg-white dark:bg-gray-800 -rotate-12"> 317 + {{ i "globe" "size-4 md:size-8" "text-blue-500 dark:text-blue-500" }} 318 + </div> 319 + <a href="{{ $moreLink }}" class="{{ $linkDesktopStyle }}"> 423 320 Learn more 424 321 {{ i "arrow-right" "size-4" }} 425 322 </a> ··· 429 326 430 327 <div class="{{ $cardStyle }} md:ml-32"> 431 328 <div class="{{ $cardInnerStyle }}"> 329 + {{ $moreLink := "https://tangled.org/core" }} 432 330 <div class="{{ $contentStyle }}"> 433 331 <h3 class="{{ $titleStyle }}">Free and Open-source</h3> 434 332 <p class="{{ $descriptionStyle }}"> ··· 439 337 We welcome contributions however big or small. You can start contributing by picking up a 440 338 <a class="underline" href="https://tangled.org/tangled.org/core/issues">good-first-issue</a>. 441 339 </p> 442 - <a href="TODO" class="{{ $linkMobileStyle }}"> 443 - Learn more 340 + <a href="{{ $moreLink }}" class="{{ $linkMobileStyle }}"> 341 + View source 444 342 {{ i "arrow-right" "size-4" }} 445 343 </a> 446 344 </div> 447 345 <div class="{{ $iconContainerStyle }}"> 448 - <div class="{{ $iconCircleStyle }} bg-green-100 dark:bg-green-900/50"> 346 + <div class="{{ $iconCircleStyle }} w-full h-full bg-green-100 dark:bg-green-900/50"> 449 347 {{ i "package-open" "size-12 md:size-24" "text-green-500 dark:text-green-500" "-rotate-12" }} 450 348 </div> 451 - <a href="TODO" class="{{ $linkDesktopStyle }}"> 452 - Learn more 349 + <div class="absolute -top-2 -left-2 w-10 h-10 md:w-16 md:h-16 rounded-full bg-white dark:bg-gray-800 flex items-center justify-center border border-gray-200 dark:border-gray-700 rotate-12"> 350 + {{ i "heart" "size-4 md:size-8" "text-green-500 dark:text-green-500" }} 351 + </div> 352 + <a href="{{ $moreLink }}" class="{{ $linkDesktopStyle }}"> 353 + View source 453 354 {{ i "arrow-right" "size-4" }} 454 355 </a> 455 356 </div> ··· 458 359 459 360 <div class="{{ $cardStyle }} md:mr-32"> 460 361 <div class="{{ $cardInnerStyle }}"> 362 + {{ $moreLink := "/timeline" }} 461 363 <div class="{{ $contentStyle }}"> 462 364 <h3 class="{{ $titleStyle }}">Social coding is back</h3> 463 365 <p class="{{ $descriptionStyle }}"> ··· 468 370 friends on Bluesky, you will find them on Tangled with the same 469 371 handle. 470 372 </p> 471 - <a href="TODO" class="{{ $linkMobileStyle }}"> 472 - Learn more 373 + <a href="{{ $moreLink }}" class="{{ $linkMobileStyle }}"> 374 + Explore timeline 473 375 {{ i "arrow-right" "size-4" }} 474 376 </a> 475 377 </div> 476 378 <div class="{{ $iconContainerStyle }}"> 477 - <div class="{{ $iconCircleStyle }} bg-amber-100 dark:bg-amber-900/50"> 379 + <div class="{{ $iconCircleStyle }} w-full h-full bg-amber-100 dark:bg-amber-900/50"> 478 380 {{ i "message-circle-heart" "size-12 md:size-24" "text-amber-500 dark:text-amber-500" "rotate-12" }} 479 381 </div> 480 - <a href="TODO" class="{{ $linkDesktopStyle }}"> 481 - Learn more 382 + <div class="absolute -top-2 -left-2 w-10 h-10 md:w-16 md:h-16 rounded-full bg-white dark:bg-gray-800 flex items-center justify-center border border-gray-200 dark:border-gray-700 -rotate-12"> 383 + {{ i "users" "size-4 md:size-8" "text-amber-500 dark:text-amber-500" }} 384 + </div> 385 + <a href="{{ $moreLink }}" class="{{ $linkDesktopStyle }}"> 386 + Explore timeline 482 387 {{ i "arrow-right" "size-4" }} 483 388 </a> 484 389 </div> ··· 581 486 <span>{{ .RepostCount }}</span> 582 487 </div> 583 488 <div class="flex items-center gap-1"> 584 - {{ i "reply" "size-4 -scale-x-1" }} 489 + {{ i "message-square" "size-4 -scale-x-1" }} 585 490 <span>{{ add64 .ReplyCount .QuoteCount }}</span> 586 491 </div> 587 492 </div> ··· 600 505 <br> 601 506 <a href="https://docs.tangled.org/quick-start-guide.html#login-or-sign-up">Read more on the docs.</a> 602 507 </p> 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"> 508 + <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" method="get" action="/signup"> 604 509 <input 605 510 type="email" 606 511 id="email" 607 - name="email" 512 + name="id" 608 513 tabindex="4" 609 514 required 610 515 placeholder="Enter your email"

+19 -1

input.css

··· 288 288 } 289 289 290 290 .animate-marquee { 291 - animation: scroll 30s linear infinite; 291 + animation: scroll 60s linear infinite; 292 292 } 293 293 294 294 .animate-marquee:hover { ··· 309 309 310 310 .animate-progress { 311 311 animation: progress 5s linear forwards; 312 + } 313 + 314 + @keyframes fadeIn { 315 + from { opacity: 0; } 316 + to { opacity: 1; } 317 + } 318 + 319 + @keyframes fadeOut { 320 + from { opacity: 1; } 321 + to { opacity: 0; } 322 + } 323 + 324 + .animate-fadein { 325 + animation: fadeIn 0.25s ease-in forwards; 326 + } 327 + 328 + .animate-fadeout { 329 + animation: fadeOut 0.25s ease-out forwards; 312 330 } 313 331 } 314 332