fix: Added 'Specification Explorer' to mobile view & fixed spelling i…

…nconsistency (#3727)
asyncapi · Feb 24, 2025 · 42c5c58 · 42c5c58
1 parent 26d87de
commit 42c5c58
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 67 deletions.
diff --git a/components/TOC.tsx b/components/TOC.tsx
@@ -24,27 +24,16 @@ 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
@@ -73,37 +62,32 @@ export default function TOC({
           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)} 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`}
+              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`}
               href={`#${item.slug ? item.slug : item.slugWithATag}`}
               key={index}
-              data-testid="TOC-Link"
+              data-testid='TOC-Link'
             >
               {item.content.replaceAll('`', '')}
             </a>

diff --git a/components/navigation/learningItems.tsx b/components/navigation/learningItems.tsx
@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import IconExplorer from '../icons/Explorer';
 import IconGradCap from '../icons/GradCap';
 import IconGuide from '../icons/Guide';
 import IconMigration from '../icons/Migration';
@@ -56,7 +57,7 @@ const learningItems: LearningItem[] = [
     href: '/docs/migration',
     icon: IconMigration,
     className: 'bg-blue-400',
-    title: 'Migrations',
+    title: 'Migration',
     description: 'Our migration guides on how to upgrade to newer AsyncAPI versions.'
   },
   {
@@ -65,6 +66,13 @@ const learningItems: LearningItem[] = [
     className: 'bg-red-200',
     title: 'Community',
     description: 'Our Community section documents the community guidelines and resources.'
+  },
+  {
+    href: '/docs/reference/specification/v3.0.0-explorer',
+    icon: IconExplorer,
+    className: 'bg-teal-200',
+    title: 'Specification Explorer',
+    description: 'Simplifying our Specification JSON Schema like a pro.'
   }
 ];
 

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,8 +110,7 @@ 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;
 }
@@ -131,8 +130,8 @@ abbr[title] {
   }
 }
 
-@media (max-width: 767px) {
-  .orbits {
+@media (max-width: 767px){
+  .orbits{
     display: none;
   }
 }
@@ -339,11 +338,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;
@@ -354,27 +353,5 @@ abbr[title] {
 }
 
 select {
-  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 */
-}
+  cursor:pointer;
+}