Merge pull request #61 from stormgateworld/refactore-layout

New Layout Components

src/components/Widget.astro

@@ -1,4 +1,6 @@
 ---
+import { styles } from "../lib/theme"
+
 export interface Props {
   title?: string
   label?: string
@@ -7,12 +9,12 @@ export interface Props {
 const { title, label } = Astro.props
 ---
 
-<div class="relative overflow-auto rounded-lg border border-gray-800/80 bg-gray-800/30 p-3 backdrop-blur-md sm:p-4">
+<div class:list={[styles.box.base, "relative overflow-auto p-3 sm:p-4"]}>
   <div class="sticky left-0 top-0 flex flex-wrap items-center gap-x-5 gap-y-1">
-    <h3 class="font-display flex-auto text-lg font-bold text-gray-200">
+    <h3 class="font-display flex-auto text-base font-bold text-gray-300">
       {title}
     </h3>
-    <p class="text-md font-bold text-gray-400">
+    <p class="text-sm font-bold text-gray-500">
       {label}
     </p>
   </div>

src/components/layout/Box.astro

@@ -0,0 +1,7 @@
+---
+import { styles } from "../../lib/theme"
+---
+
+<div class:list={[styles.box.base, "min-h-52"]}>
+  <slot />
+</div>

src/components/Footer.astro → src/components/layout/Footer.astro

@@ -2,7 +2,7 @@
 import Svg from "@jasikpark/astro-svg-loader"
 ---
 
-<footer class="mt-8 border-t border-white/10 p-4 md:p-6">
+<footer class="mt-4 border-t border-gray-900 py-32 text-center md:mt-8">
   <div class="mx-auto">
     <nav class="flex columns-2 flex-wrap justify-center gap-x-8 gap-y-2 pb-6 sm:space-x-12" aria-label="Footer">
       <a href="/api" class="text-sm leading-6 text-gray-100 hover:text-white">API</a>
@@ -32,7 +32,7 @@ import Svg from "@jasikpark/astro-svg-loader"
     <div class="flex flex-auto justify-center whitespace-nowrap text-gray-600 lg:flex-none lg:justify-end">
       <span>Made by</span>
       <a href="https://casuals.co" class="text-gray-500 hover:text-gray-300" target="_blank" rel="noopener">
-        <Svg src={import("../assets/thecasuals.svg?raw")} class="-mt-1 ml-1 inline-block h-4 fill-current" />
+        <Svg src={import("../../assets/thecasuals.svg?raw")} class="-mt-1 ml-1 inline-block h-4 fill-current" />
       </a>
     </div>
   </div>

src/components/layout/Header.astro

@@ -0,0 +1,32 @@
+---
+import type { ImageMetadata } from "astro"
+import { getImage } from "astro:assets"
+import HeaderContent from "./HeaderContent.astro"
+
+interface Props {
+  backdropImage?: string | ImageMetadata | null
+  title?: string
+  section?: string
+}
+
+const { backdropImage, section, title } = Astro.props
+const isUrl = typeof backdropImage === "string"
+const imageUrl = backdropImage ? (isUrl ? backdropImage : (await getImage(backdropImage)).src) : null
+---
+
+<div
+  class="relative -mt-20 border-b border-white/5 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 pt-20 [--tw-gradient-via-position:40%] md:-mt-16 md:pt-16"
+>
+  {
+    backdropImage && (
+      <div class="absolute inset-0 overflow-hidden">
+        <div
+          class="h-full w-full bg-cover bg-center opacity-40 mix-blend-lighten blur-3xl brightness-50 saturate-150"
+          style={`background-image: url(${imageUrl})`}
+        />
+      </div>
+    )
+  }
+  {(section || title) && <HeaderContent section={section} title={title} />}
+  <slot />
+</div>

src/components/layout/HeaderContent.astro

@@ -0,0 +1,34 @@
+---
+import { styles } from "../../lib/theme"
+
+interface Props {
+  section?: string
+  title?: string
+}
+
+const { title, section } = Astro.props
+---
+
+<div class:list={[styles.layout.container, styles.layout.containerPadding, "relative"]}>
+  <div class="flex items-center py-4">
+    {
+      Astro.slots.has("left") && (
+        <div>
+          <slot name="left" />
+        </div>
+      )
+    }
+    <div class="flex-auto py-4">
+      {section && <p class="text-base font-bold text-white/60">{section}</p>}
+      {title && <h1 class="text-xl font-black text-white/90 md:text-3xl">{title}</h1>}
+      <slot />
+    </div>
+    {
+      Astro.slots.has("right") && (
+        <div>
+          <slot name="right" />
+        </div>
+      )
+    }
+  </div>
+</div>

src/components/layout/HeaderMeta.astro

@@ -0,0 +1,38 @@
+---
+import { styles } from "../../lib/theme"
+
+type MetaItem = { label: string; icon?: Promise<typeof import("*.svg?raw")> }
+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,
+        }
+      })
+    : []
+)
+---
+
+<div class="bg-black/20">
+  <div
+    class:list={[
+      styles.layout.container,
+      styles.layout.containerPadding,
+      "flex flex-wrap items-center gap-y-4 gap-4 md:gap-8 py-4 mix-blend-lighten",
+    ]}
+  >
+    {
+      items?.map(({ label, icon }) => (
+        <div class="flex items-center gap-2">
+          {icon && <span class="text-white opacity-20  *:h-4 *:w-4 md:*:h-5 md:*:w-5" set:html={icon} />}
+          <span class="text-xs font-bold text-white/30 md:text-sm">{label}</span>
+        </div>
+      ))
+    }
+  </div>
+</div>

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]
+---
+
+<div class="scrollbar-hide overflow-x-auto border-b border-white/7 bg-white/3">
+  <div
+    class:list={[
+      styles.layout.container,
+      styles.layout.containerPadding,
+      "flex items-center gap-y-4 gap-4 sm:gap-8 py-2 font-extrabold text-xs md:text-sm whitespace-nowrap",
+    ]}
+  >
+    {
+      breadcrumb?.map(({ label, href }) => (
+        <>
+          <a href={href} class:list={["text-white/50", tabs.length > 1 && "hidden sm:inline"]}>
+            {label}
+          </a>
+          <span class:list={["text-white/35 w-2 -mx-2 text-center", tabs.length > 1 && "hidden sm:inline"]}>/</span>
+        </>
+      ))
+    }
+    {
+      tabs.map(({ label, href }) => (
+        <>
+          <a
+            href={href}
+            class:list={[
+              "text-xs md:text-sm font-bold",
+              href == currentRoute ? "text-white/90" : "text-white/50 hover:text-white/100",
+            ]}
+          >
+            {label}
+          </a>
+        </>
+      ))
+    }
+  </div>
+</div>

