Merge branch 'master' into 'production'

Merge dev into master

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!105

package.json

@@ -36,6 +36,7 @@
   "devDependencies": {
     "@types/jest": "^27.4.1",
     "@types/js-cookie": "^3.0.1",
+    "@types/node": "^16.11.36",
     "@types/react": "^17.0.19",
     "@types/react-beautiful-dnd": "^13.1.2",
     "@types/react-csv": "^1.1.2",

src/components/Feed/Events.tsx

@@ -0,0 +1,71 @@
+import {
+  Card,
+  PageLink,
+  CardSection,
+} from "@components/index";
+import Event from "@models/Event";
+import noop from "@utils/noop";
+import { Lang, getTranslateFunc } from "../../i18n";
+
+const cardTimeOpts: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+};
+
+type EventsProps = {
+  events: Event[];
+  lang: Lang
+};
+
+const Events: React.FC<EventsProps> = ({ events, lang }) => {
+  const isFi = lang === "fi";
+  const t = getTranslateFunc(lang);
+
+  const buttonText = `${t("Lue lisää")}\xa0›`;
+  const pageLinkText = t("Kaikki tapahtumat");
+  const pageLinkDesc = `${t("löydät tapahtumakalenterista")}\xa0›`;
+
+  const locale = isFi ? "fi-FI" : "en-GB";
+
+  const filteredEvents = events.map((e) => ({
+    ...e,
+    title: isFi ? e.title_fi : e.title_en,
+    description: isFi ? e.description_fi : e.description_en,
+    content: isFi ? e.content_fi : e.content_en,
+    location: isFi ? e.location_fi : e.location_en,
+    startDate: new Date(e.start_time).toLocaleString(locale, cardTimeOpts),
+    endDate: new Date(e.end_time).toLocaleString(locale, cardTimeOpts),
+  }));
+
+  return (
+    <CardSection id="#events">
+      {filteredEvents.map((event) => (
+        <Card
+          key={event.id}
+          title={event.title}
+          startTime={new Date(event.start_time).toLocaleString(locale, cardTimeOpts)}
+          text={event.description}
+          link={`/events/${event.id}`}
+          image={{
+            src: event.image || event.tags[0].icon,
+            alt: event.title,
+          }}
+          buttonOnClick={noop}
+          buttonText={buttonText}
+          data-e2e="event-card"
+        />
+      ))}
+      <aside>
+        <PageLink to="/kilta/toiminta#tapahtumat" desc={pageLinkDesc}>
+          {pageLinkText}
+        </PageLink>
+      </aside>
+
+    </CardSection>
+  );
+};
+
+export default Events;

src/components/Feed/Posts.tsx

@@ -0,0 +1,73 @@
+import {
+  Card,
+  PageLink,
+  CardSection,
+} from "@components/index";
+import Post from "@models/Feed";
+import noop from "@utils/noop";
+import { Lang, getTranslateFunc } from "../../i18n";
+
+const cardTimeOpts: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+};
+
+type PostsProps = {
+  feed: Post[];
+  lang: Lang
+};
+
+const Posts: React.FC<PostsProps> = ({ feed: posts, lang }) => {
+  const isFi = lang === "fi";
+  const t = getTranslateFunc(lang);
+
+  const buttonText = `${t("Lue lisää")}\xa0›`;
+  const allNewsText = t("Lue tuoreimmat uutiset");
+  const allNewsDesc = `${t("uutiset")}\xa0›`;
+  const meetingNotesText = t("Hallituksen pöytäkirjat");
+  const meetingNotesDesc = `${t("ja hallitukset kuulumiset")}\xa0›`;
+  const galleryText = t("Kuvia tapahtumista");
+  const galleryDesc = `${t("kuvagalleriassa")}\xa0›`;
+
+  const locale = isFi ? "fi-FI" : "en-GB";
+
+  const filteredFeed = posts.map((post) => ({
+    ...post,
+    title: isFi ? post.title_fi : post.title_en,
+    description: isFi ? post.description_fi : post.description_en,
+    content: isFi ? post.content_fi : post.content_en,
+    publish_time: new Date(post.publish_time).toLocaleString(locale, cardTimeOpts),
+  }));
+
+  return (
+    <CardSection>
+      {filteredFeed.map((post) => (
+        <Card
+          key={post.id}
+          title={post.title}
+          text={post.description}
+          startTime={post.publish_time}
+          link={`/feed/${post.id}`}
+          buttonOnClick={noop}
+          buttonText={buttonText}
+        />
+      ))}
+      <aside>
+        <PageLink to="/kilta/toiminta#uutiset" desc={allNewsDesc}>
+          {allNewsText}
+        </PageLink>
+        <PageLink to="https://static.sahkoinsinoorikilta.fi/Poytakirjat/" desc={meetingNotesDesc}>
+          {meetingNotesText}
+        </PageLink>
+        <PageLink to="https://sik.kuvat.fi" desc={galleryDesc}>
+          {galleryText}
+        </PageLink>
+      </aside>
+    </CardSection>
+  );
+};
+
+export default Posts;

