nobbz.dev
+6
-1
astro.config.mjs
+6
-1
astro.config.mjs
···
8
8
9
9
import tailwind from "@astrojs/tailwind";
10
10
11
+
import { filenameTransformer } from "./src/scripts/filename-transformer";
12
+
11
13
const tailwindIntegration = tailwind({
12
14
applyBaseStyles: false,
13
15
});
···
17
19
integrations: [mdx(), tailwindIntegration],
18
20
legacy: { collections: true },
19
21
markdown: {
20
-
shikiConfig: { theme: "catppuccin-mocha" },
22
+
shikiConfig: {
23
+
theme: "catppuccin-mocha",
24
+
transformers: [filenameTransformer()],
25
+
},
21
26
},
22
27
});
+55
src/scripts/filename-transformer.ts
+55
src/scripts/filename-transformer.ts
···
1
+
// SPDX-FileCopyrightText: 2025 Norbert Melzer
2
+
// SPDX-FileContributor: Norbert Melzer
3
+
//
4
+
// SPDX-License-Identifier: MIT
5
+
6
+
import type { ShikiTransformer } from "shiki";
7
+
import type { Element } from "hast";
8
+
9
+
export function filenameTransformer(): ShikiTransformer {
10
+
const transformer: ShikiTransformer = {
11
+
name: "filenameTransformer",
12
+
13
+
pre(code: Element) {
14
+
const meta: string = this.options?.meta?.__raw || "";
15
+
const pattern = /(?:data-)?filename="(.*?)"/;
16
+
17
+
const filename = pattern.exec(meta)?.[1] || null;
18
+
19
+
if (filename) {
20
+
code.properties.dataFilename = filename;
21
+
22
+
const titlebar_class = [
23
+
"relative",
24
+
"!pt-[2.5rem]",
25
+
"before:content-[attr(data-filename)]",
26
+
"before:absolute",
27
+
"before:top-0",
28
+
"before:left-0",
29
+
"before:w-full",
30
+
"before:bg-gradient-to-b",
31
+
"before:from-crust",
32
+
"before:to-base",
33
+
"before:rounded-t",
34
+
"before:border-t-2",
35
+
"before:border-l-2",
36
+
"before:border-r-2",
37
+
"before:border-base",
38
+
"before:border-solid",
39
+
"before:font-bold",
40
+
"before:px-4",
41
+
"before:py-1",
42
+
"before:whitespace-nowrap",
43
+
"before:overflow-x-auto",
44
+
].join(" ");
45
+
46
+
code.properties.class =
47
+
(code.properties.class ?? false)
48
+
? code.properties.class + " " + titlebar_class
49
+
: titlebar_class;
50
+
}
51
+
},
52
+
};
53
+
54
+
return transformer;
55
+
}