From dcddc980fbcb17d300777d43ea7fd3b1f01a143b Mon Sep 17 00:00:00 2001 From: Bri Wylde <92327786+briwylde08@users.noreply.github.com> Date: Fri, 20 Dec 2024 14:26:38 -0700 Subject: [PATCH] Homepage - Wayfinding (#1005) * Wayfinding Homepage * add table of contents * More updates * Add descriptions + SEP-6, SEP-24 wayfinding * More wayfinding * words * playing around with formatting * fix formatting * Various edits * fix dapp section * update Hubble language * update anchor tools * quick link nit * update descriptions * Reformatting x2 * lil fix to build * trigger a new container build * freshen up display of wayfinding boxes * custom component for the "navigating the docs" section * move wayfinding boxes component into homepage folder * use similar styles for wayfinding and navigating "boxes" * developer resources section * improve some docs contribution translation stuff * some fiddling around * add a pathfinding table custom component * apply pathfinding tables to index page * include drop downs * heading fixes * words * fix link * fix poor contrast on wayfinding boxes * rename explore and learn more link functions * give me some space * implement design notes - padding and semibold * expanded by default * style tweaks for badge displays in tables * add a check to ensure only tables are rendered as tables * remove expandable details elements from homepage * prolog -> preface * fix a broken link --------- Co-authored-by: Elliot Voris --- docs/learn/fundamentals/anchors.mdx | 30 ++- docs/tools/developer-tools/anchor-tools.mdx | 4 +- .../Homepage/DeveloperResources/index.tsx | 148 ++++++++++++++ .../DeveloperResources/styles.module.css | 5 + .../Homepage/NavigatingTheDocs/index.tsx | 160 +++++++++++++++ .../NavigatingTheDocs/styles.module.css | 5 + .../PathfindingTable/PathfindingRow/index.tsx | 31 +++ .../PathfindingRow/styles.module.css | 19 ++ .../Homepage/PathfindingTable/index.tsx | 27 +++ .../PathfindingTable/styles.module.css | 5 + .../Homepage/WayfindingBoxes/index.tsx | 141 +++++++++++++ .../WayfindingBoxes/styles.module.css | 24 +++ src/components/WayfindingBoxes/index.js | 182 ----------------- .../WayfindingBoxes/styles.module.css | 15 -- src/pages/index.mdx | 188 ++++++++++++++---- 15 files changed, 743 insertions(+), 241 deletions(-) create mode 100644 src/components/Homepage/DeveloperResources/index.tsx create mode 100644 src/components/Homepage/DeveloperResources/styles.module.css create mode 100644 src/components/Homepage/NavigatingTheDocs/index.tsx create mode 100644 src/components/Homepage/NavigatingTheDocs/styles.module.css create mode 100644 src/components/Homepage/PathfindingTable/PathfindingRow/index.tsx create mode 100644 src/components/Homepage/PathfindingTable/PathfindingRow/styles.module.css create mode 100644 src/components/Homepage/PathfindingTable/index.tsx create mode 100644 src/components/Homepage/PathfindingTable/styles.module.css create mode 100644 src/components/Homepage/WayfindingBoxes/index.tsx create mode 100644 src/components/Homepage/WayfindingBoxes/styles.module.css delete mode 100644 src/components/WayfindingBoxes/index.js delete mode 100644 src/components/WayfindingBoxes/styles.module.css diff --git a/docs/learn/fundamentals/anchors.mdx b/docs/learn/fundamentals/anchors.mdx index 1f94f3cad..a47c76720 100644 --- a/docs/learn/fundamentals/anchors.mdx +++ b/docs/learn/fundamentals/anchors.mdx @@ -3,6 +3,8 @@ title: Anchors sidebar_position: 90 --- +## Overview + An anchor is a Stellar-specific term for the on and off-ramps that connect the Stellar network to traditional financial rails, such as financial institutions or fintech companies. Anchors accept deposits of fiat currencies (such as the US dollar, Argentine peso, or Nigerian naira) via existing rails (such as bank deposits or cash-in points), then sends the user the equivalent digital tokens on the Stellar network. The equivalent digital tokens can either represent that same fiat currency or another digital token altogether. Alternatively, anchors allow token holders to redeem their tokens for the real-world assets they represent. Stellar has anchor services operating worldwide. View the [Anchor Directory](https://resources.stellar.org/anchors?) for more information on existing Stellar anchors. @@ -13,7 +15,7 @@ You can set up an anchor by using the SDF-maintained [Anchor Platform](/platform Learn how to integrate anchor services into your blockchain-based application by viewing the [Build Apps section](../../build/apps/overview.mdx). If you’re looking specifically for MoneyGram Access, see the Integrate with MoneyGram Access tutorial. -### Stellar Ecosystem Proposals (SEPs) +## Stellar Ecosystem Proposals (SEPs) Stellar is an open-source network that is designed to interoperate with traditional financial institutions, various types of assets, and other networks. Network participants implement Stellar Ecosystem Proposals (SEPs) to ensure they can interoperate with other products and services on the network. SEPs are publicly created, open-source documents that live in a [GitHub repository](https://github.com/stellar/stellar-protocol/tree/master/ecosystem#stellar-ecosystem-proposals-seps.mdx) and they define how anchors, asset issuers, applications, exchanges, and other service providers should interact and interoperate. @@ -29,3 +31,29 @@ For anchors, the most important SEPs are [SEP-6]: Programmatic Deposit and Withd [sep-24]: https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0024.md [sep-31]: https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0031.md [sep-38]: https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0038.md + +### Using SEP-6: Programmatic Deposit and Withdrawal versus SEP-24: Hosted Deposit and Withdrawal + +A user typically must decide whether they want to set up an anchor using [SEP-6: Programmatic Deposit and Withdrawal](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0006.md) or [SEP-24: Hosted Deposit and Withdrawal](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0024.md). Here are the differences and what to consider when choosing one or the other. + +#### SEP-6: Programmatic Deposit and Withdrawal + +Defines the standard way for anchors and wallets to interact on behalf of users. With this SEP’s guidance, wallets and other clients can interact with anchors directly without the user needing to leave the wallet to go to the anchor’s site. With SEP-6, the client collects KYC information from the user. + +Wallets (clients) must take into consideration when using SEP-6: + +- Clients must collect KYC information they may not need +- Clients must know what information to collect per-anchor +- Clients must send the information in a standardized format [(SEP-12: KYC API)](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0012.md) +- Anchors must receive the information via SEP-12’s API + +#### SEP-24: Hosted Deposit and Withdrawal + +Defines the standard way for anchors and wallets to interact on behalf of users interactively. This means that the user’s application must open a webview hosted by a third-party anchor for the user to provide the information necessary to complete the transaction. With SEP-24, the anchor collects KYC information from the user. + +Wallets (clients) must take into consideration when using SEP-24: + +- Clients don’t have to collect the anchor’s required KYC information +- Clients & anchors don’t have to implement [SEP-12: KYC API](https://github.com/stellar/stellar-protocol/blob/master/ecosystem/sep-0012.md) +- Anchors must create a UI to be rendered by many clients +- Clients must allow anchors to temporarily control UX diff --git a/docs/tools/developer-tools/anchor-tools.mdx b/docs/tools/developer-tools/anchor-tools.mdx index 9df1d8830..533c3f417 100644 --- a/docs/tools/developer-tools/anchor-tools.mdx +++ b/docs/tools/developer-tools/anchor-tools.mdx @@ -15,6 +15,6 @@ View all anchors on Stellar, their currencies, and where they operate. An application for interactively testing anchor services. Lets financial application developers test their integrations and learn how Stellar ecosystem protocols (SEPs) work; use the demo wallet to test Regulated Assets (SEP-8), Hosted Deposit and Withdrawal (SEP-24), and Cross-Border Payments (SEP-31) with any home domain that has a Stellar Info File (also known as SEP-1, or a stellar.toml file). -### [Polaris](https://django-polaris.readthedocs.io/en/stable/) +### [Anchor Test Suite](https://anchor-tests.stellar.org/) -An extendable django app that makes it easy for anchors to facilitate cross-border payments and enable deposits and withdrawals; run a web server supporting any combination of SEP-1, 6, 10, 12, and 24. +A test suite for validating SEP6, SEP24, SEP31 transfer servers. diff --git a/src/components/Homepage/DeveloperResources/index.tsx b/src/components/Homepage/DeveloperResources/index.tsx new file mode 100644 index 000000000..b32d8b312 --- /dev/null +++ b/src/components/Homepage/DeveloperResources/index.tsx @@ -0,0 +1,148 @@ +import React, { type ReactNode } from 'react' +import Heading from '@theme/Heading'; +import Link from '@docusaurus/Link'; +import clsx from 'clsx'; +import { exploreLink, partitionBoxes, type NavigatingDocsItem as DeveloperResourcesItem } from '@site/src/components/Homepage/NavigatingTheDocs' +import Translate, { translate } from '@docusaurus/Translate' +import styles from './styles.module.css' + +const DeveloperResourcesBoxes: DeveloperResourcesItem[] = [ + { + title: translate({ + message: 'Stellar Developer Discord', + id: 'component.Homepage.DeveloperResources.Discord.Title', + }), + description: ( + + Ask questions and engage with other Stellar devs. + + ), + link: exploreLink('https://discord.gg/st7Mxd58BV'), + }, + { + title: translate({ + message: 'Developer Site', + id: 'component.Homepage.DeveloperResources.DeveloperSite.Title', + }), + description: ( + + Get the latest news and insights about building on Stellar. + + ), + link: exploreLink('https://stellar.org/developers'), + }, + { + title: translate({ + message: 'Stellar Stack Exchange', + id: 'component.Homepage.DeveloperResources.StackExchange.Title', + }), + description: ( + + A question and answer site for Stellar developers; if you can’t find what you’re looking for in the docs, try searching the Stack Exchange to see if your question has been addressed. If it hasn't, feel free to ask! + + ), + link: exploreLink('https://stellar.stackexchange.com/'), + }, + { + title: translate({ + message: 'Stellar Developers Google Group', + id: 'component.Homepage.DeveloperResources.GoogleGroup.Title', + }), + description: ( + + Discuss Core Advancement Proposals (CAPs) and Stellar Ecosystem Proposals (SEPs), talk about the development of Stellar Core and Horizon, and stay informed about important network upgrades. + + ), + link: exploreLink('https://groups.google.com/g/stellar-dev'), + }, +] + +function DeveloperResourcesFeature({title, description, link}) { + return ( +
+
+ {title} +

{description}

+ +
+
+ ) +} + +function DocsContribution() { + return ( + <> + + + Contribute to the docs and leave feedback + + +

+ + + Stellar Docs GitHub Repo + + + ) + }}> + {'Stellar’s Developer Documentation is open-source, and contributions to the docs are encouraged. You can file an issue or pull request to add new content, suggest revisions to existing content, submit suggestions, report bugs, and more in the {githubRepoLink}.'} + +

