Ajout du logo sur la home du site

This commit is contained in:
Damien Broqua 2022-03-02 16:42:53 +01:00
parent e4a80c6d78
commit c935280742
4 changed files with 78 additions and 42 deletions

View File

@ -6,7 +6,7 @@ Le code source est publié sous licence libre [GNU GPL-3.0-or-later](LICENSE) et
## Utilisation
Vous pouvez librement utiliser le service en vous inscrivant sur [https://mml.darkou.fr](https://mml.darkou.fr).
Vous pouvez librement utiliser le service en vous inscrivant sur [https://www.musictopus.fr/](https://www.musictopus.fr/).
Une fois inscrit vous pourrez saisir vos CDs et Vinyles sur votre espace personnel le tout gratuitement, sans tracker et sans utilisation de vos données personnelles !
@ -101,26 +101,26 @@ Pour la suite je pars du principe que vous êtes un minimum familier avec Nginx
#### Obtenir le certificat
```bash
certbot certonly --nginx -d mml.darkou.fr
certbot --nginx --agree-tos --redirect --hsts --staple-ocsp --email votre@email.tld -d musictopus.fr
```
#### Créer le vhost
Pour ma part j'aime bien créer un fichier dans `/etc/nginx/sites-available` qui comporte le nom du site, ici par exemple `mml.darkou.fr`.
Pour ma part j'aime bien créer un fichier dans `/etc/nginx/sites-available` qui comporte le nom du site, ici par exemple `musictopus.fr`.
En voici son contenu :
```
upstream mml-env {
upstream musictopus-proxy {
server 0.0.0.0:3001;
}
server {
listen 80;
listen [::]:80;
server_name mml.darkou.fr;
server_name musictopus.fr;
if ($host = mml.darkou.fr) {
if ($host = musictopus.fr) {
return 301 https://$host$request_uri;
}
root /dev/null;
@ -132,11 +132,11 @@ server {
server {
listen 443 ssl http2;
server_name mml.darkou.fr;
root /dev/null;
server_name musictopus.fr;
root /srv/MusicTopus/public;
access_log /var/log/nginx/mml.darkou.fr-access.log;
error_log /var/log/nginx/mml.darkou.fr-error.log;
access_log /var/log/nginx/musictopus.fr-access.log;
error_log /var/log/nginx/musictopus.fr-error.log;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
@ -144,6 +144,10 @@ server {
client_max_body_size 1m;
location / {
try_files $uri @proxy;
}
location @proxy {
proxy_read_timeout 300;
proxy_connect_timeout 300;
proxy_redirect off;
@ -155,13 +159,24 @@ server {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Frame-Options SAMEORIGIN;
proxy_pass http://mml-env;
proxy_pass http://musictopus-proxy;
tcp_nodelay on;
}
include conf/ssl.conf;
error_page 500 501 502 503 504 /500.html;
ssl_certificate /etc/letsencrypt/live/mml.darkou.fr/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/mml.darkou.fr/privkey.pem; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/musictopus.fr/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/musictopus.fr/privkey.pem;
add_header Strict-Transport-Security "max-age=31536000" always;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
ssl_trusted_certificate /etc/letsencrypt/live/musictopus.fr/chain.pem;
ssl_stapling on;
ssl_stapling_verify on;
}
```
@ -183,4 +198,4 @@ FORMSPREE_ID # Id du formulaire formspree pour la page "nous-contacter"
## Contributeurs
- Damien Broqua (développeur principal du projet)
- Brunus (fournisseur d'idées :wink: )
- Brunus (Logo et fournisseur d'idées :wink: )

BIN
public/img/logo-large.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -7,4 +7,18 @@
background-size: cover;
}
}
.container {
.logo {
float: left;
margin-right: 0.75rem;
margin-bottom: 0.75rem;
@include respond-to("small") {
float: none;
text-align: center;
margin-right: 0;
}
}
}
}

View File

@ -3,31 +3,38 @@
<h1>
MusicTopus
</h1>
<p class="text-justify">
Retrouvez votre cd-thèque partout depuis votre PC ou votre smartphone.
</p>
<p class="text-justify">
<strong>MusicTopus</strong> est une application Web (que vous pouvez auto-héberger) et un site Web (sur lequel vous pouvez créer un compte), permettant de gérer votre liste des CDs et Vinyles, et de l'utiliser facilement et n'importe où.
<br />
Le code source est publié sous licence libre <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon-link"></i></a>. Le code source est disponible sur <a href="https://git.darkou.fr/dbroqua/MusicTopus" target="_blank">git.darkou.fr <i class="icon-link"></i></a>.
</p>
<h2>
Pourquoi utiliser MusicTopus ?
</h2>
<p class="text-justify">
<strong>MusicTopus</strong> est indispensable lorsqu'une collection, de CD-audios et vyniles, est devenue trop importante pour qu'on puisse se souvenir de tous les albums qu'elle contient. Consulter MusicTopus peut par exemple éviter un achat en double, et de savoir qu'on a des albums à céder ou échanger.
<br />
Il existe déjà plusieurs applications de gestion de librairies musicales mais, (au moment de l'édition de cette présentation) aucune facilement accessible via internet, par exemple lorsqu'on est chez un disquaire.
</p>
<h2>
Qu'est ce qui fait tourner MusicTopus ?
</h2>
<p class="text-justify">
<strong>MusicTopus</strong> c'est un backend, une base de données et un front (à terme une API pour être consommée par une app mobile 🤔).
</p>
<ul>
<li>Backend écrit en JavaScript avec <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS <i class="icon-link"></i></a>.</li>
<li>Base de données de type <a href="https://fr.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener noreferrer">NoSQL <i class="icon-link"></i></a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB <i class="icon-link"></i></a>.</li>
<li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss <i class="icon-link"></i></a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS <i class="icon-link"></i></a>.</li>
</ul>
<div class="container">
<div class="logo">
<img src="/img/logo-large.png" alt="Logo de MusicTopus" />
</div>
<div class="text">
<p class="text-justify">
Retrouvez votre cd-thèque partout depuis votre PC ou votre smartphone.
</p>
<p class="text-justify">
<strong>MusicTopus</strong> est une application Web (que vous pouvez auto-héberger) et un site Web (sur lequel vous pouvez créer un compte), permettant de gérer votre liste des CDs et Vinyles, et de l'utiliser facilement et n'importe où.
<br />
Le code source est publié sous licence libre <a href="https://www.gnu.org/licenses/gpl-3.0-standalone.html" target="_blank" rel="noopener noreferrer">GNU GPL-3.0-or-later <i class="icon-link"></i></a>. Le code source est disponible sur <a href="https://git.darkou.fr/dbroqua/MusicTopus" target="_blank">git.darkou.fr <i class="icon-link"></i></a>.
</p>
<h2>
Pourquoi utiliser MusicTopus ?
</h2>
<p class="text-justify">
<strong>MusicTopus</strong> est indispensable lorsqu'une collection, de CD-audios et vyniles, est devenue trop importante pour qu'on puisse se souvenir de tous les albums qu'elle contient. Consulter MusicTopus peut par exemple éviter un achat en double, et de savoir qu'on a des albums à céder ou échanger.
<br />
Il existe déjà plusieurs applications de gestion de librairies musicales mais, (au moment de l'édition de cette présentation) aucune facilement accessible via internet, par exemple lorsqu'on est chez un disquaire.
</p>
<h2>
Qu'est ce qui fait tourner MusicTopus ?
</h2>
<p class="text-justify">
<strong>MusicTopus</strong> c'est un backend, une base de données et un front (à terme une API pour être consommée par une app mobile 🤔).
</p>
<ul>
<li>Backend écrit en JavaScript avec <a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer">NodeJS <i class="icon-link"></i></a>.</li>
<li>Base de données de type <a href="https://fr.wikipedia.org/wiki/NoSQL" target="_blank" rel="noopener noreferrer">NoSQL <i class="icon-link"></i></a> via <a href="https://www.mongodb.com/" target="_blank" rel="noopener noreferrer">MongoDB <i class="icon-link"></i></a>.</li>
<li>Front utilisant <a href="https://www.knacss.com/" target="_blank" rel="noopener noreferrer">Knacss <i class="icon-link"></i></a> et <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">VueJS <i class="icon-link"></i></a>.</li>
</ul>
</div>
</div>
</main>