Configurable campaigns

[jlev]

I have a branch ready to configure the following for cobranded state event campaigns:

• logos in the header and footer
• the Host an Event link
• default filters for event type
• default zoom to state bounds

However, I'm having a minor issue getting the logo src to be properly resolved with the ~images prefix by webpack-url-loader. I feel like there's a trick to it that someone more familiar with this stack might be able to solve quickly. Any ideas @ejucovy ?

[jlev]

Specific issue is on https://github.com/spacedogXYZ/people-power-map/blob/configurable-campaigns/src/templates/Header.html#L4

[jlev]

Added a hardcoded src url in the Header template. Probably not the right solution if we're going to have dozens of cobranded campaigns, but works for now.

[ejucovy]

So I think the "right" way to do this is by importing the image path in javascript so that it gets resolved before it ever reaches the template:

diff --git a/src/initialize.js b/src/initialize.js
index 2b2fe3d..f655718 100644
--- a/src/initialize.js
+++ b/src/initialize.js
@@ -10,13 +10,15 @@ import Footer from 'components/Footer';
 import EventMap from 'components/EventMap';
 import EventList from 'components/EventList';

+import vrLogoFile from 'assets/images/logo-second-chances.png';
+//vrLogoFile is now magically a string like "/./images/logo-second-chances-3a18342b36d97891adb574e0008a78f2.png"
+
 let params = querystring.parse(window.location.hash.replace('#', ''));

 // set up cobranding based on url params
 let cobrand = {};
 if (params.c === 'vr') {
   cobrand = {
-    logoFile: 'logo-second-chances.png',
+    logoFile: vrLogoFile,
     hostEventLink: 'https://go.peoplepower.org/event/voting_rights/create/?source=map',
     showACLU: false
   };
diff --git a/src/templates/Header.html b/src/templates/Header.html
index b67e6d8..1f17c94 100644
--- a/src/templates/Header.html
+++ b/src/templates/Header.html
@@ -1,7 +1,7 @@
 <div class="header" id="header">
   <div class="inner-wrap">
     <div class="branding">
-      <img v-if="logoFile === 'logo-second-chances.png'" class="logo" src="~images/logo-second-chances.png" alt="YES Second Chances PeoplePower" />
+      <img v-if="logoFile" class="logo" v-bind:src="logoFile" alt="YES Second Chances PeoplePower" />
       <img v-else class="logo" src="~images/logo-aclu.png" alt="PeoplePower ACLU" />
       <h2 class="cta" ref="cta">Find events near you</h2>
     </div>

Agreed that it doesn't seem worth touching now, as long as we've only got a handful of these it doesn't really feel cleaner or much more DRY. But if we're going to grow a lot of these then it would be nice to define all the cobrand object choices in a separate module somewhere with their image paths imported as needed.

[jlev]

Implemented your suggestion of importing the file directly in #120, which also avoids putting both logos up on the initial load.

Thanks for the assist.