1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
import React from 'react';
import clsx from 'clsx';
import Layout from '@theme/Layout';
// import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import useBaseUrl from '@docusaurus/useBaseUrl';
import styles from './styles.module.css';
const features = [
{
title: 'Easy to Use',
imageUrl: 'img/undraw_happy_announcement_ac67.svg',
description: (
<div className="card">
<div className="card__footer">
The core Whirl service was designed to be quick and easy to setup.
<br /><br />
Deployment options such
as <a href="https://docs.docker.com/get-started/" target="_blank">Docker</a>,
<a href="https://docs.docker.com/compose/" target="_blank">Docker Compose</a>, and
<a href="https://github.com/Whirlsplash/whirl/releases/latest"
target="_blank"
aria-disabled>
standalone binaries</a> are offered!
</div>
<div className="card__footer">
<a href="/docs/whirl/deploying_setup" target="_blank">
<button className="button button--primary button--block">
Get Started
</button>
</a>
</div>
</div>
),
},
{
title: 'Customizable',
imageUrl: 'img/undraw_personalization_triu.svg',
description: (
<div className="card">
<div className="card__footer">
Whirl provides simple and fast customizability, zero fiddling required! Want to be a host
or an admin in-game? done!
<br /><br />
<b>YOU</b> rule <b>YOUR</b> server.
</div>
<div className="card__footer">
<a href="/docs/whirl/configuration" target="_blank">
<button className="button button--primary button--block">
Explore Configuration Options
</button>
</a>
</div>
</div>
),
},
{
title: 'Built to Last',
imageUrl: 'img/undraw_building_blocks_n0nc.svg',
description: (
<div className="card">
<div className="card__footer">
Much of Whirl has been written in <a href="https://www.rust-lang.org/">Rust</a>, a
lightning fast, memory-safe, and maintainable, modern language. Gone are the days of
having to maintain legacy code or having to keep fix bugs in software that wasn't written
to be read, and it's all open-source!
</div>
<div className="card__footer">
<a href="https://github.com/Whirlsplash/whirl" target="_blank">
<button className="button button--primary button--block">
View Source Code
</button>
</a>
</div>
</div>
),
},
];
function Feature({imageUrl, title, description}) {
const imgUrl = useBaseUrl(imageUrl);
return (
<div className={clsx('col col--4', styles.feature)}>
{imgUrl && (
<div className="text--center">
<img className={styles.featureImage} src={imgUrl} alt={title} />
</div>
)}
<h3>{title}</h3>
<p>{description}</p>
</div>
);
}
export default function Home() {
const context = useDocusaurusContext();
const { siteConfig = {}, } = context;
return (
<Layout title={"Home"}>
<header className={clsx('hero hero--primary', styles.heroBanner)}>
<div className="container">
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div>
<a href="https://discord.com/invite/8hn6padWF6">
<img src="https://img.shields.io/discord/821938182274154506?style=for-the-badge&logo=appveyor"
alt="Discord" />
</a>
<a href="https://www.codefactor.io/repository/github/whirlsplash/whirl">
<img src="https://www.codefactor.io/repository/github/whirlsplash/whirl/badge?style=for-the-badge&logo=appveyor"
alt="CodeFactor" />
</a>
<a href="https://saythanks.io/to/[email protected]">
<img src="https://img.shields.io/badge/Say%20Thanks-!-1EAEDB.svg?style=for-the-badge&logo=appveyor"
alt="Say Thanks" />
</a>
<a href="https://github.com/Whirlsplash/whirl/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/Whirlsplash/whirl?style=for-the-badge&logo=appveyor"
alt="License" />
</a>
</div>
{/* <div className={styles.buttons}>
<Link className={
clsx('button button--secondary button--lg', styles.getStarted)
} to={useBaseUrl('docs/')}>Get Started</Link>
</div> */}
</div>
</header>
<main>
{/* features && */ features.length > 0 && (
<section className={styles.features}>
<div className="container">
<div className="row">
{features.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
)}
</main>
</Layout>
)
}
|