-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathcrew.templ
152 lines (147 loc) · 5.28 KB
/
crew.templ
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
package website
templ crew() {
<section class="container mx-auto">
@headerLine()
<h4 class="v-h4 mt-12">Our crew.</h4>
<h1 class="v-h1 mt-2">Experts in all things Continuous and Cloud.</h1>
</section>
<section class="container mx-auto">
<ul
class="space-y-12 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:grid-cols-3 lg:gap-x-8 list-none"
>
for _, member := range Crew {
if member.Active {
<li>
@memberCard(member)
</li>
}
}
</ul>
</section>
}
templ crewMember(member Member, posts []*Post) {
if member.Active {
<section class="container mx-auto">
<div class="grid gap-4 md:gap-8 sm:grid-cols-[25%_75%]">
<div>
<img
src={ member.ProfileOrAvatar() }
alt={ member.Name }
class="h-full w-full object-top object-contain rounded-md"
/>
</div>
<div>
<h2 class="v-h2">{ member.Name }</h2>
<h4 class="v-h4 mt-2">{ member.Position }</h4>
<div class="hidden mt-4 lg:flex flex-wrap gap-x-2">
for _, tag := range member.Tags {
<div class="px-2 v-p group/tag hover:bg-v-pink">
<span class="text-v-gray group-hover/tag:text-v-white">#</span><span class="text-v-black/70 group-hover/tag:text-v-white">{ tag }</span>
</div>
}
</div>
<div class="mt-4 flex items-center gap-x-4">
@memberSocialLinkedInIcon(member, "w-8 h-8")
@memberSocialGitHubIcon(member, "w-8 h-8")
</div>
</div>
<div class="sm:col-span-2">
<div class="mb-4 flex lg:hidden flex-wrap gap-x-2">
for _, tag := range member.Tags {
<div class="px-2 v-p group/tag hover:bg-v-pink">
<span class="text-v-gray group-hover/tag:text-v-white">#</span><span class="text-v-black/70 group-hover/tag:text-v-white">{ tag }</span>
</div>
}
</div>
<div class="prose md:prose-lg lg:prose-xl xl:prose-2xl">
@templ.Raw(member.RenderBio())
</div>
</div>
</div>
</section>
} else {
<section class="container mx-auto">
<div class="flex flex-col gap-y-8 sm:flex-row sm:gap-x-4">
<div class="w-auto flex flex-col gap-y-8 lg:flex-row sm:gap-x-4">
<div class="max-w-sm lg:w-1/4">
<img
src={ member.ProfileOrAvatar() }
alt={ member.Name }
class="h-full w-full object-top object-contain rounded-md"
/>
</div>
<div class="w-full lg:w-3/4">
<h2 class="v-h2">{ member.Name }</h2>
<h4 class="v-h4 mt-2">Verifa Alumni</h4>
</div>
</div>
</div>
</section>
}
if len(posts) > 0 {
<section class="container mx-auto">
@headerLine()
<h4 class="v-h4">Posts by author</h4>
<div class="mt-12">
@PostsGrid(posts, PostsGridOptions{})
</div>
</section>
}
}
templ memberSocialLinkedInIcon(member Member, className string) {
<a href={ templ.URL(member.Linkedin) } class="text-v-beige hover:text-gray-500" target="_blank">
<span class="sr-only">LinkedIn</span>
<svg
class={ className, "text-v-lilac hover:text-v-black" }
fill="currentColor"
viewBox="0 0 20 20"
aria-hidden="true"
>
<path
fill-rule="evenodd"
d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z"
clip-rule="evenodd"
></path>
</svg>
</a>
}
templ memberSocialGitHubIcon(member Member, className string) {
if member.Github != "" {
<a href={ templ.URL("https://github.com/" + member.Github) } target="_blank">
<svg
class={ className, "text-v-gray hover:text-v-black" }
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<path
d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"
></path>
</svg>
</a>
}
}
templ memberCard(member Member) {
<div class="space-y-4">
<a href={ templ.URL(member.RelativeURL()) } class="group">
<div class="flex flex-col space-y-4">
<div>
<img
class="h-64 w-64 object-contain rounded-3xl transition-all duration-200 group-hover:scale-110"
src={ member.ProfileOrAvatar() }
alt={ member.ID }
_={ `
on mouseover set @src to '`+member.SillyProfileOrAvatar()+`'
then on mouseout set @src to '`+member.ProfileOrAvatar() +`'` }
/>
</div>
<div>
<h3 class="v-h3 group-hover:text-v-lilac">{ member.Name }</h3>
<div class="flex items-center gap-x-4">
<span class="group-hover:text-v-lilac">{ member.Position }</span>
</div>
</div>
</div>
</a>
</div>
}