WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

release: WRNexusJS 0.7.0

Browse Source
This commit is contained in:
Clintchiz
2026-08-01 10:04:42 +05:30
parent c54144f2e4
commit 87507edf59
207 changed files with 12607 additions and 679 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/component-showcase/app/pages/components/image.wrn
+6 -6
View File
@@ -58,12 +58,12 @@ page ImageDetail {
<div id="image-demo-1" class="demo-canvas demo-canvas--1">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Image size="default" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 800 450&#39;%3E%3Crect width=&#39;800&#39; height=&#39;450&#39; fill=&#39;%231e1b4b&#39;/%3E%3Ccircle cx=&#39;400&#39; cy=&#39;225&#39; r=&#39;120&#39; fill=&#39;%237c3aed&#39;/%3E%3C/svg%3E" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
<div class="demo-render"><Image size="default" src="/showcase-images/violet-circle.svg" alt="Abstract violet circle on a dark surface" width="800" height="450" rounded="false" class="showcase-instance showcase-instance--1" /></div>
</div>
<section class="demo-code" aria-label="Responsive content image usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Image
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 450'%3E%3Crect width='800' height='450' fill='%231e1b4b'/%3E%3Ccircle cx='400' cy='225' r='120' fill='%237c3aed'/%3E%3C/svg%3E"
src="/showcase-images/violet-circle.svg"
alt="Abstract violet circle on a dark surface"
width="800"
height="450"
@@ -80,13 +80,13 @@ page ImageDetail {
<div id="image-demo-2" class="demo-canvas demo-canvas--2">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Image size="sm" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 400 400&#39;%3E%3Crect width=&#39;400&#39; height=&#39;400&#39; fill=&#39;%230284c7&#39;/%3E%3Cpath d=&#39;M80 290 190 120l130 170z&#39; fill=&#39;white&#39; opacity=&#39;.7&#39;/%3E%3C/svg%3E" alt="Abstract blue thumbnail" width="400" height="400" rounded="true" class="showcase-instance showcase-instance--2" /></div>
<div class="demo-render"><Image size="sm" src="/showcase-images/blue-mountain.svg" alt="Abstract blue thumbnail" width="400" height="400" rounded="true" class="showcase-instance showcase-instance--2" /></div>
</div>
<section class="demo-code" aria-label="Rounded thumbnail usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Image
size="sm"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Crect width='400' height='400' fill='%230284c7'/%3E%3Cpath d='M80 290 190 120l130 170z' fill='white' opacity='.7'/%3E%3C/svg%3E"
src="/showcase-images/blue-mountain.svg"
alt="Abstract blue thumbnail"
width="400"
height="400"
@@ -104,13 +104,13 @@ page ImageDetail {
<div id="image-demo-3" class="demo-canvas demo-canvas--3">
<div class="demo-browser-chrome"><span></span><span></span><span></span><small>Live preview</small></div>
<div class="demo-render"><Image size="lg" src="data:image/svg+xml,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; viewBox=&#39;0 0 1200 600&#39;%3E%3Crect width=&#39;1200&#39; height=&#39;600&#39; fill=&#39;%23059669&#39;/%3E%3Crect x=&#39;150&#39; y=&#39;120&#39; width=&#39;900&#39; height=&#39;360&#39; rx=&#39;36&#39; fill=&#39;white&#39; opacity=&#39;.18&#39;/%3E%3C/svg%3E" alt="Abstract green hero visual" width="1200" height="600" loading="eager" rounded="true" class="showcase-instance showcase-instance--3" /></div>
<div class="demo-render"><Image size="lg" src="/showcase-images/green-hero.svg" alt="Abstract green hero visual" width="1200" height="600" loading="eager" rounded="true" class="showcase-instance showcase-instance--3" /></div>
</div>
<section class="demo-code" aria-label="Eager hero image usage">
<header><span><span class="icon-[lucide--code-2] size-4" aria-hidden="true"></span>Component usage</span><small>.wrn</small></header>
<pre><code>&lt;Image
size="lg"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Crect width='1200' height='600' fill='%23059669'/%3E%3Crect x='150' y='120' width='900' height='360' rx='36' fill='white' opacity='.18'/%3E%3C/svg%3E"
src="/showcase-images/green-hero.svg"
alt="Abstract green hero visual"
width="1200"
height="600"