Browse Source

Start building event pages

merge-requests/3/head
Yannik Rödel 8 months ago
parent
commit
2bdca6c878
9 changed files with 141 additions and 14 deletions
  1. +1
    -1
      data/events/2018-10-27/event.md
  2. +1
    -0
      data/events/2018-10-27/recap.md
  3. +1
    -1
      data/events/2018-12-01/event.md
  4. +1
    -0
      data/events/2018-12-01/recap.md
  5. +3
    -1
      data/events/2019-04-06/event.md
  6. +44
    -5
      gatsby-node.js
  7. +10
    -4
      src/components/upcomingEvent.tsx
  8. +9
    -2
      src/pages/index.tsx
  9. +71
    -0
      src/templates/eventTemplate.tsx

+ 1
- 1
data/events/2018-10-27/event.md View File

@@ -1,9 +1,9 @@
---
title: 'Herbst 2018'
date: '2018-10-27'
start: '10:00'
end: '15:00'
location: 'Stadtbücherei Würzburg'
address: 'Markplatz 9'
city: '97070 Würzburg'
title: 'Herbst 2018'
---

+ 1
- 0
data/events/2018-10-27/recap.md View File

@@ -1,4 +1,5 @@
---
date: '2018-10-27'
participants: 32
team: 12
---

+ 1
- 1
data/events/2018-12-01/event.md View File

@@ -1,9 +1,9 @@
---
title: 'Winter 2018'
date: '2018-12-01'
start: '10:00'
end: '17:00'
location: 'FHWS'
address: 'Sanderheinrichsleitenweg 20'
city: '97074 Würzburg'
title: 'Winter 2018'
---

+ 1
- 0
data/events/2018-12-01/recap.md View File

@@ -1,4 +1,5 @@
---
date: '2018-12-01'
participants: 39
team: 20
---

+ 3
- 1
data/events/2019-04-06/event.md View File

@@ -1,12 +1,14 @@
---
title: 'WueWW 2019'
date: '2019-04-06'
start: '10:00'
end: '16:00'
location: 'Neue Universität'
address: 'Sanderring 2'
city: '97070 Würzburg'
title: 'WueWW 2019'
latlon: [49.78818, 9.93526]
sponsorLogo: '../../../assets/venues/Mayflower.png'
sponsorLink: 'https://mayflower.de/'
---

Dank [Mayflower](https://mayflower.de/) nehmen wir dieses Jahr zum ersten Mal an der

+ 44
- 5
gatsby-node.js View File

@@ -1,9 +1,10 @@
/* eslint-disable */
const path = require('path'); // eslint-disable-line @typescript-eslint/no-var-requires

const path = require('path');

exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
/**
* Add webkit aliases to ease imports. These are matched with those from tsconfig.json.
*/
exports.onCreateWebpackConfig = ({ actions: { setWebpackConfig } }) => {
setWebpackConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
@@ -12,3 +13,41 @@ exports.onCreateWebpackConfig = ({ actions }) => {
},
});
};

/**
* Create pages for individual events.
*/
exports.createPages = ({ actions: { createPage }, graphql }) => {
const eventPageTemplate = path.resolve(__dirname, 'src', 'templates', 'eventTemplate.tsx');

return graphql(`
{
allMarkdownRemark(
filter: { frontmatter: { title: { ne: "" } }, fields: { sourceName: { eq: "events" } } }
sort: { order: DESC, fields: [frontmatter___date] }
) {
edges {
node {
frontmatter {
date
}
}
}
}
}
`).then(result => {
if (result.errors) {
return Promise.reject(result.errors);
}

result.data.allMarkdownRemark.edges.forEach(({ node: { frontmatter: { date } } }) => {
createPage({
path: `/${date}`,
component: eventPageTemplate,
context: {
date,
},
});
});
});
};

+ 10
- 4
src/components/upcomingEvent.tsx View File

@@ -25,6 +25,8 @@ export interface EventInformation {
city: string;
teaser?: string;
latlon: [number, number];
sponsorLogo?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
sponsorLink?: string;
}

