Fork of Chiri for Astro for my blog
docs: fix MDX example
+32
-2
+32
-2
src/components/examples/Tag.astro
+32
-2
src/components/examples/Tag.astro
···
97
97
98
98
setTimeout(() => {
99
99
tagDisplay?.classList.add('active')
100
-
if (tagText) tagText.textContent = tagValue
100
+
if (tagText) tagText.textContent = truncateText(tagValue)
101
101
}, 300)
102
102
}
103
103
···
128
128
}
129
129
}
130
130
131
+
// Truncate text to max 24 characters
132
+
function truncateText(text: string, maxLength: number = 24): string {
133
+
if (text.length <= maxLength) {
134
+
return text
135
+
}
136
+
return text.substring(0, maxLength) + '...'
137
+
}
138
+
131
139
addButton?.addEventListener('click', switchToInput)
132
140
133
141
tagInput?.addEventListener('input', (e) => {
134
142
const target = e.target as HTMLInputElement
135
-
tagValue = target.value
143
+
const inputValue = target.value
144
+
145
+
// Limit input to 24 characters
146
+
if (inputValue.length > 24) {
147
+
target.value = inputValue.substring(0, 24)
148
+
tagValue = inputValue // Keep original value for display truncation
149
+
} else {
150
+
tagValue = inputValue
151
+
}
152
+
136
153
updateConfirmButton()
137
154
})
138
155
···
182
199
gap: 0.5rem;
183
200
position: relative;
184
201
width: 100%;
202
+
min-height: 40px;
185
203
}
186
204
187
205
.add-button {
···
205
223
z-index: 1;
206
224
opacity: 1;
207
225
visibility: visible;
226
+
overflow: visible;
227
+
will-change: transform;
228
+
-webkit-transform: translate(-50%, -50%) scale(1);
229
+
box-sizing: border-box;
230
+
padding: 0;
231
+
margin: 0;
208
232
}
209
233
210
234
.add-button.hidden {
···
224
248
fill: currentColor;
225
249
width: 1rem;
226
250
height: 1rem;
251
+
position: relative;
252
+
display: block;
253
+
transform: translateZ(0);
227
254
}
228
255
229
256
.add-button:hover {
230
257
opacity: 0.9;
258
+
transform: translate(-50%, -50%) scale(1);
259
+
-webkit-transform: translate(-50%, -50%) scale(1);
231
260
}
232
261
233
262
.input-state {
···
369
398
opacity: 0;
370
399
pointer-events: none;
371
400
transition: all 0.25s ease-out;
401
+
will-change: transform, opacity;
372
402
}
373
403
374
404
.tag-display > * {