src/components/layout/Main.astro

@@ -0,0 +1,7 @@
+---
+import { styles } from "../../lib/theme"
+---
+
+<div class:list={["basis-3/4 flex flex-col", styles.layout.gap]}>
+  <slot />
+</div>

src/components/layout/MainNav.astro

@@ -0,0 +1,57 @@
+---
+import { styles } from "../../lib/theme"
+const currentRoute = new URL(Astro.request.url).pathname
+const navLinks = [
+  { 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" },
+]
+---
+
+<div
+  class="to-black-20 sticky top-0 z-10 h-20 w-full border-b border-white/5 bg-gradient-to-r from-black/40 via-black/25 mix-blend-screen backdrop-blur md:h-16"
+>
+  <nav
+    class:list={[
+      styles.layout.container,
+      "flex flex-wrap md:flex-nowrap items-center gap-y-2 py-2 md:min-h-16 md:py-4",
+    ]}
+  >
+    <a
+      href="/"
+      class:list={[
+        styles.layout.containerPadding,
+        "basis-full whitespace-nowrap md:pr-2 text-xl font-extrabold text-white/90 md:basis-auto ",
+      ]}
+    >
+      Stormgate World
+    </a>
+
+    <div
+      class:list={[
+        styles.layout.containerPadding,
+        "scrollbar-hide -ml-2 flex max-w-full flex-auto gap-1 gap-y-2 overflow-x-auto md:ml-0 md:gap-4 md:pr-7",
+      ]}
+    >
+      {
+        navLinks.map(({ href, text }) => (
+          <a
+            href={href}
+            class:list={[
+              "font-extrabold rounded px-2 text-sm md:text-base md:px-3 py-1 md:py-1.5",
+              currentRoute === href ? "bg-white/5 text-white/80" : "hover:bg-white/5 text-white/60 ",
+            ]}
+          >
+            {text}
+          </a>
+        ))
+      }
+
+      <div class="flex-auto"></div>
+      <div>{/*search etc */}</div>
+    </div>
+  </nav>
+</div>

src/components/layout/Section.astro

@@ -0,0 +1,31 @@
+---
+import { styles } from "../../lib/theme"
+
+interface Props {
+  title?: string
+  description?: string
+  class?: string
+}
+const { title, description, class: classes } = Astro.props
+const hasHeader = title || description || Astro.slots.header || Astro.slots.controls
+---
+
+<div class:list={[styles.layout.container, styles.layout.containerPadding, "pt-4 md:pt-6", classes]}>
+  {
+    hasHeader && (
+      <div class="my-4 flex justify-between gap-4 md:my-6">
+        <div class="flex-auto">
+          {title && <h2 class="text-2xl font-bold text-white">{title}</h2>}
+          {description && <p class="text-gray-400">{description}</p>}
+          <slot name="header" />
+        </div>
+        <div class="flex-none">
+          <slot name="controls" />
+        </div>
+      </div>
+    )
+  }
+  <div class:list={["flex flex-col lg:flex-row", styles.layout.gap]}>
+    <slot />
+  </div>
+</div>

src/components/layout/Sidebar.astro

@@ -0,0 +1,9 @@
+---
+import { styles } from "../../lib/theme"
+---
+
+<div
+  class:list={["flex md:grid grid-cols-2 only:*:[grid-column:span_2] basis-1/4 lg:flex flex-col", styles.layout.gap]}
+>
+  <slot />
+</div>

src/components/widgets/GameLengthChart.tsx

@@ -1,5 +1,4 @@
 // @ts-nocheck
-
 import { onMount } from "solid-js"
 import { Chart, Colors, Title, Tooltip, type ChartOptions, type ChartData } from "chart.js"
 import { Bar } from "solid-chartjs"
@@ -38,12 +37,12 @@ export function GameLengthChart(props: GameLengthProps) {
       {
         label: "Wins",
         data: wins,
-        backgroundColor: "#5EC269",
+        backgroundColor: "#4CA154",
       },
       {
         label: "Losses",
         data: losses,
-        backgroundColor: "#DD524C",
+        backgroundColor: "#CA3A31",
       },
     ],
   }

