From e1d3cf99c84df3c62343ae20815b6c2553568c01 Mon Sep 17 00:00:00 2001
From: Roman Ponomarev <maksugr@gmail.com>
Date: Fri, 12 Jul 2024 17:15:36 +0200
Subject: [PATCH] Add some UI improvements

---
 share/constants/word.ts                   |  2 ++
 share/utils/words.ts                      |  5 +++++
 src/app/toc/page.tsx                      | 10 ++++++++--
 src/components-client/MoreWords/index.tsx |  2 +-
 src/components-server/Footer/index.tsx    |  2 +-
 src/components-server/Layout/index.tsx    |  2 +-
 src/components-server/Word/index.tsx      |  7 ++++++-
 7 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/share/constants/word.ts b/share/constants/word.ts
index 3523f1d..fd87979 100644
--- a/share/constants/word.ts
+++ b/share/constants/word.ts
@@ -1,3 +1,5 @@
 export const WORDS_PER_PAGE = 10;
 export const WORDS_FOLDER_NAME = 'words';
 export const WORDS_FILE_EXTENSION = 'mdx';
+
+export const TOO_LONG_WORDS = ['handschuhschneeballwerfer'];
diff --git a/share/utils/words.ts b/share/utils/words.ts
index 5c5864c..9878c6a 100644
--- a/share/utils/words.ts
+++ b/share/utils/words.ts
@@ -5,6 +5,7 @@ import { CompileMDXResult, compileMDX } from 'next-mdx-remote/rsc';
 import { notFound } from 'next/navigation';
 
 import {
+    TOO_LONG_WORDS,
     WORDS_FILE_EXTENSION,
     WORDS_FOLDER_NAME,
     WORDS_PER_PAGE,
@@ -135,6 +136,10 @@ export const compileWordMarkdown = async (
     });
 };
 
+export const isTooLongWord = (word: string): boolean => {
+    return TOO_LONG_WORDS.includes(word.toLowerCase());
+};
+
 const removeWordFileExtension = (wordFileName: string): string => {
     return wordFileName.split(`.${WORDS_FILE_EXTENSION}`)[0];
 };
diff --git a/src/app/toc/page.tsx b/src/app/toc/page.tsx
index 5e1db7b..3aef5d3 100644
--- a/src/app/toc/page.tsx
+++ b/src/app/toc/page.tsx
@@ -2,7 +2,7 @@ import { Metadata } from 'next';
 import Link from 'next/link';
 
 import { METADATA } from '../../../share/constants/metadata';
-import { getAllWords } from '../../../share/utils/words';
+import { getAllWords, isTooLongWord } from '../../../share/utils/words';
 import { sortGermanWordsByTitle } from '../../../share/utils/sorts';
 import { IWord } from '../../../share/interfaces/words';
 import { RouteEnum } from '../../../share/enums/route';
@@ -38,7 +38,13 @@ export default async function TOCPage() {
                                     <Link
                                         href={`/${RouteEnum.WORDS}/${word.slug}`}
                                         key={word.frontmatter.title}
-                                        className="font-thunder text-5xl text-main-white outfit hyphens-auto"
+                                        className={`font-thunder text-5xl text-main-white mb-6 hyphens-auto ${
+                                            isTooLongWord(
+                                                word.frontmatter.title
+                                            )
+                                                ? 'break-all'
+                                                : ''
+                                        }`}
                                     >
                                         {word.frontmatter.title}
                                     </Link>
diff --git a/src/components-client/MoreWords/index.tsx b/src/components-client/MoreWords/index.tsx
index 9eb66d3..ffaf10e 100644
--- a/src/components-client/MoreWords/index.tsx
+++ b/src/components-client/MoreWords/index.tsx
@@ -35,7 +35,7 @@ export const MoreWords: React.FC<IMoreWordsProps> = ({ getMore }) => {
                 }}
                 hasMore={!isEnd}
                 loader={
-                    <div className="flex justify-center">
+                    <div className="flex justify-center" key={0}>
                         <Loader color={ColorEnum.MAIN_WHITE} />
                     </div>
                 }
diff --git a/src/components-server/Footer/index.tsx b/src/components-server/Footer/index.tsx
index 7a8c1bc..2ef572c 100644
--- a/src/components-server/Footer/index.tsx
+++ b/src/components-server/Footer/index.tsx
@@ -2,7 +2,7 @@ import { Links } from '../Links';
 
 export const Footer = () => {
     return (
-        <footer className="w-full mt-auto border-t-4 border-main-white p-10">
+        <footer className="w-full mt-auto border-t-4 border-main-white p-6 md:p-10">
             <Links />
         </footer>
     );
diff --git a/src/components-server/Layout/index.tsx b/src/components-server/Layout/index.tsx
index a0466b8..a4c8cdb 100644
--- a/src/components-server/Layout/index.tsx
+++ b/src/components-server/Layout/index.tsx
@@ -7,7 +7,7 @@ export const Layout: React.FC<ILayoutProps> = ({ children }) => {
     return (
         <>
             <Header />
-            <main className="flex flex-col w-full p-10">{children}</main>
+            <main className="flex flex-col w-full p-6 md:p-10">{children}</main>
             <Footer />
         </>
     );
diff --git a/src/components-server/Word/index.tsx b/src/components-server/Word/index.tsx
index 80c9333..1e19dc8 100644
--- a/src/components-server/Word/index.tsx
+++ b/src/components-server/Word/index.tsx
@@ -4,6 +4,7 @@ import { RouteEnum } from '../../../share/enums/route';
 import { dayjs } from '../../../share//utils/dayjs';
 import {
     getRelativeLinkText,
+    isTooLongWord,
     wordNameToSlug,
 } from '../../../share/utils/words';
 import {
@@ -20,7 +21,11 @@ export const Word: React.FC<IWordProps> = async ({ word }) => {
     return (
         <section className="font-thunder bg-main-white border-4 border-main-white rounded-lg p-6">
             <section className="flex flex-col justify-between items-start gap-4 mdx-content">
-                <h1 className="outfit text-8xl hyphens-auto">
+                <h1
+                    className={`text-8xl hyphens-auto ${
+                        isTooLongWord(frontmatter.title) ? 'break-all' : ''
+                    }`}
+                >
                     <Link href={`/${RouteEnum.WORDS}/${slug}`}>
                         {frontmatter.title}
                     </Link>