Skip to content

Commit

Permalink
feat(redesign): synchronize new download page to upstream
Browse files Browse the repository at this point in the history
  • Loading branch information
@darkweak
darkweak committed Dec 17, 2023
1 parent 839ec63 commit bd4ddf8
Show file tree
Hide file tree
Showing 4 changed files with 623 additions and 48 deletions.
119 changes: 71 additions & 48 deletions src/download.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,32 +2,33 @@
<html>
<head>
<title>Download Caddy</title>
{{import "/old/includes/head.html"}}
{{template "head"}}
<link rel="stylesheet" href="/old/resources/css/download.css{{template "cacheBust"}}">
<script src="/old/resources/js/jquery-3.4.1.min.js"></script>
<script src="/old/resources/js/sweetalert.min.js"></script>
<script src="/old/resources/js/download.js{{template "cacheBust"}}"></script>
{{import "/includes/head.html"}}
{{template "head" .}}
<link rel="stylesheet" href="/resources/css/marketing.css{{template "cacheBust"}}">
<link rel="stylesheet" href="/resources/css/features.css{{template "cacheBust"}}">
<link rel="stylesheet" href="/resources/css/download.css{{template "cacheBust"}}">
</head>
<body>
<div class="wrapper">
<header>
<div id="logo-container">
<a href="/"><img src="/old/resources/images/caddy-logo.svg" id="logo" alt="Caddy"></a>
<div id="zerossl-project">a <a href="https://zerossl.com"><img src="/old/resources/images/zerossl-logo.svg" id="zerossl-logo"></a> project</div>
<div class="hero">
{{include "/includes/header.html" "dark-header"}}

<div class="wrapper">
<div class="hero-content">
<h1>
Download
<div class="subheading">
Build your own caddy binary with modules.
</div>
</h1>
</div>
{{include "/old/includes/header-nav.html"}}
</header>

<div class="notice">
⚠️ <b>Due to <a href="https://github.com/golang/go/issues/56494">multiple</a> outstanding <a href="https://github.com/golang/go/issues/53905">bugs</a> in the <code>go</code> command, we are aware that some downloads may hang or fail.</b> In the meantime, you can download Caddy from <b><a href="https://github.com/caddyserver/caddy/releases">the latest release on GitHub</a></b>, or use <b><a href="https://github.com/caddyserver/xcaddy">xcaddy</a></b> for custom builds. (Remember, this download page comes with no guarantees or SLAs.) Sorry for the inconvenience.
</div>

<div class="download-bar">
<div>
<div>
<b>Platform:</b>
<select size="1" id="platform" selected="linux-amd64">
</div>
<main>
<div id="download" class="wrapper">
<div class="shadow-lg">
<div id="downloader">
<span>Download the caddy binary <span id="modules-count"></span> for</span>
<select size="1" selected="linux-amd64" id="platform" class="shadow">
<option value="dragonfly-amd64">Dragonfly amd64</option>
<option value="freebsd-amd64">FreeBSD amd64</option>
<option value="freebsd-arm-6">FreeBSD arm 6</option>
Expand Down Expand Up @@ -56,39 +57,61 @@
<option value="windows-arm-7">Windows arm 7</option>
<option value="windows-arm64">Windows arm64</option>
</select>
<a id="download-link" href="/api/download">
<button class="primary">
Download
</button>
</a>
</div>
</div>
<div>
<div>
<b>Standard features:</b> <span title="All official Caddy builds come with standard plugins">&#9745;&#65039;</span>

<div id="command" onclick="copyCommand()">
<pre>
<span id="command-builder">xcaddy build</span>
</pre>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"></path>
<path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
</svg>
</div>
</div>
<div>
<div>
<b>Extra features:</b> <span id="package-count">0</span>
</div>
</div>
<div>
<a href="/api/download" class="blue button" id="download">Download</a>
</div>
</div>

<input type="search" id="filter" placeholder="Filter packages and modules...">

<div class="text-center">
<span class="warning">⚠️ Only choose plugins you need and trust</span>

<div class="wrapper filters">
<input id="search-package" placeholder="Search package: e.g. cloudflare" class="shadow" />
<select id="sort-package" class="shadow">
<option value="download">Sort by most popular</option>
<option value="alphabetically">Sort alphabetically</option>
<option value="type">Group by module namespace</option>
</select>
</div>
<div class="text-center" id="darwin-warning">
<span class="warning">⚠️ Run the following against the downloaded binary:
<code>xattr -d com.apple.quarantine </code>
</span>

<div class="wrapper list">
<div id="side-panel-packages">
</div>
<div id="packages">
</div>
</div>
</main>

<div id="optional-packages">
<!-- Populated by JavaScript -->
</div>
</div>
{{include "/includes/footer.html"}}

{{include "/old/includes/footer.html"}}
<script type="text/javascript">
let groupBy = 'download';
const getCardTemplate = item => `{{ include "/includes/card.html" }}`;
const modulesCount = document.getElementById('modules-count');

document.getElementById('search-package').addEventListener('input', ({ target: { value } }) => {
packageManager.setFilterValue(value.toLowerCase());
renderList(packageManager.group(groupBy))
})
document.getElementById('sort-package').addEventListener('change', ({ target: { value } }) => {
groupBy = value;
renderList(packageManager.group(value))
})
</script>
<script src="/resources/js/download.js"></script>
</body>
</html>
48 changes: 48 additions & 0 deletions src/includes/card.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<div class="card shadow">
<div class="card-header flex">
<div class="card-title-name">
<h3>
${item.name}
</h3>
<a href="${item.repo}" target="_blank" rel="noopener noreferer">
${item.path}
</a>
</div>
<div class="card-title-info">
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-download" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
<path d="M7 11l5 5l5 -5"></path>
<path d="M12 4l0 12"></path>
</svg>
${item.downloads}
</span>
<span>
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-git-commit" width="24"
height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
<path d="M12 3l0 6"></path>
<path d="M12 15l0 6"></path>
</svg>
<input class="package-version" placeholder="latest"
value="${item.state && item.state !== 'latest' ? item.state : ''}"
oninput="updateVersion(event, '${item.path}')" />
</span>
</div>
</div>
<div class="card-description">
<p>
${item.description}
</p>
<div class="card-actions">
<button type="button" class="button card-button" data-module="${item.path}" onclick="togglePackage(event)">
${item.state ? 'Remove' : 'Add'} this module
</button>
</div>
</div>
</div>
Loading

0 comments on commit bd4ddf8

Please sign in to comment.