Merge branch 'main' into docs/update-devtools-folder-structure

package.json

@@ -32,6 +32,7 @@
     "react": "^18.0.0",
     "react-bootstrap": "^2.10.2",
     "react-dom": "^18.0.0",
+    "react-tooltip": "^5.28.0",
     "sass": "^1.77.3"
   },
   "devDependencies": {

src/components/Homepage/Aside/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {ShareButtons} from "/src/components/ShareButtons";
+import { ToTopButton } from '/src/components/ToTopButton'
 
 import styles from './styles.module.scss';
 import clsx from "clsx";
@@ -38,6 +39,7 @@ export default function Aside({editUrl}){
       <div className={`flex-grow-1 position-relative d-none d-lg-flex flex-column`}>
         <div className={clsx(styles.docItemAsideBottom, 'position-sticky mt-auto')}>
           <ShareButtons/>
+          <ToTopButton className="mt-24"/>
         </div>
       </div>
     </div>

src/components/Link/index.js

@@ -12,6 +12,7 @@ export default function Link ({href, className, target, title, children, ...prop
       rel={(!isInternal || target === `_blank`) ? `noopener noreferrer` : null}
       title={title || null}
       onClick={props.onClick}
+      {...props}
     >
       {children}
     </LinkDoc>

src/components/ShareButtons/index.js

@@ -78,7 +78,7 @@ export const ShareButtons = ({className}) => {
               }}
       >
         Copy page link
-        {showTip && (<span className={`position-absolute top-100 end-0 mt-12 text-body`}>Copied!</span>)}
+        {showTip && (<span className={`position-absolute top-100 end-0 mt-6 text-body`}>Copied!</span>)}
       </Button>
     </div>
 )

src/components/ShieldsBadge/index.js

@@ -0,0 +1,76 @@
+import React from 'react'
+import {useEffect, useState} from 'react'
+import { Tooltip } from 'react-tooltip'
+import { useColorMode } from '@docusaurus/theme-common'
+import Link from '/src/components/Link';
+
+function generateUniqueId(prefix = 'id') {
+  return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}
+export const badgeSrc = ({ title, color, logo, logoColor, label, labelColor, version }) => {
+  if (version) {
+    title = version
+    label = label ?? 'version'
+    color = color ?? 'blue'
+  }
+
+  let encodedTitle = title ? title.replace(/-/g, '--').replace(/_/g, '__').replace(/ /g, '_') : ''
+
+  const colorsMatch = {
+    pink: '#FF70E0',
+    purple: '#9E75FF',
+    green: '#78C700',
+    orange: '#FF9100',
+    cyan: '#08FFD1',
+    yellow: '#DEFF1A'
+  }
+
+  color = colorsMatch[color] || color
+  labelColor = colorsMatch[labelColor] || labelColor || 'gray'
+  label = label ? `&label=${label}&labelColor=${labelColor}` : ''
+
+  logoColor = colorsMatch[logoColor] || logoColor || 'white'
+  logo = logo ? `&logo=${logo}&logoColor=${logoColor}` : ''
+
+  return encodeURI(
+    `https://img.shields.io/badge/${encodedTitle}-${color || 'gray'}?${logo}${label}`
+  ).replace(/#/g, '%23')
+}
+
+function Tag ({ children, href, ...props }) {
+  return href ? (
+    <Link href={href} {...props}>
+      {children}
+    </Link>
+  ) : (
+    <span {...props}>{children}</span>
+  )
+}
+
+export default function ShieldsBadge ({ title, color, href, label, labelColor, logo, logoColor, version, tooltip = null, ...props }) {
+
+  const src = badgeSrc({ title, color, logo, logoColor, label, labelColor, version })
+
+  const tooltipId = tooltip ? generateUniqueId('tooltip') : null;
+
+  const {colorMode} = useColorMode();
+  const [toolTipColor, setTooltipColor] = useState('light');
+
+  useEffect(() => {
+    if (tooltip) {
+      setTooltipColor(colorMode === 'light' ? 'dark' : 'light');
+    }
+  }, [colorMode]);
+
+  return src && <>
+    <Tag href={href || null} {...props} className={`d-inline-flex align-bottom`}
+         data-tooltip-id={tooltip && tooltipId}
+         data-tooltip-content={tooltip}
+    >
+      <img src={src} alt={title || ''} {...props} />
+      {tooltip && (
+        <Tooltip id={tooltipId} opacity={0.95} wrapper={"span"} variant={toolTipColor} className="px-8 py-4 fs-12"/>
+      )}
+    </Tag>
+  </>
+}

src/components/ToTopButton/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import Button from '../Button'
+import clsx from 'clsx'
+import Translate from '@docusaurus/Translate';
+
+export const ToTopButton = ({ className }) => {
+
+  return (
+    <Button
+      className={clsx(className)}
+      size={`sm`}
+      icon={`arrow-top`}
+      onClick={() => {
+        if (window) {
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }
+      }}
+    >
+      <Translate
+        id="theme.common.backToTop">
+        Back to top
+      </Translate>
+    </Button>
+  )
+}

src/pages/components.md

@@ -127,35 +127,13 @@ You can add images in two ways on our doc.
 ## Gallery/Slider
 Use this to showcase a series of images or content that benefit from a swiping or sliding interface.
 
-- **Code**
+- **Codes**
 ```jsx
 <Carousel width="370" height="260" images={['/img/concepts/rootstock-tech-stack.svg', ... , '/img/metamask-gas-limit.png']} />
 ```
 **Result**
 <Carousel width="370" height="260" images={['/img/concepts/rootstock-tech-stack.svg', '/img/legacy-private-key.png', '/img/metamask-gas-limit.png', '/img/add-ganache-1.png', '/img/add-ganache-2.png']} />
 
-## Gallery/Slider images with links.
-
-- **Code**
-```jsx
-<Carousel width="370" height="260" >
-  <CarouselItem image="/img/concepts/rootstock-tech-stack.svg" href="/resources" />
-  <CarouselItem image="/img/legacy-private-key.png" href="https://rootstock.io" target="_blank" />
-  <CarouselItem image="/img/metamask-gas-limit.png" href="/dev-tools" />
-  <CarouselItem image="/img/add-ganache-1.png" />
-  <CarouselItem image="/img/add-ganache-2.png" href="/developers" />
-</Carousel>
-
-```
-**Result**
-
-<Carousel width="370" height="260" >
-<CarouselItem image="/img/concepts/rootstock-tech-stack.svg" href="/resources" />
-<CarouselItem image="/img/legacy-private-key.png" href="https://rootstock.io" target="_blank" />
-<CarouselItem image="/img/metamask-gas-limit.png" href="/dev-tools" />
-<CarouselItem image="/img/add-ganache-1.png" />
-<CarouselItem image="/img/add-ganache-2.png" href="/developers" />
-</Carousel>
 
 ## Video
 Use this to demonstrate functionalities, complex explanations, or walkthroughs.
@@ -586,7 +564,6 @@ description="Get an API key & make your first API call in minutes. Get an API ke
 />
 </Filter>
 
-
 ## Grid of Cards no filter
 - **Code**
 
@@ -675,6 +652,83 @@ description="Get an API key & make your first API call in minutes. Get an API ke
 Default <Button href="/dev-tools/">Default Button</Button>, small <Button size="sm" href="/developers/">Small Button</Button>, and large <Button size="lg" href="/resources/">Large Button</Button> buttons for different use cases.
 
 
+## Badges
+Badges <Shield label="any text" title="you like" color="blue" /> <Shield label="build" title="passing" color="green" /> based on [shields.io](https://shields.io/)
+
+Available options:
+```jsx
+<Shield label="any text" //badge left part
+        labelColor="blue" //text, hex or rgb values
+        title="you like" //badge right part or main text
+        color="blue" //brand colors (pink, purple, green, orange) or any hex or rgb values
+        tooltip="Hello from Rootstock" //tooltip text
+        href="https://rootstock.io/" //link
+        version="1.0.1" //version number (use blue color by default)
+        logo="bitcoin" //logo name
+        logoColor="black" //logo color
+/>
+```
+Detailed option description you can find [here](https://shields.io/badges/static-badge)
+
+- **Code**
+```jsx
+<Shield label="any text" title="you like" color="blue" />
+<Shield title="Badge with tooltip" tooltip="Hello from Rootstock"/>
+<Shield title="Rootstock Dev Portal" color="pink" />
+<Shield label="build" title="passing" color="green" />
+```
+- **Render**
+
+<Shield label="any text" title="you like" color="blue" />
+<Shield title="Badge with tooltip" tooltip="Hello from Rootstock" />
+<Shield title="Rootstock Dev Portal" color="pink" />
+<Shield label="build" title="passing" color="green" />
 
 
+#### Version badge
+
+- **Code**
+```jsx
+<Shield version="2.0" /> //default color is blue
+<Shield version="1.0.1" color="purple" /> //you can change color
+```
+- **Render**
+
+<Shield version="2.0" />
+<Shield version="1.0.1" color="purple" />
+
+#### Colors
+
+Brand colors (pink, purple, green, orange) or any text colors, hex or rgb values
+
+- **Code**
+```jsx
+<Shield title="Rootstock Dev Portal" color="purple" />
+<Shield title="Node Operators" color="pink" />
+<Shield title="Concepts" color="green" />
+<Shield title="Developers" color="orange" />
+<Shield title="Dogecoin" color="C2A633" />
+```
+
+- **Render**
+
+<Shield title="Rootstock Dev Portal" color="purple" />
+<Shield title="Node Operators" color="pink" />
+<Shield title="Concepts" color="green" />
+<Shield title="Developers" color="orange" />
+<Shield title="Dogecoin" color="C2A633" />
+
+#### Tooltip, logo and link
+Available logo options you can find [here](https://github.com/inttter/md-badges).
+- **Code**
+```jsx
+<Shield title="Badge with link and tooltip" tooltip="Badge with link and tooltip" href="https://rootstock.io/" color="purple" />
+<Shield title="Badge with logo" href="https://bitcoin.org/" color="gray" label="Bitcoin" labelColor="f7931a" logo="bitcoin" />
+<Shield color="F3B724" title="Zcash" logo="zcash" logoColor="black" />
+```
+
+- **Render**
 
+<Shield title="Badge with link and tooltip" tooltip="Badge with link and tooltip" href="https://rootstock.io/" color="purple" />
+<Shield title="Badge with logo" href="https://bitcoin.org/" color="gray" label="Bitcoin" labelColor="f7931a" logo="bitcoin" />
+<Shield color="F3B724" title="Zcash" logo="zcash" logoColor="black" />

src/scss/base/_content.scss

@@ -32,7 +32,6 @@ ul{
     color: var(--bs-heading-color);
     -webkit-box-decoration-break: clone;
     box-decoration-break: clone;
-    display: inline;
     font-size: $f40;
     letter-spacing: -0.04em;
     margin: 0;
@@ -152,7 +151,7 @@ ul{
     }
   }
 
-  img{
+  img:not([src*="shields.io"]){
     border: 1px solid var(--rsk-image-border-color);
     border-radius: 10px;
     max-height: 500px; //TODO test if works for all images

src/theme/BlogAside/index.js

@@ -7,6 +7,7 @@ import clsx from "clsx";
 import {FeedbackForm} from "/src/components/FeedbackForm";
 
 import Translate from '@docusaurus/Translate';
+import { ToTopButton } from '../../components/ToTopButton'
 
 export default function BlogAside({editUrl}){
   return <div className={clsx(styles.docItemAside, `h-100 pt-40 pt-lg-0 ps-lg-24`)}>
@@ -27,6 +28,7 @@ export default function BlogAside({editUrl}){
       <div className={`flex-grow-1 position-relative d-none d-lg-flex flex-column`}>
         <div className={clsx(styles.docItemAsideBottom, 'position-sticky mt-auto')}>
           <ShareButtons/>
+          <ToTopButton className="mt-24"/>
         </div>
       </div>
     </div>

src/theme/DocItem/Aside/index.js

@@ -12,6 +12,7 @@ import MoreActions from "@theme/DocItem/MoreActions";
 
 import clsx from "clsx";
 import styles from './styles.module.scss';
+import { ToTopButton } from '../../../components/ToTopButton'
 
 const DocTOCDesktop = () => {
 	const {frontMatter, toc} = useDoc();
@@ -32,6 +33,7 @@ export default function DocItemAside() {
 			<div className={`flex-grow-1 position-relative d-flex flex-column`}>
 				<div className={clsx(styles.docItemAsideBottom, 'position-sticky mt-auto')}>
 					<ShareButtons />
+          <ToTopButton className="mt-24"/>
 				</div>
 			</div>
  		</div>

src/theme/MDXComponents.js

@@ -11,6 +11,7 @@ import Video from "/src/components/Video";
 import Card from "/src/components/CardSimple";
 import Filter from "/src/components/Filter";
 import FilterItem from "/src/components/Filter/FilterItem";
+import Shield from "/src/components/ShieldsBadge";
 import Button from "/src/components/Button";
 import CardsGrid from "/src/components/CardsGrid";
 import CardsGridItem from "/src/components/CardsGrid/Card";
@@ -20,5 +21,5 @@ export default {
   ...MDXComponents,
   // Map the "<Highlight>" tag to our Highlight component
   // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
-  Carousel, CarouselItem, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem, Button, CardsGrid, CardsGridItem
+  Carousel, CarouselItem, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem, Button, CardsGrid, CardsGridItem, Shield
 };

yarn.lock

@@ -1658,6 +1658,26 @@
     utility-types "^3.10.0"
     webpack "^5.88.1"
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@^1.6.1":
+  version "1.6.12"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.12.tgz#6333dcb5a8ead3b2bf82f33d6bc410e95f54e556"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+
 "@formspark/use-formspark@^0.1.39":
   version "0.1.39"
   resolved "https://registry.yarnpkg.com/@formspark/use-formspark/-/use-formspark-0.1.39.tgz#155af2f5f587d754e1541519e3d69691823770a8"
@@ -3070,7 +3090,7 @@ ci-info@^3.2.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
-classnames@^2.3.2:
+classnames@^2.3.0, classnames@^2.3.2:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -7169,6 +7189,14 @@ [email protected], react-router@^5.3.4:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-tooltip@^5.28.0:
+  version "5.28.0"
+  resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-5.28.0.tgz#c7b5343ab2d740a428494a3d8315515af1f26f46"
+  integrity sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+    classnames "^2.3.0"
+
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"