Skip to content

Update Landing Page, improvements and patches #244

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gerteck merged 31 commits into from
Apr 2, 2026
Merged

Update Landing Page, improvements and patches #244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
2587351
Clear the canvas
gerteck Mar 29, 2026
90bec1f
Add browser boilerplates
gerteck Mar 30, 2026
f504823
Add comments boilers
gerteck Mar 30, 2026
7373b29
Update css
gerteck Mar 30, 2026
04b9310
Add toggles example
gerteck Mar 30, 2026
4773ac1
Add tabgroup example
gerteck Mar 31, 2026
0173a7b
Fix stateManaged Toggles bug
gerteck Mar 31, 2026
4812d00
Fix bottom border showing up on TabGroup when nav headers disabled
gerteck Mar 31, 2026
beabe7b
Add Toggle and Tabgroup examples
gerteck Mar 31, 2026
3c1ea3e
Update `no-label` attribute to `inline` for cv-toggle-control
gerteck Apr 1, 2026
760e34c
Add description field to placeholder config
gerteck Apr 1, 2026
ef7af34
Update placeholders docs
gerteck Apr 1, 2026
72bc156
Update tabs docs
gerteck Apr 1, 2026
f4d5261
Add card layout to placeholderInput
gerteck Apr 1, 2026
552b19d
Update hardcoded background color
gerteck Apr 1, 2026
af976bb
Add cv-toggle-control
gerteck Apr 1, 2026
25f7a54
Update all components page
gerteck Apr 1, 2026
ee64ff6
Add new component tag docs
gerteck Apr 1, 2026
f0866c0
Clean up tabs docs
gerteck Apr 1, 2026
ee93d86
Add pencil icon to placeholder inputs
gerteck Apr 1, 2026
8ebe1ea
Enhance placeholder component
gerteck Apr 2, 2026
f3d68cb
docs: clean up documentation for toggles
gerteck Apr 2, 2026
53a633d
docs: clean up documentation for tabs
gerteck Apr 2, 2026
c1caf46
docs: clean up documentation for placeholders
gerteck Apr 2, 2026
48035b1
Add placeholder to index
gerteck Apr 2, 2026
f6be913
Refine labels documentation
gerteck Apr 2, 2026
222d918
Add highlight section
gerteck Apr 2, 2026
d0b66dc
Adapt to dark mode
gerteck Apr 2, 2026
997ca0c
Add landing page top
gerteck Apr 2, 2026
882aa80
Move svg to /images for commonize
gerteck Apr 2, 2026
650f10d
Add logo row bottom
gerteck Apr 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
108 changes: 108 additions & 0 deletions docs/_markbind/boilerplates/browserBox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<!-- This boilerplate shows a styling browser window -->
<!-- Supports 2 variables. -->
<!-- `content` -This variable will appear in the browser window -->
<!-- `url` -The url that appears in the browser window -->

<!--
To use it, copy this:

<include src="browserBox.md" boilerplate >
<variable name="url"> https://XXX </variable>
<variable name="content">

My content here

</variable>
</include>

-->

<div class="cv-browser-single">
<div class="cv-browser-single-bar">
<div class="cv-browser-single-dots">
<div class="cv-browser-single-dot"></div>
<div class="cv-browser-single-dot"></div>
<div class="cv-browser-single-dot"></div>
</div>
<div class="cv-browser-single-url">{{ url | safe}}</div>
<div class="cv-browser-triple-menu">
<div class="cv-browser-triple-menu-dot"></div>
<div class="cv-browser-triple-menu-dot"></div>
<div class="cv-browser-triple-menu-dot"></div>
</div>
</div>
<div class="cv-browser-single-body">

{{ content | safe }}

</div>
</div>

<style>
.cv-browser-single {
border: 1px solid rgba(196,133,58,0.4);
border-radius: 10px;
overflow: hidden;
margin: 1rem 0;
font-size: 0.9rem;
}

.cv-browser-single-bar {
background: rgba(129,76,32,0.2);
border-bottom: 1px solid rgba(196,133,58,0.35);
padding: 0.5rem 0.75rem;
display: flex;
align-items: center;
gap: 0.6rem;
}

.cv-browser-single-dots {
display: flex;
gap: 5px;
flex-shrink: 0;
}

