change: home page & add volunteer and sponsor page

.github/workflows/k8s-deploy.yml

@@ -8,7 +8,7 @@ on:
     branches: [ develop ]
 
 env:
-  GITHUB_TOKEN: ${{ secrets.BOT_GITHUB_TOKEN }}
+  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
   DOCKER_REGISTRY: ghcr.io
   DOCKER_PACKAGE: site-composite

.gitignore

@@ -1,2 +1,4 @@
 .DS_Store
-
+# i think these -e files come from sed
+*.tpl-e
+*.js-e

README.md

@@ -1,3 +1,38 @@
 # codeforphilly.org
 
 Code for Philly's customizations to laddr
+
+
+# How do I pull in from https://github.com/CodeForPhilly/cfp-mockup ?
+
+To pull in from https://github.com/CodeForPhilly/cfp-mockup , you can run the below from your cfp-mockup dir if it's next to your codeforphilly.org dir. For more context, see https://github.com/CodeForPhilly/codeforphilly.org/commit/319896a4da6c4c518bf951e2739a8272bbdcd558
+
+```bash
+# ch dir into cfp-mockup
+mkdir -p ../codeforphilly.org/html-templates/designs  &&
+\
+cp index.html ../codeforphilly.org/html-templates/designs/site-2021-08.tpl  &&
+sed -i -e 's/https:\/\/codeforphilly.org//g' ../codeforphilly.org/html-templates/designs/site-2021-08.tpl  &&
+sed -i -e 's/index.html/\//g' ../codeforphilly.org/html-templates/designs/site-2021-08.tpl  &&
+sed -i -e 's/volunteer.html/\/volunteer/g' ../codeforphilly.org/html-templates/designs/site-2021-08.tpl  &&
+sed -i -e 's/sponsor.html/\/sponsor/g' ../codeforphilly.org/html-templates/designs/site-2021-08.tpl  &&
+\
+cp volunteer.html ../codeforphilly.org/html-templates/volunteer.tpl  &&
+sed -i -e 's/https:\/\/codeforphilly.org//g' ../codeforphilly.org/html-templates/volunteer.tpl  &&
+sed -i -e 's/index.html/\//g' ../codeforphilly.org/html-templates/volunteer.tpl  &&
+sed -i -e 's/volunteer.html/\/volunteer/g' ../codeforphilly.org/html-templates/volunteer.tpl  &&
+sed -i -e 's/sponsor.html/\/sponsor/g' ../codeforphilly.org/html-templates/volunteer.tpl  &&
+\
+cp sponsor.html ../codeforphilly.org/html-templates/sponsor.tpl  &&
+sed -i -e 's/https:\/\/codeforphilly.org//g' ../codeforphilly.org/html-templates/sponsor.tpl  &&
+sed -i -e 's/index.html/\//g' ../codeforphilly.org/html-templates/sponsor.tpl  &&
+sed -i -e 's/volunteer.html/\/volunteer/g' ../codeforphilly.org/html-templates/sponsor.tpl  &&
+sed -i -e 's/sponsor.html/\/sponsor/g' ../codeforphilly.org/html-templates/sponsor.tpl  &&
+\
+cp -a assets ../codeforphilly.org/site-root/  &&
+cp -a css ../codeforphilly.org/site-root/  &&
+cp -a html ../codeforphilly.org/site-root/  &&
+cp -a js ../codeforphilly.org/site-root/  &&
+sed -i -e 's/https:\/\/codeforphilly.org//g' ../codeforphilly.org/site-root/js/search.js  &&
+cp -a videos ../codeforphilly.org/site-root/
+```

docs/development/add-project.md

