Plan Library Documentation

The Plan Library is a place to propose and analyze not-necessarily enacted redistricting plans, as opposed to the historical state pages (linked from the front page) which outline the history of a state's districts.

Overall Structure of the Library

Right now the Library is a static set of pages.

The Library Index

The index is at /library and contains the three files: index.js6 for any page-specific JavaScript index.scss for any page-specific CSS index.src.html for the markup

These three files are compiled on build, to create everything you see at {siteurl}/library (ie dev.planscore.org/library in development, and planscore.campaignlegal.org/library once it goes live)

The no_plans page is default

This page is where visitors are led when they choose a state without a unique plan page.

There is code in the global.js file (in the root), the goToStateLibraryIfExists() function, which hijacks the href destination, does a GET request to see if that state page exists, and if it does not, it redirects to this no_plans page.

potential features

One quick feature that could be added is to add a ?state_name query string, then you could pick that up in the no_plans page and use it to say which state doesn't have a plan.

Further down the road, this pattern should be abandoned entirely, in favor of the backend providing a list of which states have pages, and using the correct href within library/index.js6 initStatePicker.

State Library pages

Because there is no logic to generate state pages, they're each unique and managed one by one.

A state page should contain a blurb of information about the state, a map, and then a series of cards. Each card represents a potential proposed plan for that state.

Making a new state library page

1. There is a folder called library/_statetemplate which you can duplicate and rename to the state name, lowercase.

2. Open the index.src.html file within that new state folder and Find and Replace STATE_NAME with the actual state name, Capitalized. There is a button near the end where it is within an href= property, which should be in lowercase.

3. For each plan, copy the card html, starting with <li class="card"> ending and including </li>.

4. Paste it into the section it pertains to US House State Senate or State House.

5. The things to change are, you can use cmd+F to find them:

   PLAN_URL: url of plan on live site, typically /plan.html?TIMESTAMP (ex: /plan.html?20210629T164045.985413296Z which would lead to https://planscore.campaignlegal.org/plan.html?20210629T164045.985413296Z

   AUTHOR: organization or person who authored this plan

   DATETIME: The date the plan was uploaded, be sure to update both the property (for accessibility) and the text itself (for readability)

   PLAN_NOTES: Anything you want to say about the plan.

6. For enacted plan, there is a note ENACT to add the class "enacted" to the <h3> of the STATE_NAME. This adds a small red badge:

Okay so now your page is looking good, but it won't be built.

7. Open webpack.config.js
8. Scroll on down to LIBRARY_JS6_FILES and add the ./library/STATE_NAME/index.js6, to the array.
9. Run npm run build or restart your npm run serve

The new state library page is now part of your build - try it out!

The Announcement

The announcement appears at the top of every page until a user dismisses it.

Once they do, it will stay closed for up to a week, which is stored in a cookie.

To update it, you need to edit the global.js JavaScript file, which contains JavaScript that every page needs.

Line 30 is the message itself Announcement text! in the example above. Line 31 has the html for the call to action. Update the href= to point it to any URL you'd like. Line 32 has the call to action text itself "Call to action!" in the example above.