const Wrap = styled.div`
@@ -65,10 +67,11 @@ const Wrap = styled.div`
`}
`;

const Logo = styled(Img)`
const Logo = styled.a`
position: absolute !important;
right: 0;
bottom: 100%;
display: inline-block;
`;

const When = styled.p`
@@ -168,12 +171,15 @@ class Map extends React.Component {

export interface UpcomingEventProps {
event: EventInformation;
logo: any; // eslint-disable-line @typescript-eslint/no-explicit-any
}
const UpcomingEvent = ({ event, logo }: UpcomingEventProps): JSX.Element => (
const UpcomingEvent = ({ event }: UpcomingEventProps): JSX.Element => (
<>
<Wrap>
{logo && <Logo fixed={logo.childImageSharp.fixed} />}
{event.sponsorLogo && (
<Logo href={event.sponsorLink || undefined}>
<Img fixed={event.sponsorLogo.childImageSharp.fixed} />
</Logo>
)}
<When>
<strong>{event.date}</strong>
<br />

+ 9
- 2
src/pages/index.tsx View File

@@ -146,7 +146,6 @@ const IndexPage = ({ data }: IndexPageProps): JSX.Element => (
...data.nextEvent.edges[0].node.frontmatter,
teaser: data.nextEvent.edges[0].node.html,
}}
logo={data.mayflower}
/>

<h1>Newsletter</h1>
@@ -205,7 +204,7 @@ export const query = graphql`
}
}
nextEvent: allMarkdownRemark(
filter: { frontmatter: { date: { ne: null } }, fields: { sourceName: { eq: "events" } } }
filter: { frontmatter: { title: { ne: "" } }, fields: { sourceName: { eq: "events" } } }
sort: { order: DESC, fields: [frontmatter___date] }
limit: 1
) {
@@ -220,6 +219,14 @@ export const query = graphql`
address
city
latlon
sponsorLogo {
childImageSharp {
fixed(height: 48) {
...GatsbyImageSharpFixed_withWebp_tracedSVG
}
}
}
sponsorLink
}
html
}

+ 71
- 0
src/templates/eventTemplate.tsx View File

@@ -0,0 +1,71 @@
/**
* Recap / info page listing previous and upcoming events.
*/

import React from 'react';
import { graphql } from 'gatsby';

import Layout from '@/layouts/main';
import { EventInformation } from '@/components/upcomingEvent';

export interface EventPageProps {
data: {
event: {
frontmatter: EventInformation;
};
recap: {
frontmatter: {
participants: number;
team: number;
};
html: string;
};
};
}
const EventPage = ({ data: { event, recap } }: EventPageProps): JSX.Element => (
<Layout navbarTitle="Vergangene Veranstaltungen">
<h1>Unser Tagebuch</h1>

<p>
Hier findest Du Informationen zu vergangen und geplanten CoderDojos. Außerdem bieten wir allen
Teilnehmern die Möglichkeit - anonym oder nicht - ihre während der Veranstaltung erstellten
Projekte hochzuladen und so ein Archiv über die Werke zu führen.
</p>
<p>
Falls Du nicht mehr möchtest, dass dein Bild oder Projekt hier gezeigt wird,{' '}
<a href="mailto:kontakt@coderdojo-wue.de">schreibe</a> uns doch bitte.
</p>

<h1>{event.frontmatter.title}</h1>
<p>{recap.frontmatter.participants}</p>
</Layout>
);
export default EventPage;

export const query = graphql`
query($date: Date!) {
event: markdownRemark(
frontmatter: { date: { eq: $date }, title: { ne: "" } }
fields: { sourceName: { eq: "events" } }
) {
frontmatter {
title
date(formatString: "LL", locale: "de-DE")
start
end
location
sponsorLink
}
}
recap: markdownRemark(
frontmatter: { date: { eq: $date }, title: { eq: "" } }
fields: { sourceName: { eq: "events" } }
) {
frontmatter {
participants
team
}
html
}
}
`;

Loading…
Cancel
Save