Uploaded initial website

This commit is contained in:
Jarrod Norwell 2024-09-25 02:34:13 +08:00
parent 851804778a
commit bff153e6d2
13 changed files with 6919 additions and 4895 deletions

5
.firebaserc Normal file
View File

@ -0,0 +1,5 @@
{
"projects": {
"default": "cytrus-adbe3"
}
}

View File

@ -0,0 +1,20 @@
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on merge
on:
push:
branches:
- master
jobs:
build_and_deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_CYTRUS_ADBE3 }}
channelId: live
projectId: cytrus-adbe3

View File

@ -0,0 +1,21 @@
# This file was auto-generated by the Firebase CLI
# https://github.com/firebase/firebase-tools
name: Deploy to Firebase Hosting on PR
on: pull_request
permissions:
checks: write
contents: read
pull-requests: write
jobs:
build_and_preview:
if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npm ci && npm run build
- uses: FirebaseExtended/action-hosting-deploy@v0
with:
repoToken: ${{ secrets.GITHUB_TOKEN }}
firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_CYTRUS_ADBE3 }}
projectId: cytrus-adbe3

16
firebase.json Normal file
View File

@ -0,0 +1,16 @@
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}

4734
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -13,6 +13,7 @@
"@mantine/core": "7.12.2",
"@mantine/hooks": "7.12.2",
"@mantine/vanilla-extract": "7.12.2",
"@tabler/icons-react": "^3.17.0",
"@vanilla-extract/css": "^1.15.3",
"react": "^18.3.1",
"react-dom": "^18.3.1"

33
src/App.module.css Normal file
View File

@ -0,0 +1,33 @@
.root {
border-radius: var(--mantine-radius-md);
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
}
.item {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
border: 1px solid transparent;
position: relative;
z-index: 0;
transition: transform 150ms ease;
&[data-active] {
transform: scale(1.03);
z-index: 1;
background-color: var(--mantine-color-body);
border-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
box-shadow: var(--mantine-shadow-md);
border-radius: var(--mantine-radius-md);
}
}
.chevron {
&[data-rotate] {
transform: rotate(-90deg);
}
}
.control:hover {
&[data-active] {
background-color: var(--mantine-color-body);
}
}

View File

