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 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)

no_plans

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