feat: implement download page

Magickbase · Aug 16, 2023 · 81bd2fa · 81bd2fa
1 parent e7253f1
commit 81bd2fa
Show file tree

Hide file tree

Showing 18 changed files with 560 additions and 3 deletions.
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -16,6 +16,7 @@
     "@octokit/plugin-paginate-rest": "^6.1.2",
     "@octokit/rest": "^19.0.11",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.0.6",
     "@tanstack/react-query": "^4.29.12",
     "@trpc/client": "^10.28.2",
     "@trpc/next": "^10.28.2",

diff --git a/packages/app/public/locales/en/download.json b/packages/app/public/locales/en/download.json
@@ -0,0 +1,3 @@
+{
+  "download_neuron": "Download Neuron"
+}
diff --git a/packages/app/public/locales/zh/download.json b/packages/app/public/locales/zh/download.json
@@ -0,0 +1,3 @@
+{
+  "download_neuron": "下载 Neuron"
+}
diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx
@@ -19,7 +19,7 @@ export const Header: FC<HeaderProps> = props => {
           {/* TODO: need real links */}
           <Link href="/">Changelog</Link>
           <Link href="/">Help Center</Link>
-          <Link href="/">Download Neuron</Link>
+          <Link href="/download">Download Neuron</Link>
         </div>
 
         <div className={styles.right}>

diff --git a/packages/app/src/components/Tooltip/index.module.scss b/packages/app/src/components/Tooltip/index.module.scss
@@ -0,0 +1,24 @@
+.trigger {
+  all: unset;
+  display: flex;
+}
+
+.content {
+  // TODO: Some styles are written for the checksum tooltip in the download page, and will be extracted later.
+  max-width: 596px;
+  margin-bottom: 7px;
+  padding: 12px 16px;
+  color: #f5f5f5;
+  font-size: 16px;
+  line-height: 200%;
+  background: #111;
+  border: 1px solid #414141;
+  border-radius: 8px;
+  backdrop-filter: blur(38px);
+}
+
+.arrow {
+  fill: #111;
+  stroke: #414141;
+  stroke-width: 0.4px;
+}
diff --git a/packages/app/src/components/Tooltip/index.tsx b/packages/app/src/components/Tooltip/index.tsx
@@ -0,0 +1,22 @@
+import { FC, PropsWithChildren, ReactNode } from 'react'
+import { Root, Trigger, Content, Provider, Portal, Arrow } from '@radix-ui/react-tooltip'
+import styles from './index.module.scss'
+
+export const Tooltip: FC<PropsWithChildren<{ content?: ReactNode }>> = props => {
+  return (
+    <Root>
+      <Trigger className={styles.trigger}>{props.children}</Trigger>
+      <Portal>
+        <Content className={styles.content}>
+          {props.content}
+          {/* TODO: The inside border line needs to be hidden */}
+          <Arrow className={styles.arrow} width={32} height={16} />
+        </Content>
+      </Portal>
+    </Root>
+  )
+}
+
+export const TooltipProvider: FC<PropsWithChildren> = props => {
+  return <Provider delayDuration={0}>{props.children}</Provider>
+}
diff --git a/packages/app/src/pages/_app.page.tsx b/packages/app/src/pages/_app.page.tsx
@@ -5,6 +5,7 @@ import { appWithTranslation } from 'next-i18next'
 import localFont from 'next/font/local'
 import { api } from '../utils/api'
 import '../styles/globals.scss'
+import { TooltipProvider } from '../components/Tooltip'
 
 const fontProximaNova = localFont({
   src: [
@@ -22,7 +23,7 @@ const App: AppType = ({ Component, pageProps }) => {
   }, [])
 
   return (
-    <>
+    <TooltipProvider>
       <Head>
         <title>Neuron Troubleshooting</title>
         <link rel="icon" type="image/svg" href="/favicon.svg" />
@@ -34,7 +35,7 @@ const App: AppType = ({ Component, pageProps }) => {
       >
         <Component {...pageProps} />
       </main>
-    </>
+    </TooltipProvider>
   )
 }
 

diff --git a/packages/app/src/pages/download/download-wallet.png b/packages/app/src/pages/download/download-wallet.png
diff --git a/packages/app/src/pages/download/index.module.scss b/packages/app/src/pages/download/index.module.scss
@@ -0,0 +1,96 @@
+.page {
+  .top {
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+
+    .right {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+    }
+  }
+}
+
+.neuron {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  font-weight: 600;
+  font-size: 26px;
+
+  .name {
+    margin-top: 6px;
+  }
+}
+
+.text1 {
+  font-weight: 700;
+  font-size: 40px;
+}
+
+.version {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  height: 40px;
+  padding: 0 16px;
+  border: 1px solid #f5f5f5;
+  border-radius: 40px;
+}
+
+.assets {
+  width: 100%;
+  margin-top: 32px;
+  margin-bottom: 158px;
+  overflow: hidden;
+  background: linear-gradient(180deg, rgb(54 54 54 / 40%) 0%, rgb(29 29 29 / 20%) 100%);
+  border: 1px solid rgb(255 255 255 / 20%);
+  border-radius: 24px;
+  border-spacing: 0;
+  backdrop-filter: blur(40px);
+
+  .row {
+    height: 64px;
+    font-size: 16px;
+
+    & > td {
+      padding: 0 40px;
+      border-top: 1px solid #333;
+    }
+
+    &.head {
+      font-size: 20px;
+
+      & > th {
+        font-weight: 400;
+      }
+    }
+  }
+
+  .os {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .checksum {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .operation {
+    & > a {
+      color: #00c891;
+      font-weight: 600;
+      font-size: 16px;
+    }
+  }
+}
diff --git a/packages/app/src/pages/download/index.page.tsx b/packages/app/src/pages/download/index.page.tsx
@@ -0,0 +1,127 @@
+import { GetStaticProps, type NextPage } from 'next'
+import { useTranslation } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import Link from 'next/link'
+import Image from 'next/image'
+import { useMemo } from 'react'
+import clsx from 'clsx'
+import { BooleanT, Release, getLatestRelease } from '../../utils'
+import { Page } from '../../components/Page'
+import styles from './index.module.scss'
+import ImgNeuronLogo from './neuron-logo.png'
+import ImgDownloadWallet from './download-wallet.png'
+import IconWindows from './windows.svg'
+import IconMacOS from './macos.svg'
+import IconLinux from './linux.svg'
+import IconTips from './tips.svg'
+import { Tooltip } from '../../components/Tooltip'
+
+interface PageProps {
+  release: Release
+}
+
+const HelpCenter: NextPage<PageProps> = ({ release }) => {
+  const { t } = useTranslation('download')
+
+  const assets = useMemo(() => {
+    const tableLines = release.body?.match(/^(.*?\|)+.*?$/gm)
+    if (!tableLines) return []
+
+    return tableLines
+      .map(line => {
+        const [os, arch, packageInfo, checksum] = line.split('|')
+        if (!os || !arch || !packageInfo || !checksum) return null
+
+        const packageItems = packageInfo.match(/\[(.*?)\]\((.*?)\)/)
+        if (!packageItems) return null
+        const [, packageType, packageLink] = packageItems
+        if (!packageType || !packageLink) return null
+
+        return {
+          os: os?.trim(),
+          arch: arch?.trim(),
+          packageType,
+          checksum: checksum?.replace(/<.*?>(.*?)<\/.*?>/, '$1').trim(),
+          packageLink,
+        }
+      })
+      .filter(BooleanT())
+  }, [release])
+
+  return (
+    <Page className={styles.page}>
+      <div className={styles.top}>
+        <div className={styles.left}>
+          <div className={styles.neuron}>
+            <Image src={ImgNeuronLogo} alt="Neuron Logo" width={44} height={44} />
+            <span className={styles.name}>Neuron</span>
+          </div>
+
+          <div className={styles.text1}>{t('download_neuron')}</div>
+
+          <div className={styles.version}>Current Version {release.tag_name}</div>
+        </div>
+
+        <div className={styles.right}>
+          <Image src={ImgDownloadWallet} alt="Help" width={200} height={168} />
+        </div>
+      </div>
+
+      <table className={styles.assets}>
+        <thead>
+          <tr className={clsx(styles.row, styles.head)}>
+            <th>System</th>
+            <th>Architecture</th>
+            <th>Package Type</th>
+            <th>
+              <div className={styles.checksum}>
+                Checksum
+                <Tooltip content="After the download is complete, you can check the Checksum to ensure that the installation package has not been tampered with during the download process.">
+                  <IconTips />
+                </Tooltip>
+              </div>
+            </th>
+            <th>Operation</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          {assets.map(asset => (
+            <tr key={asset.os + asset.arch + asset.packageType} className={styles.row}>
+              <td>
+                <div className={styles.os}>
+                  {asset.os.toLowerCase() === 'windows' && <IconWindows />}
+                  {asset.os.toLowerCase() === 'macos' && <IconMacOS />}
+                  {asset.os.toLowerCase() === 'linux' && <IconLinux />}
+                  {asset.os}
+                </div>
+              </td>
+              <td>{asset.arch}</td>
+              <td>{asset.packageType}</td>
+              <td>{asset.checksum}</td>
+              <td className={styles.operation}>
+                <Link href={asset.packageLink} target="_blank" rel="noopener noreferrer">
+                  Download
+                </Link>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Page>
+  )
+}
+
+export const getStaticProps: GetStaticProps = async ({ locale = 'en' }) => {
+  const release = await getLatestRelease()
+  const lng = await serverSideTranslations(locale, ['common', 'download'])
+
+  const props: PageProps = {
+    release,
+    ...lng,
+  }
+
+  return { props }
+}
+
+export default HelpCenter
diff --git a/packages/app/src/pages/download/linux.svg b/packages/app/src/pages/download/linux.svg
diff --git a/packages/app/src/pages/download/macos.svg b/packages/app/src/pages/download/macos.svg
diff --git a/packages/app/src/pages/download/neuron-logo.png b/packages/app/src/pages/download/neuron-logo.png
diff --git a/packages/app/src/pages/download/tips.svg b/packages/app/src/pages/download/tips.svg
diff --git a/packages/app/src/pages/download/windows.svg b/packages/app/src/pages/download/windows.svg
diff --git a/packages/app/src/utils/github.ts b/packages/app/src/utils/github.ts
@@ -25,6 +25,7 @@ export type Discussion = Pick<GQLDiscussion, 'id' | 'number' | 'title' | 'body'
   category: DiscussionCategory
   labels: Pick<GQLLabel, 'id' | 'name' | 'description'>[]
 }
+export type Release = components['schemas']['release']
 
 const GQL_CATEGORY_FIELDS = () => `
   createdAt
@@ -192,3 +193,29 @@ export async function getDiscussionsByLabel(label?: string): Promise<Discussion[
     labels: (discussion.labels?.nodes ?? []).filter(BooleanT()),
   }))
 }
+
+export async function getReleases(limit = Infinity): Promise<Release[]> {
+  let sum = 0
+  const releases = await octokit.paginate(
+    octokit.rest.repos.listReleases,
+    {
+      owner: repoOwner,
+      repo: repoName,
+      per_page: Math.min(limit, 100),
+    },
+    (response, done) => {
+      sum += response.data.length
+      if (sum >= limit) done()
+      return response.data
+    },
+  )
+  return releases.slice(0, limit)
+}
+
+export async function getLatestRelease(): Promise<Release> {
+  const res = await octokit.rest.repos.getLatestRelease({
+    owner: repoOwner,
+    repo: repoName,
+  })
+  return res.data
+}
diff --git a/packages/app/src/utils/index.ts b/packages/app/src/utils/index.ts
@@ -28,3 +28,4 @@ export * from './github'
 export * from './posts'
 export * from './algolia'
 export * from './route'
+export * from './array'