feat: ✨ AT-GENRAL: Implementt various adjustments for better configur…

…ation and usability.
Kene-Okoye · Mar 16, 2024 · e60a7fe · e60a7fe
1 parent 80df057
commit e60a7fe
Show file tree

Hide file tree

Showing 17 changed files with 144 additions and 75 deletions.
diff --git a/afrotreff-content-administration/schemaTypes/generalSchemas/category.ts b/afrotreff-content-administration/schemaTypes/generalSchemas/category.ts
@@ -17,6 +17,7 @@ export default {
           {title: 'News', value: 'news'},
           {title: 'Story', value: 'story'},
           {title: 'Interviews', value: 'interviews'},
+          {title: 'Life Style', value: 'lifeStyle'},
         ],
       },
     },

diff --git a/afrotreff-content-administration/schemaTypes/generalSchemas/post.ts b/afrotreff-content-administration/schemaTypes/generalSchemas/post.ts
@@ -71,7 +71,7 @@ export default {
               {title: 'News', value: 'news'},
               {title: 'Story', value: 'story'},
               {title: 'Interviews', value: 'interviews'},
-              {title: 'Biography', value: 'biography'},
+              {title: 'Lifestyle', value: 'lifestyle'},
             ],
           },
         },

diff --git a/afrotreff-content-administration/schemaTypes/pages/getInvolvedPage/getInvolvedPageDE.ts b/afrotreff-content-administration/schemaTypes/pages/getInvolvedPage/getInvolvedPageDE.ts
@@ -54,6 +54,11 @@ export default {
           title: 'Hero section heading text',
           type: 'string',
         },
+        {
+          name: 'heroSectionshortText',
+          title: 'Hero section Short text',
+          type: 'string',
+        },
         {
           name: 'payPalButtonText',
           title: 'PayPal button text',

diff --git a/afrotreff-content-administration/schemaTypes/pages/getInvolvedPage/getInvolvedPageEN.ts b/afrotreff-content-administration/schemaTypes/pages/getInvolvedPage/getInvolvedPageEN.ts
@@ -54,6 +54,11 @@ export default {
           title: 'Hero section heading text',
           type: 'string',
         },
+        {
+          name: 'heroSectionshortText',
+          title: 'Hero section Short text',
+          type: 'string',
+        },
         {
           name: 'payPalButtonText',
           title: 'PayPal button text',

diff --git a/public/locales/de/translation.json b/public/locales/de/translation.json
@@ -24,7 +24,7 @@
   "coming_soon": "Seite kommt demnächst",
   "coming_soon_elaboration_text": "Wir arbeiten derzeit an dieser Seite. Bleiben Sie dran für einige spannende Updates",
   "return_to_homepage": "Zurück zur Startseite",
-  "page_not_found": "404: Die von Ihnen angeforderte Seite konnte nicht gefunden werden.",
+  "page_not_found": "404: Die von Ihnen angeforderte Seite konnte nicht gefunden werden. 🦥",
 
   "date": "Datum:",
   "time": "Uhrzeit:",
@@ -39,8 +39,12 @@
   "story": "Geschichte",
   "news": "Nachrichten",
   "interviews": "Interviews",
-  "biography": "Biographie",
+  "lifestyle": "Lifestyle",
   "all": "Alle",
-  "category_not_available": "🤔 Upsie... Es gibt derzeit keine Beiträge für die von Ihnen gewählte Kategorie.",
-  "back_to_top": "nach oben"
+  "category_not_available": "🙈 Upsie... Es gibt derzeit keine Beiträge für die von Ihnen gewählte Kategorie.",
+  "back_to_top": "nach oben",
+  "by": "Von",
+  "in": "in",
+  "category": "Kategorie",
+  "find_out_more": "Mehr erfahren"
 }
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -24,7 +24,7 @@
   "coming_soon": "coming soon",
   "coming_soon_elaboration_text": "We‘re currently working on this page. Stay tuned for some exciting updates",
   "return_to_homepage": "Return to the home page",
-  "page_not_found": "404: The page you requested could not be found.",
+  "page_not_found": "404: The page you requested could not be found. 🦥",
 
   "date": "Date:",
   "time": "Time:",
@@ -39,8 +39,12 @@
   "story": "Story",
   "news": "News",
   "interviews": "Interviews",
-  "biography": "Biography",
+  "lifestyle": "Lifestyle",
   "all": "All",
-  "category_not_available": "🤔 Opsie... There are currently no posts for your selected category.",
-  "back_to_top": "Back to top"
+  "category_not_available": "🙈 Opsie... There are currently no posts for your selected category.",
+  "back_to_top": "Back to top",
+  "by": "By",
+  "in": "in",
+  "category": "category",
+  "find_out_more": "Find out more"
 }
