Add support to content tabs

book.toml

@@ -6,5 +6,6 @@ language = "en"
 multilingual = false
 
 [output.html]
+additional-js = ["tabs.js"]
 git-repository-url = "https://github.com/smartvaults/book"
 edit-url-template = "https://github.com/smartvaults/book/edit/master/{path}"

src/rust-sdk/01-getting-started.md

@@ -1,5 +1,3 @@
 # Rust SDK
 
-This section will show you how to use the Rust SDK.
-
-TODO: add UniFFI docs next to the Rust docs (use content tabs)
+This section will show you how to use the Rust SDK.

src/rust-sdk/02-installation.md

@@ -1,5 +1,9 @@
 # Installing the library
 
+<custom-tabs category="lang">
+<div slot="title">Rust</div>
+<section>
+
 Add the `smartvaults-sdk` dependency in your `Cargo.toml` file:
 
 ```toml
@@ -23,4 +27,55 @@ Use a specific commit:
 ```toml
 [dependencies]
 smartvaults-sdk = { git = "https://github.com/smartvaults/smartvaults", rev = "383c186cb1df3ab5906978d6b313aed86d2698b1" }
-```
+```
+
+</section>
+
+<div slot="title">Kotlin</div>
+<section>
+
+To use the Kotlin language bindings for `smartvaults-sdk` in your Android project add the following to your gradle dependencies:
+
+```kotlin
+repositories {
+    mavenCentral()
+}
+
+dependencies { 
+    implementation("io.smartvaults:smartvaults-sdk:<version>")
+}
+```
+
+Import the library in your code:
+
+```kotlin
+import io.smartvaults.sdk.*
+```
+
+To import nostr or nostr-sdk:
+```kotlin
+import rust.nostr.protocol.*
+import rust.nostr.sdk.*
+```
+
+## Known issues
+
+### JNA dependency
+
+Depending on the JVM version you use, you might not have the JNA dependency on your classpath. The exception thrown will be
+
+```bash
+class file for com.sun.jna.Pointer not found
+```
+
+The solution is to add JNA as a dependency like so:
+
+```kotlin
+dependencies {
+    // ...
+    implementation("net.java.dev.jna:jna:5.12.1")
+}
+```
+
+</section>
+</custom-tabs>

src/rust-sdk/04-constructors.md

@@ -10,6 +10,10 @@ All these when constructed return a ready to use client.
 This constructor generate a random [BIP39](https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki) mnemonic and store
 it in a local [encrypted keychain](./keychain/01-index.md).
 
+<custom-tabs category="lang">
+<div slot="title">Rust</div>
+<section>
+
 ```rust,no_run
 use smartvaults_sdk::prelude::*;
 
@@ -28,6 +32,20 @@ let client = SmartVaults::generate(
 # }
 ```
 
