Skip to content

Commit e54cc91

Browse files
FileEXFileEX
committed
Mainpage rework
1 parent a7bd1f7 commit e54cc91

2 files changed

Lines changed: 103 additions & 146 deletions

File tree

‎assets/images/osi_symbol.png‎

7.42 KB
Loading

‎web/src/pages/index.astro‎

Lines changed: 103 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,15 @@
22
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
33
import { Image } from 'astro:assets';
44
import { getAssetImagePath } from '@src/utils/general';
5-
65
import { MTA_CURRENT_VERSION } from '@src/content.constants';
7-
import { Icon } from '@astrojs/starlight/components';
6+
import { Card, CardGrid, LinkButton } from '@astrojs/starlight/components';
7+
import IconLinkCard from '@src/components/IconLinkCard.astro';
8+
9+
10+
// <li><a href={"/Changes_in_"+MTA_CURRENT_VERSION.full}>Changes in {MTA_CURRENT_VERSION.full}</a></li>
11+
12+
13+
814
---
915

1016
<StarlightPage frontmatter={{
@@ -18,162 +24,113 @@ import { Icon } from '@astrojs/starlight/components';
1824
}
1925
],
2026
}}>
21-
<div class="mtahero">
22-
<div class="mtahero_left">
23-
<Image src={getAssetImagePath("mta_logo.png")} alt="Multi Theft Auto Logo"/>
24-
</div>
25-
26-
<div class="mtahero_right">
27-
<p>Welcome to the <strong>new Multi Theft Auto Wiki</strong> (work in progress). Visit this wiki's <a href="https://github.com/multitheftauto/wiki.multitheftauto.com" target="_blank">GitHub repository</a> for more information about the project and how to contribute. The old wiki is still active at <a href="https://wiki.multitheftauto.com/wiki/Main_Page">wiki.multitheftauto.com</a> (where unofficial articles and pages are still available).</p>
28-
29-
<p>There are many <a href="/Contributing">things you can do</a> to help us improve MTA - create a map, a gamemode, help document scripting functions, write example code, write tutorials or just play MTA and report the bugs you find.</p>
3027

31-
<p>If you have any questions or problems related to scripting, feel free to get in touch with us on <a href="https://discord.com/invite/mtasa" target="_blank">Discord</a>.</p>
32-
33-
<p class="bigtext">[ Stop playing with yourself ]</p>
34-
</div>
35-
</div>
28+
<div class="mainpage">
29+
<div class="header">
30+
<Image src={getAssetImagePath("mta_logo.png")} alt="Multi Theft Auto Logo"/>
3631