diff --git a/src/components/header/TheHeader.module.css b/src/components/header/TheHeader.module.css
@@ -140,6 +140,11 @@ nav [aria-current='page'],
   inset-inline-end: 0; /* Logical property. Equivalent to right: 0; */
   width: 100%;
   visibility: visible;
+
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
 }
 
 @media (prefers-reduced-motion: no-preference) {

diff --git a/src/components/hero/HeroSection.module.css b/src/components/hero/HeroSection.module.css
@@ -14,7 +14,7 @@
 .hero--content {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-start: 5%;
+  inset-inline: 5%;
   -webkit-transform: translate(0%, -50%);
   -moz-transform: translate(0%, -50%);
   transform: translate(0%, -50%);

diff --git a/src/components/portableTextCustomComponent/PortableTextCustomComponentPrivacy.tsx b/src/components/portableTextCustomComponent/PortableTextCustomComponentPrivacy.tsx
@@ -13,8 +13,14 @@ export const componentsPrivacy: PortableTextComponents = {
     strong: ({ children }) => <strong className="portableTextPrivacy-strong">{children}</strong>,
   },
 
+  list: {
+    // Ex. 2: customizing common list types
+    bullet: ({ children }) => <ul className="portableTextPrivacy-ul">{children}</ul>,
+    number: ({ children }) => <ol className="portableTextPrivacy-ol">{children}</ol>,
+  },
+
   marks: {
-    // Render a custom `link` annotation
+    // Ex. 3: Render a custom `link` annotation
     link: ({ children, value }) => {
       const target = (value?.href || '').startsWith('http') ? '_blank' : undefined;
       return (

diff --git a/src/index.css b/src/index.css
@@ -165,6 +165,7 @@ a {
   color: inherit;
   text-decoration: none;
 }
+
 /* ----------------
   END - CSS reset
 ----------------- */
@@ -188,10 +189,14 @@ a {
   color: #681dbb;
 }
 
+.portableTextPrivacy-h1,
+.portableTextPrivacy-h2,
 .portableTextPrivacy-paragraph,
 .portableTextPrivacy-blockquote,
 .portableTextPrivacy-strong,
-.portableTextPrivacy-link {
+.portableTextPrivacy-link,
+.portableTextPrivacy-ol,
+.portableTextPrivacy-ul {
   margin-block-end: var(--spacing-sm);
 }
 
@@ -206,13 +211,13 @@ a {
 
 .portableTextPrivacy-h1 {
   line-height: 1;
-  margin-block: var(--spacing-sm);
+  padding: 0;
   font-size: var(--font-size-md);
 }
 
 .portableTextPrivacy-h2 {
   line-height: 1;
-  margin-block: var(--spacing-sm);
+  padding: 0;
   font-size: var(--font-size-sm);
 }
 

diff --git a/src/pages/blog/Blog.tsx b/src/pages/blog/Blog.tsx
@@ -13,7 +13,9 @@ import blogStyles from '@/pages/blog/Blog.module.css';
 import useFetchData from '@/hooks/useFetchData';
 import { queryPostType } from '@/pages/blog/types/blogTypes';
 
-const blogCategories = ['all', 'news', 'story', 'interviews', 'biography'];
+import { formatDate } from '@/utils/formatDate';
+
+const blogCategories = ['all', 'news', 'story', 'interviews', 'lifestyle'];
 
 const LANGUAGES: { [key: string]: string } = {
   en: 'english',
@@ -110,19 +112,25 @@ const Blog = () => {
 
               <div className={blogStyles['blog-container']}>
                 {post &&
-                  post.map(({ categories, title, briefIntro, slug, mainImage, _id }) => (
-                    <Fragment key={`${_id}-${Date.now()}-${Math.random()}`}>
-                      <BlogCard
-                        heading={title}
-                        category={t(`${categories[0]}`)}
-                        textContent={briefIntro}
-                        imageSrc={mainImage.url}
-                        imageAlt={''}
-                        buttonText={'Find out more'}
-                        path={slug.current}
-                      />
-                    </Fragment>
-                  ))}
+                  post.map(
+                    ({ categories, title, briefIntro, slug, mainImage, _id, publishedAt }) => (
+                      <Fragment key={`${_id}-${Date.now()}-${Math.random()}`}>
+                        <BlogCard
+                          heading={title}
+                          category={t(`${categories[0]}`)}
+                          datePublished={formatDate(
+                            publishedAt,
+                            currentLanguage === 'de' ? 'de-DE' : 'en-US',
+                          )}
+                          textContent={briefIntro}
+                          imageSrc={mainImage.url}
+                          imageAlt={''}
+                          buttonText={t('find_out_more')}
+                          path={slug.current}
+                        />
+                      </Fragment>
+                    ),
+                  )}
               </div>
 
               {post.length === 0 && (

diff --git a/src/pages/blog/BlogCard.tsx b/src/pages/blog/BlogCard.tsx
@@ -4,6 +4,7 @@ import LinkButton from '@/components/linkButton/LinkButton';
 type BlogCardProps = {
   heading: string;
   category: string;
+  datePublished?: string;
   textContent: string;
   imageSrc?: string;
   imageAlt?: string;
@@ -15,6 +16,7 @@ type BlogCardProps = {
 const BlogCard = ({
   heading,
   category,
+  datePublished,
   textContent,
   imageSrc,
   imageAlt,
@@ -24,7 +26,7 @@ const BlogCard = ({
 }: BlogCardProps) => {
   return (
     <>
-      <div className={blogCardStyles['blog-item']}>
+      <div className={blogCardStyles['blog-item']} aria-live="polite" aria-atomic="true">
         <div className={blogCardStyles['blog-item--image-wrapper']}>
           {/* //TODO: Reintergrate after pics with the perfect dimension are ontained from Francis */}
           <img
@@ -36,33 +38,24 @@ const BlogCard = ({
         </div>
         <div
           className={`${blogCardStyles['blog-item--text-wrapper']} ${
-            (category === 'News' ||
-              category === 'Nachrichten' ||
-              category === 'Biography' ||
-              category === 'Biographie') &&
+            (category === 'News' || category === 'Nachrichten' || category === 'Lifestyle') &&
             blogCardStyles['blog-item--text-wrapper-news']
           }`}
         >
           <div className={blogCardStyles['blog-item--header-category-wrapper']}>
             <h2 className={blogCardStyles['blog-item--heading']}>{heading}</h2>
             <p
               className={`${blogCardStyles['blog-item--category']} ${
-                (category === 'News' ||
-                  category === 'Nachrichten' ||
-                  category === 'biography' ||
-                  category === 'Biographie') &&
+                (category === 'News' || category === 'Nachrichten' || category === 'Lifestyle') &&
                 blogCardStyles['blog-item--category-news']
               }`}
             >
-              {category}
+              {category} - {datePublished}
             </p>
           </div>
           <div
             className={`${blogCardStyles['blog-item--text-button-wrapper']} ${
-              (category === 'Story' ||
-                category === 'Geschichte' ||
-                category === 'Interviews' ||
-                category === 'Interviews') &&
+              (category === 'Story' || category === 'Geschichte' || category === 'Interviews') &&
               blogCardStyles['blog-item--text-button-wrapper-story']
             }`}
           >

diff --git a/src/pages/blog/blogPost/BlogPost.module.css b/src/pages/blog/blogPost/BlogPost.module.css
@@ -36,3 +36,9 @@
 .blog-post__article-content {
   margin-block-end: var(--spacing-sm);
 }
+
+.blog-post__article-meta-data-author {
+  padding-block-end: var(--spacing-md);
+  font-style: italic;
+  color: var(--carnaby-tan-color);
+}
diff --git a/src/pages/blog/blogPost/BlogPost.tsx b/src/pages/blog/blogPost/BlogPost.tsx
@@ -1,19 +1,25 @@
 import { Fragment, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { PortableText } from '@portabletext/react';
 
 import { PostType } from '@/pages/blog/types/blogTypes';
+import { LanguageType } from '@/routes/types/languageType';
 
 import PageLoading from '@/pages/pageLoading/PageLoading';
 import { components } from '@/components/portableTextCustomComponent/PortableTextCustomComponent';
 
 import blogPostStyles from '@/pages/blog/blogPost/BlogPost.module.css';
 
 import useFetchData from '@/hooks/useFetchData';
+import { formatDate } from '@/utils/formatDate';
 
 const BlogPost = () => {
   const navigate = useNavigate();
   const params = useParams();
+  const { i18n, t } = useTranslation();
+
+  const currentLanguage: LanguageType = i18n.resolvedLanguage as LanguageType;
 
   const slug = params.blogId;
 
@@ -51,7 +57,7 @@ const BlogPost = () => {
   return (
     <section className={blogPostStyles['blog-post__container']}>
       {data &&
-        data.map(({ slug, title, body, mainImage }) => (
+        data.map(({ slug, title, body, mainImage, author, categories, publishedAt }) => (
           <Fragment key={slug.current}>
             <div
               className={blogPostStyles['blog-post__background']}
@@ -64,6 +70,12 @@ const BlogPost = () => {
               <article className={blogPostStyles['blog-post__article']}>
                 <h1 className={blogPostStyles['blog-post__article-heading']}>{title}</h1>
 
+                <p className={blogPostStyles['blog-post__article-meta-data-author']}>
+                  {t('by')} {author.name} -{' '}
+                  {formatDate(publishedAt, currentLanguage === 'de' ? 'de-DE' : 'en-US')} {t('in')}{' '}
+                  {categories}
+                </p>
+
                 <PortableText value={body} components={components} />
               </article>
             </div>