pidgin/nest

WCAG 2 fixes for contrast and empty header

2021-06-27, Jonathan Champ
c1fbb1f6b8e5
WCAG 2 fixes for contrast and empty header

Testing Done:
Ran WAVE tool browser extension. They have a no-install, web version at https://wave.webaim.org/

As an example, improvement goes from 3+24 errors to 2+0 errors on https://pidgin.im/contact/

The colors are directly-scaled, viable suggestions, but it would be possible to make the green more green by exchanging red/blue for green while maintaining the same level of contrast. As an example #0c8a0c might be a bit more vibrant green. Please let me know if you would like me to suggest other slight color variations.

Bugs closed: NEST-45

Reviewed at https://reviews.imfreedom.org/r/777/
# Pidgin Nest
The place we like to call home.
This repository contains the source for the https://pidgin.im/ site.
## Dependencies
This project uses [hugo](https://gohugo.io/), get it
[here](https://gohugo.io/getting-started/installing/)
## Developing Docs
To start development server run:
`hugo server -s hugo -D --disableFastRender -v --verboseLog --noHTTPCache --i18n-warnings`
- `--disableFastRender` Disabling fast render is needed because hugo starts to
ignore new content in the data dir
- `-v --verboseLog` Better logging and debugging experience
- `--noHTTPCache` To prevent caching issues
If you want to have your development server accessible from other computers or
devices on your network, you'll want to add some additional arguments to the
hugo command line:
`hugo server -s hugo -D --disableFastRender -v --verboseLog --noHTTPCache --i18n-warnings --bind=192.168.2.100 --baseURL=http://192.168.2.100:1313`
The additional arguments assume that your workstation's local IP address is
`192.168.2.100`.
- `--bind=192.168.2.100` instructs hugo to bind to the specified IP address.
- `--baseURL=http://192.168.2.100:1313` sets the base URL to allow connections
from other devices to work with proper URL's.
## Docker
1. `docker build -t pidgin/nest:latest .`
2. `docker run -it --rm -p 3000:3000 pidgin/nest:latest`
## Formatting
These are some regexes to quickly format templating
| regex | replace |
| -------------------- | -------- |
| `\{\{(\w|\.|\$|\()` | `{{ $1` |
| `\{\{-(\w|\.|$)` | `{{- $1` |
| `("|\w|\.|\))(-)?}}` | `$1 }}` |
## Hugo config
To disable **Copy Code to Clipboard** the `disableInlineCopyToClipBoard` switch
can be used either in **config** `[params]` **or** in the front matter of the
individual page.
## Tools
- **Visual Regression**
1. [Run dev server](#Developing-Docs)
1. To run the visual diff tool call `node tools/visual-diff.js` or
`npm run regression`
## Alert Notification
![](docs/images/notifications.png)
Notifications are configured in `hugo/config.toml`:
```toml
[params]
notificationMessage = "Great News Everyone!"
notificationCode = "nest-launch"
```
- `notificationMessage` is the message and is fully HTML
- `notificationCode` is used as the key to remember if the notification has been cleared
If either of these are unset, the template will not render.
The notification template is rendered `display: none` in the
`hugo/layouts/partials/custom-footer.html`, and then hoisted to the top of the
page if the cookie is not equal to the code.