Skip to content

Commit 58626e9

Browse files
committed
feat: enhance file name transformer with additional options
- Add v2 badge-style option as alternative to v1 tab-style - v2 features: border, rounded corners, positioned with CSS custom property - v1 features: tab-style with rounded top corners, muted background - Add hideDot option to control green dot indicator visibility - Include comprehensive JSDoc documentation with usage examples - Support both styling variants with configuration parameters
1 parent aedd98d commit 58626e9

File tree

4 files changed

+49
-11
lines changed

4 files changed

+49
-11
lines changed

astro.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export default defineConfig({
2727
defaultColor: false,
2828
wrap: false,
2929
transformers: [
30-
transformerFileName(),
30+
transformerFileName({ style: "v2", hideDot: false }),
3131
transformerNotationHighlight(),
3232
transformerNotationWordHighlight(),
3333
transformerNotationDiff({ matchAlgorithm: "v3" }),

src/layouts/PostDetails.astro

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -234,9 +234,18 @@ const nextPost =
234234
const wrapper = document.createElement("div");
235235
wrapper.style.position = "relative";
236236

237+
// Check if --file-name-offset custom property exists
238+
const computedStyle = getComputedStyle(codeBlock);
239+
const hasFileNameOffset =
240+
computedStyle.getPropertyValue("--file-name-offset").trim() !== "";
241+
242+
// Determine the top positioning class
243+
const topClass = hasFileNameOffset
244+
? "top-(--file-name-offset)"
245+
: "-top-3";
246+
237247
const copyButton = document.createElement("button");
238-
copyButton.className =
239-
"copy-code absolute end-3 top-3 rounded bg-muted/80 px-2 py-1 text-xs leading-4 text-foreground font-medium";
248+
copyButton.className = `copy-code absolute end-3 ${topClass} rounded bg-muted border border-muted px-2 py-1 text-xs leading-4 text-foreground font-medium`;
240249
copyButton.innerHTML = copyButtonLabel;
241250
codeBlock.setAttribute("tabindex", "0");
242251
codeBlock.appendChild(copyButton);

src/styles/global.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ html[data-theme="dark"] {
1616
--background: #212737;
1717
--foreground: #eaedf3;
1818
--accent: #ff6b01;
19-
--muted: #343f60bf;
19+
--muted: #343f60;
2020
--border: #ab4b08;
2121
}
2222

src/utils/transformers/fileName.js

Lines changed: 36 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
1-
export const transformerFileName = () => ({
1+
/**
2+
* CustomShiki transformer that adds file name labels to code blocks.
3+
*
4+
* This transformer looks for the `file="filename"` meta attribute in code blocks
5+
* and creates a styled label showing the filename. It supports two different
6+
* styling options and can optionally hide the green dot indicator.
7+
*
8+
* @param {Object} options - Configuration options for the transformer
9+
* @param {string} [options.style="v2"] - The styling variant to use
10+
* - `"v1"`: Tab-style with rounded top corners, positioned at top-left
11+
* - `"v2"`: Badge-style with border, positioned at top-left with offset
12+
* @param {boolean} [options.hideDot=false] - Whether to hide the green dot indicator
13+
*/
14+
export const transformerFileName = ({
15+
style = "v2",
16+
hideDot = false,
17+
} = {}) => ({
218
pre(node) {
19+
// Add CSS custom property to the node
20+
const fileNameOffset = style === "v1" ? "0.75rem" : "-0.75rem";
21+
node.properties.style =
22+
(node.properties.style || "") + `--file-name-offset: ${fileNameOffset};`;
23+
324
const raw = this.options.meta?.__raw?.split(" ");
425

526
if (!raw) return;
@@ -15,15 +36,25 @@ export const transformerFileName = () => ({
1536

1637
if (!file) return;
1738

39+
// Add additional margin to code block
40+
this.addClassToHast(
41+
node,
42+
`mt-8 ${style === "v1" ? "rounded-tl-none" : ""}`
43+
);
44+
45+
// Add file name to code block
1846
node.children.push({
1947
type: "element",
2048
tagName: "span",
2149
properties: {
2250
class: [
23-
"px-2 py-1",
24-
"absolute left-0 -top-6",
25-
"rounded-t-md border border-b-0",
26-
"bg-muted/50 text-foreground text-xs font-medium leading-4",
51+
"absolute py-1 text-foreground text-xs font-medium leading-4",
52+
hideDot
53+
? "px-2"
54+
: "pl-4 pr-2 before:inline-block before:size-1 before:bg-green-500 before:rounded-full before:absolute before:top-[45%] before:left-2",
55+
style === "v1"
56+
? "left-0 -top-6 rounded-t-md border border-b-0 bg-muted/50"
57+
: "left-2 top-(--file-name-offset) border rounded-md bg-background",
2758
],
2859
},
2960
children: [
@@ -33,7 +64,5 @@ export const transformerFileName = () => ({
3364
},
3465
],
3566
});
36-
37-
this.addClassToHast(node, "mt-12 rounded-tl-none");
3867
},
3968
});

0 commit comments

Comments
 (0)