Add some UI improvements

DasGuckloch · Jul 12, 2024 · e1d3cf9 · e1d3cf9
1 parent d6900b6
commit e1d3cf9
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>