Merge pull request #55 from MikeCheek/dev

Dev

locales/en/program.json

@@ -0,0 +1,6 @@
+{
+  "SEOTitle": "Program",
+  "SEODescription": "From August 09 to 11, 2024, immersed in a breathtaking location among the hills of Matera, with camping, workshops, conferences, and music festivals.",
+  "Title": "PROGRAM",
+  "Subtitle": "PERFORMANCES, TALKS, WORKSHOPS AND CAMPING"
+}

locales/it/program.json

@@ -0,0 +1,6 @@
+{
+  "SEOTitle": "Programma",
+  "SEODescription": "Dal 09 all' 11 Agosto 2024 immersi in una location mozzafiato, in mezzo alle colline materane, tra camping, laboratori, conferenze, e festival musicali",
+  "Title": "PROGRAMMA",
+  "Subtitle": "PERFORMANCE, TALK, WORKSHOP E CAMPING"
+}

src/components/atoms/Button/index.module.scss

@@ -21,6 +21,11 @@
   }
 }
 
+.buttonSimple {
+  @extend .button;
+  border: none;
+}
+
 .bigButton {
   @extend .button;
   font-size: 20px;

src/components/atoms/Button/index.tsx

@@ -12,40 +12,49 @@ const Index = ({
   internal = false,
   bigger = false,
   children,
+  simple = false,
 }: ButtonProps) => {
   const className = `${bigger ? styles.bigButton : styles.button} ${hoverWhite ? styles.hoverWhite : ''}`;
+  const classNameSimple = styles.buttonSimple;
   const style: React.CSSProperties = children ? { paddingRight: '40px' } : {};
+
+  const child = simple ? (
+    <>
+      {text}
+      {children}
+    </>
+  ) : (
+    <>
+      {text}
+      <span className={styles.span}></span>
+      <span className={styles.span}></span>
+      <span className={styles.span}></span>
+      <span className={styles.span}></span>
+      {children}
+    </>
+  );
+
   return (
     <>
       {onClick ? (
-        <button onClick={onClick} title={title} className={className} style={style}>
-          {text}
-          <span className={styles.span}></span>
-          <span className={styles.span}></span>
-          <span className={styles.span}></span>
-          <span className={styles.span}></span>
-          {children}
+        <button onClick={onClick} title={title} className={simple ? classNameSimple : className} style={style}>
+          {child}
         </button>
       ) : href ? (
         internal ? (
-          <Link to={href} title={title} className={className} style={style}>
-            {text}
-
-            <span className={styles.span}></span>
-            <span className={styles.span}></span>
-            <span className={styles.span}></span>
-            <span className={styles.span}></span>
-            {children}
+          <Link to={href} title={title} className={simple ? classNameSimple : className} style={style}>
+            {child}
           </Link>
         ) : (
-          <a href={href} title={title} className={className} style={style} rel="noopener noreferrer" target="_blank">
-            {text}
-
-            <span className={styles.span}></span>
-            <span className={styles.span}></span>
-            <span className={styles.span}></span>
-            <span className={styles.span}></span>
-            {children}
+          <a
+            href={href}
+            title={title}
+            className={simple ? classNameSimple : className}
+            style={style}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            {child}
           </a>
         )
       ) : (

src/components/atoms/Button/index.types.ts

@@ -7,4 +7,5 @@ export interface ButtonProps {
   internal?: boolean;
   bigger?: boolean;
   children?: React.ReactNode;
+  simple?: boolean;
 }

src/components/atoms/GuestBadge/index.tsx

@@ -7,7 +7,11 @@ import { Link } from 'gatsby';
 const Index = ({ name, href, image, titles }: GuestBadgeProps) => {
   return (
     <Link className={styles.wrap} to={href} title={name}>
-      <GatsbyImage alt={name} image={image} loading="lazy" className={styles.image} objectPosition={'center top'} />
+      {image ? (
+        <GatsbyImage alt={name} image={image} loading="lazy" className={styles.image} objectPosition={'center top'} />
+      ) : (
+        <></>
+      )}
       <span className={styles.nameWrap}>
         <span>{name}</span>
         {titles ? <span className={styles.subTitles}>{titles.join(', ')}</span> : <></>}

src/components/atoms/GuestCard/index.module.scss

@@ -6,7 +6,7 @@
   justify-content: center;
   color: var(--nt-green);
   border-radius: 10px;
-  border: 4px solid var(--nt-orange);
+  border: 2px solid var(--nt-orange);
   padding: 20px;
   width: 60vw;
   transition: width 300ms ease;

src/components/atoms/GuestCard/index.tsx

@@ -13,11 +13,8 @@ const GuestCard = ({ children, name, description, field, id, mentor }: GuestCard
   const daysPerforming = program
     .filter(
       (day) =>
-        day.timeline
-          //@ts-ignore
-          .filter((e) => e.starring)
-          //@ts-ignore
-          .filter((event) => event.starring.find((star) => star.name === name)).length > 0
+        day.timeline.filter((e) => e.starring).filter((event) => event.starring?.find((star) => star?.name === name))
+          .length > 0
     )
     .map((d) => ({ name: d.day, day: d.numberDay }));
 
@@ -39,26 +36,16 @@ const GuestCard = ({ children, name, description, field, id, mentor }: GuestCard
             ) : null}
             {daysPerforming && daysPerforming.length > 0 ? (
               <div className={styles.badges}>
-                <Badge
-                  name={'10'}
-                  on={daysPerforming.filter((d) => d.day === 10).length > 0}
-                  href={daysPerforming.find((d) => d.day === 10)?.name}
-                />
-                <Badge
-                  name={'11'}
-                  on={daysPerforming.filter((d) => d.day === 11).length > 0}
-                  href={daysPerforming.find((d) => d.day === 11)?.name}
-                />
-                <Badge
-                  name={'12'}
-                  on={daysPerforming.filter((d) => d.day === 12).length > 0}
-                  href={daysPerforming.find((d) => d.day === 12)?.name}
-                />
-                <Badge
-                  name={'13'}
-                  on={daysPerforming.filter((d) => d.day === 13).length > 0}
-                  href={daysPerforming.find((d) => d.day === 13)?.name}
-                />
+                {program
+                  .map((p) => p.numberDay)
+                  .map((day, key) => (
+                    <Badge
+                      key={key}
+                      name={day.toString()}
+                      on={daysPerforming.filter((d) => d.day === day).length > 0}
+                      href={daysPerforming.find((d) => d.day === day)?.name}
+                    />
+                  ))}
               </div>
             ) : (
               <></>
@@ -75,6 +62,7 @@ const GuestCard = ({ children, name, description, field, id, mentor }: GuestCard
                 text={`Leggi di${more ? ' meno' : ' più'}`}
                 title={`Leggi di${more ? ' meno' : ' più'}`}
                 onClick={() => setMore((state) => !state)}
+                simple
               />
               <div className={styles.fade}></div>
             </div>

src/components/atoms/Partners/index.tsx

@@ -79,6 +79,49 @@ const Index = () => {
           width={150}
         />
       </ShowOnView>
+      <Heading text="Activity Partner" />
+      <ShowOnView className={styles.wrap}>
+        <a href="" title="MAS" rel="noopener noreferrer" target="_blank">
+          <StaticImage
+            layout="constrained"
+            src="../../../images/partners/mas.png"
+            className={styles.logo}
+            style={{ borderRadius: '50%' }}
+            alt="MAS"
+            width={150}
+          />
+        </a>
+        <a href="" title="MAAP" rel="noopener noreferrer" target="_blank">
+          <StaticImage
+            layout="constrained"
+            src="../../../images/partners/maap.png"
+            className={styles.logo}
+            style={{ borderRadius: '50%' }}
+            alt="MAAP"
+            width={150}
+          />
+        </a>
+
+        <a href="" title="Atomico" rel="noopener noreferrer" target="_blank">
+          <StaticImage
+            layout="constrained"
+            src="../../../images/partners/atomico.jpg"
+            className={styles.logo}
+            style={{ borderRadius: '50%' }}
+            alt="Atomico"
+            width={150}
+          />
+        </a>
+        <a
+          href="https://skillsbuild.org/"
+          style={{ width: '100%', marginTop: '20px' }}
+          title="IBM"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <IBM className={styles.logoHorizontal} height={40} />
+        </a>
+      </ShowOnView>
       <Heading text="Mobility Partner" />
       <ShowOnView className={styles.wrap}>
         <a href="https://marinobus.it/" title="Marino Bus" rel="noopener noreferrer" target="_blank">
@@ -160,22 +203,6 @@ const Index = () => {
           />
         </a>
       </ShowOnView>
-      <Heading text="Activity Partner" />
-      <ShowOnView className={styles.wrap}>
-        <a href="https://skillsbuild.org/" title="IBM" rel="noopener noreferrer" target="_blank">
-          <IBM className={styles.logoHorizontal} height={40} />
-        </a>
-        <a href="" title="Atomico" rel="noopener noreferrer" target="_blank">
-          <StaticImage
-            layout="constrained"
-            src="../../../images/partners/atomico.jpg"
-            className={styles.logo}
-            style={{ borderRadius: '50%' }}
-            alt="Atomico"
-            width={150}
-          />
-        </a>
-      </ShowOnView>
       <Heading text="Music Partner" />
       <ShowOnView className={styles.wrap}>
         <a href="" title="Katzuma" rel="noopener noreferrer" target="_blank">
@@ -207,6 +234,19 @@ const Index = () => {
           />
         </a>
       </ShowOnView>
+      <Heading text="Si ringrazia" />
+      <ShowOnView>
+        <a href="" title="Comune di Grassano" rel="noopener noreferrer" target="_blank">
+          <StaticImage
+            layout="constrained"
+            src="../../../images/partners/comune-grassano.png"
+            className={styles.logoLong}
+            alt="Comune di Grassano"
+            width={200}
+          />
+          <p style={{ color: 'black', fontWeight: 'bold' }}>Comune di Grassano</p>
+        </a>
+      </ShowOnView>
     </div>
   );
 };

src/components/atoms/Timeline/index.module.scss

@@ -13,6 +13,9 @@
       font-size: 28px;
     }
   }
+  h3 {
+    max-width: fit-content;
+  }
 }
 
 .desc {

src/components/atoms/Timeline/index.tsx

@@ -20,25 +20,25 @@ const Index = ({ data }: TimelineProps) => {
     guestImages.allFile!.edges.find((e) => e.node.name === name)?.node.childImageSharp.gatsbyImageData;
 
   return (
-    <ShowOnView className={styles.wrap}>
+    <div className={styles.wrap}>
       <Heading text={data.day} smaller showOnView={false} />
-      <h4>{data.name}</h4>
+      {data.name && data.name.trim().length > 0 ? <h4>{data.name}</h4> : <></>}
       <p className={styles.desc}>{data.description}</p>
       <div className={styles.colWrap}>
         {bar}
         {data.timeline.map((item, key) => (
           <div
-            key={textToId(item.title)}
-            id={textToId(item.title)}
+            key={(item.title ? textToId(item.title) : '') + key}
+            id={item.title ? textToId(item.title) : undefined}
             className={styles.itemWrap}
           >
             <div className={key % 2 == 0 ? styles.item : styles.itemReversed} key={key}>
-              <p className={styles.title} dangerouslySetInnerHTML={{ __html: item.title }}></p>
+              <p className={styles.title} dangerouslySetInnerHTML={{ __html: item.title ?? '' }}></p>
               {circle}
               <span className={styles.info}>
                 <p className={styles.time}>{item.time}</p>
                 {/* {item.type ? <p>{item.type}</p> : <></>} */}
-                {item.location ? (
+                {/* {item.location ? (
                   <p
                     className={styles.location}
                     style={key % 2 == 0 ? { marginRight: 'auto' } : { marginLeft: 'auto' }}
@@ -47,7 +47,7 @@ const Index = ({ data }: TimelineProps) => {
                   </p>
                 ) : (
                   <></>
-                )}
+                )} */}
                 {item.starring ? (
                   <div
                     className={styles.badges}
@@ -57,17 +57,18 @@ const Index = ({ data }: TimelineProps) => {
                         : { marginLeft: 'auto', alignItems: 'flex-end', textAlign: 'right' }
                     }
                   >
-                    {item.starring.map((star, key) => {
-                      return (
+                    {item.starring.map((star, key2) => {
+                      return star ? (
                         <GuestBadge
                           name={star.name}
-                          //@ts-ignore
                           href={star.href}
-                          key={key}
-                          image={findImage(star.image)}
+                          key={star.name + key + key2}
+                          image={findImage(String(star.image))}
                           //@ts-ignore
                           titles={star.field || star.role?.split('<br/>')}
                         />
+                      ) : (
+                        <></>
                       );
                     })}
                   </div>
@@ -79,7 +80,7 @@ const Index = ({ data }: TimelineProps) => {
           </div>
         ))}
       </div>
-    </ShowOnView>
+    </div>
   );
 };
 

src/components/molecules/Program/index.module.scss

@@ -11,6 +11,7 @@
   justify-content: center;
   color: var(--nt-green);
   text-align: center;
+  // margin-top: 80px;
 
   h3,
   h4 {

src/components/molecules/Program/index.tsx

@@ -5,24 +5,17 @@ import program from '../../../utilities/program';
 import Timeline from '../../atoms/Timeline';
 import Heading from '../../atoms/Heading';
 import { Link } from 'gatsby';
-import ShowOnView from '../../atoms/ShowOnView';
 
 const Index = () => {
   return (
     <div className={styles.wrap}>
-      <Heading text="CRONOPROGRAMMA" />
+      <Heading text="CRONOPROGRAMMA" showOnView={false} />
       {/* <Banner text="IL PROGRAMMA NON È STATO RILASCIATO" /> */}
-      <ShowOnView>
-        <p>
-          L'evento avrà luogo a Grottole (MT) presso <Link to="/#quando-e-dove">Bosco Coste</Link>.
-          <br />
-          <br />
-          Tuttavia, le attività di Giovedì 10 Agosto si svolgeranno a Grassano (MT).
-        </p>
-      </ShowOnView>
+      <p>
+        L'evento avrà luogo a Grottole (MT) presso <Link to="/#quando-e-dove">Bosco Coste</Link>.
+      </p>
       <div className={styles.program}>
         {program.map((item, key) => (
-          //@ts-ignore
           <Timeline key={key} data={item} />
         ))}
       </div>