Find help in NYC with food, money, housing, work and more on ACCESS NYC, managed and developed by the Mayor's Office for Economic Opportunity.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
vendor
wp-admin
wp-content
wp-includes
.gitignore
README.md
composer.json
composer.lock
index.php
license.txt
phpcs.xml
readme.html
wp-activate.php
wp-blog-header.php
wp-comments-post.php
wp-config-sample.php
wp-cron.php
wp-links-opml.php
wp-load.php
wp-login.php
wp-mail.php
wp-settings.php
wp-signup.php
wp-trackback.php
xmlrpc.php

README.md

ACCESS NYC

ACCESS NYC provides a mobile-friendly front door for New Yorkers to screen for City, State, and Federal benefit and program eligibility as well as learn how to apply to programs and find local help.

ACCESS NYC is for benefits-seeking residents in NYC and accommodates residents...

  • ... with low digital literacy
  • ... with limited technology access, especially those who are mobile dependent
  • ... who do not speak fluent English
  • ... who have limited visual capabilities

Tech

ACCESS NYC and its underlying content are available as in this WordPress site repository and the NYC Open Data Portal. The ACCESS NYC eligibility screener is a single page web application powered by an API built on the Drools Business Rules Management System hosted on Amazon Web Services through the NYC Department of Information Technology and Telecommunications. Additional benefit program content is delivered by WordPress, an open-source content management system, and hosted on WP Engine. All benefit program information on ACCESS NYC is publicly available through the Benefits and Programs API on the City of New York’s Open Data portal.

The ACCESS NYC Design System utilizes patterns from the U.S. Web Design System, the Bourbon SASS Tool Set, and the Tailwind.css Utility Framework. These are configured, distributed, and documented in a NPM Package ACCESS NYC Patterns which can be installed in any project.

Learn more about ACCESS NYC at nyc.gov/opportunity.

Local Usage

Requirements

  • Virtualization (Docker, Virtualbox, or other)
  • Composer
  • Node and NPM

NYCO WP Docker Boilerplate

This WordPress repository can be run many ways. The product team an NYC Opportunity uses Docker for Mac and the NYCO WP Docker Boilerplate for running and managing the application locally.

Composer

PHP and WordPress plugin dependencies for WordPress core and the ACCESS NYC Theme are managed via Composer. Learn more about Composer it's website.

Node and NPM

The ACCESS NYC Theme uses Node with NPM to manage packages such as Gulp to compile assets for the front-end. Learn more about Node, NPM, and Gulp at their respective websites.

Installation

This won't cover all of the options for standing up a WordPress site given all of the options available but it can be done with Docker for Mac and following the instructions in the NYCO WP Docker Boilerplate readme.

WordPress

ACCESS NYC is hosted on WP Engine and updates to WordPress are managed by their platform. WordPress dependencies (plugins) are managed via WP Packagist and the WordPress Admin (if they aren't available on WP Packagist). They are packaged with the repository to be easily shipped to different environments.

There are three Must Use plugins that are specifically developed for this project. They include Drools Proxy, Send Me NYC, and Stat Collector.

ACCESS NYC Theme

Functions

Some functions remain in the main functions.php, however, new modules are stored in the /includes directory and are included in functions.php at the bottom of the file.

Templates

The ACCESS NYC Theme is built on Timber which uses the Twig Templating Engine. Templates can be edited in the /views directory.

Assets

The source for image, style, and script files live in the src and are compiled to the /assets directory. This is done with the Gulp task manager.

To get started with modifying the theme front-end, change directories to the access theme and run npm install (Node and NPM are required to do this). This will install all node dependencies (including Gulp!) in the same directory.

The NPM package comes with three scripts;

  • development - This runs the default Gulp task in development mode which watches and compiles files.
  • production - This runs the default Gulp task in production mode which also watches and compiles files. The main difference is that production mode uses ESLint and will enforce JavaScript writing style.
  • predeploy - This will run a one-off build task in production mode. This should be run before all deployments.

Each can be run via npm run <script>. Once they run, they will fire up a BrowserSync instance to live test your code.

.env file

While not required, a .env file is included in the theme to define the proxy URL for BrowserSync. Copy .env.example to a new file and name it .env. Change the WP_DEV_URL value to what is set in the wp-config.php.

Debug Mode

The query parameter ?debug=1 to the site URL in any environment to help in debugging front-end issues. This will do a number of things. It will serve a non-minified version of the JavaScript with some logging enabled. It will also allow you to jump around to different steps in the eligibility screener, e.g. /eligiblity?debug=1#step-8, and if the web inspector is open will pause the app before and after the screener form is submitted while outputting the data payload and response object respectively.

Coding

SCSS

Many of the styles are either directly taken from or adapted from the U.S. Web Design System. Like the USWDS, ACCESS NYC utilizes Bourbon SASS Tool Set and Neat for SCSS mixin libraries.

Source files for the site’s CSS is located in the theme /src/scss directory. The SCSS files are processed, concatenated, and minfied by the gulp styles task. The stylesheet is broken up into several smaller partials. Refer to scss/_all.scss to get a sense of overall stylesheet organization.

For more details on multilingual and screen reader accessibile utilities refer to the Stylesheet wiki page.

ACCESS NYC Patterns (Pre-release)

ACCESS NYC Patterns are available as a pre-release while we develop their documentation. It is a refactored package of the previous U.S. Web Design System and Bourbon SASS Tool Set integration with an additional CSS utility framework called Tailwind.css. ACCESS NYC Patterns are distributed as an NPM Package that can be installed into any project using NPM, Yarn, or CDN. Refer to the documentation for details.

Javascript

The JavaScript is written as modules using Babel ES6 syntax. Source files are located in the theme /src/js directory. JavaScript is linted by the gulp lint task with the ESLint Google's standards. It is transpiled, concatenated, and minified by the gulp scripts task, using Babelify (Babel + Browserify).

The main JavaScript libraries used are jQuery, Underscore.js, and Vue.js.

PHP (in progress)

PHP is not currently linted in this repository, however, the NYC Opportunity Product team recommends the PSR-2 standard. Example configurations can be found in NYCO Composer Packages on Packagist.

Editor Config (deprecated)

An .editorconfig file is included in the theme to enforce some style settings for code editors that support it. See editorconfig.com for more information.

About NYCO

NYC Opportunity is the New York City Mayor's Office for Economic Opportunity. We are committed to sharing open source software that we use in our products. Feel free to ask questions and share feedback. Follow @nycopportunity on Github, Twitter, Facebook, and Instagram.