refactor/improved favicon (#30)

* refactor: improved favicon * refactor: improved info box * fix: background color * chore: extracted utils
sirLisko · Oct 7, 2024 · 82f43ea · 82f43ea
1 parent 005978d
commit 82f43ea
Show file tree

Hide file tree

Showing 39 changed files with 741 additions and 136 deletions.
diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
@@ -6,6 +6,12 @@ body {
   background-color: #3b82f6;
 }
 
+@layer components {
+  .background {
+    @apply main-c min-h-screen sm:bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex flex-col items-center justify-center p-6 text-white;
+  }
+}
+
 @keyframes shake {
 
   0%,

diff --git a/components/Head/Favicons.tsx b/components/Head/Favicons.tsx
@@ -3,68 +3,12 @@ import Head from "next/head";
 
 const Favicons = () => (
   <Head>
-    <link
-      rel="apple-touch-icon"
-      sizes="57x57"
-      href="/apple-touch-icon-57x57.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="114x114"
-      href="/apple-touch-icon-114x114.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="72x72"
-      href="/apple-touch-icon-72x72.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="144x144"
-      href="/apple-touch-icon-144x144.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="60x60"
-      href="/apple-touch-icon-60x60.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="120x120"
-      href="/apple-touch-icon-120x120.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="76x76"
-      href="/apple-touch-icon-76x76.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="152x152"
-      href="/apple-touch-icon-152x152.png"
-    />
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="/apple-touch-icon-180x180.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="/favicon-192x192.png"
-      sizes="192x192"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      href="/favicon-160x160.png"
-      sizes="160x160"
-    />
-    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
-    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
-    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
-    <meta name="msapplication-TileColor" content="#5bc0de" />
-    <meta name="msapplication-TileImage" content="/mstile-144x144.png" />
+    <link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="GigPlaylist" />
+    <link rel="manifest" href="/site.webmanifest" />
   </Head>
 );
 

diff --git a/components/Result/Result.tsx b/components/Result/Result.tsx
@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Link from "next/link";
 import { ArrowLeft, Frown, TriangleAlert } from "lucide-react";
-import duration from "humanize-duration";
 
 import Events from "components/Events/Events";
 import Tracks from "components/Tracks/Tracks";
@@ -13,55 +12,16 @@ import { useTracks } from "services/tracks";
 import { useEvents } from "services/events";
 import { useGetArtist } from "services/searchArtist";
 import { matchSongs } from "utils/matchSongs";
-import type { Link as LinkType, SetList } from "types";
+import {
+  calculatePlaylistDuration,
+  generateEncoreLabel,
+  sanitiseDate,
+} from "utils/labels";
 
 interface Props {
   artistQuery: string[];
 }
 
-const sanitiseDate = (dateString: string) => {
-  if (!dateString) return null;
-  const [day, month, year] = dateString.split("-");
-  return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-};
-
-const calculatePlaylistDuration = (songs: LinkType[]) => {
-  if (!songs.length) return 0;
-  return duration(
-    songs.reduce((acc, song) => acc + song.duration_ms, 0),
-    { round: true, largest: 2 },
-  );
-};
-
-const generateEncoreLabel = (data: SetList) => {
-  const totalSetLists = data.totalSetLists;
-  const encores = data.encores;
-  console.log(encores);
-
-  if (!encores || !Object.keys(encores).length) return null;
-
-  const ordinalSuffix = (n: string) => {
-    const suffixes = ["th", "st", "nd", "rd"];
-    const v = parseInt(n) % 100;
-    return n + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]);
-  };
-
-  const encoreEntries = Object.entries(encores);
-
-  const encoreLabels = encoreEntries.map(([encoreNumber, count]) => {
-    const probability = ((count / totalSetLists) * 100).toFixed(0);
-    return Object.entries(encoreEntries).length > 1
-      ? `${ordinalSuffix(encoreNumber)} ${probability}%`
-      : `${probability}%`;
-  });
-
-  return (
-    <>
-      <strong>Encore probability</strong>: {encoreLabels.join(", ")}
-    </>
-  );
-};
-
 const Result = ({ artistQuery }: Props) => {
   const [initialBaground] = useState<string>(document.body.style.background);
   const { artistData, isLoading: isLoadingArtist } = useArtistData(
@@ -163,18 +123,18 @@ const Result = ({ artistQuery }: Props) => {
             {songs && songs.length > 0 ? (
               <>
                 <div className="bg-black bg-opacity-30 rounded-lg p-4 mb-6">
-                  <h2 className="text-xl font-semibold mb-2">Playlist Info</h2>
                   <p>
-                    Based on <strong>{data.totalTracks} songs</strong> from the
-                    last <strong>{data.totalSetLists} concerts</strong> (
+                    Generated from <strong>{data.totalTracks} songs</strong>{" "}
+                    across <strong>{data.totalSetLists} recent concerts</strong>{" "}
+                    (
                     {sanitiseDate(data.from)?.toLocaleDateString(undefined, {
                       year: "numeric",
-                      month: "long",
+                      month: "short",
                     })}{" "}
                     to{" "}
                     {sanitiseDate(data.to)?.toLocaleDateString(undefined, {
                       year: "numeric",
-                      month: "long",
+                      month: "short",
                     })}
                     )
                   </p>
@@ -184,14 +144,15 @@ const Result = ({ artistQuery }: Props) => {
                   </p>
                   <p>{encoreLabel ? <p>{encoreLabel}</p> : null}</p>
                   <p className="mt-2">
-                    <strong>{songs.length} songs</strong>{" "}
-                    {playlistDuration ? (
-                      <>
-                        • Estimated playtime:{" "}
-                        <strong>{playlistDuration}</strong>
-                      </>
-                    ) : null}
+                    <strong>{songs.length}</strong> most likely songs to be
+                    played, based on performance frequency
                   </p>
+
+                  {playlistDuration ? (
+                    <p>
+                      Estimated playtime: <strong>{playlistDuration}</strong>
+                    </p>
+                  ) : null}
                 </div>
                 <SavePlaylist artistData={artistData} songs={songs} />
               </>

diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "axios": "^1.7.7",
     "classnames": "^2.5.1",
+    "cssnano": "^7.0.6",
     "humanize-duration": "^3.32.1",
     "jsonpath-plus": "^9.0.0",
     "lucide-react": "^0.445.0",

diff --git a/pages/[...artist].tsx b/pages/[...artist].tsx
@@ -20,9 +20,8 @@ const ResultPage = () => {
 
   return (
     <main
-      className={classNames("min-h-screen", {
-        "main-c bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex flex-col items-center justify-center p-6 text-white":
-          showAlternate,
+      className={classNames({
+        background: showAlternate,
       })}
     >
       <Head />

diff --git a/pages/auth.tsx b/pages/auth.tsx
@@ -39,7 +39,7 @@ const Home = () => {
     }
   }, [isReady]);
   return (
-    <main className="main-c min-h-screen bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex flex-col items-center justify-center p-6 text-white">
+    <main className="background">
       <Head />
       {query.error ? (
         <div className="flex flex-col items-center">

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -7,7 +7,7 @@ import Footer from "components/Footer/Footer";
 
 const Home = () => {
   return (
-    <main className="main-c min-h-screen sm:bg-gradient-to-br from-green-400 via-blue-500 to-purple-600 flex flex-col items-center justify-center p-6 text-white">
+    <main className="background">
       <Head />
       <h1 className="text-4xl font-bold mb-8 text-center">
         Prepare the playlist for your next gig!