.cv-browser-single-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(196,133,58,0.3);
}

.cv-browser-single-url {
background: var(--bs-body-bg, #ffffff);
border: 1px solid rgba(196,133,58,0.2);
border-radius: 4px;
padding: 2px 10px;
font-size: 0.72rem;
color: var(--custard-muted);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.cv-browser-single-body {
background: var(--bs-body-bg, #ffffff);
padding: 1.25rem 1.5rem;
}

.cv-browser-triple-menu {
display: flex;
flex-direction: column;
gap: 3px;
flex-shrink: 0;
width: 40px;
align-items: flex-end;
justify-content: center;
opacity: 0.4;
padding-right: 4px;
}

.cv-browser-triple-menu-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--custard-light-brown);
}
</style>
158 changes: 158 additions & 0 deletions docs/_markbind/boilerplates/browserBoxSplit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
<!-- This boilerplate shows a split browser window with two tabs side by side -->
<!-- Supports 4 variables: -->
<!-- `content1` - Content for the left pane -->
<!-- `content2` - Content for the right pane -->
<!-- `url1` - URL for the left pane -->
<!-- `url2` - URL for the right pane -->


<!--
To use it, copy this:

<include src="browserBoxSplit.md" boilerplate>
<variable name="url1"> https://XXX </variable>
<variable name="url2"> https://YYY </variable>
<variable name="content1">


</variable>
<variable name="content2">


</variable>
</include>

-->


<div class="cv-browser-split">

<div class="cv-browser-split-bar">
<div class="cv-browser-split-dots">
<div class="cv-browser-split-dot"></div>
<div class="cv-browser-split-dot"></div>
<div class="cv-browser-split-dot"></div>
</div>
<div class="cv-browser-split-urls">
<div class="cv-browser-split-url">{{ url1 | safe }}</div>
<div class="cv-browser-split-url-divider"></div>
<div class="cv-browser-split-url">{{ url2 | safe }}</div>
</div>
<div class="cv-browser-split-menu">
<div class="cv-browser-split-menu-dot"></div>
<div class="cv-browser-split-menu-dot"></div>
<div class="cv-browser-split-menu-dot"></div>
</div>
</div>

<div class="cv-browser-split-panes">

<div class="cv-browser-split-pane">

{{ content1 | safe }}
</div>
<div class="cv-browser-split-pane">

{{ content2 | safe }}
</div>

<!-- split planes -->
</div>

<!-- browser split -->
</div>

<style>
.cv-browser-split {
border: 1px solid rgba(196,133,58,0.4);
border-radius: 10px;
overflow: hidden;
margin: 1rem 0;
font-size: 0.9rem;
}

.cv-browser-split-bar {
background: rgba(129,76,32,0.2);
border-bottom: 1px solid rgba(129,76,32,0.35);
padding: 0.5rem 0.75rem;
display: flex;
align-items: center;
gap: 0.6rem;
}

.cv-browser-split-dots {
display: flex;
gap: 5px;
flex-shrink: 0;
}

.cv-browser-split-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(196,133,58,0.3);
}

.cv-browser-split-urls {
display: flex;
flex: 1;
align-items: center;
gap: 0.6rem;
}

.cv-browser-split-url-divider {
width: 1px;
height: 14px;
background: rgba(196,133,58,0.4);
flex-shrink: 0;
}

.cv-browser-split-url {
background: var(--bs-body-bg, #ffffff);
border: 1px solid rgba(129,76,32,0.2);
border-radius: 4px;
padding: 2px 10px;
font-size: 0.72rem;
color: var(--custard-muted);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.cv-browser-split-menu {
display: flex;
flex-direction: column;
gap: 3px;
flex-shrink: 0;
width: 40px;
align-items: flex-end;
justify-content: center;
opacity: 0.4;
padding-right: 4px;
}

.cv-browser-split-menu-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--custard-light-brown);
}

.cv-browser-split-panes {
display: flex;
background: rgba(129,76,32,0.1);
gap: 6px;
padding: 6px;
}

.cv-browser-split-pane {
padding: 1.25rem 1.5rem;
font-size: 0.9rem;
background: var(--bs-body-bg, #ffffff);
flex: 1;
min-width: 0;
border-radius: 6px;
border: 1px solid rgba(129,76,32,0.2);
}
</style>
Loading
Loading