src/components/HTMLLogo.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-
-const Logo = (): JSX.Element => (
-  // eslint-disable-next-line react/no-danger
-  <head dangerouslySetInnerHTML={{
-    __html:
-    `<!--
-                                      -\`  o\` .s     h\`  -///.
-                                      .o+/o  \`d     m  /s\`\`\`y:  -+:.
-                            .///.  \`-.  -m\`   m::/ \`d  /s.\`.y: \`h..o/
-                           /o.\`.y- ..\`   :\`   \`\`\`\`  \`   .://.  ho+/o- \`y.
-                      ./+  +o\` .y-                             .  \`  .y- \`+//\`
-                     /+y/   :/+/.         .-::/+++++//:--\`           o. \`.h--/
-                     \` \`/s.               hNNMMMMMMMMMMNNy              o::d\`  -o-
-                 :+.   . .\`               mMMMMMMMMMMMMMMd               ---  \`/y++
-                  -o+-o:              \`-/oNMMMMMMMMMMMMMMNo:-\`               :o:\` .
-             \`:--..\`-/\`           \`-+ymNMMMMMMMMMMMMMMMMMMMMNmy+-\`     \`\`    \`\`  -++++.
-             \`h+/y/:     \`\`     .odNMMMMMMMMMNNmmmmmmNNMMMMMMMMMNdo..:sdd/       d.  .h
-              \`sh\`     \`+mds:.:yNMMMMMMMmds+:-...\`\`...-:+ydmMMMMMMMNmMmh+- .     o/--+o
-          \`\`\`\`\`\`+\`    .hMMMMMNMMMMMMMms:.                  .:yMMMMNds:.\`-+hms     .::. \`--
-         \`yo/y+/     :mMMMMMMMMMMMNy:\`       \`\`...       \`.+ymMNh+-\`.:sdMNds:\`\`     -/oom:
-          .oos      /NMMMMMMMMMMNy-      \`-oydmNNM  :h+:odNNms/.\`.+hmMNh+-\`.:sh-    .\`\`y/.:\`
-            -s\`    /MMMMMMMMMMMd:     \`-smMMMMMMMM  /MMMNh+-\`\`:sdMNms:.\`.+hNMNh:      hy+/-
-                  .NMMMMMMMMMMy\`     -hMMMMMMMMMMM  /MMo.\`./ymMNh+-\`\`:sdMNms:\`\`./\`    \`
-                  yMMMMMMMMMMy     \`sMMMMMMMMMMMMM  /MM+odNNmy/.\`.+yNMNh+- \`-odMNo
-                  \`:odMMMMMMd\`    \`hMMMMMMMMMMMMMM  /MMMNdo-\`\`-odMMms/\` \`/ymMMdo-
-                     \`NMMMMM-     sMMMMMMMMMMMMMMM  /MMN+\`\`/yNMNdo- \`-odMMMMMN\`
-                     /MMMMMd     .MMMMMMMMMMMMMMMM  /MMMMNMMNy/\` \`/ymMMdmMMMMM/
-                     sMMMMMo     +MMMMMMMMMMMMMMMM  /MMMMdmMMdsodMMNy/\` oMMMMMs
-                     yMMMMM+     +MMMMMMMMMMMMMNdh  /MMm/ \`oNMMMMMy.    +MMMMMy
-                     oMMMMMs     .MMMMMMMMMMMs-     /MMMMNMMNy/:smMMdo: sMMMMMo
-                     /MMMMMd      oMMMMMMMMN-       /MMMMdmMMmo:\` .+hNMNNMMMMM/
-      \`+ /hy.        \`NMMMMM:      oMMMMMMM+        /MMm/\` .ohNMNy/. \`/ymMMMMM\`         .-/+o-
-      .N\`m+oh     \`/smMMMMMMm\`      /NMMMMMo        /MMMMNy/. \`/ymMNdo:\`\`-ohNMNy/.     sNysd.
-       +yh..-     yMMMMMMMMMMh\`      .sNMMMN/       /MM//ymMNdo:\`\`-ohNMNy/.\`\`/ymMo     \`-smh.
-        ::--..:-  .NMMMMMMMMMMh.       .sNMMMh:     /MMs:\`\`-ohNNmy/.\`./ymMNdo:\`\`-\`   \`h-  \`/.
-        /oNodm:s   :NMMMMMMMMMMm/        \`+hNMNms:  /MMNNmy/.\`./ymMNdo:\`\`-ohNNmo     smys/-
-         \`dds.      :NMMMMMMMMMMMh:        \`.+hNMM  :s-./ymMNdo-\`\`-ohNNmy/.\`./y-    \`s.\`-/+
-         .s. ./s.    -mMMMMMMMMMMMNh/.         .:s    .\`  \`-odNNmy/.\`./ymMNdo\`     -\`   -.
-           /yhN:\`\`    .yMMMMMmNMMMMMMmy/-\`        \`:odN/     \`./ymMNdo-\`\`-ods\`    \`oyy//d.
-           --\`ydyy-     /ddo-\`-smMMMMMMMNmho/-\`  \`mMNdo.         \`:odNNmy/ \`     oo-\`-+y-
-             oyo-.:s\`    \`\`     ./hmMMMMMMMMMNmhs+y/.\`.\`            \`./yh/     :-./yy+
-             \` \`/hNy/:.            ./sdmMMMMMMMMMM\`-+hm/                     . ho\`\`\`-/
-               .s:my::-\`\`.-\`           .-/NMMMMMMMdNMMM/                   \`\`yydmsso\`
-                  m- .sysho+              mMMMMMMMMMMMN:                  /h:\`:yd-
-                  .  hh\` :M- \`\`           hNNNMMMMMmh+-              \`-+o+\`:dy. -\`
-                     /h+/yh\`.h+ .\`        \`.-::://:.           --/\`  ym:/M+ \`+:
-                      \`-:- -ms .md\`\`/\`                  .\`:    syyys.\`ydhos/
-                           s+ \`dymoyd\`-yss/ \`:  .\`  .\` \`syho- .M:  yd  oo
-                              :y\`/Nm. /do/- /M\` Nm/.M: sd-\`/M:\`hy++d+
-                                  /- .y+oN: sd  NyhhM: om/-+m-  .:-\`
-                                      \`-:-  o+  h/ /h:  -/+:\`
--->`,
-  }}
-  />
-);
-
-export default Logo;

