tag styles

Author: naltatis

docs/reference/plugins.md

@@ -1,6 +1,7 @@
 ---
 sidebar_position: 3
 ---
+
 import Tag from '@site/src/components/Tag';
 
 # Plugins
@@ -175,16 +176,15 @@ Zusätzlich können spezielle Kommandos über Plugins an das Fahrzeug geschickt
 
 Folgende Plugins stehen zur Verfügung und können für die oben beschriebenen Attribute konfiguriert werden, um eine flexible Anbindung an die verschiedenen Systeme zu ermöglichen.
 
-### Modbus {#modbus} <Tag label="lesen" category="read" /> <Tag label="schreiben" category="write" />
-
+### Modbus <Tag label="lesen" category="read" /> <Tag label="schreiben" category="write" /> {#modbus}
 
 Das `modbus` Plugin kann Daten von jedem Modbus-fähigen Gerät oder SunSpec-kompatiblen Wechselrichter lesen.
 Viele Strommessgeräte sind bereits vorkonfiguriert (siehe [MBMD Supported Devices](https://github.com/volkszaehler/mbmd#supported-devices)).
 Es ist ebenfalls möglich Modbus Register zu Schreiben um weitere Wallboxen zu integrieren.
 
 Schaue in die [Modbus Dokumentation](modbus) für weitere Details.
 
-### MQTT {#mqtt} <Tag label="lesen" category="read" /> <Tag label="schreiben" category="write" />
+### MQTT <Tag label="lesen" category="read" /> <Tag label="schreiben" category="write" /> {#mqtt}
 
 Das `mqtt` Plugin ermöglicht das Lesen von Werten über MQTT Topics.
 Das ist insbesondere für Strommessgeräte nützlich, z.B. wenn diese ihre Daten bereits über MQTT bereitstellen.
@@ -210,7 +210,7 @@ topic: mbmd/charger/maxcurrent
 payload: ${var:%d}
 ```
 
-### HTTP {#http} <Tag label="lesen" category="read" /> <Tag label="schreiben" category="write" />
+### HTTP <Tag label="lesen" category="read" /> <Tag label="schreiben" category="write" /> {#http}
 
 Das `http` Plugin führt HTTP Aufrufe durch, um Daten zu lesen oder zu aktualisieren. Es beinhaltet auch die Fähigkeit JSON-Datenstrukturen über jq-Abfragen (z. B. für REST-APIs) zu lesen oder einfache Transformationen durchzuführen. Der volle Funktionsumfang ist in der [offiziellen jq Dokumentation](https://jqlang.github.io/jq/manual/) zu finden.
 
@@ -261,7 +261,7 @@ enable:
   uri: "http://charger/relay/0?turn={{if .enable}}on{{else}}off{{end}}"
 ```
 
-### Websocket {#websocket} <Tag label="lesen" category="read" />
+### Websocket <Tag label="lesen" category="read" /> {#websocket}
 
 Das `websocket` Plugin bietet einen Websocket Listener. Es beinhaltet auch die Fähigkeit JSON-Datenstrukturen über jq-ähnliche Abfragen zu lesen oder zu parsen. Dies kann z.B. verwendet werden, um Daten von Volkszählers Push Server zu empfangen.
 
@@ -275,8 +275,7 @@ scale: 0.001 # floating point factor applied to result, e.g. for Wh to kWh conve
 timeout: 30s # error if no update received in 30 seconds
 ```
 
-### SMA/Speedwire {#speedwire} <Tag label="lesen" category="read" />
-
+### SMA/Speedwire <Tag label="lesen" category="read" /> {#speedwire}
 
 Das `sma` Plugin bietet eine Schnittstelle zu SMA Geräten, welche das Speedwire Protokoll beherrschen.
 
@@ -296,7 +295,7 @@ Unterstützte Werte für `value` können in der Diagnoseausgabe über das Komman
 
 Alle möglichen Werte können als Konstanten [hier](https://gitlab.com/bboehmke/sunny/-/blob/master/values.go#L24) gefunden werden (verwende den Namen der Konstante für `value`).
 
-### JavaScript {#javascript} <Tag label="lesen" category="read" /> <Tag label="schreiben" category="write" />
+### JavaScript <Tag label="lesen" category="read" /> <Tag label="schreiben" category="write" /> {#javascript}
 
 evcc integriert einen JavaScript Interpreter mit der [Underscore.js](https://underscorejs.org) Bibliothek, welche direkt über `_.` zugreifbar ist, z.B. `_.random(0,5)`. Das `js` Plugin kann JavaScript code über den `script` Parameter ausführen. Sehr hilfreich für das schnelle Erstellen von Prototypen:
 
@@ -322,7 +321,7 @@ charger:
         console.log(maxcurrent);
 ```
 
-### Shell Script {#shell} <Tag label="lesen" category="read" /> <Tag label="schreiben" category="write" />
+### Shell Script <Tag label="lesen" category="read" /> <Tag label="schreiben" category="write" /> {#shell}
 
 Das `script` Plugin führt externe Skripte zum Lesen oder Aktualisieren von Daten aus. Das Plugin ist hilfreich um jede Art von externer Funktionalität einzubinden.
 
@@ -342,7 +341,7 @@ cmd: /home/user/my-script.sh ${enable:%b} # format boolean enable as 0/1
 timeout: 5s
 ```
 
-### Const {#const} <Tag label="lesen" category="read" />
+### Const <Tag label="lesen" category="read" /> {#const}
 
 Das `const` Plugin gibt einen konstanten Wert zurück.
 Es eignet sich z.B. um in Verbindung mit dem `calc` Plugin feste Korrekturwerte (Offset) auf einen variablen Wert anzuwenden oder auch zur Simulation von Mess- und Statuswerten zu Testzwecken.
@@ -354,7 +353,7 @@ source: const
 value: -16247
 ```
 
-### Calc {#calc} <Tag label="lesen" category="read" />
+### Calc <Tag label="lesen" category="read" /> {#calc}
 
 Das `calc` Plugin erlaubt es mehrere Einzelwerte mathematisch weiterzuverarbeiten:
 
@@ -399,7 +398,7 @@ Das `calc` Plugin ist hilfreich um z.B.
 Konstante Hilfswerte (z. B. für Offsets) lassen sich mithilfe des `const` Plugins als Operand erzeugen.
 :::
 
-### Combined {#combined} <Tag label="lesen" category="read" />
+### Combined <Tag label="lesen" category="read" /> {#combined}
 
 Das `combined` Status Plugin wird verwendet um gemischte Boolean Status Werte von `Plugged` (angeschlossen) / `Charging` (Laden) in einen evcc-kompatiblen Ladestatus von A..F zu konvertieren.
 Es wird z.b. zusammen mit einer OpenWB MQTT Integration verwendet.

src/components/Tag.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Tag({ label, category }) {
+  return <span className={`tag tag--${category}`}>{label}</span>;
+}

src/components/Tag.jsx

@@ -122,3 +122,24 @@ article.margin-bottom--xl footer .text--right a {
   text-decoration: underline;
   font-size: 1.1rem;
 }
+
+.tag {
+  font-size: 0.75rem;
+  border: 0.1rem solid rgba(0, 0, 0, 0.1);
+  font-weight: bold;
+  padding: 0.2em 0.8em;
+  border-radius: 10px;
+  display: inline-block;
+  margin-left: 0.5rem;
+  vertical-align: middle;
+}
+
+.tag--read {
+  background-color: rgba(84, 199, 236, 0.15);
+  color: var(--ifm-color-info-contrast-foreground);
+}
+
+.tag--write {
+  background-color: rgba(255, 186, 0, 0.15);
+  color: var(--ifm-color-warning-contrast-foreground);
+}