Describe the bug

Fortawesome is causing build to fail for the icons for Communicate page in Heroku

Steps to reproduce the behavior:

1. Go to master and install the fortawesome package after cd ally-guide

2. To verify we check in package.json for dependencies

3. And make sure its routed from main.js to elevate

See error

Expected behavior
After installing fontawesome as per these instructions, the icon should be usable without causnig a build failure
Screenshots

Possible similar issue:

This might be a resource for solving fontawesome's issues with Heroku at least for the free version, confused around instructions for deleting lock files. Any help or suggestions appreciated!

• add instructions on page @manishapriya94 @mahrsbar can you make sure the div where this image will be dropped into will fit the object for mobile?

• rep menu @mahrsbar
• accordion of messages/tweets @mahrsbar
• back button: format this to be on same page as search (not hide the div) @manishapriya94

Background

As part of the Distribute page requirements #12 , having trouble . In the file Educate.vue , we need to be able to use Airtable API for Educate to output educational resources

• User input: name and maybe medium
• Output: Sorted by alphabetical, filtered by medium, or sorted by duration of material

The Problem:

At this stage, the package is imported and installed. The data calls don't seem to be working.
Ask: configure the component structure of Vue.js to perform the above proposed solution, alternatives welcome!
Resources:

• Airtable + Vue.js
• request access here

Proposed solution:

• Input text line is data that matches to Airtable API's methods of filterbyformula called on to listRecords

Short Description
This feature would add every vuejs page to index via a show/hide component structure or accordion. This is referring tto files:(Educate) Library.vue, (Communicate) Elevate.vue, (Circulate) Distribute.vue, (Elevate) Collaborate.vue

Is your feature request related to a problem? Please describe.
Proposing this to streamline UI and UX across mobile and desktop. Also geared to the gen z/millenial persona

Which page? (Add in labels - Circulate, Communicate, Educate, Elevate, home/index, general)
All of the divs would be in home/index
Being able to do this?

Describe the solution you'd like
In vuejs you can show and hide divs based off of components:

Describe alternatives you've considered
An alternative could be to have a desktop version and mobile be this. For the sake of simplicity, we can try this first?

• route all api to index/home
• convert page .vue files into components (does it break anything?)
• show and hide div based on button click

File organization

• Rename, consolidate, and reroute all vue files using updated app layout, referencing #80
• Remove unused assets from src/assets, move remaining assets to public/assets, ensure all new assets are placed here
• Update gitignore file to reduce server files being pushed

Code rewrite

• Convert colors.css to colors.less, use LESS variables for ease of reference
• Organize style.less into LESS format, currently in CSS format
• Remove external styling in vue files and add to style.less so in order to avoid styling same element in separate places and increased readability
• Remove inline styling in vue files, organize everything by div classes and add to style.less

Purpose

How can we translate our skills and resources towards racial justice? Ally.Guide is webapp that triages a starting place to collaborate with current racial justice efforts and echo Black Lives Matter through the following programs. (current website, GitHub, Slack)

⚠️📢 Calling developers, designers, and content writers

This issue summarizes how we all collaborate together, if you're interested in Implementation (design, frontend, backend) or Content (design, content entry and copy), go to the respective boards or contact @manishapriya94 if there any confusion

Feature Development (Teams + Page)

Responsibilities

@ProjectCoordinators (tagged) update these upon deadline extensions/completion.
@Collaborators, check workflow details and status here:

Updates/Teams:

⚙️Implementation Project Board: 🎨Design, 🖼Frontend, 🗂Backend

📖Content Project Board: 🎨Design,🗃Content Entry, 📝Content Copy

Status: Planning ✍️, Working 🏗, Reviewing☕️, Stuck 🚧, Done ✅

Testing conducted with these details in mind:

• Target audience: tech individuals, everyday people who want to learn more about their role in being more than not racist but becoming an antiracist and understanding how intersectionality applies to them
• Used Chrome Version 84.0.4147.89 (Official Build) (64-bit) and Firefox 78.0.2

