Update for the year 2024

2024-05-16 19:06:58 +03:00
parent f22db43343
commit 318f77a886
7 changed files with 115 additions and 207 deletions
--- a/pages/archive.tsx
+++ b/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}>
--- a/pages/components/Collaboration.tsx
+++ b/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>
    </>
  );
--- a/pages/components/Lead.tsx
+++ b/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>
  );
 };
--- a/pages/index.tsx
+++ b/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>
-      <h2>
-        Tervetuloa seuraavaan Runosaareen <span>13.—15.6.2024</span>
-      </h2>
-      {/* Pages hidden until next year  
-        <Lead />
-        <Performers />
-        <Program />
-        <Workshops />
-        <Info />
-        <Collaboration /> 
-      */}
+      <h1>Runosaari</h1>
+      <Lead />
+      <Program />
+      {/* <Performers />
+      <Workshops /> */}
+      <Info />
+      <Collaboration />
+      {/* <Archive /> */}
    </div>
  );
 };
--- a/pages/program.tsx
+++ b/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>Kasper Salonen</li>
-            <li>Juha Kulmala + Positroninen runo-orkesteri</li>
-          </ul>
-        ) : (
-          <span />
-        )}
-      </CSSTransition>
+      <ul className={styles.performerList}>
+        <li>Äyräs</li>
+        <li>Hanna Storm</li>
+        <li>Juha Rautio</li>
+        <li>Katariina Vuorinen<br />& Ilkka Turta</li>
+      </ul>
      <hr className={styles.programHr} />

-      {/* Lauantai */}
+      {/* Laituri */}
      <h2 className={styles.programTitle}>
-        <span>22.7.</span>
-        <a href='https://www.prosinervo.com/'>
-          <span className={styles.placeName}>Sinervo</span>
+        <span>17.6.</span>
+        <a href='https://www.cafelaituri.fi'>
+          <span className={styles.placeName}>Laituri</span>
          <FiExternalLink fontSize={20} />
        </a>
-        <span>la</span>
+        <span>pe</span>
      </h2>
-      <span className={styles.locationAddress} style={{ marginBottom: 50 }}>
-        Sinervon talo, Sauniementie 5, Teersalo
+      <span className={styles.locationAddress}>
+        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}>
-              <span className={styles.programTime}>14:00</span>
-              <span className={styles.programPerformer}>Kinnunen&Kinnunen</span>
-            </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>
+      <ul className={styles.performerList}>
+        <li>Juha Kulmala + Positroninen runo-orkesteri </li>
+        <li>Terhi Forssén</li>
+        <li>Katariina Vuorinen & Björn</li>
+      </ul>
      <hr className={styles.programHr} />
    </section>
  );
--- a/styles/Lead.module.scss
+++ b/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 {
--- a/styles/Program.module.scss
+++ b/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 {