blob: 83adef75c9e42d897a54aea8f1cd3c723336e9b2 (
plain) (
blame)
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
{% extends "base.html" %}
{% block content %}
<section class="section" id="home-section">
<div>
<div class="flex flex-col items-center justify-center py-12 px-12 xl:px-0">
<img src="{{ config.extra.organization.logo }}" width="220px" class="" />
<p class="text-gray-500 leading-10 pt-4 text-xl text-center">{{ config.extra.organization.description }}</p>
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-x-32 py-12">
<div class="group flex flex-col items-start justify-center p-2">
<img src="{{ get_url(path='images/host2.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500">Host a Website</span>
</div>
<div class="group flex flex-col items-center justify-center p-2">
<img src="{{ get_url(path='images/store.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500">Store Media</span>
</div>
<div class="group flex flex-col items-end justify-center p-2">
<img src="{{ get_url(path='images/backup.png') }}" class="transform group-hover:translate-y-2 transition duration-500">
<span class="text-xl text-gray-700 font-semibold mt-4 transform group-hover:-translate-y-1 transition duration-500">Backup Target</span>
</div>
</div>
</div>
<div class="grid grid-cols-1 xl:grid-cols-2 gap-x-0 xl:gap-x-12 gap-y-24 text-garage-gray font-light bg-gray-100 py-12 w-full shadow-inner">
<div class="flex flex-col items-center justify-start space-y-2">
<h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Our Goals</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic">We made it lightweight and kept the efficiency in mind.</p>
<ul class="list-style-none font-semibold flex flex-col items-center justify-center py-4">
<li class="py-1.5">
As self-contained as possible
</li>
<div class="w-2 h-2 rounded-full bg-garage-orange"></div>
<li class="py-1.5">
Easy to set up
</li>
<div class="w-2 h-2 rounded-full bg-garage-orange"></div>
<li class="py-1.5 text-center">
Highly resilient to<br>
<div class="font-normal">
<span>network failures</span>,
<span>network latency</span><br>
<span>disk failures</span>,
<span>sysadmin failures</span>
</div>
</li>
<div class="w-2 h-2 rounded-full bg-garage-orange"></div>
<li class="py-1.5">
Relatively simple
</li>
<div class="w-2 h-2 rounded-full bg-garage-orange"></div>
<li class="py-1.5">
Made for multi-datacenter deployments
</li>
</ul>
</div>
<div class="flex flex-col items-center justify-start space-y-2">
<h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Keeping requirements low</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic">
We worked hard to keep requirements as low as possible<br>as we target the largest possible public.
</p>
<ul class="text-center list-style-none flex flex-col space-y-2 justify-start py-4">
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/cpu.svg') }}" width="24px">
<span class="font-semibold">CPU</span>
</div>
<span class="px-2">Any x86_64 CPU from the last 10 years, ARMv7 or ARMv8</span>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/ram.svg') }}" width="24px">
<span class="font-semibold">RAM</span>
</div>
<span class="px-2">1 GB</span>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/disk.svg') }}" width="24px">
<span class="font-semibold">Disk space</span>
</div>
<span class="px-2">At least 16 GB</span>
</li>
<li class="flex flex-col md:flex-row items-center justify-start">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/network.svg') }}" width="24px">
<span class="font-semibold">Network</span>
</div>
<span class="px-2">200 ms or less, 50 Mbps or more</span>
</li>
<li class="flex flex-col items-center md:items-start justify-center">
<div class="flex items-center space-x-2 w-max whitespace-nowrap bg-gray-200 shadow-inner py-0.5 px-1.5 rounded-md">
<img src="{{ get_url(path='icons/hardware.svg') }}" width="24px">
<span class="font-semibold">Heterogeneous hardware</span>
</div>
<span class="px-2">Build a cluster with whatever second-hand machines are available</span>
</li>
</ul>
</div>
<div class="flex flex-col items-center justify-start space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Data resiliency for everyone</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic pb-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p class="font-normal">
Garage implements the Amazon S3 API<br>and thus is already compatible with many applications.
</p>
<ul class="grid grid-cols-3 gap-6 py-4 px-8">
<li class="flex items-center justify-start">
<a href="https://nextcloud.com/" target="_blank" title="Nextcloud">
<img class="h-20 w-20" src="{{ get_url(path='images/nextcloud-logo.svg') }}" alt="Nextcloud">
</a>
</li>
<li class="flex items-center justify-start">
<a href="https://element.io/" target="_blank" title="Matrix">
<img class="h-20 w-20" src="{{ get_url(path='images/matrix-logo.svg') }}" alt="Matrix">
</a>
</li>
<li class="flex items-center justify-start">
<a href="https://cyberduck.io/" target="_blank" title="Cyberduck">
<img class="h-20 w-20" src="{{ get_url(path='images/cyberduck-logo.png') }}" alt="Cyberduck">
</a>
</li>
<li class="flex items-center justify-start">
<a href="https://mastodon.social/" target="_blank" title="Mastodon">
<img class="h-20 w-20" src="{{ get_url(path='images/mastodon-logo.svg') }}" alt="Mastodon">
</a>
</li>
<li class="flex items-center justify-start">
<a href="https://rclone.org/" target="_blank" title="Rclone">
<img class="h-20 w-20" src="{{ get_url(path='images/rclone-logo.svg') }}" alt="Rclone">
</a>
</li>
<li class="flex items-center justify-start">
<a href="https://joinpeertube.org/" target="_blank" title="PeerTube">
<img class="h-20 w-20" src="{{ get_url(path='images/peertube-logo.svg') }}" alt="PeerTube">
</a>
</li>
</ul>
</div>
<div class="flex flex-col items-center justify-start space-y-2 px-6 xl:px-0">
<h2 class="mb-2 text-2xl font-bold text-garage-orange leading-5">Standing on the shoulders of giants</h2>
<div class="w-8 h-1 bg-garage-orange"></div>
<p class="text-center leading-5 italic">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<ul class="text-center list-style-none flex flex-col items-center py-4">
<li>
<a href="#" class="font-semibold hover:text-garage-orange">Dynamo: Amazon’s Highly Available Key-value Store</a>
by DeCandia et al.
</li>
<li>
<a href="#" class="font-semibold hover:text-garage-orange">Conflict-Free Replicated Data Types</a>
by Shapiro et al.
</li>
<li>
<a href="#" class="font-semibold hover:text-garage-orange">Maglev: A Fast and Reliable Software Network Load Balancer</a>
by Eisenbud et al.
</li>
</ul>
</div>
</div>
{% if section.content %}
<div class="content max-w-7xl mx-auto py-12">
{{ section.content | safe }}
</div>
{% endif %}
</div>
</section>
{% endblock %}
|
