feat: include ability for progressive enhancement

index.html

@@ -30,6 +30,17 @@ <h2>Client Side Rendered</h2>
 			lang="de"
 		></activity-graph>
 		/client -->
+  <h2>Progressive Enhancement / HTML Web Component</h2>
+  <!-- client
+  <activity-graph range-start="2024-01-01" range-end="2024-12-31" activity-levels="0,1,2,4">
+    <ul>
+      <li data-activity="2024-01-03">Activity on 2024-01-03</li>
+      <li data-activity="2024-01-04">Activity on 2024-01-04</li>
+      <li data-activity="2024-01-05">Activity on 2024-01-05</li>
+      <li data-activity="2024-01-06">Activity on 2024-01-06</li>
+    </ul>
+  </activity-graph>
+  /client -->
   <pre>
     <code>
       &lt;activity-graph

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mariohamann/activity-graph",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "scripts": {
     "dev": "vite",
     "build": "node scripts/build.mjs",

src/activity-graph.mjs

@@ -20,6 +20,12 @@ class ActivityGraph extends HTMLElement {
 			"i18n",
 		].forEach((attr) => (this.attrs[attr] = this.getAttribute(attr)));
 
+		if (this.activityDataFromChildren.length > 0) {
+			this.attrs["activity-data"] =
+				this.activityDataFromChildren.join(",");
+			this.setAttribute("activity-data", this.attrs["activity-data"]);
+		}
+
 		this.innerHTML = ActivityGraphElement({
 			state: { attrs: this.attrs },
 		});
@@ -43,6 +49,12 @@ class ActivityGraph extends HTMLElement {
 			state: { attrs: this.attrs },
 		});
 	}
+
+	get activityDataFromChildren() {
+		return Array.from(this.querySelectorAll("[data-activity]")).map((el) =>
+			el.getAttribute("data-activity")
+		);
+	}
 }
 
 customElements.define("activity-graph", ActivityGraph);

vite.config.mjs

@@ -15,8 +15,8 @@ const htmlPlugin = () => {
 				bodyContent: false,
 			});
 			return render`${html}`
-				.replace("<!-- client", "")
-				.replace("/client -->", "");
+				.replaceAll("<!-- client", "")
+				.replaceAll("/client -->", "");
 		},
 	};
 };