Release 2.22.1 (docs)

docs/.gitignore

@@ -6,4 +6,4 @@ node_modules
 .env
 .env.*
 !.env.example
-.vercel
+vite.config.js.timestamp-*

docs/README.md

@@ -22,4 +22,4 @@ Run `yarn build` and confirm no errors present from the proposed changes.
 
 Confirm vercel build within PR builds without error and check instance deployment for accuracy.
 
-PR should target branch the main develop branch - [develop](https://github.com/blocknative/web3-onboard/tree/develop).
+PR should target branch the main develop branch - [develop](https://github.com/blocknative/web3-onboard/tree/develop).

docs/package.json

@@ -1,89 +1,82 @@
 {
   "name": "docs",
-  "version": "0.0.1",
+  "version": "1.0.0",
+  "private": true,
   "scripts": {
-    "dev": "svelte-kit dev",
-    "build": "NODE_OPTIONS=--max_old_space_size=8192 svelte-kit build",
-    "package": "svelte-kit package",
-    "preview": "svelte-kit preview",
+    "dev": "vite dev",
+    "build": "export NODE_OPTIONS=--max-old-space-size=32768 && vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --plugin-search-dir . --check .",
+    "format": "prettier --plugin-search-dir . --write .",
     "prepare": "svelte-kit sync",
     "test": "playwright test",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
-    "format": "prettier --write --plugin-search-dir=. .",
     "w3o-latest-prod": "yarn add '@web3-onboard/coinbase' '@web3-onboard/core' '@web3-onboard/dcent' '@web3-onboard/enkrypt' '@web3-onboard/fortmatic' '@web3-onboard/gas' '@web3-onboard/gnosis' '@web3-onboard/infinity-wallet' '@web3-onboard/injected-wallets' '@web3-onboard/keepkey' '@web3-onboard/keystone' '@web3-onboard/ledger' '@web3-onboard/magic' '@web3-onboard/mew-wallet' '@web3-onboard/portis' '@web3-onboard/sequence' '@web3-onboard/taho' '@web3-onboard/torus' '@web3-onboard/transaction-preview' '@web3-onboard/trezor' '@web3-onboard/trust' '@web3-onboard/uauth' '@web3-onboard/walletconnect' '@web3-onboard/web3auth' '@web3-onboard/xdefi' '@web3-onboard/frame'",
     "w3o-latest-alpha": "yarn add '@web3-onboard/coinbase@next' '@web3-onboard/core@next' '@web3-onboard/dcent@next' '@web3-onboard/enkrypt@next' '@web3-onboard/fortmatic@next' '@web3-onboard/gas@next' '@web3-onboard/gnosis@next' '@web3-onboard/infinity-wallet@next' '@web3-onboard/injected-wallets@next' '@web3-onboard/keepkey@next' '@web3-onboard/keystone@next' '@web3-onboard/ledger@next' '@web3-onboard/magic@next' '@web3-onboard/mew-wallet@next' '@web3-onboard/portis@next' '@web3-onboard/sequence@next' '@web3-onboard/taho@next' '@web3-onboard/torus@next' '@web3-onboard/transaction-preview@next' '@web3-onboard/trezor@next' '@web3-onboard/trust@next' '@web3-onboard/uauth@next' '@web3-onboard/walletconnect@next' '@web3-onboard/web3auth@next' '@web3-onboard/xdefi@next' '@web3-onboard/frame'"
   },
   "devDependencies": {
-    "@algolia/client-search": "^4.14.2",
-    "@docsearch/css": "^3.2.1",
-    "@docsearch/js": "^3.2.1",
-    "@iconify-json/ri": "^1.1.3",
-    "@playwright/test": "^1.22.2",
-    "@sveltejs/adapter-static": "^1.0.0-next.39",
-    "@sveltejs/adapter-vercel": "next",
-    "@sveltejs/kit": "1.0.0-next.357",
-    "@svelteness/kit-docs": "^0.22.12",
-    "@tailwindcss/typography": "^0.5.2",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "@vitebook/client": "^0.100.5",
-    "@vitebook/core": "^0.100.5",
-    "@vitebook/markdown-shiki": "^0.100.5",
-    "@vitebook/markdown-svelte": "^0.100.5",
-    "autoprefixer": "^10.4.7",
-    "clsx": "^1.1.1",
-    "daisyui": "^2.17.0",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "^8.4.14",
-    "prettier": "^2.6.2",
-    "prettier-plugin-svelte": "^2.7.0",
+    "@algolia/client-search": "^4.17.0",
+    "@docsearch/css": "^3.3.3",
+    "@docsearch/js": "^3.3.3",
+    "@iconify-json/ri": "^1.0.0",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.5.0",
+    "@svelteness/kit-docs": "^1.1.3",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/animejs": "^3.1.7",
+    "@types/react": "^18.0.37",
+    "assert": "^2.0.0",
+    "autoprefixer": "^10.4.14",
+    "clsx": "^1.0.0",
+    "crypto-browserify": "^3.12.0",
+    "prettier": "^2.8.0",
+    "prettier-plugin-svelte": "^2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup-plugin-polyfill-node": "^0.11.0",
-    "shiki": "^0.10.1",
-    "svelte": "^3.49.0",
-    "svelte-check": "^2.7.1",
-    "svelte-preprocess": "^4.10.7",
-    "tslib": "^2.3.1",
-    "typescript": "^4.7.2",
-    "unplugin-icons": "^0.13.4"
+    "rollup-plugin-polyfill-node": "^0.12.0",
+    "shiki": "^0.12.0",
+    "stream-browserify": "^3.0.0",
+    "svelte": "^3.54.0",
+    "svelte-check": "^3.0.1",
+    "svelte-preprocess": "^5.0.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.4",
+    "unplugin-icons": "^0.14.0",
+    "vite": "^4.2.2"
   },
   "type": "module",
   "dependencies": {
-    "@web3-onboard/cede-store": "^2.0.1-alpha.1",
-    "@web3-onboard/coinbase": "^2.2.3-alpha.2",
-    "@web3-onboard/core": "^2.18.0-alpha.3",
-    "@web3-onboard/dcent": "^2.2.6-alpha.2",
-    "@web3-onboard/enkrypt": "^2.0.3-alpha.2",
-    "@web3-onboard/fortmatic": "^2.0.18-alpha.2",
-    "@web3-onboard/frame": "2.21.2-alpha.1",
-    "@web3-onboard/gas": "^2.1.7-alpha.2",
-    "@web3-onboard/gnosis": "^2.1.9-alpha.2",
-    "@web3-onboard/infinity-wallet": "^2.0.3-alpha.2",
-    "@web3-onboard/injected-wallets": "^2.8.6-alpha.2",
-    "@web3-onboard/keepkey": "^2.3.6-alpha.2",
-    "@web3-onboard/keystone": "^2.3.6-alpha.2",
-    "@web3-onboard/ledger": "^2.4.5-alpha.2",
-    "@web3-onboard/magic": "^2.1.6-alpha.2",
-    "@web3-onboard/mew-wallet": "^2.0.3-alpha.2",
-    "@web3-onboard/portis": "^2.1.6-alpha.2",
-    "@web3-onboard/sequence": "^2.0.7-alpha.2",
-    "@web3-onboard/taho": "^2.0.3-alpha.2",
-    "@web3-onboard/torus": "^2.2.4-alpha.2",
-    "@web3-onboard/transaction-preview": "^2.0.7-alpha.2",
-    "@web3-onboard/trezor": "^2.4.1-alpha.2",
-    "@web3-onboard/trust": "^2.0.3-alpha.2",
-    "@web3-onboard/uauth": "^2.0.4-alpha.2",
-    "@web3-onboard/walletconnect": "^2.3.7-alpha.3",
-    "@web3-onboard/xdefi": "^2.0.3-alpha.2",
+    "@web3-onboard/cede-store": "^2.0.1",
+    "@web3-onboard/coinbase": "^2.2.3",
+    "@web3-onboard/core": "^2.18.0",
+    "@web3-onboard/dcent": "^2.2.6",
+    "@web3-onboard/enkrypt": "^2.0.3",
+    "@web3-onboard/fortmatic": "^2.0.18",
+    "@web3-onboard/frame": "^2.0.0",
+    "@web3-onboard/gas": "^2.1.7",
+    "@web3-onboard/gnosis": "^2.1.9",
+    "@web3-onboard/infinity-wallet": "^2.0.3",
+    "@web3-onboard/injected-wallets": "^2.8.6",
+    "@web3-onboard/keepkey": "^2.3.6",
+    "@web3-onboard/keystone": "^2.3.6",
+    "@web3-onboard/ledger": "^2.4.5",
+    "@web3-onboard/magic": "^2.1.6",
+    "@web3-onboard/mew-wallet": "^2.0.3",
+    "@web3-onboard/portis": "^2.1.6",
+    "@web3-onboard/sequence": "^2.0.7",
+    "@web3-onboard/taho": "^2.0.3",
+    "@web3-onboard/torus": "^2.2.4",
+    "@web3-onboard/transaction-preview": "^2.0.7",
+    "@web3-onboard/trezor": "^2.4.1",
+    "@web3-onboard/trust": "^2.0.3",
+    "@web3-onboard/uauth": "^2.0.4",
+    "@web3-onboard/walletconnect": "^2.3.7",
+    "@web3-onboard/web3auth": "^2.2.1",
+    "@web3-onboard/xdefi": "^2.0.3",
     "animejs": "^3.2.1",
     "bnc-sdk": "^4.6.6",
-    "ethers": "^5.7.0"
+    "ethers": "^5.7.0",
+    "tailwindcss": "^3.3.1"
   }
 }

docs/src/app.d.ts

@@ -1,14 +1,14 @@
-/// <reference types="@sveltejs/kit" />
 /// <reference types="@svelteness/kit-docs/globals" />
 
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
-// and what to do when importing types
-declare namespace App {
-  // interface Locals {}
-  // interface Platform {}
-  // interface Session {}
-  // interface Stuff {}
+declare global {
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface Platform {}
+  }
 }
 
-declare module '@svelteness/kit-docs/tailwind.config.cjs'
+export {}

docs/src/app.html

@@ -2,19 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/x-icon" href="https://www.blocknative.com/hubfs/Icons%20and%20Illustrations/blocknative%20favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    %sveltekit.head%
-
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-121780722-2"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-      gtag('config', 'UA-121780722-2');
-      gtag('config', 'G-WQ8M55VX1Z');
-    </script>
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <meta name="viewport" content="width=device-width" />
 
     <script>
       const key = 'svelteness::color-scheme'
@@ -26,8 +15,13 @@
         document.documentElement.classList.remove('dark')
       }
     </script>
+
+    %sveltekit.head%
+
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-121780722-2"></script>
   </head>
-  <body>
-    <div>%sveltekit.body%</div>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
   </body>
 </html>

docs/src/kit-docs/README.md

@@ -0,0 +1,112 @@
+# `kit-docs`
+
+## Global Components
+
+You can create Svelte components that are global by placing them in this directory. Global
+components are imported into every single Markdown file. In addition, they're automatically
+mapped to Markdown containers, on which you can pass in props and dynamic slot elements.
+
+First, create a component in this directory:
+
+```
+src
+└─ kit-docs
+   ├─ Button.svelte <-
+```
+
+Now, inside your markdown files you can use the `<Button>` component like so:
+
+```svelte title=Component.md
+<!-- Use the component as-is. -->
+<Button />
+
+<!-- Or, use a markdown container. -->
+:::button propA="valueA"|propB=10 Default slot content here. :::
+
+<!-- You can pass in dynamic slot elements! -->
+<!-- If you omit `tag`, it'll default to `<p>`. -->
+:::button (tag=h1&slot=title)=Title Default slot content here. :::
+```
+
+### Configuration
+
+You can configure how global Svelte components are mapped to rules or containers by setting
+them in your plugin like so:
+
+```js title=svelte.config.js
+kitDocsPlugin({
+  markdown: {
+    components: [
+      // Override inline rule.
+      // `Image.svelte` must be a global component.
+      { name: 'Image', type: 'inline', rule: 'image' },
+      // Override block rule.
+      // `Blockquote.svelte` must be a global component.
+      { name: 'Blockquote', type: 'block', rule: 'blockquote' },
+      // Create custom container.
+      // `Button.svelte` must be a global component.
+      { name: 'Button', type: 'custom', container: { marker: '!' } }
+    ]
+  }
+})
+```
+
+The configuration above will transform the following Markdown like so:
+
+```md
+![alt text](https://...)
+
+> This is a blockquote.
+
+!!!button
+...
+!!!
+```
+
+```svelte
+<Image href="https://..." alt="alt text" />
+
+<Blockquote>This is a blockquote.</Blockquote>
+
+<Button>...</Button>
+```
+
+## Default Components
+
+There's a few components we provide out of the box such as `CodeFence`, `CodeInline`, `Link` and
+others. You can find all of our [default components](https://github.com/svelteness/kit-docs/tree/main/packages/kit-docs/src/lib/kit-docs)
+on GitHub.
+
+### Overriding
+
+If you want to override any of the default components, simply create a Svelte component with the
+same name in this directory and make sure it accepts the same props.
+
+For example, you can override `CodeFence` by creating it in this directory like so:
+
+```
+src
+└─ kit-docs
+   ├─ CodeFence.svelte <-
+```
+
+Finally, you can use the following minimal boilerplate and style the component as desired:
+
+```svelte title=CodeFence.svelte|copy
+<script>
+  /** @type {string} */
+  export let lang
+  /** @type {string} */
+  export let ext
+  /** @type {string} */
+  export let code
+  /** @type {number} */
+  export let linesCount
+  /** @type {[number, number][]} */
+  export let highlightLines = []
+</script>
+
+<div class={`lang-${lang} ext-${ext}`}>
+  {@html code}
+</div>
+```

docs/src/kit-docs/tabs/TabItem.svelte

@@ -47,7 +47,7 @@
   }
 
   .tab.selected {
-    color: var(--kd-color-brand);
+    color: rgb(var(--kd-color-brand));
     border-color: currentColor;
   }
 </style>