Monorepo for Tangled
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

appview/pages: replace join cta with newsletter signup

Rework timeline page to be two column layout on desktop.

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>

+99 -20
+1
appview/pages/templates/layouts/base.html
··· 60 60 {{ block "extrameta" . }}{{ end }} 61 61 </head> 62 62 <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 }}"> 63 + 63 64 {{ block "topbarLayout" . }} 64 65 <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;"> 65 66
+16
appview/pages/templates/timeline/fragments/newsletter.html
··· 1 + {{ define "timeline/fragments/newsletter" }} 2 + <div id="newsletter-banner" class="mb-4"> 3 + <form hx-post="/newsletter/signup" hx-target="#newsletter-msg" hx-swap="outerHTML" 4 + class="relative flex flex-col gap-2 px-5 py-3 bg-green-50 dark:bg-green-950 border border-green-800/[0.125] dark:border-green-400/20 shadow-sm rounded"> 5 + <p class="pr-6">We've got a newsletter! Punch in your email to get our updates sent straight to your inbox.</p> 6 + <span id="newsletter-msg" class="flex items-center gap-4"> 7 + <input type="email" name="email" placeholder="your@email.com" required 8 + class="flex-1 min-w-0 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded" /> 9 + <button type="submit" class="btn whitespace-nowrap shrink-0">subscribe</button> 10 + </span> 11 + <button type="button" onclick="document.getElementById('newsletter-banner').remove(); localStorage.setItem('newsletter-dismissed','1')" 12 + class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" aria-label="Dismiss">✕</button> 13 + </form> 14 + </div> 15 + <script>if(localStorage.getItem('newsletter-dismissed'))document.getElementById('newsletter-banner').remove();</script> 16 + {{ end }}
+17
appview/pages/templates/timeline/fragments/newsletterWidget.html
··· 1 + {{ define "timeline/fragments/newsletterWidget" }} 2 + <div id="newsletter-widget" class="relative border border-green-200 dark:border-green-700 rounded-sm bg-green-50 dark:bg-green-950 p-4 pb-2"> 3 + <button type="button" 4 + onclick="document.getElementById('newsletter-widget').remove(); localStorage.setItem('newsletter-dismissed','1')" 5 + class="absolute top-3 right-3 text-green-400 hover:text-green-600 dark:hover:text-green-200 leading-none text-sm" 6 + aria-label="Dismiss">✕</button> 7 + <p class="text-green-700 dark:text-green-300 pr-6 mb-3">We've got a newsletter! Punch in your email to subscribe.</p> 8 + <form hx-post="/newsletter/signup" hx-target="#newsletter-widget-msg" hx-swap="outerHTML"> 9 + <span id="newsletter-widget-msg" class="flex items-center gap-2"> 10 + <input type="email" name="email" placeholder="your@email.com" required 11 + class="flex-1 min-w-0 text-sm" /> 12 + <button type="submit" class="btn whitespace-nowrap shrink-0">subscribe</button> 13 + </span> 14 + </form> 15 + </div> 16 + <script>if(localStorage.getItem('newsletter-dismissed'))document.getElementById('newsletter-widget').remove();</script> 17 + {{ end }}
+21
appview/pages/templates/timeline/fragments/trendingSidebar.html
··· 1 + {{ define "timeline/fragments/trendingSidebar" }} 2 + <div class="py-6 border-t border-gray-200 dark:border-gray-700"> 3 + <h3 class="text-xl font-bold dark:text-white flex items-center gap-2 pb-4"> 4 + Trending 5 + {{ i "trending-up" "size-4 flex-shrink-0" }} 6 + </h3> 7 + {{ if .Repos }} 8 + <div class="flex flex-col gap-4"> 9 + {{ range $index, $repo := .Repos }} 10 + <div class="border border-gray-200 dark:border-gray-700 rounded-sm"> 11 + {{ template "user/fragments/repoCard" (list $ $repo true) }} 12 + </div> 13 + {{ end }} 14 + </div> 15 + {{ else }} 16 + <div class="py-6 px-4 border border-gray-200 dark:border-gray-700 rounded-sm text-sm text-gray-500 dark:text-gray-400 text-center"> 17 + No trending repositories this week 18 + </div> 19 + {{ end }} 20 + </div> 21 + {{ end }}
+20 -19
appview/pages/templates/timeline/home.html
··· 29 29 {{ template "features1" . }} 30 30 {{ template "features2" . }} 31 31 {{ template "recentUpdates" . }} 32 - {{ template "community" . }} 32 + {{ template "newsletter" . }} 33 + 33 34 </div> 34 35 {{ end }} 35 36 ··· 503 504 </div> 504 505 {{ end }} 505 506 506 - {{ define "community" }} 507 + {{ define "newsletter" }} 507 508 <div class="w-full px-2 py-16 md:py-24"> 508 509 <div class="max-w-2xl mx-auto text-center space-y-6"> 509 - <h2 class="text-3xl md:text-6xl font-bold text-gray-900 dark:text-gray-100">Join the network</h2> 510 + <h2 class="text-3xl md:text-6xl font-bold text-gray-900 dark:text-gray-100">Stay in the loop</h2> 510 511 <p class="text-xl text-gray-600 dark:text-gray-300"> 511 - You can participate in the Tangled network with an AT account. If you 512 - don't know what that is, you can sign up for one below. 512 + We've got a newsletter! Punch in your email to stay updated on what we're shipping at Tangled. 513 513 </p> 514 - <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"> 515 - <input 516 - type="email" 517 - id="email" 518 - name="id" 519 - tabindex="4" 520 - required 521 - placeholder="Enter your email" 522 - class="py-2 w-full" 523 - /> 524 - <button class="btn-create flex items-center gap-2 text-base whitespace-nowrap" type="submit"> 525 - join now 526 - {{ i "arrow-right" "size-4" }} 527 - </button> 514 + <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" hx-post="/newsletter/signup" hx-target="#newsletter-msg" hx-swap="outerHTML"> 515 + <span id="newsletter-msg" class="flex gap-2 items-stretch flex-1 min-w-0"> 516 + <input 517 + type="email" 518 + name="email" 519 + tabindex="4" 520 + required 521 + placeholder="Enter your email" 522 + class="py-2 w-full" 523 + /> 524 + <button class="btn-create flex items-center gap-2 text-base whitespace-nowrap" type="submit"> 525 + subscribe 526 + {{ i "arrow-right" "size-4" }} 527 + </button> 528 + </span> 528 529 </form> 529 530 </div> 530 531 {{ end }}
+24 -1
appview/pages/templates/timeline/timeline.html
··· 7 7 <meta property="og:description" content="tightly-knit social coding" /> 8 8 {{ end }} 9 9 10 + {{ define "mainLayout" }} 11 + <div class="flex-grow"> 12 + <div class="max-w-screen-xl mx-auto flex flex-col gap-4"> 13 + <main>{{ block "content" . }}{{ end }}</main> 14 + </div> 15 + </div> 16 + {{ end }} 17 + 10 18 {{ define "content" }} 19 + <div class="lg:hidden"> 20 + {{ template "timeline/fragments/newsletter" . }} 11 21 {{ template "timeline/fragments/goodfirstissues" . }} 12 22 {{ template "timeline/fragments/trending" . }} 13 - {{ template "timeline/fragments/timeline" . }} 23 + </div> 24 + 25 + <div class="flex gap-0"> 26 + <div class="flex-1 min-w-0 flex flex-col gap-0"> 27 + <div class="hidden lg:block"> 28 + {{ template "timeline/fragments/goodfirstissues" . }} 29 + </div> 30 + {{ template "timeline/fragments/timeline" . }} 31 + </div> 32 + <div class="hidden lg:flex flex-col gap-4 w-[28rem] flex-shrink-0 pl-8"> 33 + {{ template "timeline/fragments/newsletterWidget" . }} 34 + {{ template "timeline/fragments/trendingSidebar" . }} 35 + </div> 36 + </div> 14 37 {{ end }}