Commit 67fd253e authored by Étienne Oz's avatar Étienne Oz 🖖

a

parent afcb4345
@charset "UTF-8";
@import url(reset.css);
@font-face {
font-family: "fira";
src: url("../fonts/fira/FiraCode-Medium.otf"); }
@font-face {
font-family: "vre";
src: url("../fonts/vre/VremenaGroteskMedium.otf"); }
@font-face {
font-family: "vreB";
src: url("../fonts/vre/VremenaGroteskBook.otf"); }
html {
font-size: 16px; }
body {
display: flex;
flex-wrap: wrap;
font-family: sans-serif;
line-height: 1.2rem;
font-family: "vre";
padding: 0 0 6rem 0;
background-color: #000714;
color: white;
/* Chrome, Safari, Opera */ }
body .rainbow {
/* Chrome, Safari, Opera */
-webkit-animation: rainbow 3s infinite;
/* Internet Explorer */
-ms-animation: rainbow 3s infinite;
/* Standar Syntax */
animation: rainbow 3s infinite; }
@-webkit-keyframes rainbow {
0% {
color: #5ff1ff; }
10% {
color: pink; }
20% {
color: white; }
30% {
color: pink; }
40% {
color: #f0a3ff; }
50% {
color: #66dae1; }
60% {
color: #f9ff00; }
70% {
color: #aeffa3; }
80% {
color: yellow; }
90% {
color: pink; }
100% {
color: #5ff1ff; } }
body a:hover {
color: #f0a3ff; }
body .hljs-keyword,
body .hljs-selector-tag,
body .hljs-built_in,
body .hljs-name,
body .hljs-tag {
color: #66dae1; }
body .hljs-string,
body .hljs-title,
body .hljs-section,
body .hljs-attribute,
body .hljs-literal,
body .hljs-template-tag,
body .hljs-template-variable,
body .hljs-type,
body .hljs-addition {
color: #f9ff00; }
body .hljs-comment,
body .hljs-quote,
body .hljs-variable {
color: #aeffa3; }
body .hljs-deletion,
body .hljs-selector-attr,
body .hljs-selector-pseudo,
body .hljs-meta {
color: #5ff1ff; }
body .hljs {
font-family: "fira";
margin: 0 0 1rem 0;
background-color: #141414;
color: white; }
body > header {
padding: 1rem;
position: fixed;
width: 17%;
height: 100vh;
overflow-y: scroll;
background-color: #171717; }
body > header .title {
margin: 0 0 1rem 0; }
body nav a {
display: block; }
body nav .lang .tips {
display: none;
margin: 0.5rem 0 1rem 0;
font-family: "vreB"; }
body nav .lang .tips > a {
display: flex; }
body nav .lang .tips > a::before {
content: "×";
margin: 0 0.5rem 0 0;
display: inline-block; }
body nav .lang.open .tips {
display: block; }
main {
padding: 1rem 10% 0 20%;
width: 100%; }
main .lang {
padding: 2rem 0 0 0;
margin: 0 0 1rem 0; }
main .lang code {
color: #aeffa3; }
main .lang pre code:not(.output):before {
font-size: 10px;
content: ' in >';
position: absolute;
margin-left: -50px;
color: #555; }
main .lang pre code.output:before {
font-size: 10px;
content: 'out >';
position: absolute;
margin-left: -50px;
color: #555; }
main .lang p {
font-family: "vreB"; }
main .lang p strong {
font-weight: bold; }
main .lang h2 {
font-size: 1.5rem;
margin: 0 0 1rem 0;
font-size: 3rem;
font-family: "vreB";
border-top: solid 1px white;
padding-top: inherit; }
main .lang ul li {
padding: 0.5rem 0 0 0;
margin: 0 0 0.5rem 0; }
main .lang ul li h3 {
text-decoration: underline;
margin: 0 0 0.5rem 0; }
/*# sourceMappingURL=main.css.map */
{
"version": 3,
"mappings": "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",
"sources": ["main.scss"],
"names": [],
"file": "main.css"
}
@import "reset.css";
@font-face{
font-family: "fira";
src:url("../fonts/fira/FiraCode-Medium.otf");
}
@font-face{
font-family: "vre";
src:url("../fonts/vre/VremenaGroteskMedium.otf");
}
@font-face{
font-family: "vreB";
src:url("../fonts/vre/VremenaGroteskBook.otf");
}
html{
font-size: 16px;
}
$cBodyBg: rgb(0, 7, 20);
$cText: rgb(255,255,255);
$cCodeBg: rgb(20,20,20);
$cTextHvr: rgb(240,163,255);
$cCodeBlue: rgb(102, 218, 225);
$cCodeYellow: rgb( 249, 255, 0 );
$cCodeGreen: rgb(174, 255, 163);
$cCodeTurq: rgb(95, 241, 255);
body{
display: flex;
flex-wrap: wrap;
font-family: sans-serif;
line-height: 1.2rem;
font-family: "vre";
padding: 0 0 6rem 0;
background-color: $cBodyBg;
color:$cText;
.rainbow {
/* Chrome, Safari, Opera */
-webkit-animation: rainbow 3s infinite;
/* Internet Explorer */
-ms-animation: rainbow 3s infinite;
/* Standar Syntax */
animation: rainbow 3s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes rainbow{
0%{color: $cCodeTurq;}
10%{color: pink;}
20%{color: $cText;}
30%{color: pink;}
40%{color: $cTextHvr;}
50%{color: $cCodeBlue;}
60%{color: $cCodeYellow;}
70%{color: $cCodeGreen;}
80%{color: yellow;}
90%{color: pink;}
100%{color: $cCodeTurq;}
}
a:hover{
color: $cTextHvr;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: $cCodeBlue;
}
.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
color: $cCodeYellow;
}
.hljs-comment,
.hljs-quote,
.hljs-variable {
color: $cCodeGreen;
}
.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
color: $cCodeTurq;
}
.hljs{
font-family: "fira";
margin: 0 0 1rem 0;
background-color: $cCodeBg;
color: white;
}
>header{
padding: 1rem;
position: fixed;
width: 17%;
height: 100vh;
overflow-y: scroll;
background-color: rgb(23, 23, 23);
.title{
margin: 0 0 1rem 0;
}
}
nav{
a{
display: block;
}
.lang{
.tips{
display: none;
margin: 0.5rem 0 1rem 0;
font-family: "vreB";
>a{
display: flex;
}
>a::before{
content: "×";
margin: 0 0.5rem 0 0;
display: inline-block;
}
}
}
.lang.open{
.tips{
display: block;
}
}
}
}
main{
padding: 1rem 10% 0 20%;
width: 100%;
.lang{
padding: 2rem 0 0 0;
margin: 0 0 1rem 0;
code {
color: $cCodeGreen;
}
pre code:not(.output):before {
font-size: 10px;
content: ' in >';
position: absolute;
margin-left: -50px;
color: #555;
}
pre code.output:before {
font-size: 10px;
content: 'out >';
position: absolute;
margin-left: -50px;
color: #555;
}
p {
font-family: "vreB";
strong{
font-weight: bold;
}
}
h2{
font-size: 1.5rem;
margin: 0 0 1rem 0;
font-size: 3rem;
font-family: "vreB";
border-top: solid 1px white;
padding-top: inherit;
}
ul{
li{
padding: 0.5rem 0 0 0;
margin: 0 0 0.5rem 0;
h3{
text-decoration: underline;
margin: 0 0 0.5rem 0;
}
}
}
}
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
* {
box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
box-sizing: border-box;
font-style: normal;
font-weight: normal;
border-radius: 6px;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
a {
color: inherit;
cursor: pointer; }
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0; }
select::-ms-expand {
display: none; }
function setSubAnchors(){
var languages = document.querySelectorAll(".all .lang");
languages.forEach((language) => {
var lis = language.querySelectorAll("li");
var id = language.id;
lis.forEach((li, index) => {
console.log(li)
li.id=document.querySelector("nav [data-id='"+id+"'] a[data-num='"+index+"']").dataset.link;
});
});
}
function openCloseMenu(){
var links = document.querySelectorAll("nav .lang>a");
links.forEach((link) => {
link.addEventListener("click", () => {
var lang = link.parentElement;
if(lang.classList.contains("open")){
lang.classList.remove("open");
}else{
lang.classList.add("open");
}
});
});
}
document.addEventListener("DOMContentLoaded", () => {
openCloseMenu();
setSubAnchors();
});
# a
bb
\ No newline at end of file
# Bash
**ou comment écrire un script qui update automatiquement en ligne de commande ton ordinateur sous Ubuntu**
### Bash
Tout d'abord, il faut savoir que la distribution Ubuntu utilise le bash dans le terminal.
Voici deux liens qui te permttrons d'appronfondir le sujet:
>[https://fr.wikipedia.org/wiki/Bourne-Again_shell](https://fr.wikipedia.org/wiki/Bourne-Again_shell)
>[https://help.ubuntu.com/community/Beginners/BashScripting](https://help.ubuntu.com/community/Beginners/BashScripting)
Mais sache donc que l'on peut faire la même chose dans le terminale et l'interface graphique de ton OS (Gnome pour Ubuntu).
### les commandes pour mettre à jour sous Ubuntu
Souvent les application qui sont dans l'Ubuntu Store sont pas à la dernière version du logiciel.
Depuis peu, il y a d'autre App store compatible, telle que [Snap](https://snapcraft.io/) ou [Flatpack](https://flatpak.org/), mais c'est pas forcement maintenue et mis à jours par les devellopeurs du logiciel.
Or, il existe encore une autre façon d'avoir accès à la toute dernière version du logiciel (pour ubuntu): le ppa. Je ne vais pas m'étendre sur le sujet, mais on peut directement ajouter un ppa, un liens qui permet de garder à jours les applications que l'on installe (souvent manuellement).
ça ressemble souvent à quelque chose comme ceci:
```bash sudo add-apt-repository ppa: ...```
Lorsqu'on ajoute un ppa, il faut mettre à jours la list de source de mise à jours.
Pour cela, on utilise la commande:
```bash sudo apt update```
puis on installe les mises à jours en utilisant la commande :
```bash sudo apt upgrade```
Et au finale, pour nettoyer le système , on peut lancer la commande:
```bash sudo apt autoremove```
Cela enlève les paquets dont le système n'a plus besoin.
#### Note sur la syntax ```sudo```
Le sudo permet d'avoir un accès root pour la commande. L'accès root permet d'avoir un accès Superuserà tout le système. Si la commande est exécuté sans vérifier ce qu'elle va faire, il peut avoir des effets indésirables.
### Un script pour tout automatiser
Voilà la chose super sympa, on peut faire des scripts en bash. Cela vas nous permettre dans ce cas là de lancer toute les commandes si dessus en une ligne de commande, qui lanceras le script.
Tout d'abord, il faut dire au système que le script est en bash. Pour celà, on vas plaer au tout début du script la ligne suivante:
```#!/bin/bash```
Et voilà. On peut maintenant mettre à la suite tout les commandes pour updater son ordi en un rien de temps (je devrais faire de pub pour Castorama à ce rythme). Il faut juste pas oublier d'enregistrer le script avec comme extension de fichier le ```.sh```.
Voici à quoi donc le script en entier:
```bash
#!/bin/bash
sudo apt update
sudo apt upgrade
sudo apt autoremove
```
Cependant, je conseil de le faire de temps en temps à la mains pour ne pas oublier comment le faire si besoin est. Et surtout, avec le bash( que l'on retrouve aussi sur IOS), on peut faire beaucoup de chose.
## Git
### Les bases de git
#### Ajouter toutes les modifications
``` bash
git add .
```
#### pour cibler le dossier que je veux modifier
``` bash
git add ‘chemin/vers/le/fichier’
```
#### git status (vérification)
``` bash
git status
```
#### git pull (récupérer les dernières modifications)
``` bash
git pull
```
#### git commit -m ‘amélioration du formulaire’
``` bash
git commit -m
```
#### git push
``` bash
git commit -m
```
<?php require("tips/launch.php") ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/vs.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
<title>Tips</title>
</head>
<body>
<header>
<div class="title rainbow">
<h1>⚗️ TIPS 🖥️</h1>
<h2>Code that might work</h2>
</div>
<nav>
<?php foreach($tips->all() as $id=>$tipList): ?>
<div class="lang" data-id="<?= $id ?>">
<a href="#<?= $id ?>"><?= ucfirst($id) ?></a>
<div class="tips">
<?php foreach($tips->getTitles($tipList) as $subnum=>$title): ?>
<a href="#<?= $tips->clean($title) ?>" data-num="<?= $subnum ?>" data-link="<?= $tips->clean($title) ?>">
<?= $title ?>
</a>
<?php endforeach ?>
</div>
</div>
<?php endforeach ?>
</nav>
</header>
<main>
<section class="all">
<?php foreach($tips->all() as $id=>$tipList): ?>
<div class="lang" id="<?= $id ?>">
<?= $tipList ?>
</div>
<?php endforeach ?>
</section>
</main>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript" src="assets/js/main.js"></script>
</html>
\ No newline at end of file
<?php
include('tips/launch.php');
$tips->synchronize();
File added
<?php
class Tips{
public function clean($str){
$string = str_replace(' ', '-', $str);
return strtolower(preg_replace('/[^A-Za-z0-9\-]/', '', $str));
}
public function synchronize(){
$id = json_decode(file_get_contents('php://input'))->project_id;
if($id == 12425974){
shell_exec("git pull");
}
}
public function getTitles($html){
$doc = new DOMDocument();
$doc->loadHTML($html);
$doc->saveHTML();
$titles = $doc->getElementsByTagName("h3");
$back = [];
foreach($titles as $title){
$back [] = $title->nodeValue;
}
return $back;
}
public function all(){
$parse = new Parsedown();
$files = glob("content/*.md");
$tips = [];
foreach($files as $file){