@@ -0,0 +1,51 @@
+# Add a project
+
+Use this template to add a new project to `site-root/home.tpl`:
+
+```html
+<!-- Modal TODO -->
+<div class="portfolio-modal modal fade" id="portfolioModalTODO" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog">
+      <div class="modal-content">
+          <div class="close-modal" data-dismiss="modal"><img src="/img/close-icon.svg" alt="Close modal" />
+          </div>
+          <div class="container">
+              <div class="row justify-content-center">
+                  <div class="col-lg-8">
+                      <div class="modal-body">
+                          <!-- Project Details Go Here-->
+                          <h2 class="text-uppercase">TODO: Project Title</h2>
+                          <img class="img-fluid d-block mx-auto" src="/img/portfolio/TODO.jpg" alt="TODO: img description" />
+                          <p class="text-justify">TODO: project description paragraph 1.</p>
+                          <p class="text-justify">TODO: project description paragraph 2.</p>
+                          <!-- more paragraphs if needed... -->
+                          <p>
+                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                                  class="bi bi-link" viewBox="0 0 16 16">
+                                  <path
+                                      d="M6.354 5.5H4a3 3 0 0 0 0 6h3a3 3 0 0 0 2.83-4H9c-.086 0-.17.01-.25.031A2 2 0 0 1 7 10.5H4a2 2 0 1 1 0-4h1.535c.218-.376.495-.714.82-1z" />
+                                  <path
+                                      d="M9 5.5a3 3 0 0 0-2.83 4h1.098A2 2 0 0 1 9 6.5h3a2 2 0 1 1 0 4h-1.535a4.02 4.02 0 0 1-.82 1H12a3 3 0 1 0 0-6H9z" />
+                              </svg>
+                              <a href="https://TODO.com">TODO.com</a>
+                              <br>
+                              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+                                  class="bi bi-envelope" viewBox="0 0 16 16">
+                                  <path
+                                      d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z" />
+                              </svg>
+                              <a href="mailto:TODO@email">TODO@email</a>
+                          </p>
+                      </div>
+                  </div>
+              </div>
+          </div>
+          <div class="modal-footer">
+              <a href="http://www.TODO.me" class="btn btn-primary">Learn More</a>
+              <a href="http://www.TODO.me" class="btn btn-primary">Get Involved</a>
+              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+          </div>
+      </div>
+  </div>
+</div>
+```

