Skip to content

Commit

Permalink
Feature/landing page update (#693)
Browse files Browse the repository at this point in the history
* update header

* add biome formatter

* update footer

* update logo and title

* images and small style changes

* swizzle search bar and set up context

* use query only in context

* add poppins font

* update font and footer styles

* cleanup

* add "docs" title to smaller screen

* add hero component

* add and style searchbar

* style search component

* add search function to tags

* add flex wrap

* remove outline on search bar

* add breakpoint hook

* add tab icon images

* update search min width

* initial tabs component

* add tabs content to config

* style dropdown

* add close button to dropdown

* add tab content styling

* add astar button component

* add AstarButton hover effect

* add link to astar button comp

* style tabs menu for mobile

* style tab bar

* update fonts

* add socials bar component

* update and lock dependencies

* build fixes

* remove sass

* fix the build css issue

* fix remaining styles

* cleanup

* lower node version for CI compat.

* fix: button link z index

* fix: faucet link

* clean up old banners

* fix margins

* add svg icons

* add copyright padding

* fix broken link

* reset the query after opening the modal

* set "Enter" as constant
  • Loading branch information
codespool authored Sep 23, 2024
1 parent b066295 commit 25be04b
Show file tree
Hide file tree
Showing 141 changed files with 4,958 additions and 40,468 deletions.
25 changes: 25 additions & 0 deletions biome.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"suspicious": {
"noExplicitAny": "off"
},
"a11y": {
"noNoninteractiveTabindex": "off",
"useAnchorContent": "off"
}
}
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 100
}
}
2 changes: 0 additions & 2 deletions docs/build/EVM/index.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
# EVM Smart Contracts
![EVM smart contracts](/docs/build/img/evm.png)

All Astar networks support EVM smart contracts except Swanky node.

Expand All @@ -10,4 +9,3 @@ import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';

<DocCardList items={useCurrentSidebarCategory().items}/>

4 changes: 0 additions & 4 deletions docs/build/Introduction/_category_.json

This file was deleted.

14 changes: 7 additions & 7 deletions docs/build/builder-guides/astar_features/astarBase.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ This cookbook will learn you on how to started using AstarBase. AstarBase is an

## What is AstarBase

AstarBase is an on-chain EVM database. AstarBase contains the mapping of users's EVM and native address. An EVM address is usually referred as a Metamask address or H160, native address can be referred as a SS58 address. These two are now interchangeable through the mapping that AstarBase offers.
AstarBase is an on-chain EVM database. AstarBase contains the mapping of users's EVM and native address. An EVM address is usually referred as a Metamask address or H160, native address can be referred as a SS58 address. These two are now interchangeable through the mapping that AstarBase offers.

The main goal of AstarBase is creating more end-user cases for users to participate in the Astar ecosystem by offering some mechanisms such as rewarding users easily.

Expand All @@ -19,8 +19,8 @@ The main goal of AstarBase is creating more end-user cases for users to particip
We have three major functions in AstarBase.

```jsx
function isRegistered(address evmAddress)
external view
function isRegistered(address evmAddress)
external view
returns (bool);
```
This code snippet checks if the given address was registered in AstarBase.
Expand All @@ -41,7 +41,7 @@ This code snippet checks if the pair of addresses (SS58 & EVM) is an active stak

## Create a simple dApp using AstarBase

We will work on a simple “Hello World” dApp which has a simple frontend to show a practical use case of AstarBase.
We will work on a simple “Hello World” dApp which has a simple frontend to show a practical use case of AstarBase.

Our showcase checks if certain user is a registered user in AstarBase. One application of this would be to pick a loyal user.

Expand Down Expand Up @@ -384,7 +384,7 @@ const address = "0xF183f51D3E8dfb2513c15B046F848D4a68bd3F5D";
```

### Step 6:
We will combine all what we wrote in the previous steps. For #EVM_ADDRESS, you can replace it with your specified address in EVM format.
We will combine all what we wrote in the previous steps. For #EVM_ADDRESS, you can replace it with your specified address in EVM format.

```jsx
const smartContract = new web3.eth.Contract(abi, address);
Expand All @@ -397,7 +397,7 @@ That’s a wrap! Happy hacking!

## Reference

