From df00b208cbf23e77e33dfb6c4e9c2f4ec35c926b Mon Sep 17 00:00:00 2001 From: Jens Kuerschner Date: Thu, 9 Nov 2023 18:45:15 +0100 Subject: [PATCH] upgrade + overwritte guide --- package-lock.json | 198 +++++++++++++++++++--------------- package.json | 2 +- src/de/integration/general.md | 45 +++++++- src/integration/general.md | 37 ++++++- 4 files changed, 187 insertions(+), 95 deletions(-) diff --git a/package-lock.json b/package-lock.json index c6f3c95..86d9d91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0", "license": "Apache-2.0", "devDependencies": { - "vitepress": "^1.0.0-rc.21" + "vitepress": "^1.0.0-rc.25" }, "engines": { "node": ">=18.15.0", @@ -191,9 +191,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.23.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.0.tgz", - "integrity": "sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==", + "version": "7.23.3", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.3.tgz", + "integrity": "sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==", "dev": true, "bin": { "parser": "bin/babel-parser.js" @@ -609,15 +609,15 @@ "dev": true }, "node_modules/@types/linkify-it": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.3.tgz", - "integrity": "sha512-pTjcqY9E4nOI55Wgpz7eiI8+LzdYnw3qxXCfHyBDdPbYvbyLgWLJGh8EdPvqawwMK1Uo1794AUkkR38Fr0g+2g==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-3.0.5.tgz", + "integrity": "sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==", "dev": true }, "node_modules/@types/markdown-it": { - "version": "13.0.2", - "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.2.tgz", - "integrity": "sha512-Tla7hH9oeXHOlJyBFdoqV61xWE9FZf/y2g+gFVwQ2vE1/eBzjUno5JCd3Hdb5oATve5OF6xNjZ/4VIZhVVx+hA==", + "version": "13.0.6", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-13.0.6.tgz", + "integrity": "sha512-0VqpvusJn1/lwRegCxcHVdmLfF+wIsprsKMC9xW8UPcTxhFcQtoN/fBU1zMe8pH7D/RuueMh2CaBaNv+GrLqTw==", "dev": true, "dependencies": { "@types/linkify-it": "*", @@ -625,9 +625,9 @@ } }, "node_modules/@types/mdurl": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.3.tgz", - "integrity": "sha512-T5k6kTXak79gwmIOaDF2UUQXFbnBE0zBUzF20pz7wDYu0RQMzWg+Ml/Pz50214NsFHBITkoi5VtdjFZnJ2ijjA==", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-1.0.5.tgz", + "integrity": "sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==", "dev": true }, "node_modules/@types/web-bluetooth": { @@ -636,54 +636,67 @@ "integrity": "sha512-v/ZHEj9xh82usl8LMR3GarzFY1IrbXJw5L4QfQhokjRV91q+SelFqxQWSep1ucXEZ22+dSTwLFkXeur25sPIbw==", "dev": true }, + "node_modules/@vitejs/plugin-vue": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.3.1.tgz", + "integrity": "sha512-tUBEtWcF7wFtII7ayNiLNDTCE1X1afySEo+XNVMNkFXaThENyCowIEX095QqbJZGTgoOcSVDJGlnde2NG4jtbQ==", + "dev": true, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "peerDependencies": { + "vite": "^4.0.0", + "vue": "^3.2.25" + } + }, "node_modules/@vue/compiler-core": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.4.tgz", - "integrity": "sha512-cquyDNvZ6jTbf/+x+AgM2Arrp6G4Dzbb0R64jiG804HRMfRiFXWI6kqUVqZ6ZR0bQhIoQjB4+2bhNtVwndW15g==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.8.tgz", + "integrity": "sha512-hN/NNBUECw8SusQvDSqqcVv6gWq8L6iAktUR0UF3vGu2OhzRqcOiAno0FmBJWwxhYEXRlQJT5XnoKsVq1WZx4g==", "dev": true, "dependencies": { - "@babel/parser": "^7.21.3", - "@vue/shared": "3.3.4", + "@babel/parser": "^7.23.0", + "@vue/shared": "3.3.8", "estree-walker": "^2.0.2", "source-map-js": "^1.0.2" } }, "node_modules/@vue/compiler-dom": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.4.tgz", - "integrity": "sha512-wyM+OjOVpuUukIq6p5+nwHYtj9cFroz9cwkfmP9O1nzH68BenTTv0u7/ndggT8cIQlnBeOo6sUT/gvHcIkLA5w==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.8.tgz", + "integrity": "sha512-+PPtv+p/nWDd0AvJu3w8HS0RIm/C6VGBIRe24b9hSyNWOAPEUosFZ5diwawwP8ip5sJ8n0Pe87TNNNHnvjs0FQ==", "dev": true, "dependencies": { - "@vue/compiler-core": "3.3.4", - "@vue/shared": "3.3.4" + "@vue/compiler-core": "3.3.8", + "@vue/shared": "3.3.8" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.4.tgz", - "integrity": "sha512-6y/d8uw+5TkCuzBkgLS0v3lSM3hJDntFEiUORM11pQ/hKvkhSKZrXW6i69UyXlJQisJxuUEJKAWEqWbWsLeNKQ==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.8.tgz", + "integrity": "sha512-WMzbUrlTjfYF8joyT84HfwwXo+8WPALuPxhy+BZ6R4Aafls+jDBnSz8PDz60uFhuqFbl3HxRfxvDzrUf3THwpA==", "dev": true, "dependencies": { - "@babel/parser": "^7.20.15", - "@vue/compiler-core": "3.3.4", - "@vue/compiler-dom": "3.3.4", - "@vue/compiler-ssr": "3.3.4", - "@vue/reactivity-transform": "3.3.4", - "@vue/shared": "3.3.4", + "@babel/parser": "^7.23.0", + "@vue/compiler-core": "3.3.8", + "@vue/compiler-dom": "3.3.8", + "@vue/compiler-ssr": "3.3.8", + "@vue/reactivity-transform": "3.3.8", + "@vue/shared": "3.3.8", "estree-walker": "^2.0.2", - "magic-string": "^0.30.0", - "postcss": "^8.1.10", + "magic-string": "^0.30.5", + "postcss": "^8.4.31", "source-map-js": "^1.0.2" } }, "node_modules/@vue/compiler-ssr": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.4.tgz", - "integrity": "sha512-m0v6oKpup2nMSehwA6Uuu+j+wEwcy7QmwMkVNVfrV9P2qE5KshC6RwOCq8fjGS/Eak/uNb8AaWekfiXxbBB6gQ==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.8.tgz", + "integrity": "sha512-hXCqQL/15kMVDBuoBYpUnSYT8doDNwsjvm3jTefnXr+ytn294ySnT8NlsFHmTgKNjwpuFy7XVV8yTeLtNl/P6w==", "dev": true, "dependencies": { - "@vue/compiler-dom": "3.3.4", - "@vue/shared": "3.3.4" + "@vue/compiler-dom": "3.3.8", + "@vue/shared": "3.3.8" } }, "node_modules/@vue/devtools-api": { @@ -693,65 +706,65 @@ "dev": true }, "node_modules/@vue/reactivity": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.4.tgz", - "integrity": "sha512-kLTDLwd0B1jG08NBF3R5rqULtv/f8x3rOFByTDz4J53ttIQEDmALqKqXY0J+XQeN0aV2FBxY8nJDf88yvOPAqQ==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.8.tgz", + "integrity": "sha512-ctLWitmFBu6mtddPyOKpHg8+5ahouoTCRtmAHZAXmolDtuZXfjL2T3OJ6DL6ezBPQB1SmMnpzjiWjCiMYmpIuw==", "dev": true, "dependencies": { - "@vue/shared": "3.3.4" + "@vue/shared": "3.3.8" } }, "node_modules/@vue/reactivity-transform": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.4.tgz", - "integrity": "sha512-MXgwjako4nu5WFLAjpBnCj/ieqcjE2aJBINUNQzkZQfzIZA4xn+0fV1tIYBJvvva3N3OvKGofRLvQIwEQPpaXw==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.8.tgz", + "integrity": "sha512-49CvBzmZNtcHua0XJ7GdGifM8GOXoUMOX4dD40Y5DxI3R8OUhMlvf2nvgUAcPxaXiV5MQQ1Nwy09ADpnLQUqRw==", "dev": true, "dependencies": { - "@babel/parser": "^7.20.15", - "@vue/compiler-core": "3.3.4", - "@vue/shared": "3.3.4", + "@babel/parser": "^7.23.0", + "@vue/compiler-core": "3.3.8", + "@vue/shared": "3.3.8", "estree-walker": "^2.0.2", - "magic-string": "^0.30.0" + "magic-string": "^0.30.5" } }, "node_modules/@vue/runtime-core": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.4.tgz", - "integrity": "sha512-R+bqxMN6pWO7zGI4OMlmvePOdP2c93GsHFM/siJI7O2nxFRzj55pLwkpCedEY+bTMgp5miZ8CxfIZo3S+gFqvA==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.8.tgz", + "integrity": "sha512-qurzOlb6q26KWQ/8IShHkMDOuJkQnQcTIp1sdP4I9MbCf9FJeGVRXJFr2mF+6bXh/3Zjr9TDgURXrsCr9bfjUw==", "dev": true, "dependencies": { - "@vue/reactivity": "3.3.4", - "@vue/shared": "3.3.4" + "@vue/reactivity": "3.3.8", + "@vue/shared": "3.3.8" } }, "node_modules/@vue/runtime-dom": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.4.tgz", - "integrity": "sha512-Aj5bTJ3u5sFsUckRghsNjVTtxZQ1OyMWCr5dZRAPijF/0Vy4xEoRCwLyHXcj4D0UFbJ4lbx3gPTgg06K/GnPnQ==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.8.tgz", + "integrity": "sha512-Noy5yM5UIf9UeFoowBVgghyGGPIDPy1Qlqt0yVsUdAVbqI8eeMSsTqBtauaEoT2UFXUk5S64aWVNJN4MJ2vRdA==", "dev": true, "dependencies": { - "@vue/runtime-core": "3.3.4", - "@vue/shared": "3.3.4", - "csstype": "^3.1.1" + "@vue/runtime-core": "3.3.8", + "@vue/shared": "3.3.8", + "csstype": "^3.1.2" } }, "node_modules/@vue/server-renderer": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.4.tgz", - "integrity": "sha512-Q6jDDzR23ViIb67v+vM1Dqntu+HUexQcsWKhhQa4ARVzxOY2HbC7QRW/ggkDBd5BU+uM1sV6XOAP0b216o34JQ==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.8.tgz", + "integrity": "sha512-zVCUw7RFskvPuNlPn/8xISbrf0zTWsTSdYTsUTN1ERGGZGVnRxM2QZ3x1OR32+vwkkCm0IW6HmJ49IsPm7ilLg==", "dev": true, "dependencies": { - "@vue/compiler-ssr": "3.3.4", - "@vue/shared": "3.3.4" + "@vue/compiler-ssr": "3.3.8", + "@vue/shared": "3.3.8" }, "peerDependencies": { - "vue": "3.3.4" + "vue": "3.3.8" } }, "node_modules/@vue/shared": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.4.tgz", - "integrity": "sha512-7OjdcV8vQ74eiz1TZLzZP4JwqM5fA94K6yntPS5Z25r9HDuGNzaGdgvwKYq6S+MxwF0TFRwe50fIR/MYnakdkQ==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.8.tgz", + "integrity": "sha512-8PGwybFwM4x8pcfgqEQFy70NaQxASvOC5DJwLQfpArw1UDfUXrJkdxD3BhVTMS+0Lef/TU7YO0Jvr0jJY8T+mw==", "dev": true }, "node_modules/@vueuse/core": { @@ -1177,9 +1190,9 @@ "dev": true }, "node_modules/vite": { - "version": "4.4.11", - "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.11.tgz", - "integrity": "sha512-ksNZJlkcU9b0lBwAGZGGaZHCMqHsc8OpgtoYhsQ4/I2v5cnpmmmqe5pM4nv/4Hn6G/2GhTdj0DhZh2e+Er1q5A==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz", + "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==", "dev": true, "dependencies": { "esbuild": "^0.18.10", @@ -1232,23 +1245,24 @@ } }, "node_modules/vitepress": { - "version": "1.0.0-rc.21", - "resolved": "https://registry.npmjs.org/vitepress/-/vitepress-1.0.0-rc.21.tgz", - "integrity": "sha512-eHX057NgAqmrj6FIqh7Sqsbk/kftrFMBUpCKjuQIZ+c+bYTbmzXsXrHSbT5b4WWy4vLx1993a+H3wIRy2dHi8g==", + "version": "1.0.0-rc.25", + "resolved": "https://registry.npmjs.org/vitepress/-/vitepress-1.0.0-rc.25.tgz", + "integrity": "sha512-1dqWiHNThNrVZ08ixmfEDBEH+764KOgnev9oXga/x6cN++Vb9pnuu8p3K6DQP+KZrYcG+WiX7jxal0iSNpAWuQ==", "dev": true, "dependencies": { "@docsearch/css": "^3.5.2", "@docsearch/js": "^3.5.2", - "@types/markdown-it": "^13.0.2", + "@types/markdown-it": "^13.0.4", + "@vitejs/plugin-vue": "4.3.1", "@vue/devtools-api": "^6.5.1", "@vueuse/core": "^10.5.0", "@vueuse/integrations": "^10.5.0", - "focus-trap": "^7.5.3", + "focus-trap": "^7.5.4", "mark.js": "8.11.1", "minisearch": "^6.1.0", "shiki": "^0.14.5", - "vite": "^4.4.11", - "vue": "^3.3.4" + "vite": "^4.5.0", + "vue": "^3.3.6" }, "bin": { "vitepress": "bin/vitepress.js" @@ -1279,16 +1293,24 @@ "dev": true }, "node_modules/vue": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz", - "integrity": "sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==", + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.8.tgz", + "integrity": "sha512-5VSX/3DabBikOXMsxzlW8JyfeLKlG9mzqnWgLQLty88vdZL7ZJgrdgBOmrArwxiLtmS+lNNpPcBYqrhE6TQW5w==", "dev": true, "dependencies": { - "@vue/compiler-dom": "3.3.4", - "@vue/compiler-sfc": "3.3.4", - "@vue/runtime-dom": "3.3.4", - "@vue/server-renderer": "3.3.4", - "@vue/shared": "3.3.4" + "@vue/compiler-dom": "3.3.8", + "@vue/compiler-sfc": "3.3.8", + "@vue/runtime-dom": "3.3.8", + "@vue/server-renderer": "3.3.8", + "@vue/shared": "3.3.8" + }, + "peerDependencies": { + "typescript": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } } } diff --git a/package.json b/package.json index a8c1e81..17d5cb1 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "license": "Apache-2.0", "homepage": "https://docs.add-to-calendar-pro.com/", "devDependencies": { - "vitepress": "^1.0.0-rc.21" + "vitepress": "^1.0.0-rc.25" }, "scripts": { "docs:dev": "vitepress dev", diff --git a/src/de/integration/general.md b/src/de/integration/general.md index bfb8816..7ed34d5 100644 --- a/src/de/integration/general.md +++ b/src/de/integration/general.md @@ -1,10 +1,45 @@ +# Nutze die Buttons und RSVP mit deinem Tech Stack -# Using Buttons and Forms with your Tech Stack +## Zu beachten -## Things to consider +## Allgemeiner Workflow -## General workflow +## Via CDN nutzen -## Using it via CDN +## Via NPM nutzen -## Using it via NPM +## Einstellungen überschreiben + +Bestimmte Parameter können direkt am HTML-Tag überschrieben werden. + +Dies bedeutet, dass die Einstellung, die über das entsprechende Attribut an der Button-Einbindung vorgenommen wird, eine mögliche gegenteilige Einstellung, die in der App vorgenommen wird, überschreibt. + +Dies kann hilfreich sein, wenn bspw. Styles im Code definiert werden oder dynamische Inhalte eingefügt werden sollen. Letzeres ist stark limitiert und sollte mit Bedacht genutzt werden! In den meisten Fällen empfiehlt sich hier eher die Arbeit über unsere API. + +Parameter, die überschrieben oder gar nur im Code gesetzt werden können: + + +| Attribut | Beschreibung | Typ / Format | +| :------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | +| debug | Loggt Fehler in der JavaScript-Konsole des Browsers und rendert anstelle des Kalenders eine Fehlermeldung. | Boolean | +| cspnonce | Nötig, sofern du mit strenger Content-Security-Policy arbeitest. Experimentell! Aktuell nur für JavaScript; CSS muss auch inline erlaubt sein. | String | +| instance | Ermöglicht ein "Neu-Rendern" des Buttons, indem die Zahl verändert/erhöht wird. | Number | +| attendee | Schema "NAME\|E-MAIL" (bspw. "Max Muster\|max.muster@gmail.com") oder nur eine E-Mail-Adresse. Nur 1 Eintrag möglich. Ermöglicht die Nutzung von iCal-Status-Funktionalitäten. Erfordert einen gesetzten Organisator. Erzwingt eine dynamische Erzeugung von ics-Dateien anstelle des Abrufs der statischen Datei. | String (NAME\|EMAIL) | +| images | Reichert die Rich-Data-Angaben an. 1-3 Bilder via url. Empfohlen werden 3 Bilder mit einer Breite von je 1920px. Eines mit einem Seitenverhältnis von 1x1, eines mit 4x3 und eines mit 16x9. | Array (urls) | +| size | Skalierung anpassen. 1-3 Werte. Bei mehreren Werten wird der erste für große, der zweite für mittlere und der dritte für kleine Bildschirme gesetzt. Bei 2 Werten gilt der zweite für mittlere und kleine Bildschirme. | String (X\|X\|X) | +| inline | Rendert den Button inline anstelle des standardmäßigen Block-Styles. | Boolean | +| inlineRsvp | Rendert das RSVP-Formular inline und nicht als Modal nach Button-Klick. | Boolean | +| forceOverlay | Rendert Dropdowns über allen Elementen. Ressourcen-intensiv, aber für manche Layout notwendig. | Boolean | +| customLabels | Siehe die entsprechende Einstellung in der App für mögliche Werte. Die Struktur muss einem JSON-Schema entsprechen. | Object | +| customCss | Lädt eine angegebene externe css-Datei (absoluter Pfad) anstelle des integrierten Styles. | String (url) | +| lightMode | Definiert wie das Dark/Light-Theme gesetzt werden soll. "system" orientiert sich am Betriebssystem des Nutzers. "bodyScheme" schaltet auf "dark", wenn im body oder html tag die Klasse "atcb-dark" oder "dark" gesetzt ist. | String (system, dark, light, bodyScheme) | +| styleLight | Siehe die entsprechende Einstellung in der App für mögliche Werte. Beispiel: styleLight="--btn-background: #2f4377; --btn-text: #fff; --font: Georgia, 'Times New Roman', Times, serif;" | String | +| styleDark | Siehe die entsprechende Einstellung in der App für mögliche Werte. Beispiel: styleDark="--btn-background: #2f4377; --btn-text: #fff;" | String | +| language | Sprache des Buttons. Optionen: ar, cs, de, en, es, et, fa, fi, fr, hi, id, it, ja, ko, nl, no, ro, pl, pt, sv, tr, vi, zh | String | +| blockInteraction | Blockiert jegliche Interaktion mit dem Button - mit Ausnahme von Hover-Effekten. | Boolean | +| disabled | Deaktiviert den Button und zeigt diesen ausgegraut an. | Boolean | +| hidden | Blendet den Button aus. | Boolean | +| bypassWebViewCheck | Für Nutzer, die den Button auf ihrem iPhone in einer WebView-Umgebung (z.B. dem Instagram Browser) laden, können wir die ics-Datei nicht direkt zum Download anbieten. Deshalb zeigen wir in diesem Fall eine kleine Anleitung, wie man den Termin stattdessen speichern kann. Wenn du den Button in deiner eigenen Anwendung verwendest; in der du den Download von ics-Dateien im Standardbrowser aktiv zulassen kannst, kannst du diesen Workaround mit der Option bypassWebViewCheck umgehen. | Boolean | +| fakeMobile | Simuliert ein mobiles Endgerät. | Boolean | +| fakeIOS | Simuliert iOS. | Boolean | +| fakeAndroid | Simuliert Android. | Boolean | diff --git a/src/integration/general.md b/src/integration/general.md index bfb8816..642e5d0 100644 --- a/src/integration/general.md +++ b/src/integration/general.md @@ -1,4 +1,3 @@ - # Using Buttons and Forms with your Tech Stack ## Things to consider @@ -8,3 +7,39 @@ ## Using it via CDN ## Using it via NPM + +## Overwrite settings + +Some parameters can be overwritten by adding them directly to the HTML tag. + +This means that the value, put as attribute to the button integration, overrules a potential different setting at the app. + +This can be useful, if custom style shall be defined within the code or you want to change some details dynamically. Latter one is quite limited and should be considered carefully! Usually, the better way to change things dynamically is via our API. + +Parameters, that can be overwritten or even only set at the code level: + + +| Attribute | Description | Type / Format | +| :------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------- | +| debug | Logs errors in the browser's JavaScript console and renders an error message instead of the button. | Boolean | +| cspnonce | Necessary if you are working with a strict Content Security Policy. Experimental! Currently only for JavaScript; CSS must be allowed inline. | String | +| instance | Triggers a "re-render" of the button by changing/increasing the number. | Number | +| attendee | Scheme "NAME\|E-MAIL" (for example, "John Doe\|john.doe@gmail.com") or just an email address. Only 1 entry possible. Enables the use of iCal status functionalities. Requires a set organizer. Enforces dynamic creation of ics files instead of retrieving the static file. | String (NAME\|EMAIL) | +| images | Enhances the rich data details. 1-3 images via URL. It is recommended to use 3 images, each with a width of 1920px. One with an aspect ratio of 1x1, one with 4x3, and one with 16x9. | Array (urls) | +| size | Adjust scaling. 1-3 values. With multiple values, the first is set for large screens, the second for medium screens, and the third for small screens. With 2 values, the second applies to both medium and small screens. | String (X\|X\|X) | +| inline | Renders the button inline instead of the default block style. | Boolean | +| inlineRsvp | Renders the RSVP form inline and not as a modal after clicking the button. | Boolean | +| forceOverlay | Renders dropdowns above all elements. Resource-intensive but necessary for some layouts. | Boolean | +| customLabels | See the relevant setting in the app for possible values. The structure must comply with a JSON schema. | Object | +| customCss | Loads a specified external CSS file (absolute path) instead of the integrated style. | String (url) | +| lightMode | Defines how the dark/light theme should be set. "system" is based on the user's operating system settings. "bodyScheme" switches to "dark" if the "atcb-dark" or "dark" class is set in the body or html tag. | String (system, dark, light, bodyScheme) | +| styleLight | See the relevant setting in the app for possible values. Example: styleLight="--btn-background: #2f4377; --btn-text: #fff; --font: Georgia, 'Times New Roman', Times, serif;" | String | +| styleDark | See the relevant setting in the app for possible values. Example: styleDark="--btn-background: #2f4377; --btn-text: #fff;" | String | +| language | Language of the button. Options: ar, cs, de, en, es, et, fa, fi, fr, hi, id, it, ja, ko, nl, no, ro, pl, pt, sv, tr, vi, zh | String | +| blockInteraction | Blocks any interaction with the button, with the exception of hover effects. | Boolean | +| disabled | Disables the button and shows it in a grey state. | Boolean | +| hidden | Hides the button completely. | Boolean | +| bypassWebViewCheck | For users who load the button on their iPhone in a WebView environment (such as the Instagram browser), we cannot offer the ics file directly for download. Therefore, in this case, we show a small tutorial on how to save the event instead. If you use the button in your own application, where you can allow the download of ics files in the default browser, you can bypass this workaround with the option bypassWebViewCheck. | Boolean | +| fakeMobile | Simulates a mobile device. | Boolean | +| fakeIOS | Simulates iOS. | Boolean | +| fakeAndroid | Simulates Android. | Boolean |