Update landing page layout and add facilitators

_config.yml

@@ -8,5 +8,6 @@ exclude:
   - p2pu-theme
   - node_modules
   - node_modules/
+  - gdoc
   - .bundler
 domain: digital-detroit.p2pu.org

_includes/hero_header.html

@@ -1,26 +1,15 @@
 <div class="hero-header">
   <div id="header-img">
     <img src="{{site.baseurl}}/assets/img/{{ page.header_image }}" alt="" class="img-fluid">
+    <h1 class="text-white mb-4">{{ page.header_text }}</h1>
   </div>
 
   <header id="page-header" class="hero-header">
     <div id="intro-section" class="container">
       <div class="row">
-        <div class="col-12 col-lg-6 order-1 order-sm-2">
-          <div class="embed-responsive embed-responsive-16by9">
-            <!--iframe class="embed-responsive-item" src="{{page.header_video}}" allowfullscreen></iframe-->
-            <img src="{{site.baseurl}}/assets/img/dd-logo.png" />
-          </div>
-        </div>
-        <div class="col-12 col-lg-6 order-2 order-sm-1">
+        <div class="col-12 col-lg-8 offset-lg-2 order-2 order-sm-1">
           <div class="intro-text" >
-            <h1 class="text-white mb-4">{{ page.header_text }}</h1>
             <div>{{ page.hero | markdownify }}</div>
-            {% if page.image_attribution %}
-            <div id="attribution" class="text-muted">
-              {{ page.image_attribution | markdownify }}
-            </div>
-            {% endif %}
           </div>
         </div>
       </div>

_layouts/index.html

@@ -2,7 +2,9 @@
 layout: base
 ---
 <div class="page-wrapper">
+
   {% include {{page.header}} page=page %}
+
   <section id="learning-circles" class="container search">
     <div class="row">
       <div class="col-12 mb-3">
@@ -11,6 +13,16 @@ <h1>{{ page.search_title }}</h1>
     </div>
     <div id="learning-circle-search"></div>
   </section>
+
+  <section id="facilitators" class="container search">
+    <div class="row">
+      <div class="col-12 mb-3">
+        <h1>Facilitators</h1>
+      </div>
+    </div>
+    <div id="team-facilitators"></div>
+  </section>
+
 </div>
 <!-- -->
 

assets/css/_custom.scss

@@ -33,21 +33,32 @@ section {
 
 .hero-header {
   #header-img {
-    clip-path: polygon(0 100%, 100% 80%, 100% 0, 0 0);
-    filter: brightness(50%);
-    background-color: transparentize($p2pu-yellow, 0.5);
+    position: relative;
+    //background-color: transparentize($p2pu-yellow, 0.5);
+    overflow: hidden;
 
     &, img {
       width: 100%;
       height: 65vh;
       object-fit: cover;
     }
+
+    h1 {
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.5);
+      margin: 0px !important;
+      padding: 1.5rem;
+    }
   }
 
+
   #page-header {
     position: relative;
     overflow: hidden;
-    margin-top: -200px;
+    //margin-top: -200px;
 
     .order-1 {
       order: 1;
@@ -459,4 +470,23 @@ footer.home-footer {
   }
 }
 
+.facilitator-card {
+  img {
+    width: 200px;
+    height: 200px;
+    object-fit: cover;
+  }
+
+  .profile {
+    position: relative;
+    margin-top: -50px;
+    background-color: white;
+    border-radius: 15px;
+    padding: 1rem;
 
+    > p {
+      height: 6rem;
+      overflow: scroll;
+    }
+  }
+}

assets/css/_print.scss

@@ -16,7 +16,8 @@
     max-width: 100%;
   }
 
-  @page { margin: 0mm 0mm 0mm 0mm;
+  @page { 
+    margin: 0mm 0mm 0mm 0mm;
     size: 8in 9.5in;
   }
 

assets/dist/style.css

@@ -13020,19 +13020,26 @@ section {
 }
 
 .hero-header #header-img {
-  clip-path: polygon(0 100%, 100% 80%, 100% 0, 0 0);
-  filter: brightness(50%);
-  background-color: rgba(255, 188, 26, 0.5);
+  position: relative;
+  overflow: hidden;
 }
 .hero-header #header-img, .hero-header #header-img img {
   width: 100%;
   height: 65vh;
   object-fit: cover;
 }
+.hero-header #header-img h1, .hero-header #header-img .h1 {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  margin: 0px !important;
+  padding: 1.5rem;
+}
 .hero-header #page-header {
   position: relative;
   overflow: hidden;
-  margin-top: -200px;
 }
 .hero-header #page-header .order-1 {
   order: 1;
