thepra/decePubClient
1
0 Fork 0
Code Issues Pull Requests Actions Projects Releases 1 Wiki Activity

Serve the styleguide's images and links locally

Browse Source 
The styleguide loaded 42 images from picsum.photos and linked demo items to
daisyui.com. It now uses six small SVG landscapes in wwwroot/imgs/styleguide/
(the diff demo greys one with the grayscale utility), and its demo links stay on
/styleguide.

It also gains a carousel demo with navigation and indicators.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
This commit is contained in:
thepraandClaude Opus 5.5 committed 2026-10-03 12:43:07 +02:00
1 parent d71040f262
commit 483ed271e0
10 files changed
+114 -53
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Components/Styleguide/DataDisplaySection.razor
+42 -35
View File
@@ -86,17 +86,17 @@
<section class="flex flex-col gap-3">
<h3 class="text-lg font-bold">DAvatar</h3>
<div class="flex flex-wrap items-center gap-4">
<DAvatar Src="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-8 rounded-full" />
<DAvatar Src="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-12 rounded-full" />
<DAvatar Src="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-16 rounded-box" />
<DAvatar Src="https://picsum.photos/seed/av1/96/96" Alt="Avatar" Class="w-20 rounded-xl" />
<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-8 rounded-full" />
<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-12 rounded-full" />
<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-16 rounded-box" />
<DAvatar Src="imgs/styleguide/scene-1.svg" Alt="Avatar" Class="w-20 rounded-xl" />
</div>
<div class="flex flex-wrap items-center gap-4">
<DAvatar Src="https://picsum.photos/seed/av2/96/96" Alt="Squircle" Class="w-16 mask mask-squircle" />
<DAvatar Src="https://picsum.photos/seed/av2/96/96" Alt="Hexagon" Class="w-16 mask mask-hexagon" />
<DAvatar Src="https://picsum.photos/seed/av2/96/96" Alt="Triangle" Class="w-16 mask mask-triangle" />
<DAvatar Src="https://picsum.photos/seed/av3/96/96" Alt="Online" Status="DAvatarStatus.Online" Class="w-16 rounded-full" />
<DAvatar Src="https://picsum.photos/seed/av4/96/96" Alt="Offline" Status="DAvatarStatus.Offline" Class="w-16 rounded-full" />
<DAvatar Src="imgs/styleguide/scene-2.svg" Alt="Squircle" Class="w-16 mask mask-squircle" />
<DAvatar Src="imgs/styleguide/scene-2.svg" Alt="Hexagon" Class="w-16 mask mask-hexagon" />
<DAvatar Src="imgs/styleguide/scene-2.svg" Alt="Triangle" Class="w-16 mask mask-triangle" />
<DAvatar Src="imgs/styleguide/scene-3.svg" Alt="Online" Status="DAvatarStatus.Online" Class="w-16 rounded-full" />
<DAvatar Src="imgs/styleguide/scene-4.svg" Alt="Offline" Status="DAvatarStatus.Offline" Class="w-16 rounded-full" />
</div>
<div class="flex flex-wrap items-center gap-4">
<DAvatar Placeholder="true" Class="bg-neutral text-neutral-content w-24 rounded-full"><span class="text-3xl">D</span></DAvatar>
@@ -105,9 +105,9 @@
<DAvatar Placeholder="true" Class="bg-accent text-accent-content w-8 rounded-full"><span class="text-xs">UI</span></DAvatar>
</div>
<DAvatarGroup Class="-space-x-6">
<DAvatar Src="https://picsum.photos/seed/g1/96/96" Alt="One" Class="w-12" />
<DAvatar Src="https://picsum.photos/seed/g2/96/96" Alt="Two" Class="w-12" />
<DAvatar Src="https://picsum.photos/seed/g3/96/96" Alt="Three" Class="w-12" />
<DAvatar Src="imgs/styleguide/scene-3.svg" Alt="One" Class="w-12" />
<DAvatar Src="imgs/styleguide/scene-4.svg" Alt="Two" Class="w-12" />
<DAvatar Src="imgs/styleguide/scene-5.svg" Alt="Three" Class="w-12" />
<DAvatar Placeholder="true" Class="bg-neutral text-neutral-content w-12"><span>+99</span></DAvatar>
</DAvatarGroup>
</section>
@@ -148,7 +148,7 @@
<h3 class="text-lg font-bold">DCard</h3>
<div class="grid gap-4 md:grid-cols-3">
<DCard Class="bg-base-100" ActionsClass="justify-end">
<Figure><img src="https://picsum.photos/seed/card1/600/300" alt="Landscape" /></Figure>
<Figure><img src="imgs/styleguide/scene-4.svg" alt="Landscape" /></Figure>
<Heading>Default <DBadge Color="DColor.Secondary" Size="DSize.Sm">new</DBadge></Heading>
<ChildContent><p>Figure, heading, body and actions.</p></ChildContent>
<Actions><DButton Color="DColor.Primary">Buy now</DButton></Actions>
@@ -158,7 +158,7 @@
<ChildContent><p>card-border has no neo shadow.</p></ChildContent>
</DCard>
<DCard Variant="DCardVariant.Dash" Class="bg-base-100" FigureLast="true">
<Figure><img src="https://picsum.photos/seed/card2/600/300" alt="Landscape" /></Figure>
<Figure><img src="imgs/styleguide/scene-5.svg" alt="Landscape" /></Figure>
<Heading>Dash, figure last</Heading>
<ChildContent><p>The figure comes after the body.</p></ChildContent>
</DCard>
@@ -174,13 +174,13 @@
</div>
<div class="grid gap-4 md:grid-cols-2">
<DCard Side="true" Class="bg-base-100">
<Figure><img src="https://picsum.photos/seed/card3/200/300" alt="Portrait" /></Figure>
<Figure><img src="imgs/styleguide/scene-6.svg" alt="Portrait" /></Figure>
<Heading>Side</Heading>
<ChildContent><p>The figure sits beside the body.</p></ChildContent>
<Actions><DButton Size="DSize.Sm">Watch</DButton></Actions>
</DCard>
<DCard ImageFull="true" ActionsClass="justify-end">
<Figure><img src="https://picsum.photos/seed/card4/600/400" alt="Background" /></Figure>
<Figure><img src="imgs/styleguide/scene-1.svg" alt="Background" /></Figure>
<Heading>Image full</Heading>
<ChildContent><p>The figure is the background.</p></ChildContent>
<Actions><DButton Color="DColor.Primary" Size="DSize.Sm">Open</DButton></Actions>
@@ -196,22 +196,29 @@
<DCarousel Snap="snap" Class="rounded-box w-full">
@foreach (var i in Enumerable.Range(1, 6))
{
<DCarouselItem><img src="https://picsum.photos/seed/car@(i)/200/140" alt="Slide @i" /></DCarouselItem>
<DCarouselItem><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" /></DCarouselItem>
}
</DCarousel>
}
<span class="text-sm opacity-60">ShowNavigation and ShowIndicators (links to the slides, no script)</span>
<DCarousel ShowNavigation="true" ShowIndicators="true" Class="rounded-box w-full h-48">
@foreach (var i in Enumerable.Range(1, 4))
{
<DCarouselItem Class="w-full"><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
}
</DCarousel>
<span class="text-sm opacity-60">Full-width items, vertical</span>
<div class="flex gap-4">
<DCarousel Class="rounded-box h-40 w-1/2">
@foreach (var i in Enumerable.Range(1, 4))
{
<DCarouselItem Class="w-full"><img src="https://picsum.photos/seed/full@(i)/400/160" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
<DCarouselItem Class="w-full"><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
}
</DCarousel>
<DCarousel Direction="DDirection.Vertical" Class="rounded-box h-40 w-1/2">
@foreach (var i in Enumerable.Range(1, 4))
{
<DCarouselItem Class="h-full"><img src="https://picsum.photos/seed/vert@(i)/400/160" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
<DCarouselItem Class="h-full"><img src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Slide @i" class="w-full object-cover" /></DCarouselItem>
}
</DCarousel>
</div>
@@ -220,13 +227,13 @@
<section class="flex flex-col gap-3">
<h3 class="text-lg font-bold">DChat</h3>
<DChat>
<Avatar><div class="w-10 rounded-full"><img src="https://picsum.photos/seed/obi/80/80" alt="Obi-Wan" /></div></Avatar>
<Avatar><div class="w-10 rounded-full"><img src="imgs/styleguide/scene-3.svg" alt="Obi-Wan" /></div></Avatar>
<Header>Obi-Wan Kenobi <time class="text-xs opacity-50">12:45</time></Header>
<ChildContent><DChatBubble>You were the Chosen One!</DChatBubble></ChildContent>
<Footer>Delivered</Footer>
</DChat>
<DChat Placement="DChatPlacement.End">
<Avatar><div class="w-10 rounded-full"><img src="https://picsum.photos/seed/ani/80/80" alt="Anakin" /></div></Avatar>
<Avatar><div class="w-10 rounded-full"><img src="imgs/styleguide/scene-1.svg" alt="Anakin" /></div></Avatar>
<Header>Anakin <time class="text-xs opacity-50">12:46</time></Header>
<ChildContent><DChatBubble Color="DColor.Primary">I hate you!</DChatBubble></ChildContent>
<Footer>Seen at 12:46</Footer>
@@ -269,8 +276,8 @@
<section class="flex flex-col gap-3">
<h3 class="text-lg font-bold">DDiff</h3>
<DDiff Class="rounded-box" Item1Alt="Colour photo" Item2Alt="Greyscale photo">
<Item1><img src="https://picsum.photos/id/1015/800/450" alt="" /></Item1>
<Item2><img src="https://picsum.photos/id/1015/800/450?grayscale" alt="" /></Item2>
<Item1><img src="imgs/styleguide/scene-2.svg" alt="" /></Item1>
<Item2><img src="imgs/styleguide/scene-2.svg" class="grayscale" alt="" /></Item2>
</DDiff>
<DDiff AspectClass="aspect-[3/1]" Class="rounded-box" Item1Alt="Primary text" Item2Alt="Plain text">
<Item1><div class="bg-primary text-primary-content grid place-content-center text-6xl font-black">DAISY</div></Item1>
@@ -282,9 +289,9 @@
<h3 class="text-lg font-bold">DHover3D</h3>
<div class="flex flex-wrap items-center gap-6">
<DHover3D Class="my-4">
<figure class="max-w-60 rounded-2xl"><img src="https://picsum.photos/seed/h3d/480/300" alt="Tilting card" /></figure>
<figure class="max-w-60 rounded-2xl"><img src="imgs/styleguide/scene-4.svg" alt="Tilting card" /></figure>
</DHover3D>
<DHover3D Href="https://daisyui.com/components/hover-3d/" target="_blank" rel="noopener">
<DHover3D Href="styleguide">
<div class="card bg-neutral text-neutral-content w-60">
<div class="card-body"><h2 class="card-title">As a link</h2><p>The whole card is the link.</p></div>
</div>
@@ -297,9 +304,9 @@
<div class="flex flex-wrap gap-4">
<DHoverGallery Images="galleryImages" Alt="Gallery photo" Class="rounded-box max-w-60" />
<DHoverGallery Class="rounded-box max-w-40">
<img src="https://picsum.photos/seed/hgx1/300/400" alt="First" />
<img src="https://picsum.photos/seed/hgx2/300/400" alt="Second" />
<img src="https://picsum.photos/seed/hgx3/300/400" alt="Third" />
<img src="imgs/styleguide/scene-5.svg" alt="First" />
<img src="imgs/styleguide/scene-6.svg" alt="Second" />
<img src="imgs/styleguide/scene-1.svg" alt="Third" />
</DHoverGallery>
</div>
</section>
@@ -326,7 +333,7 @@
@foreach (var i in Enumerable.Range(1, 3))
{
<DListRow>
<div><img class="rounded-box size-10" src="https://picsum.photos/seed/song@(i)/80/80" alt="Cover" /></div>
<div><img class="rounded-box size-10" src="imgs/styleguide/scene-@(i % 6 + 1).svg" alt="Cover" /></div>
<div>
<div>Song @i</div>
<div class="text-xs font-semibold uppercase opacity-60">Artist @i</div>
@@ -337,7 +344,7 @@
}
<DListRow>
<div class="text-4xl font-thin tabular-nums opacity-30">04</div>
<div><img class="rounded-box size-10" src="https://picsum.photos/seed/song4/80/80" alt="Cover" /></div>
<div><img class="rounded-box size-10" src="imgs/styleguide/scene-6.svg" alt="Cover" /></div>
<div class="list-col-grow">
<div>list-col-grow</div>
<div class="text-xs font-semibold uppercase opacity-60">The third column fills the row</div>
@@ -364,7 +371,7 @@
<Desc>↗︎ 14%</Desc>
</DStat>
<DStat>
<Figure><DAvatar Src="https://picsum.photos/seed/stat/96/96" Alt="User" Status="DAvatarStatus.Online" Class="w-14 rounded-full" /></Figure>
<Figure><DAvatar Src="imgs/styleguide/scene-1.svg" Alt="User" Status="DAvatarStatus.Online" Class="w-14 rounded-full" /></Figure>
<Heading>Tasks done</Heading>
<ChildContent>86%</ChildContent>
<Desc>31 tasks remaining</Desc>
@@ -525,10 +532,10 @@
readonly string[] galleryImages =
[
"https://picsum.photos/seed/hg1/300/400",
"https://picsum.photos/seed/hg2/300/400",
"https://picsum.photos/seed/hg3/300/400",
"https://picsum.photos/seed/hg4/300/400"
"imgs/styleguide/scene-5.svg",
"imgs/styleguide/scene-6.svg",
"imgs/styleguide/scene-1.svg",
"imgs/styleguide/scene-2.svg"
];
readonly string[] rotateWords = ["ONE", "TWO", "THREE"];