Skip to content

Commit d37d153

Browse files
ignatiusmbignatiusmb
authored
breaking: rename data-aubade="block" to "codeblock" (#256)
1 parent 10046a9 commit d37d153

File tree

3 files changed

+87
-82
lines changed

3 files changed

+87
-82
lines changed

‎workspace/aubade/src/browser/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ export function hydrate(signal?: any) {
22
signal; // listen to signal changes and re-run the function if needed
33
return (node: HTMLElement) => {
44
const active: Array<() => void> = [];
5-
for (const block of node.querySelectorAll('[data-aubade="block"]')) {
5+
for (const block of node.querySelectorAll('[data-aubade="codeblock"]')) {
66
const actions = block.querySelectorAll('[data-aubade-toolbar]');
7-
const source = block.querySelector('[data-aubade="pre"]');
7+
const source = block.querySelector('pre');
88
if (!actions.length || !source) continue;
99

1010
for (const item of actions) {

‎workspace/aubade/src/palette/index.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,15 @@ export const codeblock: Resolver<'block:code'> = ({ token, sanitize }) => {
5858
});
5959

6060
return [
61-
'<div data-aubade="block">',
62-
`<header data-aubade="header" ${attrs.join(' ')}>`,
61+
'<div data-aubade="codeblock">',
62+
`<header data-aubade-codeblock="header" ${attrs.join(' ')}>`,
6363
dataset.file ? `<span>${dataset.file}</span>` : '',
64-
'<div data-aubade="toolbar">',
64+
'<div data-aubade-codeblock="toolbar">',
6565
`<button data-aubade-toolbar="copy" data-aubade-tooltip="Copy"></button>`,
6666
`<button data-aubade-toolbar="list" data-aubade-tooltip="Toggle\nNumbering"></button>`,
6767
'</div>',
6868
'</header>',
69-
`<pre data-aubade="pre">${highlight(token.meta.code, dataset)}</pre>`,
69+
`<pre>${highlight(token.meta.code, dataset)}</pre>`,
7070
'</div>',
7171
].join('\n');
7272
};

‎workspace/aubade/styles/code.css‎

Lines changed: 81 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,18 @@
1717
--aubade-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);
1818
}
1919

20-
[data-aubade='block'],
21-
[data-aubade='header'],
22-
[data-aubade='pre'] {
20+
[data-aubade='codeblock'],
21+
[data-aubade='codeblock'] pre,
22+
[data-aubade-codeblock='header'] {
2323
width: 100%;
2424
position: relative;
2525
tab-size: var(--aubade-tab-size);
2626
}
27-
[data-aubade='block'] {
27+
[data-aubade='codeblock'] {
2828
white-space: normal;
2929
margin-top: 1rem;
3030
}
31-
[data-aubade='pre'] {
31+
[data-aubade='codeblock'] pre {
3232
white-space: pre;
3333
}
3434
code {
@@ -40,7 +40,7 @@ code {
4040

4141
/* ---- <div data-aubade="pre"> ---- */
4242

43-
[data-aubade='pre'] {
43+
[data-aubade='codeblock'] pre {
4444
overflow-x: auto;
4545
overflow-y: hidden;
4646
padding: 1.8rem 1rem 1rem 1.6rem;
@@ -51,23 +51,23 @@ code {
5151
font-family: var(--font-mono);
5252
font-variation-settings: var(--font-mono-variation);
5353
}
54-
[data-aubade='pre'] code {
54+
[data-aubade='codeblock'] pre code {
5555
top: 0;
5656
padding: 0;
5757
margin: 0;
5858
border-radius: 0;
5959
white-space: pre;
6060
}
61-
[data-aubade='pre'],
62-
[data-aubade='pre'] code {
61+
[data-aubade='codeblock'] pre,
62+
[data-aubade='codeblock'] pre code {
6363
line-height: 1.5;
6464
font-size: 0.85rem;
6565
}
6666

67-
[data-aubade='pre'].numbered {
67+
[data-aubade='codeblock'] pre.numbered {
6868
padding-left: 0.6rem;
6969
}
70-
[data-aubade='pre'].numbered code::before {
70+
[data-aubade='codeblock'] pre.numbered code::before {
7171
content: attr(data-line);
7272
max-width: 2rem;
7373
width: 100%;
@@ -79,20 +79,22 @@ code {
7979
}
8080

8181
/* header check */
82-
[data-aubade='header'][data-file='empty'] + [data-aubade='pre'] {
82+
[data-aubade-codeblock='header'][data-file='empty'] + [data-aubade='codeblock'] pre {
8383
padding-top: 2rem;
8484
}
85-
[data-aubade='header'][data-language='']:not([data-file='empty']) + [data-aubade='pre'] {
85+
[data-aubade-codeblock='header'][data-language='']:not([data-file='empty'])
86+
+ [data-aubade='codeblock']
87+
pre {
8688
padding-top: 1rem;
8789
}
88-
[data-aubade='header'][data-file='empty'] + [data-aubade='pre'] {
90+
[data-aubade-codeblock='header'][data-file='empty'] + [data-aubade='codeblock'] pre {
8991
border-top-right-radius: var(--aubade-rounding);
9092
border-top-left-radius: var(--aubade-rounding);
9193
}
9294

9395
/* ---- <header data-aubade="header"> ---- */
9496

95-
[data-aubade='header'] {
97+
[data-aubade-codeblock='header'] {
9698
padding: 0.5rem 1rem;
9799
margin: 0;
98100
border-top-right-radius: var(--aubade-rounding);
@@ -104,26 +106,26 @@ code {
104106
font-size: clamp(0.8rem, 2vw, 0.95rem);
105107
font-variation-settings: var(--font-mono-variation);
106108
}
107-
[data-aubade='header'][data-file='empty'] {
109+
[data-aubade-codeblock='header'][data-file='empty'] {
108110
padding: 0;
109111
background: transparent;
110112
}
111-
[data-aubade='header'][data-file='empty']::after {
113+
[data-aubade-codeblock='header'][data-file='empty']::after {
112114
top: 0;
113115
border-top-right-radius: var(--aubade-rounding);
114116
}
115-
[data-aubade='header']::after,
116-
[data-aubade='header']::before {
117+
[data-aubade-codeblock='header']::after,
118+
[data-aubade-codeblock='header']::before {
117119
font-family: var(--font-sans);
118120
font-size: 0.75rem;
119121
}
120-
[data-aubade='header'] > span {
122+
[data-aubade-codeblock='header'] > span {
121123
overflow: hidden;
122124
width: 100%;
123125
display: inline-flex;
124126
}
125127
/* language coloured line */
126-
[data-aubade='header']::before {
128+
[data-aubade-codeblock='header']::before {
127129
content: '';
128130
z-index: 1;
129131
height: 0.4rem;
@@ -135,32 +137,33 @@ code {
135137
transition: var(--aubade-transition);
136138
transition-timing-function: var(--aubade-function);
137139
}
138-
[data-aubade='header'][data-file='empty']::before {
140+
[data-aubade-codeblock='header'][data-file='empty']::before {
139141
height: 0.6rem;
140142
top: 0;
141143
border-top-left-radius: var(--aubade-rounding);
142144
border-top-right-radius: var(--aubade-rounding);
143145
}
144146

145-
[data-aubade='block']:focus-within > [data-aubade='header']::before,
146-
[data-aubade='block']:hover > [data-aubade='header']::before {
147+
[data-aubade='codeblock']:focus-within > [data-aubade-codeblock='header']::before,
148+
[data-aubade='codeblock']:hover > [data-aubade-codeblock='header']::before {
147149
right: var(--aubade-bounce);
148150
transition: var(--aubade-transition);
149151
}
150-
[data-aubade='block']:focus-within
151-
> [data-aubade='header'][data-file='empty'][data-language='']::before,
152-
[data-aubade='block']:hover > [data-aubade='header'][data-file='empty'][data-language='']::before {
152+
[data-aubade='codeblock']:focus-within
153+
> [data-aubade-codeblock='header'][data-file='empty'][data-language='']::before,
154+
[data-aubade='codeblock']:hover
155+
> [data-aubade-codeblock='header'][data-file='empty'][data-language='']::before {
153156
right: 0;
154157
}
155158

156159
/* ---- data-language ---- */
157160

158-
[data-aubade='header'] {
161+
[data-aubade-codeblock='header'] {
159162
--aubade-header-dark: oklch(0.212 0.007 298);
160163
--aubade-header-light: oklch(0.942 0.007 298);
161164
}
162165

163-
[data-aubade='header']::after {
166+
[data-aubade-codeblock='header']::after {
164167
z-index: 1;
165168
position: absolute;
166169
top: 100%;
@@ -174,102 +177,102 @@ code {
174177
transition: var(--aubade-transition);
175178
transition-timing-function: var(--aubade-function);
176179
}
177-
[data-aubade='header'][data-language]::after {
180+
[data-aubade-codeblock='header'][data-language]::after {
178181
content: attr(data-language);
179182
}
180-
[data-aubade='block']:focus-within > [data-aubade='header']::after,
181-
[data-aubade='block']:hover > [data-aubade='header']::after {
183+
[data-aubade='codeblock']:focus-within > [data-aubade-codeblock='header']::after,
184+
[data-aubade='codeblock']:hover > [data-aubade-codeblock='header']::after {
182185
right: var(--aubade-bounce);
183186
border-bottom-right-radius: var(--aubade-rounding);
184187
border-bottom-left-radius: var(--aubade-rounding);
185188
transition: var(--aubade-transition);
186189
}
187-
[data-aubade='header'][data-language='']:not([data-file='empty'])::after,
188-
[data-aubade='header'][data-language='']:not([data-file='empty'])::before {
190+
[data-aubade-codeblock='header'][data-language='']:not([data-file='empty'])::after,
191+
[data-aubade-codeblock='header'][data-language='']:not([data-file='empty'])::before {
189192
content: none;
190193
}
191-
[data-aubade='header'][data-language='']::before {
194+
[data-aubade-codeblock='header'][data-language='']::before {
192195
background: var(--aubade-header);
193196
}
194197

195198
/* Language Styles */
196-
[data-aubade='header'][data-language='bash']::after,
197-
[data-aubade='header'][data-language='bash']::before {
199+
[data-aubade-codeblock='header'][data-language='bash']::after,
200+
[data-aubade-codeblock='header'][data-language='bash']::before {
198201
background: #363377;
199202
color: #a2a0d6;
200203
}
201-
[data-aubade='header'][data-language='css']::after,
202-
[data-aubade='header'][data-language='css']::before {
204+
[data-aubade-codeblock='header'][data-language='css']::after,
205+
[data-aubade-codeblock='header'][data-language='css']::before {
203206
background: #264de4;
204207
color: var(--aubade-header-light);
205208
}
206-
[data-aubade='header'][data-language='htaccess']::after,
207-
[data-aubade='header'][data-language='htaccess']::before {
209+
[data-aubade-codeblock='header'][data-language='htaccess']::after,
210+
[data-aubade-codeblock='header'][data-language='htaccess']::before {
208211
background: #8bc34a;
209212
color: var(--aubade-header-dark);
210213
}
211-
[data-aubade='header'][data-language='html']::after,
212-
[data-aubade='header'][data-language='html']::before {
214+
[data-aubade-codeblock='header'][data-language='html']::after,
215+
[data-aubade-codeblock='header'][data-language='html']::before {
213216
background: #e34f26;
214217
color: var(--aubade-header-light);
215218
}
216-
[data-aubade='header'][data-language='java']::after,
217-
[data-aubade='header'][data-language='java']::before {
219+
[data-aubade-codeblock='header'][data-language='java']::after,
220+
[data-aubade-codeblock='header'][data-language='java']::before {
218221
background: #f89820;
219222
color: var(--aubade-header-light);
220223
}
221-
[data-aubade='header'][data-language='javascript']::after,
222-
[data-aubade='header'][data-language='javascript']::before,
223-
[data-aubade='header'][data-language='json']::after,
224-
[data-aubade='header'][data-language='json']::before,
225-
[data-aubade='header'][data-language='js']::after,
226-
[data-aubade='header'][data-language='js']::before {
224+
[data-aubade-codeblock='header'][data-language='javascript']::after,
225+
[data-aubade-codeblock='header'][data-language='javascript']::before,
226+
[data-aubade-codeblock='header'][data-language='json']::after,
227+
[data-aubade-codeblock='header'][data-language='json']::before,
228+
[data-aubade-codeblock='header'][data-language='js']::after,
229+
[data-aubade-codeblock='header'][data-language='js']::before {
227230
background: #f0db4f;
228231
color: var(--aubade-header-dark);
229232
}
230-
[data-aubade='header'][data-language='markdown']::after,
231-
[data-aubade='header'][data-language='markdown']::before,
232-
[data-aubade='header'][data-language='md']::after,
233-
[data-aubade='header'][data-language='md']::before {
233+
[data-aubade-codeblock='header'][data-language='markdown']::after,
234+
[data-aubade-codeblock='header'][data-language='markdown']::before,
235+
[data-aubade-codeblock='header'][data-language='md']::after,
236+
[data-aubade-codeblock='header'][data-language='md']::before {
234237
background: #083fa1;
235238
color: var(--aubade-header-light);
236239
}
237-
[data-aubade='header'][data-language='python']::after,
238-
[data-aubade='header'][data-language='python']::before {
240+
[data-aubade-codeblock='header'][data-language='python']::after,
241+
[data-aubade-codeblock='header'][data-language='python']::before {
239242
background: #dddddd;
240243
color: var(--aubade-header-dark);
241244
}
242-
[data-aubade='header'][data-language='shell']::after,
243-
[data-aubade='header'][data-language='shell']::before {
245+
[data-aubade-codeblock='header'][data-language='shell']::after,
246+
[data-aubade-codeblock='header'][data-language='shell']::before {
244247
background: #f3e2bb;
245248
color: #c09022;
246249
}
247-
[data-aubade='header'][data-language='svelte']::after,
248-
[data-aubade='header'][data-language='svelte']::before {
250+
[data-aubade-codeblock='header'][data-language='svelte']::after,
251+
[data-aubade-codeblock='header'][data-language='svelte']::before {
249252
background: #ff3e00;
250253
color: var(--aubade-header-light);
251254
}
252-
[data-aubade='header'][data-language='terminal']::after,
253-
[data-aubade='header'][data-language='terminal']::before {
255+
[data-aubade-codeblock='header'][data-language='terminal']::after,
256+
[data-aubade-codeblock='header'][data-language='terminal']::before {
254257
background: #dddddd;
255258
color: var(--aubade-header-dark);
256259
}
257-
[data-aubade='header'][data-language='typescript']::after,
258-
[data-aubade='header'][data-language='typescript']::before,
259-
[data-aubade='header'][data-language='ts']::after,
260-
[data-aubade='header'][data-language='ts']::before {
260+
[data-aubade-codeblock='header'][data-language='typescript']::after,
261+
[data-aubade-codeblock='header'][data-language='typescript']::before,
262+
[data-aubade-codeblock='header'][data-language='ts']::after,
263+
[data-aubade-codeblock='header'][data-language='ts']::before {
261264
background: #3178c6;
262265
color: var(--aubade-header-light);
263266
}
264-
[data-aubade='header'][data-language='yaml']::after,
265-
[data-aubade='header'][data-language='yaml']::before {
267+
[data-aubade-codeblock='header'][data-language='yaml']::after,
268+
[data-aubade-codeblock='header'][data-language='yaml']::before {
266269
background: #000000;
267270
color: var(--aubade-header-light);
268271
}
269272

270273
/* ---- <div data-aubade="toolbar"> ---- */
271274

272-
[data-aubade='toolbar'] {
275+
[data-aubade-codeblock='toolbar'] {
273276
z-index: 1;
274277
opacity: 0;
275278
position: absolute;
@@ -282,23 +285,25 @@ code {
282285
transform: translateY(-50%);
283286
}
284287

285-
[data-aubade='header'][data-file='empty'] [data-aubade='toolbar'] {
288+
[data-aubade-codeblock='header'][data-file='empty'] [data-aubade-codeblock='toolbar'] {
286289
transform: translateY(50%);
287290
}
288-
[data-aubade='header'][data-file='empty']:not([data-language='']) [data-aubade='toolbar'] {
291+
[data-aubade-codeblock='header'][data-file='empty']:not([data-language=''])
292+
[data-aubade-codeblock='toolbar'] {
289293
transform: translateY(10%);
290294
}
291-
[data-aubade='header']:not([data-language='']):not([data-file='empty']) [data-aubade='toolbar'] {
295+
[data-aubade-codeblock='header']:not([data-language='']):not([data-file='empty'])
296+
[data-aubade-codeblock='toolbar'] {
292297
top: 100%;
293298
transform: translateY(10%);
294299
}
295300

296-
[data-aubade='block']:focus-within [data-aubade='toolbar'],
297-
[data-aubade='block']:hover [data-aubade='toolbar'] {
301+
[data-aubade='codeblock']:focus-within [data-aubade-codeblock='toolbar'],
302+
[data-aubade='codeblock']:hover [data-aubade-codeblock='toolbar'] {
298303
opacity: 1;
299304
}
300305

301-
[data-aubade='toolbar'] > [data-aubade-toolbar] {
306+
[data-aubade-codeblock='toolbar'] > [data-aubade-toolbar] {
302307
--aubade-overlay: oklch(0.412 0.017 298);
303308

304309
cursor: pointer;

0 commit comments

Comments
 (0)