Merge branch 'main' into chore/migrate-away-from-rush

packages/apps/docs/src/components/BottomPageSection/BottomPageSection.tsx

@@ -5,6 +5,7 @@ import { Subscribe } from './components/Subscribe';
 import { bottomWrapperClass, bottomWrapperCodeLayoutClass } from './styles.css';
 
 import { INavigation } from '@/types/Layout';
+import { analyticsEvent, EVENT_NAMES } from '@/utils/analytics';
 import classnames from 'classnames';
 import Link from 'next/link';
 import React, { FC } from 'react';
@@ -24,19 +25,38 @@ export const BottomPageSection: FC<IProps> = ({
     [bottomWrapperCodeLayoutClass]: layout === 'code',
   });
 
+  const onClickAction = (page: 'prev' | 'next', href?: string): void => {
+    if (!href) return;
+    analyticsEvent(
+      page === 'next'
+        ? EVENT_NAMES['click:next_page']
+        : EVENT_NAMES['click:previous_page'],
+      {
+        label: `to: ${href}`,
+        url: window.location.href,
+      },
+    );
+  };
+
   return (
     <div className={classes}>
       <Stack alignItems="center" justifyContent="space-between">
         <EditPage editLink={editLink} />
         {navigation?.previous !== undefined && (
-          <Link href={navigation?.previous.root}>
+          <Link
+            onClick={() => onClickAction('prev', navigation?.previous?.root)}
+            href={navigation?.previous.root}
+          >
             previous:
             <br />
             {navigation?.previous.title}
           </Link>
         )}
         {navigation?.next !== undefined && (
-          <Link href={navigation?.next.root}>
+          <Link
+            onClick={() => onClickAction('next', navigation?.next?.root)}
+            href={navigation?.next.root}
+          >
             next:
             <br />
             {navigation?.next.title}

packages/apps/docs/src/components/BottomPageSection/components/EditPage.tsx

@@ -1,5 +1,6 @@
 import { Button } from '@kadena/react-ui';
 
+import { analyticsEvent, EVENT_NAMES } from '@/utils/analytics';
 import React, { FC } from 'react';
 
 interface IProps {
@@ -8,11 +9,18 @@ interface IProps {
 
 export const EditPage: FC<IProps> = ({ editLink }) => {
   if (!editLink) return null;
+  const onClick = async (
+    event: React.MouseEvent<HTMLElement>,
+  ): Promise<void> => {
+    event.preventDefault();
+    event.stopPropagation();
+    analyticsEvent(EVENT_NAMES['click:edit_page']);
+    window.open(editLink, '_blank');
+  };
   return (
     <Button
-      as="a"
-      href={editLink}
-      target="_blank"
+      as="button"
+      onClick={onClick}
       rel="noreferrer"
       title="Edit this page"
     >

packages/apps/docs/src/components/Layout/components/Header/HamburgerMenuToggle.tsx

@@ -2,6 +2,7 @@ import { SystemIcons } from '@kadena/react-components';
 
 import { HamburgerButton } from './styles';
 
+import { analyticsEvent, EVENT_NAMES } from '@/utils/analytics';
 import React, { FC } from 'react';
 
 interface IProps {
@@ -10,11 +11,17 @@ interface IProps {
 }
 
 export const HamburgerMenuToggle: FC<IProps> = ({ toggleMenu, isMenuOpen }) => {
+  const onToggleMenu = (): void => {
+    if (!isMenuOpen) {
+      analyticsEvent(EVENT_NAMES['click:mobile_menu_open']);
+    }
+    toggleMenu();
+  };
   return (
     <HamburgerButton
       data-cy="hamburgermenu"
       title="Open the sidemenu"
-      onClick={toggleMenu}
+      onClick={onToggleMenu}
       icon={isMenuOpen ? SystemIcons.Close : SystemIcons.MenuOpen}
       color="inverted"
     />

packages/apps/docs/src/components/Layout/components/Header/Header.tsx

@@ -67,8 +67,7 @@ export const Header: FC<IProps> = ({ menuItems, layout = 'full' }) => {
 
         <HeaderSocialIconGroup>
           <IconButton
-            as="a"
-            href="https://twitter.com/kadena_io"
+            as="button"
             title="Go to our Twitter"
             icon={SystemIcon.Twitter}
             color="inverted"

packages/apps/docs/src/components/Layout/components/SideMenu/SideMenu.tsx

@@ -16,6 +16,7 @@ import {
 import { useSideMenu } from './useSideMenu';
 
 import { IMenuItem } from '@/types/Layout';
+import { analyticsEvent, EVENT_NAMES } from '@/utils/analytics';
 import { useRouter } from 'next/router';
 import React, { FC, KeyboardEvent } from 'react';
 
@@ -37,6 +38,10 @@ export const SideMenu: FC<IProps> = ({ closeMenu, menuItems }) => {
     e.preventDefault();
     const value = e.currentTarget.value;
     if (e.key === 'Enter') {
+      analyticsEvent(EVENT_NAMES['send:mobile_search'], {
+        label: value,
+        url: window.location.href,
+      });
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       router.push(`/search?q=${value}`);
       closeMenu();

packages/apps/docs/src/components/Markdown/Paragraph/Paragraph.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@kadena/react-components';
+import { wrapperClass } from '../styles.css';
 
 import { BodyText } from '@/components/Typography';
 import React, { FC } from 'react';
@@ -7,10 +7,10 @@ interface IProp {
   children: string;
 }
 
-const StyledBodyText = styled(BodyText, {
-  margin: '$5 0',
-});
-
 export const Paragraph: FC<IProp> = ({ children }) => {
-  return <StyledBodyText as="p">{children}</StyledBodyText>;
+  return (
+    <div className={wrapperClass}>
+      <BodyText as="p">{children}</BodyText>
+    </div>
+  );
 };

packages/apps/docs/src/components/Markdown/Table/Table.tsx

@@ -1,16 +1,13 @@
-import { styled } from '@kadena/react-components';
 import { ITableProps, Table as StyledTable } from '@kadena/react-ui';
 
-import React, { FC } from 'react';
+import { wrapperClass } from '../styles.css';
 
-const Wrapper = styled('div', {
-  margin: '$5 0',
-});
+import React, { FC } from 'react';
 
 export const Table: FC<ITableProps> = ({ children }) => {
   return (
-    <Wrapper>
+    <div className={wrapperClass}>
       <StyledTable.Root>{children}</StyledTable.Root>
-    </Wrapper>
+    </div>
   );
 };

packages/apps/docs/src/components/Markdown/Youtube/Youtube.tsx

@@ -1,4 +1,4 @@
-import { StyledWrapper } from './styles';
+import { wrapperClass } from './styles.css';
 
 import React, { FC } from 'react';
 
@@ -9,7 +9,7 @@ interface IProps {
 
 export const Youtube: FC<IProps> = ({ videoId, title }) => {
   return (
-    <StyledWrapper>
+    <div className={wrapperClass}>
       <iframe
         width="100%"
         height="100%"
@@ -19,6 +19,6 @@ export const Youtube: FC<IProps> = ({ videoId, title }) => {
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         allowFullScreen
       ></iframe>
-    </StyledWrapper>
+    </div>
   );
 };

packages/apps/docs/src/components/Markdown/Youtube/styles.css.ts

@@ -0,0 +1,12 @@
+import { sprinkles } from '@kadena/react-ui/theme';
+
+import { style } from '@vanilla-extract/css';
+
+export const wrapperClass = style([
+  sprinkles({
+    width: '100%',
+  }),
+  {
+    aspectRatio: '16 / 9',
+  },
+]);

packages/apps/docs/src/components/Markdown/styles.css.ts

@@ -0,0 +1,10 @@
+import { sprinkles } from '@kadena/react-ui/theme';
+
+import { style } from '@vanilla-extract/css';
+
+export const wrapperClass = style([
+  sprinkles({
+    marginY: '$5',
+    marginX: 0,
+  }),
+]);

packages/apps/docs/src/components/Search/Search.tsx

@@ -2,6 +2,7 @@ import { SearchResults } from './components/SearchResults';
 
 import { useSearch } from '@/hooks';
 import { useSemanticSearch } from '@/hooks/useSearch/useSemanticSearch';
+import { analyticsEvent, EVENT_NAMES } from '@/utils/analytics';
 import React, { FC, useEffect, useState } from 'react';
 
 interface IProps {
@@ -35,6 +36,14 @@ export const Search: FC<IProps> = ({ query, hasScroll, limitResults }) => {
       if (tabName === 'docs') {
         handleSemanticSubmit(query);
       }
+
+      analyticsEvent(
+        EVENT_NAMES[tabName === 'qa' ? 'search:qa' : 'search:docs'],
+        {
+          label: query,
+          url: window.location.href,
+        },
+      );
     }
   }, [query, tabName, handleSemanticSubmit, handleSearchSubmit]);
 

packages/apps/docs/src/hooks/useSearch/useSearch.ts

@@ -60,7 +60,6 @@ export const useSearch = (): IProps => {
   const handleSubmit = useCallback(
     async (value: string): Promise<void> => {
       if (value === undefined || query === value) return;
-
       dispatch({ type: 'reset' });
       setQuery(value);
       await updateQuery(value);

packages/apps/docs/src/pages/_app.tsx

@@ -13,10 +13,11 @@ import { markDownComponents } from '@/components/Markdown';
 import { MenuProvider, ThemeProvider } from '@/hooks';
 import { IPageMeta, IPageProps } from '@/types/Layout';
 import { getLayout } from '@/utils';
+import onExternalButtonClick from '@/utils/onExternalButtonClick';
 import { MDXProvider } from '@mdx-js/react';
 import { AppProps } from 'next/app';
 import Head from 'next/head';
-import React, { FC } from 'react';
+import React, { FC, useEffect } from 'react';
 
 const GlobalStyles = globalCss({
   ...baseGlobalStyles,
@@ -51,6 +52,24 @@ export const MyApp = ({
 
   const Layout = getLayout(props.frontmatter.layout);
 
+  const handleBeforeUnload = (event: BeforeUnloadEvent): void => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { href } = (event as any).originalTarget.activeElement;
+    onExternalButtonClick(href);
+  };
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', handleBeforeUnload, {
+      capture: true,
+    });
+
+    return () => {
+      window.removeEventListener('beforeunload', handleBeforeUnload, {
+        capture: true,
+      });
+    };
+  }, []);
+
   return (
     <>
       <Head>

packages/apps/docs/src/pages/docs/blogchain/2018/pact-2-3-8-is-out-2018-04-09.mdx

@@ -36,7 +36,7 @@ konr’s corrected docs for with-read-default:
 ```
 
 `brew upgrade kadena-io/pact/pact` to get the goodness or head over to the
-[download page](/docs/pact).
+[download page](../../pact).
 
 ## Changelog
 

packages/apps/docs/src/pages/docs/blogchain/2019/all-about-chainweb-101-and-faqs-2019-02-01.mdx

@@ -57,8 +57,7 @@ reviewing the [whitepaper](https://kadena.io/docs/chainweb-v15.pdf)._
 
 _For some recent (Oct 2018) follow-ups on security and addressing assumptions
 and misunderstandings about Kadena’s public blockchain, check out our
-[Medium](https://medium.com/kadena-io/security-kadena-chainweb-blockchain-97e5bdf88c29)
-post._
+[post](../2018/security-kadena-chainweb-blockchain-2018-11-01)._
 
 ## Frequently Asked Tech Questions
 

packages/apps/docs/src/pages/docs/blogchain/2019/announcement-kadena-public-blockchain-testnet-live-2019-03-26.mdx

@@ -50,9 +50,8 @@ Chainweb Testnet v0 includes:
 legacy and integrity of Bitcoin’s proof-of-work protocol. Chainweb is designed
 to give blockchain scalability AND security through its multi-chain
 configuration; we believe it is the first of its kind. For more about Chainweb,
-check out our
-[101/FAQ](https://medium.com/kadena-io/all-about-chainweb-101-and-faqs-6bd88c325b45)
-and read the [whitepaper](https://kadena.io/docs/chainweb-v15.pdf).
+check out our [101/FAQ](./all-about-chainweb-101-and-faqs-2019-02-01.mdx) and
+read the [whitepaper](https://kadena.io/docs/chainweb-v15.pdf).
 
 **How can I participate in testnet?** Beginning with v1 and v2, our testnet will
 become open to the public to participate in the network. v0 is private but open

packages/apps/docs/src/pages/docs/blogchain/2019/announcing-pact-3-0-2019-06-06.mdx

@@ -18,7 +18,7 @@ layout: blog
 ## Announcing Pact 3.0
 
 > _UPDATE: Pact 3.1 is now released! Read more on the
-> [latest updates here](https://medium.com/kadena-io/pact-3-1-is-unleashed-ebfddfb648ce)._
+> [latest updates here](./pact-3-1-is-unleashed-2019-08-22)._
 
 At Kadena, smart contract technology is something we’re very passionate about —
 so we’re excited to
@@ -30,7 +30,7 @@ in both public and private blockchains.
 In this post, we’re going to focus on three new and related features we’ve
 shipped with Pact 3.0: **Capabilities**, **Module Governance**, and **Guards**,
 and how our
-**[Formal Verification](https://medium.com/kadena-io/pact-formal-verification-for-blockchain-smart-contracts-done-right-889058bd8c3f)**
+**[Formal Verification](../2018/pact-formal-verification-for-blockchain-smart-contracts-done-right-2018-05-11)**
 system can help you eliminate bugs. Other major enhancements, like _integrated
 SPV support_ and \*namespaces\*, will be covered in future posts.
 
@@ -97,7 +97,7 @@ Another new feature in Pact turns something that was already awesome —
 upgradeable smart contracts controlled by keysets —into a game changer:
 **generalized module governance**. Now you can implement any governance scheme
 imaginable, right in your smart contract code, and leverage
-[Formal Verification](https://medium.com/kadena-io/pact-formal-verification-for-blockchain-smart-contracts-done-right-889058bd8c3f)
+[Formal Verification](../2018/pact-formal-verification-for-blockchain-smart-contracts-done-right-2018-05-11)
 to ensure it does what you want.
 
 Before Pact 3.0, defining a module required the definition of a keyset, which is

packages/apps/docs/src/pages/docs/blogchain/2019/gauntlet-study-finds-kadena-public-blockchain-is-secure-and-scalable-2019-09-06.mdx

@@ -52,7 +52,7 @@ Kadena is a braided, PoW network currently in testnet. Based on Bitcoin’s PoW
 protocol, Kadena hash-links multiple chains to provide additional security and
 throughput. For more resources on understanding Kadena’s public blockchain,
 refer to our [whitepaper](https://kadena.io/docs/chainweb-v15.pdf) and
-[101 blog post](https://medium.com/kadena-io/all-about-chainweb-101-and-faqs-6bd88c325b45).
+[101 blog post](./all-about-chainweb-101-and-faqs-2019-02-01).
 
 ![A ten-chain configuration of Kadena’s public blockchain, showing how merkle roots are propagated across chains at different blockheights.](/assets/blog/0_AgUQ6JQqbza3urwU.png)