forked from
tangled.org/core
Monorepo for Tangled
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
+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
+21
appview/pages/templates/timeline/fragments/trendingSidebar.html
+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
+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
+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 }}