37-
<div class="mtagrid">
38-
<div class="mtabox">
39-
<h3>Play</h3>
40-
<div>
41-
<a class="downloadmta mtagreen" href="https://multitheftauto.com/"><Icon size="1.8rem" name="download" class="mtadownload-icon mtagreen" />Download <strong>Multi Theft Auto: San Andreas</strong> ({MTA_CURRENT_VERSION.full})</a>
32+
<div class="header-text">
33+
<h1>Welcome to the Multi Theft Auto Documentation</h1>
34+
<span>On this wiki you'll find a wealth of information on using <i>Multi Theft Auto</i>.</span>
35+
36+
<div class="header-buttons">
37+
<LinkButton href="https://multitheftauto.com/" icon="download" iconPlacement='start'>Download MTA SA {MTA_CURRENT_VERSION.full}</LinkButton>
38+
<LinkButton href="https://github.com/multitheftauto/mtasa-blue" icon="github" iconPlacement='start' variant='secondary'>View on GitHub</LinkButton>
39+
</div>
4240
</div>
43-
<ul>
44-
<li><a href="/Where_to_buy_GTASA">Where to buy GTASA</a></li>
45-
<li><a href="/Client_Manual">Client Manual</a></li>
46-
<li><a href={"/Changes_in_"+MTA_CURRENT_VERSION.full}>Changes in {MTA_CURRENT_VERSION.full}</a></li>
47-
<li><a href="/Known_Issues_-_FAQ">Known Issues</a></li>
48-
<li><a href="/Server_Manual">Server Manual</a></li>
49-
<li><a href="/Map_manager">Map Manager</a></li>
50-
</ul>
51-
52-
<h3>Map Editor</h3>
53-
<ul>
54-
<li><a href="/Resource:Editor">Manual</a></li>
55-
<li><a href="/Resource:Editor/EDF">Editor Definition Format</a></li>
56-
<li><a href="/Resource:Editor/Plugins">Plugins</a></li>
57-
<li><a href="/Resource:Editor#FAQ">Frequently Asked Questions</a></li>
58-
</ul>
59-
</div>
60-
61-
<div class="mtabox">
62-
<h3>Community</h3>
63-
<ul>
64-
<li><a href="/Category:Resource">Resource Catalogue</a></li>
65-
<li><a href="https://forum.multitheftauto.com/">Forum</a></li>
66-
<li><a href="https://discord.com/invite/mtasa">Official MTA Discord server</a> (<a href="https://forum.multitheftauto.com/topic/95008-multi-theft-autos-official-discord-server/">Forum post</a>)</li>
67-
<li><a href="https://discord.com/invite/GNN6PRtTnu">Development Discord</a></li>
68-
<li><a href="https://community.multitheftauto.com/">MTA Community</a></li>
69-
<li><a href="https://twitter.com/MTAQA">Twitter</a>, <a href="https://www.youtube.com/user/MTAQA">YouTube</a>, <a href="https://www.facebook.com/multitheftauto">Facebook</a>, <a href="https://www.moddb.com/mods/multi-theft-auto-san-andreas">ModDB</a></li>
70-
</ul>
71-
</div>
72-
73-
<div class="mtabox">
74-
<h3>Developing Multi Theft Auto</h3>
75-
<ul>
76-
<li><a href="https://nightly.mtasa.com/">Nightly builds</a></li>
77-
<li><a href="/Compiling_MTASA">Compiling MTASA on Windows</a></li>
78-
<li><a href="/Building_MTASA_Server_on_GNU_Linux">Compiling MTASA on GNU/Linux</a></li>
79-
<li><a href="https://github.com/multitheftauto/mtasa-blue">Main GitHub repository</a></li>
80-
<li><a href="https://github.com/multitheftauto/mtasa-blue/milestones">Roadmap</a></li>
81-
<li><a href="https://github.com/multitheftauto/mtasa-blue/issues">Bugtracker (GitHub Issues)</a></li>
82-
</ul>
8341
</div>
8442

85-
86-
<div class="mtabox">
87-
<h3>Scripting</h3>
88-
<ul>
89-
<li><a href="/articles/scripting-introduction">Introduction to Scripting</a></li>
90-
<li><a href="/articles/gui-introduction">Introduction to Scripting the GUI</a></li>
91-
<li><a href="/Debugging">Debugging Tutorial</a></li>
92-
<li><a href="/Resources">Introduction to Resources</a>
93-
<ul>
94-
<li><a href="/reference/Resource_Web_Access">Resource Web Access</a></li>
95-
<li><a href="/reference/CEF-tutorial">CEF Tutorial</a></li>
96-
<li><a href="/Category:Resource">Resource Catalogue</a></li>
97-
<li><a href="/reference/Meta.xml">Meta.xml</a></li>
98-
<li><a href="/reference/Access_Control_List">ACL</a></li>
99-
</ul>
100-
</li>
101-
<li><a href="/Writing_Gamemodes">Writing Gamemodes</a></li>
102-
<li><a href="/articles/script-security">Script security</a></li>
103-
<li><a href="/Modules">Server Modules</a></li>
104-
</ul>
105-
<p>Forum Links</p>
106-
<ul>
107-
<li><a href="https://forum.multitheftauto.com/forum/71-scripting/">Scripting Sub-Forum</a></li>
108-
<li><a href="https://forum.multitheftauto.com/forum/123-tutorials/">Scripting Tutorials Sub-Forum</a></li>
109-
<li><a href="https://forum.multitheftauto.com/topic/24702-mtasa-wiki-offline-copies-online-mirrors/">Offline Wiki Copies</a></li>
110-
</ul>
111-
<h3>General Lua Help</h3>
112-
<ul>
113-
<li><a href="http://www.lua.org/pil/index.html">Programming in Lua Manual</a></li>
114-
<li><a href="http://www.lua.org/manual/5.1/#index">Internal Lua functions reference</a></li>
115-
<li><a href="http://lua-users.org/wiki/TutorialDirectory">Lua Wiki</a></li>
116-
<li><a href="http://nixstaller.sourceforge.net/manual/0.5.1/nixstaller_10.html">Lua Guide from Nixstaller</a></li>
117-
</ul>
118-
</div>
119-
120-
<div class="mtabox">
121-
<h3>Reference</h3>
122-
<ul>
123-
<li><a href="/reference/Lua_API">MTA Lua API Reference</a></li>
124-
<li><a href="/reference/ID_Lists">ID Lists</a></li>
125-
</ul>
43+
<div class="content">
44+
<CardGrid>
45+
<Card title="Community" icon="heart">
46+
<IconLinkCard title="Help Center" href="https://help.multitheftauto.com" icon="open-book"/>
47+
<IconLinkCard title="Development Discord" href="https://discord.com/invite/GNN6PRtTnu" icon="discord"/>
48+
<IconLinkCard title="ModDB" href="https://www.moddb.com/mods/multi-theft-auto-san-andreas" icon="mastodon"/>
49+
<IconLinkCard title="MTA Community" href="https://community.multitheftauto.com/" description='Share and download resources.' icon="external"/>
50+
<IconLinkCard title="RW Tool" href="https://nightly.mtasa.com/rwtool/" icon="setting" />
51+
</Card>
52+
53+
<Card title="Developing Multi Theft Auto" icon="information">
54+
<IconLinkCard title="Nightly builds" href="https://nightly.mtasa.com/" icon="cloud-download"/>
55+
<IconLinkCard title="Roadmap" href="https://github.com/multitheftauto/mtasa-blue/milestones" icon="github"/>
56+
<IconLinkCard title="Bugtracker" href="https://github.com/multitheftauto/mtasa-blue/issues" icon="laptop"/>
57+
<IconLinkCard title="Contributing guidelines" href="https://github.com/multitheftauto/mtasa-docs/blob/main/mtasa-blue/CONTRIBUTING.md" icon="seti:notebook"/>
58+
59+
<div class="mta-opensource-info">
60+
<Image style={{ width: '50px', height: '50px' }} src={getAssetImagePath("osi_symbol.png")} alt="Open Source Initiative"/>
61+
<div style="display: flex; flex-direction: column;">
62+
<span><b>Multi Theft Auto</b> is <b>Open Source</b></span>
63+
<span>This means anyone can contribute to making Multi Theft Auto even better!</span>
64+
</div>
65+
</div>
66+
</Card>
67+
68+
</CardGrid>
12669
</div>
12770
</div>
12871

