feat: migrate navigation #2765

vishvamsinh28 · 2024-03-12T16:40:48Z

migrated navigation

netlify · 2024-03-12T16:41:05Z

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`cfb4c8c`
🔍 Latest deploy log	https://app.netlify.com/sites/asyncapi-website/deploys/6605a56886c8c600086d74c8
😎 Deploy Preview	https://deploy-preview-2765--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

anshgoyalevil · 2024-03-14T12:27:48Z

components/ClickableLogo.tsx

+
+/**
+ * @description Renders a logo that is clickable and redirects to a specified URL.
+ * @param {ClickableLogoProps} props - The props for the component.


Define all params in jsdoc instead of the whole interface

Do this for all components.

anshgoyalevil · 2024-03-14T12:29:32Z

components/ClickableLogo.tsx

+    <Link href={href}>
+      <a className={className}>


Add the legacyBehavior prop to Link component or merge the anchor to Link. https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

Instead of using legacyBehavior, replace the a with span tag.

anshgoyalevil · 2024-03-14T12:33:45Z

components/data/buckets.tsx

+  link: string;
+  className: string;
+  borderClassName: string;
+  Icon: React.ComponentType<any>;


Why this key is duplicated when there already exists an icon key with the same value?

Instead of using React.ComponentType<any>, you can define a IconType in types folder as React.ReactElement.

anshgoyalevil · 2024-03-14T12:35:07Z

types/form/Select.ts

+    className?: string;
+    onChange?: (selected: string) => void;
+    options: Option[];
+    selected?: string;


Suggested change

selected?: string;

selected: string;

vishvamsinh28 · 2024-03-25T09:53:42Z

@akshatnema updated the navigation pr

akshatnema · 2024-03-25T17:09:34Z

components/languageSelector/LanguageSelect.tsx

+  onChange = () => {},
+  options = [],
+  selected
+}: SelectProps) {


Why are we defining LanguageSelect props with SelectProps?

because they both have same props

akshatnema · 2024-03-25T17:11:21Z

components/navigation/DocsMobileMenu.tsx

+  post: {
+      slug: string;
+  };


Define post using Post type.

akshatnema · 2024-03-25T17:13:52Z

components/navigation/DocsNavItem.tsx

+  bucket?: {
+      className: string;
+      icon: React.ComponentType<any>;
+  };


Can we have same definition of bucket as defined in other files. I think there should be centralised definition of Bucket for all the buckets variable passed in the components.

I tried that, but it showed errors when I used the same definition. That's why I made some props optional for buckets in some files and made some props compulsory for other files. Consequently, I created 2-3 different definitions for buckets for different files, but they are essentially the same; only the props are optional in some files.

akshatnema · 2024-03-25T17:18:14Z

components/navigation/MenuBlocks.tsx

+
+        return (
+          <LinkComponent href={item.comingSoon ? '' : item.href} key={index}>
+            <a


Suggested change

<a

<span

Instead of a tag, you can use span tag.

it is throwing an error beacause span doesnt have target attribute

akshatnema · 2024-03-25T17:29:34Z

components/navigation/EventFilter.tsx

+
+  useEffect(() => {
+    switch (active) {
+      case 'All':


You can create a enum for these strings.

vishvamsinh28 · 2024-03-26T18:14:30Z

@akshatnema updated the pr

akshatnema · 2024-03-27T14:19:53Z

components/form/Select.tsx

+ * @description Select component for form dropdown.
+ * @param {string} [props.className=''] - Additional CSS classes for the select element.
+ * @param {(value: string) => void} [props.onChange=() => {}] - Function to handle onChange event.
+ * @param {Array<{ value: string, text: string }>} props.options - Array of options for the select dropdown.


Suggested change

* @param {Array<{ value: string, text: string }>} props.options - Array of options for the select dropdown.

* @param {Option[]} props.options - Array of options for the select dropdown.

akshatnema · 2024-03-27T14:21:14Z

components/helpers/applyFilter.ts

+ * @param checks Array of filter criteria objects.
+ * @param data Array of data objects to filter.
+ * @param setFilters Function to update the filters.


Define type of these parameters in jsdocs as well. Applicable everywhere.

akshatnema · 2024-03-27T14:25:00Z

components/navigation/DocsNav.tsx

+const serializedBuckets: SerializedBuckets = buckets.reduce(
+  (acc, bucket) => {
+    acc[bucket.name || ''] = {
+      ...bucket,
+      className: `${bucket.className || ''} ${bucket.borderClassName || ''}`
+    };
+
+    return acc;
+  },
+  {
+    welcome: {
+      icon: IconHome,
+      className: 'bg-gray-300 border-gray-300'
+    }
+  } as SerializedBuckets
+);


Add a comment here, explaining what we are doing here.

akshatnema · 2024-03-27T14:30:58Z

components/link.tsx

+  */
+  if ((props.href && i18nPaths[language] && !i18nPaths[language].includes(href)) || href.includes('http', 0)) {
+    return (
+      <Link href={href} passHref legacyBehavior>


Why are we adding legacyBehavior everywhere?

akshatnema · 2024-03-27T17:19:47Z

components/typography/TextLink.tsx

@@ -31,6 +31,7 @@ export default function TextLink({ href, className = '', target = '_blank', chil
      className={classNames}
      id={id}
      data-testid='TextLink-href'
+      legacyBehavior


Try to avoid legacyBehavior for Link tag.

vishvamsinh28 · 2024-03-28T11:36:12Z

@akshatnema updated the pr

vishvamsinh28 · 2024-03-28T17:15:15Z

@akshatnema package-lock updated

akshatnema · 2024-03-29T02:11:01Z

/rtm

vishvamsinh28 added 12 commits March 10, 2024 17:19

added link.tsx

e528e52

added few component

3c824af

fixed errors

83444af

docnavitem , subcategory, docsbav added

a649761

separated types

f1be895

converted functions

84a11bc

docs mobile menu added

4e764b6

event post added

eef5c56

nav added

cb317ae

navigation completed

9ba9840

lint fix

1bf07bb

lint fix

32536c9

vishvamsinh28 requested review from derberg, akshatnema, magicmatatjahu, anshgoyalevil, Mayaleeeee and asyncapi-bot-eve as code owners March 12, 2024 16:40

vishvamsinh28 and others added 7 commits March 12, 2024 22:21

context fix

2fc06e5

build fix

60be5f3

update package.json

e8f1533

lint fix

8ce958e

lint fix

04c77f1

fixed all lint errors

d0b153d

fix AsyncAPILogo

ffe65e1

anshgoyalevil reviewed Mar 14, 2024

View reviewed changes

vishvamsinh28 added 2 commits March 25, 2024 15:19

heroicons update

6c9d0a6

lint fix

b68ee15

akshatnema requested changes Mar 25, 2024

View reviewed changes

akshatnema reviewed Mar 25, 2024

View reviewed changes

vishvamsinh28 and others added 7 commits March 26, 2024 22:55

Merge branch 'migrate-ts' into MigrateNavigation

2450b61

fix lint errors

8abc0ef

lint fix

6bf191b

pr updates

5e13f4f

lint fix

9749734

bucket issue fixed

a4ada49

lint fix

1ff5b52

Merge branch 'migrate-ts' into MigrateNavigation

a4e23df

akshatnema requested changes Mar 27, 2024

View reviewed changes

vishvamsinh28 added 3 commits March 28, 2024 16:46

pr updates

d52d3da

lint fix

e1a0293

lint fix

e993658

akshatnema added 2 commits March 28, 2024 20:57

updated Link component

37e3634

updated MenuBlocks and Link component for target and rel attributes

c2185aa

akshatnema previously approved these changes Mar 28, 2024

View reviewed changes

Merge branch 'migrate-ts' into MigrateNavigation

d7856e2

akshatnema dismissed their stale review via d7856e2 March 28, 2024 15:40

package-lock update

cfb4c8c

akshatnema approved these changes Mar 29, 2024

View reviewed changes

asyncapi-bot added the ready-to-merge label Mar 29, 2024

asyncapi-bot merged commit 769d4ef into asyncapi:migrate-ts Mar 29, 2024
14 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: migrate navigation #2765

feat: migrate navigation #2765

vishvamsinh28 commented Mar 12, 2024

netlify bot commented Mar 12, 2024 •

edited

Loading

anshgoyalevil Mar 14, 2024 •

edited

Loading

anshgoyalevil Mar 14, 2024

anshgoyalevil Mar 14, 2024

akshatnema Mar 14, 2024

anshgoyalevil Mar 14, 2024

akshatnema Mar 14, 2024

anshgoyalevil Mar 14, 2024

vishvamsinh28 commented Mar 25, 2024

akshatnema Mar 25, 2024

vishvamsinh28 Mar 26, 2024

akshatnema Mar 25, 2024

akshatnema Mar 25, 2024

vishvamsinh28 Mar 26, 2024

akshatnema Mar 25, 2024

vishvamsinh28 Mar 26, 2024

akshatnema Mar 25, 2024

vishvamsinh28 commented Mar 26, 2024

akshatnema Mar 27, 2024

akshatnema Mar 27, 2024

akshatnema Mar 27, 2024

akshatnema Mar 27, 2024

akshatnema Mar 27, 2024

vishvamsinh28 commented Mar 28, 2024

vishvamsinh28 commented Mar 28, 2024

akshatnema commented Mar 29, 2024

	* @param {Array<{ value: string, text: string }>} props.options - Array of options for the select dropdown.
	* @param {Option[]} props.options - Array of options for the select dropdown.

feat: migrate navigation #2765

feat: migrate navigation #2765

Conversation

vishvamsinh28 commented Mar 12, 2024

netlify bot commented Mar 12, 2024 • edited Loading

✅ Deploy Preview for asyncapi-website ready!

anshgoyalevil Mar 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vishvamsinh28 commented Mar 25, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vishvamsinh28 commented Mar 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vishvamsinh28 commented Mar 28, 2024

vishvamsinh28 commented Mar 28, 2024

akshatnema commented Mar 29, 2024

netlify bot commented Mar 12, 2024 •

edited

Loading

anshgoyalevil Mar 14, 2024 •

edited

Loading