feat: add view more section (#14)

* feat: add view more section * fix: formatting * fix: apple touch icon
AdsGames · Jan 5, 2023 · 859c88c · 859c88c · vercel · Jan 5, 2023
1 parent 771340e
commit 859c88c
Show file tree

Hide file tree

Showing 21 changed files with 237 additions and 86 deletions.
diff --git a/components/Layout.module.css b/components/Layout.module.css
@@ -0,0 +1,29 @@
+.content {
+  text-align: center;
+  margin: 20px auto;
+  padding: 10px;
+  max-width: 800px;
+  width: 100%;
+  background-color: #ffffff;
+  box-shadow: 0px 0px 20px 3px #ffffff;
+  border-radius: 8px;
+  box-sizing: border-box;
+}
+
+.link {
+  color: #ffffff;
+  text-align: center;
+  margin: 20px 0;
+}
+
+.link a {
+  color: #7777ff;
+}
+
+.header {
+  width: 100%;
+  height: auto;
+  padding: 10px 0;
+  display: flex;
+  justify-content: center;
+}
diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,6 +1,10 @@
 import Head from "next/head";
+import Image from "next/image";
 import Link from "next/link";
 
+import Logo from "../public/logo.webp";
+import styles from "./Layout.module.css";
+
 interface LayoutProps {
   title: string;
   description: string;
@@ -15,28 +19,38 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
     <Head>
       <title>{`${title} - Duke Nuke Says`}</title>
       <meta content={description} name="description" />
+
+      <meta content="Duke Nukem Says" property="og:site_name" />
+      <meta content={title} property="og:title" />
+      <meta content="website" property="og:type" />
+      <meta content="/logo.webp" property="og:image" />
+      <meta content={description} property="og:description" />
+
+      <link href="/icon.png" rel="shortcut icon" />
+      <link href="/icon.png" rel="apple-touch-icon" />
+      <link href="/favicon.png" rel="icon" />
+      <link href="/manifest.json" rel="manifest" />
+
+      <meta content="Allan Legemaate" name="author" />
+      <meta content="#000" name="theme-color" />
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
     </Head>
 
-    <div className="logo">
+    <header className={styles.header}>
       <Link href="/">
         <a>
-          <img
-            alt="Duke Nuke Says Logo"
-            height={100}
-            src="/logo.png"
-            width={300}
-          />
+          <Image alt="Duke Nuke Says Logo" height={79} src={Logo} width={300} />
         </a>
       </Link>
-    </div>
+    </header>
 
-    <div className="content">{children}</div>
+    <main className={styles.content}>{children}</main>
 
-    <div className="link">
+    <footer className={styles.link}>
       Created by a bored employee at{" "}
       <Link href="https://www.adsgames.net">
         <a>A.D.S. Games</a>
       </Link>
-    </div>
+    </footer>
   </>
 );
diff --git a/components/RandomSayings.module.css b/components/RandomSayings.module.css
@@ -0,0 +1,21 @@
+.list {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  padding: 0 10px;
+}
+
+.list_item {
+  list-style: none;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.title {
+  font-size: 20px;
+  text-align: center;
+  margin-bottom: 0;
+}
diff --git a/components/RandomSayings.tsx b/components/RandomSayings.tsx
@@ -0,0 +1,35 @@
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+import type { Saying } from "@/constants/sayings";
+import { randomSayings } from "@/lib/random-sayings";
+
+import styles from "./RandomSayings.module.css";
+
+export const RandomSayings = () => {
+  const [sayings, setSayings] = useState<Saying[]>([]);
+
+  useEffect(() => {
+    setSayings(randomSayings(4));
+  }, []);
+
+  return (
+    <section>
+      <h3 className={styles.title}>View More Quotes:</h3>
+      <ul className={styles.list}>
+        {sayings.map((saying) => (
+          <li className={styles.list_item} key={saying.id}>
+            <Link href={`/${saying.id}`}>
+              <a>{saying.text}</a>
+            </Link>
+          </li>
+        ))}
+        <li className={styles.list_item}>
+          <Link href="/">
+            <a>View All</a>
+          </Link>
+        </li>
+      </ul>
+    </section>
+  );
+};
diff --git a/constants/sayings.ts b/constants/sayings.ts
@@ -1,83 +1,88 @@
-export const SAYINGS = [
+export interface Saying {
+  id: string;
+  text: string;
+}
+
+export const SAYINGS: Readonly<Saying[]> = [
   {
     id: "abort",
-    text: "It's time to abort your whole friggin' species.",
+    text: "It's time to abort your whole friggin' species",
   },
   {
     id: "aliens",
-    text: "I'm Duke Nukem, and I'm coming to get the rest of you alien bastards.",
+    text: "I'm Duke Nukem, and I'm coming to get the rest of you alien bastards",
   },
   {
     id: "annoying",
-    text: "Damn, that was annoying.",
+    text: "Damn, that was annoying",
   },
   {
     id: "back_to_work",
-    text: "Get back to work, you slacker.",
+    text: "Get back to work, you slacker",
   },
   {
     id: "better",
-    text: "Ahhhh! Much better.",
+    text: "Ahhhh! Much better",
   },
   {
     id: "birth_control",
-    text: "You're an inspiration for birth control.",
+    text: "You're an inspiration for birth control",
   },
   {
     id: "bitchin",
-    text: "Bitchin'.",
+    text: "Bitchin'",
   },
   {
     id: "blow_it",
     text: "Blow it out your ass!",
   },
   {
     id: "book_em",
-    text: "Hmmm. Book 'em, Dan-o.",
+    text: "Hmmm... Book 'em, Dan-o",
   },
   {
     id: "captains_log",
     text: "Ha! The captain's log!",
   },
   {
     id: "clean_up",
-    text: "Looks like clean-up on aisle four.",
+    text: "Looks like clean-up on aisle four",
   },
   {
     id: "come_get_some",
     text: "Come get some!",
   },
   {
     id: "come_on",
-    text: "Come on.",
+    text: "Come on",
   },
   {
     id: "cry",
-    text: "I'm not cryin' over this.",
+    text: "I'm not cryin' over this",
   },
   {
     id: "cya_n_hell",
     text: "See you in hell",
   },
   {
     id: "damn",
-    text: "Damn.",
+    text: "Damn",
   },
   {
     id: "damn_it",
     text: "Damn it!",
   },
   {
     id: "freedom",
-    text: "I don't know who you are, where you're from, or what you want... but if you threaten my freedom, I'll kill you.",
+    text: "I don't know who you are, where you're from, or what you want... but if you threaten my freedom, I'll kill you",
   },
   {
     id: "game_over",
     text: "Game over!",
   },
   {
     id: "good",
-    text: "Damn, I'm good.",
+    text: "Damn, I'm good",
   },
   {
     id: "good_2",
@@ -93,75 +98,75 @@ export const SAYINGS = [
   },
   {
     id: "gotta_hurt",
-    text: "Ooo, that's gotta hurt.",
+    text: "Ooo, that's gotta hurt",
   },
   {
     id: "hail",
-    text: "Hail to the king, baby.",
+    text: "Hail to the king, baby",
   },
   {
     id: "hurts_to_be_you",
-    text: "It hurts to be you.",
+    text: "It hurts to be you",
   },
   {
     id: "independence",
     text: "Nobody jacks with our independence!",
   },
   {
     id: "let_god",
-    text: "Let God sort 'em out.",
+    text: "Let God sort 'em out",
   },
   {
     id: "lets_rock",
-    text: "Let's rock.",
+    text: "Let's rock",
   },
   {
     id: "make_day",
-    text: "Go ahead - make my day.",
+    text: "Go ahead - make my day",
   },
   {
     id: "medieval",
-    text: "I'm gonna get medieval on your asses.",
+    text: "I'm gonna get medieval on your asses",
   },
   {
     id: "mess",
     text: "Heh, heh, heh. What a mess!",
   },
   {
     id: "name",
-    text: "My name's Duke Nukem.",
+    text: "My name's Duke Nukem",
   },
   {
     id: "out_of_gum",
-    text: "It's time to kick ass and chew bubblegum... and I'm all outta gum.",
+    text: "It's time to kick ass and chew bubblegum... and I'm all outta gum",
   },
   {
     id: "payback_time",
     text: "Hmm-hmm-hmm! Payback time!",
   },
   {
     id: "pisses_me",
-    text: "This pisses me off.",
+    text: "This pisses me off",
   },
   {
     id: "play",
-    text: "Hmmm. Don't have time to play with myself.",
+    text: "Hmmm. Don't have time to play with myself",
   },
   {
     id: "ready_for_action",
-    text: "Ready for action.",
+    text: "Ready for action",
   },
   {
     id: "terminated",
     text: "Terminated!",
   },
   {
     id: "this_sucks",
-    text: "Oops. This sucks.",
+    text: "Oops. This sucks",
   },
   {
     id: "ugly",
-    text: "Damn! You're ugly.",
+    text: "Damn! You're ugly",
   },
   {
     id: "who_wants_some",
@@ -177,14 +182,14 @@ export const SAYINGS = [
   },
   {
     id: "you_suck",
-    text: "You suck.",
+    text: "You suck",
   },
   {
     id: "you_guys_suck",
     text: "You guys suck!",
   },
   {
     id: "you_will_die",
-    text: "You're gonna die for that.",
+    text: "You're gonna die for that",
   },
 ] as const;
diff --git a/lib/random-sayings.ts b/lib/random-sayings.ts
@@ -0,0 +1,21 @@
+import { SAYINGS } from "../constants/sayings";
+
+const shuffle = <T>(array: T[]): T[] => {
+  let currentIndex = array.length;
+  let randomIndex = 0;
+
+  while (currentIndex !== 0) {
+    randomIndex = Math.floor(Math.random() * currentIndex);
+    currentIndex--;
+
+    [array[currentIndex], array[randomIndex]] = [
+      array[randomIndex],
+      array[currentIndex],
+    ];
+  }
+
+  return array;
+};
+
+export const randomSayings = (count: number) =>
+  shuffle([...SAYINGS]).slice(0, count);