New readme.md, slack notifications, update components (#88)

* Modified build step to compress css correctly with node-sass * Refactored project with decoupling (#68) * Refactored project with decoupling * Renamed frame to html * Added CFonts module to index.js * Replace placehold.it images * Update package.lock * Adjust spacing * Prefix built CSS with autoprefixer (#61) * Installed autoprefixer * Added build step to prefix CSS * Added browserlist for autoprefixer to build ie8, added extra build key * Added autoprefix step to Sass.renderSync * Added unit test for autoprefixer * Removed unused sinon import * Assigned var to prefixed css * Switched autoprefixer to work correctly async Fixed build step Updated tests to be async * Finished functionality for prefixer Ran tests Merged latest develop * Corrected build paths Added async functiaonlity to GenerateHTML * Corrected circleci config * Added src folder * Forgot to update CF manifests * Updated CF manifest start cmd * Ughhh * Update title of website * Fix image text * Added 404 page and endpoint to capture requests * Added AU-styles * Refactored readFileSync to async ways * Added two more tests for multiple valid and invalid colours * Inital attempt at implementing slack notifications * Updated furnance message name * Added slack notification before sending HTML to user * refactored index.js * Forgot to export correctly * Forgot to export correct function * Simiplified previous slack code * Improve slack message (#79) * Simiplified previous slack code * Extended Slack notification message to include path and colors Added quick unit test for toString method * Updated envVar key length check * Tweaked slack message formatting * Italisied Karma... * Removed console.log * Added function and test for parsing request path * Wording change * Specified service for prod / dev deployments * Removed buildpacks for buildpack * Update sass and accordion button * Feature/slack formatting (#85) * Tweaked slack message formatting * Italisied Karma... * Removed console.log * Added function and test for parsing request path * Wording change * Changed no colors :( text * Removed dupe function * Updated text * Added if statement before sending slack * Add actual documentation to the readme.md (#87) * Change title of site (#76) * Modified build step to compress css correctly with node-sass * Refactored project with decoupling (#68) * Refactored project with decoupling * Renamed frame to html * Added CFonts module to index.js * Replace placehold.it images * Update package.lock * Adjust spacing * Prefix built CSS with autoprefixer (#61) * Installed autoprefixer * Added build step to prefix CSS * Added browserlist for autoprefixer to build ie8, added extra build key * Added autoprefix step to Sass.renderSync * Added unit test for autoprefixer * Removed unused sinon import * Assigned var to prefixed css * Switched autoprefixer to work correctly async Fixed build step Updated tests to be async * Finished functionality for prefixer Ran tests Merged latest develop * Corrected build paths Added async functiaonlity to GenerateHTML * Corrected circleci config * Added src folder * Forgot to update CF manifests * Updated CF manifest start cmd * Ughhh * Update title of website * Fix image text * Added 404 page and endpoint to capture requests * Added AU-styles * Refactored readFileSync to async ways * Added two more tests for multiple valid and invalid colours * Add actual documentation to the readme.md Fixes #48 * Update README.md * Update README.md * Update README.md Co-Authored-By: alex-page <[email protected]> * Apply suggestions from code review * Update README.md * Removed floating bracket * Bumped project ver to inital release
govau · Dec 17, 2018 · 2f5daa9 · 2f5daa9
1 parent 9e4fc29
commit 2f5daa9
Show file tree

Hide file tree

Showing 11 changed files with 581 additions and 95 deletions.
diff --git a/.deploy/manifest-dev.yml b/.deploy/manifest-dev.yml
@@ -7,4 +7,6 @@ applications:
   command: node ./node_modules/.bin/pancake && npm run build && node src/index.js
   env: 
     NODE_ENV: development
-    NODE_MODULES_CACHE: false
+    NODE_MODULES_CACHE: false
+  services:
+    - ups-chameleon
diff --git a/.deploy/manifest-prod.yml b/.deploy/manifest-prod.yml
@@ -8,4 +8,6 @@ applications:
   env: 
     NODE_ENV: production
   routes:
-    - route: designsystem.gov.au/chameleon
+    - route: designsystem.gov.au/chameleon
+  services:
+    - ups-chameleon
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,2 @@
-# 0.2.1
--   Sanitised user input
-
-# 0.2.0
+# 1.0.0
 -   🎉 Initial release
diff --git a/README.md b/README.md
@@ -2,34 +2,68 @@
 
 > Interactive colour template previews for the Design System.
 
+Chameleon allows users to change and share different colour palettes using the Australian Government Design System. It is a server that takes query parameters altering the appearance of the template. 
+
+You can access it through a user interface at [https://designsystem.gov.au/templates/home/customise](https://designsystem.gov.au/templates/home/customise) if you want to use it locally you can follow the instructions below. 
+
 
 ## Install
 
+
+Clone chameleon into a local directory:
+```
+git clone [email protected]:govau/chameleon.git
+```
+
+Make sure you are in your cloned directory and install the dependencies:
+
 ```node
 npm install
 ```
 
-Then run `npm start` or `npm watch` to start the server.
+Then run `npm run start` or `npm run watch`.
 
 
 ## Getting started
 
-Some information.
+Once the server is running you should be able to connect to it with [http://localhost:3000/chameleon](http://localhost:3000/chameleon).
+
+Chameleon looks like a full page template using the Australian Government Design System. It has multiple templates in the `/templates` directory. You can access the templates by navigating to the url [http://localhost:3000/chameleon/content](http://localhost:3000/chameleon/content).
+
+To change the colours you can add a query parameter. [http://localhost:3000/chameleon/content?action=red&background=#eee](http://localhost:3000/chameleon/content?action=red&background=#eee).
+
+Using query parameters you can modify the templates and share them. The supported query parameters are:
+ - `text`, the default text colour
+ - `action`, the interactive colour used on buttons and links
+ - `focus`, the focus colour when interactive elements receive focus
+ - `background`, the background colour
+ - `textDark`, dark variation of the text colour
+ - `actionDark`, dark variation of the action colour
+ - `focusDark`, dark variation of the focus colour
+ - `backgroundDark`, dark variation of the background colour
+
+
+## How it works
+
+The server [expressjs](https://expressjs.com/ ) reads the data from the HTML files based on the URL. If there are valid query parameters it generates a new stylesheet and replaces the `<link rel="stylesheet" href="/chameleon/assets/css/main.css">` with the new styles. If there is an invalid colour entered it will log errors in the page template returned to the user.
+
+We then serve the API to our users in an iframe, allowing users to modify the user interface with a form on the frontend. As we use query parameters the custom templates can be shared with peers.
 
 
 ## Contributing
 
-The express server replaces the CSS file when arugments are passed in the URL. If there is an error it replaces the `<!-- ERROR -->` comment.
+Wuhuu! thanks for considering contributing! We are always looking to make chameleon better, please have a look at our [issues](issues) and use the above documentation to make changes and create a pull request.
 
 
 ## Release history
 
-- v0.2.0 - 🎉 Initial release
+- v1.0.0 - 🎉 Initial release
 
 
 # Contributors:
 <div style="display:inline;">
-  <img width="64" height="64" href="https://github.com/adamzerella" src="https://avatars0.githubusercontent.com/u/1501560?s=460&v=4" alt="Adam A. Zerella"/>
-  <img width="64" height="64" href="https://github.com/alex-page" src="https://avatars0.githubusercontent.com/u/19199063?s=460&v=4" alt="Alex Page"/>
+  <a href="https://github.com/adamzerella"><img width="64" height="64" src="https://avatars0.githubusercontent.com/u/1501560?s=460&v=4" alt="Adam A. Zerella"/></a>
+  <a href="https://github.com/alex-page"><img width="64" height="64" src="https://avatars0.githubusercontent.com/u/19199063?s=460&v=4" alt="Alex Page"/></a>
+  <a href="https://github.com/sukhrajghuman"><img width="64" height="64" src="https://avatars1.githubusercontent.com/u/20184809?s=460&v=4" alt="Sukhraj Ghuman"/></a>
 </div>
 
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -12,13 +12,11 @@ body {
 
 
 // Increase the spacing for au-body elements inside main
-main {
-	.au-body {
-		@include AU-space( padding, 2unit 0 );
+main > .au-body {
+	@include AU-space( padding, 2unit 0 );
 
-		@include AU-media( sm ) {
-			@include AU-space( padding, 4unit 0 );
-		}
+	@include AU-media( sm ) {
+		@include AU-space( padding, 4unit 0 );
 	}
 }