[SDPA-2910] Basic examples for customization (#512)

* [SDPA-2909] Add custom theme documentation. - Added Custom theming documentation. - Fix type-o in nuxt-ui. - Added a default nuxt configuration section to outline nuxt.config.js file. * [SDPA-2909] Fix relative link. * [SDPA-2909] Removed nuxt sections. * Fixed minor issues related to module config * Removed redundant config * Added basic examples for customization * Added readme for basic examples * [SDPA-2910] Added theme docs with example and test * Added tide examples * Fixed tests with minor docs updates
dpc-sdp · Sep 3, 2019 · 4c5a4ab · 4c5a4ab
1 parent 286b2a1
commit 4c5a4ab
Show file tree

Hide file tree

Showing 76 changed files with 1,725 additions and 341 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -84,7 +84,7 @@ A `demoData.js` entry will need to be manually included.
 
 ### Work in Docker
 
-We recomend you work in our Docker enviorment.
+We recommend you work in our Docker environment.
 
 1. Install Docker
    - Install [Homebrew](https://brew.sh/)

diff --git a/README.md b/README.md
@@ -69,9 +69,9 @@ It includes :
 
 Ripple is a monorepo which contains several packages published to NPM
 
-[@dpc-sdp/ripple-nuxt-tide](https://www.npmjs.com/package/@dpc-sdp/ripple-nuxt-tide) - Package for integrating a Tide backend into a Ripple site
+[@dpc-sdp/ripple-nuxt-tide](https://www.npmjs.com/package/@dpc-sdp/ripple-nuxt-tide) - Package for integrating a Tide backend into a Ripple site. Docs: [packages/ripple-nuxt-tide/README.md](https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-tide/README.md)
 
-[@dpc-sdp/ripple-nuxt-ui](https://www.npmjs.com/package/@dpc-sdp/ripple-nuxt-ui) - Adds ripple component library to a Nuxt site, can be used independently of @dpc-sdp/ripple-nuxt-tide
+[@dpc-sdp/ripple-nuxt-ui](https://www.npmjs.com/package/@dpc-sdp/ripple-nuxt-ui) - Adds ripple component library to a Nuxt site, can be used independently of @dpc-sdp/ripple-nuxt-tide. Docs: [packages/ripple-nuxt-ui/README.md](https://github.com/dpc-sdp/ripple/blob/develop/packages/ripple-nuxt-ui/README.md)
 
 Ripple Vue component library 
 [@dpc-sdp/ripple-global](https://www.npmjs.com/package/@dpc-sdp/ripple-global) - Each ripple Vue component is published individually to NPM, See ripple global for usage.
@@ -161,13 +161,3 @@ Run `yarn run start:storybook`
 ## License
 
 Distributed under the Apache 2.0 License. See `LICENSE` for more information.
-
-
-
-<!-- CONTACT -->
-<!-- TODO - Find appropriate contact for issues -->
-<!-- ## Contact
-
-Your Name - [@your_twitter](https://twitter.com/your_username) - [email protected]
-
-Project Link: [https://github.com/your_username/repo_name](https://github.com/your_username/repo_name) -->
diff --git a/examples/basic-examples/.eslintrc.js b/examples/basic-examples/.eslintrc.js
@@ -0,0 +1,33 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    allowImportExportEverywhere: true
+  },
+  env: {
+    browser: true,
+    jest: true
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential', 
+    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+    'standard',
+    "plugin:jest/recommended"
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue',
+    'jest'
+  ],
+  // add your custom rules here
+  rules: {
+    // allow async-await
+    'generator-star-spacing': 'off',
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  }
+}
diff --git a/examples/basic-examples/README.md b/examples/basic-examples/README.md
@@ -0,0 +1,33 @@
+# Basic examples for customizing Ripple site
+
+## Examples
+
+### Theming
+
+- [Custom theme setting](assets/_theme.scss)
+- [Custom css](assets/_custom.scss)
+
+### Extending
+
+- [Custom content type](tide/modules/example-content-type/)
+
+  Provide a example for adding custom content type.
+
+- [Custom error page](tide/modules/example-error-page/)
+
+  Custom 404 and 500 error page content, like links, messages.
+
+- [Custom middleware](tide/modules/example-middleware/)
+
+  Add custom business logic before page got rendered.
+
+  Add custom component into landing page.
+
+- [Override Ripple component in landing page](tide/modules/example-override-component/)
+
+  Provide a example for overriding the Ripple components in Tide landing page which
+  is dynamically loaded.
+
+- [Custom search page](tide/modules/example-search/)
+
+  Provide a example for adding a custom search page.
diff --git a/examples/basic-examples/app/views/error.html b/examples/basic-examples/app/views/error.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Server error</title>
+    <style>
+      div {
+        margin: 14% auto 1rem;
+        text-align: center;
+        padding-left: 1.25rem;
+        padding-right: 1.25rem;
+      }
+      .visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0 0 0 0);
+        border: 0;
+        pointer-events: none;
+      }
+      .error-img {
+        max-width: 16rem;
+      }
+      p.intro {
+        color:#011A3C;
+        font-family: "Vic-Bold", arial, sans-serif;
+        font-size: 20px;
+        line-height: 1.5rem;
+        margin-top: 2rem;
+        margin-bottom: 1.4rem; 
+      }
+      p {
+        font-family: "Vic-Regular", arial, sans-serif;
+        font-size: 16px;
+      }
+      .button {
+        background-color: #0052c2;
+        color: #fff;
+        text-decoration:none;
+        width: auto;
+        border-radius: 0.25rem;
+        padding: 0 3rem;
+        height: 2.875rem;
+        line-height: 2.875rem;
+        border: 1px solid transparent;
+        cursor: pointer;
+        text-align: center;
+        display: inline-block;
+        font-size: 1rem;
+        margin-top: 2.5rem;
+        font-family: "Vic-Regular", arial, sans-serif;
+      }
+      .button:focus,
+      .button:hover {
+        background-color: #0095ec;
+      }
+      @media only screen and (min-width: 576px) {
+        div {
+          padding-left: 1.75rem;
+          padding-right: 1.75rem;
+        }
+      }
+      @media only screen and (min-width: 768px) {
+        div {
+          max-width: 37.5rem;
+          width: 60%;
+        }
+        .error-img {
+          max-width: 32rem;
+        }
+        p.intro {
+          font-size: 28px;
+          line-height: 2rem;
+          margin-top: 4rem;
+        }
+        p {
+          font-size: 18px;
+        }
+      }
+      @media only screen and (min-width: 992px) {
+        div {
+          max-width: 59rem;
+        }
+        .error-img {
+          max-width: 100%;
+        }
+      }
+      @media only screen and (min-width: 1600px) {
+        margin-top: 13.75rem;
+      }
+      </style>
+  </head>
+
+  <body>
+    <div>
+      <h1 class="visually-hidden">Sorry</h1>
+      <img class="error-img" alt="oops" title="oops graphic" src="/img/sorry-banner.svg">
+      <p class="intro">We have a glitch in our system.</p>
+      <p>We are aware of the issue. We appreciate your patience while we're looking into it.</p>
+      <a class="button" href="/">Go to home</a>
+    </div>
+  </body> 
+</html>
diff --git a/examples/basic-examples/assets/_custom.scss b/examples/basic-examples/assets/_custom.scss
@@ -0,0 +1,13 @@
+// Import Ripple settings, mixin, functions.
+@import "~@dpc-sdp/ripple-global/style";
+
+// We should avoid add any styling changes for colours, spacing here.
+// The should be managed by sass variables in _theme.scss.
+// This custom scss file is designed for any style changes can not be handled by variables.
+
+// A example of attache a text to hero banner.
+.rpl-hero-banner {
+  &:after {
+    content: 'Text from custom css'
+  }
+}
diff --git a/examples/basic-examples/assets/_theme.scss b/examples/basic-examples/assets/_theme.scss
@@ -0,0 +1,21 @@
+// Vic.gov.au site theming variables
+// Overwrites values in Ripple
+@import '~@dpc-sdp/ripple-global/scss/settings/functions';
+
+// Example for theming
+// Let's use Vue.js branding color in our example.
+$rpl-colors: (
+  'primary': #4ec08d,
+  'dark_primary': #40b883,
+  'secondary': #35495e,
+  'extra_dark_neutral': #475050,
+  'dark_neutral': #f6f6f6,
+  'mid_neutral_1': #d7dbe0,
+  'mid_neutral_2': #e8ebee,
+  'light_neutral': #f6f6f9,
+  'danger': #a50034,
+  'warning': #e35205,
+  'success': #009ca6,
+  'white': #fff,
+  'black': #000
+);
diff --git a/examples/basic-examples/components/README.md b/examples/basic-examples/components/README.md
diff --git a/examples/basic-examples/cypress.json b/examples/basic-examples/cypress.json
@@ -0,0 +1,10 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "fixturesFolder": "test/e2e/fixtures",
+  "integrationFolder": "test/e2e/integration",
+  "pluginsFile": "test/e2e/plugins/index.js",
+  "screenshotsFolder": "test/e2e/screenshots",
+  "supportFile": "test/e2e/support/index.js",
+  "videosFolder": "test/e2e/videos",
+  "ignoreTestFiles": "*.js"
+}
diff --git a/examples/basic-examples/nuxt.config.js b/examples/basic-examples/nuxt.config.js
@@ -0,0 +1,63 @@
+require('dotenv').config()
+
+process.env.DEBUG = 'nuxt:*' // display nuxt.js logs
+process.env.APP_ROOT_PATH = '.' // Set the example app root path, for this example app config only.
+
+export default {
+
+  /*
+  ** Headers of the page
+  */
+  head: {
+    title: 'basic-examples',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { name: 'msapplication-TileColor', content: '#da532c' },
+      { name: 'theme-color', content: '#ffffff' },
+      { hid: 'description', name: 'description', content: 'Example site for showing how to add custom work' }
+    ]
+  },
+  modules: [
+    '@dpc-sdp/ripple-nuxt-tide'
+  ],
+  /*
+  ** Css
+  * https://nuxtjs.org/api/configuration-css/
+  */
+  css: [
+    '@/assets/_custom.scss'
+  ],
+  tide: {
+    baseUrl: process.env.CONTENT_API_SERVER,
+    auth: {
+      username: process.env.CONTENT_API_AUTH_USER,
+      password: process.env.CONTENT_API_AUTH_PASS
+    },
+    site: 4,
+    // Tide submodules, 1 for enable, 0 for disable.
+    modules: {
+      page: 1,
+      landingPage: 1,
+      media: 1,
+      webform: 1,
+      search: 1,
+      alert: 1,
+      site: 1
+    },
+    gtm: {
+      // Set Google Tag Manager ID here
+      id: process.env.GTM_ID
+    },
+    search: {
+      service: process.env.SEARCH_SERVICE,
+      index: process.env.SEARCH_INDEX,
+      url: 'https://' + process.env.SEARCH_HASH + '.' + process.env.SEARCH_URL,
+      log: process.env.SEARCH_LOG,
+      auth: {
+        username: process.env.SEARCH_AUTH_USERNAME,
+        password: process.env.SEARCH_AUTH_PASSWORD
+      }
+    }
+  }
+}
diff --git a/examples/basic-examples/package.json b/examples/basic-examples/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "basic-examples",
+  "version": "1.1.0",
+  "description": "Example site for showing how to add custom work",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env BASIC_AUTH=0 nuxt",
+    "build": "run-script-os",
+    "build:default": "if [ \"$NUXT_HOT_RELOADING\" != \"1\" ] ; then nuxt build; fi",
+    "build:win32": "IF \"%NUXT_HOT_RELOADING%\" NEQ \"1\" ( nuxt build )",
+    "cy:open": "cypress open",
+    "cy:run": "cypress run -e TAGS='not @skip or @smoke'",
+    "cy:run-smoke": "cypress run -e TAGS='@smoke' --spec 'test/e2e/integration/smoke/*'",
+    "test:dev": "cross-env TEST=1 start-server-and-test dev http://localhost:3000 cy:open",
+    "test:smoke": "cross-env TEST=1 start-server-and-test start:build http://localhost:3000 cy:run-smoke",
+    "test:e2e": "cross-env TEST=1 start-server-and-test start:build http://localhost:3000 cy:run",
+    "test:unit": "cross-env NODE_ENV=test jest",
+    "start": "run-script-os",
+    "start:default": "if [ \"$NUXT_HOT_RELOADING\" = \"1\" ] ; then nuxt; else nuxt start; fi",
+    "start:win32": "IF \"%NUXT_HOT_RELOADING%\" EQU \"1\" ( nuxt ) ELSE ( nuxt start )",
+    "start:build": "nuxt build && nuxt start"
+  },
+  "dependencies": {
+    "@dpc-sdp/ripple-nuxt-tide": "1.1.0",
+    "dotenv": "^5.0.1",
+    "nuxt": "2.6.3",
+    "run-script-os": "^1.0.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.5.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.5.0",
+    "@babel/runtime": "^7.5.1",
+    "@dpc-sdp/ripple-test-tools": "1.1.0",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "^24.8.0",
+    "babel-plugin-dynamic-import-node": "^2.3.0",
+    "babel-plugin-require-context-hook": "^1.0.0",
+    "babel-preset-vue": "^2.0.2",
+    "core-js": "^2.6.5",
+    "cross-env": "^5.2.0",
+    "cypress": "^3.1.5",
+    "cypress-axe": "^0.4.0",
+    "cypress-cucumber-preprocessor": "^1.11.0",
+    "eslint": "^4.15.0",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jest": "^21.17.0",
+    "eslint-plugin-node": "^5.2.0",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "eslint-plugin-vue": "^4.0.0",
+    "node-sass": "^4.11.0",
+    "sass-lint": "^1.12.1",
+    "sass-loader": "^6.0.7",
+    "sass-resources-loader": "^2.0.0",
+    "start-server-and-test": "^1.7.11",
+    "vue-jest": "^3.0.4"
+  },
+  "cypress-cucumber-preprocessor": {
+    "nonGlobalStepDefinitions": true
+  },
+  "browserslist": [
+    "> 1%",
+    "IE 11",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}