vielle.dev
[Archived] Archived WIP of vielle.dev
Add styles to <blockquote>
+1
-1
posts/full-test.md
+1
-1
posts/full-test.md
+15
-8
rehype-custom-html.ts
+15
-8
rehype-custom-html.ts
···
1
import type { Plugin } from "unified";
2
-
import type { Root, Element } from "hast";
3
type Options = {};
4
5
function blockquote(node: Element) {
···
7
if (child.type === "element" && child.children[0].type === "text") {
8
const flag = child.children[0].value.match(/(?<=^\$).*/gm);
9
if (flag?.length !== 1) continue;
10
11
-
if (!node.properties.style)
12
-
node.properties.style = "flag-" + flag[0].toLowerCase();
13
-
else if (node.properties.styles instanceof Array)
14
-
node.properties.styles.push("flag-" + flag[0].toLowerCase());
15
-
else if (typeof node.properties.styles === "string")
16
-
node.properties.styles + "flag-" + flag[0].toLowerCase();
17
else
18
throw new Error(
19
-
`${node.position?.start.line}:${node.position?.start.column} [style] malformed!! (${node.properties.style})`,
20
);
21
}
22
}
···
1
import type { Plugin } from "unified";
2
+
import type { Root, Element, Node } from "hast";
3
type Options = {};
4
5
function blockquote(node: Element) {
···
7
if (child.type === "element" && child.children[0].type === "text") {
8
const flag = child.children[0].value.match(/(?<=^\$).*/gm);
9
if (flag?.length !== 1) continue;
10
+
child.children.shift();
11
+
// finiky to get types working bc shift mutation etc
12
+
if (
13
+
(child.children[0] as Node).type === "element" &&
14
+
(child.children[0] as Node as Element).tagName === "br"
15
+
)
16
+
child.children.shift();
17
18
+
if (!node.properties.class)
19
+
node.properties.class = ["flag-" + flag[0].toLowerCase()];
20
+
else if (node.properties.class instanceof Array)
21
+
node.properties.class.push("flag-" + flag[0].toLowerCase());
22
+
else if (typeof node.properties.class === "string")
23
+
node.properties.class + "flag-" + flag[0].toLowerCase();
24
else
25
throw new Error(
26
+
`${node.position?.start.line}:${node.position?.start.column} [class] malformed!! (${node.properties.class})`,
27
);
28
}
29
}
+31
src/pages/blog/[id].astro
+31
src/pages/blog/[id].astro
···
87
});
88
</script>
89
90
+
<!-- post content styles -->
91
+
<style is:global>
92
+
blockquote {
93
+
--accent: #a8a8a8;
94
+
border-left: 0.2rem solid var(--accent);
95
+
padding: 1rem 4rem 1rem 1rem;
96
+
margin: 1rem;
97
+
border-radius: 0.5rem;
98
+
background-color: rgb(from var(--accent) r g b / 0.5);
99
+
width: fit-content;
100
+
min-width: 20rem;
101
+
102
+
&::before {
103
+
content: var(--icon) " " var(--name);
104
+
}
105
+
}
106
+
107
+
blockquote.flag-note {
108
+
--accent: skyblue;
109
+
--icon: "📝";
110
+
--name: "Note";
111
+
}
112
+
113
+
blockquote.flag-alert {
114
+
--accent: orangered;
115
+
--icon: "🚨";
116
+
--name: "Alert";
117
+
}
118
+
</style>
119
+
120
+
<!-- page styles -->
121
<style>
122
@property --bg {
123
syntax: "<color>";