diff --git a/package.json b/package.json index b3b94ea..fe78a4d 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,17 @@ ], "prettier": { "printWidth": 120, - "semi": false + "semi": false, + "plugins": [ + "prettier-plugin-astro" + ], + "overrides": [ + { + "files": "*.astro", + "options": { + "parser": "astro" + } + } + ] } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 17738aa..3ece2dd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,9 +1,5 @@ lockfileVersion: '6.0' -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false - dependencies: '@astrojs/node': specifier: ^7.0.4 @@ -3991,3 +3987,7 @@ packages: /zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false diff --git a/src/components/layout/Box.astro b/src/components/layout/Box.astro new file mode 100644 index 0000000..5f69450 --- /dev/null +++ b/src/components/layout/Box.astro @@ -0,0 +1,3 @@ +
+ +
diff --git a/src/components/layout/Header.astro b/src/components/layout/Header.astro new file mode 100644 index 0000000..6ff0408 --- /dev/null +++ b/src/components/layout/Header.astro @@ -0,0 +1,5 @@ +
+ +
diff --git a/src/components/layout/HeaderContent.astro b/src/components/layout/HeaderContent.astro new file mode 100644 index 0000000..4cb4344 --- /dev/null +++ b/src/components/layout/HeaderContent.astro @@ -0,0 +1,18 @@ +--- +import { styles } from "../../lib/theme" + +interface Props { + section?: string + title?: string +} + +const { title, section } = Astro.props +--- + +
+
+ {section &&

{section}

} + {title &&

{title}

} + +
+
diff --git a/src/components/layout/HeaderMeta.astro b/src/components/layout/HeaderMeta.astro new file mode 100644 index 0000000..9d6cfa6 --- /dev/null +++ b/src/components/layout/HeaderMeta.astro @@ -0,0 +1,38 @@ +--- +import { styles } from "../../lib/theme" + +type MetaItem = { label: string; icon?: Promise } +interface Props { + items?: MetaItem[] +} + +const items = await Promise.all( + Astro.props.items + ? Astro.props.items.map(async (item) => { + return { + ...item, + icon: item.icon ? (await item.icon)?.default : undefined, + } + }) + : [] +) +--- + +
+
+ { + items?.map(({ label, icon }) => ( +
+ {icon && } + {label} +
+ )) + } +
+
diff --git a/src/components/layout/HeaderNav.astro b/src/components/layout/HeaderNav.astro new file mode 100644 index 0000000..bb0889c --- /dev/null +++ b/src/components/layout/HeaderNav.astro @@ -0,0 +1,53 @@ +--- +import { styles } from "../../lib/theme" +const currentRoute = new URL(Astro.request.url).pathname +type Link = { + label: string + href?: string +} + +interface Props { + /** The breadcrumb up to but excluding current page */ + breadcrumb?: Link[] + /** The current page or current and sibling pages/tabs */ + current: Link | Link[] +} +const { breadcrumb, current } = Astro.props +const tabs = Array.isArray(current) ? current : [current] +--- + +
+
+ { + breadcrumb?.map(({ label, href }) => ( + <> + 1 && "hidden sm:inline"]}> + {label} + + 1 && "hidden sm:inline"]}>/ + + )) + } + { + tabs.map(({ label, href }) => ( + <> + + {label} + + + )) + } +
+
diff --git a/src/components/layout/Main.astro b/src/components/layout/Main.astro new file mode 100644 index 0000000..71b91b1 --- /dev/null +++ b/src/components/layout/Main.astro @@ -0,0 +1,7 @@ +--- +import { styles } from "../../lib/theme" +--- + +
+ +
diff --git a/src/components/layout/MainNav.astro b/src/components/layout/MainNav.astro new file mode 100644 index 0000000..9955740 --- /dev/null +++ b/src/components/layout/MainNav.astro @@ -0,0 +1,58 @@ +--- +import { styles } from "../../lib/theme" +const currentRoute = new URL(Astro.request.url).pathname +const navLinks = [ + { href: "/dev/example", text: "Home" }, + { href: "/leaderboards/ranked_1v1", text: "Leaderboard" }, + { href: "/stats", text: "Stats" }, + { href: "/social", text: "Content" }, + { href: "/api", text: "API" }, + { href: "/tools", text: "Tools" }, + // { href: "/creators", text: "Creators" }, +] +--- + +
+ +
diff --git a/src/components/layout/Section.astro b/src/components/layout/Section.astro new file mode 100644 index 0000000..44f7ba9 --- /dev/null +++ b/src/components/layout/Section.astro @@ -0,0 +1,30 @@ +--- +import { styles } from "../../lib/theme" + +interface Props { + title?: string + description?: string +} +const { title, description } = Astro.props +const hasHeader = title || description || Astro.slots.header || Astro.slots.controls +--- + +
+ { + hasHeader && ( +
+
+ {title &&

{title}

} + {description &&

{description}

} + +
+
+ +
+
+ ) + } +
+ +
+
diff --git a/src/components/layout/Sidebar.astro b/src/components/layout/Sidebar.astro new file mode 100644 index 0000000..babf274 --- /dev/null +++ b/src/components/layout/Sidebar.astro @@ -0,0 +1,9 @@ +--- +import { styles } from "../../lib/theme" +--- + +
+ +
diff --git a/src/layouts/New.astro b/src/layouts/New.astro new file mode 100644 index 0000000..5611996 --- /dev/null +++ b/src/layouts/New.astro @@ -0,0 +1,15 @@ +--- +import Root from "./Root.astro" +import MainNav from "../components/layout/MainNav.astro" +export interface Props { + title: string +} + +const { title } = Astro.props +--- + + + + +
Footer
+ diff --git a/src/layouts/Root.astro b/src/layouts/Root.astro index eb74ce9..e43d144 100644 --- a/src/layouts/Root.astro +++ b/src/layouts/Root.astro @@ -21,5 +21,11 @@ const { title } = Astro.props + diff --git a/src/lib/theme.ts b/src/lib/theme.ts index c821110..1847e9b 100644 --- a/src/lib/theme.ts +++ b/src/lib/theme.ts @@ -1,4 +1,9 @@ export const styles = { + layout: { + containerPadding: `px-4 md:px-8`, + container: `mx-auto max-w-screen-xl`, + gap: `gap-4 md:gap-6`, + }, button: { base: `inline-flex items-center justify-center rounded-sm bg-gray-800/85 border border-gray-700 backdrop-blur-sm diff --git a/src/pages/dev/example.astro b/src/pages/dev/example.astro new file mode 100644 index 0000000..e06dec8 --- /dev/null +++ b/src/pages/dev/example.astro @@ -0,0 +1,65 @@ +--- +import Layout from "../../layouts/New.astro" +import Header from "../../components/layout/Header.astro" +import HeaderContent from "../../components/layout/HeaderContent.astro" +import HeaderMeta from "../../components/layout/HeaderMeta.astro" +import HeaderNav from "../../components/layout/HeaderNav.astro" +import Section from "../../components/layout/Section.astro" +import Main from "../../components/layout/Main.astro" +import Sidebar from "../../components/layout/Sidebar.astro" +import Box from "../../components/layout/Box.astro" +--- + + + { + /* The Main Navigation is contained within Layout, the main nav is semi-transparent overlayed on top of the header. + Ideally all pages have an header */ + } +
+ {/* The Header contains the main gradient/color used for tinting */} + + {/* Optional, for including breadcrumbs as well as a list of subpages/tabs that are available */} + + + {/* Very simple header, always. At most some visual and text and not too much UI */} + {/* Slot content can be used in plage of standard title */} + + + {/* Optional for 'stats' like last updated, last game data, user id, etc */} + +
+
+
+ + +
+ + + + +
+
+
+ +
+ + + +
+ diff --git a/src/pages/players/[id]-[username].astro b/src/pages/players/[id]-[username].astro index cd1c78c..408e2e5 100644 --- a/src/pages/players/[id]-[username].astro +++ b/src/pages/players/[id]-[username].astro @@ -47,10 +47,10 @@ const highestLeague = player?.leaderboard_entries?.reduce(
-
-
- {player.avatar_url ? {player.nickname} : <>} -

{player.nickname}

+
+
+ {player.avatar_url && {player.nickname}} +

{player.nickname}

diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 8924b81..d5d283f 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -26,6 +26,16 @@ module.exports = { 950: "#030303", }, }, + opacity: { + 1: "0.01", + 2: "0.02", + 3: "0.03", + 4: "0.04", + 6: "0.06", + 7: "0.07", + 8: "0.08", + 9: "0.09", + }, }, }, plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate"), require("@kobalte/tailwindcss")],