Add Board pages

gatsby-config.js

@@ -23,15 +23,33 @@ module.exports = {
         },
       },
     },
+    `gatsby-transformer-json`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {
+        name: 'pages',
         path: `${__dirname}/src/pages`,
         // Ignore any file starting with an underscore.
         // Those files are reserved for client-only routes.
         ignore: [`**/_*`],
       },
     },
+    {
+      // Load all current board files automatically
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `board`,
+        path: `${__dirname}/src/content/board/current`,
+      },
+    },
+    {
+      // Load all board history files automatically
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `board_history`,
+        path: `${__dirname}/src/content/board/history`,
+      },
+    },
     {
       resolve: `gatsby-plugin-material-ui`,
       options: {

package-lock.json

@@ -2063,9 +2063,9 @@
       "integrity": "sha512-1dVNHT76Uu5N3eJNTYcvxee+jzX4Z9lfciqRRHCU27ihbUcYi+iSc2iml5Ke1LXe1SyJCLA0+14Jh4tXJgOppA=="
     },
     "@hapi/hoek": {
-      "version": "8.5.0",
-      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.0.tgz",
-      "integrity": "sha512-7XYT10CZfPsH7j9F1Jmg1+d0ezOux2oM2GfArAzLwWe4mE2Dr3hVjsAL6+TFY49RRJlCdJDMw3nJsLFroTc8Kw=="
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-8.5.1.tgz",
+      "integrity": "sha512-yN7kbciD87WzLGc5539Tn0sApjyiGHAJgKvG9W8C7O+6c7qmoQMfVs0W4bX17eqz6C78QJqqFrtgdK5EWf6Qow=="
     },
     "@hapi/joi": {
       "version": "15.1.1",
@@ -9758,6 +9758,25 @@
         }
       }
     },
+    "gatsby-transformer-json": {
+      "version": "2.2.26",
+      "resolved": "https://registry.npmjs.org/gatsby-transformer-json/-/gatsby-transformer-json-2.2.26.tgz",
+      "integrity": "sha512-JpjeL44AbUxA7gnTxVWd+F6IgGIKE8stFywg1ZLn7bbSHKpKUatN6UXw7PSZDac+9aSaDTEAqWFhOX/z3BqE3Q==",
+      "requires": {
+        "@babel/runtime": "^7.7.6",
+        "bluebird": "^3.7.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
+          "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.2"
+          }
+        }
+      }
+    },
     "gatsby-transformer-sharp": {
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.3.9.tgz",

package.json

@@ -29,6 +29,7 @@
     "gatsby-plugin-remove-trailing-slashes": "^2.1.20",
     "gatsby-plugin-sharp": "^2.3.10",
     "gatsby-source-filesystem": "^2.1.43",
+    "gatsby-transformer-json": "^2.2.26",
     "gatsby-transformer-sharp": "^2.3.9",
     "html-escape": "^2.0.0",
     "immer": "^5.2.1",

src/components/board/imageGroup.js

+import React from 'react'
+import PropTypes from 'prop-types'
+import { useIntl } from 'gatsby-plugin-intl'
+import { makeStyles } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core'
+
+import Image from '../general/image'
+
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      display: 'grid',
+      marginBottom: '8em',
+      gridGap: '2em',
+      gridTemplateColumns: '1fr 1fr',
+      gridTemplateAreas: "'title title' 'image description'",
+      [theme.breakpoints.down('sm')]: {
+        gridTemplateColumns: '1fr',
+        gridTemplateAreas: "'title' 'image' 'description' !important",
+      },
+
+      '&:nth-child(even)': {
+        gridTemplateAreas: "'title title' 'description image'",
+      },
+    },
+    title: {
+      gridArea: 'title',
+      width: '100%',
+      textAlign: 'center',
+      marginBottom: '0.7em',
+    },
+    image: {
+      gridArea: 'image',
+      borderRadius: '4px',
+      overflow: 'hidden',
+    },
+    description: {
+      gridArea: 'description',
+      textAlign: 'justify',
+      fontSize: '0.8em',
+      [theme.breakpoints.down('sm')]: {
+        width: '100%',
+      },
+    },
+  }),
+  { name: 'boardImageGroup' }
+)
+
+const BoardImageGroup = ({ title, image, children, className, ...props }) => {
+  const classes = useStyles()
+
+  return (
+    <div className={[classes.root, className].join(' ')} {...props}>
+      {title && (
+        <Typography variant="h3" className={classes.title}>
+          {title}
+        </Typography>
+      )}
+      <div className={classes.image}>
+        <Image src={image} alt={title} ratioX={3} ratioY={2} />
+      </div>
+      <div className={classes.description}>{children}</div>
+    </div>
+  )
+}
+
+BoardImageGroup.propTypes = {
+  /** Title visible above the image group */
+  title: PropTypes.string,
+  /** URL to the image */
+  image: PropTypes.string,
+  /** Description element(s) */
+  children: PropTypes.node,
+  /** @ignore */
+  className: PropTypes.string,
+}
+
+export default BoardImageGroup

