Skip to content

Commit c15ea9c

Browse files
authored
Merge pull request #1324 from oasisprotocol/kaja/homepage-redesign
Homepage redesign
2 parents 5b6259e + ef6e431 commit c15ea9c

19 files changed

Lines changed: 1103 additions & 129 deletions

docs/README.mdx

Lines changed: 102 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,105 @@
1-
import DocCard from '@theme/DocCard';
2-
import DocCardList from '@theme/DocCardList';
3-
import {findSidebarItem} from '@site/src/sidebarUtils';
1+
import DocCard from "@theme/DocCard";
2+
import DocCardList from "@theme/DocCardList";
3+
import { findSidebarItem } from "@site/src/sidebarUtils";
4+
import DocCardSection from "@site/src/components/DocCardSection";
5+
import OasisSvg from "@site/static/img/OasisGraphic.svg?react";
6+
import GetInvolvedSvg from "@site/static/img/GetInvolvedGraphic.svg?react";
7+
import BuildSvg from "@site/static/img/BuildGraphic.svg?react";
8+
import DevelopCoreSvg from "@site/static/img/DevelopCoreGraphic.svg?react";
9+
import NodeseSvg from "@site/static/img/NodesGraphic.svg?react";
410

511
# Getting Started
612

7-
## Use Oasis
8-
9-
This introductory part contains general overview of the Oasis Network such as
10-
the distinction between the consensus layer and different ParaTimes. It
11-
also covers wallets and other tools for managing your assets across the Oasis
12-
chains and how to use unique Oasis features.
13-
14-
<DocCardList items={[
15-
findSidebarItem('/general/oasis-network/'),
16-
findSidebarItem('/general/manage-tokens/'),
17-
findSidebarItem('/general/manage-tokens/cli/'),
18-
]} />
19-
20-
## Build on Oasis
21-
22-
Contains learning material for the smart contract developers. Since the Oasis
23-
platform is best known for confidentiality, the most notable ParaTime is
24-
[Oasis Sapphire], an **EVM-compatible** ParaTime with **built-in contract state
25-
encryption**. The Oasis team also prepared a set of libraries called the
26-
[Oasis Privacy Layer] to **bridge existing dApps running on other chains** to
27-
use the unique Sapphire's confidentiality.
28-
29-
Our [Runtime OFfchain Logic (ROFL)][ROFL] enables you to **build secure applications running
30-
offchain** in a trusted environment (TEE) and that seamlessly communicate with
31-
Oasis Sapphire. This is ideal for trusted oracles, compute-expensive tasks
32-
in AI or as a backend for interactive games.
33-
34-
<DocCardList items={[
35-
findSidebarItem('/build/sapphire/'),
36-
findSidebarItem('/build/opl/'),
37-
findSidebarItem('/build/rofl/'),
38-
findSidebarItem('/build/tools/'),
39-
]} />
40-
41-
[Oasis Sapphire]: ./build/sapphire/README.mdx
42-
[Oasis Privacy Layer]: ./build/opl/README.mdx
43-
[ROFL]: ./build/rofl/README.mdx
44-
45-
## Get Involved
46-
47-
Contains information on official channels to get in touch with the Oasis Network
48-
developers and how to contribute to the network.
49-
50-
<DocCardList items={[
51-
findSidebarItem('/get-involved/'),
52-
findSidebarItem('https://oasisrose.garden'),
53-
findSidebarItem('/get-involved/run-node'),
54-
findSidebarItem('/get-involved/oasis-core'),
55-
]} />
56-
57-
## Run Node
58-
59-
If you want to run your own Oasis node, this part will provide you
60-
with guides on the current Mainnet and Testnet network parameters and how to
61-
set up your node, let it be a validator node, perhaps running a ParaTime or
62-
just a simple client node for your server to submit transactions and perform
63-
queries on the network.
64-
65-
<DocCardList items={[
66-
findSidebarItem('/node/'),
67-
findSidebarItem('/node/mainnet/'),
68-
findSidebarItem('/node/testnet/'),
69-
findSidebarItem('/node/run-your-node/'),
70-
]} />
71-
72-
## Build ParaTimes
73-
74-
Apart from the Sapphire, Emerald, Cipher and the Key manager ParaTimes,
75-
you can also write, compile, sign and deploy your own ParaTime on the Oasis
76-
Network. This part describes the knobs you need to use to do so.
77-
78-
<DocCard item={findSidebarItem('/build/tools/build-paratime/')} />
79-
80-
## Develop Core
81-
82-
Whether you want to contribute your code to the core components of the Oasis
83-
Network or just learn more about the Oasis consensus layer and other core
84-
components, this is the part for you.
85-
86-
<DocCard item={ findSidebarItem('/core/') } />
87-
88-
Additions or changes to the interoperable Oasis network components are always
89-
made with consensus. Similar to the Ethereum's ERC/EIP mechanism Oasis follows
90-
formal Architectural Decision Records (ADRs) which are first proposed, voted on
91-
and finally implemented, if accepted.
92-
93-
<DocCard item={ findSidebarItem('/adrs') } />
13+
<div className='homepage-container'>
14+
<DocCardSection
15+
title="Use Oasis"
16+
path="/general/"
17+
description="This introductory part contains general overview of the Oasis Network such as
18+
the distinction between the consensus layer and different ParaTimes. It
19+
also covers wallets and other tools for managing your assets across the Oasis
20+
chains and how to use unique Oasis features."
21+
itemPaths={[
22+
"/general/oasis-network/",
23+
"/general/manage-tokens/",
24+
"/general/manage-tokens/cli/",
25+
]}
26+
svg={
27+
<OasisSvg className="animatedSvg" />
28+
}
29+
/>
30+
31+
<DocCardSection
32+
title="Get Involved"
33+
path="/get-involved/"
34+
description="Contains information on official channels to get in touch with the Oasis Network developers and how to contribute to the network."
35+
itemPaths={[
36+
"/get-involved/",
37+
"https://oasisrose.garden",
38+
"/get-involved/run-node",
39+
"/get-involved/oasis-core",
40+
]}
41+
svg={<GetInvolvedSvg className="animatedSvg" />}
42+
/>
43+
44+
<DocCardSection
45+
title="Build on Oasis"
46+
path="/build/"
47+
description={
48+
<>
49+
Contains learning material for the smart contract developers. Since the
50+
Oasis platform is best known for confidentiality, the most notable
51+
ParaTime is <a href="/build/sapphire/">Oasis Sapphire</a>, an
52+
EVM-compatible ParaTime with built-in contract state encryption. The Oasis
53+
team also prepared a set of libraries called the
54+
<a href="/build/opl/">Oasis Privacy Layer</a> to bridge existing dApps running
55+
on other chains and use the unique Sapphire's confidentiality.
56+
<br />
57+
<br />
58+
Our <a href="/build/rofl/">Runtime Offchain Logic (ROFL)</a> enables you
59+
to build secure applications running offchain in a trusted environment
60+
(TEE) that seamlessly communicate with Oasis Sapphire. This is ideal for
61+
trusted oracles, compute-expensive tasks in AI, or as a backend for
62+
interactive games.
63+
</>
64+
}
65+
fullWidth
66+
itemPaths={[
67+
"/build/sapphire/",
68+
"/build/opl/",
69+
"/build/rofl/",
70+
"/build/tools/",
71+
]}
72+
svg={<BuildSvg className="animatedSvg" />}
73+
/>
74+
75+
<DocCardSection
76+
title="Run Node"
77+
path="/node/"
78+
description="If you want to run your own Oasis node, this part will provide you with guides on the current Mainnet and Testnet network parameters and how to set up your node, let it be a validator node, perhaps running a ParaTime or just a simple client node for your server to submit transactions and perform queries on the network."
79+
itemPaths={[
80+
"/node/",
81+
"/node/mainnet/",
82+
"/node/testnet/",
83+
"/node/run-your-node/",
84+
]}
85+
svg={<NodeseSvg className="animatedSvg" />}
86+
/>
87+
88+
<DocCardSection
89+
title="Develop Core"
90+
path="/core/"
91+
description={
92+
<>
93+
Whether you want to contribute your code to the core components of the Oasis Network or just learn more about the Oasis consensus layer and other core components, this is the part for you.
94+
<br/>
95+
<br/>
96+
Additions or changes to the interoperable Oasis network components are always made with consensus. Similar to the Ethereum's ERC/EIP mechanism Oasis follows formal Architectural Decision Records (ADRs) which are first proposed, voted on and finally implemented, if accepted.
97+
</>
98+
}
99+
itemPaths={[
100+
"/core/",
101+
"/adrs",
102+
]}
103+
svg={<DevelopCoreSvg className="animatedSvg" />}
104+
/>
105+
</div>

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@docusaurus/preset-classic": "^3.7.0",
2727
"@docusaurus/remark-plugin-npm2yarn": "^3.7.0",
2828
"@easyops-cn/docusaurus-search-local": "0.45.0",
29+
"@fontsource-variable/inter": "^5.2.6",
2930
"@mdx-js/react": "^3.0.0",
3031
"@mermaid-js/mermaid-cli": "^11.4.0",
3132
"clsx": "^2.0.0",

