Code Monkey home page Code Monkey logo

code-gov-front-end's Introduction

Code.gov - Unlocking the potential of the Federal Government’s software.

Build Status Code Climate tested with jest

Introduction

Code.gov is a website promoting good practices in code development, collaboration, and reuse across the U.S. Government. Code.gov provides tools and guidance to help agencies implement the Federal Source Code Policy. It also includes an inventory of government custom code to promote reuse between agencies and provides tools to help government and the public collaborate on open source projects.

To learn more about the project, check out this blog post.

Code.gov is an open source project, so we invite your contributions, be it in the form of code, design, or ideas.

Contributing

Here’s how you can help contribute to code.gov:

Getting Started

You will need node to run this website. It's built against v10.19.0. The best way to get node is to install it via nvm. See the nvm installation instructions to set it up on your system.

After you have cloned this repo, you can use npm install to install all of the project’s dependencies.

You can then run the server using npm run start.

By default, the development server will listen on http://localhost:8080/. You can change the default port by setting the PORT environment variable before starting the server (for example, PORT=3000 npm start).

Specifying an API Key

The app uses the API key provided in the site.json by default. If you want to override that, specify an CODE_GOV_API_KEY environmental variable. Here's an example:

CODE_GOV_API_KEY=l87sfdi7ybc2bic7bai8cb2i176c3b872tb3 npm run start

An alternate approach to using your API key every time you use npm run start is to create a .env.local file and store your API key. (Remember to use CODE_GOV_API_KEY=...) In accordance with dotenv-flow, your personal key will be ignored when committing updates to GH.

You can sign up for an API key.

File Structure

The directories in src are organized around the pillars of React, along with several additional custom file types. When creating new files, be sure to add your file and any necessary templates, styles, and tests to a directory dedicated to your new file in the appropriate place.

Testing

Unit testing is done using the jest framework with enzyme.

Use npm run test to run unit tests a single time. This will generate a code coverage report.

Use npm run test-watch to run unit tests continuously, re-running each time a file is saved. By default only files changed since the last commit will be ran, follow the command line prompt for customizing how tests are ran. Snapshot tests can be updated while running this command, by pressing u to updated them.

Note: console.log/warn/error are mocked in unit tests and will not print anything to avoid cluttering the command line. Use a different logging, such as console.info for debugging while running tests

Note: site should be running locally before executing npm run test or you might get false errors due to the component plugins being used

To run web accessibility testing do the following: a. Make sure ruby and the bundler gem are installed on your computer. b. Start a server by running npm run start. c. Use the npm run test-pa11y command to run the accessibility tests.

Pa11y-ci uses URLs in the sitemap file to run tests against. It currently excludes anything in /projects. Since this is over 6000 items, it would take a long time to finish and just report the same issues over and over. Additional accessibility testing configuration is located in the .pa11yci file. A select few projects are listed here as URL's to test. These are tested in addition to the sitemap.xml. The --sitemap-find and --sitemap-replace commands allow us to scan the named pages in the sitemap, but test them locally against the server you are running on your machine.

We follow the WCAG2AA standard. For more info on the rules being tested checkout the pa11y wiki

End-to-end tests:
We use Cypress to run end-to-end tests.
To run Cypress testing do the following:
a. Make sure you run npm install to install all of the project’s dependencies.
b. Start a server by running npm run start.
c. Use the npm run test:cypress command to run the Cypress tests.

Once these steps are completed, you should see the list of spec files.

Cypress startup

Click the run all specs button (in the upper right) to run the tests.

Cypress tests

Deployment

Read about how to publish to Github pages, Federalist and elsewhere here

Bundle analysis

https://federalist-proxy.app.cloud.gov/preview/gsa/code-gov-front-end/federalist-bundle-analysis/report.html

Deploying Arbitrary Branch

Coming soon!

Generating License Data

To update the dependency_licenses.json file, run npm run licenses.

Configuration

For documentation on how to configure code-gov-front-end, read here.

Questions?

If you have questions, please feel free to contact us:
Open an issue
LinkedIn
Twitter
Email

Or join our #opensource-public channel on Slack: https://chat.18f.gov/

License

As stated in CONTRIBUTING:

[..] this project is in the worldwide public domain (in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication).

All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.

code-gov-front-end's People

Contributors

adamjubert avatar anna-zhang avatar balajijbcs avatar danieljdufour avatar drewbo avatar ftonato avatar hendersonanalytics avatar hursey013 avatar jcastle-zz avatar mamooredesigns avatar mitchellhenke avatar peterrowland avatar ryanwoldatwork avatar s0 avatar saracope avatar seanstar12 avatar snyk-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

code-gov-front-end's Issues

Pagination Incorrect in Open tasks

Describe the bug
A clear and concise description of what the bug is.
Pagination says 11 - 21 when it should say 11-20

To Reproduce
Steps to reproduce the behavior:

  1. Go to open tasks
  2. Click on enhancement type
  3. Scroll down to pagination
  4. Click next
  5. Scroll down to pagination