html-templates/designs/site-bootstrap4.tpl

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    {block "meta-info"}
+        {include includes/site.meta-info.tpl}
+    {/block}
+
+    {* now use {$dwoo.parent} on subpages to automatically fill in the site name *}
+    <title>{block "title"}{Laddr::$siteName|escape}{/block}</title>
+
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <!-- Font Awesome icons (free version)-->
+    <script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous">
+    </script>
+    <!-- Google fonts-->
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css">
+    <!-- Core theme CSS (includes Bootstrap)-->
+    {cssmin "styles.css+custom_styles.css"}
+</head>
+
+{* using the responseID as a class on the body can help with subpage-specific styles *}
+<body class="{block 'body-class'}{str_replace('/', '_', $.responseId)}-tpl{/block}">
+    <!-- Navigation-->
+    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
+    {block "nav"}
+        <div class="container">
+            <a class="navbar-brand js-scroll-trigger" href="/"><img src="/favicon.ico" alt="favicon" style="height: 2rem;"></a>
+            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+                Menu
+                <i class="fas fa-bars ml-1"></i>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarResponsive">
+                <ul class="navbar-nav text-uppercase ml-auto">
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Get Involved
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <a class="dropdown-item nav-link" href="/volunteer">Volunteer</a>
+                            <a class="dropdown-item nav-link" href="/sponsor">Sponsor</a>
+                            <a class="dropdown-item nav-link" href="/projects">Find a Project</a>
+                            <a class="dropdown-item nav-link" href="/pages/project_guidelines">Projects 101</a>
+                            <a class="dropdown-item nav-link" href="/pages/hackathons">Launchpads &amp; Hackathons</a>
+                        </div>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="/chat" target="_blank">Chat <small>(Slack)</small></a>
+                    </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            About
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <a class="dropdown-item nav-link" href="/mission">Mission</a>
+                            <a class="dropdown-item nav-link" href="/pages/code_of_conduct/">Code of Conduct</a>
+                            <a class="dropdown-item nav-link" href="/pages/leadership/">Organizing Team</a>
+                            <a class="dropdown-item nav-link" href="/pages/leadership-support_team_open_positions/">Join the Organizing Team</a>
+                            <a class="dropdown-item nav-link" href="/contact">Contact Us</a>
+                            <a class="dropdown-item nav-link" href="/members">Member Directory</a>
+                        </div>
+                    </li>
+                    <li class="nav-item dropdown d-none d-lg-block">
+                        <input class="form-control mr-sm-2" id="js-site-search" type="search" placeholder="Search" aria-label="Search">
+                        <ul class="dropdown-menu search" id="navbarSearchBarDropdown" aria-labelledby="navbarDropdown">
+                        </ul>
+                    </li>
+                    <li class="nav-item show">
+                        <a class="nav-link " href="/login?return=%2F" id="navbarDropdown" role="button" aria-haspopup="false" aria-expanded="false">
+                            Login
+                        </a>
+                    </li>
+                    <li class="nav-item show">
+                        <a class="nav-link " href="/register?return=%2F" id="navbarDropdown" role="button" aria-haspopup="false" aria-expanded="false">
+                            Signup
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="d-lg-none container pt-3">
+            <input class="form-control mr-sm-2" id="js-site-search-2" type="search" placeholder="Search" aria-label="Search">
+            <ul class="dropdown-menu search" id="navbarSearchBarDropdown-2" aria-labelledby="navbarDropdown">
+            </ul>
+        </div>
+    {/block}
+    </nav>
+
+    {block content}{/block}
+
+    <!-- Footer-->
+    <hr class="mx-5">
+    <footer class="footer py-4">
+        <div class="container">
+            <div class="row pb-3">
+                <div class="col-12 col-sm-4">
+                    <a href="/projects">Active Projects</a>
+                    <br>
+                    <a href="https://code-for-philly.gitbook.io/partnerships/creating-new-partnerships/first-steps">Start a Project</a>
+                    <br>
+                    <a href="/pages/hackathons">Hackathons</a>
+                </div>
+
+                <div class="col-12 col-sm-4">
+                    <a href="/pages/mission">Mission</a>
+                    <br>
+                    <a href="/pages/code_of_conduct/">Code Of Conduct</a>
+                    <br>
+                    <a href="/pages/leadership/">Leadership</a>
+                </div>
+
+                <div class="col-12 col-sm-4">
+                    <a href="/chat">Slack</a>
+                    <br>
+                    <a href="/contact">Contact</a>
+                    <br>
+                    <a href="/pages/hack_night_program_details/">Weekly Meetups</a>
+                </div>
+            </div>
+            <div class="row align-items-center">
+                <div class="col-lg-4 text-lg-left">Copyright © Code For Philly 2021</div>
+                <div class="col-lg-4 my-3 my-lg-0">
+                    <a class="btn btn-dark btn-social mx-2" href="http://twitter.com/codeforphilly"><i class="fab fa-twitter"></i></a>
+                    <a class="btn btn-dark btn-social mx-2" href="https://www.meetup.com/Code-for-Philly"><i class="fab fa-facebook-f"></i></a>
+                    <a class="btn btn-dark btn-social mx-2" href="http://codeforphilly.slack.com"><i class="fab fa-linkedin-in"></i></a>
+                </div>
+                <!-- <div class="col-lg-4 text-lg-right">
+                        <a class="mr-3" href="#!">Privacy Policy</a>
+                        <a href="#!">Terms of Use</a>
+                    </div> -->
+            </div>
+        </div>
+    </footer>
+
+    <!-- Bootstrap core JS-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Third party plugin JS-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
+    <!-- Core theme JS-->
+    {jsmin "scripts.js+debounce.js+search.js"}
+
+    {block "js-analytics"}
+        {include includes/site.analytics.tpl}
+    {/block}
+</body>
+
+</html>