From 26d87deb5c76dc00b295e433866a61100db504e8 Mon Sep 17 00:00:00 2001 From: Prateek Singh Date: Fri, 21 Feb 2025 18:37:18 +0530 Subject: [PATCH 1/4] Improved animated border issue for TOC links --- components/TOC.tsx | 40 +++++++++++++++++++++++----------- package.json | 3 ++- styles/globals.css | 53 +++++++++++++++++++++++++++++++++------------- 3 files changed, 68 insertions(+), 28 deletions(-) diff --git a/components/TOC.tsx b/components/TOC.tsx index 197fcdc7607c..b96461e3eb54 100644 --- 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 -
+
-
+
(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) => ( {item.content.replaceAll('`', '')} diff --git a/package.json b/package.json index 22c6192d66fa..589ad0c2b9f8 100644 --- 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": "yarn@4.6.0+sha512.5383cc12567a95f1d668fbe762dfe0075c595b4bfff433be478dbbe24e05251a8e8c3eb992a986667c1d53b6c3a9c85b8398c35a960587fbd9fa3a0915406728" } diff --git a/styles/globals.css b/styles/globals.css index ecbca2ff0cbf..ce63666b8cc0 100644 --- 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; -} \ No newline at end of file + 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 */ +} From 42c5c588eef56fb57afe80bfeed0a520a85cf23e Mon Sep 17 00:00:00 2001 From: Prateek Singh Date: Tue, 25 Feb 2025 00:10:51 +0530 Subject: [PATCH 2/4] fix: Added 'Specification Explorer' to mobile view & fixed spelling inconsistency (#3727) --- components/TOC.tsx | 40 ++++++------------- components/navigation/learningItems.tsx | 10 ++++- styles/globals.css | 53 +++++++------------------ 3 files changed, 36 insertions(+), 67 deletions(-) diff --git a/components/TOC.tsx b/components/TOC.tsx index b96461e3eb54..197fcdc7607c 100644 --- 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 -
+
-
+
- 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) => ( {item.content.replaceAll('`', '')} diff --git a/components/navigation/learningItems.tsx b/components/navigation/learningItems.tsx index d8f538bb8652..2c58be59c6a9 100644 --- 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 index ce63666b8cc0..ecbca2ff0cbf 100644 --- 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; +} \ No newline at end of file From 2395bbdd828923c9791864d1eef5f1359ac17550 Mon Sep 17 00:00:00 2001 From: Prateek Singh Date: Tue, 25 Feb 2025 22:28:14 +0530 Subject: [PATCH 3/4] Fix: Added 'Welcome' dropdown in mobile navigation --- components/layout/DocsLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/layout/DocsLayout.tsx b/components/layout/DocsLayout.tsx index 061124f5cda6..029d383213ce 100644 --- a/components/layout/DocsLayout.tsx +++ b/components/layout/DocsLayout.tsx @@ -132,7 +132,7 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou className='flex px-4 text-gray-500 hover:text-gray-900 focus:outline-none sm:px-6 md:px-8' aria-label='Open sidebar' > - {post.sectionTitle} + {post.title}
From 706c1770abd0368e487bb731979748157e67aa7c Mon Sep 17 00:00:00 2001 From: Prateek Singh Date: Tue, 25 Feb 2025 22:36:49 +0530 Subject: [PATCH 4/4] Fix: Added 'Welcome' dropdown in mobile navigation --- components/layout/DocsLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/layout/DocsLayout.tsx b/components/layout/DocsLayout.tsx index 029d383213ce..d1a60b440c5f 100644 --- a/components/layout/DocsLayout.tsx +++ b/components/layout/DocsLayout.tsx @@ -138,7 +138,7 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
)} - {/* @TODO Will uncomment the component once it is in use */} + {/* @TODO Will uncomment the component once it is in use */} {/* */}