Merge pull request #8 from dalurness/jesse/update-styles-and-calendar

Update styles and calendar

scripts/favicon.sh

@@ -4,15 +4,23 @@ set -eu
 
 cd "$(dirname "$0")"
 
-cd ../public
+main() {
+    if ! command -v magick > /dev/null; then
+        echo "ImageMagick required but not found"
+        exit 1
+    fi
 
-for size in 16 32; do
-    magick convert \
-        -background none \
-        -resize "${size}x${size}" \
-        logo.svg "favicon-${size}.png"
-done
+    cd ../public
 
-magick convert favicon-*.png favicon.ico
+    for size in 16 32; do
+        magick convert \
+            -background none \
+            -resize "${size}x${size}" \
+            logo.svg "favicon-${size}.png"
+    done
 
-rm favicon-*.png
+    magick convert favicon-*.png favicon.ico
+    rm favicon-*.png
+}
+
+main

src/components/Button.tsx

@@ -12,7 +12,8 @@ export enum Size {
   large = "lg",
 }
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   color?: `${Color}`;
   size?: `${Size}`;
   pill?: boolean;
@@ -44,7 +45,7 @@ export function Button({
   );
 }
 
-interface LinkButtonProps
+export interface LinkButtonProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   color?: `${Color}`;
   size?: `${Size}`;
