From de7894c64e8a318e11667e3fda87e81406aa2b65 Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Thu, 24 Oct 2024 15:31:20 +0300
Subject: [PATCH 1/7] Shields component init

---
 package.json                         |  1 +
 src/components/ShieldsBadge/index.js | 20 ++++++++++++
 src/pages/components.md              |  8 ++---
 src/theme/MDXComponents.js           |  3 +-
 yarn.lock                            | 48 +++++++++++++++++++++++++++-
 5 files changed, 74 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ShieldsBadge/index.js

diff --git a/package.json b/package.json
index 46716788..e71a3d4b 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@mdx-js/react": "^3.0.0",
     "@mendable/search": "^0.0.206",
     "@splidejs/react-splide": "^0.7.12",
+    "badge-maker": "^4.1.0",
     "bootstrap": "5.3.3",
     "clsx": "^2.0.0",
     "docusaurus-plugin-sass": "^0.2.5",
diff --git a/src/components/ShieldsBadge/index.js b/src/components/ShieldsBadge/index.js
new file mode 100644
index 00000000..3f057b4c
--- /dev/null
+++ b/src/components/ShieldsBadge/index.js
@@ -0,0 +1,20 @@
+import React from "react";
+import Link from '/src/components/Link';
+import clsx from "clsx";
+import { makeBadge, ValidationError } from 'badge-maker'
+
+export default function ShieldsBadge ({variant, href, className, size, target, title, icon, stretched, children, ...props}) {
+
+  const format = {
+    label: 'build',
+    message: 'passed',
+    color: 'brightgreen',
+  }
+
+  const svg = makeBadge(format)
+  console.log(svg) // <svg...
+
+  return <>
+    {svg}
+  </>
+}
diff --git a/src/pages/components.md b/src/pages/components.md
index 98df11ba..b4db3b9b 100644
--- a/src/pages/components.md
+++ b/src/pages/components.md
@@ -4,7 +4,7 @@ title: Components
 
 # Components
 
-## Heading 
+## Heading
 Use this to organize your content and create a hierarchy for scannability. Use `Heading one` for the main title, `Heading two` for subheadings, and so on.
 
 - **Code**
@@ -27,7 +27,7 @@ Use this to organize your content and create a hierarchy for scannability. Use `
 ###### Heading level 6
 
 ## Lists
-Use this to present items in a specific sequence (ordered list) or without order (unordered list). 
+Use this to present items in a specific sequence (ordered list) or without order (unordered list).
 
 
 #### Unordered list
@@ -156,7 +156,7 @@ Use this to demonstrate functionalities, complex explanations, or walkthroughs.
   <Video url="/video/video.mp4" />
   ```
   - **Result**
-  
+
   <Video url="/video/video.mp4" />
 
 - MP4 video with custom thumbnail
@@ -450,7 +450,7 @@ Cards displaying textual information only.
 <Card
 title="Card title first line" description="Mauris maecenas et amet arcu urna interdum aliquet vulputate sed. Quam sit sit tincidunt vitae." link="/developers/" />
 
- 
+
 
 
 <br/>
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
index 0c09e982..bc9ff004 100644
--- a/src/theme/MDXComponents.js
+++ b/src/theme/MDXComponents.js
@@ -10,11 +10,12 @@ 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 Badge from "/src/components/ShieldsBadge";
 
 export default {
   // Re-use the default mapping
   ...MDXComponents,
   // Map the "<Highlight>" tag to our Highlight component
   // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
-  Carousel, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem
+  Carousel, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem, Badge
 };
diff --git a/yarn.lock b/yarn.lock
index 24289ee3..0d3b314d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2635,6 +2635,13 @@ algoliasearch@^4.18.0, algoliasearch@^4.19.1:
     "@algolia/requester-node-http" "4.23.3"
     "@algolia/transporter" "4.23.3"
 