- Official Document for AstarBase:
- [/docs/build/evm/astarbase/](/docs/build/evm/astarbase/)
- Official Document for AstarBase:
- [/docs/build/EVM/astarbase/](/docs/build/EVM/astarbase/)
- Official Document for creating a React app:
- [https://reactjs.org/docs/create-a-new-react-app.html](https://reactjs.org/docs/create-a-new-react-app.html)
1 change: 0 additions & 1 deletion docs/build/builder-guides/hacking/general.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ sidebar_position: 1
---

# General
![banner](/docs/build/img/gradient5.jpg)

Please read the linked chapter and try to answer questions. If you can't find the answer, go to the [Astar Discord server](https://discord.gg/invite/AstarNetwork) and ask the question in the general channel under the Developer Support category.

Expand Down
3 changes: 1 addition & 2 deletions docs/build/builder-guides/hacking/hack_evm.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import CustomNet from './img/custom_net.png'
import Zombie from './img/zombie.png'

# Hack EVM Smart Contracts
![banner](/docs/build/img/gradient2.jpg)

Read the linked chapters or use tutorials to be able to answer following questions:

Expand All @@ -30,4 +29,4 @@ The Truffle and Hardhat are preferred tools to develop, deploy and test smart co
Setup your Hardhat environment using [How to use Hardhat to deploy on Shibuya](/docs/build/builder-guides/astar_features/use_hardhat).


What is [next](/docs/build/builder-guides/hacking/next)?
What is [next](/docs/build/builder-guides/hacking/next)?
5 changes: 2 additions & 3 deletions docs/build/builder-guides/hacking/hack_wasm.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ sidebar_position: 2
---

# Hack Wasm Smart Contracts
![banner](/docs/build/img/gradient4.jpg)

Read the linked chapters or use tutorials to be able to answer following questions:

Expand All @@ -19,7 +18,7 @@ Read the linked chapters or use tutorials to be able to answer following questio
* Can you unit test ink! smart contract without running test node like Swanky-node?

## Run [Swanky](https://github.com/AstarNetwork/swanky-node) Node
* Start your Swanky node and connect [polkadot-JS UI](https://polkadot.js.org/apps/?rpc=ws%3A%2F%2F127.0.0.1%3A9944#/explorer) to it. Please note that for Swanky node there will be no node production if there is no interaction with it.
* Start your Swanky node and connect [polkadot-JS UI](https://polkadot.js.org/apps/?rpc=ws%3A%2F%2F127.0.0.1%3A9944#/explorer) to it. Please note that for Swanky node there will be no node production if there is no interaction with it.

:::note

Expand All @@ -37,4 +36,4 @@ Depending on your confidence, use any of these tutorial. If you are just startin
* Use Polkadot-JS UI to reload same contract you just deployed using Contracts-UI.


What is [next](/docs/build/builder-guides/hacking/next)?
What is [next](/docs/build/builder-guides/hacking/next)?
3 changes: 1 addition & 2 deletions docs/build/builder-guides/hacking/index.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
# Astar Hacker Guide
![banner](/docs/build/img/gradient8.jpg)
Welcome to Web3!
Welcome to Web3!
## What is this Guide all about?
This guide will navigate you through the Astar Documentation to jump start your development journey. We are aware of the complexity of the subject and want to encourage and support you on your Web3 journey.
This Astar Hacker Guide can be used for:
Expand Down
2 changes: 0 additions & 2 deletions docs/build/builder-guides/index.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
# Builder Guides
![Additional information to help developing on Astar Network](/docs/build/img/builderguides.png)

<br/>

import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';

<DocCardList items={useCurrentSidebarCategory().items}/>

2 changes: 1 addition & 1 deletion docs/build/dapp-staking/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ If you are interested in developing on top of dApp Staking and integrating dApp

Learn how to integrate dApp staking into your EVM dApp in the precompiles chapter:

- [EVM Precompiled Contracts](/docs/build/evm/precompiles/staking/)
- [EVM Precompiled Contracts](/docs/build/EVM/precompiles/staking/)

### Other page may be of interest:

Expand Down
4 changes: 1 addition & 3 deletions docs/build/environment/index.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import Figure from "/src/components/figure"

# Set up the Development Environment
<Figure src={require('/docs/build/img/environment.png').default} width="100%" />

Knowledge about how to set up various environments is not required before you get started, however, it may be helpful to review the following sections to learn more about the purpose of each Environment, and their specific requirements.

For example, to build and test Wasm smart contracts, an ink! Environment with a Swanky node is appropriate. On the zkEVM, a [different kind of environment](/docs/build/zkEVM/quickstart/) is required.
For example, to build and test Wasm smart contracts, an ink! Environment with a Swanky node is appropriate. On the zkEVM, a [different kind of environment](/docs/build/zkEVM/quickstart/) is required.

When you are ready to deploy a smart contract to production, you can use the information contained within this section to configure an RPC endpoint.

Expand All @@ -15,4 +14,3 @@ import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';

<DocCardList items={useCurrentSidebarCategory().items}/>

Binary file removed docs/build/img/build.png
Binary file not shown.
Binary file removed docs/build/img/buildZkEvm.png
Binary file not shown.
Binary file removed docs/build/img/builderguides.png
Binary file not shown.
Binary file removed docs/build/img/environment.png
Binary file not shown.
Binary file removed docs/build/img/evm.png
Binary file not shown.
Binary file removed docs/build/img/gradient1.jpg
Binary file not shown.
Binary file removed docs/build/img/gradient2.jpg
Binary file not shown.
Binary file removed docs/build/img/gradient3.jpg
Binary file not shown.
Binary file removed docs/build/img/gradient4.jpg
Binary file not shown.
Binary file removed docs/build/img/gradient5.jpg
Binary file not shown.
Binary file removed docs/build/img/gradient6.jpg
Binary file not shown.
Binary file removed docs/build/img/gradient7.jpg
Binary file not shown.
Binary file removed docs/build/img/gradient8.jpg
Binary file not shown.
Binary file removed docs/build/img/gradient9.jpg
Binary file not shown.
Binary file removed docs/build/img/introduction.png
Binary file not shown.
12 changes: 3 additions & 9 deletions docs/build/index.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,13 @@
import build from '/docs/build/img/build.png'

# Build on Astar

<div style={{textAlign: 'center'}}>
<img src={build} caption="Documentation of all the resources builders need in order to start testing, deploying and interacting with smart contracts on the Astar network" style={{width: 1200}} />
</div>

## Why build on Astar?

Astar is a interoperable smart contract platform providing native access to both the Polkadot and Ethereum blockchain ecosystems and supporting both Wasm and EVM environments on its Layer 2 scaling and Parachain-based networks.
Astar is a interoperable smart contract platform providing native access to both the Polkadot and Ethereum blockchain ecosystems and supporting both Wasm and EVM environments on its Layer 2 scaling and Parachain-based networks.

## Astar Network Key Features:

✅ Stable & scalable blockchain APIs <br/>
✅ Flexibility to deploy dApps on the platform and ecosystem that best suits their needs, while retaining interoperability with others. <br/>
✅ Flexibility to deploy dApps on the platform and ecosystem that best suits their needs, while retaining interoperability with others. <br/>
✅ Familiar Tools and Libraries (Remix, Hardhat, Open Zeppelin) <br/>
✅ Social & biometric login and recovery (Google, x.com, LINE, Kakao, [Banana](/docs/build/integrations/account-abstraction/banana/)) <br/>
✅ Gasless payments ([Gelato](/docs/build/zkEVM/integrations/account-abstraction/relayers/gelato-relay), [Safe](/docs/build/zkEVM/integrations/account-abstraction/safe--aa/))<br/>
Expand All @@ -29,7 +23,7 @@ Astar network's innovative Build2Earn program allows developers to earn a basic
See the [Wasm chapter](/docs/build/wasm) for more information.

## EVM smart contracts
Solidity developers feel right at home building on Astar in both the Polkadot and Ethereum ecosystems. See the [EVM](/docs/build/evm) or [zkEVM](/docs/build/zkEVM) sections for more information.
Solidity developers feel right at home building on Astar in both the Polkadot and Ethereum ecosystems. See the [EVM](/docs/build/EVM) or [zkEVM](/docs/build/zkEVM) sections for more information.

## Secured by Polkadot and Ethereum
Polkadot and Ethereum networks provide some of the best security guarantees in the web3 industry.
Expand Down
4 changes: 4 additions & 0 deletions docs/build/introduction/_category_.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"label": "Introduction",
"position": 1
}
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
# Introduction
![General understanding of programming basics](/docs/build/img/introduction.png)

To make use of this documentation effectively, you should possess a general understanding of programming basics. The programming languages used throughout are mainly Rust and JavaScript, for which previous knowledge is not necessary, but would be highly beneficial. You should also know how to use MetaMask, manage accounts and balances, and interact with the Ethereum Virtual Machine.
To make use of this documentation effectively, you should possess a general understanding of programming basics. The programming languages used throughout are mainly Rust and JavaScript, for which previous knowledge is not necessary, but would be highly beneficial. You should also know how to use MetaMask, manage accounts and balances, and interact with the Ethereum Virtual Machine.

In conjunction with improving your understanding of the material contained within these guides, we recommend that you review supplemental material covering these languages, in order to improve your overall understanding of the topics and the practical code examples provided.
In conjunction with improving your understanding of the material contained within these guides, we recommend that you review supplemental material covering these languages, in order to improve your overall understanding of the topics and the practical code examples provided.

### Do I need blockchain knowledge to follow this documentation?
Your blockchain knowledge will be useful but if you are reading this that means you are on the right track.
Expand All @@ -12,4 +11,4 @@ Your blockchain knowledge will be useful but if you are reading this that means
If you are already a builder on Polkadot/Kusama ecosystem you can most likely skip the Introduction chapter. It is recommended, however, that you read about our available Networks.

### Do I need to be a developer to understand Introduction chapter?
To use this introduction chapter you do not need any programming skills, and it will be useful later when you step into more advanced topics.
To use this introduction chapter you do not need any programming skills, and it will be useful later when you step into more advanced topics.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Astar is a blockchain connected to Polkadot Relay chain, specialized for:
* Executing all types of smart contracts.
* Providing a hybrid EVM + Wasm environment with interoperability.
* Incentivizing ecosystem innovation and providing basic income for dApp developers.
* Seamlessly aggregating features or assets from parachains in the ecosystem.
* Seamlessly aggregating features or assets from parachains in the ecosystem.

## Blockchain Basics
A blockchain is a decentralized ledger that records information in a sequence of blocks. The information contained in a block is an ordered set of instructions that may or may not result in a change in state.
Expand All @@ -30,11 +30,11 @@ Ok, you can’t learn it all in one minute. But how about in 5 minutes? Have a l
<iframe width="100%" height="500" src="https://www.youtube.com/embed/BQ60bTU1bPg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

## How the Relay Chain Works
The Polkadot network uses a sharded model where shards - called "parachains", allow transactions to be processed in parallel instead of sequentially. Each parachain in the network has a unique state transition function. Polkadot is a Relay Chain acting as the main chain of the system.
The Polkadot network uses a sharded model where shards - called "parachains", allow transactions to be processed in parallel instead of sequentially. Each parachain in the network has a unique state transition function. Polkadot is a Relay Chain acting as the main chain of the system.

Parachains construct and propose blocks to validators on the Relay Chain, where the blocks undergo rigorous availability and validity checks before being added to the finalized chain. As the Relay Chain provides the security guarantees, collators - full nodes of these parachains - don't have any security responsibilities, and thus do not require a robust incentive system. This is how the entire network stays up to date with the many transactions that take place.

## Substrate
## Substrate
Based on Polkadot's design, as long as a chain's logic can compile to Wasm and adheres to the Relay Chain API, then it can connect to the Polkadot network as a parachain.
However, the majority of parachains today are built using [Substrate](https://substrate.io/) because Substrate-based chains are easy to integrate into Polkadot or Kusama to become a parachain. Essentially, Substrate is the SDK which can be used to build parachains and Polkadot is the means of securing the chains and allowing them to communicate with each other.

Expand All @@ -56,10 +56,7 @@ A **smart contract** is a program that runs on a blockchain and executes transac
The Polkadot runtime does not support smart contracts. Smart contracts require a Virtual Machine (VM) environment where contracts can be executed, and the most well-known and widely supported platform being the Ethereum Virtual Machine (EVM). Substrate FRAME contains modules that support Wasm smart contract execution, as well as EVM.

### Ethereum Virtual Machine (EVM)
The Ethereum Virtual Machine (EVM) is a virtual computer with components that enable Ethereum network participants to store data and agree on the state of that data. On a Substrate-based blockchain, the core responsibilities of the EVM are implemented in the EVM pallet, that's responsible for executing Ethereum contract bytecode written in a high level language like Solidity. Astar EVM provides a fully Ethereum Virtual Machine compatible platform, which you can learn more about in the [EVM chapter](/docs/build/evm).
The Ethereum Virtual Machine (EVM) is a virtual computer with components that enable Ethereum network participants to store data and agree on the state of that data. On a Substrate-based blockchain, the core responsibilities of the EVM are implemented in the EVM pallet, that's responsible for executing Ethereum contract bytecode written in a high level language like Solidity. Astar EVM provides a fully Ethereum Virtual Machine compatible platform, which you can learn more about in the [EVM chapter](/docs/build/EVM).

### Substrate Virtual Machine for Wasm Contracts
Substrate also ships with a module for smart contracts, called `pallet-contracts`. If a parachain is developed on Substrate it can easily add smart contract functionality by including this pallet. Astar supports this Polkadot Native approach to smart contracts, and you can learn more in the [Wasm chapter](/docs/build/wasm).



Substrate also ships with a module for smart contracts, called `pallet-contracts`. If a parachain is developed on Substrate it can easily add smart contract functionality by including this pallet. Astar supports this Polkadot Native approach to smart contracts, and you can learn more in the [Wasm chapter](/docs/build/wasm).
3 changes: 0 additions & 3 deletions docs/build/wasm/index.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
# Wasm Smart Contracts

![Wasm Smart Contracts](/docs/build/img/wasm.png)

The **Wasm** section covers the Wasm stack on Astar/Shiden, some more advanced topics, and contains a few tutorials to help you build and deploy Wasm smart contracts.

If you would like to start building right away, we encourage you to check out [**Swanky Suite**](./swanky-suite) - The all-in-one tool for Wasm smart contract developers within the Polkadot ecosystem.
Expand All @@ -12,4 +10,3 @@ import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';

<DocCardList items={useCurrentSidebarCategory().items}/>

8 changes: 1 addition & 7 deletions docs/build/zkEVM/index.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
import introduction from "/docs/build/img/buildZkEvm.png"

# Build on Astar zkEVM

<div style={{textAlign: 'center'}}>
<img src={introduction} style={{width: 1200}} />
</div>

## What is Astar zkEVM?

Astar zkEVM is an Ethereum Layer-2 scaling solution leveraging Polygon's Chain Development Kit and cutting edge zero-knowledge cryptography to enable off-chain transaction execution, with finality and security guarantees provided by Ethereum. In coordination with our key partners, Astar zkEVM is well-positioned to take advantage of the extensive developer base and well-established toolset existing in the Ethereum ecosystem, and boasts the following key features:
Expand All @@ -15,7 +9,7 @@ Astar zkEVM is an Ethereum Layer-2 scaling solution leveraging Polygon's Chain D
- **Native Account Abstraction** - The Astar zkEVM provides native features designed to revolutionize the end-user experience, and make it seamless. See the [Account Abstraction section](/docs/build/zkEVM/integrations/account-abstraction/) to learn more about how to refine the end-user experience.
- **Recognized Partners** - Established names and brands that developers trust power the Astar zkEVM. See the [integrations section](/docs/build/zkEVM/integrations/) for more information about 3rd party service providers.
- **Interoperability and Exposure** - With Astar zkEVM, we are supporting interoperability between the Ethereum and Polkadot ecosystems, uniting communities, and empowering web3 accessibility through a common Multichain vision.
- **Established Tools and Libraries** - Compatible with the tools web3 developers already know how to use, such as Remix, Hardhat, and Open Zeppelin.
- **Established Tools and Libraries** - Compatible with the tools web3 developers already know how to use, such as Remix, Hardhat, and Open Zeppelin.

## Section Overview

Expand Down
Loading

0 comments on commit 25be04b

Please sign in to comment.