aerogramme.deuxfleurs.fr/templates/index.html

226 lines
13 KiB
HTML
Executable file
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% extends "base.html" %}
{% block content %}
<section class="section" id="home-section">
<div>
<div class="flex flex-col items-center justify-center py-12 px-8 md: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="flex items-center justify-center space-x-2 md:space-x-4 py-4">
<a
href="https://garagehq.deuxfleurs.fr/_releases.html"
title="Garage releases"
class="group flex items-center justify-center space-x-1 font-semibold shadow hover:shadow-lg px-4 py-3 rounded text-white transition-all duration-500 bg-gradient-to-tl from-garage-orange via-orange-500 to-orange-300 bg-size-200 bg-pos-0 hover:bg-pos-100">
<svg class="w-6 h-6 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg>
<span class="inline text-sm md:text-base">Download</span>
</a>
<a
href="/documentation/quick-start/"
title="Get started with the documentation"
class="group flex items-center justify-center space-x-1 font-semibold shadow hover:shadow-lg px-4 py-3 rounded text-white transition-all duration-500 bg-gradient-to-tl from-gray-400 via-gray-500 to-gray-400 bg-size-200 bg-pos-0 hover:bg-pos-100">
<svg class="w-6 h-6 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
<span class="inline text-sm md:text-base">Get Started</span>
</a>
</div>
<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 whitespace-nowrap">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 whitespace-nowrap">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 whitespace-nowrap">Backup Target</span>
</div>
</div>
</div>
<div class="w-full flex flex-col items-center justify-center border-b">
<div id="map-about" class="w-full shadow-lg mx-auto flex flex-col lg:flex-row items-center justify-around lg:space-x-12 py-4 text-sm text-gray-700 border-t">
<p class="text-garage-orange text-2xl tracking-wide">Made for redundancy</p>
</div>
<div id="map-container" class="relative w-full shadow-inner border-b">
<div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-16 overflow-hidden inline-block">
<div class="h-8 w-8 bg-white -rotate-45 transform origin-top-left shadow-md"></div>
</div>
</div>
<div id="map-legend-container" class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center justify-around lg: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 px-4 md:px-0 w-full shadow-inner">
<div class="flex flex-col items-center justify-start space-y-2">
<h2 class="mb-2 text-xl text-center md: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">
Made for multi-datacenter deployments
</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>
</ul>
</div>
<div class="flex flex-col items-center justify-start space-y-2">
<h2 class="mb-2 text-xl text-center md: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:
</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-normal">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-normal">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-normal">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-normal">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-normal">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-xl text-center md: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">
We built Garage to suit your existing infrastructure:
</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="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-xl text-center md: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">
Garage leverages insights from recent research in distributed systems:
</p>
<ul class="text-center list-style-none flex flex-col items-center py-4">
<li>
<a href="https://dl.acm.org/doi/abs/10.1145/1323293.1294281" class="font-semibold hover:text-garage-orange">Dynamo: Amazons Highly Available Key-value Store</a>
by DeCandia et al.
</li>
<li>
<a href="https://hal.inria.fr/inria-00609399v1" class="font-semibold hover:text-garage-orange">Conflict-Free Replicated Data Types</a>
by Shapiro et al.
</li>
<li>
<a href="https://www.usenix.org/conference/nsdi16/technical-sessions/presentation/eisenbud" 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="px-8 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 <a class="text-garage-orange underline" href="https://deuxfleurs.fr/" target="_blank">Deuxfleurs association</a>
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 mx-auto" 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 %}