@@ -13336,6 +13343,23 @@ footer.home-footer .toc a, footer.home-footer .toc .container > div {
     margin-top: 1rem;
   }
 }
+.facilitator-card img {
+  width: 200px;
+  height: 200px;
+  object-fit: cover;
+}
+.facilitator-card .profile {
+  position: relative;
+  margin-top: -50px;
+  background-color: white;
+  border-radius: 15px;
+  padding: 1rem;
+}
+.facilitator-card .profile > p {
+  height: 6rem;
+  overflow: scroll;
+}
+
 main {
   position: relative;
 }

assets/jsx/index.jsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { render } from 'react-dom';
+import React, { useEffect, useState } from "react";
+import { createRoot } from 'react-dom/client';
 import {t} from 'ttag';
 
 import SearchProvider from 'p2pu-components/dist/Search/SearchProvider';
@@ -14,15 +14,6 @@ import DefaultNoResults from 'p2pu-components/dist/Search/DefaultNoResults';
 const CustomSearch = (props) => {
   return (
     <>
-      <div className="search-fields row g-0">
-        <div className="bg-white shadow col-12">
-          <SearchBar 
-            placeholder={t`Keyword, organization, facilitator, etc...`}
-            {...props} 
-          />
-        </div>
-      </div>
-      <SearchTags {...props} />
       <BrowseLearningCircles
         {...props}
         NoResultsComponent={DefaultNoResults}
@@ -64,7 +55,7 @@ class App extends React.Component {
         }
         <div className={this.state.selectedLearningCircle?'d-none':''}>
           <SearchProvider
-            origin="https://learningcircles.p2pu.org"
+            origin="http://localhost:8000"
             initialState={{team_id: 46}}
             searchSubject={'learningCircles'}
             locale="en"
@@ -79,4 +70,66 @@ class App extends React.Component {
   }
 };
 
-render(<App />, document.getElementById("learning-circle-search"));
+const lcRoot = createRoot(document.getElementById("learning-circle-search"))
+lcRoot.render(<App />)
+
+
+const FacilitatorCard = ({image, name, bio})  => {
+  return (
+    <div className="facilitator-card col-8 offset-2 col-lg-4 offset-lg-4">
+      <img className="rounded-circle" width="200" height="200" src={image}/>
+      <div className="profile">
+        <h2>{name}</h2>
+        <p>{bio}</p>
+      </div>
+    </div>
+  )
+}
+
+const Facilitators = (props) => {
+
+  // `${API_ORIGIN}/api/teams/${TEAM_ID}/`
+  const [facilitators, setFacilitators] = useState([])
+  useEffect(() => {
+    fetch(`${props.API_ORIGIN}/api/teams/${props.teamId}/`).then(resp => {
+      // TODO errors and stuff
+      return resp.json();
+    }).then(data => {
+      setFacilitators(data.item.facilitators);
+    })
+  }, [])
+
+  return (
+    <div id="carouselExampleFade" class="carousel carousel-dark slide">
+      <div class="carousel-inner">
+        { 
+          facilitators.map((fa, idx) =>
+            <div class={"carousel-item" + (idx==0?" active":"")} >
+              <FacilitatorCard 
+                image={ fa.avatar_url?fa.avatar_url:"https://placehold.it/200x200" }
+                name={fa.first_name}
+                bio={fa.bio}
+              />
+            </div>
+          )
+        }
+      </div>
+      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="visually-hidden">Previous</span>
+      </button>
+      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+      </button>
+    </div>
+  )
+}
+
+const facilitatorsRoot = createRoot(document.getElementById("team-facilitators"))
+facilitatorsRoot.render(
+  <Facilitators 
+    API_ORIGIN='https://learningcircles.p2pu.org'
+    teamId='46'
+  />
+)

assets/jsx/style.jsx

@@ -2,3 +2,4 @@ import "../css/base.scss"
 
 //import { Collapse } from 'bootstrap'
 import Collapse from 'bootstrap/js/dist/collapse'
+import Carousel from 'bootstrap/js/dist/carousel'

index.md

@@ -7,7 +7,6 @@ header_text: Empowering Detroit through Digital Literacy
 hero: |
     Want to learn important computer skills for free? The Rocket Community Fund is teaming up with Tech Goes Home from Boston, Peer to Peer University, United Way of Southeastern Michigan, and Black Tech Saturdays to help 200 people in Detroit do just that! They plan to teach useful computer skills in person, which can help you use technology more easily, find better job opportunities, and improve your life and community. If you live in Detroit and want to learn, this program could be for you!
 search_title: Learning circles in Detroit
-image_attribution: ""
 bundles:
 - style
 - index