WIP - tabset

package.json

@@ -20,6 +20,7 @@
   ],
   "devDependencies": {
     "@asciidoctor/core": "~2.2",
+    "@asciidoctor/tabs": "^1.0.0-beta.5",
     "autoprefixer": "~9.7",
     "browser-pack-flat": "~3.4",
     "browserify": "~16.5",

preview-src/index.adoc

@@ -393,3 +393,57 @@ ____
 == Fin
 
 That's all, folks!
+
+[tabs]
+======
+Hardhat::
++
+====
+
+Hardhat is a popular way to deploy and verify your smart contracts onto Ethereum, and can also be used to deploy and verify your smart contracts on SKALE. 
+
+[source,javascript]
+----
+require("@nomicfoundation/hardhat-toolbox");
+----
+
+
+====
+
+Truffle::
++
+====
+
+Truffle is a popular way
+
+[source,javascript]
+----
+let skale = "[YOUR_SKALE_CHAIN_ENDPOINT]";
+
+----
+
+
+====
+
+Node.js::
++
+====
+
+Node.js
+
+[source,javascript]
+----
+const Web3 = require('web3');
+----
+
+====
+
+Remix::
++
+====
+
+Smart contracts 
+
+====
+
+======

preview-src/ui-model.yml

@@ -124,3 +124,6 @@ page:
       - content: Some Code
         url: '/xyz/5.2/index.html#some-code'
         urlType: internal
+asciidoc:
+  extensions:
+  - '@asciidoctor/tabs'

src/css/vendor/tabs.css

@@ -0,0 +1 @@
+@import "@asciidoctor/tabs"

src/js/vendor/tabs.bundle.js

@@ -0,0 +1 @@
+require('@asciidoctor/tabs')

src/partials/footer-scripts.hbs

@@ -1,2 +1,3 @@
 <script src="{{{uiRootPath}}}/js/site.js"></script>
-<script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
+<script async src="{{{uiRootPath}}}/js/vendor/tabs.js"></script>

src/partials/head-styles.hbs

@@ -1,4 +1,5 @@
     <link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
+    <link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/tabs.css">
     {{#if env.ALGOLIA_API_KEY}}
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.css" />
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js"></script>

yarn.lock

@@ -10,6 +10,11 @@
     asciidoctor-opal-runtime "0.3.3"
     unxhr "1.0.1"
 
+"@asciidoctor/tabs@^1.0.0-beta.5":
+  version "1.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/@asciidoctor/tabs/-/tabs-1.0.0-beta.5.tgz#9acb1ddcf355f7e6fe17dcb19af06994f5453fe8"
+  integrity sha512-DwtBO2BfqTyCrbP019c2AWlF+DvK5Q59mEEaAkDp9pdaFLeAyzDc1ZR4D5IYUGL3i9Ms9gCpeHDX+Sp6zNjb8Q==
+
 "@babel/code-frame@^7.0.0":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.13.tgz#dcfc826beef65e75c50e21d3837d7d95798dd658"