install vuepress

.dockerignore

@@ -1 +1,5 @@
 node_modules/
+build/
+coverage/
+.vuepress/.temp/
+.vuepress/.cache/

.gitignore

@@ -2,3 +2,5 @@ node_modules/
 build/
 coverage/
 !.storybook/
+.vuepress/.temp/
+.vuepress/.cache/

.vuepress/config.ts

@@ -0,0 +1,7 @@
+import { defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+  title: 'IT4C Frontend Boilerplate Documentation',
+  description: 'IT4C Frontend Boilerplate Documentation',
+  dest: 'build/docs'
+})

Dockerfile

@@ -65,6 +65,19 @@ FROM base as storybook
 #  node_modules are on another volume and need updating)
 CMD /bin/sh -c "npm install && npm run storybook"
 
+##################################################################################
+# DOCUMENTATION ##################################################################
+##################################################################################
+FROM base as documentation
+
+# We don't need to copy or build anything since we gonna bind to the
+# local filesystem which will need a rebuild anyway
+
+# Run command
+# (for development we need to execute npm install since the
+#  node_modules are on another volume and need updating)
+CMD /bin/sh -c "npm install && npm run docs:dev"
+
 ##################################################################################
 # BUILD (Does contain all files and is therefore bloated) ########################
 ##################################################################################

README.md

@@ -10,6 +10,7 @@
 [![eslint][badge-eslint-img]][badge-eslint-href]
 [![vitest][badge-vitest-img]][badge-vitest-href]
 [![storybook][badge-storybook-img]][badge-storybook-href]
+[![vuepress][badge-vuepress-img]][badge-vuepress-href]
 
 The IT4C Boilerplate for frontends
 
@@ -21,7 +22,7 @@ The project uses `vite` as builder, `vike` to do the SSR. The design framework i
 
 Testing is done with `eslint` and `vitest`.
 
-This projects utilizes `storybook` to develop frontend components.
+This projects utilizes `storybook` to develop frontend components and `vuepress` for static documentation generation.
 
 ## Commands
 
@@ -43,6 +44,9 @@ The following commands are available:
 | **Storybook**                |                                                 |
 | `npm run storybook`          | Run Storybook                                   |
 | `npm run storybook:build`    | Build static storybook                          |
+| **Documentation**            |                                                 |
+| `npm run docs:dev`           | Run Documentation in development mode           |
+| `npm run docs:build`         | Build static documentation                      |
 
 ### Docker
 
@@ -60,10 +64,11 @@ docker compose -f docker-compose.yml up
 
 The following endpoints are provided given the right command is executed:
 
-| Endpoint                                       | Description      |
+| Endpoint                                       | Description   |
-|------------------------------------------------|------------------|
+|------------------------------------------------|---------------|
-| [http://localhost:3000](http://localhost:3000) | The webfrontend  |
+| [http://localhost:3000](http://localhost:3000) | Web           |
-| [http://localhost:6006](http://localhost:6006) | Storybook        |
+| [http://localhost:6006](http://localhost:6006) | Storybook     |
+| [http://localhost:8080](http://localhost:8080) | Documentation |
 
 
 ## TODO
@@ -78,9 +83,9 @@ The following endpoints are provided given the right command is executed:
 - [x] vitest
 - [x] vue-i18n
 - [x] docker
+- [x] vuepress
 - [ ] figma
 - [ ] chromatic
-- [ ] documentation?
 - [ ] github actions
 
 ## Known Problems
@@ -122,5 +127,8 @@ Currently none
 [badge-vitest-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.vitest&label=vitest&color=yellow
 [badge-vitest-href]: https://vitest.dev/
 
-[badge-storybook-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.storybook&label=storybook&color=yellow
+[badge-storybook-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.storybook&label=storybook&color=orange
 [badge-storybook-href]: https://storybook.js.org/
+
+[badge-vuepress-img]: https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&query=devDependencies.vuepress&label=vuepress&color=orange
+[badge-vuepress-href]: https://vuepress.vuejs.org/

docker-compose.override.yml

@@ -40,6 +40,27 @@ services:
       # bind the local folder to the docker to allow live reload
       - ./:/app
 
+  ########################################################
+  # DOCUMENTATIOn ########################################
+  ########################################################
+  documentation:
+    # name the image so that it cannot be found in a DockerHub repository, otherwise it will not be built locally from the 'dockerfile' but pulled from there
+    image: it4c/frontend:local-documentation
+    build:
+      target: documentation
+    environment:
+      - NODE_ENV="development"
+      # - DEBUG=true
+    ports:
+      - 8080:8080
+    volumes:
+      # This makes sure the docker container has its own node modules.
+      # Therefore it is possible to have a different node version on the host machine
+      - documentation_node_modules:/app/node_modules
+      # bind the local folder to the docker to allow live reload
+      - ./:/app
+
 volumes:
   frontend_node_modules:
   storybook_node_modules:
+  documentation_node_modules:

package.json

@@ -39,7 +39,9 @@
     "test:lint": "eslint --ext .vue,.ts,.tsx,.js,.jsx --max-warnings 0 --ignore-path .gitignore .",
     "test:unit": "vitest",
     "test:unit:coverage": "npm run test:unit -- run --coverage",
-    "test": "npm run test:lint && npm run test:unit:coverage"
+    "test": "npm run test:lint && npm run test:unit:coverage",
+    "docs:dev": "vuepress dev .",
+    "docs:build": "vuepress build ."
   },
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^1.5.0",
@@ -78,6 +80,7 @@
     "@typescript-eslint/parser": "^6.11.0",
     "@vitest/coverage-v8": "^0.34.6",
     "@vue/test-utils": "^2.4.2",
+    "@vuepress/bundler-vite": "^2.0.0-rc.0",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
@@ -95,6 +98,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^7.5.3",
-    "vitest": "^0.34.6"
+    "vitest": "^0.34.6",
+    "vuepress": "^2.0.0-rc.0"
   }
 }