+anafanafo@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/anafanafo/-/anafanafo-2.0.0.tgz#43f56274680bc553dd67a9625a920f88d0057b5c"
+  integrity sha512-Nlfq7NC4AOkTJerWRIZcOAiMNtIDVIGWGvQ98O7Jl6Kr2Dk0dX5u4MqN778kSRTy5KRqchpLdF2RtLFEz9FVkQ==
+  dependencies:
+    char-width-table-consumer "^1.0.0"
+
 ansi-align@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
@@ -2772,6 +2779,14 @@ babel-plugin-polyfill-regenerator@^0.6.1:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.6.2"
 
+badge-maker@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/badge-maker/-/badge-maker-4.1.0.tgz#4035b31e7dd3036d915eddb81699b42f9070b019"
+  integrity sha512-qYImXoz0WZRMaauqSMo6QNurKp26K3RcOhefuGfno50xmAzHEJsgHbP4gnHs6Ps53KgQgFi4MJKB6Rq8H7siww==
+  dependencies:
+    anafanafo "2.0.0"
+    css-color-converter "^2.0.0"
+
 bail@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
@@ -2797,6 +2812,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
+binary-search@^1.3.5:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/binary-search/-/binary-search-1.3.6.tgz#e32426016a0c5092f0f3598836a1c7da3560565c"
+  integrity sha512-nbE1WxOTTrUWIfsfZ4aHGYu5DOuNkbxGokjV6Z2kxfJK3uaAb8zNK1muzOeipoLHZjInT4Br88BHpzevc681xA==
+
 body-parser@1.20.2:
   version "1.20.2"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
@@ -3000,6 +3020,13 @@ char-regex@^1.0.2:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
+char-width-table-consumer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/char-width-table-consumer/-/char-width-table-consumer-1.0.0.tgz#bb44ccd1ba3ed4fcdb062e22876721858a7697a8"
+  integrity sha512-Fz4UD0LBpxPgL9i29CJ5O4KANwaMnX/OhhbxzvNa332h+9+nRKyeuLw4wA51lt/ex67+/AdsoBQJF3kgX2feYQ==
+  dependencies:
+    binary-search "^1.3.5"
+
 character-entities-html4@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
@@ -3120,6 +3147,11 @@ collapse-white-space@^2.0.0:
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-2.1.0.tgz#640257174f9f42c740b40f3b55ee752924feefca"
   integrity sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==
 
+color-convert@^0.5.2:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
+  integrity sha512-RwBeO/B/vZR3dfKL1ye/vx8MHZ40ugzpyfeVG5GsiuGnrlMWe2o8wxBbLCpw9CsxV+wHuzYlCiWnybrIA0ling==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3139,7 +3171,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@~1.1.4:
+color-name@^1.1.4, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -3356,6 +3388,15 @@ crypto-random-string@^4.0.0:
   dependencies:
     type-fest "^1.0.1"
 
+css-color-converter@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/css-color-converter/-/css-color-converter-2.0.0.tgz#70c00fa451a19675e2808f28de9be360c84db5fb"
+  integrity sha512-oLIG2soZz3wcC3aAl/7Us5RS8Hvvc6I8G8LniF/qfMmrm7fIKQ8RIDDRZeKyGL2SrWfNqYspuLShbnjBMVWm8g==
+  dependencies:
+    color-convert "^0.5.2"
+    color-name "^1.1.4"
+    css-unit-converter "^1.1.2"
+
 css-declaration-sorter@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz#6dec1c9523bc4a643e088aab8f09e67a54961024"
@@ -3425,6 +3466,11 @@ css-tree@~2.2.0:
     mdn-data "2.0.28"
     source-map-js "^1.0.1"
 
+css-unit-converter@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
+  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
+
 css-what@^6.0.1, css-what@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"

From 656a23a3cd3edaf0bcfe16ef81439652bf9168b0 Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Mon, 28 Oct 2024 12:48:58 +0200
Subject: [PATCH 2/7] Shields component init

---
 package.json                         |  1 -
 src/components/ShieldsBadge/index.js | 51 ++++++++++++++++++++--------
 src/pages/components.md              |  8 +++++
 src/scss/base/_content.scss          |  2 +-
 yarn.lock                            | 48 +-------------------------
 5 files changed, 47 insertions(+), 63 deletions(-)

