Use Bootstrap npm starter

.browserslistrc

@@ -0,0 +1,13 @@
+# https://github.com/browserslist/browserslist#readme
+
+>= 1%
+last 1 major version
+not dead
+Chrome >= 45
+Firefox >= 38
+Edge >= 12
+Explorer >= 10
+iOS >= 9
+Safari >= 9
+Android >= 4.4
+Opera >= 30

.eslintrc.json

@@ -1,29 +1,37 @@
-{
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "airbnb-base",
-        "prettier"
-    ],
-    "parserOptions": {
-        "ecmaVersion": 12,
-        "sourceType": "module"
-    },
-    "plugins": ["only-warn"],
-    "ignorePatterns": ["/node_modules", "/external"],
-    "rules": {
-        "no-console": ["error", { "allow": ["warn", "error"] }],
-        "camelcase": "off",
-        "import/extensions": "off",
-        "object-shorthand": "off",
-        "no-underscore-dangle": [2, {
-            "allowAfterThis": true,
-            "allowAfterSuper": true
-        }],
-        "no-plusplus": [2, {
-            "allowForLoopAfterthoughts": true
-        }]
-    }
-}
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": ["airbnb-base", "prettier"],
+    "parserOptions": {
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": ["only-warn"],
+    "ignorePatterns": ["/node_modules", "/assets/css/dist"],
+    "rules": {
+        "no-console": [
+            "error",
+            {
+                "allow": ["warn", "error"]
+            }
+        ],
+        "camelcase": "off",
+        "import/extensions": "off",
+        "object-shorthand": "off",
+        "no-underscore-dangle": [
+            2,
+            {
+                "allowAfterThis": true,
+                "allowAfterSuper": true
+            }
+        ],
+        "no-plusplus": [
+            2,
+            {
+                "allowForLoopAfterthoughts": true
+            }
+        ]
+    }
+}

.github/ISSUE_TEMPLATE/bug-report.md

@@ -1,33 +1,39 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: "[BUG] Bug-Title"
-labels: Bug
-assignees: ''
-
----
-
-### Describe the bug
-A clear and concise description of what the bug is.
-
-### Screenshots
-If applicable, add screenshots to help explain your problem.
-
-### To Reproduce
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-### Expected behavior
-A clear and concise description of what you expected to happen.
-
-### Desktop (please complete the following information):
- - **OS:** [e.g. iOS]
- - **Browser:** [e.g. chrome, safari]
- - **JS IDE:** [e.g. VS Code, Atom] 
- - (**Version:** [e.g. 22])
-
-### Additional context
-Add any other context about the problem here.
+---
+name: Bug report
+about: Create a report to help us improve
+title: '[BUG] Bug-Title'
+labels: Bug
+assignees: ''
+---
+
+### Describe the bug
+
+A clear and concise description of what the bug is.
+
+### Screenshots
+
+If applicable, add screenshots to help explain your problem.
+
+### To Reproduce
+
+Steps to reproduce the behavior:
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+### Expected behavior
+
+A clear and concise description of what you expected to happen.
+
+### Desktop (please complete the following information):
+
+-   **OS:** [e.g. iOS]
+-   **Browser:** [e.g. chrome, safari]
+-   **JS IDE:** [e.g. VS Code, Atom]
+-   (**Version:** [e.g. 22])
+
+### Additional context
+
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/user-story.md

@@ -1,23 +1,22 @@
----
-name: User Story
-about: A normal user story as feature request.
-title: ''
-labels: ''
-assignees: ''
-
----
-
-As a ‹role›, I'd like to ‹feature short description› [ , in order to ‹value it adds›. ]
-
----
-
-### :thought_balloon:   Hints & Thoughts
-
-### :question:   Additional Questions to Answer / Consider
-
----
-
-## :white_check_mark:   Conditions of satisfaction
-
-- [ ] Should ‹testable condition that should be satisfied›
-- [ ] Should ‹testable condition that should be satisfied›
+---
+name: User Story
+about: A normal user story as feature request.
+title: ''
+labels: ''
+assignees: ''
+---
+
+As a ‹role›, I'd like to ‹feature short description› [ , in order to ‹value it adds›. ]
+
+---
+
+### :thought_balloon:   Hints & Thoughts
+
+### :question:   Additional Questions to Answer / Consider
+
+---
+
+## :white_check_mark:   Conditions of satisfaction
+
+-   [ ] Should ‹testable condition that should be satisfied›
+-   [ ] Should ‹testable condition that should be satisfied›

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,21 +1,24 @@
-!Please link the completed Issue to this Pull Request!
-
-## Changes
-**What does this PR change? What was the problem? What is the solution?**
-
-*describe problem here*
-- *enter change here*
-
-## Screenshots
-*If the frontend has been changed, please add a screenshot of before and after the changes have been made*
-
-
-## Checklist before merge
-
-**Developer's responsibilities**
-* [ ] **Assign** one or two developers
-* [ ] **Change code** if reviewer(s) has/have requested it
-* [ ] **Pull request build** has passed
-* [ ] **tested locally** (in at least chrome & firefox if frontend)
-* [ ] updated the **documentation**
-* [ ] added **tests** where necessary
+!Please link the completed Issue to this Pull Request!
+
+## Changes
+
+**What does this PR change? What was the problem? What is the solution?**
+
+_describe problem here_
+
+-   _enter change here_
+
+## Screenshots
+
+_If the frontend has been changed, please add a screenshot of before and after the changes have been made_
+
+## Checklist before merge
+
+**Developer's responsibilities**
+
+-   [ ] **Assign** one or two developers
+-   [ ] **Change code** if reviewer(s) has/have requested it
+-   [ ] **Pull request build** has passed
+-   [ ] **tested locally** (in at least chrome & firefox if frontend)
+-   [ ] updated the **documentation**
+-   [ ] added **tests** where necessary

