feat: add wrappers for styling

benjamincharity · Feb 3, 2024 · 4e2f1e0 · 4e2f1e0
1 parent dfc3a2e
commit 4e2f1e0
Show file tree

Hide file tree

Showing 11 changed files with 102 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,18 @@ unified()
   .use(rehypeParse, {fragment: true})
   .use(rehypeScrollToTop)
   .process('<h1>Title</h1><p>Content</p>')
+
+// Or with options:
+unified()
+  .use(rehypeParse, {fragment: true})
+  .use(rehypeScrollToTop, {
+    topLink: { disabled: true },
+    bottomLink: {
+      text: `Back to top ↑`,
+      classes: 'animated-link-underline',
+    },
+  })
+  .process('<h1>Title</h1><p>Content</p>')
 ```
 
 ### Input

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@benjc/rehype-scroll-to-top",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A Rehype plugin that adds a 'scroll to top' & 'scroll to bottom' links to the page.",
   "type": "module",
   "main": "dist/index.js",
@@ -44,7 +44,7 @@
     "vitest": "^1.2.2"
   },
   "peerDependencies": {
-    "rehype": "^13.0.1",
+    "rehype": "^11.0.0",
     "unified": "^11.0.4"
   },
   "engines": {

diff --git a/src/index.ts b/src/index.ts
@@ -10,8 +10,8 @@ export type RehypeScrollToLink = {
 };
 
 export type RehypeScrollToTopOptions = {
-  topLink: Partial<RehypeScrollToLink>;
-  bottomLink: Partial<RehypeScrollToLink>;
+  topLink?: Partial<RehypeScrollToLink>;
+  bottomLink?: Partial<RehypeScrollToLink>;
 };
 
 export type RehypeScrollToTopOptionsRequired = {
@@ -36,45 +36,11 @@ const defaultOptions: RehypeScrollToTopOptionsRequired = {
   },
 };
 
-function mergeOptions(userOptions: Partial<RehypeScrollToTopOptions> = {}): RehypeScrollToTopOptionsRequired {
-  return {
-    bottomLink: {
-      ariaLabel: userOptions.bottomLink?.ariaLabel ?? defaultOptions.bottomLink.ariaLabel,
-      classes: userOptions.bottomLink?.classes ?? defaultOptions.bottomLink.classes,
-      disabled: userOptions.bottomLink?.disabled ?? defaultOptions.bottomLink.disabled,
-      id: userOptions.bottomLink?.id ?? defaultOptions.bottomLink.id,
-      text: userOptions.bottomLink?.text ?? defaultOptions.bottomLink.text,
-    },
-    topLink: {
-      ariaLabel: userOptions.topLink?.ariaLabel ?? defaultOptions.topLink.ariaLabel,
-      classes: userOptions.topLink?.classes ?? defaultOptions.topLink.classes,
-      disabled: userOptions.topLink?.disabled ?? defaultOptions.topLink.disabled,
-      id: userOptions.topLink?.id ?? defaultOptions.topLink.id,
-      text: userOptions.topLink?.text ?? defaultOptions.topLink.text,
-    },
-  };
-}
-
 const baseClass = "scroll-to";
 const bottomClass = "scroll-to--bottom";
 const topClass = "scroll-to--top";
 
-const createLinkElement = (props: RehypeScrollToLink & { destinationId: string }): Element => {
-  const { ariaLabel, classes, disabled, id, text, destinationId } = props;
-  return {
-    type: "element",
-    tagName: "a",
-    properties: {
-      "aria-label": ariaLabel,
-      href: `#${destinationId}`,
-      id,
-      className: [classes],
-    },
-    children: [{ type: "text", value: text }],
-  };
-};
-
-const rehypeScrollToTop: Plugin<[Partial<RehypeScrollToTopOptions>?], Root> = (options = {}) => {
+const rehypeScrollToTop: Plugin<[RehypeScrollToTopOptions?], Root> = (options = {}) => {
   const opts = mergeOptions(options);
 
   return (tree) => {
@@ -115,3 +81,46 @@ const rehypeScrollToTop: Plugin<[Partial<RehypeScrollToTopOptions>?], Root> = (o
 };
 
 export default rehypeScrollToTop;
+
+function mergeOptions(userOptions: Partial<RehypeScrollToTopOptions> = {}): RehypeScrollToTopOptionsRequired {
+  return {
+    bottomLink: {
+      ariaLabel: userOptions.bottomLink?.ariaLabel ?? defaultOptions.bottomLink.ariaLabel,
+      classes: userOptions.bottomLink?.classes ?? defaultOptions.bottomLink.classes,
+      disabled: userOptions.bottomLink?.disabled ?? defaultOptions.bottomLink.disabled,
+      id: userOptions.bottomLink?.id ?? defaultOptions.bottomLink.id,
+      text: userOptions.bottomLink?.text ?? defaultOptions.bottomLink.text,
+    },
+    topLink: {
+      ariaLabel: userOptions.topLink?.ariaLabel ?? defaultOptions.topLink.ariaLabel,
+      classes: userOptions.topLink?.classes ?? defaultOptions.topLink.classes,
+      disabled: userOptions.topLink?.disabled ?? defaultOptions.topLink.disabled,
+      id: userOptions.topLink?.id ?? defaultOptions.topLink.id,
+      text: userOptions.topLink?.text ?? defaultOptions.topLink.text,
+    },
+  };
+}
+
+function createLinkElement(props: RehypeScrollToLink & { destinationId: string }): Element {
+  const { ariaLabel, classes, disabled, id, text, destinationId } = props;
+  const linkElement: Element = {
+    type: "element",
+    tagName: "a",
+    properties: {
+      "aria-label": ariaLabel,
+      href: `#${destinationId}`,
+      id,
+      className: [classes],
+    },
+    children: [{ type: "text", value: text }],
+  };
+
+  return {
+    type: "element",
+    tagName: "div",
+    properties: {
+      className: ["scroll-to-wrapper"],
+    },
+    children: [linkElement],
+  };
+}
diff --git a/tests/fixtures/additionalClasses/input.html b/tests/fixtures/additionalClasses/input.html
@@ -1,2 +1,2 @@
-<h1>h1</h1>
-<p>test</p>
+<h1>Title</h1>
+<p>Content</p>
diff --git a/tests/fixtures/additionalClasses/output.html b/tests/fixtures/additionalClasses/output.html
@@ -1,4 +1,8 @@
-<a aria-label="Scroll to bottom" href="#bottom" id="top" class="foo scroll-to scroll-to--top">Scroll to bottom</a>
-<h1>h1</h1>
-<p>test</p>
-<a aria-label="Scroll to top" href="#top" id="bottom" class="bar scroll-to scroll-to--bottom">Scroll to top</a>
+<div class="scroll-to-wrapper">
+  <a aria-label="Scroll to bottom" href="#bottom" id="top" class="foo scroll-to scroll-to--top">Scroll to bottom</a>
+</div>
+<h1>Title</h1>
+<p>Content</p>
+<div class="scroll-to-wrapper">
+  <a aria-label="Scroll to top" href="#top" id="bottom" class="bar scroll-to scroll-to--bottom">Scroll to top</a>
+</div>
diff --git a/tests/fixtures/basic/output.html b/tests/fixtures/basic/output.html
@@ -1,4 +1,8 @@
-<a aria-label="Scroll to bottom" href="#bottom" id="top" class="scroll-to scroll-to--top">Scroll to bottom</a>
+<div class="scroll-to-wrapper">
+  <a aria-label="Scroll to bottom" href="#bottom" id="top" class="scroll-to scroll-to--top">Scroll to bottom</a>
+</div>
 <h1>Title</h1>
 <p>Content</p>
-<a aria-label="Scroll to top" href="#top" id="bottom" class="scroll-to scroll-to--bottom">Scroll to top</a>
+<div class="scroll-to-wrapper">
+  <a aria-label="Scroll to top" href="#top" id="bottom" class="scroll-to scroll-to--bottom">Scroll to top</a>
+</div>
diff --git a/tests/fixtures/customAriaLabels/output.html b/tests/fixtures/customAriaLabels/output.html
@@ -1,4 +1,8 @@
-<a aria-label="Custom aria top" href="#bottom" id="top" class="scroll-to scroll-to--top">Scroll to bottom</a>
+<div class="scroll-to-wrapper">
+  <a aria-label="Custom aria top" href="#bottom" id="top" class="scroll-to scroll-to--top">Scroll to bottom</a>
+</div>
 <h1>Title</h1>
 <p>Content</p>
-<a aria-label="Custom aria bottom" href="#top" id="bottom" class="scroll-to scroll-to--bottom">Scroll to top</a>
+<div class="scroll-to-wrapper">
+  <a aria-label="Custom aria bottom" href="#top" id="bottom" class="scroll-to scroll-to--bottom">Scroll to top</a>
+</div>
diff --git a/tests/fixtures/customIDs/output.html b/tests/fixtures/customIDs/output.html
@@ -1,8 +1,12 @@
-<a aria-label="Scroll to bottom" href="#custom-bottom" id="custom-top" class="scroll-to scroll-to--top"
+<div class="scroll-to-wrapper">
+  <a aria-label="Scroll to bottom" href="#custom-bottom" id="custom-top" class="scroll-to scroll-to--top"
   >Scroll to bottom</a
->
+  >
+</div>
 <h1>Title</h1>
 <p>Content</p>
-<a aria-label="Scroll to top" href="#custom-top" id="custom-bottom" class="scroll-to scroll-to--bottom"
+<div class="scroll-to-wrapper">
+  <a aria-label="Scroll to top" href="#custom-top" id="custom-bottom" class="scroll-to scroll-to--bottom"
   >Scroll to top</a
->
+  >
+</div>
diff --git a/tests/fixtures/customText/output.html b/tests/fixtures/customText/output.html
@@ -1,4 +1,8 @@
-<a aria-label="Scroll to bottom" href="#bottom" id="top" class="scroll-to scroll-to--top">Custom top text</a>
+<div class="scroll-to-wrapper">
+  <a aria-label="Scroll to bottom" href="#bottom" id="top" class="scroll-to scroll-to--top">Custom top text</a>
+</div>
 <h1>Title</h1>
 <p>Content</p>
-<a aria-label="Scroll to top" href="#top" id="bottom" class="scroll-to scroll-to--bottom">Custom bottom text</a>
+<div class="scroll-to-wrapper">
+  <a aria-label="Scroll to top" href="#top" id="bottom" class="scroll-to scroll-to--bottom">Custom bottom text</a>
+</div>
diff --git a/tests/fixtures/disableBottomLink/output.html b/tests/fixtures/disableBottomLink/output.html
@@ -1,3 +1,5 @@
-<a aria-label="Scroll to bottom" href="#bottom" id="top" class="scroll-to scroll-to--top">Scroll to bottom</a>
+<div class="scroll-to-wrapper">
+  <a aria-label="Scroll to bottom" href="#bottom" id="top" class="scroll-to scroll-to--top">Scroll to bottom</a>
+</div>
 <h1>Title</h1>
 <p>Content</p>
diff --git a/tests/fixtures/disableTopLink/output.html b/tests/fixtures/disableTopLink/output.html
@@ -1,3 +1,5 @@
 <h1>Title</h1>
 <p>Content</p>
-<a aria-label="Scroll to top" href="#top" id="bottom" class="scroll-to scroll-to--bottom">Scroll to top</a>
+<div class="scroll-to-wrapper">
+  <a aria-label="Scroll to top" href="#top" id="bottom" class="scroll-to scroll-to--bottom">Scroll to top</a>
+</div>