Skip to content

Commit d01c667

Browse files
UNIkeENUNIkeEN
committed
feat: add chakra-ui, sync color, add download button for placeholder
1 parent b45ba16 commit d01c667

File tree

11 files changed

+1393
-63
lines changed

11 files changed

+1393
-63
lines changed

‎app/[lang]/layout.jsx‎

Lines changed: 20 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { Footer, Layout, Navbar, LastUpdated } from 'nextra-theme-docs'
22
import { TitleFullWithLogo } from '../components/logo-title'
3-
import { Head, Search } from 'nextra/components'
3+
import { Search } from 'nextra/components'
44
import { getPageMap } from 'nextra/page-map'
55
import { localeResources } from '../../locales'
66
import 'nextra-theme-docs/style.css'
7-
7+
88
export const metadata = {
99
applicationName: 'SJMCL',
1010
appleWebApp: {
@@ -19,7 +19,7 @@ export const metadata = {
1919
template: '%s | SJMCL'
2020
},
2121
}
22-
22+
2323
export default async function RootLayout({ children, params }) {
2424
const { lang } = await params
2525
let pageMap = await getPageMap(`/${lang}`)
@@ -38,47 +38,31 @@ export default async function RootLayout({ children, params }) {
3838
placeholder={t.search.placeholder}
3939
/>
4040
)
41-
41+
4242
const footer = (
4343
<Footer>
4444
沪 ICP 备 05052060 号-7
45-
<br/>
45+
<br />
4646
{new Date().getFullYear()} © {t.footer.copyright}
4747
</Footer>
4848
)
4949

5050
return (
51-
<html
52-
// Not required, but good for SEO
53-
lang="en"
54-
// Required to be set
55-
dir="ltr"
56-
// Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
57-
suppressHydrationWarning
51+
<Layout
52+
// banner={banner}
53+
navbar={navbar}
54+
search={search}
55+
pageMap={pageMap}
56+
docsRepositoryBase="https://github.com/UNIkeEN/SJMCL/tree/main"
57+
footer={footer}
58+
editLink={t.editLink}
59+
feedback={{ content: t.feedbackLink }}
60+
lastUpdated={<LastUpdated>{t.lastUpdated}</LastUpdated>}
61+
i18n={Object.entries(localeResources).map(([locale, value]) => ({
62+
locale, name: value.display_name,
63+
}))}
5864
>
59-
<Head
60-
// ... Your additional head options
61-
>
62-
{/* Your additional tags should be passed as `children` of `<Head>` element */}
63-
</Head>
64-
<body>
65-
<Layout
66-
// banner={banner}
67-
navbar={navbar}
68-
search={search}
69-
pageMap={pageMap}
70-
docsRepositoryBase="https://github.com/UNIkeEN/SJMCL/tree/main"
71-
footer={footer}
72-
editLink={t.editLink}
73-
feedback={{content: t.feedbackLink}}
74-
lastUpdated={<LastUpdated>{t.lastUpdated}</LastUpdated>}
75-
i18n={Object.entries(localeResources).map(([locale, value]) => ({
76-
locale, name: value.display_name,
77-
}))}
78-
>
79-
{children}
80-
</Layout>
81-
</body>
82-
</html>
65+
{children}
66+
</Layout>
8367
)
8468
}

‎app/components/color-mode-wrapper.jsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
'use client'
2+
3+
import {
4+
ChakraProvider,
5+
extendTheme,
6+
useColorMode,
7+
localStorageManager,
8+
} from '@chakra-ui/react'
9+
import { useEffect } from 'react'
10+
11+
const theme = extendTheme({
12+
config: {
13+
initialColorMode: 'light',
14+
useSystemColorMode: false,
15+
},
16+
})
17+
18+
function SyncChakraWithLocalStorage() {
19+
const { colorMode, setColorMode } = useColorMode()
20+
21+
useEffect(() => {
22+
const update = () => {
23+
const nextraTheme = localStorage.getItem('theme')
24+
if (nextraTheme && nextraTheme !== colorMode) {
25+
setColorMode(nextraTheme)
26+
}
27+
}
28+
update()
29+
30+
const interval = setInterval(update, 100)
31+
return () => clearInterval(interval)
32+
}, [colorMode, setColorMode])
33+
34+
return null
35+
}
36+
37+
export function ColorModeSyncWrapper({ children }) {
38+
return (
39+
<ChakraProvider theme={theme} colorModeManager={localStorageManager} resetCSS={false} cssVarsRoot="body #chakra-scope">
40+
<SyncChakraWithLocalStorage />
41+
{children}
42+
</ChakraProvider>
43+
)
44+
}

‎app/layout.jsx‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,27 @@
1+
import { ColorModeSyncWrapper } from './components/color-mode-wrapper'
2+
import { Head } from 'nextra/components'
3+
import './styles/global.css'
4+
15
export default function RootLayout({ children }) {
2-
return children
6+
return (
7+
<html
8+
// Not required, but good for SEO
9+
lang="en"
10+
// Required to be set
11+
dir="ltr"
12+
// Suggested by `next-themes` package https://github.com/pacocoursey/next-themes#with-app
13+
suppressHydrationWarning
14+
>
15+
<Head
16+
// ... Your additional head options
17+
>
18+
{/* Your additional tags should be passed as `children` of `<Head>` element */}
19+
</Head>
20+
<body>
21+
<ColorModeSyncWrapper>
22+
{children}
23+
</ColorModeSyncWrapper>
24+
</body>
25+
</html>
26+
)
327
}

‎app/styles/global.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.secondary-text {
2+
color: var(--chakra-colors-chakra-placeholder-color);
3+
}

‎content/zh/components/index-page/download-button.jsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
'use client'
2+
3+
import { useEffect, useState } from 'react'
4+
import { Button, HStack, VStack, Text } from '@chakra-ui/react'
5+
import { FaApple } from "react-icons/fa6";
6+
import { LuGrid2X2, LuArrowDownToLine } from "react-icons/lu";
7+
8+
const DOWNLOAD_LINKS = {
9+
win32: { label: '下载 Windows (32位) 版', icon: <LuGrid2X2 /> },
10+
win64: { label: '下载 Windows (64位) 版', icon: <LuGrid2X2 /> },
11+
macos_arm: { label: '下载 macOS (Apple Silicon) 版', icon: <FaApple /> },
12+
macos_intel: { label: '下载 macOS (Intel) 版', icon: <FaApple /> },
13+
linux: { label: '下载 Linux 版', icon: <LuArrowDownToLine /> },
14+
fallback: { label: '下载', icon: <LuArrowDownToLine /> },
15+
}
16+
17+
export default function DownloadButton() {
18+
const [download, setDownload] = useState(DOWNLOAD_LINKS.fallback)
19+
20+
useEffect(() => {
21+
const platform = navigator.platform.toLowerCase()
22+
const ua = navigator.userAgent.toLowerCase()
23+
24+
if (platform.includes('win')) {
25+
if (ua.includes('x64') || ua.includes('win64') || ua.includes('wow64')) {
26+
setDownload(DOWNLOAD_LINKS.win64)
27+
} else {
28+
setDownload(DOWNLOAD_LINKS.win32)
29+
}
30+
} else if (platform.includes('mac')) {
31+
if (ua.includes('arm') || ua.includes('aarch64') || ua.includes('apple')) {
32+
setDownload(DOWNLOAD_LINKS.macos_arm)
33+
} else {
34+
setDownload(DOWNLOAD_LINKS.macos_intel)
35+
}
36+
} else if (platform.includes('linux')) {
37+
setDownload(DOWNLOAD_LINKS.linux)
38+
}
39+
}, [])
40+
41+
return (
42+
<VStack spacing={2}>
43+
<Button colorScheme="blue" size="lg" leftIcon={download.icon}>
44+
{download.label}
45+
</Button>
46+
<HStack
47+
divider={
48+
<Text fontSize="sm" mx={1} className='secondary-text'>
49+
·
50+
</Text>
51+
}
52+
>
53+
<Text fontSize="sm" className='secondary-text'>
54+
最新版本 0.0.1
55+
</Text>
56+
<Button variant="link" size="sm" fontWeight="normal">
57+
全部版本
58+
</Button>
59+
</HStack>
60+
</VStack>
61+
)
62+
}

‎content/zh/components/index-page/index.jsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { VStack, Heading, Highlight } from "@chakra-ui/react";
2+
import DownloadButton from './download-button';
3+
4+
export default function IndexPageComponents() {
5+
return (
6+
<VStack mt={8} spacing={8} id="chakra-scope">
7+
<Heading>
8+
<Highlight query="新一代" styles={{ color: 'blue.500' }}>
9+
新一代开源跨平台 Minecraft 启动器
10+
</Highlight>
11+
</Heading>
12+
<DownloadButton />
13+
</VStack>
14+
);
15+
}

‎content/zh/index.mdx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1-
中文页面
1+
import IndexPageComponents from './components/index-page'
2+
3+
<IndexPageComponents />

‎next-env.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/image-types/global" />
3+
4+
// NOTE: This file should not be edited
5+
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

0 commit comments

Comments
 (0)