Issues

Contribute

• When visiting the page, a message that states "Sorry, no results found" briefly displays
  

Key aspects of this page is the ability to sponsor protesting teams directly

• Technical Requirements doc
• Moqup @manishapriya94
• UI implementation (Mahrs)
• Airtable (click link to request access)
• Data/Airtable configuration @ankitagrawal98
• Functions
  • [] Query by name, state, cause, and filters @ankitagrawal98
  • [ ]Sort by alphabetical, by anything else? @ankitagrawal98
  • [ ]Banner and assets @manishapriya94 @aarchuleta

Future:

• go granular by county?
• Issue structure for submissions

Priority 3 in Amplify #98

Caching inputs to pass through Lob API in amplify page

• Verify user address
  On input from Search bar, call verify user address
• Cache user address
  If verification returns true, create a variable for it.
• Cache User Name from Signature
• Pass Representative address
  • do we want to verify this too?
• Cache template ID
  Change components to matching template ID

Google form submission data. dyanmic from Google

Moqup:

Circulate Page Laundry List

Where to start? Collaboration Timeline

Comment below on the issue you're interested in solving so others can collaborate with you. Have questions? Tag the following people: 🖼 Frontend - @mahrsbar, ⚙️Backend - @BeeXiong, 🎨Design - @jjjaney

Testing conducted with these details in mind:

• Target audience: tech individuals, everyday people who want to learn more about their role in being more than not racist but becoming an antiracist and understanding how intersectionality applies to them
• Used Chrome Version 84.0.4147.89 (Official Build) (64-bit) and Firefox 78.0.2

Issues

• Update the site title, description, and favicon for search engines, etc.
• Needs to be mobile responsive
  • Specifically, the menu items overlap with each other
• Pages need breadcrumbs, especially so you can figure out where you are
  • For example, the library page is a separate page linked from the educate section, but when you're on the library page, you won't know how you got there
  • Expected format example: Home > Educate > Library
• Need site map (index of all available forms, glossary of words, resources, etc.)
• Explore the use of a subnavigation along with the main / toplevel navigation
  • This is useful for getting a big picture of the site and its offerings so you know exactly where you should go
  • Several pages are buried under the main navigation that makes it difficult to browse or know where to return (examples: take a learning path, library, and train your team are linked off educate)
• Make forms consistent style (each form has a different look and feel, which is inconsistent)
  • Since many options currently go to google forms, would it be possible instead to use a surveymonkey account (or a smarter form service) to make a more generic form with options for why they're contacting that goes to different question/answer response paths depending on what they select?
• Add space between footer and end of page
• Make all font styles consistent and complementary (Ally Guide being a different font is distracting)
• Digital accessibility concerns
  • Are labels and buttons in order and can they be tabbed through for those with digital accessibility needs (for example, alt text for images)
  • All words reflected within an image should be removed and instead added as actual text for screen readers and those with digital accessibility needs
• Make treatments for buttons consistent across site so that users have an understanding and expectation of how the site operates
• Why is "stay updated" a form rather than having an email entry field in the footer for email subscriptions
  • Is this something you want to start recording in mailchimp or surveymonkey?
• Move toolbar / menu to the top instead of in the middle
  • Remove highlight box around subscribe because this makes it seem that you're on this page regardless of where you are in the site (highlight this with an email or subscribe + symbol instead)
  • If the Ally.Guide placeholder is in the toolbar, it looks like a button (especially with the red underline) but it doesn't link to anywher—is this a home button? If it's a home button, maybe we can use a home icon and add a title to the site instead

Testing conducted with these details in mind:

• Target audience: tech individuals, everyday people who want to learn more about their role in being more than not racist but becoming an antiracist and understanding how intersectionality applies to them
• Used Chrome Version 84.0.4147.89 (Official Build) (64-bit) and Firefox 78.0.2

Issues

Home

