Start reworking link structure and work on character page

api/routes/images.json

@@ -3052,7 +3052,7 @@
       "Eclipse Deity",
       "Lances"
     ],
-    "href": "https://skeb.jp/@braveggg/works/5",
+    "href": "https://skeb.jp/@braveggg/works/6",
     "published": "2024-03-20",
     "aspectRatio": 0.8243310619910255,
     "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/thumbnail/alts/eclipse_deity_u_03_b_3_1.webp",
@@ -3666,21 +3666,6 @@
       "Alcor"
     ]
   },
-  {
-    "tags": [
-      "Eclipse Deity"
-    ],
-    "href": "",
-    "aspectRatio": 0.8243310619910255,
-    "parent": "Eclipse Deity γ",
-    "thumbnailUrl": "https://alcorsiteartbucket.s3.amazonaws.com/thumbnail/alts/eclipse_deity_u_03_b_3_2.webp",
-    "webp": "https://alcorsiteartbucket.s3.amazonaws.com/webp/alts/eclipse_deity_u_03_b_3_2.webp",
-    "src": "https://alcorsiteartbucket.s3.amazonaws.com/eclipse_deity_v3/0.png",
-    "rating": "general",
-    "characters": [
-      "Alcor"
-    ]
-  },
   {
     "title": "Biogenesis Suit Design",
     "artist": "@EmberWickArt",
@@ -4570,7 +4555,7 @@
     "tags": [
       "AICore Form"
     ],
-    "href": "https://x.com/pawcrest/status/1825619442828718502",
+    "href": "https://x.com/pawcrest/status/1825619445978640452",
     "aspectRatio": 0.7960799095363739,
     "rating": "sensitive",
     "characters": [
@@ -4588,7 +4573,7 @@
     "tags": [
       "AICore Form"
     ],
-    "href": "https://x.com/pawcrest/status/1825619445978640452",
+    "href": "https://x.com/pawcrest/status/1825619442828718502",
     "aspectRatio": 0.7960799095363739,
     "characters": [
       "Alcor",
@@ -4735,8 +4720,8 @@
       "Bodysuit",
       "Techwear"
     ],
-    "href": "",
-    "published": "2024-08-24",
+    "href": "https://bsky.app/profile/faintalcor.bsky.social/post/3l2ocki4pnr2c",
+    "published": "2024-08-26",
     "aspectRatio": 3,
     "rating": "mainstream",
     "characters": [

src/RouterPaths.tsx

@@ -12,6 +12,7 @@ import {SomaInfo} from "./components/about/characters/SomaInfo";
 import React from "react";
 import {AnalyticsPage} from "./components/analytics/AnalyticsPage";
 import {MinimalGalleryPage} from "./components/gallery/MinimalGalleryPage";
+import {CharactersPage} from "./components/about/characters/CharactersPage";
 
 export const router = createHashRouter([
     {
@@ -20,18 +21,24 @@ export const router = createHashRouter([
         children: [
             {
                 path: "/gallery",
-                element: <Gallery/>
+                children: [
+                    {
+                        index: true,
+                        element: <Gallery/>
+                    },
+                    {
+                        path: "/gallery/:title",
+                        element: <ArtworkPage/>
+                    },
+                ]
             },
             {
                 path: '/analytics',
                 element: <AnalyticsPage/>
             },
+
             {
-                path: "/artwork",
-                element: <ArtworkPage/>
-            },
-            {
-                path: "about",
+                path: "/about",
                 element: <AboutPage/>,
                 children: [
                     ...alcorForms.concat(superheroSuits).map(value => ({
@@ -55,6 +62,10 @@ export const router = createHashRouter([
                         element: <SomaInfo/>
                     }
                 ]
+            },
+            {
+                path: "/characters",
+                element: <CharactersPage/>
             }
         ]
     },

src/components/about/characters/CharactersPage.tsx

@@ -1,6 +1,117 @@
+import {PageHeader} from "../PageHeader";
+import React from "react";
+import {Container, Divider, Fade, Grid, Stack, Typography} from "@mui/material";
+import aicore from '../about-resources/character-badges/Character_Badge_-page008.png'
+import aquarius from '../about-resources/character-badges/Character_Badge_-page007.png'
+import castor from '../about-resources/character-badges/Character_Badge_-page006.png'
+import soma from '../about-resources/character-badges/Character_Badge_-page005.png'
+import jupiter from '../about-resources/character-badges/Character_Badge_-page003.png'
+import poslani from '../about-resources/character-badges/Character_Badge_-page010.png'
+import eclipse from '../about-resources/character-badges/Character_Badge_-page009.png'
+import triangulum from '../about-resources/character-badges/Character_Badge_-page011.png'
+import alcor from '../about-resources/character-badges/Character_Badge_-page001.png'
+import wilton from '../about-resources/character-badges/Character_Badge_-page004.png'
+import {Link} from "react-router-dom";
+
+type CharacterLink = { image: string; linkPath?: string };
+
 export function CharactersPage() {
+    const alcorverseCharacters: CharacterLink[] = [
+        {
+            image: alcor,
+        },
+        {
+            image: castor,
+        }
+    ]
+    const alcorForms: CharacterLink[] = [
+        {
+            image: aicore,
+            linkPath: '/about/aicore'
+        },
+        {
+            image: triangulum,
+            linkPath: '/about/triangulum'
+        },
+        {
+            image: eclipse,
+        },
+        {
+            image: jupiter,
+            linkPath: '/about/jupiter'
+        },
+        {
+            image: aquarius,
+            linkPath: '/about/aquarius'
+        }
+    ]
+
+    const ttrpgOCs: CharacterLink[] = [
+        {
+            image: soma,
+            linkPath: '/about/soma'
+        },
+        {
+            image: wilton,
+        },
+        {
+            image: poslani,
+        }
+    ]
+
+    function renderCharacterBadgeRow(characters: CharacterLink[]) {
+        return characters.map(value => {
+            if (value.linkPath) {
+                return <Grid item md={4}>
+                    <Link to={value.linkPath}>
+                        <img src={value.image} style={{display: "block", width: '100%', borderRadius: 8}}/>
+                    </Link>
+                </Grid>;
+            } else {
+                return <Grid item md={4}>
+                    <img src={value.image} style={{display: "block", width: '100%', borderRadius: 8}}/>
+                </Grid>;
+            }
+        })
+    }
+
     return (
-        <>
-        </>
+        <Fade in>
+            <Container maxWidth={"xl"}>
+                <Grid container spacing={1}>
+                    <Grid item md={8}>
+                        <PageHeader title={"Character List"}/>
+                        <Divider/>
+                        <Stack direction={"column"} spacing={2}>
+                            <div>
+                                <Typography fontWeight={"bold"} variant={'h6'}>Alcorverse Characters</Typography>
+                                <Grid container direction={'row'} spacing={1}>
+                                    {renderCharacterBadgeRow(alcorverseCharacters)}
+                                </Grid>
+                            </div>
+                            <div>
+                                <Typography fontWeight={"bold"} variant={'h6'}>Alcor Forms</Typography>
+                                <Grid container direction={'row'} spacing={1}>
+                                    {renderCharacterBadgeRow(alcorForms)}
+                                </Grid>
+                            </div>
+                            <div>
+                                <Typography fontWeight={"bold"} variant={'h6'}>Tabletop Game OCs</Typography>
+                                <Grid container direction={'row'} spacing={1}>
+                                    {renderCharacterBadgeRow(ttrpgOCs)}
+                                </Grid>
+                            </div>
+                        </Stack>
+                        <Typography style={{marginTop: 16}} variant={"subtitle2"}>I swear, my characters are not gacha characters</Typography>
+                    </Grid>
+                    <Grid item md>
+                        <div style={{minHeight: '100vh', height: '100%'}}>
+                            <img style={{display: 'block', width: '100%', 'height': '100%', objectFit: 'cover'}} src={'https://alcorsiteartbucket.s3.amazonaws.com/thumbnail/natsu_matsuri_2024.webp'}/>
+                        </div>
+                    </Grid>
+                </Grid>
+            </Container>
+        </Fade>
+
     );
 }

src/components/gallery/Gallery.tsx

@@ -75,10 +75,7 @@ export const Gallery = memo(function Gallery() {
 
     function handleImageClicked(value: ImageInformation) {
         navigation({
-            pathname: "/artwork",
-            search: createSearchParams({
-                title: prepareFileName(value.title)
-            }).toString()
+            pathname: prepareFileName(value.title)
         })
     }
 

src/components/gallery/MinimalGalleryPage.tsx

@@ -1,16 +1,16 @@
 import {useTagHooks} from "./UseTagHooks";
-import {createSearchParams, useNavigate} from "react-router-dom";
+import {useNavigate} from "react-router-dom";
 import {Container, Fade, Typography} from "@mui/material";
 import {ImageInformation} from "../ImageInformation";
 import {useQueryState} from "react-router-use-location-state";
 import useMeasure from "react-use-measure";
 import {ResizeObserver} from "@juggle/resize-observer";
 import {prepareFileName} from "./Utils";
 import {TSJustifiedLayout} from "react-justified-layout-ts";
-import {SkeletonImage} from "../SkeletonImage";
 import React from "react";
 import {getShownImages} from "./Gallery";
 import {drawerColor} from "../navigation/NavigationRail";
+import {SkeletonImage} from "../SkeletonImage";
 
 // Page that only displays artworks in a grid, and hides all other elements
 export function MinimalGalleryPage() {
@@ -25,10 +25,7 @@ export function MinimalGalleryPage() {
 
     function handleImageClicked(value: ImageInformation) {
         navigation({
-            pathname: "/artwork",
-            search: createSearchParams({
-                title: prepareFileName(value.title)
-            }).toString()
+            pathname: `/gallery/${prepareFileName(value.title)}`,
         })
     }
 

src/components/gallery/artwork/ArtworkPage.tsx

@@ -6,14 +6,14 @@ import {Button} from "@mui/material-next";
 import Chip from "@mui/material-next/Chip";
 import dayjs from "dayjs";
 import AltsUploader from "../AltsUploader";
-import {useNavigate, useSearchParams} from "react-router-dom";
+import {useNavigate, useParams} from "react-router-dom";
 import {ArrowBack} from "@mui/icons-material";
 import {drawerColor} from "../../navigation/NavigationRail";
 import {useTagHooks} from "../UseTagHooks";
 import {prepareFileName} from "../Utils";
 
 export function ArtworkPage() {
-    const [imageTitle, setImageTitle] = useSearchParams();
+    const imageTitle = useParams().title ?? "";
     const {images, altData} = useTagHooks();
     const [imageNumber, setImageNumber] = useState(-1);
     const navigate = useNavigate();
@@ -30,7 +30,7 @@ export function ArtworkPage() {
         setImageNumber(index);
     }
 
-    const imageInfo = images.find(value => prepareFileName(value.title) === imageTitle.get("title"));
+    const imageInfo = images.find(value => prepareFileName(value.title) === imageTitle);
     if (imageInfo) {
         const {
             webp,

src/components/navigation/NavigationRail.tsx

@@ -63,7 +63,7 @@ export function NavigationRail(props: {
                     <Stack spacing={1} style={{flex: 1}}>
                         <NavigationRailLink button={<HomeOutlined/>} label={"Home"} path={"/"}/>
                         <NavigationRailLink button={<CollectionsOutlined/>} label={"Gallery"} path={"/gallery"}/>
-                        <NavigationRailLink button={<PeopleOutline/>} label={"Characters"} path={"/about"}/>
+                        <NavigationRailLink button={<PeopleOutline/>} label={"Characters"} path={"/characters"}/>
                     </Stack>
 
                     <div className={`navigation-rail-item`} style={{display: 'grid', alignItems: 'center'}}>
@@ -91,7 +91,7 @@ export function NavigationRail(props: {
                     {/*TODO Add current page indicator and unify buttons*/}
                     <BottomNavigationAction icon={<Home/>} label={"Home"} value={'/'}/>
                     <BottomNavigationAction color={'var(--md-sys-color-primaryContainer)'} value={'/gallery'} label="Gallery" icon={<CollectionsIcon/>}/>
-                    <BottomNavigationAction label="Characters" value={'/about'} icon={<FontAwesomeIcon icon={faDragon} style={{width: 24, height: 24}}/>}/>
+                    <BottomNavigationAction label="Characters" value={'/characters'} icon={<FontAwesomeIcon icon={faDragon} style={{width: 24, height: 24}}/>}/>
                     <BottomNavigationAction label="Settings" icon={<Settings/>} onClick={handleClickOpen}></BottomNavigationAction>
                 </BottomNavigation>
             </Paper>