Skip to content

Commit ea7cf96

Browse files
SaeeDawodsaeeddawod
SaeeDawod
and
saeeddawod
authored
Fix/documentation images (#143)
## Summary by Sourcery Update image paths in documentation and remove unused components. Enhancements: - Improved the layout of the "Supported Blockchains" page. Documentation: - Updated image paths in the documentation files to use relative paths. - Removed unused components from the documentation files. --------- Co-authored-by: saeeddawod <saeed.dawod@gmail.com>
1 parent b1e25f0 commit ea7cf96

File tree

5 files changed

+159
-136
lines changed

5 files changed

+159
-136
lines changed

‎blog/2024-03-26.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,6 @@ Token vaults are useful in the enterprise context when working with multiple tok
4242

4343
We just looked at 3 ways that developers can get more out of working with the ERC20 token standard. These extensions allow more control and visibility of assets that enterprise use cases may require. To get started deploying your own ERC20 smart contract on SettleMint, check out this guide on [Connecting a frontend to a token transfer application](/documentation/docs/developer-guides/connect-frontend/).
4444

45-
Have more questions about the ERC20 tokens and extensions, hop into our [Discord community](https://discord.gg/4WPatxDJ6A)!
45+
Have more questions about the ERC20 tokens and extensions, please contact us at support@settlemint.com!
4646

4747
---

‎docs/about-settlemint/1_supported-blockchains.mdx‎

Lines changed: 134 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -4,125 +4,169 @@ When launching a blockchain development project, the selection of a blockchain p
44

55
SettleMint currently supports the following protocols:
66

7-
import ContentCard from '@site/src/components/ContentCard';
8-
import styles from '@site/src/components/ContentCard.module.css';
9-
import Ethereum from '@site/static/img/about-settlemint/blockchain-logos/eth-logo.png';
10-
import Besu from '@site/static/img/about-settlemint/blockchain-logos/besu-logo.png';
11-
import Fabric from '@site/static/img/about-settlemint/blockchain-logos/fabric-logo.png';
12-
import Quorum from '@site/static/img/about-settlemint/blockchain-logos/Quorum-logo.png';
13-
import Avalanche from '@site/static/img/about-settlemint/blockchain-logos/avalanche-logo.png';
14-
import Polygon from '@site/static/img/about-settlemint/blockchain-logos/polygon-logo.webp';
15-
import zkevm from '@site/static/img/about-settlemint/blockchain-logos/zkevm-logo.png';
16-
import Arbitrum from '@site/static/img/about-settlemint/blockchain-logos/arbitrum-logo.png';
17-
import Optimism from '@site/static/img/about-settlemint/blockchain-logos/optimism-logo.png';
18-
import Hedera from '@site/static/img/about-settlemint/blockchain-logos/hedera-logo.png';
7+
<style>
8+
{`
9+
.blockchain-card {
10+
padding: 24px;
11+
border: 1px solid #2e2e2e;
12+
border-radius: 8px;
13+
margin-bottom: 20px;
14+
display: flex;
15+
flex-direction: column;
16+
align-items: center;
17+
text-align: center;
18+
19+
text-decoration: none;
20+
}
21+
22+
.blockchain-card:hover {
23+
border-color: #3578e5;
24+
text-decoration: none;
25+
}
26+
27+
.blockchain-logo-wrapper {
28+
width: 64px;
29+
height: 64px;
30+
display: flex;
31+
align-items: center;
32+
justify-content: center;
33+
margin-bottom: 16px;
34+
}
35+
36+
.blockchain-logo {
37+
width: 100%;
38+
height: 100%;
39+
object-fit: contain;
40+
}
41+
42+
.blockchain-title {
43+
color: #3578e5;
44+
font-size: 1.2rem;
45+
margin-bottom: 8px;
46+
font-weight: 500;
47+
}
48+
49+
.blockchain-description {
50+
font-size: 0.9rem;
51+
color: #999;
52+
margin: 0;
53+
line-height: 1.5;
54+
}
55+
`}
56+
</style>
1957

2058
## Permissioned Blockchains
2159

2260
<div className="row">
2361
<div className="col">
24-
<ContentCard
25-
image={Besu}
26-
title="Hyperledger Besu"
27-
description="Ethereum client designed to be enterprise-friendly"
28-
page="/documentation/docs/blockchain-guides/Hyperledger-Besu/enterprise-ethereum-the-basics/"
29-
/>
62+
<a href="/documentation/docs/blockchain-guides/Hyperledger-Besu/enterprise-ethereum-the-basics/" className="blockchain-card">
63+
<div className="blockchain-logo-wrapper">
64+
<img src="/documentation/img/about-settlemint/blockchain-logos/besu-logo.png" className="blockchain-logo" alt="Hyperledger Besu" />
65+
</div>
66+
<div className="blockchain-title">Hyperledger Besu</div>
67+
<div className="blockchain-description">Ethereum client designed to be enterprise-friendly</div>
68+
</a>
3069
</div>
3170

3271
<div className="col">
33-
<ContentCard
34-
image={Fabric}
35-
title="Hyperledger Fabric"
36-
description="An enterprise-grade permissioned distributed ledger"
37-
page="/documentation/docs/blockchain-guides/Hyperledger-Fabric/hyperledger-fabric-the-basics/"
38-
/>
72+
<a href="/documentation/docs/blockchain-guides/Hyperledger-Fabric/hyperledger-fabric-the-basics/" className="blockchain-card">
73+
<div className="blockchain-logo-wrapper">
74+
<img src="/documentation/img/about-settlemint/blockchain-logos/fabric-logo.png" className="blockchain-logo" alt="Hyperledger Fabric" />
75+
</div>
76+
<div className="blockchain-title">Hyperledger Fabric</div>
77+
<div className="blockchain-description">An enterprise-grade permissioned distributed ledger</div>
78+
</a>
3979
</div>
4080
</div>
4181

4282
<div className="row">
4383
<div className="col">
44-
<ContentCard
45-
image={Quorum}
46-
title="Quorum"
47-
description="An implementation of Ethereum supporting data privacy"
48-
page=""
49-
/>
84+
<a href="/documentation/docs/blockchain-guides/quorum/quorum-the-basics/" className="blockchain-card">
85+
<div className="blockchain-logo-wrapper">
86+
<img src="/documentation/img/about-settlemint/blockchain-logos/Quorum-logo.png" className="blockchain-logo" alt="Quorum" />
87+
</div>
88+
<div className="blockchain-title">Quorum</div>
89+
<div className="blockchain-description">An implementation of Ethereum supporting data privacy</div>
90+
</a>
5091
</div>
5192
</div>
5293

5394
## Public Blockchains
5495

5596
<div className="row">
97+
<div className="col">
98+
<a href="/documentation/docs/blockchain-guides/ethereum/ethereum-the-basics/" className="blockchain-card">
99+
<div className="blockchain-logo-wrapper">
100+
<img src="/documentation/img/about-settlemint/blockchain-logos/eth-logo.png" className="blockchain-logo" alt="Ethereum" />
101+
</div>
102+
<div className="blockchain-title">Ethereum</div>
103+
<div className="blockchain-description">Goerli, Mainnet, Sepolia Testnet & Holesky Testnet. Full nodes</div>
104+
</a>
105+
</div>
56106

57-
<div className="col">
58-
<ContentCard
59-
image={Ethereum}
60-
title="Etheruem"
61-
description="Geth. Mainnet, Sepolia Testnet & Holesky Testnet. Full nodes"
62-
page="/documentation/docs/blockchain-guides/Ethereum/ethereum-the-basics/"
63-
/>
64-
</div>
65-
66-
<div className="col">
67-
<ContentCard
68-
image={Avalanche}
69-
title="Avalanche"
70-
description="Mainnet & Fuji testnet. Full nodes"
71-
page="/documentation/docs/blockchain-guides/Avalanche/avalanche-the-basics/"
72-
/>
73-
</div>
107+
<div className="col">
108+
<a href="/documentation/docs/blockchain-guides/avalanche/avalanche-the-basics/" className="blockchain-card">
109+
<div className="blockchain-logo-wrapper">
110+
<img src="/documentation/img/about-settlemint/blockchain-logos/avalanche-logo.png" className="blockchain-logo" alt="Avalanche" />
111+
</div>
112+
<div className="blockchain-title">Avalanche</div>
113+
<div className="blockchain-description">Mainnet & Fuji testnet. Full nodes</div>
114+
</a>
115+
</div>
74116
</div>
75117

76118
<div className="row">
77-
78-
<div className="col">
79-
<ContentCard
80-
image={Polygon}
81-
title="Polygon"
82-
description="Mainnet & Mumbai Testnet. Full node"
83-
page="/documentation/docs/blockchain-guides/Polygon/polygon-the-basics/"
84-
/>
85-
</div>
119+
<div className="col">
120+
<a href="/documentation/docs/blockchain-guides/polygon/polygon-the-basics/" className="blockchain-card">
121+
<div className="blockchain-logo-wrapper">
122+
<img src="/documentation/img/about-settlemint/blockchain-logos/polygon-logo.webp" className="blockchain-logo" alt="Polygon" />
123+
</div>
124+
<div className="blockchain-title">Polygon</div>
125+
<div className="blockchain-description">Mainnet & Mumbai Testnet. Full node</div>
126+
</a>
127+
</div>
86128
</div>
87129

88130
<div className="row">
131+
<div className="col">
132+
<a href="/documentation/docs/blockchain-guides/polygon-zkevm/polygon-zkevm-the-basics/" className="blockchain-card">
133+
<div className="blockchain-logo-wrapper">
134+
<img src="/documentation/img/about-settlemint/blockchain-logos/zkevm-logo.png" className="blockchain-logo" alt="Polygon zkEVM" />
135+
</div>
136+
<div className="blockchain-title">Polygon zkEVM</div>
137+
<div className="blockchain-description">Mainnet & Testnet. Full nodes</div>
138+
</a>
139+
</div>
89140

90-
<div className="col">
91-
<ContentCard
92-
image={zkevm}
93-
title="Polygon zkEVM"
94-
description="Mainnet & Testnet. Full nodes"
95-
page="/documentation/docs/blockchain-guides/Polygon-zkEVM/polygon-zkevm-the-basics/"
96-
/>
97-
</div>
98-
99-
<div className="col">
100-
<ContentCard
101-
image={Arbitrum}
102-
title="Arbitrum"
103-
description="Mainnet & Testnet. Full nodes"
104-
page="/documentation/docs/blockchain-guides/Arbitrum/arbitrum-the-basics/"
105-
/>
106-
</div>
141+
<div className="col">
142+
<a href="/documentation/docs/blockchain-guides/Arbitrum/arbitrum-the-basics/" className="blockchain-card">
143+
<div className="blockchain-logo-wrapper">
144+
<img src="/documentation/img/about-settlemint/blockchain-logos/arbitrum-logo.png" className="blockchain-logo" alt="Arbitrum" />
145+
</div>
146+
<div className="blockchain-title">Arbitrum</div>
147+
<div className="blockchain-description">Mainnet & Testnet. Full nodes</div>
148+
</a>
149+
</div>
107150
</div>
108151

109152
<div className="row">
153+
<div className="col">
154+
<a href="/documentation/docs/blockchain-guides/Optimism/optimism-the-basics/" className="blockchain-card">
155+
<div className="blockchain-logo-wrapper">
156+
<img src="/documentation/img/about-settlemint/blockchain-logos/optimism-logo.png" className="blockchain-logo" alt="Optimism" />
157+
</div>
158+
<div className="blockchain-title">Optimism</div>
159+
<div className="blockchain-description">OP Mainnet & OP Goerli. Full nodes</div>
160+
</a>
161+
</div>
110162

111-
<div className="col">
112-
<ContentCard
113-
image={Optimism}
114-
title="Optimism"
115-
description="OP Mainnet & OP Goerli. Full nodes"
116-
page="/documentation/docs/blockchain-guides/Optimism/optimism-the-basics/"
117-
/>
118-
</div>
119-
120-
<div className="col">
121-
<ContentCard
122-
image={Hedera}
123-
title="Hedera"
124-
description="Hedera Mainnet & Testnet. Full nodes"
125-
page="/documentation/docs/blockchain-guides/Hedera/hedera-the-basics/"
126-
/>
127-
</div>
163+
<div className="col">
164+
<a href="/documentation/docs/blockchain-guides/Hedera/hedera-the-basics/" className="blockchain-card">
165+
<div className="blockchain-logo-wrapper">
166+
<img src="/documentation/img/about-settlemint/blockchain-logos/hedera-logo.png" className="blockchain-logo" alt="Hedera" />
167+
</div>
168+
<div className="blockchain-title">Hedera</div>
169+
<div className="blockchain-description">Hedera Mainnet & Testnet. Full nodes</div>
170+
</a>
171+
</div>
128172
</div>

‎docs/about-settlemint/4_components.mdx‎

Lines changed: 14 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -5,67 +5,48 @@ description: Overview of the SettleMint components and tools available to build
55
sidebar_position: 1
66
---
77

8-
import blockchainApplication from '@site/static/img/about-settlemint/blockchain-application.png';
9-
import blockchainNetwork from '@site/static/img/about-settlemint/network-node.png';
10-
import smartContract from '@site/static/img/about-settlemint/smart-contract.png';
11-
import middleware from '@site/static/img/about-settlemint/middleware.png';
12-
import storage from '@site/static/img/about-settlemint/storage.png';
13-
import integration from '@site/static/img/about-settlemint/integration.png';
8+
# SettleMint Components
149

15-
This guide will explain each of the tools and services on SettleMint and how they connected to
16-
build a blockchain application.
10+
This guide will explain each of the tools and services on SettleMint and how they connect to build a blockchain application.
1711

1812
## The Blockchain Application
1913

2014
<img
21-
src={blockchainApplication}
15+
src="/documentation/img/about-settlemint/blockchain-application.png"
2216
alt="Blockchain Application"
2317
width="70%"
2418
height="70%"
2519
style={{ display: 'block', margin: '0 auto' }}
2620
/>
27-
The first step to building anything on SettleMint is to [create an
28-
application](../../using-platform/create-an-application). You can think of an
29-
application as the collection of resources that you need to build your
30-
blockchain application. This includes a blockchain network, smart contracts,
31-
middleware, storage, integrations, and insights.{' '}
21+
22+
The first step to building anything on SettleMint is to [create an application](../../using-platform/create-an-application). You can think of an application as the collection of resources that you need to build your blockchain application. This includes a blockchain network, smart contracts, middleware, storage, integrations, and insights.
3223

3324
## Add a Blockchain Network and Node
3425

3526
<img
36-
src={blockchainNetwork}
27+
src="/documentation/img/about-settlemint/network-node.png"
3728
alt="Blockchain Network and Node"
3829
width="70%"
3930
height="70%"
4031
style={{ display: 'block', margin: '0 auto' }}
4132
/>
42-
After creating a blockchain application, you now need to [add a blockchain
43-
network](../../using-platform/add-a-network-to-an-application) and node to your
44-
application. SettleMint offeres a variety of different [blockchain
45-
networks](../supported-blockchains) to choose from whatever your usecase may be.
46-
Networks need nodes to support the blockchain to run, once a [network is
47-
created](../../using-platform/add-a-node-to-a-network/) then a node is also
48-
added automatically.{' '}
33+
34+
After creating a blockchain application, you now need to [add a blockchain network](../../using-platform/add-a-network-to-an-application) and node to your application. SettleMint offers a variety of different [blockchain networks](../supported-blockchains) to choose from whatever your usecase may be.
4935

5036
## Create a Smart Contract
5137

5238
<img
53-
src={smartContract}
54-
alt="Add a Smart Contract"
39+
src="/documentation/img/about-settlemint/smart-contract.png"
40+
alt="Smart Contract"
5541
width="70%"
5642
height="70%"
5743
style={{ display: 'block', margin: '0 auto' }}
5844
/>
59-
Smart Contracts allow us to run code on the blockchain. Developing a smart
60-
contract by [adding a smart contract
61-
set](../../using-platform/dev-tools/code-studio/smart-contract-sets), is an
62-
important step to reaching the business and product goals of your blockchain
63-
application.
6445

6546
## Add a Middleware
6647

6748
<img
68-
src={middleware}
49+
src="/documentation/img/about-settlemint/middleware.png"
6950
alt="Middleware"
7051
width="70%"
7152
height="70%"
@@ -75,12 +56,12 @@ Blockchain applications produce data that lives on the blockchain, but we need
7556
to be able to access that data in order to use it. Creating a
7657
[middleware](../../using-platform/middleware/) allows us to do so. SettleMint
7758
currently offers three middleware services: The Graph, Smart Contract Portal
78-
Middleware and Firefly Fabconnect.{' '}
59+
Middleware and Firefly Fabconnect.
7960

8061
## Add Storage
8162

8263
<img
83-
src={storage}
64+
src="/documentation/img/about-settlemint/storage.png"
8465
alt="Storage"
8566
width="70%"
8667
height="70%"
@@ -95,7 +76,7 @@ options](../../using-platform/storage/): IPFS (decentralized) and MinIO
9576
## Add an Integration
9677

9778
<img
98-
src={storage}
79+
src="/documentation/img/about-settlemint/integration.png"
9980
alt="Integration"
10081
width="70%"
10182
height="70%"

‎docs/developer-guides/guide-library.mdx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,13 @@ sidebar_position: 1
55
---
66

77
import { ArticleCard } from '@site/src/components/BlogArticleComponent';
8-
import frontendIcon from '@site/static/img/guides/connect-frontend.png';
9-
import assetTokenization from '@site/static/img/guides/asset-tokenization.png';
108

119
## Application Development
1210

1311
These guides will help you in your blockchain application development process.
1412

1513
<ArticleCard
16-
icon={frontendIcon}
14+
icon="/documentation/img/guides/connect-frontend.png"
1715
title="Connecting A Frontend - NextJS"
1816
description="This connects a frontend to your blockchain application using NextJS, wagmi and web3auth."
1917
githubLink="https://github.com/settlemint/settlemint-nextjs-wagmi"
@@ -25,7 +23,7 @@ These guides will help you in your blockchain application development process.
2523
These guides will show you how to build blockchain applications for popular use-cases.
2624

2725
<ArticleCard
28-
icon={assetTokenization}
26+
icon="/documentation/img/guides/asset-tokenization.png"
2927
title="Asset Tokenization"
3028
description="This guide explains how to build an asset tokenization application using SettleMint"
3129
articleLink="../asset-tokenization/"

0 commit comments

Comments
 (0)