Skip to content

Commit 3435db0

Browse files
MakinoharaShokoMakinoharaShoko
committed
feat: enhance download page
1 parent 10b6857 commit 3435db0

File tree

3 files changed

+98
-66
lines changed

3 files changed

+98
-66
lines changed

‎app/[locale]/download/Download.module.css

+43-24
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,73 @@
11
.card {
2-
@apply flex flex-col gap-2 p-4;
3-
position: relative;
2+
@apply flex flex-col gap-2 p-4;
3+
position: relative;
4+
5+
.p {
6+
padding: 3px 10px;
7+
font-size: larger;
8+
}
49
}
510

611
.corner {
7-
@apply max-w-screen-xl;
8-
height: 200px;
9-
width: 200px;
10-
position: absolute;
11-
right: 1rem;
12-
overflow: hidden;
13-
transform: translate(0, -8px)
12+
@apply max-w-screen-xl;
13+
height: 200px;
14+
width: 200px;
15+
position: absolute;
16+
right: 1rem;
17+
overflow: hidden;
18+
transform: translate(0, -8px)
1419
}
1520

1621
.corner-text {
17-
@apply w-40 p-2 text-white text-center;
18-
transform: rotate(45deg) translate(70px, -46px);
22+
@apply w-40 p-2 text-white text-center;
23+
transform: rotate(45deg) translate(70px, -46px);
1924
}
2025

2126
.card-title {
22-
@apply text-2xl font-medium border-b-2;
27+
@apply text-2xl font-medium border-b-2;
2328
}
2429

2530
.card-info {
26-
@apply text-gray-700 font-normal leading-relaxed space-y-1;
31+
@apply text-gray-700 font-normal leading-relaxed space-y-1;
2732
}
2833

2934
.card-button-gourp {
30-
@apply flex flex-row flex-wrap gap-2;
35+
@apply flex flex-row flex-wrap gap-2;
36+
padding: 10px 0 0 0
3137
}
3238

3339
.card ul {
34-
@apply list-disc list-inside pl-4;
40+
@apply list-disc list-inside pl-4;
3541
}
3642

3743
.card ol {
38-
@apply list-decimal list-inside pl-4;
44+
@apply list-decimal list-inside pl-4;
3945
}
4046

4147
.cndownload {
42-
border-radius: 4px;
43-
background: rgba(0, 92, 175, 0.1);
44-
padding: 16px;
45-
margin-top: 8px;
48+
border-radius: 4px;
49+
background: rgba(0, 92, 175, 0.1);
50+
padding: 16px;
51+
margin-top: 8px;
4652
}
4753

4854
.release-note {
49-
@apply px-4 py-2 font-light;
55+
@apply px-4 py-2 font-light;
56+
}
57+
58+
.release-note > h4 {
59+
@apply font-medium;
5060
}
5161

52-
.release-note>h4 {
53-
@apply font-medium;
54-
}
62+
.hlrf {
63+
font-size: x-large;
64+
padding: 15px 10px;
65+
border-radius: 4px;
66+
background: rgba(181, 73, 91, 0.05);
67+
color: #B5495B;
68+
}
69+
70+
.link {
71+
font-weight: bold;
72+
padding: 0 4px;
73+
}

‎app/[locale]/download/components/DownloadWebgalTerre.tsx

+39-36
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@
33
import Button from '@/components/Button/Button'
44
import useWebgalTerreAssets from '@/hooks/useWebgalTerreAssets'
55
import Link from 'next/link'
6-
import { RiGithubFill, RiMicrosoftFill, RiAppleFill, RiUbuntuFill } from 'react-icons/ri'
6+
import {RiGithubFill, RiMicrosoftFill, RiAppleFill, RiUbuntuFill} from 'react-icons/ri'
77
import styles from '../Download.module.css'
8-
import { useLocale, useTranslations } from 'next-intl'
9-
import { i18n } from '@/i18n'
8+
import {useLocale, useTranslations} from 'next-intl'
9+
import {i18n} from '@/i18n'
1010

