# Internetstiftelsen

WordPress theme for Internetstiftelsen.

Start by reading this README that contains sections on how to get started, development workflow and coding conventions.

## Dependencies

- Docker or Vagrant (optional)
- Git
- Composer
- Node+Npm

## Get started

1. Copy `.env-sample` to `.env` and make necessary changes.
2. Run `composer install` to setup WordPress.
3. Install client dependencies `npm install`
4. Run `npm run production` to build css and javascript files.

## Development environment

We've provided support for both Docker and Vagrant right out of the box. You can of course use your own environment. Make sure it meets the [WordPress requirements](https://wordpress.org/about/requirements/).

### Docker

Install [Docker](https://docs.docker.com/install/), copy `docker/nginx/default.template.conf` to `docker/nginx/default.conf` and run `docker-compose up -d`. Environment configuration is made in the `.env` file. If you need to change php configuration or nginx, check out the `php.ini` and `default.template.conf` in the `docker` directory.

## Development Workflow

We use Webpack for bundling with Laravel Mix on top for an simpler API and less configuration.

1. Start developing with `npm start`.

`npm start` watches scripts and styles, compiles/transpiles them with Babel (js) and SCSS+Autoprefixer (css).
A mix-manifest.json is generated with the names to each bundle that the theme reads and includes on the page.

## Configuration

It's recommended to configure `.browserslist` and when necessary install babel presets/transformers/plugins and add them to `.babelrc`. You can also activate automatic browser reloads by uncommenting the `browserSync` line in `webpack.mix.js`.

## Code quality

Before pushing any code make sure that the code follows [the IIS  Coding Conventions](https://github.com/sewebb/iis-start/wiki/IIS-standards-&-conventions).

* `npm run eslint`
* `npm run stylelint`
* `npm run htmllint`

Or all at once with `npm run lint`.

For PHP:
* `composer test`

## Test Accessibility

We use AXE to test accessibility. AXE scrolls through the page when it runs its test, this makes it quite annoying to have on by default.
So, to run it:

1. Open up the dev console.
2. Run `testAccessibility()`.

Another testing option is to run the Google Chrome Audit. From there you can test:

* Performance
* Best practices
* Accessibility
* SEO

You can simulate the test in either desktop environment or mobile. You can also throttle network and CPU.

## Production

When deploying to production you should use `npm run production` instead of `yarn start` to produce production-ready bundles.

## Deploy

To deploy the project simply run `composer deploy`. By default it will deploy to stage. You can specify where to deploy with:

* `composer deploy:prod`
* `composer deploy:stage`