Dev to master

.github/workflows/projects.yml

@@ -0,0 +1,25 @@
+name: projects
+
+on:
+  issues:
+    types:
+      - opened
+  pull_requests:
+    types:
+      - opened
+
+jobs:
+  add-to-project:
+    name: Add opened issue or PR to CommITCrowd project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/[email protected]
+        with:
+          # URL of the project to add issues to
+          project-url: https://github.com/orgs/svsticky/projects/7
+          # A GitHub personal access token with write access to the project
+          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
+          # A comma-separated list of labels to use as a filter for issue to be added
+          # labeled: # optional
+          # The behavior of the labels filter, AND to match all labels, OR to match any label, NOT to exclude any listed label (default is OR)
+          # label-operator: # optional

.gitignore

@@ -70,3 +70,6 @@ pnpm-lock.yaml
 .yarn-integrity
 # semantic dist
 src/semantic/dist
+
+# IDEA
+.idea/

src/components/Drinks.jsx

@@ -1,22 +1,12 @@
 import React from 'react';
 import { Card } from 'semantic-ui-react';
 import { graphql, StaticQuery } from 'gatsby';
-import { getTranslation, getLanguage, metadata } from '../data/i18n';
+import { getLanguage, metadata } from '../data/i18n';
+import Markdown from 'markdown-to-jsx';
 
 class Drinks extends React.Component {
   renderDescription = (drinks, lg) => {
-    return (
-      <>
-        {drinks.description}
-        <b>
-          {getTranslation(lg, 'drinks.when', [
-            drinks.day,
-            drinks.time,
-            drinks.location,
-          ])}
-        </b>
-      </>
-    );
+    return <Markdown>{drinks.descriptionlong.descriptionlong}</Markdown>;
   };
 
   render() {
@@ -42,12 +32,11 @@ const drinksQuery = graphql`
   query drinksQuery {
     allContentfulDrinks {
       nodes {
-        day
         node_locale
-        time
-        location
         title
-        description
+        descriptionlong {
+          descriptionlong
+        }
       }
     }
   }

src/components/IntroInformation.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Button, Card } from 'semantic-ui-react';
+import { graphql, StaticQuery } from 'gatsby';
+import { getLanguage, getTranslation, metadata } from '../data/i18n';
+
+class IntroInformation extends React.Component {
+  render() {
+    const language =
+      typeof window !== 'undefined'
+        ? getLanguage(window)
+        : metadata.defaultLocale;
+    let intro_information = this.props.data.allContentfulIntroInformation.nodes.filter(
+      d => d.node_locale === language
+    )[0]; //get only the first element
+
+    let color = this.props.data.contentfulBoard.color;
+    console.log(color);
+
+    return (
+      <>
+        <div>
+          <h2>{intro_information.title}</h2>
+          <Card fluid>
+            <div>{intro_information.description.description}</div>
+            <Button
+              href={intro_information.introWebsiteUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="button"
+              style={{ backgroundColor: color, color: 'white' }}
+            >
+              {intro_information.linkToWebsiteButtonText}
+            </Button>
+          </Card>
+        </div>
+      </>
+    );
+  }
+}
+
+const introInformationQuery = graphql`
+  query introInformationQuery {
+    allContentfulIntroInformation {
+      nodes {
+        node_locale
+        title
+        linkToWebsiteButtonText
+        description {
+          description
+        }
+        introWebsiteUrl
+      }
+    }
+    contentfulBoard(current: { eq: true }) {
+      color
+    }
+  }
+`;
+
+export default props => (
+  <StaticQuery
+    query={introInformationQuery}
+    render={data => <IntroInformation data={data} {...props} />}
+  />
+);

src/components/layout/GridDryQueries.jsx

@@ -23,6 +23,9 @@ const IndexWrapper = styled.div`
   .mainPartner {
     grid-area: mainPartner;
   }
+  .introInformation {
+    grid-area: introInformation;
+  }
 
   .banner {
     display: grid;
@@ -38,6 +41,7 @@ const IndexWrapper = styled.div`
       grid-template-areas:
         'logo'
         'banner'
+        'introInformation'
         'news'
         'news'
         'drinks'
@@ -64,6 +68,7 @@ const IndexWrapper = styled.div`
       grid-template-columns: 1fr 1fr;
       grid-template-areas:
         'banner banner'
+        'introInformation introInformation'
         'news news'
         'drinks mainPartner'
         'jobs activity';
@@ -80,6 +85,7 @@ const IndexWrapper = styled.div`
       grid-template-columns: 3fr 1fr;
       grid-template-areas:
         'banner banner'
+        'news introInformation'
         'news drinks'
         'news mainPartner'
         'news jobs'

src/data/en-us.json

@@ -1,7 +1,4 @@
 {
-  "drinks": {
-    "when": "Every {0} starting at {1} in the {2}!"
-  },
   "board": {
     "number": "Board {0}",
     "current": "The current board",

src/data/nl.json

@@ -1,7 +1,4 @@
 {
-  "drinks": {
-    "when": "Elke {0} vanaf {1} in de {2}!"
-  },
   "board": {
     "number": "Bestuur {0}",
     "current": "Het huidige bestuur",

src/static-pages/index.jsx

@@ -11,6 +11,7 @@ import MainPartnerBanner from '$/components/mainpartner/Banner';
 import IndexWrapper from '$/components/layout/GridDryQueries';
 import FeaturedJobWidget from '$/components/jobs/FeaturedJobWidget';
 import ActivityWidget from '$/components/activities/ActivityWidget';
+import IntroInformation from '$/components/IntroInformation';
 
 import logo from '$/images/sticky-logo-text.svg';
 
@@ -34,6 +35,9 @@ const Index = ({ data }) => {
           <div className="news">
             <News itemsPerPage="5" />
           </div>
+          <div className="introInformation">
+            <IntroInformation />
+          </div>
           <div className="drinks">
             <Drinks />
           </div>

src/templates/JobTemplate.jsx

@@ -31,14 +31,16 @@ const JobView = ({ data }) => {
               <Button primary href={'mailto:' + job.contactPerson.email} fluid>
                 {getTranslation(job.node_locale, 'vacancy.mail')}
               </Button>
-              <Button
-                primary
-                href={'tel:' + job.contactPerson.phone}
-                fluid
-                className="call-button"
-              >
-                {getTranslation(job.node_locale, 'vacancy.call')}
-              </Button>
+              {job.contactPerson.phone && (
+                <Button
+                  primary
+                  href={'tel:' + job.contactPerson.phone}
+                  fluid
+                  className="call-button"
+                >
+                  {getTranslation(job.node_locale, 'vacancy.call')}
+                </Button>
+              )}
             </Card>
           )}
         </div>