129-
</StarlightPage>
130-
13172
<style>
132-
.bigtext {
133-
font-size: 1.4em;
134-
font-weight: bold;
135-
}
136-
137-
.mtahero {
138-
display: flex;
139-
align-items: center;
140-
justify-content: space-between;
141-
}
142-
.mtahero_left {
143-
flex: 1;
144-
align-self: flex-start;
145-
padding-right: 16px;
146-
}
147-
.mtahero_right {
148-
flex: 3;
149-
}
150-
151-
.mtagrid {
152-
display: flex;
153-
flex-wrap: wrap;
154-
gap: 2rem;
155-
align-items: flex-start;
156-
justify-content: flex-start;
73+
.mainpage {
74+
display: flex;
75+
flex-direction: column;
76+
gap: 30px;
77+
}
78+
79+
.header {
80+
display: flex;
81+
align-items: center;
82+
justify-content: center;
83+
flex-direction: row;
84+
gap: 10%;
85+
text-align: left;
86+
}
87+
88+
.header img {
89+
max-width: 180px;
90+
height: auto;
91+
}
92+
93+
.header-text {
94+
display: flex;
95+
flex-direction: column;
96+
gap: 10px;
97+
}
98+
99+
.header-buttons {
100+
display: flex;
101+
flex-direction: row;
102+
flex-wrap: wrap;
103+
gap: 20px;
104+
align-items: center;
105+
}
106+
107+
.content {
108+
display: flex;
109+
justify-content: center;
110+
align-items: center;
111+
}
112+
113+
.mta-opensource-info {
114+
display: flex;
115+
flex-direction: row;
116+
align-items: center;
117+
font-size: 16px;
118+
gap: 20px;
119+
}
120+
121+
@media (max-width: 768px) {
122+
.header {
123+
flex-direction: column;
124+
text-align: center;
125+
gap: 20px;
157126
}
158127

159-
.mtabox {
160-
padding: 4px 8px 8px 8px;
161-
padding: 1rem;
128+
.header-buttons {
129+
justify-content: center;
162130
}
163131

164-
.downloadmta {
165-
font-size: 1.2em;
166-
}
167-
.mtadownload-icon {
168-
display: inline-block;
169-
vertical-align: top;
170-
margin-right: 6px;
171-
}
172-
.mtagreen {
173-
color: lightgreen !important;
174-
}
175-
:root[data-theme="light"] .mtagreen {
176-
color: #00ac09 !important;
132+
.header-text {
133+
align-items: center;
177134
}
178-
135+
}
179136
</style>

0 commit comments

Comments
 (0)