Merge pull request #551 from matematikk-mooc/stage

Stage

.github/workflows/build-master-push-azure.yml

@@ -29,7 +29,7 @@ jobs:
         run: yarn install
 
       - name: Run build script
-        run: yarn buildProduction
+        run: yarn production
 
       - name: Login to Azure
         uses: azure/login@v2

.github/workflows/build-dev-push-azure.yml → .github/workflows/build-stage-push-azure.yml

@@ -1,16 +1,16 @@
-name: CICD Frontend Dev
+name: CICD Frontend Stage
 run-name: ${{ github.actor }} Committed code for azure blob storage
 
 on:
   push:
     branches:
-      - dev
+      - stage
   workflow_dispatch:
 
 env:
   ACCOUNT_NAME: udirdit
   SOURCE: dist
-  DESTINATION: frontend-dev
+  DESTINATION: frontend-stage
   AZURE_STORAGE_KEY: ${{ secrets.AZURE_STORAGE_KEY }}
 
 jobs:
@@ -29,7 +29,7 @@ jobs:
         run: yarn install
 
       - name: Run build script
-        run: yarn buildDev
+        run: yarn stage
 
       - name: Login to Azure
         uses: azure/login@v2

.nvmrc

@@ -1 +1 @@
-v20.12.2
+v20.17.0

README.md

