feat(ca): expand catalan version to status pages

mari48073 · Jul 9, 2024 · 5929df6 · 5929df6
1 parent ae3e7f2
commit 5929df6
Show file tree

Hide file tree

Showing 11 changed files with 134 additions and 35 deletions.
diff --git a/app/ca/page.tsx b/app/ca/page.tsx
@@ -21,6 +21,7 @@ export default async function Home() {
               code={status.code}
               key={status.code}
               description={status.message}
+              t={t}
             />
           ))}
         </ThumbnailGrid>

diff --git a/app/ca/status/[status]/page.tsx b/app/ca/status/[status]/page.tsx
@@ -0,0 +1,81 @@
+import { Metadata } from 'next';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+import StatusDescription from '@/components/StatusDescription';
+
+import statuses from '@/lib/statuses';
+import { getStatusInfo } from '@/lib/status-info';
+import { getTranslations } from '@/lib/translation';
+
+export default async function Info({ params }: { params: { status: string } }) {
+  const statusObj = statuses[params.status as unknown as keyof typeof statuses];
+  const statusInfoHTML = await getStatusInfo(params.status);
+
+  const t = await getTranslations('ca');
+
+  return (
+    <>
+      <Header t={t} />
+      <main>
+        <nav>
+          <Link href="/ca" className="text-white">{`< ${t.BACK_TO_HOME}`}</Link>
+        </nav>
+
+        <h1 className="text-center my-12">
+          {statusObj.code} {statusObj.message}
+        </h1>
+
+        <div className="text-center">
+          <Image
+            src={`/images/${statusObj.code.toString()}.jpg`}
+            alt={statusObj.message}
+            width={750}
+            height={600}
+            className="w-full h-full max-w-3xl"
+          />
+        </div>
+        <section className="flex justify-center tracking-wider">
+          <StatusDescription>
+            <div dangerouslySetInnerHTML={{ __html: statusInfoHTML }} />
+          </StatusDescription>
+        </section>
+      </main>
+      <Footer t={t} />
+    </>
+  );
+}
+
+export function generateStaticParams() {
+  return Object.keys(statuses).map((status) => ({ status }));
+}
+
+export function generateMetadata({
+  params,
+}: {
+  params: { status: string };
+}): Metadata {
+  const statusObj = statuses[params.status as unknown as keyof typeof statuses];
+
+  return {
+    title: `${statusObj.code} ${statusObj.message} | HTTP Cats`,
+    description: `HTTP Cat for status ${statusObj.code} ${statusObj.message}`,
+    openGraph: {
+      title: `${statusObj.code} ${statusObj.message} | HTTP Cats`,
+      images: [
+        {
+          url: `https://http.cat/${statusObj.code}.jpg`,
+          alt: statusObj.message,
+        },
+      ],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      site: `https://http.cat/status/${statusObj.code}`,
+      title: `${statusObj.code} ${statusObj.message} | HTTP Cats`,
+      images: [`https://http.cat/${statusObj.code}`],
+    },
+  };
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -21,6 +21,7 @@ export default async function Home() {
               code={status.code}
               key={status.code}
               description={status.message}
+              t={t}
             />
           ))}
         </ThumbnailGrid>