1111
const DownloadWebgalTerre = () => {
1212

@@ -28,20 +28,20 @@ const DownloadWebgalTerre = () => {
2828
: null
2929

3030
const platformMap = [
31-
{ platform: 'windows', icon: <RiMicrosoftFill />, label: t('downloadWindows') },
32-
{ platform: 'windowsSetup', icon: <RiMicrosoftFill />, label: t('downloadWindowsSetup') },
33-
{ platform: 'windowsArm64', icon: <RiMicrosoftFill />, label: t('downloadWindowsArm64') },
34-
{ platform: 'windowsArm64Setup', icon: <RiMicrosoftFill />, label: t('downloadWindowsArm64Setup') },
35-
{ platform: 'macos', icon: <RiAppleFill />, label: t('downloadMacos') },
36-
{ platform: 'linux', icon: <RiUbuntuFill />, label: t('downloadLinux') },
37-
{ platform: 'linuxArm64', icon: <RiUbuntuFill />, label: t('downloadLinuxArm64') },
31+
{platform: 'windows', icon: <RiMicrosoftFill/>, label: t('downloadWindows')},
32+
{platform: 'windowsSetup', icon: <RiMicrosoftFill/>, label: t('downloadWindowsSetup')},
33+
{platform: 'windowsArm64', icon: <RiMicrosoftFill/>, label: t('downloadWindowsArm64')},
34+
{platform: 'windowsArm64Setup', icon: <RiMicrosoftFill/>, label: t('downloadWindowsArm64Setup')},
35+
{platform: 'macos', icon: <RiAppleFill/>, label: t('downloadMacos')},
36+
{platform: 'linux', icon: <RiUbuntuFill/>, label: t('downloadLinux')},
37+
{platform: 'linuxArm64', icon: <RiUbuntuFill/>, label: t('downloadLinuxArm64')},
3838
]
3939

4040
const downloadUrls = webgalTerreAssets?.downloadUrl
4141
.map((item) => {
4242
const test = platformMap.find(platform => item.platform === platform.platform)
4343
if (test)
44-
return { url: item.url, ...test }
44+
return {url: item.url, ...test}
4545
})
4646

4747
const isZh = locale === 'zh-cn'
@@ -54,53 +54,56 @@ const DownloadWebgalTerre = () => {
5454
{/* <div className={styles.corner}>
5555
<p className={`${styles['corner-text']} bg-terre`}>{t('recommend')}</p>
5656
</div> */}
57-
<p><strong>{t('version')}:</strong> {webgalTerreAssets?.version ? webgalTerreAssets?.version : t('fetching')}</p>
58-
<p><strong>{t('releaseTime')}:</strong> {webgalTerreAssets?.releaseTime ? webgalTerreAssets?.releaseTime.split('T')[0] : t('fetching')} </p>
57+
<p><strong>{t('version')}:</strong> {webgalTerreAssets?.version ? webgalTerreAssets?.version : t('fetching')}
58+
</p>
59+
<p>
60+
<strong>{t('releaseTime')}:</strong> {webgalTerreAssets?.releaseTime ? webgalTerreAssets?.releaseTime.split('T')[0] : t('fetching')}
61+
</p>
5962
<div>
6063
<p><strong>{t('releaseNote')}:</strong> {!(releaseNote) && t('fetching')}</p>
6164
{
6265
releaseNote &&
63-
< div dangerouslySetInnerHTML={{ __html: releaseNote }} className={styles['release-note']} />
66+
< div dangerouslySetInnerHTML={{__html: releaseNote}} className={styles['release-note']}/>
6467
}
6568
</div>
6669
</div>
6770
<div className={styles['card-button-gourp']}>
6871
<Button terre>
69-
<Link href={webgalTerreUrl} target={'_blank'}><RiGithubFill />{t('gitHubReleases')}</Link>
72+
<Link href={webgalTerreUrl} target={'_blank'}><RiGithubFill/>{t('gitHubReleases')}</Link>
7073
</Button>
7174
{
7275
downloadUrls &&
7376
downloadUrls.map((item) =>
7477
item?.url &&
75-
<Button terre key={item.platform}>
76-
<Link href={item.url} target='_top'>{item.icon}{item.label}</Link>
77-
</Button>
78+
<Button terre key={item.platform}>
79+
<Link href={item.url} target='_top'>{item.icon}{item.label}</Link>
80+
</Button>
7881
)
7982
}
8083

8184
</div>
8285
{
8386
isZh && downloadUrls && <div className={styles.cndownload}>
84-
<details className='space-y-4'>
85-
<summary className='cursor-pointer text-terre select-none'>
86-
{t('otherDownloadLinkInfo')}
87-
</summary>
88-
<div className={styles['card-button-gourp']}>
89-
{
90-
downloadUrls &&
91-
downloadUrls.map((item) =>
92-
item?.url &&
93-
<Button terre key={item.platform}>
94-
<Link href={ghproxyStr + item.url} target='_top'>{item.icon}{item.label}</Link>
95-
</Button>
96-
)
97-
}
98-
</div>
99-
</details>
100-
</div>
87+
{/*<details className='space-y-4'>*/}
88+
<div className='text-terre select-none'>
89+
{t('otherDownloadLinkInfo')}
90+
</div>
91+
<div className={styles['card-button-gourp']}>
92+
{
93+
downloadUrls &&
94+
downloadUrls.map((item) =>
95+
item?.url &&
96+
<Button terre key={item.platform}>
97+
<Link href={ghproxyStr + item.url} target='_top'>{item.icon}{item.label}</Link>
98+
</Button>
99+
)
100+
}
101+
</div>
102+
{/*</details>*/}
103+
</div>
101104
}
102105
</div>
103106
)
104107
}
105108

106-
export default DownloadWebgalTerre
109+
export default DownloadWebgalTerre

‎app/[locale]/download/components/ReadFirst.tsx

+16-6
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
11
'use client'
22

3-
import { useTranslations } from 'next-intl'
3+
import {useTranslations} from 'next-intl'
44
import styles from '../Download.module.css'
55
import Link from 'next/link'
66
import useRedirect from '@/hooks/useRedirect'
77

88
const ReadFirst = () => {
99

1010
const t = useTranslations('download.readFirst')
11-
const { docsRedirect } = useRedirect()
11+
const {docsRedirect} = useRedirect()
1212

1313
return (
1414
<div className={styles.card}>
1515
<div className={'text-sm font-light space-y-1'}>
16-
<p>{t('firstUse.part0')} <Link href={docsRedirect('/')} target={'_blank'}>{t('firstUse.part1')}</Link> {t('firstUse.part2')}</p>
17-
<p>{t('getHelp')}</p>
18-
<p>{t('webGALScriptBasics.part0')} <Link href={'https://marketplace.visualstudio.com/items?itemName=c6h5-no2.webgal-script-basics'} target={'_blank'}>WebGAL Script Basics</Link> {t('webGALScriptBasics.part1')}</p>
16+
<div className={styles.hlrf}>
17+
<p>{t('firstUse.part0')}
18+
<Link className={styles.link} href={docsRedirect('/')}
19+
target={'_blank'}>
20+
{t('firstUse.part1')}
21+
</Link>
22+
{t('firstUse.part2')}
23+
</p>
24+
</div>
25+
<p className={styles.p}>{t('getHelp')}</p>
26+
<p className={styles.p}>{t('webGALScriptBasics.part0')} <Link
27+
href={'https://marketplace.visualstudio.com/items?itemName=Xuran1783558957.webgal-for-vscode'} target={'_blank'}>WebGAL
28+
for VSCode</Link> {t('webGALScriptBasics.part1')}</p>
1929
</div>
2030
</div>
2131
)
2232
}
2333

24-
export default ReadFirst
34+
export default ReadFirst

0 commit comments

Comments
 (0)