Expected behavior
A clear and concise description of what you expected to happen.
See above

Screenshots
If applicable, add screenshots to help explain your problem.
image

On mobile, put filters in flyout/overlay

Expected Behavior

On mobile, instead of having all the filters displayed by default there should be a filter button that reveals all filters with a flyout out or overlay menu. Right now the filters take up too much real estate and push the main content too far down so the user has to scroll too much.

Current Behavior

All filters are displayed on mobile pushing the main content of the page way down

Possible Solution

Create a Filter button, and when clicked the filters will fly in and fill the screen.

See: https://a4alzb.axshare.com/filters.html

Additional Context

Previous work was done on the Angular version of the site and some of it can probably be copied over: https://github.com/GSA/code-gov-web/pull/702/files

Update Roadmap

Describe the bug
Update the roadmap to the following:

Mark Phase 1 SEO as released
Mark Search Scoring Phase 1 as released
Mark Update Search Filters as released
Mark Update Open Tasks Phase 1 as released
Mark Update UI for Search Results as released
Mark Usability Sessions, Round 2 as released

Remove States and Cities Pilot Program

Make Navigation in About Section Better

Describe the bug
A clear and concise description of what the bug is.
Navigation in the FSCP Policy Page uses a dropdown while about page uses a multi-level list. @jlow81 , should I convert the about section navigation to a dropdown?

To Reproduce
Steps to reproduce the behavior:

  1. Go to staging.code.gov/about

Expected behavior
A clear and concise description of what you expected to happen.
N/A

Screenshots
If applicable, add screenshots to help explain your problem.
image

Additional context
Add any other context about the problem here.

multilingual support?

Your issue may already be reported!
Please search on the issue track before creating one.

Expected Behavior

I think it would be beneficial if code.gov could be viewed in other languages such as Spanish.

Current Behavior

there is no way to change the language

Possible Solution

not sure

Steps to Reproduce (for bugs)

1.go to code.gov

Context

This hasn't affected me personally, but may be useful to those who are more comfortable in another language.

Remove Automatic Upper-Casing for Menu Bar

Your issue may already be reported!
Please search on the issue track before creating one.

Expected Behavior

The text in the code-gov-config.json should appear in the menu

Current Behavior

I wrote css styles to automatically capitalize.

Possible Solution

Don't automatically capitalize and just have (re-)user capitalize in the site.json

Steps to Reproduce (for bugs)

  1. go to code.gov
  2. look at menu
  3. inspect element on a menu item

Context

  • This makes test writing slower because test writer doesn't know what text is really without inspecting element.
  • Reusers might want to have a greater ability to configure the look of their menu

Your Environment

N/A

No Mobile View of JSON Schema Viewer

Describe the bug
A clear and concise description of what the bug is.
User can't scroll left and right to see the schema explanation table

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://staging.code.gov/about/compliance/inventory-code

Expected behavior
A clear and concise description of what you expected to happen.
Scroll left and right, but ideally have a version of this viewer that is more mobile friendly

Screenshots
If applicable, add screenshots to help explain your problem.
image

Smartphone (please complete the following information):
Samsung S5

Additional context
@jlow81 , do we a mockup for the mobile version of the schema viewer?

Nav on secondary page is wrong colors

Describe the bug
Nav colors on secondary page should be inverted (I noticed while testing the Federal Source Code Policy Page).

Screenshots
Observed:
image

Expected:
image

Open Tasks filters not working

Describe the bug
When I select a filter on the Open Tasks page, nothing changes

To Reproduce
Steps to reproduce the behavior:

  1. Go to Open Tasks page
  2. Click on a filter

Expected behavior
Tasks should update based on selected filter

Screenshots
image

Regenerate Sitemap

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
We should regenerate the sitemap for code.gov after the migration and feed it to google

Describe the solution you'd like
A clear and concise description of what you want to happen.
Create a sitemap.xml file using https://github.com/GSA/code-gov-site-map-generator

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
N/A

Additional context
Add any other context or screenshots about the feature request here.

Repo Card Title Covered By Data Quality Tag

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to 'localhost/search?query=water&page=1&sort=last_updated&languages=fortran'

Expected behavior
A clear and concise description of what you expected to happen.
I expect the card title to end or wrap before the quality tag

Screenshots
If applicable, add screenshots to help explain your problem.
image

Desktop (please complete the following information):

  • OS: [e.g. iOS] ChromeOS
  • Browser [e.g. chrome, safari] Chrome

Additional context
Add any other context about the problem here.
You might want to make changes in https://github.com/GSA/code-gov-style

On mobile, result card alignment is all messed up

Describe the bug
The content in a result card is a bit of a mess. Specifically the languages. Its hard to read. Can we separate by commas at the very least and start it in line with the language title like everything else? And the space between last update and usage type is larger than the rest. Lastly, do you know why #nsacyber is showing up in the description?

This is on iPhone X iOS 12

Screenshots
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.