Skip to content

Commit 4b473f4

Browse files
LandauRazLandauRaz
authored
Overview Refactor (#1498)
* init&finish * Update index.adoc
1 parent ba24879 commit 4b473f4

File tree

1 file changed

+12
-228
lines changed

1 file changed

+12
-228
lines changed

‎components/Starknet/modules/ROOT/pages/index.adoc‎

Lines changed: 12 additions & 228 deletions
Original file line numberDiff line numberDiff line change
@@ -1,242 +1,26 @@
11
[id="overview"]
22
= Overview
33

4-
Starknet is a permissionless Validity-Rollup, also known as a zero-knowledge rollup (ZK rollup) for Ethereum. As a Layer 2 (L2) blockchain, Starknet enables any dApp to achieve massive computation scale without compromising on Ethereum’s composability
5-
and security.
4+
Welcome to the Starknet docs! 👋
65

7-
Starknet aims to achieve secure, low-cost transactions and high performance by using the STARK cryptographic proof system. Starknet contracts and the Starknet OS are written in link:https://github.com/starkware-libs/cairo[Cairo], a custom-built and
8-
specialized programming language.
6+
Whether you're a writing Starknet smart contracts and dApps or contributing to the Starknet ecosystem through tooling, products, or research, this documentations aims to help you navigate the world of Starknet.
97

10-
== Explore Starknet
8+
.Where to go next?
119

12-
[pass]
13-
++++
14-
<div class="home-cta-container">
15-
<a href="/quick-start/overview/" class="home-cta home-cta-first" id="cta1">
16-
<div class="image-container">
17-
<img src="_images/developers.svg" style="filter: none; border-radius: 0px;" class="cta-image" id="img_1">
18-
</div>
19-
<h2>Quick start</h2>
20-
<p class="chakra-card__body css-jintet" id="text1">Set up your environment and get started with Starknet.</p>
21-
<p class="chakra-card__body css-jintet" id="text2"><b>Explore ></b></p>
22-
</a>
10+
If you're completely new to Starknet or its programming language, https://www.cairo-lang.org/[Cairo^], we suggest first checking out https://www.starknet.io/what-is-starknet/[_What is Starknet?_^] and coming back whenever you're ready (don't worry, we'll still be here). Otherwise:
2311

24-
<a href="/architecture-and-concepts/accounts/introduction/" class="home-cta" id="cta2">
25-
<div class="image-container">
26-
<img src="_images/how_SN_works.svg" style="filter: none; border-radius: 0px;" class="cta-image" id="img_2">
27-
</div>
28-
<h2>Architecture</h2>
29-
<p class="chakra-card__body css-jintet" id="text3">Learn about Starknet's architecture including contracts and accounts.</p>
30-
<p class="chakra-card__body css-jintet" id="text4"><b>Explore ></b></p>
31-
</a>
12+
🦮 Go to _Guides_ to keep talking to a minimum and learn by doing
3213

33-
<a href="starknet-versions/version-notes/" class="home-cta" id="cta3">
34-
<div class="image-container">
35-
<img src="_images/roadmap.svg" style="filter: none; border-radius: 0px;" class="cta-image" id="img_3">
36-
</div>
37-
<h2>Releases</h2>
38-
<p class="chakra-card__body css-jintet" id="text5">Learn more about the current version of Starknet.</p>
39-
<p class="chakra-card__body css-jintet" id="text6"><b>Explore ></b></p>
40-
</a>
41-
</div>
42-
++++
14+
🏛️ Go to _Architecture_ to dive deep into Starknet's inner workings
4315

44-
== Contribute to the Starknet docs
16+
🛠️ Go to _Tooling_ to familiarize yourself with Starknet's toolchain
4517

46-
Want to contribute to Starknet documentation? Get started here:
18+
🌍 Go to _Ecosystem_ to explore Starknet's third-party landscape
4719

48-
* See the link:https://github.com/starknet-io/starknet-docs/blob/dev/README.adoc#different_ways_to_contribute[different ways to contribute].
49-
* Review these link:https://github.com/starknet-io/starknet-docs/blob/dev/contributing_to_docs/doc_guidelines.adoc[basic writing guidelines] to help you write better and be a more valuable contributor.
50-
* Use the link:https://github.com/starknet-io/starknet-docs/blob/dev/contributing_to_docs/starknet_docs_style_guide.adoc[Starknet documentation supplementary style guide] to help you write with the Starknet voice.
20+
📚 Go to _Resources_ to browse through various other useful materials
5121

52-
[pass]
53-
++++
54-
<html>
55-
<head>
56-
<style>
57-
*::before, ::after {
58-
border-color: var(--chakra-colors-gray-200);
59-
}
22+
Alternatively, you can also use the https://agent.starknet.id/[Starknet Agent^], an AI-powered search engine that uses advanced machine learning algorithms to search and understand the Starknet docs (and https://book.cairo-lang.org/[Cairo book^]) and provide clear and accurate answers to any queries.
6023

61-
:where(*, *::before, *::after) {
62-
border-width: 0;
63-
border-style: solid;
64-
box-sizing: border-box;
65-
word-wrap: break-word;
66-
}
24+
Last but not least, the Starknet docs takes pride in being a collaborative and open-source effort, and any contributions are more than welcome. If you're interested, check out https://github.com/starknet-io/starknet-docs/blob/dev/README.adoc#contributing-to-starknet-documentation[the different ways you can contribute^].
6725

68-
@media (max-width: 768px) {
69-
.home-cta-container {
70-
flex-direction: column; /* Switch back to a column layout for mobile */
71-
}
72-
73-
.home-cta-container .home-cta {
74-
margin: 8px 8px 0 8px; /* Reset margin for mobile */
75-
width: 100%; /* Make each box take up the full width of the screen */
76-
}
77-
}
78-
79-
.home-cta-container {
80-
display: flex;
81-
}
82-
83-
.cta-image-container {
84-
background-image: url('_images/developers.svg');
85-
background-size: cover;
86-
background-repeat: no-repeat;
87-
background-position: center center;
88-
width: 100%;
89-
height: 100%;
90-
}
91-
92-
.image-container {
93-
display: flex;
94-
flex-direction: column;
95-
justify-content: center; s
96-
align-items: center;
97-
height: 8em;
98-
margin-bottom: 10px;
99-
margin: 8px;
100-
border-radius: 20px 20px 0 0;
101-
position: relative;
102-
background-image: linear-gradient(180.15deg, var(--chakra-colors-chakra-body-text) 0.2%, var(--chakra-colors-chakra-body-bg) 105.43%);
103-
overflow: hidden;
104-
}
105-
106-
.image-container img {
107-
z-index: -1;
108-
}
109-
110-
.cta-image {
111-
max-width: 464px;
112-
max-height: 100%;
113-
}
114-
115-
.home-cta {
116-
flex: 1;
117-
margin: 8px 8px 0 8px;
118-
padding: 20px;
119-
background-color: var(--chakra-colors-chakra-body-bg);
120-
border: 1px solid rgb(226, 232, 240);
121-
border-bottom: 1px solid rgb(226, 232, 240);
122-
border-radius: 20px;
123-
color: var(--chakra-colors-card-link-fg);
124-
font-size: 18px;
125-
font-weight: var(--chakra-fontWeights-medium);
126-
text-decoration: none;
127-
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
128-
box-sizing: border-box;
129-
position: relative;
130-
background-image: linear-gradient(180.15deg, var(--chakra-colors-gradient-blue-default-a) 0.2%, var(--chakra-colors-gradient-blue-default-b) 105.43%);
131-
overflow: hidden;
132-
transition-property: var(--chakra-transition-property-common);
133-
transition-duration: var(--chakra-transition-duration-fast);
134-
transition-timing-function: var(--chakra-transition-easing-ease-out);
135-
cursor: pointer;
136-
-webkit-text-decoration: none;
137-
138-
outline: 2px solid transparent;
139-
outline-offset: 2px;
140-
}
141-
142-
.home-cta-first {
143-
margin-left: 0;
144-
}
145-
146-
.chakra-card__body.css-jintet {
147-
font-size: 15px;
148-
color: #363636;
149-
}
150-
151-
.column-container {
152-
display: flex;
153-
}
154-
155-
.column {
156-
flex: 1;
157-
padding: 10px;
158-
margin: 5px;
159-
border-radius: 5px;
160-
}
161-
162-
.home-cta-container .home-cta:hover {
163-
text-decoration: none;
164-
color: #363636;
165-
border-color: #C506E4;
166-
}
167-
168-
.home-cta a {
169-
text-decoration: none;
170-
color: #363636;
171-
}
172-
</style>
173-
174-
<script>
175-
176-
document.addEventListener('DOMContentLoaded', function() {
177-
const themeSwitch = document.querySelector('[data-theme="dark"]');
178-
if (!themeSwitch) {
179-
console.error('Theme switch element not found');
180-
return;
181-
}
182-
183-
const image1 = document.getElementById('img_1');
184-
const image2 = document.getElementById('img_2');
185-
const image3 = document.getElementById('img_3');
186-
187-
const text1 = document.getElementById('text1');
188-
const text2 = document.getElementById('text2');
189-
const text3 = document.getElementById('text3');
190-
const text4 = document.getElementById('text4');
191-
const text5 = document.getElementById('text5');
192-
const text6 = document.getElementById('text6');
193-
194-
let initialThemeSet = false; // To track if the initial theme has been set
195-
196-
themeSwitch.addEventListener('click', () => {
197-
const currentTheme = themeSwitch.getAttribute('data-theme');
198-
// Toggle the theme
199-
themeSwitch.setAttribute('data-theme', currentTheme === 'dark' ? 'light' : 'dark');
200-
// Toggle the theme
201-
toggleTheme(currentTheme);
202-
});
203-
204-
function toggleTheme(currentTheme) {
205-
// Handle theme switching and image/text updates
206-
if (currentTheme === 'dark' || !initialThemeSet) {
207-
image1.src = '_images/developers_dark.svg';
208-
image2.src = '_images/how_SN_works_dark.svg';
209-
image3.src = '_images/roadmap_dark.svg';
210-
text1.style.color = 'white';
211-
text2.style.color = 'white';
212-
text3.style.color = 'white';
213-
text4.style.color = 'white';
214-
text5.style.color = 'white';
215-
text6.style.color = 'white';
216-
} else {
217-
image1.src = '_images/developers.svg';
218-
image2.src = '_images/how_SN_works.svg';
219-
image3.src = '_images/roadmap.svg';
220-
text1.style.color = '';
221-
text2.style.color = '';
222-
text3.style.color = '';
223-
text4.style.color = '';
224-
text5.style.color = '';
225-
text6.style.color = '';
226-
}
227-
228-
if (!initialThemeSet) {
229-
initialThemeSet = true;
230-
}
231-
}
232-
233-
// Set the initial state based on the themeSwitch value
234-
toggleTheme(themeSwitch.getAttribute('data-theme'));
235-
});
236-
237-
238-
</script>
239-
</head>
240-
</html>
241-
242-
++++
26+
We wish you good luck on whatever path you choose, and hope you enjoy embracing the STARK-pilled life! ✨

0 commit comments

Comments
 (0)