sidebarBuild.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const sidebarBuild: SidebarsConfig = {
1010
{
1111
type: 'category',
1212
label: 'Sapphire',
13+
description: 'Sapphire is our official confidential ParaTime for smart contract development with Ethereum Virtual Machine (EVM) compatibility.',
1314
collapsible: false,
1415
link: {
1516
type: 'doc',
@@ -44,6 +45,7 @@ export const sidebarBuild: SidebarsConfig = {
4445
{
4546
type: 'category',
4647
label: 'ROFL',
48+
description: 'Runtime OFf-chain Logic (ROFL) apps are a mechanism to augment the deterministic on-chain backend with verifiable off-chain applications',
4749
collapsible: false,
4850
link: {
4951
type: 'doc',
@@ -78,6 +80,7 @@ export const sidebarBuild: SidebarsConfig = {
7880
{
7981
type: 'category',
8082
label: 'Oasis Privacy Layer',
83+
description: 'The Oasis Privacy Layer (OPL) is a powerful solution that enables developers to integrate privacy features into their decentralized applications (dApps) across multiple EVM-compatible networks.',
8184
collapsible: false,
8285
link: {
8386
type: 'doc',
@@ -139,6 +142,7 @@ export const sidebarBuild: SidebarsConfig = {
139142
{
140143
type: 'category',
141144
label: 'Tools & Services',
145+
description: 'Oasis integrates with a number of services and provides tooling support for developers using Remix (unencrypted transactions only), Sourcify, Docker images, Band, and more.',
142146
collapsible: false,
143147
link: {
144148
type: 'doc',

sidebarGeneral.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const sidebarGeneral: SidebarsConfig = {
1010
{
1111
type: 'category',
1212
label: 'Oasis Network',
13+
description: 'The Oasis Network is a Layer 1 decentralized blockchain network designed to be uniquely scalable, privacy-first and versatile.',
1314
collapsible: false,
1415
link: {
1516
type: 'doc',
@@ -24,6 +25,7 @@ export const sidebarGeneral: SidebarsConfig = {
2425
{
2526
type: 'category',
2627
label: 'Manage your Tokens',
28+
description: 'The native token on Oasis Mainnet is called ROSE. Learn how to manage them.',
2729
collapsible: false,
2830
link: {
2931
type: 'doc',
@@ -70,6 +72,7 @@ export const sidebarGeneral: SidebarsConfig = {
7072
{
7173
type: 'category',
7274
label: 'Oasis CLI',
75+
description: 'Oasis command-line interface (CLI) is a powerful all-in-one tool for interacting with the Oasis Network.',
7376
link: {
7477
type: 'doc',
7578
id: 'general/manage-tokens/cli/README',

sidebarGetInvolved.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export const sidebarGetInvolved: SidebarsConfig = {
3131
{
3232
type: 'category',
3333
label: 'Run a Node',
34+
description: 'The Oasis Network consists of several types of nodes, each serving distinct roles to maintain the functionality, security, and decentralization of the network',
3435
collapsible: false,
3536
link: {
3637
type: 'generated-index',

sidebarNode.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const sidebarNode: SidebarsConfig = {
1010
{
1111
type: 'category',
1212
label: 'Mainnet',
13+
description: 'These are the current parameters for the Mainnet.',
1314
collapsible: false,
1415
link: {
1516
type: 'doc',
@@ -37,6 +38,7 @@ export const sidebarNode: SidebarsConfig = {
3738
{
3839
type: 'category',
3940
label: 'Testnet',
41+
description: 'These are the current parameters for the Testnet, a test-only network for testing out upcoming features and changes to the protocol.',
4042
collapsible: false,
4143
link: {
4244
type: 'doc',
@@ -50,6 +52,7 @@ export const sidebarNode: SidebarsConfig = {
5052
{
5153
type: 'category',
5254
label: 'Run Your Node',
55+
description: 'The Oasis Network consists of several types of nodes, each serving distinct roles to maintain the functionality, security, and decentralization of the network.',
5356
collapsible: false,
5457
link: {
5558
type: 'doc',

0 commit comments

Comments
 (0)