+

+ + + Stellar repos + + + ) + }}> + {'Also, feel free to leave any additional feedback by filing issues in the various other {githubOrgLink}.'} + +

+ + ) +} + +export default function DeveloperResources() { + const partitionedBoxes = partitionBoxes(DeveloperResourcesBoxes); + + return ( +
+ {partitionedBoxes.map((twoBoxes) => ( +
+ {twoBoxes.map((props, idx) => ( + + ))} +
+ ))} +
+
+
+ +
+
+
+
+ ) +} diff --git a/src/components/Homepage/DeveloperResources/styles.module.css b/src/components/Homepage/DeveloperResources/styles.module.css new file mode 100644 index 000000000..89cabcb2e --- /dev/null +++ b/src/components/Homepage/DeveloperResources/styles.module.css @@ -0,0 +1,5 @@ +.DeveloperResourcesFeature { + border-radius: var(--ifm-global-radius); + background-color: var(--ifm-background-surface-color); + height: 100%; +} diff --git a/src/components/Homepage/NavigatingTheDocs/index.tsx b/src/components/Homepage/NavigatingTheDocs/index.tsx new file mode 100644 index 000000000..6d33cdbeb --- /dev/null +++ b/src/components/Homepage/NavigatingTheDocs/index.tsx @@ -0,0 +1,160 @@ +import React, { type ReactNode } from 'react'; +import Heading from '@theme/Heading'; +import Link from '@docusaurus/Link'; +import Translate, { translate } from '@docusaurus/Translate'; +import clsx from 'clsx'; +import styles from './styles.module.css' + +export type NavigatingDocsItem = { + title: string; + description: ReactNode; + link: ReactNode; +} + +export const exploreLink = (target: string) => ( + + + Explore + + +) + +export const partitionBoxes = (boxesArray: NavigatingDocsItem[]): NavigatingDocsItem[][] => { + return boxesArray.reduce((acc, item, i, arr) => { + if (i % 2 === 0) { + acc.push(arr.slice(i, i + 2)) + } + return acc + }, []) +} + +const NavigatingDocsBoxes: NavigatingDocsItem[] = [ + { + title: translate({ + message: 'Build', + id: 'component.Homepage.NavigatingTheDocs.Build.Title', + }), + description: ( + + Contains tutorials and how-to guides for writing smart contracts, building applications, interacting with the network, and more. + + ), + link: exploreLink('/docs/build'), + }, + { + title: translate({ + message: 'Learn', + id: 'component.Homepage.NavigatingTheDocs.Learn.Title', + }), + description: ( + + Find all informational and conceptual content here. Learn about Stellar fundamentals like how accounts and transactions function, dive deeper into the functionality of each operation, discover how fees work, and more. + + ), + link: exploreLink('/docs/learn/fundamentals'), + }, + { + title: translate({ + message: 'Tokens', + id: 'component.Homepage.NavigatingTheDocs.Tokens.Title', + }), + description: ( + + Information on how to issue assets on the Stellar network and create custom smart contract tokens. + + ), + link: exploreLink('/docs/tokens'), + }, + { + title: translate({ + message: 'Data', + id: 'component.Homepage.NavigatingTheDocs.Data.Title', + }), + description: ( + + Discover various data availability options: RPC, Hubble, Horizon, Galexie, and data indexers. + + ), + link: exploreLink('/docs/data'), + }, + { + title: translate({ + message: 'Tools', + id: 'component.Homepage.NavigatingTheDocs.Tools.Title', + }), + description: ( + + Learn about all the available tools for building on, interacting with, or just watching the Stellar network. Also, find information on how to use the Anchor Platform or Stellar Disbursement Platform. + + ), + link: exploreLink('/docs/tools'), + }, + { + title: translate({ + message: 'Networks', + id: 'component.Homepage.NavigatingTheDocs.Networks.Title', + }), + description: ( + + Information about deployed networks (Mainnet, Testnet, and Futurenet), current software versions, resource limitations, and fees. + + ), + link: exploreLink('/docs/networks'), + }, + { + title: translate({ + message: 'Validators', + id: 'component.Homepage.NavigatingTheDocs.Validators.Title', + }), + description: ( + + Everything you'll need to know if you want to run, operate, and maintain a core validator node on the Stellar network. + + ), + link: exploreLink('/docs/validators'), + }, +] + +function NavigatingDocsFeature({title, description, link}) { + return ( +
+
+ {title} +

{description}

+ +
+
+ ) +} + +export default function NavigatingTheDocs() { + const partitionedBoxes = partitionBoxes(NavigatingDocsBoxes) + + return ( +
+ {partitionedBoxes.map((twoBoxes) => ( +
+ {twoBoxes.map((props, idx) => ( + + ))} +
+ ))} +
+ ) +} diff --git a/src/components/Homepage/NavigatingTheDocs/styles.module.css b/src/components/Homepage/NavigatingTheDocs/styles.module.css new file mode 100644 index 000000000..e1ab9b9ef --- /dev/null +++ b/src/components/Homepage/NavigatingTheDocs/styles.module.css @@ -0,0 +1,5 @@ +.NavigatingDocsFeature { + border-radius: var(--ifm-global-radius); + background-color: var(--ifm-background-surface-color); + height: 100%; +} diff --git a/src/components/Homepage/PathfindingTable/PathfindingRow/index.tsx b/src/components/Homepage/PathfindingTable/PathfindingRow/index.tsx new file mode 100644 index 000000000..8e6fab2bb --- /dev/null +++ b/src/components/Homepage/PathfindingTable/PathfindingRow/index.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import styles from './styles.module.css' +import clsx from "clsx"; + +const BADGE_CATEGORIES: Record = { + Learn: 'warning', + Guide: 'primary', + Tool: 'success', + Example: 'info', + Tutorial: 'danger', + Data: 'secondary', +} + +export default function PathfindingRow({ row }) { + const [linkTd, descTd, badgeTd] = row.props.children + + const description = descTd.props.children + const badgeCategory = badgeTd.props.children + + return ( + + + +
+ {description} + {badgeCategory} +
+ + + ) +} diff --git a/src/components/Homepage/PathfindingTable/PathfindingRow/styles.module.css b/src/components/Homepage/PathfindingTable/PathfindingRow/styles.module.css new file mode 100644 index 000000000..fba997cec --- /dev/null +++ b/src/components/Homepage/PathfindingTable/PathfindingRow/styles.module.css @@ -0,0 +1,19 @@ +.LinkColumn { + width: 25%; +} + +.DescColumn { + width: 75% +} + +.DescColumnInner { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + @media (max-width: 640px) { + flex-direction: column; + align-items: start; + } +} diff --git a/src/components/Homepage/PathfindingTable/index.tsx b/src/components/Homepage/PathfindingTable/index.tsx new file mode 100644 index 000000000..85a8944e4 --- /dev/null +++ b/src/components/Homepage/PathfindingTable/index.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import PathfindingRow from './PathfindingRow'; +import styles from './styles.module.css' + +export default function PathfindingTable({ children }) { + return ( + React.Children.map(children, child => { + if (child.type === 'table') { + const [thead, tbody] = child.props.children + const rows = tbody.props.children + + return ( + + + + + + {React.Children.map(rows, row => )} + +
+ ) + } else { + return child + } + }) + ) +} diff --git a/src/components/Homepage/PathfindingTable/styles.module.css b/src/components/Homepage/PathfindingTable/styles.module.css new file mode 100644 index 000000000..4e581360c --- /dev/null +++ b/src/components/Homepage/PathfindingTable/styles.module.css @@ -0,0 +1,5 @@ +.PathfindingTable { + border-radius: var(--ifm-global-radius); + display: table; + width: 100%; +} diff --git a/src/components/Homepage/WayfindingBoxes/index.tsx b/src/components/Homepage/WayfindingBoxes/index.tsx new file mode 100644 index 000000000..4a25f1de3 --- /dev/null +++ b/src/components/Homepage/WayfindingBoxes/index.tsx @@ -0,0 +1,141 @@ +import React, { type ReactNode } from 'react'; +import clsx from 'clsx'; +import Heading from '@theme/Heading'; +import Link from '@docusaurus/Link'; +import styles from './styles.module.css'; +import Translate, {translate} from '@docusaurus/Translate'; + +type WayfindingItem = { + title: string; + description: ReactNode; + image: string; + link: ReactNode; +} + +export const learnMoreLink = (target: string) => ( + + + Learn More + + +) + +const WayfindingWays: WayfindingItem[] = [ + { + title: translate({ + message: 'Asset Issuers', + id: 'components.WayfindingBoxes.AssetIssuers.Title', + }), + image: require('@site/static/icons/stellar-101.png').default, + description: ( + + Issue an asset or create a custom smart contract token. + + ), + link: learnMoreLink("#asset-issuers"), + }, + { + title: translate({ + message: 'Smart Contract Developers', + id: 'components.WayfindingBoxes.SmartContractDevelopers.Title' + }), + image: require('@site/static/icons/contract.png').default, + description: ( + + Write smart contracts on the Stellar network. + + ), + link: learnMoreLink("#smart-contract-developers"), + }, + { + title: translate({ + message: 'Ramps (Anchors)', + id: 'components.WayfindingBoxes.RampsAnchors.Title' + }), + image: require('@site/static/icons/issue-assets.png').default, + description: ( + + Learn about and set up an anchor. + + ), + link: learnMoreLink("#ramps-anchors"), + }, + { + title: translate({ + message: 'Applications', + id: 'components.WayfindingBoxes.Applications.Title', + }), + image: require('@site/static/icons/build-applications.png').default, + description: ( + + Build a traditional wallet, dapp, or list Stellar assets on an exchange. + + ), + link: learnMoreLink("#applications"), + }, + { + title: translate({ + message: 'Infrastructure Providers', + id: 'components.WayfindingBoxes.InfrastructureProviders.Title', + }), + image: require('@site/static/icons/dev-tools.png').default, + description: ( + + Set up a Horizon or RPC service. + + ), + link: learnMoreLink("#infrastructure-providers"), + }, + { + title: translate({ + message: 'Analytics', + id: 'components.WayfindingBoxes.Analytics.Title' + }), + image: require('@site/static/icons/access-data.png').default, + description: ( + + Use Hubble to perform analysis on Stellar network data. + + ), + link: learnMoreLink("#analytics"), + }, +]; + +function WayfindingFeature({image, title, description, link}) { + return ( +
+
+ +
+ {title} +

{description}

+

+
+ ); +} + +export default function WayfindingBoxes() { + return ( +
+
+ {WayfindingWays.map((props, idx) => ( + + ))} +
+
+ ); +} diff --git a/src/components/Homepage/WayfindingBoxes/styles.module.css b/src/components/Homepage/WayfindingBoxes/styles.module.css new file mode 100644 index 000000000..e0e49ea4b --- /dev/null +++ b/src/components/Homepage/WayfindingBoxes/styles.module.css @@ -0,0 +1,24 @@ +.boxes { + display: flex; + align-items: center; + padding: 2rem 0; + width: 100%; +} + +.boxIcon { + object-fit: cover; + max-width: 75%; + height: auto; + max-height: 75%; +} + +.boxIconLink { + display: flex; + justify-content: center; + align-items: center; + border-radius: var(--ifm-global-radius); + margin-bottom: var(--ifm-heading-margin-bottom); + background-color: var(--ifm-color-secondary); + width: 100%; + height: 250px; +} diff --git a/src/components/WayfindingBoxes/index.js b/src/components/WayfindingBoxes/index.js deleted file mode 100644 index 8785c7189..000000000 --- a/src/components/WayfindingBoxes/index.js +++ /dev/null @@ -1,182 +0,0 @@ -import React from 'react'; -import clsx from 'clsx'; -import Heading from '@theme/Heading'; -import Link from '@docusaurus/Link'; -import styles from './styles.module.css'; -import Translate, {translate} from '@docusaurus/Translate'; - -const WayfindingWays = [ - { - title: translate({ - message: 'Stellar 101', - id: 'components.WayfindingBoxes.Stellar101.Title' - }), - image: require('@site/static/icons/stellar-101.png').default, - description: ( - - Learn about the core concepts of Stellar in this educational section. - - ), - link: ( - - - Dive In - - - ), - }, - { - title: translate({ - message: 'Write a Smart Contract', - id: 'components.WayfindingBoxes.WriteASmartContract.Title' - }), - image: require('@site/static/icons/contract.png').default, - description: ( - - Get set up and write your first smart contract on the Stellar network. - - ), - link: ( - - - Get Started - - - ), - }, - { - title: translate({ - message: 'Issue an Asset', - id: 'components.WayfindingBoxes.IssueAnAsset.Title' - }), - image: require('@site/static/icons/issue-assets.png').default, - description: ( - - Issuing assets on Stellar is easy. Learn how in this tutorial. - - ), - link: ( - - - Issue Asset - - - ), - }, - { - title: translate({ - message: 'Build an Application', - id: 'components.WayfindingBoxes.BuildAnApplication.Title' - }), - image: require('@site/static/icons/build-applications.png').default, - description: ( - - Build an application on Stellar using the Wallet SDK or JS SDK. - - ), - link: ( - - - Get Building - - - ), - }, - { - title: translate({ - message: 'Developer Tools', - id: 'components.WayfindingBoxes.DeveloperTools.Title' - }), - image: require('@site/static/icons/dev-tools.png').default, - description: ( - - Stellar has a myriad of community and SDF-maintained tools. Check them out! - - ), - link: ( - - - See Tools - - - ), - }, - { - title: translate({ - message: 'Access Data', - id: 'components.WayfindingBoxes.AccessData.Title' - }), - image: require('@site/static/icons/access-data.png').default, - description: ( - - The RPC, Hubble, and Horizon offer all the data capabilities you could possibly need. - - ), - link: ( - - - Get the Goods - - - ), - }, -]; - -function Feature({image, title, description, link}) { - return ( -
-
- -
-
- {title} -

{description}

-

-
-
- ); -} - -export default function WayfindingBoxes() { - return ( -
-
-
- {WayfindingWays.map((props, idx) => ( - - ))} -
-
-
- ); -} diff --git a/src/components/WayfindingBoxes/styles.module.css b/src/components/WayfindingBoxes/styles.module.css deleted file mode 100644 index ec49f70e9..000000000 --- a/src/components/WayfindingBoxes/styles.module.css +++ /dev/null @@ -1,15 +0,0 @@ -.boxes { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; -} - -.boxIcon { - height: 175px !important; - width: 175px !important; -} - -.boxIconLink { - margin-bottom: var(--ifm-heading-margin-bottom); -} diff --git a/src/pages/index.mdx b/src/pages/index.mdx index 4260348ad..bd7de0960 100644 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -2,7 +2,10 @@ hide_table_of_contents: true --- -import WayfindingBoxes from "@site/src/components/WayfindingBoxes"; +import WayfindingBoxes from "@site/src/components/Homepage/WayfindingBoxes"; +import NavigatingTheDocs from "@site/src/components/Homepage/NavigatingTheDocs"; +import DeveloperResources from "@site/src/components/Homepage/DeveloperResources"; +import PathfindingTable from "@site/src/components/Homepage/PathfindingTable"; # Welcome to Stellar Developer Docs @@ -10,54 +13,157 @@ Stellar is a layer-1 open-source, decentralized, peer-to-peer blockchain network The developer docs will teach you how to build applications, issue and use tokens, write smart contracts, set up on and off-ramps, set up a validator node, and more. -If you can’t find answers to your questions in the docs, search for your answer or ask questions in our [Stellar Developer Discord](https://discord.gg/stellardev) or [Stack Exchange](https://stellar.stackexchange.com/). +## **Stellar for...** -## Navigating the docs +
-### [Build](/docs/build) +## **Navigating the docs** -Contains tutorials and how-to guides for writing smart contracts, building applications, interacting with the network, and more. +What each main section of the developer docs contains. -### [Learn](/docs/learn/fundamentals) + -Find all informational and conceptual content here. Learn about Stellar fundamentals like how accounts and transactions function, dive deeper into the functionality of each operation, discover how fees work, and more. - -### [Tokens](/docs/tokens) - -Information on how to issue assets on the Stellar network and create custom smart contract tokens. - -### [Data](/docs/data) - -Discover various data availability options: RPC, Hubble, and Horizon. - -### [Tools](/docs/tools) - -Learn about all the available tools at your disposal for building on, interacting with, or just watching the Stellar network. Also, find information on how to use the Anchor Platform or Stellar Disbursement Platform. - -### [Networks](/docs/networks) - -Information about delpoyed networks (Mainnet, Testnet, and Futurenet), current software versions, and resource limitations and fees. - -### [Validators](/docs/validators) - -Everything you'll need to know if you want to run, operate, and maintain a core validator node on the Stellar network. - -## Contribute to the docs and leave feedback - -Stellar’s Developer Documentation is open-source, and contributions to the docs are encouraged. You can file an issue or pull request to add new content, suggest revisions to existing content, submit suggestions, report bugs, and more in the [Stellar Docs GitHub Repo](https://github.com/stellar/stellar-docs). - -Also, feel free to leave any additional feedback by filing issues in the various other [Stellar repos](https://github.com/stellar). - -## Developer resources +## **Developer resources** Interact with other Stellar developers, keep up with ecosystem standards and protocol upgrades, and learn about upcoming events. -[**Stellar Developer Discord**](https://discord.gg/st7Mxd58BV) Ask questions and engage with other Stellar devs. - -[**Stellar Developers Google Group**](https://groups.google.com/g/stellar-dev) Discuss Core Advancement Proposals (CAPs) and Stellar Ecosystem Proposals (SEPs), talk about the development of Stellar Core and Horizon, and stay informed about important network upgrades. - -[**Stellar Stack Exchange**](https://stellar.stackexchange.com/) A question and answer site for Stellar developers; if you can’t find what you’re looking for in the docs, try searching the Stack Exchange to see if your question has been addressed. If it hasn't, feel free to ask! + + +
+ +## **Stellar docs pathfinding** -[**Developer Site**](https://stellar.org/developers) Get the latest news and insights about building on Stellar. +### Asset issuers + + + +| Stellar Assets | | | +| :-- | --- | --- | +| [Asset and token intro](/docs/tokens) | Learn about the difference between assets issued on Stellar and custom smart contract tokens | Learn | +| [Data availability overview](/docs/data) | Learn about the different mechanisms for data availability on Stellar | Learn | +| [Asset design considerations](/docs/tokens/control-asset-access) | Learn about certain considerations (e.g., flags, asset naming, etc.) that are important when issuing an asset | Learn | +| [Stellar Asset Contract (SAC)](/docs/tokens/stellar-asset-contract) | Learn about interacting with assets issued on Stellar in smart contracts | Learn | +| [Quickstart script](/docs/tokens/quickstart) | Issue an asset on the Stellar network in a single transaction | Guide | +| [Deploy an SAC](/docs/tokens/stellar-asset-contract) | Deploy a Stellar Asset Contract with the Stellar CLI | Guide | + +| Custom smart contract tokens | | | +| :-- | --- | --- | +| [Asset and token intro](/docs/tokens) | Learn about the difference between assets issued on Stellar and custom smart contract tokens | Learn | +| [Data availability overview](/docs/data) | Learn about the different mechanisms for data availability on Stellar | Learn | +| [Token interface (SEP-41)](/docs/tokens/token-interface) | Learn about the common interface for smart contract tokens on Stellar | Learn | +| [Token example contract](/docs/build/smart-contracts/example-contracts/tokens) | Demonstrates how to write a token contract that implements the Token Interface | Example | +| [Manage contracts](/docs/build/guides/cli/contract-lifecycle) | Use the Stellar CLI to manage smart contracts | Guide | +| [Stellar CLI](/docs/build/guides/cli) | The command line interface to Stellar smart contracts | Tool | +| [Rust SDK](https://docs.rs/soroban-sdk/latest/soroban_sdk/) | Supports writing programs for Stellar smart contracts | Tool | + + + +### Smart contract developers + + + +| Essential resources | | | +| :-- | --- | --- | +| [Stellar smart contracts overview](/docs/build/smart-contracts/overview) | Learn the essentials about writing smart contracts on Stellar | Learn | +| [Migrating from EVM networks](/docs/learn/migrate) | Stellar is not an EVM network, learn about how Stellar differs from EVM networks in this section | Learn | +| [Storage types](/docs/learn/encyclopedia/storage/state-archival#contract-data-type-descriptions) | There are three different storage types for smart contract data, learn about them in this section | Learn | +| [Getting started guide](/docs/build/smart-contracts/getting-started) | The go-to guide for getting setup to write smart contracts on Stellar | Guide | +| [Example contracts](/docs/build/smart-contracts/example-contracts) | These contracts are good starting points for understanding best practices and writing your own contracts on Stellar | Guide | +| [General contract guides](/docs/build/guides/conventions) | Various guides that highlight the norms seen in contract development | Guide | +| [Stellar CLI](/docs/build/guides/cli) | The command line interface to Stellar smart contracts | Tool | +| [Rust SDK](https://docs.rs/soroban-sdk/latest/soroban_sdk/) | Supports writing programs for Stellar smart contracts | Tool | + +| Optional resources | | | +| :-- | --- | --- | +| [Trustlines](/docs/learn/fundamentals/stellar-data-structures/accounts#trustlines) | Trustlines are unique to Stellar and are an explicit opt-in for an account to hold and trade a particular asset | Learn | +| [Upgrading contracts](/docs/build/guides/conventions/upgrading-contracts) | You don’t need a proxy pattern to upgrade a contract (like in EVM), you can upgrade the Wasm bytecode directly without changing the address | Guide | + + + +### Ramps (anchors) + + + +| Ramps | | | +| :-- | --- | --- | +| [Anchor overview](/docs/learn/fundamentals/anchors) | Stellar ramps are called "anchors", learn about them in this overview section | Learn | +| [SEP-6 and SEP-24](/docs/learn/fundamentals/anchors#using-sep-6-programmatic-deposit-and-withdrawal-versus-sep-24-hosted-deposit-and-withdrawal) | You can set up an anchor using SEP-6 or SEP-24, learn about the differences in this section | Learn | +| [Anchor Platform](/platforms/anchor-platform) | Set up an anchor using the SDF-maintained Anchor Platform | Tutorial | +| [Use a third-party Horizon provider](/docs/data/horizon/horizon-providers) | We recommend anchors use a third-party Horizon provider, but they can also set up their own | Data | +| [Demo wallet](/docs/tools/developer-tools/anchor-tools#demo-wallet) | An application for interactively testing anchor services. Lets financial application developers test their integrations and learn how Stellar ecosystem protocols (SEPs) work | Tool | +| [Anchor test suite](/docs/tools/developer-tools/anchor-tools#anchor-test-suite) | A test suite for validating SEP6, SEP24, SEP31 transfer servers | Tool | + + + +### Applications + + + +| Traditional Wallets | | | +| :-- | --- | --- | +| [Application design considerations](/docs/build/apps/application-design-considerations) | Various concepts to consider when building a wallet, such as custody models, security, and more | Learn | +| [Fees](/docs/learn/fundamentals/fees-resource-limits-metering#inclusion-fee) | Learn about how fees work on the Stellar network and decide how you'd like to handle user fees | Learn | +| [Operations & transactions](/docs/learn/fundamentals/transactions) | Wallets build and submit transactions, learn about about how operations and transactions work here | Learn | +| [Signatures & multisig](/docs/learn/encyclopedia/security/signatures-multisig) | Signatures are authorization for transactions on the Stellar network, learn about them here | Learn | +| [Anchor overview](/docs/learn/fundamentals/anchors) | Wallets may want to connect to financial rails via anchors (on- and off-ramps), learn about them here | Learn | +| [Wallet SDK](/docs/category/build-a-wallet-with-the-wallet-sdk) | Learn to build a wallet with the Wallet SDK in Kotlin, Flutter, or TypeScript | Tutorial | +| [Horizon introduction](/docs/data/horizon) | Access network data using the Horizon REST API | Data | + +| Decentralized applications (dapps) | | | +| :-- | --- | --- | +| Preface | Start by viewing the [smart contract wayfinding section](#smart-contract-developers) | | +| [Transaction simulation](/docs/learn/encyclopedia/contract-development/contract-interactions/transaction-simulation) | A process that allows developers to test the outcome of a transaction without actually executing it, helping to ensure accuracy and prevent errors | Learn | +| [Dapp frontend](/docs/build/apps/dapp-frontend) | Create a web app that interacts with the contracts via RPC calls | Guide | +| [Dapp how-to guides](/docs/build/guides/dapps) | Explore the various guides relating to dapp development | Guide | +| [Stellar Wallets Kit](https://stellarwalletskit.dev/) | A kit to handle all Stellar Wallets at once with a simple API and without caring about individual configurations for each one of them | Tool | +| [Stellar JS SDK](https://stellar.github.io/js-stellar-sdk/) | Communicate with a Horizon server and Soroban RPC | Data | +| [RPC introduction](/docs/data/rpc) | Access network data using the RPC | Data | + +| Exchanges | | | +| :-- | --- | --- | +| [List of operations](/docs/learn/fundamentals/transactions/list-of-operations) | Learn how operations function on the Stellar network, notably `CreateAccount`, `Payment`, and `ChangeTrust` | Learn | +| [Trustlines](/docs/learn/fundamentals/stellar-data-structures/accounts#trustlines) | Trustlines are unique to Stellar and are an explicit opt-in for an account to hold and trade a particular asset | Learn | +| [SDKs](/docs/tools/sdks) | Used to connect to Horizon or RPC, as well as construct and parse transactions | Tool | +| [Run your own RPC](/docs/data/rpc/admin-guide) | Exchanges typically run their own RPC or Horizon to maintain greater control over data integrity, performance, and security | Data | +| [Run your own Horizon](/docs/data/horizon/admin-guide) | Exchanges typically run their own RPC or Horizon to maintain greater control over data integrity, performance, and security | Data | + + + +### Infrastructure providers + + + +| Horizon | | | +| :-- | --- | --- | +| [Hardware requirements](/docs/data/requirements) | The recommended hardware requirements for users looking to set up a Horizon instance | Learn | +| [Admin guide](/docs/data/requirements) | A comprehensive set of guides that will teach you how to administer a production Horizon instance | Tutorial | +| [API reference](/docs/data/horizon/api-reference) | Detailed documentation that provides information about the API endpoints, methods, parameters, and responses | Guide | +| [SDK library](/docs/tools/sdks/library) | Use the various SDKs to simplify the Horizon setup process by using pre-built tools and libraries that make it easier to configure, manage, and connect to the network | Tool | +| [Ecosystem providers](/docs/data/horizon/horizon-providers) | Create a PR in the docs to list your available Horizon service on this page | Tool | + +| Stellar RPC | | | +| :-- | --- | --- | +| [Hardware requirements](/docs/data/requirements) | The recommended hardware requirements for users looking to set up an RPC node | Learn | +| [Admin guide](/docs/data/rpc/admin-guide) | A comprehensive guide that will teach you how to administer a production RPC node | Tutorial | +| [API reference](/docs/data/rpc/api-reference) | Detailed documentation that provides information about the API endpoints, methods, parameters, and responses | Guide | +| [SDK library](/docs/tools/sdks/library) | Use the various SDKs to simplify the RPC setup process by using pre-built tools and libraries that make it easier to configure, manage, and connect to the network | Tool | +| [Ecosystem providers](/docs/data/rpc/rpc-providers) | Create a PR in the docs to list your available RPC service on this page | Tool | + + + +### Analytics + + + +| Hubble | | | +| :-- | --- | --- | +| [Connecting to Hubble](/docs/data/hubble/analyst-guide/connecting) | Connect to Hubble using one of three methods: BigQuery UI, BigQuery SDK, or Looker Studio | Learn | +| [Data catalog](/docs/data/hubble/data-catalog) | View all Hubble data catalog information. | Learn | +| [Admin guide](/docs/data/hubble/admin-guide) | A comprehensive guide that will teach you how to run your own Hubble analytics platform | Tutorial | +| [Analyst guide](/docs/data/hubble/analyst-guide) | A comprehensive guide that will teach you how to use Hubble for data analysis | Tutorial | +| [End-to-end example](/docs/data/hubble/analyst-guide/creating-visualizations) | A guide that will walk you through an end-to-end analysis use case with Hubble and Google Looker Studio | Example | +| [Analytics platforms](/docs/data/hubble/analytics-platforms) | A list of data analytics platforms that use Hubble to provide a complete historical record of Pubnet data on the Stellar network | Tool | + +