@@ -32,14 +28,16 @@ It's a collection of various JavaScript libraries allowing developers to interac
+## Getting started
+
@@ -52,7 +50,7 @@ For example, a web app that allows users to interact with the Stacks blockchain
Most users interact via their favorite Stacks wallet.
Developers can build web apps, which prompt the user for an action (e.g. sign a transaction), and then the wallet will handle the rest.
The wallet will act in the security, and best interest of the user, and the user will be able to review the transaction before signing.
-[Read more](./connect.md)
+[Read more](/stacks.js/connect)
### 🔑 With Private Key Access
@@ -63,4 +61,4 @@ Developers can build simple scripts and tools intended for "offline" use.
Users may use the Stacks.js CLI directly to send a transaction.
Backends may need to automate signing without direct user interaction.
In these cases, developers can use the same libraries used by Stacks wallets for account handling and transaction signing.
-[Read more](./installing.md)
+[Read more](/stacks.js/learn-the-basics)
diff --git a/docs/stacks.js/getting-started.md b/docs/stacks.js/learn-the-basics.md
similarity index 96%
rename from docs/stacks.js/getting-started.md
rename to docs/stacks.js/learn-the-basics.md
index 86b02805b..1e3e98ef6 100644
--- a/docs/stacks.js/getting-started.md
+++ b/docs/stacks.js/learn-the-basics.md
@@ -1,12 +1,8 @@
----
-sidebar_label: Getting Started
----
+# Learning the Stacks.js Basics
-# Getting Started with Stacks.js
+
Looking to building Stacks-ready web applications? [Read more on Stacks Connect](/stacks.js/connect)
-import StacksjsStartersNote from '../includes/\_stacks.js-starters-note.mdx';
-
-
+
To introduce the different functionality offered by Stacks.js, we'll walk through a few examples and concepts important to building on the Stacks blockchain.
@@ -83,9 +79,6 @@ openSTXTransfer({
});
```
-
-
-
### Using a private key 🔑
For full manual transaction signing, we need to provide the sender's private key.
diff --git a/docs/stacks.js/troubleshooting.md b/docs/stacks.js/troubleshooting.md
deleted file mode 100644
index b723ee840..000000000
--- a/docs/stacks.js/troubleshooting.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-title: Troubleshooting
----
-
-## Common Pitfall: regenerator-runtime
-
-If using @stacks/connect with vite, rollup, svelte, or vue, a package `regenerator-runtime` needs to be manually added to build the project successfully.
-
-`npm install --save-dev regenerator-runtime.`
diff --git a/sidebars/stacks-js.js b/sidebars/stacks-js.js
index dbe209367..81e0f0203 100644
--- a/sidebars/stacks-js.js
+++ b/sidebars/stacks-js.js
@@ -25,8 +25,13 @@ module.exports = [
},
{
type: 'doc',
- label: 'Getting Started',
- id: 'stacks.js/getting-started',
+ label: 'Learn the basics',
+ id: 'stacks.js/learn-the-basics',
+ },
+ {
+ type: 'doc',
+ label: 'FAQs',
+ id: 'stacks.js/faq',
},
{
type: 'html',
@@ -65,20 +70,4 @@ module.exports = [
label: 'Integrate Stacking',
id: 'stacks.js/guides/how-to-integrate-stacking', // TODO: merge both stacking guides
},
- {
- type: 'html',
- value: 'Other',
- className: 'section-title',
- defaultStyle: true,
- },
- {
- type: 'doc',
- label: 'FAQs',
- id: 'stacks.js/faq',
- },
- {
- type: 'doc',
- label: 'Troubleshooting',
- id: 'stacks.js/troubleshooting',
- },
];
diff --git a/src/css/custom.css b/src/css/custom.css
index bfe2bbc53..67665c403 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -20,7 +20,8 @@
@font-face {
font-family: 'Aeonik Fono';
- src: url('https://alphaassets.hiro.so/AeonikFono-Regular.woff2') format('woff2'),
+ src:
+ url('https://alphaassets.hiro.so/AeonikFono-Regular.woff2') format('woff2'),
url('https://alphaassets.hiro.so/AeonikFono-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
@@ -29,7 +30,8 @@
@font-face {
font-family: 'AeonikMono-Regular';
- src: url('https://alphaassets.hiro.so/AeonikMono-Regular.woff2') format('woff2'),
+ src:
+ url('https://alphaassets.hiro.so/AeonikMono-Regular.woff2') format('woff2'),
url('https://alphaassets.hiro.so/AeonikMono-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
@@ -97,6 +99,9 @@
--ifm-code-font-size: 81.25%;
--ifm-alert-border-left-width: 0px;
+ --ifm-tabs-padding-vertical: 4px;
+ --ifm-tabs-padding-horizontal: 8px;
+
--aa-primary-color-rgb: var(--ifm-color-primary-lighter);
}
@@ -124,7 +129,10 @@ body {
}
p {
- font-family: 'Inter var', system-ui, -apple-system;
+ font-family:
+ 'Inter var',
+ system-ui,
+ -apple-system;
}
[data-theme='dark'] table,
@@ -488,6 +496,15 @@ a.menu__link.menu__link--sublist.menu__link--sublist-caret::after {
}
}
+/* CODE TABS ================================================================ */
+.tabs-container ul {
+ font-size: small;
+}
+
+.tabs-container .margin-top--md {
+ margin-top: 0 !important;
+}
+
/* CONTENT MARKDOWN ELEMENTS ================================================ */
/* Prefixed with `Hiro` */
@@ -509,7 +526,7 @@ a.HiroLink {
font-size: 0.875rem;
line-height: 1.25rem;
transition: color 0.15s ease;
- background-color: ;
+ background-color:;
}
a.HiroLinkExternal {
diff --git a/vercel.json b/vercel.json
index 434b12d96..b56d70176 100644
--- a/vercel.json
+++ b/vercel.json
@@ -145,6 +145,11 @@
"source": "/tutorials/overview",
"destination": "https://docs.hiro.so/tutorials",
"permanent": true
+ },
+ {
+ "source": "/stacks.js/getting-started",
+ "destination": "https://docs.hiro.so/stacks.js",
+ "permanent": false
}
]
}