this repo has no description
Add support for image flags (custom syntax; see /rehype-custom-html.ts) in markdown
+73
-5
-1
astro.config.mjs
-1
astro.config.mjs
+1
-1
posts/full-test.md
+1
-1
posts/full-test.md
···
85
85
86
86
87
87
88
-
88
+
 heres an image which should be on the right while this text wraps around it? i hope? make sure the image goes first tho !!!!
89
89
90
90
+46
-2
rehype-custom-html.ts
+46
-2
rehype-custom-html.ts
···
29
29
}
30
30
}
31
31
32
+
/*
33
+
image flags go in alt text
34
+
if alt text has a pipe (|), there are flags
35
+
all words up to the first pipe are treated as flags in a space seperated list
36
+
they are added to the data tag as [data-img-flag--<name>="true"]
37
+
*/
38
+
39
+
function image(node: Element) {
40
+
// get alt; throw error if missing; convert to string
41
+
const alt = (
42
+
node.properties.alt ??
43
+
(() => {
44
+
throw new Error("NO ALT TEXT!!!");
45
+
})()
46
+
).toString();
47
+
48
+
console.log(alt);
49
+
// match section before |
50
+
const prefixes = alt.match(/.*?(?= \|.*)/gm);
51
+
node.properties.alt = alt.match(/(?<= \| ).*/gm);
52
+
if (!prefixes) return;
53
+
const flags = prefixes[0].split(" ");
54
+
for (const flag of flags) {
55
+
console.log(flag);
56
+
node.properties[`data-img-flag--${flag}`] = true;
57
+
}
58
+
console.log(flags);
59
+
}
60
+
32
61
const plugin: Plugin<[Options], Root> = function (options) {
33
62
return function (root, _) {
34
-
for (const node of root.children) {
35
-
if (node.type === "element")
63
+
for (let node of root.children) {
64
+
if (node.type === "element") {
36
65
switch (node.tagName) {
37
66
case "blockquote": {
38
67
blockquote(node);
39
68
break;
40
69
}
70
+
case "p": {
71
+
let found = false;
72
+
for (const n of node.children) {
73
+
if (n.type === "element" && n.tagName === "img") {
74
+
node = n;
75
+
found = true;
76
+
}
77
+
}
78
+
if (!found) break;
79
+
}
80
+
case "img": {
81
+
image(node);
82
+
break;
83
+
}
41
84
}
85
+
}
42
86
}
43
87
};
44
88
};
+26
-1
src/pages/blog/[id].astro
+26
-1
src/pages/blog/[id].astro
···
141
141
}
142
142
}
143
143
}
144
+
145
+
p {
146
+
clear: both;
147
+
}
148
+
149
+
img {
150
+
height: auto; /* fix height issues ?? */
151
+
margin: 1rem;
152
+
153
+
&[data-img-flag--small="true"] {
154
+
width: 50%;
155
+
}
156
+
157
+
&[data-img-flag--left="true"] {
158
+
float: left;
159
+
}
160
+
161
+
&[data-img-flag--right="true"] {
162
+
float: right;
163
+
}
164
+
165
+
&[data-img-flag--centre="true"] {
166
+
margin-inline: auto;
167
+
}
168
+
}
144
169
</style>
145
170
146
171
<!-- page styles -->
···
212
237
213
238
.content,
214
239
.full-width {
215
-
padding-top: 4em;
240
+
padding-block: 4em;
216
241
217
242
--padding-inline: 2rem;
218
243
--content-max-width: 60ch;