.gitignore

@@ -1,2 +1,4 @@
 .idea/
 node_modules
+assets/css/dist/*
+!assets/css/dist/.gitkeep 

.prettierrc.json

@@ -1,11 +1,11 @@
-{
-  "tabWidth": 4,
-  "bracketSpacing": true,
-  "endOfLine": "crlf",
-  "jsxSingleQuote": true,
-  "semi": false,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "printWidth": 100,
-  "useTabs": false
-}
+{
+    "tabWidth": 4,
+    "bracketSpacing": true,
+    "endOfLine": "crlf",
+    "jsxSingleQuote": true,
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "printWidth": 100,
+    "useTabs": false
+}

.stylelintignore

@@ -0,0 +1,4 @@
+**/*.min.css
+**/dist/
+node_modules
+.idea/

.stylelintrc

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "stylelint-config-twbs-bootstrap/scss"
+  ]
+}

README.md

@@ -1,27 +1,37 @@
-# RepositoryGuide
-
-An application that helps with analyzing your team's GitHub repository
-
-## Installation
-
-1. Clone the repository: ```[email protected]:hpi-epic/repositoryguide.git``` and go into the repository folder
-2. Make sure you've installed node. If not download and install it from [here](https://nodejs.org/en/download/)
-3. Run `npm install` in the root of the repository
-4. generate a personal access token for GitHub using [these instructions](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token)
-5. Host the project on a local server, opening `index.html` directly won't work. The WebStorm IDE offers a local development server, or run one using `python3 -m http.server`. 
-6. Download the config to have an empty version of a `config.json file`. Replace ```"github_access_token": ""``` with ```"github_access_token": "<your token>"```
-7. Load the edited config into the application.
-8. The preparations are now done. Enjoy your metrics. :-)
-
-## Codestyle
-To follow the codestyle used in this repository you need Prettier and Eslint. After having setup the project you need to setup these tools. For Webstorm follow the following tutorials:
-- ESLint
-    - Follow the following steps from [this tutorial](https://www.jetbrains.com/help/webstorm/eslint.html)
-        - [Before you start](https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_linters_eslint_before_you_start) 1&2
-        - [Configure ESLint automatically](https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_automatic_configuration)
-        - [Recommended to run ESLint on save](https://www.jetbrains.com/help/webstorm/eslint.html#ws_eslint_configure_run_eslint_on_save)
-- Prettier
-    - Follow the following steps from [this tutorial](https://www.jetbrains.com/help/webstorm/prettier.html)
-        - [Before you start](https://www.jetbrains.com/help/webstorm/prettier.html#prettier_before_you_start) 1,2 and 3 
-        - [Configure PRettier 2,3, & 4](https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_install)
-        - [Recommended to run Prettier on save](https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_run_automatically_in_current_project)
+# RepositoryGuide
+
+An application that helps with analyzing your team's GitHub repository
+
+## Installation
+
+1. Make sure you've installed node. If not download and install it from [here](https://nodejs.org/en/download/)
+2. Clone the repository: `[email protected]:hpi-epic/repositoryguide.git` and go into the repository folder
+3. Run `npm install` in the root of the repository
+4. Run `npm start` to compile the scss and start a server
+5. Open the home page in a browser (default address is `localhost:3000/views/home`)
+
+## Configuration
+
+1. Generate a personal access token for GitHub
+   using [these instructions](https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token)
+2. On the settings page, download the config to have an empty version of a `config.json file`. Replace `"github_access_token": ""`
+   with `"github_access_token": "<your token>"`
+3. Load the edited config into the application.
+
+## Codestyle
+
+To define a codestyle, we used Prettier and Eslint. Use `npm run prettier-<check|autofix>` or `npm run eslint-<check|autofix>` to apply these rules.
+
+Alternatively, you can set these up for your IDE. For Webstorm follow the following tutorials:
+
+-   ESLint
+    -   Follow the following steps from [this tutorial](https://www.jetbrains.com/help/webstorm/eslint.html)
+        -   [Before you start](https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_linters_eslint_before_you_start)
+            1&2
+        -   [Configure ESLint automatically](https://www.jetbrains.com/help/webstorm/eslint.html#ws_js_eslint_automatic_configuration)
+        -   [Recommended to run ESLint on save](https://www.jetbrains.com/help/webstorm/eslint.html#ws_eslint_configure_run_eslint_on_save)
+-   Prettier
+    -   Follow the following steps from [this tutorial](https://www.jetbrains.com/help/webstorm/prettier.html)
+        -   [Before you start](https://www.jetbrains.com/help/webstorm/prettier.html#prettier_before_you_start) 1,2 and 3
+        -   [Configure Prettier 2,3, & 4](https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_install)
+        -   [Recommended to run Prettier on save](https://www.jetbrains.com/help/webstorm/prettier.html#ws_prettier_run_automatically_in_current_project)

assets/components/components.js

@@ -0,0 +1,19 @@
+async function create_header() {
+    const response = await fetch('/assets/components/navigation-header.html')
+    return response.text()
+}
+
+const placeholder_mapping = {
+    'data-header': create_header
+}
+
+async function replace_placeholders() {
+    for (const placeholder_name of Object.keys(placeholder_mapping)) {
+        const elements = [...document.querySelectorAll(`[${placeholder_name}]`)]
+        for (const element of elements) {
+            element.innerHTML = await placeholder_mapping[placeholder_name]()
+        }
+    }
+}
+
+replace_placeholders()