Add usage to readme (#408)

Author: uittenbroekrobbert

README.md

@@ -10,6 +10,24 @@
 
 Voor vragen of opmerkingen over de beslishulp mail je naar: [ai-verordening@minbzk.nl](mailto::ai-verordening@minbzk.nl).
 
+# Gebruik beslishulp in je eigen website
+
+De beslishulp met alle styling is te downloaden van de [release pagina](https://github.com/MinBZK/ai-verordening-beslishulp/releases).
+
+Om de beslishulp op te nemen in een pagina, is minimaal de volgende code nodig. Let op dat je ook de
+class 'rvo-theme' meeneemt, anders werkt de CSS niet.
+
+```html
+<div id="app" class="rvo-theme"></div>
+<script src="index.js"></script>
+```
+
+Daarnaast bestaat de mogelijkheid een knop aan de conclusiepagina toe te voegen. Deze kan van een eigen
+tekst worden voorzien en 'onclick' stuurt dit een javascript event 'beslishulp-done'. Zie ook het [voorbeeld](voorbeeld.html) hoe je dit kunt gebruiken.
+
+Als de beslishulp in een eigen website wordt gebruikt, is de kans groot dat de CSS gaat mengen en dit
+ongewenste effecten heeft. Overweeg een iframe te gebruiken om dit te voorkomen, zie ook het [iframe voorbeeld](iframe_voorbeeld.html). Merk op dat het javascript event hier een 'message' is i.v.m. cross-origin communication.
+
 # AI-Verordening-Beslishulp
 
 [![pre-commit.ci status](https://results.pre-commit.ci/badge/github/MinBZK/ai-verordening-beslishulp/main.svg?badge_token=d3dKEK97RwC1II15_W-nng)](https://results.pre-commit.ci/latest/github/MinBZK/ai-verordening-beslishulp/main?badge_token=d3dKEK97RwC1II15_W-nng)

frontend/package-lock.json

@@ -19,7 +19,9 @@
     "@nl-rvo/assets": "1.0.0-alpha.360",
     "@nl-rvo/component-library-css": "1.3.0",
     "@nl-rvo/design-tokens": "1.2.1",
+    "@rollup/pluginutils": "^5.1.4",
     "@tailwindcss/postcss": "^4.1.3",
+    "@tailwindcss/vite": "^4.1.3",
     "@types/jexl": "^2.3.4",
     "fp-ts": "^2.16.9",
     "io-ts": "^2.2.22",
@@ -42,7 +44,7 @@
     "eslint": "^9.24.0",
     "eslint-plugin-vue": "^9.32.0",
     "npm-run-all2": "^7.0.2",
-    "postcss": "^8.5.1",
+    "postcss": "^8.5.3",
     "prettier": "^3.4.2",
     "tailwindcss": "^4.1.3",
     "typescript": "~5.6.3",

frontend/package.json

@@ -1,5 +1,6 @@
-export default {
+module.exports = {
   plugins: {
-    "@tailwindcss/postcss": {},
-  }
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 }

frontend/postcss.config.js

@@ -1 +1,59 @@
-@import './base.css';
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
+
+@layer theme, base, components, utilities;
+
+.rvo-theme {
+  background-color: var(--utrecht-document-background-color);
+  color: var(--utrecht-document-color);
+  font-family: var(--utrecht-document-font-family);
+  font-size: var(--utrecht-document-font-size);
+  font-weight: var(--utrecht-document-font-weight);
+  line-height: var(--utrecht-document-line-height);
+}
+
+.progress-tracker-font {
+  color: var(--rvo-color-hemelblauw);
+  font-weight: bold;
+}
+
+#progress-question-mobile {
+  @media only screen and (width <= 800px) {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.aiv-definition {
+  position: relative;
+  display: inline-block;
+  border-bottom: 2px dotted black;
+}
+
+.aiv-definition .aiv-definition-text {
+  visibility: hidden;
+  width: 300px;
+  background-color: var(--rvo-color-wit);
+  color: var(--rvo-color-zwart);
+  filter: drop-shadow(0 4px 4px rgba(115, 142, 171, 0.5));
+  text-align: left;
+  border-radius: var(--rvo-border-radius-xl);
+  border-color: var(--rvo-color-grijs-200);
+  border: 1px;
+  padding: var(--rvo-alert-padding-sm-padding-block-end);
+  position: absolute;
+  z-index: 1;
+  /* hack for Safari, https://stackoverflow.com/questions/38762661/css-drop-shadow-not-working-properly-in-safari/75027316#75027316 **/
+  backdrop-filter: blur(0);
+}
+
+.aiv-definition:hover .aiv-definition-text {
+  visibility: visible;
+}
+
+/* reset some styles without using tailwind pre-flight */
+ol, ul, menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}

frontend/src/assets/base.css

@@ -1,9 +1,11 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-
-  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+module.exports = {
+  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  darkMode: false,
   theme: {
     extend: {},
   },
+  variants: {
+    extend: {},
+  },
   plugins: [],
 }