aboutsummaryrefslogtreecommitdiff
blob: 41cdb8d5363ad2a44b7077de741fec68dce2cf0a (plain)
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
package layout

import "soko/pkg/config"

templ head(title string) {
	<head>
		<title>
			if title != "" {
				{ title } – Gentoo Packages
			} else {
				Gentoo Packages
			}
		</title>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<meta name="theme-color" content="#54487a"/>
		<meta name="description" content="Gentoo Packages Database"/>
		<script src="/assets/application.js"></script>
		<link rel="icon" href="https://packages.gentoo.org/favicon.ico" type="image/x-icon"/>
		<link rel="stylesheet" href="/assets/stylesheets.css"/>
	</head>
}

templ siteTitle() {
	<div class="site-title">
		<div class="container">
			<div class="row justify-content-between">
				<div class="logo">
					<a href="/" title="Back to the homepage" class="site-logo">
						<img src="https://assets.gentoo.org/tyrian/site-logo.png" alt="Gentoo" srcset="https://assets.gentoo.org/tyrian/site-logo.svg"/>
					</a>
					<span class="site-label">Packages</span>
				</div>
				<div class="site-title-buttons">
					<div class="btn-group btn-group-sm">
						<a href="https://get.gentoo.org/" role="button" class="btn get-gentoo"><span class="fa fa-fw fa-download"></span> <strong>Get Gentoo!</strong></a>
						<div class="btn-group btn-group-sm">
							<a class="btn gentoo-org-sites dropdown-toggle" data-toggle="dropdown" data-target="#" href="#">
								<span class="fa fa-fw fa-map-o"></span> <span class="d-none d-sm-inline">gentoo.org sites</span> <span class="caret"></span>
							</a>
							<div class="dropdown-menu dropdown-menu-right">
								<a class="dropdown-item" href="https://www.gentoo.org/" title="Main Gentoo website"><span class="fa fa-home fa-fw"></span> gentoo.org</a>
								<a class="dropdown-item" href="https://wiki.gentoo.org/" title="Find and contribute documentation"><span class="fa fa-file-text-o fa-fw"></span> Wiki</a>
								<a class="dropdown-item" href="https://bugs.gentoo.org/" title="Report issues and find common issues"><span class="fa fa-bug fa-fw"></span> Bugs</a>
								<a class="dropdown-item" href="https://forums.gentoo.org/" title="Discuss with the community"><span class="fa fa-comments-o fa-fw"></span> Forums</a>
								<a class="dropdown-item" href="https://packages.gentoo.org/" title="Find software for your Gentoo"><span class="fa fa-hdd-o fa-fw"></span> Packages</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="https://planet.gentoo.org/" title="Find out what's going on in the developer community"><span class="fa fa-rss fa-fw"></span> Planet</a>
								<a class="dropdown-item" href="https://archives.gentoo.org/" title="Read up on past discussions"><span class="fa fa-archive fa-fw"></span> Archives</a>
								<a class="dropdown-item" href="https://sources.gentoo.org/" title="Browse our source code"><span class="fa fa-code fa-fw"></span> Sources</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="https://infra-status.gentoo.org/" title="Get updates on the services provided by Gentoo"><span class="fa fa-server fa-fw"></span> Infra Status</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
}

templ navigationBar(tab string) {
	<nav class="tyrian-navbar navbar navbar-dark navbar-expand-lg bg-primary" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main-collapse" aria-controls="navbar-main-collapse" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse navbar-main-collapse" id="navbar-main-collapse">
				<ul class="navbar-nav mr-auto">
					<li class={ "nav-item", templ.KV("active", tab == "home") }><a class="nav-link" href="/">Home</a></li>
					<li class={ "nav-item", templ.KV("active", tab == "packages") }><a class="nav-link" href="/categories">Packages</a></li>
					<li class={ "nav-item", templ.KV("active", tab == "maintainers") }><a class="nav-link" href="/maintainers">Maintainers</a></li>
					<li class={ "nav-item", templ.KV("active", tab == "useflags") }><a class="nav-link" href="/useflags">USE flags</a></li>
					<li class={ "nav-item", templ.KV("active", tab == "arches") }><a class="nav-link" href="/arches">Architectures</a></li>
					<li class={ "nav-item", templ.KV("active", tab == "about") }><a class="nav-link" href="/about">About</a></li>
				</ul>
				if tab != "home" {
					<form class="form-inline inlinesearch" role="search" action="/packages/search" method="get">
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text" id="basic-addon1"><i class="fa fa-search" aria-hidden="true"></i></span>
							</div>
							<input class="form-control" name="q" type="text" placeholder="Find Packages" aria-label="Find Packages"/>
						</div>
					</form>
				}
			</div>
		</div>
	</nav>
}

