🔤

README.md

@@ -115,13 +115,8 @@ format selector](https://jaandrle.github.io/deka-dom-el/) on the documentation s
 
 ### Documentation
 
-- [**Interactive Guide**](https://jaandrle.github.io/deka-dom-el): WIP
+- [**Interactive Guide**](https://jaandrle.github.io/deka-dom-el)
-- [**Examples Gallery**](https://jaandrle.github.io/deka-dom-el/p15-examples.html): A comprehensive collection of code examples and case studies
+- [**Examples**](https://jaandrle.github.io/deka-dom-el/p15-examples.html)
-  - Interactive Form with Validation
-  - Data Dashboard with Charts
-  - Image Gallery with Lightbox
-  - Kanban Task Manager
-  - TodoMVC Implementation
 
 ## Understanding Signals
 
@@ -134,10 +129,17 @@ Signals are the reactive backbone of Deka DOM Elements:
 
 ## Inspiration and Alternatives
 
-- [vanjs-org/van](https://github.com/vanjs-org/van) - World's smallest reactive UI framework
+- [vanjs-org/van](https://github.com/vanjs-org/van) — World's smallest reactive UI framework
-- [adamhaile/S](https://github.com/adamhaile/S) - Simple, clean, fast reactive programming
+- [adamhaile/S](https://github.com/adamhaile/S) — Simple, clean, fast reactive programming
-- [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) - Create HyperText with JavaScript
+- [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) — Create HyperText with JavaScript
-- [potch/signals](https://github.com/potch/signals) - A small reactive signals library
+- [potch/signals](https://github.com/potch/signals) — A small reactive signals library
-- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) -
+- [AseasRoa/paintor](https://github.com/AseasRoa/paintor) - JavaScript library for building reactive client-side user
+	interfaces or HTML code.
+- [pota](https://pota.quack.uy/) — small and pluggable Reactive Web Renderer. It's compiler-less, includes an html
+	function, and a optimized babel preset in case you fancy JSX.
+- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) —
 	Functional DOM components without JSX/virtual DOM
-- [mxjp/rvx: A signal based frontend framework](https://github.com/mxjp/rvx)
+- [TarekRaafat/eleva](https://github.com/TarekRaafat/eleva) — A minimalist, lightweight, pure vanilla JavaScript
+	frontend runtime framework.
+- [didi/mpx](https://github.com/didi/mpx) — Mpx，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架
+- [mxjp/rvx](https://github.com/mxjp/rvx) — A signal based frontend framework

docs/components/examples/case-studies/image-gallery.js

@@ -11,22 +11,22 @@
 import { el, memo, on } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
 
+// Sample image data
+const imagesSample = (url=> [
+	{ id: 1, src: url+'nature', alt: 'Nature', title: 'Beautiful Landscape' },
+	{ id: 2, src: url+'places', alt: 'City', title: 'Urban Architecture' },
+	{ id: 3, src: url+'people', alt: 'People', title: 'Street Photography' },
+	{ id: 4, src: url+'food', alt: 'Food', title: 'Culinary Delights' },
+	{ id: 5, src: url+'animals', alt: 'Animals', title: 'Wildlife' },
+	{ id: 6, src: url+'travel', alt: 'Travel', title: 'Adventure Awaits' },
+	{ id: 7, src: url+'computer', alt: 'Technology', title: 'Modern Tech' },
+	{ id: 8, src: url+'music', alt: 'Art', title: 'Creative Expression' },
+])('https://api.algobook.info/v1/randomimage?category=');
 /**
  * Interactive Image Gallery Component
  * @returns {HTMLElement} Gallery element
  */
-export function ImageGallery() {
+export function ImageGallery(images= imagesSample) {
-	// Sample image data
-	const images = [
-		{ id: 1, src: 'https://api.algobook.info/v1/randomimage?category=nature', alt: 'Nature', title: 'Beautiful Landscape' },
-		{ id: 2, src: 'https://api.algobook.info/v1/randomimage?category=places', alt: 'City', title: 'Urban Architecture' },
-		{ id: 3, src: 'https://api.algobook.info/v1/randomimage?category=people', alt: 'People', title: 'Street Photography' },
-		{ id: 4, src: 'https://api.algobook.info/v1/randomimage?category=food', alt: 'Food', title: 'Culinary Delights' },
-		{ id: 5, src: 'https://api.algobook.info/v1/randomimage?category=animals', alt: 'Animals', title: 'Wildlife' },
-		{ id: 6, src: 'https://api.algobook.info/v1/randomimage?category=travel', alt: 'Travel', title: 'Adventure Awaits' },
-		{ id: 7, src: 'https://api.algobook.info/v1/randomimage?category=computer', alt: 'Technology', title: 'Modern Tech' },
-		{ id: 8, src: 'https://api.algobook.info/v1/randomimage?category=music', alt: 'Art', title: 'Creative Expression' },
-	];
 
 	// Application state
 	const selectedImageId = S(null);

docs/components/examples/case-studies/task-manager.js

@@ -40,10 +40,14 @@ export function TaskManager() {
 	if (!initialTasks.length) {
 		// Default tasks if nothing in localStorage
 		initialTasks = [
-			{ id: 1, title: 'Create project structure', description: 'Set up folders and initial files', status: STATUSES.DONE, priority: 'high' },
+			{ id: 1, title: 'Create project structure', description: 'Set up folders and initial files',
-			{ id: 2, title: 'Design UI components', description: 'Create mockups for main views', status: STATUSES.IN_PROGRESS, priority: 'medium' },
+				status: STATUSES.DONE, priority: 'high' },
-			{ id: 3, title: 'Implement authentication', description: 'Set up user login and registration', status: STATUSES.TODO, priority: 'high' },
+			{ id: 2, title: 'Design UI components', description: 'Create mockups for main views',
-			{ id: 4, title: 'Write documentation', description: 'Document API endpoints and usage examples', status: STATUSES.TODO, priority: 'low' },
+				status: STATUSES.IN_PROGRESS, priority: 'medium' },
+			{ id: 3, title: 'Implement authentication', description: 'Set up user login and registration',
+				status: STATUSES.TODO, priority: 'high' },
+			{ id: 4, title: 'Write documentation', description: 'Document API endpoints and usage examples',
+				status: STATUSES.TODO, priority: 'low' },
 		];
 	}