src/components/Sections/TextSection.tsx

@@ -52,6 +52,7 @@ const StyledSection = styled.section`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    z-index: 1;
 
     @media screen and (max-width: ${breakpoints.mobile}) {
       align-items: center;

src/i18n/index.tsx

@@ -26,6 +26,11 @@ const translateFi: TranslateFunc = (key) => {
   return res || key;
 };
 
+export const getTranslateFunc = (language: Lang): TranslateFunc => {
+  if (language === "en") return translateEn;
+  return translateFi;
+};
+
 interface Store {
   language: Lang;
   changeLanguage: React.Dispatch<Lang>,
@@ -84,7 +89,7 @@ export default LocaleStore;
 
 const useTranslation = () => {
   const { language, changeLanguage } = useContext(LocaleContext);
-  const t = language === "en" ? translateEn : translateFi;
+  const t = getTranslateFunc(language);
 
   return {
     t,

src/i18n/locales/en/common.json

@@ -6,7 +6,15 @@
   "Päättyy": "Ends at",
   "Lataa lisää": "Load more",
   "Tapahtumat": "Events",
+  "Kaikki tapahtumat": "All events",
+  "löydät tapahtumakalenterista": "you can find all events from the event calendar",
   "Uutiset": "News",
+  "uutiset": "news",
+  "Lue tuoreimmat uutiset": "Read news",
+  "Hallituksen pöytäkirjat": "Board meeting records",
+  "ja hallitukset kuulumiset": "and what the board has been up to",
+  "Kuvia tapahtumista": "Photos from events",
+  "kuvagalleriassa": "in the photo gallery",
 
   "Hakemaasi sivua":
   "Page",

src/pages/_document.tsx

@@ -4,7 +4,6 @@ import Document, {
 } from "next/document";
 import { ServerStyleSheet } from "styled-components";
 import Favicons from "@components/Favicons";
-import HTMLLogo from "@components/HTMLLogo";
 
 export default class MyDocument extends Document<{ styleTags: unknown }> {
   static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
@@ -34,7 +33,6 @@ export default class MyDocument extends Document<{ styleTags: unknown }> {
     return (
       <Html lang="fi">
         <Head>
-          <HTMLLogo />
           <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,800,900&display=swap" rel="stylesheet" />
           <Favicons />
         </Head>

src/pages/index.tsx

@@ -24,8 +24,8 @@ interface InitialProps {
 }
 
 const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
-  const eventResult = useFetchEvents({ fallbackData: initialEvents, options: eventOptions });
+  const { data: events } = useFetchEvents({ fallbackData: initialEvents, options: eventOptions });
-  const feedResult = useFetchFeed({ fallbackData: initialFeed, options: feedOptions });
+  const { data: feed } = useFetchFeed({ fallbackData: initialFeed, options: feedOptions });
 
   return (
     <>
@@ -33,7 +33,7 @@ const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
         <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/`} />
       </Head>
       <PageWrapper>
