Skip to content

Commit

Permalink
new dowlond component with more comprehensive installation page (#157)
Browse files Browse the repository at this point in the history 
Co-authored-by: Joe Kendall <[email protected]>
  • Loading branch information
@1800joe @software-person
1800joe and software-person authored May 7, 2024
1 parent e2f5181 commit fd4c00c
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 111 deletions.
Binary file added public/assets/docs/workshop-main-screen.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
156 changes: 69 additions & 87 deletions src/components/Download.astro
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,15 @@





<div class="flex flex-col">
<div class="flex items-center justify-center">
<div class="inline-flex rounded-md shadow-sm">

<a href="https://github.com/noop-inc/desktop/releases/latest" class="relative inline-flex items-center rounded-l-md bg-noop text-white px-3 py-2 text-sm font-bold focus:z-10 no-underline" id="default-button">Download Noop</a>
<div class="flex items-center mb-8">
<div id="detected-options" class="inline-flex rounded-md shadow-sm">


<a href="https://github.com/noop-inc/desktop/releases/latest" class="relative inline-flex items-center rounded-md bg-noop text-white px-3 py-2 text-sm font-bold focus:z-10 no-underline mr-4" id="default-button">Download Noop</a>

<div class="relative -ml-px block">

<button type="button" class="relative inline-flex items-center rounded-r-md bg-noop px-2 py-2 text-white border-l border-black focus:z-10 h-[100%]" id="option-menu-button" aria-expanded="true" aria-haspopup="true">

<span class="sr-only">Open options</span>
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</button>

<div class="hidden absolute right-1 z-10 -mr-1 mt-2 w-56 origin-top-right rounded-md bg-gray-700 text-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="option-menu-button" tabindex="-1" id="option-menu">
<div class="py-1" role="none" id="menu-items"></div>
</div>
</div>
</div>
<div class="ml-4">
<a href="https://github.com/noop-inc/desktop/releases" class="text-gray-200 underline">Releases</a>
</div>
</div>



<div class="mt-8 border-t border-white/10 pt-4 sm:mt-10 lg:mt-12 lg:items-center lg:justify-between hidden" id="release-notify">
<div class="border-t border-white/10 pt-4 lg:items-center lg:justify-between hidden" id="release-notify">
<div class="mr-8 text-left">
<h3 class="text-sm font-semibold leading-6 text-white">Be the first to know!</h3>
<p class="mt-2 text-sm leading-6 text-gray-300" id="notify-headline">The requested platform isn't available today, but we are working on it.</p>
Expand All @@ -55,14 +32,18 @@
</form>
</div>

<div>
<h4>Not your OS? Download an alternative:</h4>
<div id="alt-container">

</div>
<a href="https://github.com/noop-inc/desktop/releases" class="text-gray-200 underline">See all releases</a>
</div>
</div>







<script>

const ph = window.posthog || {capture: ()=>{}}
Expand All @@ -71,7 +52,6 @@

const dlButtonHandler = (rel, selected) => {
return e => {

e.preventDefault();
e.stopImmediatePropagation();

Expand All @@ -90,7 +70,6 @@
// `The requested platform `
releaseNotify.classList.toggle('hidden')
releaseNotify.classList.add('lg:flex')
optionMenu.classList.toggle('hidden')

platformTag.setAttribute('value', tags[selected.name])
}
Expand All @@ -105,9 +84,8 @@

icons.macIntel = icons.mac;

const menuToggle = document.getElementById('option-menu-button');
const optionMenu = document.getElementById('option-menu');
const menuItems = document.getElementById('menu-items');

const detectedOptions = document.getElementById('detected-options')
const defaultButton = document.getElementById('default-button');
const releaseNotify = document.getElementById('release-notify')
const notifyHeadline = document.getElementById('notify-headline')
Expand All @@ -122,11 +100,6 @@
}


menuToggle.addEventListener('click', () => {
optionMenu.classList.toggle('block');
optionMenu.classList.toggle('hidden');
})

const os = (() => {
let os = 'none'

Expand All @@ -136,11 +109,10 @@
return os
})()


const getRelease = async () => {
const release = await fetch('https://api.github.com/repos/noop-inc/desktop/releases/latest',
{
headers: {
{
headers: {
Accept: 'application/vnd.github+json',
'X-GitHub-Api-Version': '2022-11-28'
}
Expand Down Expand Up @@ -178,58 +150,62 @@
}

const run = async () => {
const alts = [{name: 'mac', label: 'macOS (Apple Silicon)'},
{name: 'macIntel', label: 'macOS (Intel)'},
{name: 'win', label: 'Windows'},
{name: 'linux', label: 'Linux'}
]
const detectables = {
mac: {
label: 'Mac',
supported: true,
releases: [
{label: 'macOS (Apple Silicon)'},
{label: 'macOS (Intel)'}
]
},
win: {
label: 'Windows',
supported: false,
releases: [
{label: 'Windows'}
]},
linux: {
label: 'Linux',
supported: false,
releases: [
{label: 'Linux'}
]
}
}

const rel = await getRelease()

const {name, assets } = rel

alts.map(alt => Object.assign(alt, {asset: findAsset(alt.name, name, assets)}))

const selected = alts.find(alt => alt.name === os)

if (selected.asset) {
const label = document.createElement('span')
label.textContent = `Download Noop ${selected.label}`

const icon = document.createElement('span')
icon.innerHTML = icons[selected.name]
icon.setAttribute('class', 'mr-2')


defaultButton.textContent = ''
defaultButton.appendChild(icon)
defaultButton.appendChild(label)
defaultButton.setAttribute('href', selected.asset.browser_download_url)
Object.keys(detectables).forEach(k => detectables[k].releases.forEach(rel => Object.assign(rel, {asset: findAsset(k, name, assets), name: k})))

const selected = detectables[os]

defaultButton.addEventListener('click', dlButtonHandler(rel, selected))
} else {

defaultButton.classList.remove('bg-noop')
defaultButton.classList.add('bg-gray-600')
defaultButton.classList.add('cursor-not-allowed')
if (!selected) {
} else if (selected.supported) {
detectedOptions.innerHTML = ''
selected.releases.forEach(rel => {
const relBtn = defaultButton.cloneNode()

const icon = document.createElement('span')
icon.innerHTML = icons[selected.name]
icon.setAttribute('class', 'mr-2')
const label = document.createElement('span')
label.textContent = `Download Noop ${rel.label}`

const icon = document.createElement('span')
icon.innerHTML = icons[rel.name]
icon.setAttribute('class', 'mr-2')

defaultButton.textContent = ''
const label = document.createElement('span')
label.textContent = `Download Noop ${selected.label}`

defaultButton.appendChild(icon)
defaultButton.appendChild(label)

defaultButton.addEventListener('click', e => {
e.preventDefault();
e.stopImmediatePropagation();
relBtn.textContent = ''
relBtn.appendChild(icon)
relBtn.appendChild(label)
relBtn.setAttribute('href', rel.asset.browser_download_url)
relBtn.addEventListener('click', dlButtonHandler(rel, selected))
detectedOptions.appendChild(relBtn)
})
} else {
detectedOptions.innerHTML = ''

notifyHeadline.textContent = `${selected.label} support isn't available today, but we are working on it.`
// `The requested platform `
Expand All @@ -239,10 +215,16 @@
releaseNotify.classList.toggle('hidden')
releaseNotify.classList.add('lg:flex')

platformTag.setAttribute('value', tags[selected.name])
platformTag.setAttribute('value', tags[os])
}


const altContainer = document.getElementById('alt-container')


const alts = Object.keys(detectables).filter(k => k !== os).flatMap(k => detectables[k].releases)


alts.forEach(alt => {
// <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="option-menu-item-0">Linux </a>
const menuItem = document.createElement('span');
Expand All @@ -257,12 +239,12 @@

menuItem.appendChild(icon)
menuItem.appendChild(label)
menuItem.setAttribute('class', 'text-white block px-4 py-2 text-sm flex items-center no-underline cursor-pointer')
menuItem.setAttribute('class', 'text-white block py-2 text-sm flex items-center no-underline cursor-pointer')
menuItem.setAttribute('role', 'menuitem')

menuItem.addEventListener('click', dlButtonHandler(rel, alt))

menuItems.appendChild(menuItem)
altContainer.appendChild(menuItem)
})
}

Expand Down
7 changes: 5 additions & 2 deletions src/content/docs/installation.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,12 @@ order: 3

import Download from '../../components/Download.astro'

## Download

Noop Desktop, which includes Workshop, can be downloaded here.
Choose the appropriate download for your platform. We are working hard to ship binaries for every platform, if we don't currently support your platform, give us your email and we'll let you know when it's available!

<Download />

<div class="lg:-mr-96 md:-mr-48 ">
![Screenshot of Noop Desktop showing Workshop dashboard](/public/assets/docs/workshop-main-screen.png)
</div>

68 changes: 46 additions & 22 deletions src/layouts/Doc.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,30 +5,54 @@ const { content = {}, headings } = Astro.props
---

<Layout data={content}>
<main class="lg:col-span-6 col-span-12 pb-36" data-pagefind-body>
<article>
<header>
<h3 class="text-xs font-mono uppercase text-fuchsia-500">
{content.section}
</h3>

<h1 class="text-5xl pb-8 font-bold">
{content.title}
</h1>
</header>

<p class="mt-2 pb-8">
{content.description}
</p>

<div class="prose prose-invert text-white">
<slot />
</div>
</article>
</main>
{ headings.length ?
<main class="lg:col-start-4 col-start-1 col-end-10 pb-36" data-pagefind-body>
<article>
<header>
<h3 class="text-xs font-mono uppercase text-fuchsia-500">
{content.section}
</h3>

<h1 class="text-5xl pb-8 font-bold">
{content.title}
</h1>
</header>

<p class="mt-2 pb-8">
{content.description}
</p>

<div class="prose prose-invert text-white">
<slot />
</div>
</article>
</main> :
<main class="lg:col-start-4 col-start-1 col-end-13 pb-36" data-pagefind-body>
<article>
<header>
<h3 class="text-xs font-mono uppercase text-fuchsia-500">
{content.section}
</h3>

<h1 class="text-5xl pb-8 font-bold">
{content.title}
</h1>
</header>

<p class="mt-2 pb-8">
{content.description}
</p>

<div class="prose prose-invert text-white">
<slot />
</div>
</article>
</main>
}


{ headings.length ?
<aside class="border-l border-gray-700 col-span-3 pl-4 hidden lg:block">
<aside class="border-l border-gray-700 col-start-10 col-end-13 pl-4 hidden lg:block">
<!-- Secondary column (hidden on smaller screens) -->
<div class="sticky top-8 text-base lg:text-sm">
<h4 class="font-bold text-base">On this page</h4>
Expand Down

0 comments on commit fd4c00c

Please sign in to comment.