Skip to content

Commit 70d8284

Browse files
mudgenmudgen
committed
docs
1 parent c722d62 commit 70d8284

File tree

6 files changed

+2121
-202
lines changed

6 files changed

+2121
-202
lines changed

‎website/docs/_introOld.mdx‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
---
2+
sidebar_position: 2
3+
slug: /
4+
title: "Introduction Another"
5+
---
6+
7+
import DocHero from '@site/src/components/docs/DocHero';
8+
import DocCard, { DocCardGrid } from '@site/src/components/docs/DocCard';
9+
import Callout from '@site/src/components/ui/Callout';
10+
import FeatureGrid, { FeatureGridItem } from '@site/src/components/features/FeatureGrid';
11+
12+
13+
<DocHero
14+
title="Build with the Compose Library"
15+
subtitle="Compose is a smart contract library that helps developers create smart contract systems using ERC-2535 Diamonds."
16+
variant="gradient"
17+
height="medium"
18+
/>
19+
20+
## Foundations
21+
22+
<p style={{fontSize: '1.125rem', color: 'var(--ifm-color-emphasis-700)', marginBottom: '2rem'}}>
23+
The building blocks of the Compose platform.
24+
</p>
25+
26+
<DocCardGrid columns={2}>
27+
<DocCard
28+
title="AUTHENTICATION"
29+
description="Access control and permission management for your diamond contracts. Implement role-based access control with composable facets."
30+
icon={<Icon name="lock" size={28} />}
31+
href="/docs/foundations/authentication"
32+
/>
33+
<DocCard
34+
title="FACETS & LIBRARIES"
35+
description="Understanding the core architecture: how facets and libraries work together through shared storage to build powerful systems."
36+
icon={<Icon name="geometric-diamond" size={28} />}
37+
href="/docs/foundations/facets-and-libraries"
38+
/>
39+
<DocCard
40+
title="DIAMOND STANDARD"
41+
description="Learn about ERC-2535 Diamonds and how Compose leverages this standard for upgradeable, modular smart contracts."
42+
icon={<Icon name="diamond" size={28} />}
43+
href="/docs/"
44+
/>
45+
<DocCard
46+
title="STORAGE PATTERNS"
47+
description="Master the shared storage architecture that enables seamless integration between standard facets and your custom logic."
48+
icon={<Icon name="cube-detailed" size={28} />}
49+
href="/docs/"
50+
/>
51+
</DocCardGrid>
52+
53+
<Callout type="warning" title="Early Stage Development">
54+
Compose is currently in development and only available to contributors. It is **NOT production ready**. Use at your own risk in development environments only.
55+
</Callout>
56+
57+
## What is Compose?
58+
59+
**Compose** is a revolutionary smart contract library that helps developers create sophisticated smart contract systems using the **ERC-2535 Diamond** standard. It's designed from the ground up to prioritize code readability, on-chain composability, and developer understanding.
60+
61+
### The Vision
62+
63+
Imagine having access to a comprehensive, verified standard library of smart contract components that you can combine like LEGO blocks to build complex systems—all deployed once on-chain and reused across your projects. That's Compose.
64+
65+
## Key Features
66+
67+
<FeatureGrid columns={3}>
68+
<FeatureGridItem
69+
icon={<Icon name="package" size={32} />}
70+
title="On-Chain Standard Library"
71+
description="Access verified, audited facets deployed once and reused across multiple diamonds on multiple blockchains."
72+
/>
73+
<FeatureGridItem
74+
icon={<Icon name="compose" size={32} />}
75+
title="Composable Architecture"
76+
description="Mix and match facets and libraries to build exactly what you need without inheritance conflicts."
77+
/>
78+
<FeatureGridItem
79+
icon={<Icon name="book" size={32} />}
80+
title="Readability First"
81+
description="Code designed to be understood. Smart Contract Oriented Programming prioritizes clarity over cleverness."
82+
/>
83+
<FeatureGridItem
84+
icon={<Icon name="cycle" size={32} />}
85+
title="Upgradeable by Design"
86+
description="Full power of ERC-2535 Diamonds means your contracts can evolve without redeployment."
87+
/>
88+
<FeatureGridItem
89+
icon={<Icon name="shield" size={32} />}
90+
title="Battle-Tested Patterns"
91+
description="Community-reviewed implementations following proven best practices and security standards."
92+
/>
93+
<FeatureGridItem
94+
icon={<Icon name="lightning" size={32} />}
95+
title="Developer Experience"
96+
description="Intuitive APIs, comprehensive documentation, and helpful libraries make development a breeze."
97+
/>
98+
</FeatureGrid>
99+
100+
## How It Works
101+
102+
Compose uses a **shared storage architecture** where both standard facets and your custom facets access the same data:
103+
104+
```solidity
105+
// Your custom facet integrates with Compose using libraries
106+
import {LibERC721} from "compose/LibERC721.sol";
107+
108+
contract GameNFTFacet {
109+
function mintWithGameLogic(address player, uint256 tokenId) external {
110+
// Your custom game logic
111+
require(playerHasEnoughPoints(player), "Not enough points");
112+
113+
// Use LibERC721 to mint - this modifies the SAME storage
114+
// that ERC721Facet uses for balanceOf(), ownerOf(), etc.
115+
LibERC721.mint(player, tokenId);
116+
117+
// Now the player owns this NFT and can use standard
118+
// ERC721Facet.transferFrom() to transfer it!
119+
updatePlayerStats(player);
120+
}
121+
}
122+
```
123+
124+
<Callout type="tip" title="Key Insight">
125+
Both your `GameNFTFacet` and the standard `ERC721Facet` work with the **same storage** in your diamond. This is the power of Compose's shared storage architecture.
126+
</Callout>
127+
128+
## Why Choose Compose?
129+
130+
### Our value
131+
- **Readability**: Code that's easy to understand and audit
132+
- **Reusability**: Deploy once, use everywhere
133+
- **Standards**: Battle-tested, community-reviewed implementations
134+
- **Upgradability**: Full power of ERC-2535 Diamonds
135+
- **Composability**: Mix and match functionality without conflicts
136+
137+
### Perfect For:
138+
- Building complex DeFi protocols
139+
- Creating NFT platforms with custom logic
140+
- Developing DAO governance systems
141+
- Projects requiring upgradeable smart contracts
142+
- Teams that prioritize code quality and maintainability
143+
144+
## Core Principles
145+
146+
<FeatureGrid columns={2}>
147+
<FeatureGridItem
148+
icon={<Icon name="eye" size={32} />}
149+
title="Read First"
150+
description="Code clarity is the top priority. Every line should be understandable by developers and auditors."
151+
/>
152+
<FeatureGridItem
153+
icon={<Icon name="diamond" size={32} />}
154+
title="Diamond-Native"
155+
description="Designed specifically for ERC-2535. Not adapted from inheritance patterns."
156+
/>
157+
<FeatureGridItem
158+
icon={<Icon name="puzzle" size={32} />}
159+
title="Composition Over Inheritance"
160+
description="Combine facets instead of inheriting. Avoid the complexity of inheritance hierarchies."
161+
/>
162+
<FeatureGridItem
163+
icon={<Icon name="sparkles" size={32} />}
164+
title="Intentional Simplicity"
165+
description="Banned features lead to clearer code. Less magic, more understanding."
166+
/>
167+
</FeatureGrid>
168+
169+
## Next Steps
170+
171+
<DocCardGrid columns={2}>
172+
<DocCard
173+
title="Installation"
174+
description="Set up your development environment and start building with Compose."
175+
icon={<Icon name="rocket" size={28} />}
176+
href="/docs/getting-started/installation"
177+
size="large"
178+
/>
179+
<DocCard
180+
title="Quick Start"
181+
description="Build your first diamond in under 5 minutes with Compose facets."
182+
icon={<Icon name="lightning" size={28} />}
183+
href="/docs/getting-started/quick-start"
184+
size="large"
185+
/>
186+
</DocCardGrid>
187+
188+
## Community & Support
189+
190+
Compose is built with 🩵 by a vibrant community of developers who care about code quality.
191+
192+
<DocCardGrid columns={2}>
193+
<DocCard
194+
title="Discord Community"
195+
description="Get help and connect with other developers"
196+
icon={<Icon name="chat" size={24} />}
197+
href="https://discord.gg/compose"
198+
external={true}
199+
size="small"
200+
/>
201+
<DocCard
202+
title="GitHub Discussions"
203+
description="Share ideas and ask questions"
204+
icon={<Icon name="github" size={24} />}
205+
href="https://github.com/Perfect-Abstractions/Compose/discussions"
206+
external={true}
207+
size="small"
208+
/>
209+
<DocCard
210+
title="GitHub Repository"
211+
description="Check out the source code"
212+
icon={<Icon name="star" size={24} />}
213+
href="https://github.com/Perfect-Abstractions/Compose"
214+
external={true}
215+
size="small"
216+
/>
217+
<DocCard
218+
title="Blog"
219+
description="Stay updated with latest news"
220+
icon={<Icon name="memo" size={24} />}
221+
href="/blog"
222+
size="small"
223+
/>
224+
</DocCardGrid>
225+
226+
---
227+
228+
<div style={{textAlign: 'center', marginTop: '3rem', fontSize: '1.25rem', fontWeight: 600}}>
229+
Ready to revolutionize your smart contract development? Let's get started! 🚀
230+
</div>
231+

0 commit comments

Comments
 (0)