text styling

coopsdev · Oct 1, 2024 · bfdaf75 · bfdaf75
1 parent 81a6ef5
commit bfdaf75
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 54 deletions.
diff --git a/src/app/_components/RichText/serialize.tsx b/src/app/_components/RichText/serialize.tsx
@@ -18,6 +18,7 @@ type Leaf = {
   }
   children?: Children
   url?: string
+  textAlign?: 'left' | 'center' | 'right'
   [key: string]: unknown
 }
 
@@ -61,27 +62,70 @@ const serialize = (children?: Children): React.ReactNode[] =>
       return null
     }
 
+    // Handle textAlign by applying it to block-level elements
+    const style = node.textAlign ? { textAlign: node.textAlign } : {}
+
     switch (node.type) {
       case 'h1':
-        return <h1 key={i}>{serialize(node?.children)}</h1>
+        return (
+          <h1 key={i} style={style}>
+            {serialize(node?.children)}
+          </h1>
+        )
       case 'h2':
-        return <h2 key={i}>{serialize(node?.children)}</h2>
+        return (
+          <h2 key={i} style={style}>
+            {serialize(node?.children)}
+          </h2>
+        )
       case 'h3':
-        return <h3 key={i}>{serialize(node?.children)}</h3>
+        return (
+          <h3 key={i} style={style}>
+            {serialize(node?.children)}
+          </h3>
+        )
       case 'h4':
-        return <h4 key={i}>{serialize(node?.children)}</h4>
+        return (
+          <h4 key={i} style={style}>
+            {serialize(node?.children)}
+          </h4>
+        )
       case 'h5':
-        return <h5 key={i}>{serialize(node?.children)}</h5>
+        return (
+          <h5 key={i} style={style}>
+            {serialize(node?.children)}
+          </h5>
+        )
       case 'h6':
-        return <h6 key={i}>{serialize(node?.children)}</h6>
+        return (
+          <h6 key={i} style={style}>
+            {serialize(node?.children)}
+          </h6>
+        )
       case 'quote':
-        return <blockquote key={i}>{serialize(node?.children)}</blockquote>
+        return (
+          <blockquote key={i} style={style}>
+            {serialize(node?.children)}
+          </blockquote>
+        )
       case 'ul':
-        return <ul key={i}>{serialize(node?.children)}</ul>
+        return (
+          <ul key={i} style={style}>
+            {serialize(node?.children)}
+          </ul>
+        )
       case 'ol':
-        return <ol key={i}>{serialize(node.children)}</ol>
+        return (
+          <ol key={i} style={style}>
+            {serialize(node.children)}
+          </ol>
+        )
       case 'li':
-        return <li key={i}>{serialize(node.children)}</li>
+        return (
+          <li key={i} style={style}>
+            {serialize(node.children)}
+          </li>
+        )
       case 'link':
         return (
           <CMSLink
@@ -98,12 +142,15 @@ const serialize = (children?: Children): React.ReactNode[] =>
       case 'label':
         return <Label key={i}>{serialize(node?.children)}</Label>
 
-      case 'large-body': {
+      case 'large-body':
         return <LargeBody key={i}>{serialize(node?.children)}</LargeBody>
-      }
 
       default:
-        return <p key={i}>{serialize(node?.children)}</p>
+        return (
+          <p key={i} style={style}>
+            {serialize(node?.children)}
+          </p>
+        )
     }
   }) || []
 

diff --git a/src/app/_heros/HighImpact/index.module.scss b/src/app/_heros/HighImpact/index.module.scss
@@ -3,7 +3,9 @@
 .hero {
   padding-top: calc(var(--base) * 2);
   overflow: hidden;
-  height: 400px;
+  height: fit-content;
+  min-height: 500px;
+  background-size: cover;
 
   @include mid-break {
     padding-top: var(--gutter-h);
@@ -22,32 +24,15 @@
   }
 }
 
-.media {
-  width: 100%;
-  margin-top: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  overflow: hidden;
-  height: fit-content;
-
-  @include mid-break {
-    left: 0;
-    margin-top: var(--base);
-    margin-left: calc(var(--gutter-h) * -1);
-    width: calc(100% + var(--gutter-h) * 2);
-  }
-}
-
 .links {
   list-style: none;
-  margin: 0;
   padding: 0;
   display: flex;
   padding-top: var(--base);
   flex-wrap: wrap;
   margin: calc(var(--base) * -.5);
+  margin-top: 20px;
+  margin-bottom: 20px;
   justify-content: center;
   text-shadow: none;
 
@@ -74,7 +59,7 @@
 .content {
   position: relative;
   text-align: center;
-  padding-bottom: 40px;
+  padding: 50px 0;
   text-shadow:
     rgba(0, 0, 0, 0.8) 2px 2px 8px,  /* Soft large shadow */
     rgba(0, 0, 0, 0.6) 4px 4px 4px;  /* More defined shadow closer to text */

diff --git a/src/app/_heros/HighImpact/index.tsx b/src/app/_heros/HighImpact/index.tsx
@@ -1,16 +1,16 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 
 import { Page } from '../../../payload/payload-types'
-import { Gutter } from '../../_components/Gutter'
 import { CMSLink } from '../../_components/Link'
-import { Media } from '../../_components/Media'
 import RichText from '../../_components/RichText'
 
 import classes from './index.module.scss'
 
 export const HighImpactHero: React.FC<Page['hero']> = ({ richText, media, links }) => {
+  if (typeof media === 'number') return <div>Failed to render image...</div>
+
   return (
-    <Gutter className={classes.hero}>
+    <div className={classes.hero} style={{ backgroundImage: `url(${process.env.NEXT_PUBLIC_SERVER_URL}/media/${media.filename})` }}>
       <div className={classes.content}>
         <RichText content={richText} />
         {Array.isArray(links) && links.length > 0 && (
@@ -26,19 +26,6 @@ export const HighImpactHero: React.FC<Page['hero']> = ({ richText, media, links
         )}
         <div className={classes.scrollDownArrow}>↓</div>
       </div>
-      <div className={classes.media}>
-        {typeof media === 'object' && (
-          <Fragment>
-            <Media
-              resource={media}
-              // fill
-              imgClassName={classes.image}
-              priority
-            />
-            {media?.caption && <RichText content={media.caption} className={classes.caption} />}
-          </Fragment>
-        )}
-      </div>
-    </Gutter>
+    </div>
   )
 }
diff --git a/src/payload/fields/richText/elements.ts b/src/payload/fields/richText/elements.ts
@@ -13,6 +13,7 @@ const elements: RichTextElement[] = [
   'link',
   largeBody,
   label,
+  'textAlign',
 ]
 
 export default elements
diff --git a/src/payload/payload-types.ts b/src/payload/payload-types.ts
@@ -482,8 +482,7 @@ export interface Reference {
   location?: string | null;
   rating: number;
   media?: number | Media | null;
-  review?: string | null;
-  richText: {
+  review: {
     [k: string]: unknown;
   }[];
   slug?: string | null;