src/components/board/portraitImageGroup.js

+import React from 'react'
+import PropTypes from 'prop-types'
+import { useIntl } from 'gatsby-plugin-intl'
+import { makeStyles } from '@material-ui/core/styles'
+import { Typography } from '@material-ui/core'
+
+import TranslatedContent from '../general/translatedContent'
+import amivWheel from '../../images/amiv-wheel.svg'
+
+const useStyles = makeStyles(
+  theme => ({
+    root: {
+      height: '100%',
+      display: 'grid',
+      gridTemplateRows: 'auto 1fr auto',
+    },
+    roles: {
+      textAlign: 'center',
+    },
+    description: {
+      textAlign: 'justify',
+      fontSize: '0.9em',
+    },
+  }),
+  { name: 'boardImageGroup' }
+)
+
+const BoardPortraitImageGroup = ({ data, className, ...props }) => {
+  const classes = useStyles()
+  const intl = useIntl()
+  const { showRoles, portraits } = data
+
+  const roles = new Set(
+    portraits.map(portrait =>
+      intl.formatMessage({ id: `board.roles.${portrait.role}` })
+    )
+  )
+
+  // return m('div', { className: !group.showRoles ? 'no-roles' : null }, [
+  //   group.showRoles && m('h2', Array.from(roles).join(' & ')),
+  //   image,
+  //   m('div.descriptions', [
+  //     m(Tabs, {
+  //       tabs: this._portraitNames.map(name => ({ label: name })),
+  //       className: 'themed-tabs',
+  //       activeSelected: true,
+  //       autofit: true,
+  //       element: 'tab',
+  //       selectedTabIndex: this._selectedTabIndex,
+  //       onChange: data => {
+  //         this._selectedTabIndex = data.index;
+  //       },
+  //     }),
+  //     m('div', this._portraitViews[this._selectedTabIndex]),
+  //   ]),
+  // ]);
+
+  return (
+    <div className={[classes.root, className].join(' ')} {...props}>
+      {showRoles && (
+        <Typography variant="h3" className={classes.roles}>{Array.from(roles).join(' & ')}</Typography>
+      )}
+    </div>
+  )
+}
+
+BoardPortraitImageGroup.propTypes = {
+  /** board data object */
+  data: PropTypes.object.isRequired,
+  /** @ignore */
+  className: PropTypes.string,
+}
+
+export default BoardPortraitImageGroup

src/components/general/tabPanel.js