diff --git a/app/status/[status]/page.tsx b/app/status/[status]/page.tsx
@@ -21,7 +21,7 @@ export default async function Info({ params }: { params: { status: string } }) {
       <Header t={t} />
       <main>
         <nav>
-          <Link href="/" className="text-white">{`< Back to home`}</Link>
+          <Link href="/" className="text-white">{`< ${t.BACK_TO_HOME}`}</Link>
         </nav>
 
         <h1 className="text-center my-12">

diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -10,14 +10,16 @@ import TwitterButton from '@/components/TwitterButton';
 import styles from './Footer.module.css';
 
 type FooterProps = {
-  t?: { [key: string]: string };
+  t: { [key: string]: string };
 };
 
-const Footer = ({ t }: { t: { [key: string]: string } }) => {
+const Footer = ({ t }: FooterProps) => {
   const pathname = usePathname();
 
   const isMainPage = pathname === '/';
 
+  const localeHref = t.LOCALE === 'ca' ? '/' : '/ca';
+
   return (
     <div className={styles.container}>
       <div className={styles.social}>
@@ -27,7 +29,7 @@ const Footer = ({ t }: { t: { [key: string]: string } }) => {
       </div>
 
       <nav>
-        <Link href="/ca">{t.LANGUAGE_LINK_TEXT}</Link>
+        <Link href={localeHref}>{t.LANGUAGE_LINK_TEXT}</Link>
       </nav>
 
       <p>

diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -1,13 +1,15 @@
 import Logo from '@/components/Logo';
 
 type HeaderProps = {
-  t?: { [key: string]: string };
+  t: { [key: string]: string };
 };
 
-const Header = ({ t }: { t: { [key: string]: string } }) => {
+const Header = ({ t }: HeaderProps) => {
+  const href = t.LOCALE === 'ca' ? '/ca' : '/';
+
   return (
     <header className="flex">
-      <a href="/" className="flex text-interactive no-underline">
+      <a href={href} className="flex text-interactive no-underline">
         <div className="pt-4">
           <Logo width={80} height={55} color="#d0383e" />
         </div>

diff --git a/components/StatusDescription/StatusDescription.tsx b/components/StatusDescription/StatusDescription.tsx
@@ -3,9 +3,7 @@ import Link from 'next/link';
 import styles from './StatusDescription.module.css';
 
 const StatusDescription = ({ children }: { children: React.ReactNode }) => (
-  <div className={styles.container + ' max-w-3xl'}>
-    {children}
-  </div>
+  <div className={styles.container + ' max-w-3xl'}>{children}</div>
 );
 
 export default StatusDescription;
diff --git a/components/Thumbnail/Thumbnail.tsx b/components/Thumbnail/Thumbnail.tsx
@@ -4,26 +4,36 @@ import Image from 'next/image';
 type ThumbnailProps = {
   code: number;
   description: string;
+  t: { [key: string]: string };
 };
 
-const Thumbnail = ({ code, description }: ThumbnailProps) => (
-  <div className="flex flex-col flex-grow h-full text-white overflow-hidden rounded shadow bg-[--interactive]">
-    <Link href={`/status/${code}`} className='text-white no-underline'>
-      <div className='pt-[56.25%] relative overflow-hidden'>
-        <Image
-          src={`/images/${code}.jpg`}
-          alt=""
-          loading='lazy'
-          fill
-          className="contrast-[70%] hover:contrast-100 transition duration-500 object-cover scale-[140%]"
-        />
-      </div>
-      <div className="flex flex-col px-4 pt-4">
-        <div className="text-[2rem] tracking-[2px] font-semibold uppercase">{code}</div>
-        <p className='font-semibold'>{description}</p>
-      </div>
-    </Link>
-  </div>
-);
+const Thumbnail = ({ code, description, t }: ThumbnailProps) => {
+  const hrefBase = t.LOCALE === 'ca' ? '/ca' : '';
+
+  return (
+    <div className="flex flex-col flex-grow h-full text-white overflow-hidden rounded shadow bg-[--interactive]">
+      <Link
+        href={`${hrefBase}/status/${code}`}
+        className="text-white no-underline"
+      >
+        <div className="pt-[56.25%] relative overflow-hidden">
+          <Image
+            src={`/images/${code}.jpg`}
+            alt=""
+            loading="lazy"
+            fill
+            className="contrast-[70%] hover:contrast-100 transition duration-500 object-cover scale-[140%]"
+          />
+        </div>
+        <div className="flex flex-col px-4 pt-4">
+          <div className="text-[2rem] tracking-[2px] font-semibold uppercase">
+            {code}
+          </div>
+          <p className="font-semibold">{description}</p>
+        </div>
+      </Link>
+    </div>
+  );
+};
 
 export default Thumbnail;
diff --git a/components/Usage/Usage.tsx b/components/Usage/Usage.tsx
@@ -7,10 +7,10 @@ import copyIcon from './copy.svg';
 import styles from './Usage.module.css';
 
 type UsageProps = {
-  t?: { [key: string]: string };
+  t: { [key: string]: string };
 };
 
-const Usage = ({ t }: { t: { [key: string]: string } }) => {
+const Usage = ({ t }: UsageProps) => {
   const [isValueCopied, setIsValueCopied] = useState(false);
   const [value, copy] = useCopyToClipboard();
 
@@ -34,7 +34,7 @@ const Usage = ({ t }: { t: { [key: string]: string } }) => {
             copy(usageValue);
             setIsValueCopied(true);
           }}
-          title="Copy to clipboard"
+          title={t.COPY_TO_CLIPBOARD}
         >
           {isValueCopied ? (
             t.COPIED

diff --git a/locales/ca/common.json b/locales/ca/common.json
@@ -1,12 +1,14 @@
 {
+  "LOCALE": "ca",
   "APP_TITLE": "HTTP Gats",
   "USAGE_TITLE": "Instruccions",
   "USAGE_PARAM": "codi_d_estat",
   "USAGE_NOTE_LABEL": "Nota",
   "USAGE_NOTE_TEXT": "Si necessiteu una extensió al final de l’URL només heu d’afegir",
-  "LANGUAGE_LINK_TEXT": "Versió Català",
+  "LANGUAGE_LINK_TEXT": "English Version",
   "DEVELOPED_BY": "Desenvolupat per",
   "IMAGES_BY": "Imatges de",
   "COPIED": "Copiat!",
-  "COPY_ICON_ALT_TEXT": "Icona que representa l'acció del porta-retalls"
+  "COPY_TO_CLIPBOARD": "Copiar al porta-retalls",
+  "BACK_TO_HOME": "Tornar a l'inici"
 }
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -1,4 +1,5 @@
 {
+  "LOCALE": "en",
   "APP_TITLE": "HTTP Cats",
   "USAGE_TITLE": "Usage",
   "USAGE_PARAM": "status_code",
@@ -8,5 +9,6 @@
   "DEVELOPED_BY": "Developed by",
   "IMAGES_BY": "Original Images by",
   "COPIED": "Copied!",
-  "COPY_ICON_ALT_TEXT": "Icon that represent the clipboard action"
+  "COPY_TO_CLIPBOARD": "Copy to clipboard",
+  "BACK_TO_HOME": "Back to home"
 }