feat: enhance file name transformer with additional options (#555)

- 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

src/layouts/PostDetails.astro

@@ -234,9 +234,18 @@ const nextPost =
       const wrapper = document.createElement("div");
       wrapper.style.position = "relative";
 
+      // Check if --file-name-offset custom property exists
+      const computedStyle = getComputedStyle(codeBlock);
+      const hasFileNameOffset =
+        computedStyle.getPropertyValue("--file-name-offset").trim() !== "";
+
+      // Determine the top positioning class
+      const topClass = hasFileNameOffset
+        ? "top-(--file-name-offset)"
+        : "-top-3";
+
       const copyButton = document.createElement("button");
-      copyButton.className =
-        "copy-code absolute end-3 top-3 rounded bg-muted/80 px-2 py-1 text-xs leading-4 text-foreground font-medium";
+      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`;
       copyButton.innerHTML = copyButtonLabel;
       codeBlock.setAttribute("tabindex", "0");
       codeBlock.appendChild(copyButton);