-        <FrontPageView events={eventResult.data as Event[]} feed={feedResult.data} />
+        <FrontPageView events={events as Event[]} feed={feed as Post[]} />
       </PageWrapper>
     </>
   );

src/views/ActualPage/EventCalendar.tsx

@@ -12,9 +12,11 @@ interface EventCalendarProps {
   events: Event[];
 }
 
+const DEFAULT_NUMBER_SHOWN = 10;
+
 const EventCalendar: React.FC<EventCalendarProps> = ({ events }) => {
   // const [filterSelected, setFilter] = useState(0);
-  const [numberShown, setNumberShown] = useState(8);
+  const [numberShown, setNumberShown] = useState(DEFAULT_NUMBER_SHOWN);
 
   const { t, i18n } = useTranslation();
   const isFi = i18n.language === "fi";
@@ -69,7 +71,7 @@ const EventCalendar: React.FC<EventCalendarProps> = ({ events }) => {
       </CardSection>
       { numberShown < events.length && (
         <FilterContainer>
-          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8); }}>
+          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + DEFAULT_NUMBER_SHOWN); }}>
             {t("Lataa lisää")}
           </Button>
         </FilterContainer>

src/views/ActualPage/News.tsx

@@ -12,9 +12,11 @@ interface NewsProps {
   feed: Post[];
 }
 
+const DEFAULT_NUMBER_SHOWN = 10;
+
 const News: React.FC<NewsProps> = ({ feed }) => {
   // const [filterSelected, setFilter] = useState(0);
-  const [numberShown, setNumberShown] = useState(8);
+  const [numberShown, setNumberShown] = useState(DEFAULT_NUMBER_SHOWN);
 
   const { i18n, t } = useTranslation();
   const isFi = i18n.language === "fi";
@@ -65,7 +67,7 @@ const News: React.FC<NewsProps> = ({ feed }) => {
       </CardSection>
       { numberShown < feed.length && (
         <FilterContainer>
-          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8); }}>
+          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + DEFAULT_NUMBER_SHOWN); }}>
             {t("Lataa lisää")}
           </Button>
         </FilterContainer>

src/views/ContactsPage/ContactsPageView.tsx

