blob: f3a93796b4919f4a833a68ccfe300533e1e0c046 (
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
{% 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">
<h1 class="hidden">{{config.extra.organization.name}}</h1>
<img src="{{ config.extra.organization.logo }}" width="220px" alt="{{config.extra.organization.name}}"/>
<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-center justify-center p-2">
<img src="{{ get_url(path='images/host.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-center 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="w-full flex flex-col items-center justify-center border-b">
<div id="map-container" class="relative w-full shadow-inner border-t border-b">
<span class="absolute top-1/2 left-1/2 transform -translate-y-1/2 text-2xl text-white font-light select-none px-2 py-1.5 rounded shadow" style="background:#999999;">
Made for redundancy
</span>
</div>
<div id="map-legend-container" class="max-w-7xl mx-auto flex items-center justify-around space-x-12 py-2 text-sm text-gray-700">
<div>
<p class="text-base text-gray-600">Each chunk of data is replicated in 3 zones</p>
</div>
<div class="flex items-center space-x-2">
<img class="select-none" src="{{ get_url(path='icons/servers.svg') }}" width="48px">
<span>Zone (multiple servers)</span>
</div>
<div class="flex items-center space-x-2">
<img class="select-none" src="{{ get_url(path='icons/datachunks.svg') }}" width="48px">
<span>Chunks of data</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>
<div class="w-full flex flex-col items-center justify-center shadow-inner"></div>
<div class="py-24 space-y-8 text-garage-gray max-w-4xl mx-auto">
<h2 class="text-2xl text-garage-orange font-semibold">Sponsors and funding</h2>
<p>
The Deuxfleurs association has received a grant from <a class="text-garage-orange underline" href="https://pointer.ngi.eu/" target="_blank">NGI POINTER</a>,
to fund 3 people working on Garage full-time for a year : from October 2021 to September 2022.
</p>
<img src="{{ get_url(path='images/ngi-pointer-eu.png') }}" class="w-2/3" alt="NGI Pointers">
<p class="italic">
This project has received funding from the European Union's Horizon 2021 research and innovation programme
within the framework of the NGI-POINTER Project funded under grant agreement N° 871528.
</p>
</div>
</div>
</div>
</section>
{% endblock %}
|
