Initial commit
This commit is contained in:
syntaxbullet
155
src/components/Navbar.astro
Normal file
155
src/components/Navbar.astro
Normal file
@@ -0,0 +1,155 @@
|
||||
---
|
||||
const { pathname } = Astro.url;
|
||||
---
|
||||
|
||||
<div class="system-status-bar">
|
||||
<div class="status-left">
|
||||
<div class="status-item brand">SYNTAXBULLET</div>
|
||||
<a
|
||||
href="/"
|
||||
class:list={[
|
||||
"status-item",
|
||||
"nav-link",
|
||||
{ active: pathname === "/" },
|
||||
]}
|
||||
>
|
||||
HOME
|
||||
</a>
|
||||
<a
|
||||
href="/blog"
|
||||
class:list={[
|
||||
"status-item",
|
||||
"nav-link",
|
||||
{
|
||||
active:
|
||||
pathname === "/blog" || pathname.startsWith("/blog/"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
BLOG
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com"
|
||||
target="_blank"
|
||||
class="status-item nav-link"
|
||||
>
|
||||
GIT
|
||||
</a>
|
||||
</div>
|
||||
<div class="status-right">
|
||||
<div class="status-item">
|
||||
<span class="prefix">UTC:</span>
|
||||
<span id="clock">00:00:00</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span id="system-status-label">SYS:</span>
|
||||
<span id="system-status">OK</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.system-status-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
background: #000;
|
||||
border-bottom: 1px solid var(--text-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-mono);
|
||||
z-index: 9999;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.status-left,
|
||||
.status-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
padding: 0 12px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
border-right: 1px solid rgba(255, 103, 0, 0.2);
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: var(--text-color);
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-link:hover .nav-index {
|
||||
color: #000;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.status-item.active {
|
||||
background: var(--text-color);
|
||||
color: #000;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-item.brand {
|
||||
background: rgba(255, 103, 0, 0.1);
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.nav-index {
|
||||
font-size: 9px;
|
||||
opacity: 0.5;
|
||||
margin-right: 6px;
|
||||
border: 1px solid currentColor;
|
||||
padding: 0 3px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.status-item.active .nav-index {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.status-right .status-item {
|
||||
border-right: none;
|
||||
border-left: 1px solid rgba(255, 103, 0, 0.2);
|
||||
}
|
||||
|
||||
.prefix {
|
||||
opacity: 0.6;
|
||||
margin-right: 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#system-status {
|
||||
color: #0f0;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function updateClock() {
|
||||
const clock = document.getElementById("clock");
|
||||
if (clock) {
|
||||
const now = new Date();
|
||||
clock.textContent =
|
||||
now.getUTCHours().toString().padStart(2, "0") +
|
||||
":" +
|
||||
now.getUTCMinutes().toString().padStart(2, "0") +
|
||||
":" +
|
||||
now.getUTCSeconds().toString().padStart(2, "0");
|
||||
}
|
||||
}
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
</script>
|
||||
90
src/components/TuiButton.astro
Normal file
90
src/components/TuiButton.astro
Normal file
@@ -0,0 +1,90 @@
|
||||
---
|
||||
interface Props {
|
||||
id: string;
|
||||
label: string;
|
||||
shortcut?: string;
|
||||
variant?: "default" | "primary" | "subtle";
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const { id, label, shortcut, variant = "default", title = "" } = Astro.props;
|
||||
---
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class:list={["tui-button", `tui-button--${variant}`]}
|
||||
id={id}
|
||||
title={title}
|
||||
>
|
||||
{shortcut && <span class="tui-button-shortcut">{shortcut}</span>}
|
||||
<span class="tui-button-label">{label}</span>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.tui-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: 1px solid rgba(255, 103, 0, 0.4);
|
||||
color: var(--text-color);
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
padding: 3px 10px;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
transition: all 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tui-button:hover {
|
||||
opacity: 1;
|
||||
border-color: var(--text-color);
|
||||
background: rgba(255, 103, 0, 0.1);
|
||||
}
|
||||
|
||||
.tui-button:active {
|
||||
background: rgba(255, 103, 0, 0.2);
|
||||
}
|
||||
|
||||
.tui-button--primary {
|
||||
border-color: var(--text-color);
|
||||
background: rgba(255, 103, 0, 0.1);
|
||||
}
|
||||
|
||||
.tui-button--primary:hover {
|
||||
background: var(--text-color);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.tui-button--subtle {
|
||||
border-color: transparent;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.tui-button--subtle:hover {
|
||||
border-color: rgba(255, 103, 0, 0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tui-button-shortcut {
|
||||
font-size: 9px;
|
||||
opacity: 0.6;
|
||||
padding: 0 3px;
|
||||
border: 1px solid currentColor;
|
||||
line-height: 1.2;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tui-button:hover .tui-button-shortcut {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tui-button--primary:hover .tui-button-shortcut {
|
||||
border-color: #000;
|
||||
}
|
||||
|
||||
.tui-button-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
152
src/components/TuiSegment.astro
Normal file
152
src/components/TuiSegment.astro
Normal file
@@ -0,0 +1,152 @@
|
||||
---
|
||||
interface Props {
|
||||
id: string;
|
||||
label: string;
|
||||
options: string[];
|
||||
value?: string;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const { id, label, options, value = options[0], title = "" } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="tui-segment" data-segment-id={id} title={title}>
|
||||
<span class="tui-segment-label">{label}</span>
|
||||
<div class="tui-segment-options" id={id} data-value={value}>
|
||||
{
|
||||
options.map((opt, i) => (
|
||||
<button
|
||||
type="button"
|
||||
class:list={[
|
||||
"tui-segment-option",
|
||||
{ active: opt === value },
|
||||
]}
|
||||
data-value={opt}
|
||||
>
|
||||
{opt}
|
||||
</button>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tui-segment {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tui-segment-label {
|
||||
min-width: 3ch;
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tui-segment-options {
|
||||
display: flex;
|
||||
border: 1px solid rgba(255, 103, 0, 0.3);
|
||||
}
|
||||
|
||||
.tui-segment-option {
|
||||
background: none;
|
||||
border: none;
|
||||
border-right: 1px solid rgba(255, 103, 0, 0.2);
|
||||
color: var(--text-color);
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: all 0.15s;
|
||||
min-width: 3ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tui-segment-option:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.tui-segment-option:hover {
|
||||
opacity: 0.8;
|
||||
background: rgba(255, 103, 0, 0.1);
|
||||
}
|
||||
|
||||
.tui-segment-option.active {
|
||||
background: var(--text-color);
|
||||
color: #000;
|
||||
opacity: 1;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Hover the whole group */
|
||||
.tui-segment:hover .tui-segment-label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tui-segment:hover .tui-segment-options {
|
||||
border-color: var(--text-color);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function initSegments() {
|
||||
document
|
||||
.querySelectorAll(".tui-segment")
|
||||
.forEach((segmentContainer) => {
|
||||
const optionsContainer = segmentContainer.querySelector(
|
||||
".tui-segment-options",
|
||||
) as HTMLElement;
|
||||
const buttons = segmentContainer.querySelectorAll(
|
||||
".tui-segment-option",
|
||||
);
|
||||
|
||||
if (!optionsContainer) return;
|
||||
|
||||
buttons.forEach((btn) => {
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
const value = (btn as HTMLElement).dataset.value;
|
||||
|
||||
// Update active state
|
||||
buttons.forEach((b) => b.classList.remove("active"));
|
||||
btn.classList.add("active");
|
||||
|
||||
// Update data attribute
|
||||
optionsContainer.dataset.value = value;
|
||||
|
||||
// Dispatch custom event
|
||||
optionsContainer.dispatchEvent(
|
||||
new CustomEvent("segment-change", {
|
||||
detail: { value },
|
||||
bubbles: true,
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initSegments);
|
||||
initSegments();
|
||||
|
||||
// Expose update function globally
|
||||
(window as any).updateSegmentValue = function (
|
||||
segmentId: string,
|
||||
newValue: string,
|
||||
) {
|
||||
const container = document.getElementById(segmentId) as HTMLElement;
|
||||
if (container) {
|
||||
const buttons = container.querySelectorAll(".tui-segment-option");
|
||||
buttons.forEach((btn) => {
|
||||
btn.classList.toggle(
|
||||
"active",
|
||||
(btn as HTMLElement).dataset.value === newValue,
|
||||
);
|
||||
});
|
||||
container.dataset.value = newValue;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
205
src/components/TuiSlider.astro
Normal file
205
src/components/TuiSlider.astro
Normal file
@@ -0,0 +1,205 @@
|
||||
---
|
||||
interface Props {
|
||||
id: string;
|
||||
label: string;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
value?: number;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
id,
|
||||
label,
|
||||
min = 0,
|
||||
max = 5,
|
||||
step = 0.1,
|
||||
value = 1.0,
|
||||
title = "",
|
||||
} = Astro.props;
|
||||
|
||||
// Generate slider visual (12 segments for better resolution)
|
||||
const segments = 12;
|
||||
---
|
||||
|
||||
<div class="tui-slider" data-slider-id={id} title={title}>
|
||||
<span class="tui-slider-label">{label}</span>
|
||||
<div class="tui-slider-track-wrapper">
|
||||
<div class="tui-slider-visual">
|
||||
<span class="tui-slider-track" data-for={id}>
|
||||
{
|
||||
Array(segments)
|
||||
.fill(null)
|
||||
.map((_, i) => (
|
||||
<span class="tui-slider-segment" data-index={i}>
|
||||
-
|
||||
</span>
|
||||
))
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
id={id}
|
||||
class="tui-slider-input"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={value}
|
||||
/>
|
||||
</div>
|
||||
<span class="tui-slider-value" id={`val-${id}`}>{value.toFixed(1)}</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.tui-slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tui-slider-label {
|
||||
min-width: 3ch;
|
||||
font-weight: bold;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tui-slider-track-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tui-slider-visual {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.tui-slider-track {
|
||||
display: flex;
|
||||
letter-spacing: -1px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.tui-slider-segment {
|
||||
transition: color 0.1s;
|
||||
color: rgba(255, 103, 0, 0.25);
|
||||
}
|
||||
|
||||
.tui-slider-segment.filled {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.tui-slider-segment.thumb {
|
||||
color: #fff;
|
||||
text-shadow: 0 0 4px var(--text-color);
|
||||
}
|
||||
|
||||
.tui-slider-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: ew-resize;
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tui-slider-value {
|
||||
min-width: 3ch;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* Hover effect */
|
||||
.tui-slider:hover .tui-slider-label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tui-slider:hover .tui-slider-segment {
|
||||
color: rgba(255, 103, 0, 0.4);
|
||||
}
|
||||
|
||||
.tui-slider:hover .tui-slider-segment.filled {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.tui-slider:hover .tui-slider-segment.thumb {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Initialize all sliders
|
||||
function initSliders() {
|
||||
document.querySelectorAll(".tui-slider").forEach((sliderContainer) => {
|
||||
const input = sliderContainer.querySelector(
|
||||
".tui-slider-input",
|
||||
) as HTMLInputElement;
|
||||
const track = sliderContainer.querySelector(
|
||||
".tui-slider-track",
|
||||
) as HTMLElement;
|
||||
const valueDisplay = sliderContainer.querySelector(
|
||||
".tui-slider-value",
|
||||
) as HTMLElement;
|
||||
|
||||
if (!input || !track || !valueDisplay) return;
|
||||
|
||||
const segments = track.querySelectorAll(".tui-slider-segment");
|
||||
const segmentCount = segments.length;
|
||||
|
||||
function updateVisual() {
|
||||
const min = parseFloat(input.min);
|
||||
const max = parseFloat(input.max);
|
||||
const val = parseFloat(input.value);
|
||||
const percent = (val - min) / (max - min);
|
||||
const thumbIndex = Math.round(percent * (segmentCount - 1));
|
||||
|
||||
segments.forEach((seg, i) => {
|
||||
seg.classList.remove("filled", "thumb");
|
||||
if (i < thumbIndex) {
|
||||
// Filled portion uses = characters
|
||||
seg.textContent = "=";
|
||||
seg.classList.add("filled");
|
||||
} else if (i === thumbIndex) {
|
||||
// Thumb/handle is a pipe character
|
||||
seg.textContent = "|";
|
||||
seg.classList.add("thumb");
|
||||
} else {
|
||||
// Unfilled portion uses - characters
|
||||
seg.textContent = "-";
|
||||
}
|
||||
});
|
||||
|
||||
valueDisplay.textContent = val.toFixed(1);
|
||||
}
|
||||
|
||||
input.addEventListener("input", updateVisual);
|
||||
updateVisual(); // Initial render
|
||||
});
|
||||
}
|
||||
|
||||
// Run on load and expose for dynamic re-init
|
||||
document.addEventListener("DOMContentLoaded", initSliders);
|
||||
initSliders();
|
||||
|
||||
// Expose update function globally for external value changes
|
||||
(window as any).updateSliderVisual = function (
|
||||
sliderId: string,
|
||||
newValue: number,
|
||||
) {
|
||||
const input = document.getElementById(sliderId) as HTMLInputElement;
|
||||
if (input) {
|
||||
input.value = String(newValue);
|
||||
input.dispatchEvent(new Event("input"));
|
||||
}
|
||||
};
|
||||
</script>
|
||||
109
src/components/TuiToggle.astro
Normal file
109
src/components/TuiToggle.astro
Normal file
@@ -0,0 +1,109 @@
|
||||
---
|
||||
interface Props {
|
||||
id: string;
|
||||
label: string;
|
||||
checked?: boolean;
|
||||
title?: string;
|
||||
}
|
||||
|
||||
const { id, label, checked = false, title = "" } = Astro.props;
|
||||
---
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class:list={["tui-toggle", { active: checked }]}
|
||||
id={id}
|
||||
data-checked={checked ? "true" : "false"}
|
||||
title={title}
|
||||
>
|
||||
<span class="tui-toggle-label">{label}</span>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.tui-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: 1px solid rgba(255, 103, 0, 0.3);
|
||||
color: var(--text-color);
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
transition: all 0.15s;
|
||||
user-select: none;
|
||||
min-width: 3ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tui-toggle:hover {
|
||||
opacity: 0.8;
|
||||
background: rgba(255, 103, 0, 0.1);
|
||||
}
|
||||
|
||||
.tui-toggle.active {
|
||||
background: var(--text-color);
|
||||
color: #000;
|
||||
opacity: 1;
|
||||
font-weight: bold;
|
||||
border-color: var(--text-color);
|
||||
}
|
||||
|
||||
.tui-toggle-label {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Use a WeakSet to track initialized toggles (prevents duplicate listeners)
|
||||
const initializedToggles = new WeakSet<Element>();
|
||||
|
||||
function initToggles() {
|
||||
document.querySelectorAll(".tui-toggle").forEach((toggle) => {
|
||||
// Skip if already initialized
|
||||
if (initializedToggles.has(toggle)) return;
|
||||
initializedToggles.add(toggle);
|
||||
|
||||
const btn = toggle as HTMLButtonElement;
|
||||
|
||||
btn.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const isChecked = this.dataset.checked === "true";
|
||||
const newState = !isChecked;
|
||||
|
||||
// Update visual state
|
||||
this.dataset.checked = String(newState);
|
||||
this.classList.toggle("active", newState);
|
||||
|
||||
// Dispatch custom event that bubbles
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("toggle-change", {
|
||||
detail: { checked: newState },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize immediately and on DOMContentLoaded
|
||||
initToggles();
|
||||
document.addEventListener("DOMContentLoaded", initToggles);
|
||||
|
||||
// Expose update function globally
|
||||
(window as any).updateToggleState = function (
|
||||
toggleId: string,
|
||||
newState: boolean,
|
||||
) {
|
||||
const btn = document.getElementById(toggleId) as HTMLButtonElement;
|
||||
if (btn) {
|
||||
btn.dataset.checked = String(newState);
|
||||
btn.classList.toggle("active", newState);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user