templ footer() {
	<footer style="background-color: #fafafa; box-shadow:none!important;">
		<div class="container pt-4" style="border-top: 1px solid #dddddd;">
			<div class="row">
				<div class="col-2 col-sm-2 col-md-2">
					<ul class="footerlinks three-icons">
						<li><a href="https://twitter.com/gentoo" title="@Gentoo on Twitter"><span class="fa fa-twitter fa-fw"></span></a></li>
						<li><a href="https://www.facebook.com/gentoo.org" title="Gentoo on Facebook"><span class="fa fa-facebook fa-fw"></span></a></li>
						<li><a href="https://www.reddit.com/r/Gentoo/" title="Gentoo on Reddit"><span class="fa fa-reddit-alien fa-fw"></span></a></li>
					</ul>
				</div>
				<div class="col-8 col-sm-8 col-md-8">
					<strong>&copy; 2001&ndash;2024 Gentoo Authors</strong>
					<br/>
					<small>
						Gentoo is a trademark of the Gentoo Foundation, Inc. and of Förderverein Gentoo e.V.
						The contents of this document, unless otherwise expressly stated, are licensed under the
						<a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="license">CC-BY-SA-4.0</a> license.
						The <a href="https://www.gentoo.org/inside-gentoo/foundation/name-logo-guidelines.html">Gentoo Name and Logo Usage Guidelines</a> apply.
					</small>
				</div>
				<div class="col-2 col-sm-2 col-md-2 text-right">
					<strong><a class="text-dark" href="https://www.gentoo.org/inside-gentoo/contact/">Contact</a></strong>
					<br/>
					<small>{ config.Version() }</small>
				</div>
			</div>
		</div>
	</footer>
}

templ Layout(title string, tab string, contents templ.Component) {
	<!DOCTYPE html>
	<html lang="en">
		@head(title)
		<body>
			<header>
				@siteTitle()
				@navigationBar(tab)
			</header>
			@contents
			@footer()
		</body>
	</html>
}

type SubTab struct {
	Name       string
	Link       templ.SafeURL
	Icon       string
	BadgeValue string
}

templ tabbedHeader(subTitle string, icon string, description string, tabs []SubTab, currentSubTab string, contents templ.Component) {
	<div class="kk-header-container">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="row mt-3  pt-2">
						<div class="col-md-5">
							<h1 class="stick-top kk-package-title" id="package-title">
								<div>
									<div class="kk-package-name" style="margin-left: 0px!important;"><span class={ icon }></span><span class="ml-2">{ subTitle }</span></div>
								</div>
							</h1>
						</div>
						<div class="col-md-7">{ description }</div>
						<div class="col-md-12 pt-4 mt-1">
							<nav class="nav kk-package-nav">
								for _, tab := range tabs {
									<a class={ "nav-link", templ.KV("active", tab.Name == currentSubTab) } href={ tab.Link }>
										<i class={ tab.Icon } aria-hidden="true"></i> { tab.Name }
										if tab.BadgeValue != "" {
											<span class="ml-1 badge badge-pill kk-misc-badge">{ tab.BadgeValue }</span>
										}
									</a>
								}
							</nav>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tab-content" id="myTabContent">
		@contents
	</div>
}

templ TabbedLayout(title string, tab string, subTitle string, icon string, description string, tabs []SubTab, currentSubTab string, contents templ.Component) {
	@Layout(title, tab, tabbedHeader(subTitle, icon, description, tabs, currentSubTab, contents))
}