diff --git a/package.json b/package.json
index e71a3d4b..46716788 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,6 @@
     "@mdx-js/react": "^3.0.0",
     "@mendable/search": "^0.0.206",
     "@splidejs/react-splide": "^0.7.12",
-    "badge-maker": "^4.1.0",
     "bootstrap": "5.3.3",
     "clsx": "^2.0.0",
     "docusaurus-plugin-sass": "^0.2.5",
diff --git a/src/components/ShieldsBadge/index.js b/src/components/ShieldsBadge/index.js
index 3f057b4c..41c53e25 100644
--- a/src/components/ShieldsBadge/index.js
+++ b/src/components/ShieldsBadge/index.js
@@ -1,20 +1,43 @@
-import React from "react";
-import Link from '/src/components/Link';
-import clsx from "clsx";
-import { makeBadge, ValidationError } from 'badge-maker'
+import React from 'react'
+import Link from '/src/components/Link'
+import clsx from 'clsx'
 
-export default function ShieldsBadge ({variant, href, className, size, target, title, icon, stretched, children, ...props}) {
+export const badgeSrc = ({ title, color, logo, logoColor, label, labelColor }) => {
 
-  const format = {
-    label: 'build',
-    message: 'passed',
-    color: 'brightgreen',
+  const encodedTitle = title.replace(/-/g, '--').replace(/_/g, '__').replace(/ /g, '_')
+  const colorsMatch = {
+    pink : '#FF70E0',
+    purple : '#9E75FF',
+    green : '#78C700',
   }
+  console.log(encodedTitle);
+  color = colorsMatch[color] || color;
+  labelColor = colorsMatch[labelColor] || labelColor || 'gray';
+  label = label ? `&label=${label}&labelColor=${labelColor}` : ''
 
-  const svg = makeBadge(format)
-  console.log(svg) // <svg...
+  logoColor = colorsMatch[logoColor] || logoColor || 'white';
+  logo = logo ? `&logo=${logo}&logoColor=${logoColor}` : ''
 
-  return <>
-    {svg}
-  </>
+  return encodeURI(
+    `https://img.shields.io/badge/${encodedTitle}-${color || 'blue'}?${logo}${label}`
+  ).replace(/#/g, '%23')
+}
+
+function Tag({children, href, ...props}) {
+  return href ? (
+    <Link href={href} {...props}>
+      {children}
+    </Link>
+  ) : (
+    <div {...props}>{children}</div>
+  );
+}
+
+export default function ShieldsBadge ({ title, color, href, label, labelColor, logo, logoColor, ...props }) {
+
+  const src = badgeSrc({ title, color, logo, logoColor, label, labelColor })
+
+  return title && src && <Tag href={href || null} {...props} className={`position-relative z-0 d-inline-flex`}>
+    <img src={src} alt={label ?? name} {...props} />
+  </Tag>
 }
diff --git a/src/pages/components.md b/src/pages/components.md
index b4db3b9b..783babf4 100644
--- a/src/pages/components.md
+++ b/src/pages/components.md
@@ -4,6 +4,14 @@ title: Components
 
 # Components
 
+![Static Badge](https://img.shields.io/badge/any_text-you_like-blue)
+![Static Badge](https://img.shields.io/badge/build-passing-brightgreen)
+[![Netlify](https://img.shields.io/badge/WP-%2300555.svg?logo=wordpress&logoColor=#00C7B7)](#)
+
+<Badge title="Rootstock Dev Portal" color="pink" />
+<Badge title="Rootstock Dev Portal" href="https://rootstock.io/" color="purple" />
+<Badge title="Rootstock Dev Portal" href="https://rootstock.io/" color="8A2BE2" label="Dev label 2" labelColor="blue" logo="bitcoin" />
+
 ## Heading
 Use this to organize your content and create a hierarchy for scannability. Use `Heading one` for the main title, `Heading two` for subheadings, and so on.
 
diff --git a/src/scss/base/_content.scss b/src/scss/base/_content.scss
index 327e85f1..636d9c58 100644
--- a/src/scss/base/_content.scss
+++ b/src/scss/base/_content.scss
@@ -152,7 +152,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
diff --git a/yarn.lock b/yarn.lock
index 0d3b314d..24289ee3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2635,13 +2635,6 @@ algoliasearch@^4.18.0, algoliasearch@^4.19.1:
     "@algolia/requester-node-http" "4.23.3"
     "@algolia/transporter" "4.23.3"
 
-anafanafo@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/anafanafo/-/anafanafo-2.0.0.tgz#43f56274680bc553dd67a9625a920f88d0057b5c"
-  integrity sha512-Nlfq7NC4AOkTJerWRIZcOAiMNtIDVIGWGvQ98O7Jl6Kr2Dk0dX5u4MqN778kSRTy5KRqchpLdF2RtLFEz9FVkQ==
-  dependencies:
-    char-width-table-consumer "^1.0.0"
-
 ansi-align@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.1.tgz#0cdf12e111ace773a86e9a1fad1225c43cb19a59"
@@ -2779,14 +2772,6 @@ babel-plugin-polyfill-regenerator@^0.6.1:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.6.2"
 
-badge-maker@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/badge-maker/-/badge-maker-4.1.0.tgz#4035b31e7dd3036d915eddb81699b42f9070b019"
-  integrity sha512-qYImXoz0WZRMaauqSMo6QNurKp26K3RcOhefuGfno50xmAzHEJsgHbP4gnHs6Ps53KgQgFi4MJKB6Rq8H7siww==
-  dependencies:
-    anafanafo "2.0.0"
-    css-color-converter "^2.0.0"
-
 bail@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/bail/-/bail-2.0.2.tgz#d26f5cd8fe5d6f832a31517b9f7c356040ba6d5d"
@@ -2812,11 +2797,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
-binary-search@^1.3.5:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/binary-search/-/binary-search-1.3.6.tgz#e32426016a0c5092f0f3598836a1c7da3560565c"
-  integrity sha512-nbE1WxOTTrUWIfsfZ4aHGYu5DOuNkbxGokjV6Z2kxfJK3uaAb8zNK1muzOeipoLHZjInT4Br88BHpzevc681xA==
-
 body-parser@1.20.2:
   version "1.20.2"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.2.tgz#6feb0e21c4724d06de7ff38da36dad4f57a747fd"
@@ -3020,13 +3000,6 @@ char-regex@^1.0.2:
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
   integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==
 
-char-width-table-consumer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/char-width-table-consumer/-/char-width-table-consumer-1.0.0.tgz#bb44ccd1ba3ed4fcdb062e22876721858a7697a8"
-  integrity sha512-Fz4UD0LBpxPgL9i29CJ5O4KANwaMnX/OhhbxzvNa332h+9+nRKyeuLw4wA51lt/ex67+/AdsoBQJF3kgX2feYQ==
-  dependencies:
-    binary-search "^1.3.5"
-
 character-entities-html4@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-2.1.0.tgz#1f1adb940c971a4b22ba39ddca6b618dc6e56b2b"
@@ -3147,11 +3120,6 @@ collapse-white-space@^2.0.0:
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-2.1.0.tgz#640257174f9f42c740b40f3b55ee752924feefca"
   integrity sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==
 
-color-convert@^0.5.2:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
-  integrity sha512-RwBeO/B/vZR3dfKL1ye/vx8MHZ40ugzpyfeVG5GsiuGnrlMWe2o8wxBbLCpw9CsxV+wHuzYlCiWnybrIA0ling==
-
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3171,7 +3139,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.1.4, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -3388,15 +3356,6 @@ crypto-random-string@^4.0.0:
   dependencies:
     type-fest "^1.0.1"
 
-css-color-converter@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/css-color-converter/-/css-color-converter-2.0.0.tgz#70c00fa451a19675e2808f28de9be360c84db5fb"
-  integrity sha512-oLIG2soZz3wcC3aAl/7Us5RS8Hvvc6I8G8LniF/qfMmrm7fIKQ8RIDDRZeKyGL2SrWfNqYspuLShbnjBMVWm8g==
-  dependencies:
-    color-convert "^0.5.2"
-    color-name "^1.1.4"
-    css-unit-converter "^1.1.2"
-
 css-declaration-sorter@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz#6dec1c9523bc4a643e088aab8f09e67a54961024"
@@ -3466,11 +3425,6 @@ css-tree@~2.2.0:
     mdn-data "2.0.28"
     source-map-js "^1.0.1"
 
-css-unit-converter@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
-  integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
-
 css-what@^6.0.1, css-what@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"

From d85fd87777ffceeb847dc20dafebafb39279debd Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Mon, 28 Oct 2024 12:58:34 +0200
Subject: [PATCH 3/7] Shields component add version prop

---
 src/components/ShieldsBadge/index.js | 37 +++++++++++++++++-----------
 src/pages/components.md              |  2 ++
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/ShieldsBadge/index.js b/src/components/ShieldsBadge/index.js
index 41c53e25..8c2f25d7 100644
--- a/src/components/ShieldsBadge/index.js
+++ b/src/components/ShieldsBadge/index.js
@@ -2,42 +2,49 @@ import React from 'react'
 import Link from '/src/components/Link'
 import clsx from 'clsx'
 
-export const badgeSrc = ({ title, color, logo, logoColor, label, labelColor }) => {
+export const badgeSrc = ({ title, color, logo, logoColor, label, labelColor, version }) => {
+
+  if (version) {
+    title = version
+    label = 'version'
+    color = 'blue'
+  }
+
+  let encodedTitle = title ? title.replace(/-/g, '--').replace(/_/g, '__').replace(/ /g, '_') : ''
 
-  const encodedTitle = title.replace(/-/g, '--').replace(/_/g, '__').replace(/ /g, '_')
   const colorsMatch = {
-    pink : '#FF70E0',
-    purple : '#9E75FF',
-    green : '#78C700',
+    pink: '#FF70E0',
+    purple: '#9E75FF',
+    green: '#78C700',
   }
-  console.log(encodedTitle);
-  color = colorsMatch[color] || color;
-  labelColor = colorsMatch[labelColor] || labelColor || 'gray';
+
+  color = colorsMatch[color] || color
+  labelColor = colorsMatch[labelColor] || labelColor || 'gray'
   label = label ? `&label=${label}&labelColor=${labelColor}` : ''
 
-  logoColor = colorsMatch[logoColor] || logoColor || 'white';
+  logoColor = colorsMatch[logoColor] || logoColor || 'white'
   logo = logo ? `&logo=${logo}&logoColor=${logoColor}` : ''
 
   return encodeURI(
-    `https://img.shields.io/badge/${encodedTitle}-${color || 'blue'}?${logo}${label}`
+    `https://img.shields.io/badge/${encodedTitle}-${color || 'gray'}?${logo}${label}`
   ).replace(/#/g, '%23')
 }
 
-function Tag({children, href, ...props}) {
+function Tag ({ children, href, ...props }) {
   return href ? (
     <Link href={href} {...props}>
       {children}
     </Link>
   ) : (
     <div {...props}>{children}</div>
-  );
+  )
 }
 
-export default function ShieldsBadge ({ title, color, href, label, labelColor, logo, logoColor, ...props }) {
+export default function ShieldsBadge ({ title, color, href, label, labelColor, logo, logoColor, version, ...props }) {
 
-  const src = badgeSrc({ title, color, logo, logoColor, label, labelColor })
+  const src = badgeSrc({ title, color, logo, logoColor, label, labelColor, version })
 
-  return title && src && <Tag href={href || null} {...props} className={`position-relative z-0 d-inline-flex`}>
+  return src && <Tag href={href || null} {...props} className={`position-relative z-0 d-inline-flex`}>
     <img src={src} alt={label ?? name} {...props} />
   </Tag>
 }
diff --git a/src/pages/components.md b/src/pages/components.md
index 783babf4..466b6aab 100644
--- a/src/pages/components.md
+++ b/src/pages/components.md
@@ -8,7 +8,9 @@ title: Components
 ![Static Badge](https://img.shields.io/badge/build-passing-brightgreen)
 [![Netlify](https://img.shields.io/badge/WP-%2300555.svg?logo=wordpress&logoColor=#00C7B7)](#)
 
+<Badge title="Rootstock Dev Portal" />
 <Badge title="Rootstock Dev Portal" color="pink" />
+<Badge version="2.0" />
 <Badge title="Rootstock Dev Portal" href="https://rootstock.io/" color="purple" />
 <Badge title="Rootstock Dev Portal" href="https://rootstock.io/" color="8A2BE2" label="Dev label 2" labelColor="blue" logo="bitcoin" />
 

From 8de50fcca032f3432e2a9c4368143b450fc4d66d Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Thu, 31 Oct 2024 10:15:24 +0200
Subject: [PATCH 4/7] Shields badge component

---
 package.json                         |  1 +
 src/components/Link/index.js         |  1 +
 src/components/ShieldsBadge/index.js | 42 +++++++++++---
 src/pages/components.md              | 86 ++++++++++++++++++++++++----
 src/scss/base/_content.scss          |  1 -
 src/theme/MDXComponents.js           |  4 +-
 yarn.lock                            | 30 +++++++++-
 7 files changed, 144 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 46716788..fcd2a910 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/Link/index.js b/src/components/Link/index.js
index a2917298..bbc9140d 100644
--- a/src/components/Link/index.js
+++ b/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>
diff --git a/src/components/ShieldsBadge/index.js b/src/components/ShieldsBadge/index.js
index 8c2f25d7..e3aafc6f 100644
--- a/src/components/ShieldsBadge/index.js
+++ b/src/components/ShieldsBadge/index.js
@@ -1,13 +1,19 @@
 import React from 'react'
+import {useEffect, useState} from 'react'
 import Link from '/src/components/Link'
 import clsx from 'clsx'
+import { Tooltip } from 'react-tooltip'
+import { useColorMode } from '@docusaurus/theme-common'
 
-export const badgeSrc = ({ title, color, logo, logoColor, label, labelColor, version }) => {
 
+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 = 'version'
-    color = 'blue'
+    label = label ?? 'version'
+    color = color ?? 'blue'
   }
 
   let encodedTitle = title ? title.replace(/-/g, '--').replace(/_/g, '__').replace(/ /g, '_') : ''
@@ -16,6 +22,9 @@ export const badgeSrc = ({ title, color, logo, logoColor, label, labelColor, ver
     pink: '#FF70E0',
     purple: '#9E75FF',
     green: '#78C700',
+    orange: '#FF9100',
+    cyan: '#08FFD1',
+    yellow: '#DEFF1A'
   }
 
   color = colorsMatch[color] || color
@@ -40,11 +49,30 @@ function Tag ({ children, href, ...props }) {
   )
 }
 
-export default function ShieldsBadge ({ title, color, href, label, labelColor, logo, logoColor, version, ...props }) {
+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 })
 
-  return src && <Tag href={href || null} {...props} className={`position-relative z-0 d-inline-flex`}>
-    <img src={src} alt={label ?? name} {...props} />
-  </Tag>
+  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={label ?? name} {...props} />
+      {tooltip && (
+        <Tooltip id={tooltipId} opacity={0.95} variant={toolTipColor} className="px-8 py-4"/>
+      )}
+    </Tag>
+  </>
 }
diff --git a/src/pages/components.md b/src/pages/components.md
index 466b6aab..8191acb0 100644
--- a/src/pages/components.md
+++ b/src/pages/components.md
@@ -4,16 +4,6 @@ title: Components
 
 # Components
 
-![Static Badge](https://img.shields.io/badge/any_text-you_like-blue)
-![Static Badge](https://img.shields.io/badge/build-passing-brightgreen)
-[![Netlify](https://img.shields.io/badge/WP-%2300555.svg?logo=wordpress&logoColor=#00C7B7)](#)
-
-<Badge title="Rootstock Dev Portal" />
-<Badge title="Rootstock Dev Portal" color="pink" />
-<Badge version="2.0" />
-<Badge title="Rootstock Dev Portal" href="https://rootstock.io/" color="purple" />
-<Badge title="Rootstock Dev Portal" href="https://rootstock.io/" color="8A2BE2" label="Dev label 2" labelColor="blue" logo="bitcoin" />
-
 ## Heading
 Use this to organize your content and create a hierarchy for scannability. Use `Heading one` for the main title, `Heading two` for subheadings, and so on.
 
@@ -574,4 +564,80 @@ description="Get an API key & make your first API call in minutes. Get an API ke
 />
 </Filter>
 
+## 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
+
+- **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" />
diff --git a/src/scss/base/_content.scss b/src/scss/base/_content.scss
index 636d9c58..7ee96eef 100644
--- a/src/scss/base/_content.scss
+++ b/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;
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
index bc9ff004..2e426b3a 100644
--- a/src/theme/MDXComponents.js
+++ b/src/theme/MDXComponents.js
@@ -10,12 +10,12 @@ 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 Badge from "/src/components/ShieldsBadge";
+import Shield from "/src/components/ShieldsBadge";
 
 export default {
   // Re-use the default mapping
   ...MDXComponents,
   // Map the "<Highlight>" tag to our Highlight component
   // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
-  Carousel, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem, Badge
+  Carousel, Tabs, TabItem, Accordion, Card, Quote, Video, Filter, FilterItem, Shield
 };
diff --git a/yarn.lock b/yarn.lock
index 24289ee3..9ccac9c5 100644
--- a/yarn.lock
+++ b/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 @@ react-router@5.3.4, 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"

From 85fcd176073864969ed8d6e3ef9c095b2497fb7f Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Thu, 31 Oct 2024 10:22:52 +0200
Subject: [PATCH 5/7] merge main

---
 src/components/ShieldsBadge/index.js |   2 +-
 src/pages/components.md              | 125 +++++++++++++--------------
 2 files changed, 63 insertions(+), 64 deletions(-)

diff --git a/src/components/ShieldsBadge/index.js b/src/components/ShieldsBadge/index.js
index e3aafc6f..a4f43194 100644
--- a/src/components/ShieldsBadge/index.js
+++ b/src/components/ShieldsBadge/index.js
@@ -71,7 +71,7 @@ export default function ShieldsBadge ({ title, color, href, label, labelColor, l
     >
       <img src={src} alt={label ?? name} {...props} />
       {tooltip && (
-        <Tooltip id={tooltipId} opacity={0.95} variant={toolTipColor} className="px-8 py-4"/>
+        <Tooltip id={tooltipId} opacity={0.95} variant={toolTipColor} className="px-8 py-4 fs-12"/>
       )}
     </Tag>
   </>
diff --git a/src/pages/components.md b/src/pages/components.md
index 12bb439a..990c924c 100644
--- a/src/pages/components.md
+++ b/src/pages/components.md
@@ -564,69 +564,6 @@ description="Get an API key & make your first API call in minutes. Get an API ke
 />
 </Filter>
 
-## 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
-
-- **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" />
-
 ## Grid of Cards no filter
 - **Code**
 
@@ -715,8 +652,70 @@ 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).

From 0360209c0e7f3111e16e9480c37b510cef667b8e Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Thu, 31 Oct 2024 10:36:46 +0200
Subject: [PATCH 6/7] Fix tags children

---
 src/components/ShieldsBadge/index.js | 10 ++++------
 src/pages/components.md              |  3 ++-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/ShieldsBadge/index.js b/src/components/ShieldsBadge/index.js
index a4f43194..3ad2ae13 100644
--- a/src/components/ShieldsBadge/index.js
+++ b/src/components/ShieldsBadge/index.js
@@ -1,10 +1,8 @@
 import React from 'react'
 import {useEffect, useState} from 'react'
-import Link from '/src/components/Link'
-import clsx from 'clsx'
 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)}`;
@@ -45,7 +43,7 @@ function Tag ({ children, href, ...props }) {
       {children}
     </Link>
   ) : (
-    <div {...props}>{children}</div>
+    <span {...props}>{children}</span>
   )
 }
 
@@ -69,9 +67,9 @@ export default function ShieldsBadge ({ title, color, href, label, labelColor, l
          data-tooltip-id={tooltip && tooltipId}
          data-tooltip-content={tooltip}
     >
-      <img src={src} alt={label ?? name} {...props} />
+      <img src={src} alt={title || ''} {...props} />
       {tooltip && (
-        <Tooltip id={tooltipId} opacity={0.95} variant={toolTipColor} className="px-8 py-4 fs-12"/>
+        <Tooltip id={tooltipId} opacity={0.95} wrapper={"span"} variant={toolTipColor} className="px-8 py-4 fs-12"/>
       )}
     </Tag>
   </>
diff --git a/src/pages/components.md b/src/pages/components.md
index 990c924c..a546fce6 100644
--- a/src/pages/components.md
+++ b/src/pages/components.md
@@ -680,10 +680,11 @@ Detailed option description you can find [here](https://shields.io/badges/static
 - **Render**
 
 <Shield label="any text" title="you like" color="blue" />
-<Shield title="Badge with tooltip" tooltip="Hello from Rootstock"/>
+<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**

From 9931887e1b43ad27ae64ebd26a253bd42aa47f75 Mon Sep 17 00:00:00 2001
From: alexcss <kalyuzhnyi@gmail.com>
Date: Thu, 31 Oct 2024 12:30:39 +0200
Subject: [PATCH 7/7] Back to top button

---
 src/components/Homepage/Aside/index.js |  2 ++
 src/components/ShareButtons/index.js   |  2 +-
 src/components/ToTopButton/index.js    | 25 +++++++++++++++++++++++++
 src/theme/BlogAside/index.js           |  2 ++
 src/theme/DocItem/Aside/index.js       |  2 ++
 src/theme/Layout/SVGSprite/index.js    |  3 +++
 6 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ToTopButton/index.js

diff --git a/src/components/Homepage/Aside/index.js b/src/components/Homepage/Aside/index.js
index c2709f85..9a85b0b8 100644
--- a/src/components/Homepage/Aside/index.js
+++ b/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>
diff --git a/src/components/ShareButtons/index.js b/src/components/ShareButtons/index.js
index 618ffe9c..f755c754 100644
--- a/src/components/ShareButtons/index.js
+++ b/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>
 )
diff --git a/src/components/ToTopButton/index.js b/src/components/ToTopButton/index.js
new file mode 100644
index 00000000..d5cffa46
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/theme/BlogAside/index.js b/src/theme/BlogAside/index.js
index 2236b077..e3d2bcf6 100644
--- a/src/theme/BlogAside/index.js
+++ b/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>
diff --git a/src/theme/DocItem/Aside/index.js b/src/theme/DocItem/Aside/index.js
index 0804cacd..24ace006 100644
--- a/src/theme/DocItem/Aside/index.js
+++ b/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>
diff --git a/src/theme/Layout/SVGSprite/index.js b/src/theme/Layout/SVGSprite/index.js
index e1e6c83f..dd2bba23 100644
--- a/src/theme/Layout/SVGSprite/index.js
+++ b/src/theme/Layout/SVGSprite/index.js
@@ -74,6 +74,9 @@ export default function SVGSprite() {
         <symbol viewBox="0 0 16 16" fill="none" id="icon-link-external">
           <path fillRule="evenodd" clipRule="evenodd" d="M3.33333 3.33333V12.6667H12.6667V8H14V14H2V2H8V3.33333H3.33333ZM9.33333 3.33333V2H14V6.66667H12.6667V4.27333L6.11333 10.8267L5.17333 9.88667L11.7267 3.33333H9.33333Z" fill="currentColor"/>
         </symbol>
+        <symbol id="icon-arrow-top" viewBox="0 0 16 16" fill="none">
+          <path d="M7.33 14.67V3.88L4.27 6.93 3.33 6 8 1.33 12.67 6l-.94.95-3.06-3.07v10.79H7.33Z" fill="currentColor"/>
+        </symbol>
 
       </defs>
     </svg>