anomaly / doko

A plugin that provides a simple overlay on top of your web app to highlight the environment

      ___           ___           ___           ___           ___           ___       ___     
     /\  \         /\__\         /\  \         /\__\         /\  \         /\__\     |\__\    
    /::\  \       /::|  |       /::\  \       /::|  |       /::\  \       /:/  /     |:|  |   
   /:/\:\  \     /:|:|  |      /:/\:\  \     /:|:|  |      /:/\:\  \     /:/  /      |:|  |   
  /::\~\:\  \   /:/|:|  |__   /:/  \:\  \   /:/|:|__|__   /::\~\:\  \   /:/  /       |:|__|__ 
 /:/\:\ \:\__\ /:/ |:| /\__\ /:/__/ \:\__\ /:/ |::::\__\ /:/\:\ \:\__\ /:/__/        /::::\__\
 \/__\:\/:/  / \/__|:|/:/  / \:\  \ /:/  / \/__/~~/:/  / \/__\:\/:/  / \:\  \       /:/~~/~   
      \::/  /      |:/:/  /   \:\  /:/  /        /:/  /       \::/  /   \:\  \     /:/  /     
      /:/  /       |::/  /     \:\/:/  /        /:/  /        /:/  /     \:\  \    \/__/      
     /:/  /        /:/  /       \::/  /        /:/  /        /:/  /       \:\__\              
     \/__/         \/__/         \/__/         \/__/         \/__/         \/__/              

doko's Issues

Refactor displayed URL

The displayed URL can be made better by dropping the HTTPS/HTTP prefix and displaying a secure or insecure icon.

Tool to add meta tags based on build environment

Create a react hook/component to read meta info from env and add meta tags to head.

Initial state for the widget

A user should be able to set the initial state they want the Doko plugin to appear in.

This should be saved against the user's settings and respected when the widget appears on each instance i.e navigation to a site per tab.

Initial dock points for the widget

The Doko widget should have nine dock points. These are represented by a 3 x 3 grid.

Each instance of the widget will start at the chosen anchor point, and allow the user to move the widget around.

Redesign the pop out configuration interface

Formalise design for the interface that pops out of the browser toolbar to configure Doko:

• Placement anchor
• Highlight keyboard shortcut
• Dark mode?

Design browser toolbar icon

Design an alternate monotone icon for the browser toolbar

Rename doko:postissue to doko:report

• Update readme
• Update RFC
• Update code

Adjust spacing between the open issue badge and the URL

The design reference does not have as big a margin between the open an issue title and the link

Add support for Gatsby JS

Possibly more relevant for https://github.com/anomaly/use-doko

The general request is to add support for uses in Gatsby JS sites, via Helmet

chrome.storage.onChanged currently broken in safari

https://developer.apple.com/forums/thread/670007

Looks like there is an actual issue with safari not firing the event.
We will have to wait for a browser fix before implementing this the 'correct' way.

In the mean time, I will look at using the sendMessage, onMessage events instead to manually inform the contentScript of the change.

Add drop shadow to widgets as per the design reference

The design reference has a drop shadow to the widget in all states to give it a floating feeling. This is missing from the implementation.

Add doko:version attribute to meta tags

A version attribute should be added to the meta tags, so the plugin know how to behave. This will be important for future development of the plugin and the protocol.

The plugin will use the version metatag to adapt it's behaviour if required.