forked from
quillmatiq.com/augment
Fork of Chiri for Astro for my blog
fix: patch MDX example
+122
-103
+21
-16
src/components/examples/CounterButton.astro
+21
-16
src/components/examples/CounterButton.astro
···
6
6
</div>
7
7
</div>
8
8
9
+
<script is:inline>
10
+
let count = 0
11
+
12
+
function setupCounter() {
13
+
const button = document.getElementById('counter-btn')
14
+
const valueSpan = document.getElementById('counter-value')
15
+
16
+
if (button && valueSpan) {
17
+
valueSpan.textContent = count.toString()
18
+
button.onclick = function () {
19
+
count++
20
+
valueSpan.textContent = count.toString()
21
+
}
22
+
}
23
+
}
24
+
25
+
setupCounter()
26
+
27
+
document.addEventListener('astro:page-load', setupCounter)
28
+
</script>
29
+
9
30
<style>
10
31
.counter-card {
11
32
border: 1px solid var(--border);
···
16
37
justify-content: center;
17
38
border-radius: 10px;
18
39
}
19
-
20
40
.counter-container {
21
41
display: flex;
22
42
justify-content: center;
23
43
align-items: center;
24
44
}
25
-
26
45
.counter-button {
27
46
background-color: var(--text-primary);
28
47
color: var(--bg);
···
35
54
height: 44px;
36
55
transition: all 0.15s ease-in-out;
37
56
}
38
-
39
57
.counter-button:hover {
40
58
opacity: 0.9;
41
59
}
42
60
</style>
43
-
44
-
<script>
45
-
let count = 0
46
-
const button = document.getElementById('counter-btn')
47
-
const valueSpan = document.getElementById('counter-value')
48
-
49
-
if (button && valueSpan) {
50
-
button.addEventListener('click', () => {
51
-
count++
52
-
valueSpan.textContent = count.toString()
53
-
})
54
-
}
55
-
</script>
+101
-87
src/components/examples/Tag.astro
+101
-87
src/components/examples/Tag.astro
···
65
65
</div>
66
66
</div>
67
67
68
-
<script>
69
-
let currentState = 'add' // 'add', 'input', 'display'
70
-
let tagValue = ''
68
+
<script is:inline>
69
+
function setupTag() {
70
+
let currentState = 'add' // 'add', 'input', 'display'
71
+
let tagValue = localStorage.getItem('tagValue') || ''
71
72
72
-
const addButton = document.getElementById('add-button') as HTMLButtonElement
73
-
const inputState = document.getElementById('input-state') as HTMLDivElement
74
-
const tagDisplay = document.getElementById('tag-display') as HTMLDivElement
75
-
const tagInput = document.getElementById('tag-input') as HTMLInputElement
76
-
const confirmButton = document.getElementById('confirm-button') as HTMLButtonElement
77
-
const cancelButton = document.getElementById('cancel-button') as HTMLButtonElement
78
-
const deleteButton = document.getElementById('delete-button') as HTMLButtonElement
79
-
const tagText = document.getElementById('tag-text') as HTMLSpanElement
73
+
const addButton = document.getElementById('add-button')
74
+
const inputState = document.getElementById('input-state')
75
+
const tagDisplay = document.getElementById('tag-display')
76
+
const tagInput = document.getElementById('tag-input')
77
+
const confirmButton = document.getElementById('confirm-button')
78
+
const cancelButton = document.getElementById('cancel-button')
79
+
const deleteButton = document.getElementById('delete-button')
80
+
const tagText = document.getElementById('tag-text')
80
81
81
-
// Switch to input state
82
-
function switchToInput() {
83
-
currentState = 'input'
84
-
addButton?.classList.add('hidden')
85
-
86
-
setTimeout(() => {
87
-
inputState?.classList.add('active')
88
-
tagInput?.focus()
89
-
}, 100)
90
-
}
91
-
92
-
// Switch to display state
93
-
function switchToDisplay() {
94
-
currentState = 'display'
95
-
96
-
inputState?.classList.remove('active')
97
-
98
-
setTimeout(() => {
99
-
tagDisplay?.classList.add('active')
100
-
if (tagText) tagText.textContent = truncateText(tagValue)
101
-
}, 300)
102
-
}
103
-
104
-
// Return to add state
105
-
function switchToAdd() {
106
-
if (currentState === 'display') {
107
-
tagDisplay?.classList.remove('active')
108
-
} else if (currentState === 'input') {
109
-
inputState?.classList.remove('active')
82
+
if (tagValue) {
83
+
addButton.classList.add('hidden')
84
+
inputState.classList.remove('active')
85
+
tagDisplay.classList.add('active')
86
+
tagText.textContent = truncateText(tagValue)
87
+
currentState = 'display'
88
+
} else {
89
+
addButton.classList.remove('hidden')
90
+
inputState.classList.remove('active')
91
+
tagDisplay.classList.remove('active')
92
+
tagInput.value = ''
93
+
currentState = 'add'
110
94
}
111
95
112
-
currentState = 'add'
96
+
// Switch to input state
97
+
function switchToInput() {
98
+
currentState = 'input'
99
+
addButton.classList.add('hidden')
100
+
setTimeout(() => {
101
+
inputState.classList.add('active')
102
+
tagInput.focus()
103
+
}, 100)
104
+
}
113
105
114
-
setTimeout(() => {
115
-
addButton?.classList.remove('hidden')
116
-
tagValue = ''
117
-
if (tagInput) tagInput.value = ''
118
-
updateConfirmButton()
119
-
}, 250)
120
-
}
106
+
// Switch to display state
107
+
function switchToDisplay() {
108
+
currentState = 'display'
109
+
inputState.classList.remove('active')
110
+
setTimeout(() => {
111
+
tagDisplay.classList.add('active')
112
+
tagText.textContent = truncateText(tagValue)
113
+
// Store to localStorage
114
+
localStorage.setItem('tagValue', tagValue)
115
+
}, 300)
116
+
}
121
117
122
-
// Update confirm button state
123
-
function updateConfirmButton() {
124
-
if (tagInput?.value.trim()) {
125
-
confirmButton?.classList.remove('disabled')
126
-
} else {
127
-
confirmButton?.classList.add('disabled')
118
+
// Return to add state
119
+
function switchToAdd() {
120
+
if (currentState === 'display') {
121
+
tagDisplay.classList.remove('active')
122
+
} else if (currentState === 'input') {
123
+
inputState.classList.remove('active')
124
+
}
125
+
currentState = 'add'
126
+
setTimeout(() => {
127
+
addButton.classList.remove('hidden')
128
+
tagValue = ''
129
+
tagInput.value = ''
130
+
localStorage.removeItem('tagValue')
131
+
updateConfirmButton()
132
+
}, 250)
128
133
}
129
-
}
130
134
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
+
// Update confirm button state
136
+
function updateConfirmButton() {
137
+
if (tagInput.value.trim()) {
138
+
confirmButton.classList.remove('disabled')
139
+
} else {
140
+
confirmButton.classList.add('disabled')
141
+
}
135
142
}
136
-
return text.substring(0, maxLength) + '...'
137
-
}
138
143
139
-
addButton?.addEventListener('click', switchToInput)
144
+
// Truncate text to max 24 characters
145
+
function truncateText(text, maxLength = 24) {
146
+
if (text.length <= maxLength) {
147
+
return text
148
+
}
149
+
return text.substring(0, maxLength) + '...'
150
+
}
140
151
141
-
tagInput?.addEventListener('input', (e) => {
142
-
const target = e.target as HTMLInputElement
143
-
const inputValue = target.value
152
+
// Bind events
153
+
addButton.onclick = switchToInput
144
154
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
155
+
tagInput.oninput = function (e) {
156
+
const inputValue = e.target.value
157
+
if (inputValue.length > 24) {
158
+
e.target.value = inputValue.substring(0, 24)
159
+
tagValue = inputValue
160
+
} else {
161
+
tagValue = inputValue
162
+
}
163
+
updateConfirmButton()
151
164
}
152
165
153
-
updateConfirmButton()
154
-
})
155
-
156
-
tagInput?.addEventListener('keydown', (e) => {
157
-
if (e.key === 'Enter' && tagValue.trim()) {
158
-
switchToDisplay()
159
-
} else if (e.key === 'Escape') {
160
-
switchToAdd()
166
+
tagInput.onkeydown = function (e) {
167
+
if (e.key === 'Enter' && tagValue.trim()) {
168
+
switchToDisplay()
169
+
} else if (e.key === 'Escape') {
170
+
switchToAdd()
171
+
}
161
172
}
162
-
})
163
173
164
-
confirmButton?.addEventListener('click', () => {
165
-
if (tagValue.trim()) {
166
-
switchToDisplay()
174
+
confirmButton.onclick = function () {
175
+
if (tagValue.trim()) {
176
+
switchToDisplay()
177
+
}
167
178
}
168
-
})
179
+
180
+
cancelButton.onclick = switchToAdd
181
+
deleteButton.onclick = switchToAdd
182
+
}
169
183
170
-
cancelButton?.addEventListener('click', switchToAdd)
184
+
setupTag()
171
185
172
-
deleteButton?.addEventListener('click', switchToAdd)
186
+
document.addEventListener('astro:page-load', setupTag)
173
187
</script>
174
188
175
189
<style>
···
254
268
}
255
269
256
270
.add-button:hover {
257
-
opacity: 0.9;
271
+
opacity: 0.8;
258
272
transform: translate(-50%, -50%) scale(1);
259
273
-webkit-transform: translate(-50%, -50%) scale(1);
260
274
}