site: os detection for download links, style tweaks
This commit is contained in:
parent
41a311a627
commit
54277db52c
GPG Key ID:
606EEEF3C479A91F
|
|
@ -7,14 +7,23 @@
|
|||
|
||||
<link rel="stylesheet" href="https://use.typekit.net/meh5rjc.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
|
||||
<meta property="og:title" content="Blowfish" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Desktop app to retrieve and display your total Ocean Token balances."
|
||||
/>
|
||||
<meta property="og:image" content="https://getblow.fish/screens.png" />
|
||||
<meta property="og:url" content="https://getblow.fish" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="layout">
|
||||
<header class="header">
|
||||
<h1>Blowfish</h1>
|
||||
<h2>
|
||||
<strong>
|
||||
Desktop app to retrieve and display your total Ocean Token balances.
|
||||
</h2>
|
||||
</strong>
|
||||
</header>
|
||||
|
||||
<figure class="screen">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
async function init() {
|
||||
const release = await getLatestRelease()
|
||||
replaceDom(release)
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => init())
|
||||
|
||||
async function getLatestRelease() {
|
||||
const response = await fetch(
|
||||
'https://api.github.com/repos/kremalicious/blowfish/releases/latest'
|
||||
|
|
@ -25,7 +32,7 @@ function getDownloads(release) {
|
|||
const isWin = asset.name.includes('.exe')
|
||||
|
||||
return {
|
||||
name: `Download (${isMac ? 'macOS' : isWin ? 'Windows' : 'Linux'})`,
|
||||
name: isMac ? 'macOS' : isWin ? 'Windows' : 'Linux, deb',
|
||||
url: asset.browser_download_url
|
||||
}
|
||||
})
|
||||
|
|
@ -42,24 +49,44 @@ function replaceDom(release) {
|
|||
const dateFormatted = new Date(release.published_at).toLocaleDateString()
|
||||
|
||||
releaseTagElement.innerHTML = release.tag_name
|
||||
releaseDateElement.innerHTML = dateFormatted
|
||||
releaseDateElement.innerHTML = `on ${dateFormatted}`
|
||||
|
||||
const downloads = getDownloads(release)
|
||||
downloadsElement.innerHTML = ''
|
||||
|
||||
downloads.map(download => {
|
||||
const isMac = navigator.userAgent.includes('Mac OS')
|
||||
const isWin = navigator.userAgent.includes('Windows')
|
||||
const isLinux = navigator.userAgent.includes('Linux')
|
||||
|
||||
const downloadAll = downloads.map(download => {
|
||||
const isTargetOs =
|
||||
isMac & download.name.includes('mac') ||
|
||||
isWin & download.name.includes('Windows') ||
|
||||
isLinux & download.name.includes('Linux')
|
||||
|
||||
const li = document.createElement('li')
|
||||
const a = document.createElement('a')
|
||||
a.href = download.url
|
||||
a.className = 'button'
|
||||
a.appendChild(document.createTextNode(download.name))
|
||||
downloadsElement.appendChild(li).appendChild(a)
|
||||
|
||||
if (isTargetOs) {
|
||||
a.className = 'button'
|
||||
a.innerHTML = `Download <span>${download.name}</span>`
|
||||
} else {
|
||||
a.appendChild(document.createTextNode(download.name))
|
||||
}
|
||||
|
||||
li.appendChild(a)
|
||||
|
||||
return li
|
||||
})
|
||||
}
|
||||
|
||||
async function init() {
|
||||
const release = await getLatestRelease()
|
||||
replaceDom(release)
|
||||
}
|
||||
const downloadMain = downloadAll.filter(
|
||||
link => link.querySelector('a').className === 'button'
|
||||
)
|
||||
const downloadSecondary = downloadAll.filter(
|
||||
link => link.querySelector('a').className !== 'button'
|
||||
)
|
||||
|
||||
init()
|
||||
downloadsElement.append(downloadMain[0])
|
||||
downloadSecondary.forEach(download => downloadsElement.append(download))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
--color-secondary: #725418;
|
||||
--color-signal: #049985;
|
||||
--border-radius: 0.2rem;
|
||||
--font-family-base: -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
|
||||
oxygen-sans, ubuntu, cantarell, 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
*,
|
||||
|
|
@ -25,12 +27,11 @@ body {
|
|||
min-height: 100vh;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-secondary);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
||||
font-family: var(--font-family-base);
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
line-height: 1.5;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -50,6 +51,13 @@ svg {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: var(--border-radius);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-signal);
|
||||
text-decoration: none;
|
||||
|
|
@ -65,17 +73,38 @@ a {
|
|||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-signal);
|
||||
}
|
||||
|
||||
.header strong {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.screen {
|
||||
margin-left: calc(50% - 50vw);
|
||||
margin-right: calc(50% - 50vw);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.screen img {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@media (min-width: 60rem) {
|
||||
.screen img {
|
||||
max-width: 60rem;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 1.2rem;
|
||||
display: inline-block;
|
||||
background: var(--color-signal);
|
||||
color: var(--color-primary);
|
||||
padding: 0.5rem 1rem;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
transition: 0.2s ease-out;
|
||||
|
|
@ -86,13 +115,29 @@ a {
|
|||
background: var(--color-secondary);
|
||||
}
|
||||
|
||||
.button span {
|
||||
font-size: 1rem;
|
||||
margin-left: 0.25rem;
|
||||
font-family: var(--font-family-base);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.downloads {
|
||||
margin-top: 2rem;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.downloads a:not(.button) {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.downloads li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.downloads li:first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -106,13 +151,6 @@ a {
|
|||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
code {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
padding: 0.1rem 0.3rem;
|
||||
border-radius: var(--border-radius);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.credit {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue