From 988f8c715d5ebbff00759592991f193b2627b3bc Mon Sep 17 00:00:00 2001
From: katopz <katopz@gmail.com>
Date: Wed, 4 Sep 2024 11:28:57 +0700
Subject: [PATCH] fix: derive_more

---
 js/helper.js               | 104 +++++++++++++++++++++----------------
 src/rust/r3/derive-more.md |  56 ++++++++++----------
 2 files changed, 90 insertions(+), 70 deletions(-)

diff --git a/js/helper.js b/js/helper.js
index 137fffe..2d9a9e4 100644
--- a/js/helper.js
+++ b/js/helper.js
@@ -1,83 +1,99 @@
 window.onload = () => {
   // Open external link as new windows.
-  ;[...document.getElementsByTagName('a')].map((e) => {
+  [...document.getElementsByTagName("a")].map((e) => {
     // Only external link and not targeted yet will open new window
-    if (e.href.startsWith('https://') && !e.href.startsWith(window.location.origin)) {
-      e.target = e.target || '_blank'
+    if (
+      e.href.startsWith("https://") &&
+      !e.href.startsWith(window.location.origin)
+    ) {
+      e.target = e.target || "_blank";
       // Chrome < 88 still need this even targeted _blank.
-      e.rel = 'noopener'
+      e.rel = "noopener";
     }
-    return e
-  })
+    return e;
+  });
 
   // Render NFT contents
-  const nft_elements = document.getElementsByTagName('nft')
+  const nft_elements = document.getElementsByTagName("nft");
   if (nft_elements.length > 0) {
-    ;[...nft_elements].map((e) => {
-      const { access_token } = window?.__SESSION__ || { access_token: 'foo' }
+    [...nft_elements].map((e) => {
+      const { access_token } = window?.__SESSION__ || { access_token: "foo" };
 
       if (!access_token) {
         if (e.innerHTML) {
-          return
+          return;
         } else {
           e.innerHTML = `<div style="border-style: dashed; border-width: 1px;
-          padding: 0.5em;">Apply <button>NFT membership</button> to view this content.</div>`
-          return
+          padding: 0.5em;">Apply <button>NFT membership</button> to view this content.</div>`;
+          return;
         }
       }
 
-      const { chain, cluster } = { chain: 'solana', cluster: 'mainnet-beta', ...e.dataset }
-      const address = e.getAttribute('src')
+      const { chain, cluster } = {
+        chain: "solana",
+        cluster: "mainnet-beta",
+        ...e.dataset,
+      };
+      const address = e.getAttribute("src");
       if (!address) {
-        return 'expected: src'
+        return "expected: src";
       }
 
-      const src = `https://gist.rs/nft/${address}?chain=${chain}&cluster=${cluster}`
+      const src = `https://gist.rs/nft/${address}?chain=${chain}&cluster=${cluster}`;
 
       // 2. Apply iframe
-      e.innerHTML = `<iframe src="${src}" />`
+      e.innerHTML = `<iframe src="${src}" />`;
 
       // 3. Remove parent style
-      e.style.padding = 0
-      e.style.borderWidth = 0
-    })
+      e.style.padding = 0;
+      e.style.borderWidth = 0;
+    });
   }
 
   // Render tab
-  render_tab()
-}
+  render_tab();
+};
 
 function focus_tab(labels, contents, tab_index) {
-  labels.forEach((e, i) => (e.style.cssText = i === tab_index ? e.classList.add('tab-selected') : e.classList.remove('tab-selected')))
-  contents.forEach((e, i) => (e.style.cssText = i === tab_index ? `display:block` : `display:none`))
+  labels.forEach(
+    (e, i) =>
+      (e.style.cssText =
+        i === tab_index
+          ? e.classList.add("tab-selected")
+          : e.classList.remove("tab-selected"))
+  );
+  contents.forEach(
+    (e, i) =>
+      (e.style.cssText = i === tab_index ? `display:block` : `display:none`)
+  );
 }
 
 function render_tab() {
-  const tab_elements = document.getElementsByTagName('tabs')
-  if (tab_elements.length <= 0) return
-  ;[...tab_elements].map((tabs) => {
-    const tab = tabs.getElementsByTagName('tab')
+  const tab_elements = document.getElementsByTagName("tabs");
+  if (tab_elements.length <= 0) return;
+  [...tab_elements].map((tabs) => {
+    const tab = tabs.getElementsByTagName("tab");
 
-    const labels = []
-    const contents = []
+    const labels = [];
+    const contents = [];
 
-    ;[...tab].map((e, i) => {
-      const label_text = e.getAttribute('label')
-      const content = e.getElementsByTagName('pre').item(0)
-      contents.push(content)
+    [...tab].map((e, i) => {
+      const label_text = e.getAttribute("label");
+      const content = e.getElementsByTagName("pre").item(0);
+      contents.push(content);
 
-      const label = document.createElement('span')
-      label.classList.add('tab')
-      label.innerText = label_text
-      labels.push(label)
+      const label = document.createElement("span");
+      label.classList.add("tab");
+      label.innerText = label_text;
+      labels.push(label);
 
-      label.onclick = () => focus_tab(labels, contents, i)
-    })
+      label.onclick = () => focus_tab(labels, contents, i);
+    });
 
-    labels.map((e) => tabs.parentNode.appendChild(e))
-    contents.map((e) => tabs.parentNode.appendChild(e))
+    labels.map((e) => tabs.appendChild(e));
+    contents.map((e) => tabs.appendChild(e));
 
     // Default to first tab
-    focus_tab(labels, contents, 0)
-  })
+    focus_tab(labels, contents, 0);
+  });
 }
diff --git a/src/rust/r3/derive-more.md b/src/rust/r3/derive-more.md
index c0091fa..9f3bbb3 100644
--- a/src/rust/r3/derive-more.md
+++ b/src/rust/r3/derive-more.md
@@ -8,31 +8,35 @@
 - Use `TryFrom` for validation + `From`.
 - Implementing `Newtype` Traits with `Derive More`.
 
-```rust
-use derive_more::{Add, Display, From, FromStr};
-use std::str::FromStr;
-
-#[derive(FromStr, Display)]
-pub struct PhoneNumber(String);
-
-#[derive(Clone, Copy, From, Display, Add)]
-#[display(fmt = "{} years", _0)]
-pub struct Years(u32);
-
-fn main() {
-    // Use parse.
-    let num = "123-4567".parse::<PhoneNumber>().unwrap();
-    println!("1️⃣ Phone number is {}", num);
-
-    // Use from_str.
-    let num = PhoneNumber::from_str("123-4567").unwrap();
-    println!("2️⃣ Phone number is {}", num);
-
-    // Use from and Add.
-    let age_1 = Years::from(5);
-    let age_2 = Years::from(2);
-    println!("3️⃣ {} + {} = {}", age_1, age_2, age_1 + age_2);
-}
+## Setup
+
+```bash
+cargo add derive_more --features "add display from from_str"
+```
+
+## Code
+
+<tabs>
+<tab label="main.rs">
+
+```rust,edition2021
+{{#include ../../../examples/r3/hello-derive-more/src/main.rs}}
+```
+
+</tab>
+<tab label="Cargo.toml">
+
+```toml
+{{#include ../../../examples/r3/hello-derive-more/Cargo.toml}}
 ```
 
-<a href="https://codesandbox.io/p/sandbox/derive-more-852zqb" class="button">▢ CodeSandbox</a>
+</tab>
+</tabs>
+
+## Output
+
+```
+1️⃣ Phone number is 123-4567
+2️⃣ Phone number is 123-4567
+3️⃣ 5 years + 2 years = 7 years
+```