Add venue scaffolding

gatsby-config.js

@@ -32,6 +32,7 @@ module.exports = {
           '**/*/*/tags',
           '**/*/*/taxonomies',
           '**/*/*/users',
+          '**/*/*/venues',
         ],
         excludedRoutes: [
           '/yoast/**',

gatsby-node.js

@@ -115,6 +115,56 @@ exports.createPages = ({ actions, graphql }) => {
         component: blogTemplate,
       })
     })
+    .then(() => {
+      return graphql(`
+        {
+          allWordpressWpVenues {
+            edges {
+              node {
+                id
+                path
+                slug
+                status
+              }
+            }
+          }
+        }
+      `)
+    })
+    .then(result => {
+      if (result.errors) {
+        result.errors.forEach(e => console.error(e.toString()))
+        return Promise.reject(result.errors)
+      }
+
+      const venueTemplate = path.resolve(`./src/templates/venue.js`)
+
+      // In production builds, filter for only published venues.
+      const allVenues = result.data.allWordpressWpVenues.edges
+      const venues =
+        process.env.NODE_ENV === 'production'
+          ? getOnlyPublished(allVenues)
+          : allVenues
+
+      // Iterate over the array of venues
+      _.each(venues, ({ node: venue }) => {
+        // Create the Gatsby page for this WordPress venue
+        createPage({
+          path: venue.path,
+          component: venueTemplate,
+          context: {
+            id: venue.id,
+          },
+        })
+      })
+
+      // Create the booking page
+      // const bookingTemplate = path.resolve(`./src/templates/booking.js`)
+      // createPage({
+      //   path: `/booking/`,
+      //   component: bookingTemplate,
+      // })
+    })
     .then(() => {
       return graphql(`
         {

src/templates/event.js

@@ -23,7 +23,6 @@ const formatPrices = (regular, student) => {
 export const EventTemplate = ({
   content,
   title,
-  hasFeaturedMedia,
   featuredMedia,
   startTime,
   endTime,
@@ -34,6 +33,7 @@ export const EventTemplate = ({
   priceRegular,
   eventTypes,
 }) => {
+  const hasFeaturedMedia = featuredMedia && !!featuredMedia.localFile
   return (
     <section className="event-page">
       <div className="event-hero">
@@ -119,9 +119,6 @@ const Event = ({ data }) => {
       <EventTemplate
         title={event.title}
         content={event.content}
-        hasFeaturedMedia={
-          event.featured_media && !!event.featured_media.localFile
-        }
         featuredMedia={event.featured_media}
         startTime={event.start_time}
         endTime={event.end_time}

src/templates/post.js

@@ -12,9 +12,9 @@ export const BlogPostTemplate = ({
   title,
   date,
   author,
-  hasFeaturedMedia,
   featuredMedia,
 }) => {
+  const hasFeaturedMedia = featuredMedia && !!featuredMedia.localFile
   return (
     <section
       className={`post-page ${
@@ -62,7 +62,6 @@ const BlogPost = ({ data }) => {
         title={post.title}
         date={post.date}
         author={post.author}
-        hasFeaturedMedia={!!post.featured_media.localFile}
         featuredMedia={post.featured_media}
       />
     </Layout>

src/templates/venue.js

@@ -0,0 +1,129 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { graphql } from 'gatsby'
+import Layout from '../components/Layout'
+import Img from 'gatsby-image'
+
+export class VenueTemplate extends React.Component {
+  render() {
+    const {
+      title,
+      content,
+      featuredMedia,
+      floor,
+      capacityLegal,
+      capacityStanding,
+      capacitySitting,
+      usedFor,
+      bar,
+      audio,
+      audioVideo,
+      lighting,
+    } = this.props
+    const hasFeaturedMedia = featuredMedia && !!featuredMedia.localFile
+
+    return (
+      <section
+        className={`venue-page ${
+          hasFeaturedMedia ? 'has-featured-media' : 'no-featured-media'
+        }`}
+      >
+        <div className="venue-hero">
+          <h1 className="section-title">{title}</h1>
+          {hasFeaturedMedia && (
+            <div className="venue-featured-image">
+              <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
+            </div>
+          )}
+        </div>
+        <div
+          className="venue-content"
+          dangerouslySetInnerHTML={{ __html: content }}
+        />
+        <div className="venue-meta">
+          <ul>
+            {floor && <li>Etasje: {floor}</li>}
+            {capacityLegal && <li>Branntillatelse for: {capacityLegal}</li>}
+            {capacityStanding && <li>Stående: {capacityStanding}</li>}
+            {capacitySitting && <li>Sittende: {capacitySitting}</li>}
+            {usedFor && <li>Bruk: {usedFor}</li>}
+            {bar && <li>Bar: {bar}</li>}
+            {audio && <li>Lyd: {audio}</li>}
+            {lighting && <li>Lys: {lighting}</li>}
+            {audioVideo && <li>A/V: {audioVideo}</li>}
+          </ul>
+        </div>
+      </section>
+    )
+  }
+}
+
+VenueTemplate.propTypes = {
+  title: PropTypes.string.isRequired,
+  content: PropTypes.string,
+  featuredImage: PropTypes.object,
+  floor: PropTypes.string,
+  capacityLegal: PropTypes.string,
+  capacityStanding: PropTypes.string,
+  capacitySitting: PropTypes.string,
+  usedFor: PropTypes.string,
+  bar: PropTypes.string,
+  audio: PropTypes.string,
+  audioVideo: PropTypes.string,
+  lighting: PropTypes.string,
+}
+
+const VenuePage = ({ data }) => {
+  const { wordpressWpVenues: venue } = data
+
+  return (
+    <Layout>
+      <VenueTemplate
+        title={venue.title}
+        content={venue.content}
+        featuredMedia={venue.featured_media}
+        floor={venue.floor}
+        capacityLegal={venue.capacity_legal}
+        capacityStanding={venue.capacity_standing}
+        capacitySitting={venue.capacity_sitting}
+        usedFor={venue.used_for}
+        bar={venue.bar}
+        audio={venue.audio}
+        lighting={venue.lighting}
+        audioVideo={venue.audio_video}
+      />
+    </Layout>
+  )
+}
+
+VenuePage.propTypes = {
+  data: PropTypes.object.isRequired,
+}
+
+export default VenuePage
+
+export const pageQuery = graphql`
+  query VenueById($id: String!) {
+    wordpressWpVenues(id: { eq: $id }) {
+      id
+      path
+      title
+      slug
+      content
+      floor
+      capacity_legal
+      capacity_standing
+      capacity_sitting
+      used_for
+      bar
+      audio
+      lighting
+      audio_video
+      featured_media {
+        localFile {
+          ...FluidImage
+        }
+      }
+    }
+  }
+`