From 8adca7faa0cfd6f4d77b84325d603a5250fc054b Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Sat, 15 Mar 2025 20:53:27 +0100 Subject: [PATCH] :abc: --- README.md | 28 ++++++++++--------- .../examples/case-studies/image-gallery.js | 24 ++++++++-------- .../examples/case-studies/task-manager.js | 12 +++++--- 3 files changed, 35 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 4590ebe..55a1f73 100644 --- a/README.md +++ b/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 -- [**Examples Gallery**](https://jaandrle.github.io/deka-dom-el/p15-examples.html): A comprehensive collection of code examples and case studies - - Interactive Form with Validation - - Data Dashboard with Charts - - Image Gallery with Lightbox - - Kanban Task Manager - - TodoMVC Implementation +- [**Interactive Guide**](https://jaandrle.github.io/deka-dom-el) +- [**Examples**](https://jaandrle.github.io/deka-dom-el/p15-examples.html) ## 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 -- [adamhaile/S](https://github.com/adamhaile/S) - Simple, clean, fast reactive programming -- [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) - Create HyperText with JavaScript -- [potch/signals](https://github.com/potch/signals) - A small reactive signals library -- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) - +- [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 +- [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) — Create HyperText with JavaScript +- [potch/signals](https://github.com/potch/signals) — A small reactive signals library +- [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 diff --git a/docs/components/examples/case-studies/image-gallery.js b/docs/components/examples/case-studies/image-gallery.js index 8189bc3..e4dcec7 100644 --- a/docs/components/examples/case-studies/image-gallery.js +++ b/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() { - // 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' }, - ]; +export function ImageGallery(images= imagesSample) { // Application state const selectedImageId = S(null); diff --git a/docs/components/examples/case-studies/task-manager.js b/docs/components/examples/case-studies/task-manager.js index 3027c67..9e61455 100644 --- a/docs/components/examples/case-studies/task-manager.js +++ b/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: 2, title: 'Design UI components', description: 'Create mockups for main views', 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' }, + { id: 1, title: 'Create project structure', description: 'Set up folders and initial files', + status: STATUSES.DONE, priority: 'high' }, + { id: 2, title: 'Design UI components', description: 'Create mockups for main views', + 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' }, ]; }