Create template for project cards on homepage

[machow]

Currently, we show cards for selected projects on the homepage (codeforphilly.org):

However, the HTML for each card is repeated, with information like heading hard-coded:

https://github.com/CodeForPhilly/codeforphilly.org/blob/develop/html-templates/home.tpl#L100-L115

Proposed Solution

If we use a template, then we can consolidate this repeated code into one place. In other words, we could have a template like this in the home.tpl page:

{template projectTile name description logo=no}
  <h1>{$name|escape}</h1>
    {$description|escape|markdown}
{/template}

And then create the individual cards using something like this:

{projectTile name="Project 1" description="## This is a cool project"}
{projectTile name="Project 2" description="## This is a another project"}

Here is a link to the template engine docs (owoo). Note that it is fairly old, but if we can get our work pretty far, and post it on the #cfp-homepage-redesign channel, we can hopefully lean a bit on @themightychris to fill in any gaps.

Outcome

The homepage should look the exact same, but the underlying code should be much cleaner, since it uses the template. If there are any useful changes to the look / homepage content, let's handle them after implementing a template (just to be sure we get templating down).

[machow]

Pairing with @tblacknc -- who pointed out that there are 2 spots projects are defined:

• the project card (discussed above)
• the project modal (e.g. https://github.com/CodeForPhilly/codeforphilly.org/blob/develop/html-templates/home.tpl#L526)

These will need separate templates. They're connected by the id property. E.g. id="portfolioModal1.

[tblacknc]

I am reading this as saying that configuring the cards (top) part of the file is a separate issue from the Modal (bottom) part of the file.

If that is the case, I believe it is complete. What is the process for review? Do I give the workflow we looked at before a go? The insert code function of this app doesn't seem to render it correctly.

[machow]

Ah, nice! Are you able to open a PR with your code? I have some time to take a look this weekend

[tblacknc]

https://pr-48.codeforphilly.sandbox.k8s.phl.io/

[machow]

This is great--thanks! Let me see if I can pull someone in from leadership to try out making updates to project info once we merge the PR. Do you want to take a stab at templating the other piece? Otherwise, I'm happy to pick it up if needed / useful

[tblacknc]

I can take on the modal section.... I am thinking that the script may need access to the database to populate the template. Take PAWS write up for example, that would be a mess to populate the DB via a static command.

I have a request in to chris to have a walkthrough on the code path to for the projects link. Are you familiar with the path for the https://codeforphilly.org/projects link? I think this is a good DB example to work with.

[tblacknc]

Here is the modal section converted to a template format with the template populated with static entries (vs. DB):

https://pr-51.codeforphilly.sandbox.k8s.phl.io/

{template projectModal modal name image description project site github slack logo=no}   
	<div class="portfolio-modal modal fade" id="{$modal}" 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">{$name}</h2>
							    <img class="img-fluid d-block mx-auto img-modal" src="/img/portfolio/{$image}" alt="" />
							    <p class="text-justify">{$description}</p>
								<a href="/projects/{$project}" target="_blank" class="btn btn-primary">Project Page</a>
								<a href="{$site}" target="_blank" class="btn btn-primary">Project Website</a>
								<a href="{$github}" target="_blank" class="btn btn-primary">Github</a>
								<div class="modal-join-slack">
									<p>Want to join this project? Introduce yourself in the #{$slack} Slack channel.</p>
									<a href="/chat?channel={$slack}" target="_blank" class="btn btn-primary">Join Slack</a>
								</div>
						  </div>
					  </div>
				  </div>
			  </div>
		  </div>
	  </div>
	</div>
{/template}


{projectModal name="PHLASK" modal="portfolioModal1" image="phlask.png" 
description="PHLASK is an Ecosystem for Finding and Sharing Water in Philadelphia Water should remain abundant, clean and accessible to everyone.<br><br>
PHLASK's mission is to help people find publicly available sources of water, and to impel private enterprises to provide public access to their water infrastructure - simply by PHLasking.<br><br>
If you would like to help reduce the use of wasteful plastic bottles and increase access to water, please join the PHLASK Coalition!"  
project="phlask--life-liberty_and_the_pursuit_of_water" site="http://www.phlask.me" github="https://github.com/phlask" slack="phlask" }

{projectModal name="PAWS" modal="portfolioModal2" image="paws.png" 
description="WHO IS PAWS - As the city's largest animal rescue partner and no-kill animal shelter, PAWS is working to make Philadelphia a place where every healthy and treatable pet is guaranteed a home. Since inception over 10 years ago, PAWS has rescued and placed 27,000+ animals in adoptive and foster homes, and has worked to prevent pet homelessness by providing 86,000+ low-cost spay/neuter services and affordable vet care to 227,000+ clinic patients. Just in 2018, 3,584 animals were rescued and 36,871 clinic patients were served. PAWS is funded 100% through donations, with 91 cents of every dollar collected going directly to the animals. Therefore, PAWS' rescue work (including 3 shelters and all rescue and animal care programs), administration and development efforts are coordinated by only about 70 staff members complemented by over 1500 volunteers.<br><br>
DATA IS UNDERUTILIZED - Through this chain of operational and service activities, PAWS accumulates data regarding donations, adoptions, fosters, volunteers, merchandise sales, event attendees (to name a few), each in their own system and/or manual (Google Sheet) tally. This vital data that can drive insights remains siloed and is usually difficult to extract, manipulate, and analyze. Taking all of this data, making is readily available, and drawing inferences through analysis can drive many benefits: PAWS operations can be better informed and use data-driven decisions to guide programs and maximize effectiveness; supporters can be further engaged by suggesting additional opportunities for involvement based upon pattern analysis; multi-dimensional supporters can be consistently (and accurately) acknowledged for all the ways they support PAWS (i.e. a volunteer who donates and also fosters kittens), not to mention opportunities to further tap the potential of these enthusiastic supporters. And there are bound to be more leverage points as we get further into this project! <br><br>
PROJECT MISSION - This project seeks to provide PAWS with an easy-to-use and easy-to-support tool to extract data from multiple source systems, confirm accuracy and appropriateness and process data where necessary (a data hygiene and wrangling step), and then load relevant data into one or more repositories to facilitate (1) a highly-accurate and rich 360-degree view of PAWS constituents (Salesforce is a likely candidate target system; already in use at PAWS) and (2) flexible ongoing data analysis and insights discovery (e.g. a data warehouse)."  
project="paws_data_pipeline" site="https://phillypaws.org/" github="https://github.com/CodeForPhilly/paws-data-pipeline" slack="paws_data_pipeline"}

{projectModal name="PLSE" modal="portfolioModal4" image="plse.png" 
description="Philadelphia Lawyers for Social Equity (PLSE) is a non-profit legal aid organization that focuses on helping people overcome the barriers they face as a result of criminal records.<br><br>
On July 1st, they will encounter a problem that will severely hinder their ability to efficiently provide expungements within their current 6-12 month timeframe. The new 'automatic sealing' of the Clean Slate Law will go into effect, which will remove their access to criminal records. These documents are needed to draft the legal paperwork necessary for an expungement, or a complete erasure of one's criminal record.<br><br>
This project involves 'scraping' criminal history record information from a publicly-available database and storing it on secure servers only available to PLSE staff for the purpose of expungements. The data will need to be properly organized in order to easily pull up an individual's full record. This project is the only way they could continue providing quick, life-changing services to Philadelphia communities."  
project="prevention_point_unified_reporting_system" site="https://www.plsephilly.org/" github="https://github.com/CodeForPhilly/prevention-point" slack="preventionpoint" }

{projectModal name="Only Plant Natives PA" modal="portfolioModal5" image="flowers.jpg" 
description="Native plants are really <a href='https://www.audubon.org/content/why-native-plants-matter'>important...</a><br><br>
But it is a bit overwhelming to select plants (e.g. wildflowers and grasses). This google sheet + tableau solution is designed to assist as a entry point to further research.
I'm seeking user experience feedback from the Code for Philly community. Also - If anyone wants to help with the database, please join the project."  
project="pa_wildflower_selector" site="https://choosenativeplants.com/" github="https://github.com/CodeForPhilly/pa-wildflower-selector" slack="pa-wildflower-selector" }

{projectModal name="CfP Website Design" modal="portfolioModal6" image="code-for-philly.png" 
description="The goal of this particular project is just to re-do the homepage first, and connect it to the existing old pages and laddr. The issues on our 'Issues' page in this repo are ones that the leadership team has identified as things they would like changed. However we're open to other ideas of course."  
project="code_for_philly_website_redesign" site="https://codeforphilly.org/" github="https://github.com/CodeForPhilly/codeforphilly.org" slack="cfp-homepage-redesign"}

	``` 

[machow]

Adding this to share with people looking to update homepage

Example homepage elements

Card example:

Modal example:

Example code for homepage

Example project card:

{projectTile name="PHLASK" portfolioModal="#portfolioModal1" short="Access to Public Water" image="phlask.png" }

Example modal:

{projectModal name="PHLASK" modal="portfolioModal1" image="phlask.png" 
description="PHLASK is an Ecosystem for Finding and Sharing Water in Philadelphia Water should remain abundant, clean and accessible to everyone.<br><br>
PHLASK's mission is to help people find publicly available sources of water, and to impel private enterprises to provide public access to their water infrastructure - simply by PHLasking.<br><br>
If you would like to help reduce the use of wasteful plastic bottles and increase access to water, please join the PHLASK Coalition!"  
project="phlask--life-liberty_and_the_pursuit_of_water" site="http://www.phlask.me" github="https://github.com/phlask" slack="phlask" }