this repo has no description
Add paragraph directives
reasoning behind change: astro doesnt include images properly otherwise
+100
-33
+10
posts/full-test.md
+10
posts/full-test.md
···
25
25
26
26
and here is another
27
27
28
+
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
29
+
30
+
::breakout::test:: Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
31
+
32
+
::full-width::test::@div::@nest:: Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
33
+
34
+
::breakout::  Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
35
+
36
+
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.
37
+
28
38
paragraph with **_strong emph_**, **\*strong** in emph\*, **_emph_ in strong**, **in strong _emph_**, and \*in emph **strong\*** but not ~~this text~~ bc i said so
29
39
30
40
now heres a paragraph with a [link](/blog "Goes to blog") which goes to blog, [a link](https://vielle.dev/) which points to my site, and a link to <https://deer.social>
+79
-27
rehype-custom-html.ts
+79
-27
rehype-custom-html.ts
···
1
1
import type { Plugin } from "unified";
2
-
import type { Root, Element, Node } from "hast";
2
+
import type {
3
+
Root,
4
+
Element,
5
+
Node,
6
+
ElementContent,
7
+
RootContent,
8
+
Text,
9
+
} from "hast";
3
10
type Options = {};
11
+
4
12
/*
5
13
blockquote flags go in the first line
6
14
they are formatted as:
···
51
59
})()
52
60
).toString();
53
61
54
-
console.log(alt);
55
62
// match section before |
56
63
const prefixes = alt.match(/.*?(?= \|.*)/gm);
57
64
node.properties.alt = alt.match(/(?<= \| ).*/gm);
58
65
if (!prefixes) return;
59
66
const flags = prefixes[0].split(" ");
60
67
for (const flag of flags) {
61
-
console.log(flag);
62
68
node.properties[`data-img-flag--${flag}`] = true;
63
69
}
64
-
console.log(flags);
65
70
}
66
71
67
-
const plugin: Plugin<[Options], Root> = function (options) {
68
-
return function (root, _) {
69
-
for (let node of root.children) {
70
-
if (node.type === "element") {
71
-
switch (node.tagName) {
72
-
case "blockquote": {
73
-
blockquote(node);
74
-
break;
75
-
}
76
-
case "p": {
77
-
let found = false;
78
-
for (const n of node.children) {
79
-
if (n.type === "element" && n.tagName === "img") {
80
-
node = n;
81
-
found = true;
82
-
}
83
-
}
84
-
if (!found) break;
85
-
}
86
-
case "img": {
87
-
image(node);
88
-
break;
89
-
}
72
+
/*
73
+
paragraph flags go at the start
74
+
to use paragraph flags, include the following syntax at the start of a paragraph:
75
+
`::FLAG[::FLAG]*::`, where FLAG is a flag which is included as [data-para-flag--FLAG]
76
+
if FLAG starts with an `@`, it will be treated as a directive
77
+
current directives:
78
+
- @nest: replaces children with a p tag and moves children into it
79
+
- @div: replaces self with div
80
+
*/
81
+
82
+
function para(value: Text, parent: Element) {
83
+
const flags = value.value.match(/(?<=^::).*(?=::)/gm);
84
+
85
+
if (!flags) return;
86
+
87
+
const txt = value.value.match(/(?<=^::.*:: ).*/gm);
88
+
value.value =
89
+
!txt || txt.length !== 1 ? "Err: Parser Error (custom HTML)" : txt[0];
90
+
91
+
for (const flag of flags[0].split("::")) {
92
+
if (flag[0] === "@") {
93
+
switch (flag.slice(1)) {
94
+
case "nest": {
95
+
const prevChildren = parent.children;
96
+
parent.children = [
97
+
{
98
+
type: "element",
99
+
tagName: "p",
100
+
properties: {},
101
+
children: prevChildren,
102
+
} satisfies Element,
103
+
];
104
+
break;
105
+
}
106
+
case "div": {
107
+
parent.tagName = "div";
108
+
break;
109
+
}
110
+
default: {
111
+
console.warn("Unknown paragraph directive:", flag);
90
112
}
91
113
}
114
+
} else parent.properties[`data-para-flag--${flag}`] = true;
115
+
}
116
+
}
117
+
118
+
const forChild = (children: ElementContent[] | RootContent[]) => {
119
+
for (const node of children) {
120
+
if (node.type !== "element") continue;
121
+
122
+
switch (node.tagName) {
123
+
case "blockquote": {
124
+
blockquote(node);
125
+
break;
126
+
}
127
+
128
+
case "img": {
129
+
image(node);
130
+
break;
131
+
}
132
+
133
+
case "p": {
134
+
if (node.children[0].type === "text") para(node.children[0], node);
135
+
136
+
forChild(node.children);
137
+
}
92
138
}
139
+
}
140
+
};
141
+
142
+
const plugin: Plugin<[Options], Root> = function (options) {
143
+
return function (root, _) {
144
+
forChild(root.children);
93
145
};
94
146
};
95
147
+11
-6
src/pages/blog/[id].astro
+11
-6
src/pages/blog/[id].astro
···
24
24
25
25
if (!post.filePath) throw new Error("Post does not have a filepath");
26
26
return import(`../../content/posts/${parse(post.filePath).name}.mdx`).then(
27
-
(x) => x.Content
27
+
(x) => x.Content,
28
28
);
29
29
})();
30
30
---
···
51
51
const els = document.querySelectorAll("main[data-colour-scheme-nojs]");
52
52
if (els.length !== 1)
53
53
throw new Error(
54
-
"No `main[data-colour-scheme-nojs]`` found, or multiple found"
54
+
"No `main[data-colour-scheme-nojs]`` found, or multiple found",
55
55
);
56
56
const el = els[0];
57
57
if (!(el instanceof HTMLElement)) throw new Error("Not HTML Element!");
···
278
278
}
279
279
280
280
.content,
281
-
.full-width {
282
-
padding-block: 4em;
281
+
:global(.full-width),
282
+
:global([data-para-flag--full-width]) {
283
+
&.content {
284
+
padding-block: 4em;
285
+
}
283
286
284
287
--padding-inline: 2rem;
285
288
--content-max-width: 60ch;
···
305
308
grid-column: content;
306
309
}
307
310
308
-
& > :global(.breakout) {
311
+
& > :global(.breakout),
312
+
& > :global([data-para-flag--breakout]) {
309
313
grid-column: breakout;
310
314
}
311
315
312
-
& > :global(.full-width) {
316
+
& > :global(.full-width),
317
+
& > :global([data-para-flag--full-width]) {
313
318
grid-column: full-width;
314
319
}
315
320
}