add structured randomized titles + make hero title wider + add final randomized titles in lang files

Co-authored-by: William Oldham <github@binaryoverload.co.uk>

src/assets/locales/en.json

@@ -218,9 +218,18 @@
       "stopEditing": "Stop editing"
     },
     "titles": {
-      "morning": ["Morning title"],
+      "morning": {
-      "day": ["Day title"],
+        "default": "What would you like to watch this morning?",
-      "night": ["Night title"]
+        "extra": ["I hear Before Sunrise is good"]
+      },
+      "day": {
+        "default": "What would you like to watch this afternoon?",
+        "extra": []
+      },
+      "night": {
+        "default": "What would you like to watch tonight?",
+        "extra": ["Tired? I hear The Excorcist is good."]
+      }
     },
     "search": {
       "loading": "Loading...",

src/hooks/useRandomTranslation.ts

@@ -1,19 +1,26 @@
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
+// 10% chance of getting a joke title
+const shouldGiveJokeTitle = () => Math.floor(Math.random() * 10) === 0;
+
 export function useRandomTranslation() {
   const { t } = useTranslation();
   const seed = useMemo(() => Math.random(), []);
 
   const getRandomTranslation = useCallback(
-    (key: string) => {
+    (key: string): string => {
-      const res = t(key, { returnObjects: true });
+      const shouldRandom = shouldGiveJokeTitle();
+      const defaultTitle = t(`${key}.default`) ?? "";
+      if (!shouldRandom) return defaultTitle;
 
-      if (Array.isArray(res)) {
+      const keys = t(`${key}.extra`, { returnObjects: true });
-        return res[Math.floor(seed * res.length)];
+      if (Array.isArray(keys)) {
+        if (keys.length === 0) return defaultTitle;
+        return keys[Math.floor(seed * keys.length)];
       }
 
-      return res;
+      return typeof keys === "string" ? keys : defaultTitle;
     },
     [t, seed]
   );

src/pages/parts/home/HeroPart.tsx

@@ -41,7 +41,7 @@ export function HeroPart({ setIsSticky, searchParams }: HeroPartProps) {
     <ThinContainer>
       <div className="mt-44 space-y-16 text-center">
         <div className="relative z-10 mb-16">
-          <HeroTitle className="mx-auto max-w-xs">{title}</HeroTitle>
+          <HeroTitle className="mx-auto max-w-md">{title}</HeroTitle>
         </div>
         <div className="relative h-20 z-30">
           <Sticky