@@ -181,13 +181,23 @@ const ContactsPageView: React.FC = () => (
           <TextSection id={json.slug}>
             <CommitteeContainer committee={json}>
               {(json.slug === "board") && (
-                <p>
+                <div>
-                  {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
+                  <p>
-                  <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
+                    {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
-                    hallitus@sahkoinsinoorikilta.fi
+                    <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
-              </BlueLink>
+                      hallitus@sahkoinsinoorikilta.fi
-                  {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."}
+                    </BlueLink>
-                </p>
+                    {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."}
+                  </p>
+                  <p>
+                    {"Hallitukselle voi myös lähettää palautetta täyttämällä "}
+                    <BlueLink to="https://docs.google.com/forms/d/e/1FAIpQLSeD8Hm66uvwr7Xa2WGgOCfI2RS1NrZsmISf2QBKUcJf_stv8g/viewform?usp=sf_link">
+                      palautelomakkeen
+                    </BlueLink>
+                    {", lomakkeen vastauksia käydään läpi hallituksen kokouksissa."}
+                  </p>
+                </div>
+                
               )}
             </CommitteeContainer>
           </TextSection>

src/views/ContactsPage/board.json

@@ -10,7 +10,7 @@
         {
           "name": "Mikko Suhonen",
           "phone_number": null,
-          "email": "puheenjohtaja@sahkoinsinoorikilta.fi",
+          "email": null,
           "image": "https://static.sahkoinsinoorikilta.fi/img/board/mikko.jpg"
         }
       ]

src/views/ContactsPage/shtmk.json

@@ -1,5 +1,5 @@
 {
-    "slug": "shntmk",
+    "slug": "shtmk",
     "name_fi": "SIK100-historiatoimikunta",
     "name_en": "",
     "roles": [

src/views/FreshmenPage/FreshmenPageView.tsx

@@ -7,8 +7,8 @@ import {
 import FreshmenPageHero from "./FreshmenPageHero";
 
 const FUKSI_POINTS_LINK = "https://static.sahkoinsinoorikilta.fi/FTMK/Fuksipisteohje.pdf";
-const TG_GROUP_CHAT_LINK = "https://t.me/joinchat/keEslfjfTVc0NzM0";
+const TG_GROUP_CHAT_LINK = "https://t.me/+1PqQHRVMjiAxMTU0";
-const TG_NOTIFICATIONS_LINK = "https://t.me/joinchat/4Ns3Xy2LLMUxOGRk";
+const TG_NOTIFICATIONS_LINK = "https://t.me/+Ln8TvQ-_id9kZTU0";
 const EMAIL_LINK = "ftmk@sahkoinsinoorikilta.fi";
 const EMAIL_LINK_MAILTO = `mailto:${EMAIL_LINK}`;
 
@@ -58,7 +58,7 @@ const FreshmenPageView: React.FC = () => (
 
         <ImageContainer>
           <Image
-            src="https://static.sahkoinsinoorikilta.fi/uus_webi/fuksikipparit.jpg"
+            src="https://static.sahkoinsinoorikilta.fi/uus_webi/fuksikipparit-2022.jpg"
             alt="Kipparit"
             layout="responsive"
             width={100}
@@ -69,7 +69,7 @@ const FreshmenPageView: React.FC = () => (
 
         <h6>Fuksikapteenit</h6>
         <p>
-          Me olemme fuksikapteenisi <strong>Toni</strong> ja <strong>Toni</strong> ja tulemme olemaan tukenasi sekä valvomassa suorituksiasi fuksivuoden seikkailuissa kohti teekkarilakkia, jonka voit ansaita mahdollisesti järjestettävänä Wappuna ensi keväällä.
+          Me olemme fuksikapteenisi <strong>Melisa</strong> ja <strong>Eveliina</strong> ja tulemme olemaan tukenasi sekä valvomassa suorituksiasi fuksivuoden seikkailuissa kohti teekkarilakkia, jonka voit ansaita mahdollisesti järjestettävänä Wappuna ensi keväällä.
           Jos sinulla on mitään kysymyksiä, ota ihmeessä meihin yhteyttä esimerkiksi <Link to={TG_GROUP_CHAT_LINK} target="_blank">Telegramissa</Link> tai <a href={EMAIL_LINK_MAILTO}>sähköpostitse</a>.
         </p>
 
@@ -79,15 +79,14 @@ const FreshmenPageView: React.FC = () => (
           Ajan myötä palapelin palat muodostavat sinun näköisesi kuvan ja pääset itse vaikuttamaan siihen, miltä lopputulos näyttää.
         </p>
         <p>
-          Orientaatioviikko järjestetään 06.09.2021-10.09.2021, mutta jo ennen sitä sinulla on mahdollisuus tulla tutustumaan meihin, muihin fuksiehin ja ISOihin Varaslähtöön.
+          Orientaatioviikko järjestetään 29.08.2022-02.09.2022, mutta jo ennen sitä sinulla on mahdollisuus tulla tutustumaan meihin, muihin fuksiehin ja ISOihin rennon Varaslähtöön. Varaslähtö fuksivuoteen järjestetään 20.8.2022. Siitä lisää Telegram-ryhmissä!
-          Varaslähtö fuksivuoteen järjestetään 27.8.2021. Siitä lisää Telegram-ryhmissä.!
         </p>
 
-        <h6>Toni Ojala</h6>
+        <h6>Melisa Dönmez</h6>
-        <p>040 414 8797 <br />toni.ojala (ät) sahkoinsinoorikilta.fi</p>
+        <p>044 239 2385 <br />melisa.donmez (ät) sahkoinsinoorikilta.fi <br />@melisadonmez</p>
 
-        <h6>Toni Lyttinen</h6>
+        <h6>Eveliina Ahonen</h6>
-        <p>044 238 3546 <br />toni.lyttinen (ät) sahkoinsinoorikilta.fi</p>
+        <p>050 911 8818 <br />eveliina.ahonen (ät) sahkoinsinoorikilta.fi <br />@ahoonen</p>
       </div>
       <aside>
         <div>
@@ -103,19 +102,14 @@ const FreshmenPageView: React.FC = () => (
         </div>
         <div>
           <InfoBox>
-            <Link to="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2021.pdf" target="_blank">
-              <FopasImage
-                src="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2021-kansi.png"
-              />
-            </Link>
             <h6>Killan Fuksiopas</h6>
-            <p>Ennen opintojen alkua on hyvä tutustua killan fuksioppaaseen. Sitä pääset selailemaan
+            <p>
-              <Link to="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2021.pdf" target="_blank"> tästä.</Link>
+              Ennen opintojen alkua on hyvä tutustua killan fuksioppaaseen. Tulette saamaan sen postitse ja se linkataan tähän heti kun se on julkaistu
             </p>
             <br />
             <h6>Telegram?</h6>
             <p>
-              Telegram on pikaviestinpalvelu, jota käytetään otaniemessä paljon.
+              Telegram on pikaviestinpalvelu, jota käytetään Otaniemessä paljon.
               Hieman samanlainen kuin Whatsapp, mutta ominaisuuksiltaan paremmaksi todettu.
               Lisätietoja: <Link to="https://telegram.org/faq" target="_blank">https://telegram.org/faq</Link>.
             </p>
@@ -123,14 +117,14 @@ const FreshmenPageView: React.FC = () => (
               SIK:n fukseilla on oma Telegram-ryhmä, jonne pääset liitymään tästä:
             </p>
             <QRImages
-              src="https://static.sahkoinsinoorikilta.fi/FTMK/sik-fuksit-2021-tg.png"
+              src="https://static.sahkoinsinoorikilta.fi/FTMK/sik-fuksit-2022.jpg"
             />
-            <p>tai <Link to="https://tinyurl.com/sik-fuksit-2021" target="_blank">tästä</Link></p>
+            <p>tai <Link to={TG_GROUP_CHAT_LINK} target="_blank">tästä</Link></p>
             <p>Liity myös samalla SIK-fuksien tiedotuskanavalle tästä:</p>
             <QRImages
-              src="https://static.sahkoinsinoorikilta.fi/FTMK/sik-fuksit-2021-tiedotus-tg.png"
+              src="https://static.sahkoinsinoorikilta.fi/FTMK/sik-fuksit-2022-tiedotus.jpg"
             />
-            <p>tai <Link to="https://tinyurl.com/sik-fuksit-2021-tiedotus" target="_blank">tästä</Link></p>
+            <p>tai <Link to={TG_NOTIFICATIONS_LINK} target="_blank">tästä</Link></p>
           </InfoBox>
         </div>
       </aside>
@@ -147,20 +141,16 @@ const FreshmenPageView: React.FC = () => (
       <h3 id="isot">Isoryhmät</h3>
       <div>
         <p>
-          SIK:n fuksit nauttivat hurmaavien ISOhenkilöidensä opastuksesta ja hellästä huolenpidosta somissa ja omissa fuksiryhmissään.
+        SIK:n fuksit nauttivat hurmaavien ISOhenkilöidensä opastuksesta ja hellästä huolenpidosta omissa fuksiryhmissään.
         </p>
         <p>
-          ISOt ovat hiukan vanhempia opiskelijoita ja kiltalaisia, joiden tehtävänä on olla tukenasi fuksivuoden ajan.
+        ISOt ovat hiukan vanhempia opiskelijoita ja kiltalaisia, joiden tehtävänä on olla tukenasi fuksivuoden ajan. Ensimmäisenä päivänä teidät jaetaan noin kymmenen hengen fuksiryhmiin ja jokaiseen ryhmään kuuluu kolmesta viiteen ISOa, joista yksi toimii opintoISOna. ISOilta voit kysyä mitä vain opiskeluun ja opiskelijaelämään liittyen. Vaikka he eivät tietäisi vastausta, he luultavimmin osaavat auttaa sinua vastausten löytämisessä.
-          Ensimmäisenä päivänä teidät jaetaan noin kymmenen hengen fuksiryhmiin ja jokaiseen ryhmään kuuluu kolmesta viiteen ISOa, joista yksi toimii opintoISOna.
-          ISOilta voit kysyä mitä vain opiskeluun ja opiskelijaelämään liittyen.
-          Vaikka he eivät tietäisi vastausta, he luultavimmin osaavat auttaa sinua vastausten löytämisessä.
         </p>
         <p>
-          Kuten sanottu ISOt tukevat sinua koko fuksivuoden ajan, mutta eniten tulet näkemään heitä Orientaatioviikolla, jolloin he kulkevat fuksiryhmäsi kanssa ympäri Otaniemeä ja avaavat ovia teekkariuden saloihin.
+          Kuten sanottu ISOt tukevat sinua koko fuksivuoden ajan, mutta eniten tulet näkemään heitä Orientaatioviikolla, jolloin he kulkevat fuksiryhmäsi kanssa ympäri Otaniemeä ja avaavat ovia teekkariuden saloihin. He auttavat sinua myös löytämään opintojen aloittamiseen tarvittavat asiat ja tukevat esimerkiksi lukujärjestyksen tekemisessä ja kirjastokortin, sekä matkakortin ja opiskelijakortin hankkimisessa.
-          He auttavat sinua myös löytämään opintojen aloittamiseen tarvittavat asiat ja tukevat esimerkiksi lukujärjestyksen tekemisessä ja kirjastokortin, sekä matkakortin ja opiskelijakortin hankkimisessa.
         </p>
         <p>
-          ISOt ovat myös kutsuttuna fuksivuotesi ensimmäiseen tapahtumaan, eli Varaslähtöön. Tule tutustumaan heihin sinne!
+          ISOt ovat myös kutsuttuna fuksivuotesi ensimmäiseen tapahtumaan, eli Varaslähtöön. Tule tutustumaan heihin jo siellä!
         </p>
       </div>
     </TextSection>

src/views/FrontPage/FrontPageView.tsx

@@ -2,19 +2,17 @@ import React from "react";
 import Image from "next/image";
 import styled from "styled-components";
 import {
-  Card,
-  PageLink,
   Divider,
-  CardSection,
   CTASection,
   Link,
 } from "@components/index";
+import Events from "@components/Feed/Events";
+import Posts from "@components/Feed/Posts";
 import Event from "@models/Event";
 import Post from "@models/Feed";
 import colors from "@theme/colors";
 
 import FullWidthSection from "@components/Sections/FullWidthSection";
-import noop from "@utils/noop";
 import FrontPageHero from "./FrontPageHero";
 
 // Corporate logos import
@@ -81,30 +79,8 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
       SIK100
     </CTASection>
     <main>
-      <CardSection>
-        {events.map((event) => (
-          <Card
-            key={event.id}
-            title={event.title_fi}
-            startTime={new Date(event.start_time).toLocaleString("fi-FI", cardTimeOpts)}
-            text={event.description_fi}
-            link={`/events/${event.id}`}
-            image={{
-              src: event.image || event.tags[0].icon,
-              alt: event.title_fi,
-            }}
-            buttonOnClick={noop}
-            buttonText="Lue lisää&nbsp;›"
-            data-e2e="event-card"
-          />
-        ))}
-        <aside>
-          <PageLink to="/kilta/toiminta#tapahtumat" desc="löydät tapahtumakalenterista&nbsp;›">
-            Kaikki tapahtumat
-          </PageLink>
-        </aside>
 
-      </CardSection>
+      <Events events={events} lang="fi" />
 
       <CTASection
         bgColor="orange1"
@@ -114,30 +90,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
         Sössöä vuodesta 1969.
       </CTASection>
 
-      <CardSection>
+      <Posts feed={feed} lang="fi" />
-        {feed.map((inst) => (
-          <Card
-            key={inst.id}
-            title={inst.title_fi}
-            startTime={new Date(inst.publish_time).toLocaleString("fi-FI", cardTimeOpts)}
-            text={inst.description_fi}
-            link={`/feed/${inst.id}`}
-            buttonOnClick={noop}
-            buttonText="Lue lisää&nbsp;›"
-          />
-        ))}
-        <aside>
-          <PageLink to="/kilta/toiminta#uutiset" desc="uutiset&nbsp;›">
-            Lue tuoreimmat uutiset
-          </PageLink>
-          <PageLink to="https://static.sahkoinsinoorikilta.fi/Poytakirjat/" desc="ja hallitukset kuulumiset&nbsp;">
-            Hallituksen pöytäkirjat
-          </PageLink>
-          <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
-            Kuvia tapahtumista
-          </PageLink>
-        </aside>
-      </CardSection>
 
       <Divider />
 
@@ -152,7 +105,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
               <Image src={Caruna} alt="Caruna" layout="responsive" width={200} height={100} objectFit="contain" />
             </Link>
             <Link to="https://new.siemens.com/fi/fi.html">
-              <Image src= {Siemens} alt="Siemens" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={Siemens} alt="Siemens" layout="responsive" width={200} height={100} objectFit="contain" />
             </Link>
             <Link to="https://www.eaton.com/us/en-us.html">
               <Image src={Eaton} alt="Eaton" layout="responsive" width={200} height={100} objectFit="contain" />

src/views/InEnglishPage/InEnglishPageView.tsx

@@ -2,8 +2,6 @@ import React from "react";
 import breakpoints from "@theme/breakpoints";
 import styled from "styled-components";
 import {
-  Card,
-  CardSection,
   CrossFadeImages,
   CTASection,
   Divider,
@@ -11,9 +9,10 @@ import {
   PageLink,
   TextSection,
 } from "@components/index";
+import Events from "@components/Feed/Events";
+import Posts from "@components/Feed/Posts";
 import Event from "@models/Event";
 import Post from "@models/Feed";
-import noop from "@utils/noop";
 import InEnglishPageHero from "./InEnglishPageHero";
 
 const Gallery = styled.div`
@@ -202,29 +201,8 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
 
       <Divider />
 
-      <CardSection id="events">
+      <Events events={events} lang="en" />
-        {events.map((event) => (
+
-          <Card
-            key={event.id}
-            title={event.title_en}
-            startTime={new Date(event.start_time).toLocaleString("en-GB", cardTimeOpts)}
-            text={event.description_en}
-            link={`/events/${event.id}`}
-            image={{
-              src: event.image || event.tags[0].icon,
-              alt: event.title_en,
-            }}
-            buttonOnClick={noop}
-            buttonText="Read more&nbsp;›"
-            data-e2e="event-card"
-          />
-        ))}
-        <aside>
-          <PageLink to="/kilta/toiminta#tapahtumat" desc="you can find all events from the event calendar&nbsp;›">
-            All events
-          </PageLink>
-        </aside>
-      </CardSection>
       <CTASection
         bgColor="orange1"
         link="https://sosso.fi"
@@ -232,30 +210,8 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
       >
         Sössö since 1969.
       </CTASection>
-      <CardSection>
+
-        {feed.map((inst) => (
+      <Posts feed={feed} lang="en" />
-          <Card
-            key={inst.id}
-            title={inst.title_en}
-            startTime={new Date(inst.publish_time).toLocaleString("en-GB", cardTimeOpts)}
-            text={inst.description_en}
-            link={`/feed/${inst.id}`}
-            buttonOnClick={noop}
-            buttonText="Read more&nbsp;›"
-          />
-        ))}
-        <aside>
-          <PageLink to="/kilta/toiminta#uutiset" desc="news&nbsp;›">
-            Read news
-          </PageLink>
-          <PageLink to="https://static.sahkoinsinoorikilta.fi/Poytakirjat/" desc="and what the board has been up to&nbsp;">
-            Board meeting records
-          </PageLink>
-          <PageLink to="https://sik.kuvat.fi" desc="in the photo gallery&nbsp;›">
-            Photos from events
-          </PageLink>
-        </aside>
-      </CardSection>
     </main>
   </>
 );