src/components/widgets/MatchPreview.astro

@@ -18,7 +18,7 @@ const mainPlayer = match.players.find((player) => player.player?.player_id === m
   <div
     class:list={[
       "size-6 text-sm ml-1 flex justify-center items-center rounded text-gray-800 font-extrabold uppercase",
-      mainPlayer.result === "win" ? "bg-green-500" : mainPlayer.result === "loss" ? "bg-red-500" : "bg-gray-500",
+      mainPlayer.result === "win" ? "bg-green-600" : mainPlayer.result === "loss" ? "bg-red-600" : "bg-gray-500",
     ]}
   >
     {mainPlayer.result === "win" ? "W" : mainPlayer.result === "loss" ? "L" : "-"}
@@ -33,7 +33,7 @@ const mainPlayer = match.players.find((player) => player.player?.player_id === m
             <span
               class:list={[
                 "w-8 flex-none text-xs whitespace-nowrap text-right",
-                player.mmr_diff! > 0 ? "text-green-500" : player.mmr_diff! < 0 ? "text-red-500" : "text-gray-500",
+                player.mmr_diff! > 0 ? "text-green-600" : player.mmr_diff! < 0 ? "text-red-600" : "text-gray-500",
               ]}
             >
               {player.mmr_diff! > 0 ? "↑" : "↓"}

src/components/widgets/PlayerActivity.astro

@@ -3,6 +3,8 @@ import type { PlayerActivityStats, PlayerResponse } from "../../lib/api"
 import Widget from "../Widget.astro"
 import { Tooltip } from "../ui/Tooltip"
 
+const WEEKS_DISPLAYED = 15
+
 interface Props {
   player: PlayerResponse
   activity: PlayerActivityStats
@@ -33,9 +35,13 @@ type Day = { date: Date; win_rate: number; games_count: number; size: number; to
 type Week = Day[]
 const today = new Date()
 // get the date of monday 12 weeks ago, fully including this week
-const start = new Date(today.getFullYear(), today.getMonth(), today.getDate() - today.getDay() - 11 * 7)
+const start = new Date(
+  today.getFullYear(),
+  today.getMonth(),
+  today.getDate() - today.getDay() - (WEEKS_DISPLAYED - 1) * 7
+)
 const weeks: Week[] = []
-for (let i = 0; i < 12; i++) {
+for (let i = 0; i < WEEKS_DISPLAYED; i++) {
   const week: Week = []
   for (let j = 0; j < 7; j++) {
     const date = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i * 7 + j)