blog tweaks (#40)

Author: enkoder

app/assets/lima.webp

@@ -24,7 +24,7 @@ module.exports = {
 	module: {
 		rules: [
 			{
-				test: /\.(png|jpg|jpeg)$/,
+				test: /\.(png|jpg|jpeg|webp)$/,
 				type: "asset/resource",
 			},
 			{

app/rspack.config.js

@@ -73,29 +73,36 @@ export const StackedAreaChart = <T extends ChartDataPoint>({
       <ResponsiveContainer>
         <LineChart
           data={chartData}
-          margin={{ top: 40, right: 120, bottom: 60, left: 80 }}
+          margin={{
+            top: 20,
+            right: 30,
+            bottom: 20,
+            left: 30,
+          }}
         >
           <CartesianGrid strokeDasharray="3 3" stroke={colors.gray[700]} />
           <XAxis
             dataKey={dateKey as string}
             tickFormatter={(date: Date) => dateFormatter(date)}
             stroke={colors.gray[400]}
             tick={{ fill: colors.gray[300] }}
+            interval="preserveStartEnd"
           />
           <YAxis
             tickFormatter={yAxisFormatter}
             stroke={colors.gray[400]}
             tick={{ fill: colors.gray[300] }}
+            width={35}
           />
           <Tooltip
             content={({ active, payload, label }) => {
               if (active && payload && payload.length) {
                 return (
-                  <div className="rounded-lg border border-gray-700 bg-gray-800 p-4 shadow-lg">
-                    <div className="mb-2 font-medium text-base text-gray-200">
+                  <div className="max-w-[250px] rounded-lg border border-gray-700 bg-gray-800 p-2 shadow-lg sm:max-w-none sm:p-4">
+                    <div className="mb-1 font-medium text-gray-200 text-sm sm:mb-2 sm:text-base">
                       {dateFormatter(label as Date)}
                     </div>
-                    <div className="space-y-2">
+                    <div className="space-y-1 sm:space-y-2">
                       {payload
                         .filter((entry) => entry.value !== 0)
                         .sort(
@@ -121,20 +128,20 @@ export const StackedAreaChart = <T extends ChartDataPoint>({
                               className="flex items-center justify-between"
                             >
                               <span
-                                className="pr-4 font-medium text-sm"
+                                className="pr-2 font-medium text-xs sm:pr-4 sm:text-sm"
                                 style={{ color: entry.color }}
                               >
                                 {seriesItem.label}
                               </span>
-                              <div className="flex items-center gap-2 text-sm">
+                              <div className="flex items-center gap-1 text-xs sm:gap-2 sm:text-sm">
                                 <span className="font-semibold text-gray-200">
                                   {typeof entry.value === "number"
                                     ? yAxisFormatter(entry.value)
                                     : entry.value}
                                 </span>
                                 {tournamentCount !== undefined &&
                                   tournamentCount > 0 && (
-                                    <span className="text-gray-400">
+                                    <span className="hidden text-gray-400 sm:inline">
                                       ({tournamentCount} tournament
                                       {tournamentCount !== 1 ? "s" : ""})
                                     </span>

app/src/components/Charts.tsx

@@ -15,3 +15,9 @@ declare module "*.svg" {
   const value: any;
   export = value;
 }
+
+declare module "*.webp" {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  const value: any;
+  export = value;
+}

app/src/global.d.ts

@@ -1,5 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import type { ReactNode } from "react";
+import LimaBeans from "../../../../assets/lima.webp";
 import type { RankingConfig } from "../../../client";
 import { LeaderboardService } from "../../../client/services/LeaderboardService";
 import { Link } from "../../../components/Link";
@@ -230,6 +231,19 @@ export const SeasonReflectionsPost: BlogPost = {
                 many beans. Resulting in the same issue observed in 2024 where
                 Worlds hands out too many beans.
               </p>
+              <Sep className="mt-4" />
+              <p>
+                If you look at the{" "}
+                <Link to="https://preview.beanstalk.pages.dev/blog/2024-season-reflections">
+                  preview environment chart
+                </Link>
+                , the shape of the chart (shown above) looks roughtly the same,
+                but the peaks are significantly lower. Notice the Y-axis scale
+                max is about 1/2 the amount of beans as the 2024 season. This
+                should give a better spread of beans across the season and
+                reduce the spikes in points. Expect each bean to matter even
+                more than last year.
+              </p>
             </>
           )}
         </Section>
@@ -269,7 +283,14 @@ export const SeasonReflectionsPost: BlogPost = {
         <Section title="Lima Beans">
           Last and certainly not least -- I am happy to announce that the new
           season is live! Introducing the name for the 2025 season...
-          <div className="flex justify-center">Lima</div>
+          <div className="my-4 flex justify-center">
+            <Link to="/?season=3&formatCode=standard" className="text-2xl">
+              Lima Beans
+            </Link>
+          </div>
+          <div className="my-4 flex w-full justify-center">
+            <img src={LimaBeans} alt="Lima Beans" className="h-64 w-64" />
+          </div>
         </Section>
       </BlogContent>
     );