+</section>
+
+<div slot="title">Kotlin</div>
+<section>
+
+```kotlin
+import io.smartvaults.sdk.*
+
+// TODO
+```
+</section>
+
+</custom-tabs>
+
 ## Restore
 
 This constructor restore a [BIP39](https://github.com/bitcoin/bips/blob/master/bip-0039.mediawiki) mnemonic and store

tabs.js

@@ -0,0 +1,180 @@
+(function () {
+    'use strict';
+
+    let selected_ = null;
+
+    customElements.define('custom-tabs', class extends HTMLElement {
+
+        constructor() {
+            super(); // always call super() first in the ctor.
+
+            // Create shadow DOM for the component.
+            let shadowRoot = this.attachShadow({ mode: 'open' });
+            shadowRoot.innerHTML = `
+          <style>
+            :host {
+                display: flex;
+                flex-direction: column;
+                width: 100%;
+                border: 1px solid var(--mdc-theme-divider);
+                border-radius: 4px;
+            }
+        
+            #tabs {
+                display: flex;
+                border-bottom: 1px solid var(--mdc-theme-divider);
+                background-color: var(--mdc-theme-primary);
+                overflow-x: auto;
+                position: relative;
+            }
+        
+            #tabs ::slotted(*) {
+                color: var(--mdc-theme-text-primary);
+                padding: 12px 16px;
+                text-align: center;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                cursor: pointer;
+                border-bottom: 2px solid transparent;
+                transition: border-bottom-color 0.3s, background-color 0.3s;
+                margin: 0;
+                font-size: 14px;
+                font-weight: bold;
+            }
+        
+            #tabs ::slotted([tabindex="0"]), #tabs ::slotted(*:hover) {
+                color: var(--mdc-theme-primary);
+                background-color: var(--mdc-theme-background);
+                border-bottom-color: var(--mdc-theme-primary);
+            }
+        
+            #tabsLine {
+                border-top: 1px solid var(--mdc-theme-divider);
+                margin-top: -1px;
+                position: absolute;
+                width: 100%;
+                z-index: 1;
+            }
+        
+            #panels {
+                padding: 0px;
+            }
+        
+            #panels ::slotted([aria-hidden="true"]) {
+                display: none;
+            }
+        
+            pre {
+                margin: 0;
+            }
+          </style>
+          <div id="tabs">
+            <slot id="tabsSlot" name="title"></slot>
+          </div>
+          <div id="panels">
+            <slot id="panelsSlot"></slot>
+          </div>
+        `;
+        }
+
+        get selected() {
+            return selected_;
+        }
+
+        set selected(idx) {
+            selected_ = idx;
+            this._selectTab(idx);
+            this.setAttribute('selected', idx);
+        }
+
+        connectedCallback() {
+            this.setAttribute('role', 'tablist');
+
+            const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');
+            const panelsSlot = this.shadowRoot.querySelector('#panelsSlot');
+
+            this.tabs = tabsSlot.assignedNodes({ flatten: true });
+            this.panels = panelsSlot.assignedNodes({ flatten: true }).filter(el => {
+                return el.nodeType === Node.ELEMENT_NODE;
+            });
+
+            // Save refer to we can remove listeners later.
+            this._boundOnTitleClick = this._onTitleClick.bind(this);
+
+            tabsSlot.addEventListener('click', this._boundOnTitleClick);
+            document.addEventListener('mdbook-category-changed', this._onSiblingCategoryChanged.bind(this));
+            this.selected = this._findFirstSelectedTab() || this._findStoredSelectedTab() || 0;
+        }
+
+        disconnectedCallback() {
+            const tabsSlot = this.shadowRoot.querySelector('#tabsSlot');
+            tabsSlot.removeEventListener('click', this._boundOnTitleClick);
+            document.removeEventListener('mdbook-category-changed', this._onSiblingCategoryChanged.bind(this));
+        }
+
+        _onTitleClick(e) {
+            if (e.target.slot === 'title') {
+                this.selected = this.tabs.indexOf(e.target);
+                e.target.focus();
+            }
+        }
+
+        _findFirstSelectedTab() {
+            let selectedIdx;
+            for (let [i, tab] of this.tabs.entries()) {
+                tab.setAttribute('role', 'tab');
+                if (tab.hasAttribute('selected')) {
+                    selectedIdx = i;
+                }
+            }
+            return selectedIdx;
+        }
+
+        _findStoredSelectedTab() {
+            let selectedIdx;
+            if (this.getAttribute("category")) {
+                let selectedText;
+                try { selectedText = localStorage.getItem('mdbook-tabs-' + this.getAttribute("category")); } catch (e) { }
+                if (selectedText) {
+                    for (let [i, tab] of this.tabs.entries()) {
+                        if (tab.textContent === selectedText) {
+                            selectedIdx = i;
+                            break;
+                        }
+                    }
+                }
+            }
+            return selectedIdx;
+        }
+
+        _selectTab(idx = null, propagate = true) {
+            let category = this.getAttribute("category");
+            for (let i = 0, tab; tab = this.tabs[i]; ++i) {
+                let select = i === idx;
+                tab.setAttribute('tabindex', select ? 0 : -1);
+                tab.setAttribute('aria-selected', select);
+                this.panels[i].setAttribute('aria-hidden', !select);
+                if (select && category && tab.textContent) {
+                    try { localStorage.setItem('mdbook-tabs-' + category, tab.textContent); } catch (e) { }
+                }
+            }
+
+            if (propagate) {
+              document.dispatchEvent(new CustomEvent(
+                'mdbook-category-changed', 
+                { detail: { category: category, idx: idx }}
+              ));
+            }
+        }
+
+        _onSiblingCategoryChanged(e) {
+            let category = this.getAttribute("category")
+            if (category === e.detail.category) {
+              this._selectTab(e.detail.idx, false);
+              this.setAttribute('selected', e.detail.idx);
+            }
+        }
+    });
+
+})();