dnrops
/
datastar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge 53257ce0d2 into 23da089235

This commit is contained in:
Nishan Singh 2025-04-04 06:10:44 -05:00 committed by GitHub
parent 23da089235 53257ce0d2
commit 6c2c60d849
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 59 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
site/shared.templ
View File

@ -282,7 +282,7 @@ templ sidebarPageContents(sidebarGroups []*SidebarGroup, current *SidebarLink, c
<aside class="flex-col hidden gap-4 px-4 py-8 overflow-y-auto lg:flex min-w-80 bg-base-300 lg:visible">
@SidebarContents(sidebarGroups, current)
</aside>
<div class="flex flex-col w-full gap-16 p-4 lg:items-center lg:p-16">
<div class="flex flex-col w-full gap-16 p-4 lg:items-center">
@SidebarPrevNextLinks(sidebarGroups, current)
<article
class="flex flex-col flex-1 p-1 prose prose-primary lg:prose-lg prose-a:link-primary max-w-none lg:max-w-prose w-full"
@ -390,7 +390,7 @@ templ sseIndicator(signalName string) {
templ headerDropdownMenu(title string) {
<div class="dropdown dropdown-hover">
<div tabindex="0" role="button" class="font-bold uppercase link-hover">{ title }</div>
<ul tabindex="0" class="dropdown-content menu bg-base-300 rounded-box z-[1] w-52 p-2 shadow">
<ul tabindex="0" class="dropdown-content menu bg-base-300 rounded-box z-[1] w-52 p-2 shadow right-0">
{ children... }
</ul>
</div>

4
site/src/css/site.css
View File

@ -16,6 +16,10 @@ pre code {
@apply text-base !important;
}
pre code span.cl {
padding-inline-end: 12px;
}
.output {
@apply input input-bordered bg-transparent flex flex-grow items-center max-w-64 overflow-hidden;
}

104
site/static/md/guide/getting_started.md
View File

@ -74,15 +74,15 @@ To see this in action, we can use the [`data-text`](/reference/attribute_plugins
</div>
```
<div class="flex items-start justify-between p-8 alert">
<div class="flex items-start justify-between p-8 alert max-md:flex-col">
<div class="flex flex-col gap-4">
<div class="flex items-center">
<div class="w-20">Input:</div>
<input data-bind-input1 class="input input-bordered" />
<div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
<input data-bind-input1 class="input input-bordered w-full" />
</div>
<div class="flex items-center">
<div class="w-20">Output:</div>
<div data-text="$input1" class="output"></div>
<div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
<div data-text="$input1" class="output w-full"></div>
</div>
</div>
</div>
@ -100,15 +100,15 @@ The value of the `data-text` attribute is a [Datastar expression](/guide/datasta
</div>
```
<div class="flex items-start justify-between p-8 alert">
<div class="flex items-start justify-between p-8 alert max-md:flex-col">
<div class="flex flex-col gap-4">
<div class="flex items-center">
<div class="w-20">Input:</div>
<input data-bind-input2 class="input input-bordered" />
<div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
<input data-bind-input2 class="input input-bordered w-full" />
</div>
<div class="flex items-center">
<div class="w-20">Output:</div>
<div data-text="$input2.toUpperCase()" class="output"></div>
<div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
<div data-text="$input2.toUpperCase()" class="output w-full"></div>
</div>
</div>
</div>
@ -128,15 +128,15 @@ The [`data-computed`](/reference/attribute_plugins#data-computed) attribute crea
This results in the `$repeated` signal's value always being equal to the value of the `$input` signal repeated twice. Computed signals are useful for memoizing expressions containing other signals.
<div class="flex items-start justify-between p-8 alert">
<div class="flex items-start justify-between p-8 alert max-md:flex-col">
<div class="flex flex-col gap-4">
<div class="flex items-center">
<div class="w-20">Input:</div>
<input data-bind-input3 class="input input-bordered" />
<div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
<input data-bind-input3 class="input input-bordered w-full" />
</div>
<div class="flex items-center">
<div class="w-20">Output:</div>
<div data-computed-repeated="$input3.repeat(2)" data-text="$repeated" class="output"></div>
<div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
<div data-computed-repeated="$input3.repeat(2)" data-text="$repeated" class="output w-full"></div>
</div>
</div>
</div>
@ -152,15 +152,15 @@ The [`data-show`](/reference/attribute_plugins#data-show) attribute can be used
This results in the button being visible only when the input is _not_ an empty string (this could also be written as `!input`).
<div class="flex items-start justify-between p-8 alert">
<div class="flex items-start justify-between p-8 alert max-md:flex-col">
<div class="flex flex-col gap-4">
<div class="flex items-center">
<div class="w-20">Input:</div>
<input data-bind-input4 class="input input-bordered" />
<div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
<input data-bind-input4 class="input input-bordered w-full" />
</div>
<div class="flex items-center">
<div class="w-20">Output:</div>
<div data-text="$input4" class="output"></div>
<div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
<div data-text="$input4" class="output w-full"></div>
</div>
</div>
<button data-show="$input4 != ''" class="btn btn-primary">
@ -179,18 +179,18 @@ The [`data-class`](/reference/attribute_plugins#data-class) attribute allows us
If the expression evaluates to `true`, the `hidden` class is added to the element; otherwise, it is removed.
<div class="flex items-start justify-between p-8 alert">
<div class="flex items-start justify-between p-8 alert max-md:flex-col">
<div class="flex flex-col gap-4">
<div class="flex items-center">
<div class="w-20">Input:</div>
<input data-bind-input5 class="input input-bordered" />
<div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
<input data-bind-input5 class="input input-bordered w-full" />
</div>
<div class="flex items-center">
<div class="w-20">Output:</div>
<div data-text="$input5" class="output"></div>
<div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
<div data-text="$input5" class="output w-full"></div>
</div>
</div>
<button data-class-hidden="$input5 == ''" class="btn btn-primary">
<button data-class-hidden="$input5 == ''" class="btn btn-primary max-sm:self-end">
Save
</button>
</div>
@ -212,18 +212,18 @@ The [`data-attr`](/reference/attribute_plugins#data-attr) attribute can be used
This results in a `disabled` attribute being given the value `true` whenever the input is an empty string.
<div class="flex items-start justify-between p-8 alert" data-signals-input6="''">
<div class="flex items-start justify-between p-8 alert max-md:flex-col" data-signals-input6="''">
<div class="flex flex-col gap-4">
<div class="flex items-center">
<div class="w-20">Input:</div>
<input data-bind-input6 class="input input-bordered" />
<div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Input:</div>
<input data-bind-input6 class="input input-bordered w-full" />
</div>
<div class="flex items-center">
<div class="w-20">Output:</div>
<div data-text="$input6" class="output"></div>
<div class="flex items-center gap-x-6 max-sm:flex-col gap-[8px]">
<div class="w-20 max-sm:self-start max-sm:w-auto">Output:</div>
<div data-text="$input6" class="output w-full"></div>
</div>
</div>
<button data-attr-disabled="$input6 == ''" class="btn btn-primary">
<button data-attr-disabled="$input6 == ''" class="btn btn-primary max-sm:self-end">
Save
</button>
</div>
@ -269,18 +269,18 @@ The [`data-on`](/reference/attribute_plugins#data-on) attribute can be used to a
This results in the `$input` signal's value being set to an empty string whenever the button element is clicked. This can be used with any valid event name such as `data-on-keydown`, `data-on-mouseover`, etc.
<div class="flex items-start justify-between p-8 alert" >
<div class="flex items-start justify-between p-8 alert max-md:flex-col" >
<div class="flex flex-col gap-4">
<div class="flex items-center">
<div class="w-20">Input:</div>
<input data-bind-input7 class="input input-bordered" />
<div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
<div class="max-sm:self-start max-sm:w-auto">Input:</div>
<input data-bind-input7 class="input input-bordered w-full" />
</div>
<div class="flex items-center">
<div class="w-20">Output:</div>
<div data-text="$input7" class="output"></div>
<div class="flex items-center gap-6px max-sm:flex-col gap-[8px]">
<div class="max-sm:self-start max-sm:w-auto">Output:</div>
<div data-text="$input7" class="output w-full"></div>
</div>
</div>
<button data-on-click="$input7 = ''" class="btn btn-secondary">
<button data-on-click="$input7 = ''" class="btn btn-secondary max-md:self-end">
Reset
</button>
</div>