Improved animated border issue for TOC links

asyncapi · Feb 21, 2025 · 26d87de · 26d87de
1 parent 69d74a6
commit 26d87de
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 28 deletions.
diff --git a/components/TOC.tsx b/components/TOC.tsx
@@ -24,16 +24,27 @@ interface ITOCProps {
  * @param {string} props.contentSelector - The content selector
  * @param {number} props.depth - The depth of the table of contents
  */
-export default function TOC({ className, cssBreakingPoint = 'xl', toc, contentSelector, depth = 2 }: ITOCProps) {
+export default function TOC({
+  className,
+  cssBreakingPoint = 'xl',
+  toc,
+  contentSelector,
+  depth = 2,
+}: ITOCProps) {
   const [open, setOpen] = useState(false);
 
   if (!toc || !toc.length) return null;
-  const minLevel = toc.reduce((mLevel, item) => (!mLevel || item.lvl < mLevel ? item.lvl : mLevel), 0);
+  const minLevel = toc.reduce(
+    (mLevel, item) => (!mLevel || item.lvl < mLevel ? item.lvl : mLevel),
+    0,
+  );
   const tocItems = toc
     .filter((item) => item.lvl <= minLevel + depth)
     .map((item) => ({
       ...item,
-      content: item.content.replace(/[\s]?\{#[\w\d\-_]+\}$/, '').replace(/(<([^>]+)>)/gi, ''),
+      content: item.content
+        .replace(/[\s]?\{#[\w\d\-_]+\}$/, '')
+        .replace(/(<([^>]+)>)/gi, ''),
       // For TOC rendering in specification files in the spec repo we have "a" tags added manually to the spec
       // markdown document MDX takes these "a" tags and uses them to render the "id" for headers like
       // a-namedefinitionsapplicationaapplication slugWithATag contains transformed heading name that is later used
@@ -62,32 +73,37 @@ export default function TOC({ className, cssBreakingPoint = 'xl', toc, contentSe
           xl:font-bold`
               : 'lg:mb-4 lg:text-xs lg:text-gray-900 lg:font-bold'
           }`)}
-          data-testid='TOC-Heading'
+          data-testid="TOC-Heading"
         >
           On this page
         </h5>
-        <div className={`text-underline p4 text-center ${cssBreakingPoint === 'xl' ? 'xl:hidden' : 'lg:hidden'}`}>
+        <div
+          className={`text-underline p4 text-center ${cssBreakingPoint === 'xl' ? 'xl:hidden' : 'lg:hidden'}`}
+        >
           <ArrowRight
             className={`${open ? '-rotate-90' : 'rotate-90'} -mt-0.5 h-6 
             text-primary-500 transition duration-200 ease-in-out`}
           />
         </div>
       </div>
-      <div className={`${!open && 'hidden'} ${cssBreakingPoint === 'xl' ? 'xl:block' : 'lg:block'}`}>
+      <div
+        className={`${!open && 'hidden'} ${cssBreakingPoint === 'xl' ? 'xl:block' : 'lg:block'}`}
+      >
         <Scrollspy
-          items={tocItems.map((item) => (item.slug ? item.slug : item.slugWithATag))}
-          currentClassName='text-primary-500 font-bold'
-          componentTag='div'
+          items={tocItems.map((item) =>
+            item.slug ? item.slug : item.slugWithATag,
+          )}
+          currentClassName="text-primary-500 font-bold"
+          componentTag="div"
           rootEl={contentSelector}
           offset={-120}
         >
           {tocItems.map((item, index) => (
             <a
-              className={`pl-${2 ** (item.lvl - 1)} font-normal mb-1 block font-sans text-sm 
-                  text-gray-900 antialiased transition duration-100 ease-in-out hover:underline`}
+            className={`pl-${2 ** (item.lvl - 1)} relative font-normal animate-border bg-gradient-to-r mb-2 block rounded-lg border-transparent from-primary-500 via-pink-500 to-blue-500 bg-clip-padding p-2 font-sans text-sm text-gray-900 antialiased transition duration-100 ease-in-out hover:underline`}
               href={`#${item.slug ? item.slug : item.slugWithATag}`}
               key={index}
-              data-testid='TOC-Link'
+              data-testid="TOC-Link"
             >
               {item.content.replaceAll('`', '')}
             </a>

diff --git a/package.json b/package.json
@@ -160,5 +160,6 @@
     "remark-lint": "^10.0.0",
     "remark-mdx": "^3.0.1",
     "storybook": "^8.2.4"
-  }
+  },
+  "packageManager": "[email protected]+sha512.5383cc12567a95f1d668fbe762dfe0075c595b4bfff433be478dbbe24e05251a8e8c3eb992a986667c1d53b6c3a9c85b8398c35a960587fbd9fa3a0915406728"
 }
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,11 +1,11 @@
 @import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@4/distr/fira_code.css);
 @import url(https://cdn.jsdelivr.net/npm/@docsearch/css@3);
 
-@import "swiper/css";
-@import "swiper/css/a11y";
-@import "swiper/css/navigation";
-@import "swiper/css/pagination";
-@import "swiper/css/scrollbar";
+@import 'swiper/css';
+@import 'swiper/css/a11y';
+@import 'swiper/css/navigation';
+@import 'swiper/css/pagination';
+@import 'swiper/css/scrollbar';
 
 @tailwind base;
 @tailwind components;
@@ -19,7 +19,7 @@ body {
   scroll-behavior: smooth;
 }
 
-li>p {
+li > p {
   display: inline;
 }
 
@@ -51,11 +51,11 @@ abbr[title] {
 
 @keyframes GradientAnimation {
   0% {
-    background-position: 0% 50%
+    background-position: 0% 50%;
   }
 
   100% {
-    background-position: 200% 50%
+    background-position: 200% 50%;
   }
 }
 
@@ -110,7 +110,8 @@ abbr[title] {
   padding: 0;
 }
 
-.DocSearch-Help > a:focus, .DocSearch-Help > a:hover {
+.DocSearch-Help > a:focus,
+.DocSearch-Help > a:hover {
   outline: none;
   text-decoration: underline;
 }
@@ -130,8 +131,8 @@ abbr[title] {
   }
 }
 
-@media (max-width: 767px){
-  .orbits{
+@media (max-width: 767px) {
+  .orbits {
     display: none;
   }
 }
@@ -338,11 +339,11 @@ abbr[title] {
   color: white;
 }
 
-.meeting-card:hover > div:nth-child(2) > p  {
+.meeting-card:hover > div:nth-child(2) > p {
   color: white;
 }
 
-.explorer-menu-wrapper > div > div{
+.explorer-menu-wrapper > div > div {
   border: 1px solid rgb(228, 228, 228);
   border-radius: 10px;
   padding: 10px;
@@ -353,5 +354,27 @@ abbr[title] {
 }
 
 select {
-  cursor:pointer;
-}
+  cursor: pointer;
+}
+
+/* border animation for THIS PAGE CONTAINS */
+@keyframes borderAnimation {
+  0% {
+    outline-color: #649af0;
+  }
+  50% {
+    outline-color: #b27bee;
+  }
+  100% {
+    outline-color: #649af0;
+  }
+}
+
+.animate-border {
+  border-radius: 20px; /* Makes the border rounded */
+  border: 2px solid transparent; /* Transparent border to maintain space */
+  outline: 2px solid #3b82f6; /* Apply outline instead */
+  animation: borderAnimation 3s infinite linear; /* Animate the outline */
+  padding: 4px; /* Add padding so content does not touch the border */
+  background: white; /* Ensure content background is white */
+}