appalachian-town-halls's Introduction

Appalachian Town Halls

Interactive about town hall meetings held by members of the U.S. House of Representatives whose districts are in Appalachia.

Assumptions

bash (or similar) shell for running scripts in package.json
curl
yarn

Development

Install build dependencies:

yarn install

Fetch data:

yarn run fetch

Bundle JavaScript and stylesheets:

yarn run build

Watch application JavaScript and re-bundle:

yarn run watch

Run a local development server:

yarn run serve

Rendering timeline to string

If you would like to render the timeline to a string, perhaps to bootstrap the initial page HTML, you can run a script to render the timeline HTML to a string:

./scripts/render_timeline.js

Deployment

This is a simple static site that deploys on GitHub pages. To deploy, run:

yarn run deploy

Deploying on Wordpress

With a little work, you can also deploy this on Wordpress. For simplicity, let's keep the JavaScript and JSON hosted on GitHub pages. The container HTML, initialization JavaScript and CSS will all live in Wordpress.

Install the "Scripts n Styles" plugin

By default, Wordpress restricts you from adding arbitrary CSS and JavaScript. This is a good thing, because allowing arbitrary JavaScript can lead to security issues. The Scripts n Styles plugin is a reasonable way to be able to add custom JavaScript and CSS to specific Wordpress posts.

Create a post to host the app

Create a post just like you would for any Wordpress content.

Add two shortcodes for the app and vendor JavaScript

In the "Scripts n Styles" panel in the post admin, click the "Shortcodes" tab and add two shortcodes.

I called these shortcodes town-halls-js-vendor and town-halls-js. You can call them whatever you want, but the name will have to match the one used in the next step.

The bodies of the shortcodes should be as follows:

town-halls-js-vendor:

<script src="https://ghing.github.io/appalachian-town-halls/js/vendor.min.js"></script>

town-halls-js: <script src="https://ghing.github.io/appalachian-town-halls/js/app.min.js"></script>

Add the container HTML tags and script shortcodes

In the post body editor, switch to the "Text" mode and enter the following text:

<div id="representative-search-container" class="representative-search-container"></div>
<div id="representative-context-container" class="representative-context-container"></div>
<div id="townhall-timeline-container" class="timeline-container"></div>
[hoops name="town-halls-js-vendor"]
[hoops name="town-halls-js"]

Add initialization JavaScript

In the "Scripts n Styles" panel in the post admin, click the "Scripts" tab and enter the following JavaScript in the text area that will be added to the post's <body> tag:

(function(TownHalls) {
    var app = new TownHalls.App({
        repSearchContainer: document.getElementById('representative-search-container'),
        repContextContainer: document.getElementById('representative-context-container'),
        timelineContainer: document.getElementById('townhall-timeline-container'),
        officialMeetingsJsonUrl: 'https://ghing.github.io/appalachian-town-halls/data/official_meetings.json',
        ahcaVotesJsonUrl: 'https://ghing.github.io/appalachian-town-halls/data/ahca-votes.json',
        // HACK: Hard-coding this because this is a static-only
        // project.  Be sure to secure it by restricting to
        // certain domains.
        googleApiKey: 'AIzaSyAgdks_bI1m67WGcWkpHiDqfKTIkpWp1LA'
    });
})(window.TownHalls);

Add styles

We could load the stylesheet remotely via JavaScript, but this would cause a flash of unstyled content. Since the app doesn't have that many styles, we'll just inline them.

In the "Scripts n Styles" panel in the post admin, click the "Styles" tab and copy and paste the contents of the dist/styles.css file into the text area.

appalachian-town-halls's People

Contributors

Watchers

appalachian-town-halls's Issues

Add AHCA votes

Update styles for "100 Days ..." site

Now that this is going to be hosted on http://www.100daysinappalachia.com, the styles need to be updated so things look good there.

Limit representative search to only Appalachian reps

Add 100 Days styles to local development environment

Local development will be faster and it will be easier to implement styles if the site styles from
http://www.100daysinappalachia.com/ are also added to the page served in local development.

Show pre-rendered timeline as initial content

Show a pre-rendered list of meetings as the initial content. That way, there's no mysterious missing content between the app and the methodology paragraphs on initial page load. We know what this content will be, so it makes sense to just show a slightly out-of-date timeline instead of a "loading message".

Add May/June congressional recess

Add "data loading" message

Since the API endpoint that provides up-to-date info about meetings is hosted on Heroku, it can take a noticeable amount of time for the "dyno" to spin up and return a response. We should show a "loading" message in the space where the timeline will be shown so things aren't confusing and don't seem broken to the audience.

Tasks

Basic text loading message
CSS animation loading message

Handle case when there aren't any divisions for an address

Add context for representative

Show a paragraph putting the representative in context of all the representatives. This could include:

Whether the rep had an above or below average number of meetings.
Whether the rep had in-person or only telephone meetings
How the rep's party compared in terms of the number of meetings
Whether the rep had the least or most meetings
???

Recommend Projects

ghing / appalachian-town-halls Goto Github PK