Update for the year 2024

pages/archive.tsx

@@ -5,6 +5,7 @@ import shared from '../styles/Shared.module.scss';
 import styles from '../styles/Archive.module.scss';
 import PerformersData2021 from '../data/performers/2021';
 import PerformersData2022 from '../data/performers/2022';
+import PerformersData2023 from '../data/performers/2023';
 import Performer from '../types/Performer';
 import { BiChevronDown, BiChevronLeft } from 'react-icons/bi';
 
@@ -16,6 +17,7 @@ interface PerformerCard extends Performer {
 const Archive = () => {
   const [performers2021, setPerformers2021] = useState<PerformerCard[]>([]);
   const [performers2022, setPerformers2022] = useState<PerformerCard[]>([]);
+  const [performers2023, setPerformers2023] = useState<PerformerCard[]>([]);
 
   useEffect(() => {
     let cards: PerformerCard[] = [];
@@ -39,6 +41,17 @@ const Archive = () => {
     setPerformers2022(cards);
   }, []);
 
+  useEffect(() => {
+    let cards: PerformerCard[] = [];
+
+    PerformersData2023.map((p, index) => {
+      let newCard = { ...p, id: index, showDesc: false };
+      cards.push(newCard);
+    });
+
+    setPerformers2023(cards);
+  }, []);
+
   const togglePerformerDesc2021 = (id: number) => {
     let updated: PerformerCard[];
     updated = performers2021.map((p) => {
@@ -63,9 +76,65 @@ const Archive = () => {
     setPerformers2022(updated);
   };
 
+  const togglePerformerDesc2023 = (id: number) => {
+    let updated: PerformerCard[];
+    updated = performers2023.map((p) => {
+      if (p.id === id) {
+        p.showDesc = !p.showDesc;
+      }
+      return p;
+    });
+
+    setPerformers2023(updated);
+  };
+
   return (
     <section className={shared.page + ' ' + styles.archivePage}>
       <h1>Arkisto</h1>
+      <h2 className={styles.year}>2023</h2>
+      {performers2023.map((p) => (
+        <div className={styles.performerContainer} key={p.id}>
+          <Image
+            className={styles.performerImage}
+            src={p.imagePath}
+            width={100}
+            height={100}
+            layout='fixed'
+            alt={p.name + ' image'}
+          />
+          <div className={styles.performerTextContainer}>
+            <div
+              className={styles.performerTitle}
+              onClick={() => togglePerformerDesc2023(p.id)}
+            >
+              <h2>{p.name}</h2>
+              <button className={shared.openingChevron}>
+                {p.showDesc ? (
+                  <BiChevronDown size='3rem' />
+                ) : (
+                  <BiChevronLeft size='3rem' />
+                )}
+              </button>
+            </div>
+            <CSSTransition
+              in={p.showDesc}
+              timeout={1000}
+              classNames='fadeTransition'
+            >
+              {p.showDesc ? (
+                <div>
+                  {p.paragraphs.map((parag, index) => (
+                    <p key={index}>{parag.toString()}</p>
+                  ))}
+                </div>
+              ) : (
+                <span></span>
+              )}
+            </CSSTransition>
+            <hr />
+          </div>
+        </div>
+      ))}
       <h2 className={styles.year}>2022</h2>
       {performers2022.map((p) => (
         <div className={styles.performerContainer} key={p.id}>

pages/components/Collaboration.tsx

@@ -6,7 +6,7 @@ const Collaboration = () => {
     <>
       <h1>Yhteistyössä</h1>
       <div className={styles.collabContainer}>
-        <span>Naantalin kaupunki</span>
+        <span>Runoviikko Ry</span>
         <div className={styles.collabLogoRow}>
           <img
             className={styles.collabLogo}
@@ -14,12 +14,11 @@ const Collaboration = () => {
             alt='kirjan talo logo'
           />
         </div>
-        <span>Pro Sinervo ry</span>
         <span>Velkuan saaristolaisyhdistys ry</span>
-        <span>Aviador Kustannus</span>
-        <span>Enostone Kustannus</span>
         <span>Cafe Laituri</span>
         <span>Saaristohotelli Vaihela</span>
+        <span>Aviador Kustannus</span>
+        <span>Enostone Kustannus</span>
       </div>
     </>
   );

pages/components/Lead.tsx

@@ -6,14 +6,14 @@ const Lead = () => {
     <div className={styles.leadContainer}>
       <h2 className={styles.leadTitle}>
         <span className={styles.dateAndPlace}>
-          20.-22.7. Naantalin Saaristo
+          13.—15.6. Naantalin Saaristo
         </span>
-        Eksymisretki omaan luontoosi, metsänpeiton suojaan!
+        Vuonna 2024 saarifestivaali tuo runoutta ja musiikkia kahteen kesäkuun perjantaihin
       </h2>
-      <p className={styles.leadText}>
+      {/* <p className={styles.leadText}>
         Runosaari on poikkitaiteellinen runofestivaali Livonsaaren, Palvan ja
         Velkuanmaan saarissa. Festivaali järjestetään kolmatta kertaa
-        20.-22.7.2023.
+        13.—15.6.2024.
       </p>
       <p className={styles.leadText}>
         Tapahtuma kutsuu Naantalin saaristoon joukon valovoimaisia ja
@@ -25,7 +25,7 @@ const Lead = () => {
         meidänkin rantojamme. Peurojen kurittaman monimuotoisuuden keskelle
         nousee Runosaari ihmettelemään ihmisen ja muun luonnon olemista taiteen
         ja ilmaisun keinoin.
-      </p>
+      </p> */}
     </div>
   );
 };

pages/index.tsx

@@ -6,23 +6,20 @@ import styles from '../styles/Index.module.scss';
 import Lead from './components/Lead';
 import Collaboration from './components/Collaboration';
 import Workshops from './workshops';
+import Archive from './archive';
 // import Workshops from './workshops';
 
 const Home: NextPage = () => {
   return (
     <div className={styles.indexContainer}>
-      <h1>Runosaari kiittää!</h1>
+      <h1>Runosaari</h1>
-      <h2>
-        Tervetuloa seuraavaan Runosaareen <span>13.—15.6.2024</span>
-      </h2>
-      {/* Pages hidden until next year  
       <Lead />
-        <Performers />
       <Program />
-        <Workshops />
+      {/* <Performers />
+      <Workshops /> */}
       <Info />
       <Collaboration />
-      */}
+      {/* <Archive /> */}
     </div>
   );
 };

pages/program.tsx

@@ -13,74 +13,14 @@ interface DayToggles {
 }
 
 const Program = () => {
-  const [dayToggles, setDayToggles] = useState<DayToggles>({
-    wed: false,
-    thu: false,
-    fri: false,
-    sat: false,
-  });
-
-  const toggleDayDesc = (day: keyof DayToggles) => {
-    let updated = { ...dayToggles };
-
-    updated[day] = !updated[day];
-
-    setDayToggles(updated);
-  };
-
   return (
     <section className={shared.page}>
       <h1 id='program-start'>Ohjelma</h1>
 
-      {/* Torstai */}
+      {/* Vaihela */}
       <h2 className={styles.programTitle}>
-        <span>20.7.</span>
+        <span>7.6.</span>
         <a href='https://www.cafelaituri.fi'>
-          <span className={styles.placeName}>Laituri</span>
-          <FiExternalLink fontSize={20} />
-        </a>
-        <span>to</span>
-      </h2>
-      <span className={styles.locationAddress}>
-        Café Laituri, Voiponlahdentie 37, Palva
-      </span>
-      <h3 className={styles.timeSpan}>17:00 - 19:00</h3>
-
-      <button
-        className={styles.programPerformersTitleToggle}
-        onClick={() => toggleDayDesc('thu')}
-      >
-        <span className={styles.programPerformersTitle}>Esiintyjät</span>
-        <span className={shared.openingChevron}>
-          {dayToggles.thu ? (
-            <BiChevronDown size='2.5rem' />
-          ) : (
-            <BiChevronLeft size='2.5rem' />
-          )}
-        </span>
-      </button>
-      <CSSTransition
-        in={dayToggles.thu}
-        timeout={1000}
-        classNames='fadeTransition'
-      >
-        {dayToggles.thu ? (
-          <ul className={styles.performerList}>
-            <li>Rauhatäti</li>
-            <li>Otso Helasvuo</li>
-            <li>Katariina Vuorinen</li>
-            <li>Rosanna Fellman</li>
-          </ul>
-        ) : (
-          <span />
-        )}
-      </CSSTransition>
-      <hr className={styles.programHr} />
-
-      {/* Perjantai */}
-      <h2 className={styles.programTitle}>
-        <span>21.7.</span>
-        <a href='https://vaihela.fi/'>
           <span className={styles.placeName}>Vaihela</span>
           <FiExternalLink fontSize={20} />
         </a>
@@ -89,136 +29,35 @@ const Program = () => {
       <span className={styles.locationAddress}>
         Saaristohotelli Vaihela, Velkuanmaantie 168, Velkuanmaa
       </span>
-      <h3 className={styles.timeSpan}>18:00 - 21:00</h3>
+      <span className={styles.timeSpan}>18:00 - 21:00</span>
 
-      <button
-        className={styles.programPerformersTitleToggle}
-        onClick={() => toggleDayDesc('fri')}
-      >
-        <span className={styles.programPerformersTitle}>Esiintyjät</span>
-        <span className={shared.openingChevron}>
-          {dayToggles.fri ? (
-            <BiChevronDown size='2.5rem' />
-          ) : (
-            <BiChevronLeft size='2.5rem' />
-          )}
-        </span>
-      </button>
-
-      <CSSTransition
-        in={dayToggles.thu}
-        timeout={1000}
-        classNames='fadeTransition'
-      >
-        {dayToggles.fri ? (
       <ul className={styles.performerList}>
-            <li>Ilmi Lupiini</li>
+        <li>Äyräs</li>
-            <li>Kasper Salonen</li>
+        <li>Hanna Storm</li>
-            <li>Juha Kulmala + Positroninen runo-orkesteri</li>
+        <li>Juha Rautio</li>
+        <li>Katariina Vuorinen<br />& Ilkka Turta</li>
       </ul>
-        ) : (
-          <span />
-        )}
-      </CSSTransition>
       <hr className={styles.programHr} />
 
-      {/* Lauantai */}
+      {/* Laituri */}
       <h2 className={styles.programTitle}>
-        <span>22.7.</span>
+        <span>17.6.</span>
-        <a href='https://www.prosinervo.com/'>
+        <a href='https://www.cafelaituri.fi'>
-          <span className={styles.placeName}>Sinervo</span>
+          <span className={styles.placeName}>Laituri</span>
           <FiExternalLink fontSize={20} />
         </a>
-        <span>la</span>
+        <span>pe</span>
       </h2>
-      <span className={styles.locationAddress} style={{ marginBottom: 50 }}>
+      <span className={styles.locationAddress}>
-        Sinervon talo, Sauniementie 5, Teersalo
+        Café Laituri, Voiponlahdentie 37, Palva
       </span>
-      <h3 className={styles.timeSpan}>14:00 - 20:00</h3>
+      <span className={styles.timeSpan}>18:00 - 21:00</span>
 
-      <button
-        className={styles.programPerformersTitleToggle}
-        onClick={() => toggleDayDesc('sat')}
-      >
-        <span className={styles.programPerformersTitle}>Esiintyjät</span>
-        <span className={shared.openingChevron}>
-          {dayToggles.sat ? (
-            <BiChevronDown size='2.5rem' />
-          ) : (
-            <BiChevronLeft size='2.5rem' />
-          )}
-        </span>
-      </button>
-
-      <CSSTransition
-        in={dayToggles.thu}
-        timeout={1000}
-        classNames='fadeTransition'
-      >
-        {dayToggles.sat ? (
       <ul className={styles.performerList}>
-            <li className={styles.performerWithTime}>
+        <li>Juha Kulmala + Positroninen runo-orkesteri </li>
-              <span className={styles.programTime}>14:00</span>
+        <li>Terhi Forssén</li>
-              <span className={styles.programPerformer}>Kinnunen&Kinnunen</span>
+        <li>Katariina Vuorinen & Björn</li>
-            </li>
-            <li className={styles.performerWithTime}>
-              <span className={styles.programTime}>14:30</span>
-              <span className={styles.programPerformer}>Katja Meriluoto</span>
-            </li>
-            <li className={styles.performerWithTime}>
-              <span className={styles.programTime}>14:50</span>
-              <span className={styles.programPerformer}>Marianna Kurtto</span>
-            </li>
-            <li className={styles.performerWithTime}>
-              <span className={styles.programTime}>15:10</span>
-              <span className={styles.programPerformer}>
-                Esa Hirvonen & Masi Hukari
-              </span>
-            </li>
-            <li className={styles.programBreak}>Tauko</li>
-            <li className={styles.performerWithTime}>
-              <span className={styles.programTime}>16:00</span>
-              <span className={styles.programPerformer}>Veera Sylvius</span>
-            </li>
-            <li className={styles.performerWithTime}>
-              <span className={styles.programTime}>16:20</span>
-              <span className={styles.programPerformer}>Suvi Valli</span>
-            </li>
-            <li className={styles.performerWithTime}>
-              <span className={styles.programTime}>16:40</span>
-              <span className={styles.programPerformer}>
-                Sergio Augusto Sánchez
-              </span>
-            </li>
-            <li className={styles.performerWithTime}>
-              <span className={styles.programTime}>17:00</span>
-              <span className={styles.programPerformer}>Blues Ones</span>
-            </li>
-            <li className={styles.programBreak}>Tauko</li>
-            <li className={styles.performerWithTime}>
-              <span className={styles.programTime}>18:00</span>
-              <span className={styles.programPerformer}>Sirpa Kyyrönen</span>
-            </li>
-            <li className={styles.performerWithTime}>
-              <span className={styles.programTime}>18:20</span>
-              <span className={styles.programPerformer}>Tomi Kontio</span>
-            </li>
-            <li className={styles.performerWithTime}>
-              <span className={styles.programTime}>18:40</span>
-              <span className={styles.programPerformer}>
-                Katariina Vuorinen & Kaisa Mäensivu
-              </span>
-            </li>
-            <li className={styles.programBreak}>Tauko</li>
-            <li className={styles.performerWithTime}>
-              <span className={styles.programTime}>19:30</span>
-              <span className={styles.programPerformer}>Signe</span>
-            </li>
       </ul>
-        ) : (
-          <span />
-        )}
-      </CSSTransition>
       <hr className={styles.programHr} />
     </section>
   );

styles/Lead.module.scss

@@ -9,6 +9,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  font-size: 2rem;
 }
 
 .leadText {
@@ -17,7 +18,7 @@
 }
 
 .dateAndPlace {
-  margin-bottom: 1em;
+  margin-bottom: 1.1em;
 }
 
 .leadNextYear {

styles/Program.module.scss

@@ -49,6 +49,8 @@
 .timeSpan {
   margin-top: 0;
   margin-bottom: 1rem;
+  font-size: 2em;
+  font-weight: bold;
 }
 
 .performerList {
@@ -115,6 +117,7 @@
 .programPerformersTitle {
   font-size: 2rem;
   padding-left: 1rem;
+  font-weight: bold;
 }
 
 .programHr {