Graduation Page updates

Author: ambethia

TODO.md

@@ -16,7 +16,7 @@
 - [x] Add calls to action to homepage
 - [x] Add store and kids classes to homepage
 - [x] Mini-carousel of photos for "Take a Tour"
-- [ ] Port Demo Day sites (include each cohort).
+- [x] Port Demo Day sites (include each cohort).
 
 ### Illustrations
 

gatsby-node.js

@@ -80,7 +80,7 @@ exports.createPages = ({ graphql, actions }) => {
         const demoDays = result.data.allContentfulDemoDay.edges
         demoDays.forEach(({ node: demoDay }) => {
           createPage({
-            path: `/demo-day/${demoDay.slug}/`,
+            path: `/grads/${demoDay.slug}/`,
             component: demoDayTemplate,
             context: {
               slug: demoDay.slug

netlify.toml

@@ -8,11 +8,15 @@
 
 [[redirects]]
   from = "https://demoday.suncoast.io"
-  to = "https://suncoast.io/demo-day"
+  to = "https://suncoast.io/grads"
 
 [[redirects]]
   from = "https://demoday.suncoast.io"
-  to = "https://suncoast.io/demo-day"
+  to = "https://suncoast.io/grads"
+
+[[redirects]]
+  from = "/demo-day/*"
+  to = "https://suncoast.io/grads"
 
 [[redirects]]
   from = "/conference/*"

src/components/MainNavigation.js

@@ -89,7 +89,7 @@ class MainNavigation extends Component {
                   <Link to="/academy/faq" className="navbar-item">
                     FAQ
                   </Link>
-                  <Link to="/demo-day" className="navbar-item">
+                  <Link to="/grads" className="navbar-item">
                     Graduates
                   </Link>
                   <hr className="navbar-divider" />

src/components/academy/AcademyNavigation.js

@@ -54,7 +54,7 @@ const AcademyNavigation = () => (
             <NavItem to="/academy/faq" icon="fas fa-puzzle-piece fa-lg">
               FAQ
             </NavItem>
-            <NavItem to="/demo-day" icon="fas fa-graduation-cap fa-lg">
+            <NavItem to="/grads" icon="fas fa-graduation-cap fa-lg">
               Graduates
             </NavItem>
           </nav>

src/components/academy/Cohort.js

@@ -7,6 +7,7 @@ import Container from '../../components/Container'
 import Section from '../../components/Section'
 import PageTitle from '../../components/PageTitle'
 import Graduate from './Graduate'
+import GradsNavigation from './GradsNavigation'
 
 const Cohort = ({
   slug,
@@ -24,7 +25,7 @@ const Cohort = ({
       <Section>
         <Container>
           <header className="cohort-header">
-            <PageTitle>{`${title} Demo Day`}</PageTitle>
+            <PageTitle>{`${title} Graduates`}</PageTitle>
             <h4 className="subtitle is-4">
               {moment(date).format('MMMM, Do Y')}
             </h4>
@@ -58,6 +59,9 @@ const Cohort = ({
               We are now accepting applications for our next cohort,{' '}
               <Link to="/academy">find out more.</Link>
             </p>
+            <div className="is-pulled-right">
+              <GradsNavigation />
+            </div>
           </div>
 
           <h3 className="title is-3">Our Graduates</h3>
@@ -104,6 +108,7 @@ const Cohort = ({
               </>
             )}
           </div>
+          <GradsNavigation />
         </div>
       </section>
     </>

src/components/academy/GradsNavigation.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { StaticQuery, graphql } from 'gatsby'
+
+export default function GradsNavigation() {
+  return (
+    <StaticQuery
+      query={graphql`
+        query GradsNavigationQuery {
+          allContentfulDemoDay(sort: { fields: date, order: DESC }) {
+            nodes {
+              title
+              slug
+            }
+          }
+        }
+      `}
+      render={(data) => (
+        <>
+          <div className="dropdown is-hoverable">
+            <div className="dropdown-trigger">
+              <button
+                className="button"
+                aria-haspopup="true"
+                aria-controls="dropdown-menu"
+              >
+                <span>All Cohorts</span>
+                <span className="icon is-small">
+                  <i className="fas fa-angle-down" aria-hidden="true"></i>
+                </span>
+              </button>
+            </div>
+            <div className="dropdown-menu" id="dropdown-menu" role="menu">
+              <div className="dropdown-content">
+                {data.allContentfulDemoDay.nodes.map(({ slug, title }) => (
+                  <a
+                    href={`/grads/${slug}`}
+                    className="dropdown-item"
+                    key={slug}
+                  >
+                    {title}
+                  </a>
+                ))}
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    />
+  )
+}

src/components/academy/Graduate.js

@@ -28,7 +28,7 @@ const Graduate = ({
       <div className="column">
         <h4 className="title is-4">
           {slug ? (
-            <Link to={`/demo-day/${cohortSlug}/${slug}`}>{student.name}</Link>
+            <Link to={`/grads/${cohortSlug}/${slug}`}>{student.name}</Link>
           ) : (
             student.name
           )}

src/pages/academy/career.mdx

@@ -20,7 +20,7 @@ Career support services are including, but not limited to, the
 following:
 
 - Curriculum including lectures, mentoring, and coaching on interview techniques, decoding technical job descriptions, resume writing workshops, and portfolio building.
-- Hosted Demo Day events, inviting potential employers, advisory board members, and community leaders to showcase the skills and work done by recent graduates.
+- Hosted graduate events, inviting potential employers, advisory board members, and community leaders to showcase the skills and work done by recent graduates.
 - Host guest lectures from community leaders on topics that add to and enhance the core program content.
 - The school maintains a "reverse job board", used by local employers and hiring partners that lists graduates and alumni who are seeking employment.
 

src/pages/academy/network.js

@@ -37,7 +37,7 @@ const AcademyNetwork = ({ data }) => (
               Speak to students during the cohort, host field trips and lighting
               talks at your offices!
             </li>
-            <li>Meet our upcoming graduates before Demo Day.</li>
+            <li>Meet our upcoming graduates <em>before</em> graduation.</li>
             <li>Access our reverse job board.</li>
           </ul>
         </div>