• Add more space between Elevate, Contribute, Educate, Collaborate sections on index (increase height and and make them consistently the same size)
• Remove photo background from the Elevate section graphic in order to simplify the appearance and make it consistent with the other sections
• Consider removing the photo banner
• Mobile responsiveness: Summary text in each section overlaps or is hidden by the next section as you resize the page
• Remove the link for each overall section and instead, link each section title or add a CTA (call-to-action) link under each section's description
  • It might be a confusing experience for people who aren't as technically savvy that everything is clickable
• Sometimes i see footer text / sitemap information at the bottom and sometimes I don't...not sure what's going on there...

Testing conducted with these details in mind:

• Target audience: tech individuals, everyday people who want to learn more about their role in being more than not racist but becoming an antiracist and understanding how intersectionality applies to them
• Used Chrome Version 84.0.4147.89 (Official Build) (64-bit) and Firefox 78.0.2

Issues

Collaborate

• [ ]

Ask

Hello!

Looking to implement Oauth for Gmail.

Flow for UI -->

• User interacts with UI to find Reps + messaging
• Button triggers authorization to create cookie
• Cookie to be used to make call to Gmail API

• Message button at the side or top? Open as a new page (we can refine to modal later)
  • At this time they would have a modal to enter in credentials after which they could send the message (pulling from the google civic api to the receiving party's email address)
• Email subject line should be a combination of the name and template title demand

Priority:

• Medium --> Turnaround time within a week consult @BeeXiong @hashtagchris for questions

Context

Resources to get started:

• template/script/style here
• API Configuration
  • Secrets should be configured in root .env file, configured in index.js file on server directory
  • Secrets configured here:

• Passport.js Tutorial

Tasks

• Configure civic api to return rep email addresses
• oauth config
  • Back-end Endpoints
    • Create auth Endpoint in server/routes/api + route endpoints to connect to front-end
      • Get Endpoint (/auth/google)
    • Implement Passport.js
    • Implement GoogleStrategy using Passport.js
      • Configure secrets into Heroku Environment
      • Authorize Users
    • Create Cookie Session
  • Front-end
    • Create Authorize Button in UI + trigger API call to api/auth/google
    • Notify User of Sign in
• styling of modal

Related issues / pull requests
Does this close an open issue?

Urgency and Priority
Urgency:
Medium

Priority 1 - API/Functionality securitization (Secrets, managing end points, app functionalty)
Priority 2 - Workflow management (CI/CD, Actions, Permissions management)
Priority 3 - User Analytics Functionality
Priority 4 - UI optimizations

Priority 3

Which page is this
Circulate

The Problem:
Postman API call worked on the congress API. Can't figure out the Vue.js part using Vue-Resource (tried Axios) as well. Those are libraries that help you to make the api calls.

This is in src, elevate.vue

This references the overall functionality of the communciate page when the mail option is selected. This is a planning issue to get the specifics of what this capability needs. Referencing #73 for overall page flow.

Goal:

Immediate:
How to implement postal methods API (live mail sending) connected to triage of specific addresses (Google Civic API + addidtional databases)

Future:
We could use dashboard analytics to create a visualization of whats being sent our around which messaging and where:
replacing this:

With:

What we have functioning:

• Google Civic API
• Messaging showing based on level

What we need to know

• How to implement/match PostalMethods to our stack. Here's the dev guide(Our stack is Vuejs, Express, and Node at the moment)

• triaging between two databases to find address for specific reps not found in google civic api, rep id as unique key?
• Cost of average letter will be ~$1.00, how to configure this transaction - who bears it?

Next steps: Make issues for

• content entry team to add in addresses
• mock environment
• configuring payment path
• Analytics

Would help with new contributors to have a section in the readme that shows which commands to run to get setup + how to start the dev server.

Google form submission data. dyanmic from Google

Google form submission data.

It would be super useful if we could get a Deploy to Heroku button in the Readme which would enable users to easily deploy DemocracyOS to a Heroku instance without ever leaving the web browser. And with just a little configuration on the users end they'll have something running almost instantly.

I propose the button because it is ideal for communities who need to make decisions quickly with the flexibility of something like Heroku.

More about Heroku deploy buttons here, https://devcenter.heroku.com/articles/heroku-button .

An example button which currently lacks the required setup files:

Testing conducted with these details in mind:

• Target audience: tech individuals, everyday people who want to learn more about their role in being more than not racist but becoming an antiracist and understanding how intersectionality applies to them
• Used Chrome Version 84.0.4147.89 (Official Build) (64-bit) and Firefox 78.0.2

Issues

Educate

• Library is not linked in top nav, should it be? This is the only way to access it
• The “Take a learning path”, “Train your team”, and “Library” links are covered by the rotating image depending on resolution / browser height
• Images in carousel aren't contained, it's going below the bottom of its container. When the resolution or browser height is too short, the image carousel covers the links directly below it (Take a learning path, Train your team, Library)
  • Use images without text in the carousel (and add the text within the text area of the carousel if needed)
  • Remove the timeline photo and either type out the text for digital accessibility purposes
  • Should this carousel be removed entirely? I'm wondering if sections or an actual gallery within the page would help...this carousel limits what can be displayed and how (especially when considering mobile constraints)
• The link bar in the middle of the page has an inconsistent font family and text size from the rest of the page
• The "Are you aware" text seems like it could benefit from being changed to "Frequently Asked Questions" instead so that people some level of familiarity with how to use the site and understand the information being presented
  • Is this expand/collapse list digitally accessible?

Library-specific

• When navigating to the Library page from /Educate, three lines of text in the middle of the page that either aren't linked or are missing information
  
• Provide more guidance on how to interact with the library—right now it's unclear
  • Does the search functionality currently work or does it show all results regardless of keyword?
• Make card results consistent in height/width
• Remove "view" button and just make title clickable to save vertical space?
• Add default images for books, articles, infographics, podcasts, and other categories so that it's not tedious updating each individual asset for each unique resource
  • Are there or will there be multiple viewing options for these search results, such as a list format?
  • Where do the links go? Right now they open a blank page.
• Provide restrictions on how many characters appear in the summary / trailer and title text of each card
  • Is it possible to make the categories clickable labels? (Sort of how GitHub labels work?)

Google form submission data. dyanmic from Google

Issue template suggestions..

Short Description
1-2 sentences describing the problem and how to recreate the issue (if appropriate).

Urgency / Priority
Define what these are, a color system red (this is a huge bottleneck or time consuming/timeline is asap) / yellow (this is middle priority if its a later phase, not as connected to other features/phase 1 timeline) and green (quick fix or months away for phase 2) a number system based on if it's blocking

Desired outcome
What is the desired outcome, is it a fix or an additional feature to remedy an issue?

People needs
Who are the people needs for this issue? Engineers? Programmers? Writers? Designers? Etc?

Tasklist

• Add a task that's a part of this issue, examples below
• @abc investigates code to reproduce issue
• @xyz tests fix from @abc and deploys
• @123 updates design to reflect copy change
• etc etc etc

Purpose

The overall purpose of this page is to be able to make it more accessible for people to call on different entities that represent them and demand actions for policy or investigations.

In our current phase our major goals are to have tweets specific to all 50 states and create mail capability to congress members. This page can be divided into 3 sections:

Open Issues

This table will show whats been planned and open to your collaboration.

Display Search Default (where people enter zipcode) Figma	Display Search Results: (after selecting a rep)	Functionality Optimized: Google Civic API Postman API
Front End: Refactor Banners for mobile Reviewing reps: Design + Front End Filter buttons: Congress: + Judicial, State: +Judicial, Local: City, County Backend resolve fortawesome	Action For messaging: @mahrsbar Frontend Rep action menu Twitter Action display Backend ‘Back’ button that hides rep div to old search	Back End Create filters for rep search Plan Mail functionality Analytics Measuring button clicks on tweets? Measure deliveries from PostAPI

Timeline

The table below gives us a general sense of where want to be timeline wise.
Teams are: 🖼 FrontEnd ⚙️BackEnd/Infrastructure 🎨Design

Educate Page Moqup

Pre Search Default Figma	Display Search Results:	Query optimized: BackEnd: Airtable API documentation
Front End Display of search default Search bar Circles of mediums 2-3 bubbled topics Design Final UI + button for people to add resources	BackEnd Remove squares when search is input *FrontEnd: Display of search results Filters and Sorting Images matched by database (done) and color matched by medium (need to implement Styling of information on card (title, summary, duration, topic, medium)	Back End API data formatting Topics broken up from array Filter connected to match database Sorting alphabetically and by ascending/descending(duration) Analytics Measuring button clicks on books?

Collaboration Timeline

More details in Elevate Section Doc

Phase 0 Functionality:

• Moqup

• Congress API : KEY: b7SK4ISUkUkrYQKn8ZrgHn3gsXGmAFxOGCbQEX7h
• Email Templates
• Representative info
  • Congress
  • Senators
  • Mayors
• Gmail API/OAuth
• UI implemented

Future:

• Add in tab for Defund (include links
• Database of petitions
• Add in snippets by state

Contact: [email protected]
State: CA
City: SF
Demand Letterr: To whom it concerns.

Background

@mahrsbar had brought up an interesting point that people are motivated by big ideas, by a cause to get behind. When reaching out to representatives, its the why that drives us and thats what we focused on with this refresh.

REFRESH: We will be moving to a single application design which can be routed as Amplify from programequity.com.**

The goals of this design are to:

• be user centric and engage by cause
• create user login
• move to a multiple repo structure, frontend repo and backend repo

The features to accomplish this are:

• gallery population
• looking up reps
• message preview
• letter object send
• social media share

New design User Story (Figma)

@Garrett1Tolbert Building Issues Here

• screen 1: new user can view trending campaigns and learn about our mission
• screen change 2: user can preview, empty default page until address and filter are input
• screen change 3: user can select representative and click 'send message'
  • new user: prompted to validate with login
  • old user: confirmation and share campaign popup appears

Building this out (each page is a separate issue)

Amplify FrontEnd @mahrsbar

• Screen 1: Landing Page Gallery Campaigns
• Screen 2: Default Empty Email Campaign page
• Screen 3: Letter Review
• Screen 4: Send and social share

Amplify BackEnd @BeeXiong @cmcoffee91 @ankitagrawal98

• [ ]

Testing conducted with these details in mind:

• Target audience: tech individuals, everyday people who want to learn more about their role in being more than not racist but becoming an antiracist and understanding how intersectionality applies to them

Issues

Subscribe

• [ ]

Google form submission data.

• Content Entry
• Design
• Copy

wrong comment

Testing conducted with these details in mind:

• Target audience: tech individuals, everyday people who want to learn more about their role in being more than not racist but becoming an antiracist and understanding how intersectionality applies to them
• Used Chrome Version 84.0.4147.89 (Official Build) (64-bit) and Firefox 78.0.2

Issues

Elevate

• [ ]

Google form submission data.

Proposed redesign of the index page (other pages to follow)

• Pages have now been reduced to Learn, Amplify, and Give
  • Learn used to be educate
  • Amplify used to be elevate
  • Give used to be circulate
  • Communicate content will be collapsed into Amplify

Google form submission data. dyanmic Body

Purpose

As we watch protests and the multiple instances of systemic violence, theres a feeling of - how can I help? Ally.Guide is webapp that triages a starting place. This information is in many places, but unfortunately not yet in a way that can be searched and connected to petitions and messages to congress, we can change that.

Ally Hours are where we do date entry that supplies all the information above! Add yourself to the cal invite Have any questions? Join our slack #ally-guide or dm @manishapriya94