@@ -1,148 +1,98 @@
-# Frontend -
+![](https://imgur.com/XWVOBSH.png "")
 
-Custom JS and CSS frontend for inclusion in [Canvas](http://www.instructure.com/).
+# Frontend - Kompetanseportalen (KPAS)
 
-# Description
+This platform is operated by The Norwegian Directorate of Education's Department for Digital Services, which is responsible for managing a number of national digital solutions that support education and skills development.
 
-The custom JS and CSS frontend is built on top of Canvas using the mechanism in Canvas for including custom .js and .css files.
+KPAS provides competency packages across various themes to enhance skills and practices in kindergartens, schools, the Educational Psychological Service (PPT), training companies, and examination boards. The platform is designed to support collaborative and long-term professional development with embedded process and leadership support.
 
-The frontend changes the Canvas graphical design and user interface by using [SCSS](https://sass-lang.com/) and custom HTML injected using JavaScript and [Vue](https://vuejs.org/) components.
+The custom JS and CSS frontend is built on top of Canvas using the mechanism in Canvas for including custom .js and .css files. This frontend changes the Canvas graphical design and user interface by utilizing SCSS and custom HTML injected through JavaScript and Vue components. The custom JS and CSS frontend is compiled and concatenated into a single CSS and JavaScript file using Node and Webpack.
 
-The custom JS and CSS frontend is compiled and concatenated into a single CSS and JavaScript file using Node and [Webpack](https://webpack.js.org/)
+**Services**
 
-# Getting started
+| Service | Environment | URL |
+|---------|-------------|-----|
+| Frontend | Production | https://bibsys.instructure.com/search/all_courses/ |
+| Frontend | Stage | https://bibsys.test.instructure.com/search/all_courses/ |
 
-If you want to to build the frontend on your local machine you need to follow the steps below. Note that some of the commands might require sudo on certain systems.
+**Related Codebases**
 
-## Install Node
+| Name | Description |
+|------|-------------|
+| [KPAS API](https://github.com/matematikk-mooc/kpas-api/) | Extends Canvas LMS through LTI tools and REST endpoints |
+| [Statistics API](https://github.com/matematikk-mooc/statistics-api/) | Collects and serves statistics data for KPAS |
 
-To build CSS and JavaScript files you need to install [Node JS](http://nodejs.org) or update to the latest version if you are already have it installed.
+**Quick links**
 
-## Clone or download frontend project to local machine
+- [Dependencies](#dependencies)
+- [Configuration](#configuration)
+- [Development](#development)
+- [Deployment](#deployment)
+- [Maintenance](#maintenance)
 
-Clone the frontend from https://github.com/matematikk-mooc/frontend or download using your browser:
+## Dependencies
 
-```
-git clone https://github.com/matematikk-mooc/frontend.git
-```
+- [Git](https://git-scm.com/): A free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
+- [Visual Studio Code](https://code.visualstudio.com/): A lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux.
+- [NVM](https://github.com/nvm-sh/nvm/): A version manager for Node.js that allows you to manage multiple active Node.js versions, simplifying the development and testing process across different versions.
 
-## Install and build dependencies (Node packages)
+## Configuration
 
-Switch to the directory where the frontend is located and install the dependencies using [NPM](https://www.npmjs.com/).
+### Initialize codebase
 
+1. Install Node.js: `nvm install`
+1. Enable corepack for Node.js: `corepack enable`
+1. Install NPM packages: `yarn install`
 
-```
-npm install
-```
+### Upload localhost theme to Canvas LMS
 
+1. Build theme: `yarn build`
+1. Create a new theme here: https://bibsys.test.instructure.com/accounts/1/brand_configs/
+1. Click on create from default template and under the upload tab, select the build files from the first step that are located in the `dist` folder:
+    - CSS-fil: `theme-localhost.css`
+    - JavaScript-Fil: `theme-localhost.js`
 
-## Start a web server on your local machine
+## Development
 
-If you want to serve the CSS and JS files on your local machine for development, you can do this using Webpack DevServer:
+1. Use Node.js: `nvm install`
+1. Install NPM packages: `yarn watch`
+1. Vist https://bibsys.test.instructure.com/search/all_courses/
 
-```
-npm run buildDevelopment
-npm run serveDevelopment
-```
+## Deployment (WIP)
 
-All changes in SCSS, Vue and Javascript will automatically be compiled and are available at [http://localhost:9000](http://localhost:9000/)
-
-
-## Build JS and CSS files for dev and production environment
-Compile JS and CSS for the dev environment using
+Compile JS and CSS for the stage environment using
 
 ```
-npm run buidDev
+yarn run stage
 ```
 
 
 Compile JS and CSS for the production environment using
 
 ```
-npm run buildProduction
+yarn run production
 ```
 
 
 * See scripts section in package.json
 
 The resulting JS and CSS file can be found in the **dist** directory. These commands will get the timestamp of the latest commit to the given branch, and append to the filenames.
-To test code locally allways use buildDevelopment and serveDevelopment, as buildDev and buildProduction will use the file already uploaded to Azure, and will not pick up local changes.
-
-# Project structure
-
-## Directories
-
-| Directory     | Description                               |
-| ------------- | ----------------------------------------- |
-| src           | Source code                               |
-| src/js        | JavaScript files used to inject custom Vue components and hide unused Canvas elements.
-| src/vue       | Custom Vue components and scss            |
-| dist/         | Build output directory                    |
+To test code locally allways use "build" and "watch", as "stage" and "production" will use the file already uploaded to Azure, and will not pick up local changes.
 
-## src/vue
-
-| Directory     | Description                               |
-| ------------- | ----------------------------------------- |
-| /assets       | Font files and svgs                       |
-| /components   | Custom Vue componets                      |
-| /pages        | Vue views used on urls where replacing the whole page |
-| /design       | SCSS files for own components and override styling of Canvas elements                   |
-| /utils        | util js files used with multilanguage     |
-
-## src/js
-
-| File/Directory              | Description                                                              |
-| ----------------- | ------------------------------------------------------------------------ |
-| main.js           | Calls different JS functions to create custom HTML based on URL (routes) |
-| api/        | Call to Canvas REST API and KPAS API                   |
-| modules/          | JavaScripts called from main.js                  |
-| modules/routes.js | Library used to call different JS functions based on URLs using RegExps  |
-
-## Webpack config files
-
-| File                          | Description                                 |
-| ------------------------------|---------------------------------------------|
-| webpack.development.config.js | Config file for development (running with localhost)                 |
-| webpack.dev.config.js     | Config file for dev environment         |
-| webpack.production.config.js  | Config file for production environment      |
-
-
-
-# Deployment
 
 Copy all files from the dist directory to your web server.
 Note that addons generate different files that may be destinated to different directories in your production server.
 
-## Workflow
-
-**.github** containts Github Actions pipelines for building dev and production and pushing **dist** directory to Azure.
+### GitHub Actions
 
-# Environment specific variables
+### Rollback
 
-## JS variables
-Some settings and urls differs between environment, these are replaced at build time using [Webpack DefinePlugin](https://webpack.js.org/plugins/define-plugin/) and can be updated in the following section in webpack.(production|dev|development).config.js
+## Maintenance
 
-```
-plugins: [
-  ...
-  new webpack.DefinePlugin({
-    'DESIGNCSS' : JSON.stringify('subaccount-localhost.css'),
-    'DESIGNJS' : JSON.stringify('kompetanseportalen-localhost.js'),
-    'SERVER': JSON.stringify('http://localhost:9000/'),
-    'KPASAPIURL': JSON.stringify('https://kpas.staging.kompetanse.udir.no/api'),
-    'ACCOUNTID' : [99, 100, 102, 103, 137, 138, 139, 145],
-    'KPAS_MERGE_LTI_ID' : 863,
-    'KPAS_IFRAME_VERSION' : JSON.stringify('localhost'),
-  })
-]
-```
+Maintaining a frontend project involves regular updates to ensure the application remains secure, performant, and up to date with the latest web standards. Here's how updates are carried out for JavaScript libraries, Vue.js framework components, and other dependencies:
 
-## Storybook
+### NPM Packages
 
-Storybook for the custom Vue components. To build the storybook run:
-  ```
-    npm run storybook
-  ```
-Visit storbook:
+1. **Update Packages**: Regularly run `yarn update` to fetch the latest versions of dependencies. Use `yarn outdated` to check for available updates.
 
-http://matematikk-mooc.github.io/frontend/
+1. **Security Audits**: Perform security audits using `yarn audit` to identify and resolve potential vulnerabilities.