+import React from 'react'
+import PropTypes from 'prop-types'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles(
+  {
+    root: {
+      // TODO
+    },
+    hidden: {
+      display: 'none',
+    },
+  },
+  { name: 'tabPanel' }
+)
+
+const TabPanel = ({ value, index, className, children, ...props }) => {
+  const classes = useStyles()
+
+  const hidden = value !== index
+
+  return (
+    <div
+      className={[
+        classes.root,
+        hidden ? classes.hidden : undefined,
+        className,
+      ].join(' ')}
+      {...props}
+    >
+      {!hidden && children}
+    </div>
+  )
+}
+
+TabPanel.propTypes = {
+  /** Currently selected value */
+  value: PropTypes.any.isRequired,
+  /** Index value of this item */
+  index: PropTypes.any.isRequired,
+  /** Content of the link (text) */
+  children: PropTypes.node.isRequired,
+  /** Additional class applied to the outermost box. */
+  className: PropTypes.string,
+}
+
+export default TabPanel

src/components/general/translatedContent.js

@@ -19,9 +19,9 @@ const TranslatedContent = ({
   let message = ''
   let hint = null
 
-  if (intl.locale in content) {
+  if (intl.locale in content && content[intl.locale]) {
     message = content[intl.locale]
-  } else if (intl.defaultLocale in content) {
+  } else if (intl.defaultLocale in content && content[intl.defaultLocale]) {
     message = content[intl.defaultLocale]
     hint = <TranslatedAlert shownLanguage={intl.defaultLocale} />
   } else {

src/components/teams/teamCard.js

@@ -80,7 +80,6 @@ const TeamCard = ({ team, className, ...props }) => {
               <a
                 key={index}
                 className={classes.action}
-                noIcon
                 href={item.url}
                 target="_blank"
                 rel="noopener noreferrer"

src/content/board/board_roles.json

+{
+  "president": {
+    "de": "Der Präsident ist für die Koordination der Arbeit des gesamten Vorstandes verantwortlich und repräsentiert den Fachverein nach aussen. Er beruft die Sitzungen und Generalversammlungen ein und delegiert die Arbeit an die einzelnen Ressorts. Er ist das Bindeglied zum Dachverband, dem VSETH. Erreichbar unter praesident@amiv.ethz.ch",
+    "en": "The president is responsible for coordinating the work of the entire board and represents the association to the outside world. He convenes the meetings and general assemblies and delegates the work to the individual departments. He is the link to the umbrella organization, the VSETH. Contact at praesident@amiv.ethz.ch"
+  },
+
+  "quaestor": {
+    "de": "Die Quästorin ist verantwortlich für die finanziellen Angelegenheiten des AMIV, namentlich für die Budgetierung und Rechnungsführung. Sie verwaltet zudem die Vereinskonten und prüft die Rechnungen aller Kommissionen. Für alles Finanzielle: quaestur@amiv.ethz.ch",
+    "en": "The Quaestor is responsible for the financial affairs of AMIV, namely budgeting and accounting. She also manages the bank accounts of the association and checks the bills of all commissions. Everything financial: quaestur@amiv.ethz.ch"
+  },
+
+  "it": {
+    "de": "Der IT Vorstand ist verantwortlich für alle Technik im AMIV. Dazu gehören zum Beispiel Webseite, Apps, Bierautomat, PVK Tool, Server, Workstations und die Organisation des Codingweekends. Alles was die Website angeht: webmaster@amiv.ethz.ch",
+    "en": "The head of IT is responsible for all technical stuff at AMIV. This includes maintaining the website, apps, beer dispenser, PVK tool, servers, workstations and leading the IT team. Everything regarding the website: webmaster@amiv.ethz.ch"
+  },
+
+  "information": {
+    "de": "Der Informationsvorstand koordiniert diverse Informationskanäle wie die Announce, Facebook und die gute alte Homepage, und stellt sicher, dass alle Studenten gut über des Geschehen in und um ihren Lieblingsverein informiert bleiben. Nicht zuletzt gehört auch das pflichtbewusste Beantworten von allem, was am Ende des Tages im info@amiv.ethz.ch Postfach übrigbleibt, dazu. Ausserdem leitet er das Design-Team, welches sich um das ganze AMIV Werbematerial kümmert.",
+    "en": "The head of communications coordinates various information channels such as the Announce, Facebook and the good old website, and ensures that all students stay well informed about the events in and around their favorite association. Last but not least, dutifully answering everything that remains at the end of the day in the info@amiv.ethz.ch mailbox is part of it. He also leads the design team, which takes care of the entire AMIV advertising material."
+  },
+
+  "eventPlanning": {
+    "de": "Neben einem anspruchsvollen und zeitintensivem Studium, das die ETH bekanntlich mit sich bringt, kommt das Sozialleben oft zu kurz. Deswegen geht das Ressort Kultur der Aufgabe nach, den Studenten ein abwechslungsreiches Freizeitangebot zu bieten. Die Kulturis organisieren diverse Veranstaltungen, bei denen unsere Mitglieder die Möglichkeit haben, sich gegenseitig kennenzulernen. Seit einem Jahr werden die Kultur-Vorstände vom Kulturteam bei der Event-Organisation unterstützt. In diesem Team kann jeder mitmachen, der Lust dazu hat. Zudem gibt es je nach Event noch zahlreiche Helfer, um alle anfallenden Arbeiten zu bewältigen. Interessenten melden sich bitte unter kultur@amiv.ethz.ch"
+  },
+
+  "universityPolicy": {
+    "de": "An der ETH haben die Studenten sehr viele Mitspracherechte – vielleicht mehr, als man gemeinhin so denkt. Die Hochschulpolitiker engagieren sich dabei (zusammen mit einem HoPo-Team pro Departement) in den Departements- und Unterrichtskonferenzen der beiden vom AMIV abgedeckten Departementen. Zudem sind sie Ansprechpartner für alle möglichen Studiumsbezogenen Fragen, organisieren Prüfungsvorbereitungskurse und führen Vorlesungs-Evaluationen mittels Semestersprechern sowie Tutorenabende für Studenten aus den tieferen Semestern durch. Hast du Fragen oder Anregungen? Melde dich ganz unverbindlich beim entsprechenden HoPo-Team unter  hopo-itet@amiv.ethz.ch oder hopo-mavt@amiv.ethz.ch"
+  },
+
+  "universityPolicyItet": {
+    "de": "An der ETH haben die Studenten sehr viele Mitspracherechte – vielleicht mehr, als man gemeinhin so denkt. Die Hochschulpolitiker engagieren sich dabei (zusammen mit einem HoPo-Team pro Departement) in den Departements- und Unterrichtskonferenzen der beiden vom AMIV abgedeckten Departementen. Zudem sind sie Ansprechpartner für alle möglichen Studiumsbezogenen Fragen, organisieren Prüfungsvorbereitungskurse und führen Vorlesungs-Evaluationen mittels Semestersprechern sowie Tutorenabende für Studenten aus den tieferen Semestern durch. Hast du Fragen oder Anregungen? Melde dich ganz unverbindlich beim entsprechenden HoPo-Team unter  hopo-itet@amiv.ethz.ch oder hopo-mavt@amiv.ethz.ch"
+  },
+
+  "universityPolicyMavt": {
+    "de": "An der ETH haben die Studenten sehr viele Mitspracherechte – vielleicht mehr, als man gemeinhin so denkt. Die Hochschulpolitiker engagieren sich dabei (zusammen mit einem HoPo-Team pro Departement) in den Departements- und Unterrichtskonferenzen der beiden vom AMIV abgedeckten Departementen. Zudem sind sie Ansprechpartner für alle möglichen Studiumsbezogenen Fragen, organisieren Prüfungsvorbereitungskurse und führen Vorlesungs-Evaluationen mittels Semestersprechern sowie Tutorenabende für Studenten aus den tieferen Semestern durch. Hast du Fragen oder Anregungen? Melde dich ganz unverbindlich beim entsprechenden HoPo-Team unter  hopo-itet@amiv.ethz.ch oder hopo-mavt@amiv.ethz.ch"
+  },
+
+  "externalRelations": {
+    "de": "Die Mitglieder des Ressorts External Relations bauen neue Kontakte zur Wirtschaft auf und pflegen bereits vorhandene. Hauptaufgabe ist die Beschaffung von Sponsoringgeldern und der Informationsaustausch zwischen Industrie und Studenten – um Mehrwert für die Studenten zu schaffen. Zusammen mit dem Präsidenten sind die Vorstände dieses Ressorts das Gesicht des AMIV nach aussen. Ausserdem organisieren sie jeweils im Herbstsemester die grosse AMIV Firmenkontaktmesse «AMIV Kontakt». Um auch während dem Semester interessante Exkursionen anbieten zu können, sind die beiden auf externe Mithilfe angewiesen. Hast du Lust, das ER-Team im Bereich Exkursionen, Kontakt oder Sponsoring zu unterstützen? Dann melde dich kurz unter  kontakt@amiv.ethz.ch"
+  },
+
+  "infrastructure": {
+    "de": "Nic ist für sämtliche Räumlichkeiten des AMIV und der darin enthaltenen, dem Verein gehörenden, Einrichtung und deren Zustand verantwortlich. Die Gestaltung und Zuordnung im Kulturraumes, Regeln für den Aufenthaltsraum und die Getränkeversorgung beanspruchen die meiste Zeit seinerTätigkeit als Vorstand. Es freut ihn jeweils, wenn er sieht, wie AMIVler denn Müll trennen und sich um Ordnung und Sauberkeit bemühen. Für sämtliche Anliegen, Anreize und Ideen hat er stets ein offenes Ohr und freut sich auf eine Mail von euch. [infrastruktur@amiv.ethz.ch](mailto:infrastruktur@amiv.ethz.ch)"
+  }
+}

src/content/board/current/01_luca.json

+{
+  "showRoles": true,
+  "portraits": [
+    {
+      "role": "president",
+      "name": "Luca Dahle",
+      "description": {
+        "de": "\"Luca, was muss unbedingt in die Beschreibung über dich?\" \"Luca ist heiss und reich.\"\n\nIm AMIV Büro gilt Luca eigentlich schon als Urgestein. Bereits seit 2014 ist er dort anzutreffen und kennt den AMIV wie wohl nur wenige andere. Dies rührt nicht zuletzt daher, dass er zu seiner Zeit bereits Infra-Vorstand war, und er praktisch rund um die Uhr im Büro anzutreffen ist, meist mit einer Hülse in der Hand gemütlich jassend («Warum chunnsch nöd mitem Buur du A****loch?») oder, seit er sein neues Amt innehat, sogar auch am Schreibtisch arbeitend. So bleibt nichts, was im AMIV passiert, von ihm unbemerkt, was ihm in seiner Position als neues Oberhaupt sehr gelegen kommt. Das ermöglicht ihm mit seinem ausgeprägten Gerechtigkeitssinn und seinem Flair für Schlagermusik im Hause AMIV Frieden und Freude walten zu lassen."
+      }
+    }
+  ]
+}

src/content/board/current/02_lea.json

+{
+  "showRoles": true,
+  "portraits": [
+    {
+      "role": "quaestor",
+      "name": "Lea Kotthoff",
+      "description": {
+        "de": "Lea, auch als Leanidas oder „die Kasse“ bekannt, hat ihre AMIV-Karriere im LIMES gestartet. Den Quästur-Posten hat sie dort mit viel Bravour gemeistert. Doch die Limes Kasse war ihr nicht gross genug, weshalb sie den Aufstieg zur AMIV Quästorin gewagt hat. Diesen Job verrichtet sie mit solchem Engagement, dass sie quasi schon mit ihm zu einem verschmolzen ist. Daher stammt auch der Name: Lea, die Kasse.\n\nNeben dem AMIV ist Lea auch oft im ASVZ oder beim Leichtathletik Training vorzufinden. Zudem gibt sie im Winter Snowboardunterricht und wird im Sommer von Reality-TV Stars auf Kaffees eingeladen. \n\nFun Fact: Lea hat noch nie Spongebob gesehen, jedoch konnte sie die Zahl Pi bis zur 100. Nachkommastelle auswendig."
+      }
+    }
+  ]
+}

src/content/board/current/03_luzi.json

+{
+  "showRoles": true,
+  "portraits": [
+    {
+      "role": "it",
+      "name": "Luzian Bieri",
+      "description": {
+        "de": "Seine Anfänge im AMIV hatte Luzi bereits am ESW. Schnell war klar, dass er für den AMIV wie geschaffen war (sein Kürzel ist luziBIER, for real?!). Er trat der Brauko bei und wurde Kulturi der Leiden (schafft), womit er sich im AMIV schnell einen Namen machte. Auch der Kontakt drückt er als PR Verantwortlicher seinen Stempel auf und meistert diese Aufgabe mit Bravour und einer unglaublicher Effizienz, wie man sie von einem Berner kaum gewohnt ist.\n\nDoch das war Luzi noch alles nicht genug, weshalb er sich zusätzlich den Posten als Quästor des AMIV aufhalste. Dies alles führt dazu, dass Luzi 24/7 im Büro anzutreffen ist und schon fast zum Inventar gehört. Man munkelt dass er immer wieder seine pyromaische Ader auslebt und allen möglichen Materialien einem Feuertest unterzieht, weshalb zu hoffen ist, dass das Büro Luzis Amtszeit übersteht.\n\nDa er noch nicht genug vom AMIV hatte, entschied er sich ein weiteres Semester als IT-Vorstand weiterzumachen."
+      }
+    }
+  ]
+}

src/content/board/current/04_fran.json

+{
+  "showRoles": true,
+  "portraits": [
+    {
+      "role": "information",
+      "name": "Francesca Burlini",
+      "description": {
+        "de": "Hi guys, ich heisse Fran. Zu meinen Lieblingshobbies gehören Jäggitöggele und Besteigen der Gondel. Ich habs auch schon nach einem halben Jahr auf die Employee-of-the-month Tafel im AMIV-Büro geschafft #goals. Aber jetzt Spass beiseite. Im AMIV habe ich schon viel geleistet: Ich habe in vielen OKs wie beim Pokerturnier, Beachvolleyball und der Ersti-Rallye mitgemacht und helfe sonst auch überall mit. Ich freue mich euch in Zukunft über Social Media auf neustem Stand des AMIVs zu halten. Mit Polls, Countdowns und ganz vielen tollen Pics!\n\n.\n\n.\n\n#frannounce #dieschwachenimmts #nasty #wegendersicherheit #whereisashley #tümmersvakumiere #cringe #bliboischläbe #nastyboy #ichwettkeinnastynitchtrinke #sick #lowkeynasty #frannygranny #nödimpressed #hodenkobold #asemotionallystableasanikeatable #gsi #sänkiu"
+      }
+    }
+  ]
+}

src/content/board/current/05_max.json

+{
+  "showRoles": true,
+  "portraits": [
+    {
+      "role": "eventPlanning",
+      "name": "Max Aspect",
+      "description": {
+        "de": "Ein ungewöhnlicher Weg führte Max nach Zürich. Mr. Cosmopolitan ist in Paris geboren, hat in Düsseldorf den Kindergarten besucht, wieder zurück in Paris das französische Schulsystem getestet und zu guter Letzt in Zürich die Schule abgeschlossen.\n\nAngekommen an der ETH führte für den Kulturi aus Leidenschaft kein Weg am AMIV vorbei. Schnell gab es kaum eine Kommission im AMIV die noch vor Max sicher war. Sein Engagement beim blitz, Braukommission, Irrational Co., EESTEC und RandomDudes dienten ihm als perfekte Vorbereitung für seine Aufgaben als Kulturvorstand. Es ist erstaunlich, dass er neben all diesen Tätigkeiten sogar ab und zu noch Zeit für sein Maschinenbaustudium findet."
+      }
+    }
+  ]
+}