@ -1,14 +1,161 @@
import "@mantine/core/styles.css";
import { MantineProvider } from "@mantine/core";
import {
Accordion, Anchor, Badge, Button, Container,
Flex, Group, List, MantineProvider, Menu,
Space, Stack, Text, Title, rem
} from "@mantine/core";
import {
IconDeviceMobile,
IconDeviceTablet,
IconDeviceLaptop,
} from '@tabler/icons-react';
import { useState } from "react";
import { theme } from "./theme";
import { Welcome } from "./Welcome/Welcome";
import { ColorSchemeToggle } from "./ColorSchemeToggle/ColorSchemeToggle";
import classes from './App.module.css';
export default function App() {
const changes = [
{
text: 'v1.0.0',
sha: '1e97bb2',
isLatest: true,
isUpcoming: false,
details: [
{
system: "Android",
items: [
{
primaryText: "Rebranded original latest Citra code to Cytrus",
secondaryText: null
},
{
primaryText: "Added support for 16 KB page sizes in Android 15",
secondaryText: null
}
]
},
{
system: "Windows",
items: [
{
primaryText: "Rebranded original latest Citra code to Cytrus",
secondaryText: null
}
]
}
]
}
];
const items = changes.map((item) => {
const listItems = item.details.map((detail, index) => {
const detailItems = detail.items.map((item) => (
<>
<List.Item>
<Text>{item.primaryText}</Text>
<Text c={'dimmed'} size="sm" hidden={item.secondaryText == '' || item.secondaryText == null}>
{item.secondaryText}
</Text>
</List.Item>
</>
));
return (
<MantineProvider theme={theme}>
<Welcome />
<ColorSchemeToggle />
<>
<Title order={3}>
{detail.system}
</Title>
<List>
{detailItems}
</List>
<Space h={index === changes.length ? 0 : 'md'} />
</>
);
});
return (
<Accordion.Item key={item.text} value={item.text}>
<Accordion.Control>
<Group justify='space-between' pr={'md'}>
<Group gap={'sm'}>
<Text>
{item.text}
</Text>
<Text c={'dimmed'}>
{`(${item.sha})`}
</Text>
</Group>
<Badge color={item.isLatest ? theme.primaryColor : item.isUpcoming ? 'dark' : 'red'}>
{item.isLatest ? 'Latest' : item.isUpcoming ? 'Upcoming' : 'Outdated'}
</Badge>
</Group>
</Accordion.Control>
<Accordion.Panel>
{...listItems}
</Accordion.Panel>
</Accordion.Item>
);
});
const [opened, setOpened] = useState(false);
const date = new Date();
return (
<MantineProvider theme={theme} forceColorScheme={date.getHours() >= 7 && date.getHours() <= 19 ? "light" : "dark"}>
<Container>
<Flex align={'center'} justify={'center'} h={'100vh'}>
<Stack>
<Anchor href='https://twitter.com/antique_codes' ta={'center'} target='_blank'>
@antique_codes
</Anchor>
<Title order={1} ta={'center'}>
Cytrus, a Nintendo 3DS emulator
</Title>
<Text c={'dimmed'} ta={'center'}>
Nintendo 3DS emulation, continued
</Text>
<Flex align={'center'} justify={'center'}>
<Group ta={'center'}>
<Button component="a" href={`https://github.com/cytrus-emu/cytrus/releases/download/${changes[0].text}/app-nightly-release.apk`} color="green" radius={'xl'} variant="filled">Android</Button>
<Menu opened={opened} onChange={setOpened}>
<Menu.Target>
<Button color="blue" radius={'xl'} variant="filled">Apple</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Label>iOS, iPadOS</Menu.Label>
<Menu.Item component="a" href="https://folium.emuplace.app" leftSection={<IconDeviceTablet style={{ width: rem(14), height: rem(14) }} />}>
iPad
</Menu.Item>
<Menu.Item component="a" href="https://folium.emuplace.app" leftSection={<IconDeviceMobile style={{ width: rem(14), height: rem(14) }} />}>
iPhone
</Menu.Item>
<Menu.Divider />
<Menu.Label>macOS</Menu.Label>
<Menu.Item leftSection={<IconDeviceLaptop style={{ width: rem(14), height: rem(14) }} />} disabled>
Apple Silicon
</Menu.Item>
<Menu.Item leftSection={<IconDeviceLaptop style={{ width: rem(14), height: rem(14) }} />} disabled>
Intel
</Menu.Item>
</Menu.Dropdown>
</Menu>
<Button color="orange" radius={'xl'} variant="filled" disabled>Linux</Button>
<Button color="blue" component="a" href="https://github.com/cytrus-emu/cytrus/releases/download/v1.0.0/cytrus-windows-v1.0.0.7z" radius={'xl'} variant="filled">Windows</Button>
<Button color="gray" component="a" href="https://github.com/cytrus-emu/cytrus" radius={'xl'} variant="filled">Source Code</Button>
</Group>
</Flex>
<Space h={'md'} />
<Title order={2}>
Changes
</Title>
<Accordion classNames={classes} radius={'md'} variant="contained">
{items}
</Accordion>
</Stack>
</Flex>
</Container>
</MantineProvider>
);
}

View File

@ -1,13 +0,0 @@
import { Button, Group, useMantineColorScheme } from '@mantine/core';
export function ColorSchemeToggle() {
const { setColorScheme } = useMantineColorScheme();
return (
<Group justify="center" mt="xl">
<Button onClick={() => setColorScheme('light')}>Light</Button>
<Button onClick={() => setColorScheme('dark')}>Dark</Button>
<Button onClick={() => setColorScheme('auto')}>Auto</Button>
</Group>
);
}

View File

@ -1,22 +0,0 @@
import { style } from "@vanilla-extract/css";
import { vars } from "../theme";
import { rem } from "@mantine/core";
export const title = style({
color: vars.colors.black,
fontSize: rem(100),
fontWeight: 900,
letterSpacing: rem(-2),
selectors: {
[vars.darkSelector]: {
color: vars.colors.white,
},
},
"@media": {
[vars.smallerThan("md")]: {
fontSize: rem(50),
},
},
});

View File

@ -1,28 +0,0 @@
import { Title, Text, Anchor } from "@mantine/core";
import * as classes from "./Welcome.css";
export function Welcome() {
return (
<>
<Title className={classes.title} ta="center" mt={100}>
Welcome to{" "}
<Text
inherit
variant="gradient"
component="span"
gradient={{ from: "pink", to: "yellow" }}
>
Mantine
</Text>
</Title>
<Text color="dimmed" ta="center" size="lg" maw={580} mx="auto" mt="xl">
This starter Vite project includes a minimal setup, if you want to learn
more on Mantine + Vite integration follow{" "}
<Anchor href="https://mantine.dev/guides/vite/" size="lg">
this guide
</Anchor>
. To get started edit pages/Home.page.tsx file.
</Text>
</>
);
}

View File

@ -1,5 +1,7 @@
import { createTheme } from "@mantine/core";
import { themeToVars } from "@mantine/vanilla-extract";
export const theme = createTheme({});
export const theme = createTheme({
primaryColor: 'yellow'
});
export const vars = themeToVars(theme);

6752
yarn.lock

File diff suppressed because it is too large Load Diff