docs - new homepage (#29793)
* refactor: new home page * refactor: line lengths and meta description * docs: removed text section * refactor: links label and comments * chore: removed comment * refactor: removed page
This commit is contained in:
Nick Frostbutter
GitHub
parent
5108350710
commit
54416451f6
|
|
@ -37,11 +37,14 @@ function Card({ to, header, body, externalIcon = false }) {
|
|||
)}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="card__body">
|
||||
<p>
|
||||
<Translate description={body.translateId}>{body.label}</Translate>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{typeof body === "object" && (
|
||||
<div className="card__body">
|
||||
<p>
|
||||
<Translate description={body.translateId}>{body.label}</Translate>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
import React from "react";
|
||||
import Card from "./Card";
|
||||
|
||||
export default function HomeCtaLinks() {
|
||||
return (
|
||||
<div className="container">
|
||||
<div className="row cards__container">
|
||||
<Card
|
||||
to="developers"
|
||||
header={{
|
||||
label: "Developers",
|
||||
translateId: "cta-developers",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Card
|
||||
to="running-validator"
|
||||
header={{
|
||||
label: "Validators",
|
||||
translateId: "cta-validators",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Card
|
||||
to="cluster/overview"
|
||||
header={{
|
||||
label: "Architecture",
|
||||
translateId: "cta-architecture",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -57,11 +57,11 @@ main {
|
|||
}
|
||||
|
||||
.cards__container {
|
||||
margin: 3em 0;
|
||||
/* margin-bottom: 0; */
|
||||
}
|
||||
|
||||
.cards__container .col {
|
||||
margin-bottom: 1em;
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
|
@ -73,7 +73,12 @@ main {
|
|||
transition-duration: 200ms;
|
||||
align-items: start;
|
||||
height: 100%;
|
||||
box-shadow: 0 8px 15px 2px rgba(86, 91, 115, 0.1);
|
||||
/* box-shadow: 0 8px 15px 2px rgba(86, 91, 115, 0.1); */
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .card {
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.card a {
|
||||
|
|
@ -81,7 +86,8 @@ main {
|
|||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translate(0px, -5px);
|
||||
/* transform: translate(0px, -5px); */
|
||||
border-color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
.footer--dark {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
---
|
||||
slug: /
|
||||
id: home
|
||||
title: Home
|
||||
sidebar_label: Home
|
||||
description:
|
||||
"Solana is a high performance network that is utilized for a range of use cases, \
|
||||
including finance, NFTs, payments, and gaming."
|
||||
# displayed_sidebar: introductionSidebar
|
||||
---
|
||||
|
||||
# Solana Documentaion
|
||||
|
||||
Solana is a blockchain built for mass adoption. It's a high performance network that is utilized for
|
||||
a range of use cases, including finance, NFTs, payments, and gaming. Solana operates as a single
|
||||
global state machine, and is open, interoperable and decentralized.
|
||||
|
||||
## Getting started
|
||||
|
||||
Dive right into Solana to start building or setup your tooling.
|
||||
|
||||
- [Setup local environment](/cli) - Install the Solana CLI to get your local development environment setup
|
||||
- [Hello World in your browser](getstarted/hello-world) - Build and deploy your first on-chain Solana program,
|
||||
directly in your browser using Solana Playground
|
||||
|
||||
## Start learning
|
||||
|
||||
Build a strong understanding of the core concepts that make Solana different from other blockchains.
|
||||
|
||||
- [Transactions](./developing/programming-model/transactions) - Collection of instructions for the blockchain to execute
|
||||
- [Accounts](./developing/programming-model/accounts) - Data and state storage mechanism for Solana
|
||||
- [Programs](./developing/intro/programs) - The executable code used to perform actions on the blockchain
|
||||
- [Cross-Program Invocation](./developing/programming-model/calling-between-programs) - Core of the "composability"
|
||||
of Solana, this is how programs can "call" each other.
|
||||
|
||||
## Understanding the architecture
|
||||
|
||||
Get to know the underlying architecture of how the proof-of-stake blockchain works.
|
||||
|
||||
- [Validators](./validator/anatomy) - the individual nodes that are the backbone of the network
|
||||
- [Clusters](./cluster/overview) - a collection of validators that work together for consensus
|
||||
|
||||
## Running a validator
|
||||
|
||||
Explore what it takes to operate a Solana validator and help secure the network.
|
||||
|
||||
- [System requirements](./running-validator/validator-reqs) - Recommended hardware requirements and expected SOL
|
||||
needed to operate a validator
|
||||
- [Quick start guide](./running-validator/validator-start) - Setup a validator and get connected to a cluster
|
||||
for the first time
|
||||
|
||||
## Learn more
|
||||
|
||||
import HomeCtaLinks from "../components/HomeCtaLinks";
|
||||
|
||||
<HomeCtaLinks />
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
import React from "react";
|
||||
import Layout from "@theme/Layout";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import styles from "./styles.module.css";
|
||||
import Card from "../../components/Card";
|
||||
|
||||
function Home() {
|
||||
const context = useDocusaurusContext();
|
||||
const { siteConfig = {} } = context;
|
||||
|
||||
return (
|
||||
<Layout title="Homepage" description="Solana Documentation">
|
||||
<main>
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row cards__container">
|
||||
<Card
|
||||
to="developers"
|
||||
header={{
|
||||
label: "⛏ Start Developing",
|
||||
translateId: "start-building",
|
||||
}}
|
||||
body={{
|
||||
label:
|
||||
"Get started building your decentralized app or marketplace with Solana.",
|
||||
translateId: "get-started-building",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Card
|
||||
to="running-validator"
|
||||
header={{
|
||||
label: "🎛 Run a Validator Node",
|
||||
translateId: "run-validator",
|
||||
}}
|
||||
body={{
|
||||
label:
|
||||
"Validate transactions, secure the network, and earn rewards.",
|
||||
translateId: "validate-transactions",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Card
|
||||
to="https://spl.solana.com/token"
|
||||
header={{
|
||||
label: "🏛 Create an SPL Token",
|
||||
translateId: "create-spl",
|
||||
}}
|
||||
body={{
|
||||
label:
|
||||
"Launch your own SPL Token, Solana's equivalent of ERC-20.",
|
||||
translateId: "erc-20",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Card
|
||||
to="integrations/exchange"
|
||||
header={{
|
||||
label: "🏦 Integrate an Exchange",
|
||||
translateId: "integrate-exchange",
|
||||
}}
|
||||
body={{
|
||||
label:
|
||||
"Follow our extensive integration guide to ensure a seamless user experience.",
|
||||
translateId: "integration-guide",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Card
|
||||
to="wallet-guide"
|
||||
header={{
|
||||
label: "📲 Manage a Wallet",
|
||||
translateId: "manage-wallet",
|
||||
}}
|
||||
body={{
|
||||
label:
|
||||
"Create a wallet, check your balance, and learn about wallet options.",
|
||||
translateId: "wallet-options",
|
||||
}}
|
||||
/>
|
||||
|
||||
<Card
|
||||
to="introduction"
|
||||
header={{
|
||||
label: "🤯 Learn How Solana Works",
|
||||
translateId: "learn-how",
|
||||
}}
|
||||
body={{
|
||||
label:
|
||||
"Get a high-level understanding of Solana's architecture.",
|
||||
translateId: "high-level",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
Loading…
Reference in New Issue