Skip to content

Commit

Permalink
update routing (setup for supporting more algsets)
Browse files Browse the repository at this point in the history
  • Loading branch information
trexrush committed Apr 13, 2024
1 parent 63ae3a3 commit 41d8263
Show file tree
Hide file tree
Showing 8 changed files with 169 additions and 220 deletions.
80 changes: 5 additions & 75 deletions src/components/Navbar.astro
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
import Info from "./Info.astro";
import { NavbarRoutes } from "../scripts/routes";
import { getNavbarItems } from "../scripts/config/navigation/getNavbarItems";
import "@cubing/icons";
let pages = NavbarRoutes
let pages = getNavbarItems()
let sheets = { name: "Old", href: "https://docs.google.com/spreadsheets/d/1L0iR5AyRh2sTWymHSD2MiTJXzl8IoxGzyuRgqEhttSs/edit#gid=1313953242", external: true, }
let github = { name: "Sheets", href: "https://github.com/trexrush/algs", external: true, }
Expand All @@ -16,55 +16,8 @@ let github = { name: "Sheets", href: "https://github.com/trexrush/algs", externa
</dialog>
</div>

<!-- TODO: https://tailwindcss.com/docs/hover-focus-and-other-states#open-closed-state migrate from dodge checkbox to fake details EDIT: possible? or use smth else -->
<!-- DESKTOP -->
<nav class=" hidden md:flex items-baseline @container">
<div class="bg div-line
flex w-fit items-center m-3 sticky top-0
child:min-w-max child:py-1 child:px-4 rounded-md shadow-lg
divide-x-2">
<a href="/algs/" class="text-xl font-bold">Home</a>
{pages.map((page) => (
page.folder ?
<div class="relative">
<!-- LAYER 1 -->
<input id={page.name} type="radio" name="menu" class="peer hidden" />
<label for={page.name} class="select-none cursor-pointer font-bold peer-checked:text-yellow-400" >
{page.icon ? <div class:list={page.icon} /> : page.name + "📂"}
</label>
<!-- MENU -->
<div class="menu bg div-line hidden peer-checked:flex top-11 left-0 pr-2 rounded-md shadow-xl divide-y-2">
{page.folder.map((subpage) => (
<!-- LAYER 2 -->
<div class="flex flex-row items-baseline gap-3">
<a href={subpage.href} class="select-none p-2 mr-3 opacity-70 text-sm whitespace-nowrap">{subpage.icon ?? subpage.name}</a>
{subpage.folder?.map((route) => (
<!-- LAYER 3 -->
<a href={route.href} class="font-bold whitespace-nowrap">{route.name}</a>
))}
</div>
))}
</div>
<!-- / MENU -->
</div>
// ROUTE IN MAIN HEADER
: <a href={page.href} class="select-none overflow-hidden whitespace-nowrap">{page.name}</a>
))}
<a href={sheets.href} class="p-1 select-none hidden @xl:block whitespace-nowrap">
<i class="bi bi-table"></i>
{sheets.name}
</a>
<a href={github.href} class="p-1 select-none hidden @lg:block whitespace-nowrap">
<i class="bi bi-github"></i>
</a>
</div>
<div id="showInfo" class="bg w-fit m-3 px-4 py-1 rounded-md shadow-lg cursor-pointer hidden @xl:block">
</div>
</nav>

<!-- MOBILE -->
<nav class="flex md:hidden text-xl">
<nav class="flex text-xl">
<!-- MENU BUTTON -->
<details class="bg select-none rounded-md shadow-lg cursor-pointer m-3 p-2 w-fit font-bold" >
<summary>MENU</summary>
Expand All @@ -73,31 +26,8 @@ let github = { name: "Sheets", href: "https://github.com/trexrush/algs", externa
<div class="menu bg div-line flex top-16 left-3 justify-center rounded-md shadow-lg divide-y-2 p-1 child:py-2 child:px-1 min-w-min w-1">

<a href="/algs/" class="text-xl font-bold">Home</a>
{pages.map((page) => (
page.folder ?
<div class="relative">
<!-- LAYER 1 -->
<input id={page.name + "m"} type="radio" name="menu-mobile" class="peer hidden" />
<label for={page.name + "m"} class="select-none cursor-pointer font-bold peer-checked:text-yellow-400" >
{page.icon ? <div class:list={[page.icon, 'text-center']} /> : page.name + "📂"}
</label>
<!-- MENU -->
<div class="menu bg div-line hidden peer-checked:flex top-2 left-[70px] pr-2 rounded-md shadow-lg divide-y-2">
{page.folder.map((subpage) => (
<!-- LAYER 2 -->
<div class="flex flex-row items-baseline gap-3">
<a href={subpage.href} class="select-none p-2 mr-3 opacity-70 text-sm whitespace-nowrap">{subpage.icon ?? subpage.name}</a>
{subpage.folder?.map((route) => (
<!-- LAYER 3 -->
<a href={route.href} class="font-bold whitespace-nowrap">{route.name}</a>
))}
</div>
))}
</div>
<!-- / MENU -->
</div>
// ROUTE IN MAIN HEADER
: <a href={page.href} class="select-none overflow-hidden whitespace-nowrap">{page.name}</a>
{pages.map(page => (
<a href={'/algs/' + page.path} class={`select-none overflow-hidden whitespace-nowrap ${page.icon}`}>{' '}{page.name}</a>
))}
<a href={sheets.href} class="p-1 select-none text-center whitespace-nowrap">
{sheets.name}
Expand Down
6 changes: 4 additions & 2 deletions src/pages/[...path].astro
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@
import VerticalLayout from "../layouts/VerticalLayout.astro";
import Navbar from "../components/Navbar.astro";
import Page from "../layouts/Page.astro";
import { PageRoutes, type IPageData } from '../scripts/routes'
import { getRoutes } from "../scripts/config/navigation/getRoutes";
import type { IPageData } from "../scripts/config/navigation/constants/navigationTypes";
type Props = Omit<IPageData, 'path'>
export function getStaticPaths() {
const pages = PageRoutes
const pages = getRoutes()
console.log(pages)
return pages.map(({ path, name, data }) => {
return {
params: { path },
Expand Down
4 changes: 0 additions & 4 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@
import Navbar from "../components/Navbar.astro";
import Page from "../layouts/Page.astro";
import Info from "../components/Info.astro"
import { CorePageRoutes } from "../scripts/routes";
let pages = CorePageRoutes
---

Expand Down
15 changes: 15 additions & 0 deletions src/scripts/config/navigation/constants/navigationTypes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import type { IAlgset } from "../../set/dataFormat"

export interface IPageData {
path: string,
name: string,
icon: string,
datalists: {
main: IAlgset,
unsorted?: IAlgset,
altsorts?: {
data: IAlgset
url: string
}[]
}
}
131 changes: 131 additions & 0 deletions src/scripts/config/navigation/constants/routes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import { CLLGroupByOLL, CLLNoGrouping } from "../../../../data/output/cllObj";
import { EG1GroupByOLL, EG1NoGrouping } from "../../../../data/output/eg1Obj";
import { HNoGrouping } from "../../../../data/ZBLL/hObj";
import { LNoGrouping } from "../../../../data/ZBLL/lObj";
import { ParityPLLNoGrouping, ParityPLLGroupByCP } from "../../../../data/output/paritypllObj";
import { TGroupByBH, TGroupByCP, TNoGrouping } from "../../../../data/ZBLL/tObj";
import { UGroupByBH, UGroupByCP, UNoGrouping } from "../../../../data/ZBLL/uObj";
import { MegaOLLNoGrouping, MegaOLLGroupByOLL, MegaOLLGroupByFeature } from "../../../../data/output/megaollObj";
import { MegaPLLGroupByFeatures, MegaPLLGroupByLetter, MegaPLLNoGrouping } from "../../../../data/output/megapllObj";
import { OLLGroupByEO, OLLNoGrouping } from "../../../../data/output/ollObj";
import { PLLGroupedBySet, PLLNoGrouping } from "../../../../data/output/pllObj";
import { ZBLSNoGrouping } from "../../../../data/ZBLS/zblsObj";
import { MegaCO, MegaCP } from "../../../../data/output/mega4LLLObj";
import type { IPageData } from "./navigationTypes";


export const p: IPageData[] = [
{ path: 'CFOP/OLL', name: "OLL", icon: "cubing-icon event-333",
datalists: {
main: OLLGroupByEO,
unsorted: OLLNoGrouping,
altsorts: [
{ url: '/group', data: OLLGroupByEO },
]
}
},
{ path: 'CFOP/PLL', name: "PLL", icon: "cubing-icon event-333",
datalists: {
main: PLLGroupedBySet,
unsorted: PLLNoGrouping,
altsorts: [
{ url: '/group', data: PLLGroupedBySet },
]
}
},
{ path: 'ZB/ZBLS', name: "ZBLS", icon: "cubing-icon event-333",
datalists: {
main: ZBLSNoGrouping,
unsorted: ZBLSNoGrouping,
}
},
{ path: 'ZB/ZBLL/T', name: "T ZBLL", icon: "cubing-icon event-333",
datalists: {
main: TGroupByCP,
unsorted: TNoGrouping,
altsorts: [
{ url: '/cp', data: TGroupByCP },
{ url: '/bh', data: TGroupByBH },
]
}
},
{ path: 'ZB/ZBLL/U', name: "U ZBLL", icon: "cubing-icon event-333",
datalists: {
main: UGroupByCP,
unsorted: UNoGrouping,
altsorts: [
{ url: '/cp', data: UGroupByCP },
{ url: '/bh', data: UGroupByBH },
]
}
},
{ path: 'ZB/ZBLL/L', name: "L ZBLL", icon: "cubing-icon event-333",
datalists: {
main: LNoGrouping,
unsorted: LNoGrouping,
}
},
{ path: 'ZB/ZBLL/H', name: "H ZBLL", icon: "cubing-icon event-333",
datalists: {
main: HNoGrouping,
unsorted: HNoGrouping,
}
},
{ path: '222/EG1', name: "EG1", icon: "cubing-icon event-222",
datalists: {
main: EG1GroupByOLL,
unsorted: EG1NoGrouping,
altsorts: [
{ url: '/set', data: EG1GroupByOLL },
]
}
},
{ path: '222/CLL', name: "CLL", icon: "cubing-icon event-222",
datalists: {
main: CLLGroupByOLL,
unsorted: CLLNoGrouping,
altsorts: [
{ url: '/set', data: CLLGroupByOLL },
]
}
},
{ path: 'mega/PLL', name: "Mega PLL", icon: "cubing-icon event-minx",
datalists: {
main: MegaPLLGroupByFeatures,
unsorted: MegaPLLNoGrouping,
altsorts: [
{ url: '/set', data: MegaPLLGroupByLetter },
{ url: '/group', data: MegaPLLGroupByFeatures },
]
}
},
{ path: 'mega/OLL', name: "Mega OLL", icon: "cubing-icon event-minx",
datalists: {
main: MegaOLLGroupByFeature,
unsorted: MegaOLLNoGrouping,
altsorts: [
{ url: '/set', data: MegaOLLGroupByOLL },
{ url: '/set', data: MegaOLLGroupByFeature },
]
}
},
{ path: 'bigs/ParityPLL', name: "Parity PLL", icon: "cubing-icon event-444",
datalists: {
main: ParityPLLGroupByCP,
unsorted: ParityPLLNoGrouping,
altsorts: [
{ url: '/group', data: ParityPLLGroupByCP },
]
}
},
{ path: 'mega/CO', name: "Mega 4LLL CO", icon: "cubing-icon event-minx",
datalists: {
main: MegaCO,
}
},
{ path: 'mega/CP', name: "Mega 4LLL CP", icon: "cubing-icon event-minx",
datalists: {
main: MegaCP,
}
},
]
3 changes: 3 additions & 0 deletions src/scripts/config/navigation/getNavbarItems.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { p } from './constants/routes'
// TODO remove??
export const getNavbarItems = () => p
11 changes: 11 additions & 0 deletions src/scripts/config/navigation/getRoutes.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { p } from "./constants/routes";

export const getRoutes = () => p.flatMap(pElem => {
const main = { data: pElem.datalists.main, path: pElem.path, name: pElem.name } // main
const rawList = pElem.datalists.unsorted ? { data: pElem.datalists.unsorted, path: pElem.path + '/raw', name: pElem.name } : undefined // raw
const altSorts = pElem.datalists.altsorts?.map(altSort => (
{ data: altSort.data, path: pElem.path + altSort.url, name: pElem.name }
))

return [main, ...(rawList ? [rawList] : []), ...(altSorts ?? [])]
})
Loading

0 comments on commit 41d8263

Please sign in to comment.