@@ -63,9 +64,9 @@ export function LinkButton({
     <Link
       {...nativeProps}
       className={twMerge(
-        "text-center",
+        "text-center !no-underline",
         pill ? "rounded-full" : "rounded-lg",
-        color === Color.dark && "bg-yeti-dark text-white hover:bg-yeti-dark-7",
+        color === Color.dark && "bg-yeti-dark !text-white hover:bg-yeti-dark-7",
         // color === Color.light && "", // TODO
         size === Size.small && "px-2 py-1 text-sm",
         size === Size.medium && "px-4 py-3 text-base",

src/components/Calendar.tsx

@@ -12,107 +12,124 @@ const titles = days.reduce(
   {} as Record<number, string>
 );
 
-const december = new Date();
-if (december.getMonth() === 0) {
-  // Use last year's December if it's January
-  december.setFullYear(december.getFullYear() - 1);
+const now = new Date();
+
+// Get December 1st. Use last year's December if it's January
+const december = new Date(
+  now.getFullYear() - (now.getMonth() === 0 ? 1 : 0),
+  11, // month is 0 indexed
+  1
+);
+
+// Get the day at the beginning of the week for the calendar display
+const beginningOfWeek = new Date(december);
+beginningOfWeek.setDate(1 - december.getDay());
+
+// All dates that will end up on the calendar
+const dates: Date[] = [];
+for (
+  const currentDate = new Date(beginningOfWeek);
+  !(currentDate.getMonth() === 0 && currentDate.getDay() === 0);
+  currentDate.setDate(currentDate.getDate() + 1)
+) {
+  dates.push(new Date(currentDate));
 }
-// set to 1st of December
-december.setMonth(11, 1);
-const decemberStartDayOfWeek = december.getDay();
 
-interface Props {
+const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+export interface CalendarProps {
   current: number;
   className?: string;
 }
 
-export function Calendar({ current, className }: Props) {
-  return (
-    <div
-      className={twMerge(
-        "grid grid-cols-3 md:grid-cols-7 w-full border-yeti-dark border-t border-l",
-        className
-      )}
-    >
-      {Array.from({ length: decemberStartDayOfWeek }, () => (
-        <div className="hidden md:block"></div> // Spacer for days before Dec 1
-      ))}
-      {Array.from({ length: 31 }, (_, i) => (
-        <GridDay day={1 + i} current={current} key={i} />
-      ))}
-    </div>
-  );
-}
-
-function GridDay({ day, current }: { day: number; current: number }) {
+export function Calendar({ current, className }: CalendarProps) {
   return (
-    <div className="border-yeti-dark border-b border-r">
-      <Link
-        href={`/day/${day}`}
+    <div className="flex flex-col items-center">
+      <div className="text-2xl font-bold mb-1">December</div>
+      <div
         className={twMerge(
-          "flex flex-col w-full h-full p-2 relative focus:z-10",
-          current < day && "bg-yeti-light-1 hover:bg-yeti-light-3",
-          current > day && "bg-yeti-dark-1 hover:bg-yeti-dark-3 text-white",
-          current === day && "bg-yeti-light-7 hover:bg-yeti-light-9"
+          "grid grid-cols-7 gap-px w-full bg-yeti-dark-3 border-yeti-dark-3 border rounded-lg",
+          className
         )}
       >
-        <span>{day}</span>
-        <div className="text-sm">{titles[day]}</div>
-        {current > day && (
-          <span className="absolute w-full h-px bg-yeti-dark-9 top-1/2 left-0 right-0 -rotate-45"></span>
-        )}
-      </Link>
-    </div>
-  );
-}
-
-/*
-function TableCalendar({ current, className }: Props) {
-  return (
-    <table className={twMerge("w-full table-fixed", className)}>
-      <tr>
-        {Array.from({ length: decemberStartDayOfWeek }, (_, i) => (
-          <td colSpan={1} key={i} className="w-[12.4%]"></td> // Spacer for days before Dec 1
-        ))}
-        {Array.from({ length: 7 - decemberStartDayOfWeek }, (_, i) => (
-          <TableDay day={1 + i} current={current} key={i} />
-        ))}
-      </tr>
-      <tr>
-        {Array.from({ length: 7 }, (_, i) => (
-          <TableDay
-            day={7 - decemberStartDayOfWeek + 1 + i}
-            current={current}
-            key={i}
-          />
+        {daysOfWeek.map((dow, i) => (
+          <span
+            key={dow}
+            className={twMerge(
+              "bg-yeti-light-9 text-center text-white py-1",
+              i === 0 && "rounded-tl-lg",
+              i === 6 && "rounded-tr-lg"
+            )}
+          >
+            {dow[0]}
+            <span className="hidden md:inline">{dow.slice(1)}</span>
+          </span>
         ))}
-      </tr>
-    </table>
+
+        {dates.map((date, i) => {
+          const day = date.getDate();
+
+          if (date.getMonth() !== 11) {
+            return (
+              <div
+                key={yyyymmdd(date)}
+                className={twMerge(
+                  "flex flex-col w-full h-full px-3 py-2 bg-white/70",
+                  i === dates.length - 1 && "rounded-br-lg"
+                )}
+              >
+                <time
+                  dateTime={yyyymmdd(date)}
+                  title={date.toLocaleDateString()}
+                >
+                  {day}
+                </time>
+              </div>
+            );
+          }
+
+          return (
+            <Link
+              key={yyyymmdd(date)}
+              href={`/day/${day}`}
+              className={twMerge(
+                "flex flex-col items-start w-full h-full px-3 py-2 relative focus:z-10 !text-yeti-dark !no-underline",
+                current <= day && "bg-white hover:bg-yeti-light-1",
+                current > day &&
+                  "bg-yeti-dark-1 hover:bg-yeti-dark-3 !text-white",
+                i === dates.length - 7 && "rounded-bl-lg",
+                i === dates.length - 1 && "rounded-br-lg"
+              )}
+            >
+              <time
+                dateTime={yyyymmdd(date)}
+                title={date.toLocaleDateString()}
+                className={twMerge(
+                  current === day &&
+                    "bg-yeti-light aspect-square text-center rounded-full"
+                )}
+              >
+                {day}
+              </time>
+              {day in titles && (
+                <div className="text-sm mt-2 hidden md:block">
+                  {titles[day]}
+                </div>
+              )}
+              {current > day && (
+                <span className="absolute w-full h-px bg-yeti-dark top-1/2 left-0 right-0 -rotate-45"></span>
+              )}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
   );
 }
 
-function TableDay({ day, current }: { day: number; current: number }) {
-  return (
-    <td colSpan={1} className="w-[12.4%] border border-yeti-dark p-0">
-      <a
-        href={BASE_URL + "day/" + day}
-        className={twMerge(
-          "flex flex-col w-full h-full p-2 relative", // border-yeti-dark border-b border-r",
-          // day <= 7 && "border-t",
-          // ((day - (7 - decemberStartDayOfWeek)) % 7 === 1 || day === 1) &&
-          //   "border-l",
-          current < day && "bg-yeti-light-1 hover:bg-yeti-light-3",
-          current > day && "bg-yeti-dark-1 hover:bg-yeti-dark-3 text-white",
-          current === day && "bg-yeti-light-7 hover:bg-yeti-light-9"
-        )}
-      >
-        <span>{day}</span>
-        <div className="text-sm">{titles[day]}</div>
-        {current > day && (
-          <span className="absolute w-full h-px bg-yeti-dark-9 top-1/2 left-0 right-0 -rotate-45"></span>
-        )}
-      </a>
-    </td>
-  );
+/**
+ * Format a date in YYYY-MM-DD format
+ */
+function yyyymmdd(date: Date): string {
+  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
 }
-*/

src/components/Link.tsx

@@ -1,7 +1,8 @@
 const { BASE_URL } = import.meta.env;
 const HAS_EXTENSION = /\.[0-9a-z]+$/i;
 
-interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   href: string;
 }
 export function Link({ href, children, ...nativeProps }: LinkProps) {

src/components/Navbar.tsx

@@ -4,33 +4,31 @@ import { Link } from "./Link";
 
 const { BASE_URL } = import.meta.env;
 
-interface Props {
+export interface NavbarProps {
   day: number;
 }
 
-export function Navbar({ day }: Props) {
+export function Navbar({ day }: NavbarProps) {
   return (
     <header className="bg-yeti-light-3 w-full">
-      <div
-        className="flex items-center gap-4 max-w-screen-lg w-full mx-auto px-4 md:px-6 py-3"
-      >
+      <div className="flex items-center gap-4 max-w-screen-lg w-full mx-auto px-4 md:px-6 py-3">
         <Link
           href="/"
-          className="flex justify-center items-center gap-2 font-bold text-2xl"
-        ><img src={BASE_URL + "logo.svg"} alt="Logo" className="w-10" />WCF</Link>
+          className="flex justify-center items-center gap-2 font-bold text-2xl !text-yeti-dark"
+        >
+          <img src={BASE_URL + "logo.svg"} alt="Logo" className="w-10" />
+          WCF
+        </Link>
         <details className="ml-auto group">
           <summary className="list-none hover:text-yeti-dark-7 cursor-pointer">
             <MdCalendarMonth size={32} className="group-open:hidden" />
             <MdEventBusy size={32} className="hidden group-open:block" />
 
             {/* fullscreen background element that you can click to close when it's open */}
-            <div className="fixed inset-0 bg-yeti-dark-3/50 hidden group-open:block">
-            </div>
+            <div className="fixed inset-0 bg-yeti-dark-3/50 hidden group-open:block"></div>
           </summary>
 
-          <nav
-            className="fixed right-0 left-0 md:left-auto z-10 flex flex-col bg-yeti-light-3 shadow-lg p-4 rounded-md md:rounded-r-none h-full w-screen md:max-w-screen-sm"
-          >
+          <nav className="fixed right-0 left-0 md:left-auto z-10 flex flex-col bg-yeti-light-3 shadow-lg p-4 md:px-8 rounded-md md:rounded-r-none h-full w-screen md:max-w-screen-md">
             <Calendar current={day} />
           </nav>
         </details>