Notes implementations

10 files changed, 316 insertions, 2 deletions

diff --git a/Makefile b/Makefile
index 1db569a..cfce620 100644
--- a/Makefile
+++ b/Makefile
@@ -7,6 +7,10 @@ BASE_HTML=tmp/left.htm tmp/headers.htm
 ALL_ARTICLES=$(wildcard articles/*.md)
 ALL_ARTICLES_OUT=$(ALL_ARTICLES:.md=.html)
 ALL_ARTICLES_INTRO_OUT=$(addprefix articles/tmp/,$(shell cat articles_intro_out))
+ALL_NOTES_OUT=$(addprefix notes/,$(shell cat notes/notes_out))
+ALL_NOTES_TMP=$(addprefix notes/tmp/,$(shell cat notes/notes_out))
+ALL_NOTES_TMP_OUT=$(ALL_NOTES_TMP:.html=.hml)
+ALL_NOTES_CARDS_OUT=$(ALL_NOTES_TMP:.html=_card.htm)
 
 SCRIPT_JS=s/js/main.js
 SHEET_CSS=s/css/style.css
@@ -16,10 +20,9 @@ SHEET_CSS=s/css/style.css
 # 	Les bases en premiers
 # 	Puis les articles
 # 	Et enfin index (qui possède une liste des introductions des articles)
-all: $(ALL_ARTICLES_OUT) $(BASE_HTML) index.html contact/index.html $(SHEET_CSS) $(SCRIPT_JS)
+all: $(ALL_ARTICLES_OUT) $(BASE_HTML) index.html contact/index.html $(SHEET_CSS) $(SCRIPT_JS) $(ALL_NOTES_OUT) notes/index.html
 .PHONY: all
 
-
 # > Création des articles depuis le markdown
 # 	On compile le fichier md vers html (tmp/%.htm)
 # 	On rajoute les headers (tmp/%_header.htm)
@@ -50,6 +53,52 @@ tmp/articles.htm: $(ALL_ARTICLES_INTRO_OUT) articles_intro_out
 	mkdir -p tmp
 	cat $(ALL_ARTICLES_INTRO_OUT) > $@
 
+#####################################################################
+####			NOTES
+#####################################################################
+
+notes/index.html: notes/tmp/index.htm notes/tmp/notes_cards.htm
+# 	On rajoute les headers (tmp/%_header.htm)
+# 	On fini d'ajouter le squelette HTML (notes/%.html
+notes/%.html: notes/tmp/%.htm notes/tmp/notes_cards.htm
+	@echo "> Création des notes ($@)"
+	m4 -D tmpFileNameNote=$(addprefix notes/tmp/,$(notdir $(@:.html=.htm))) -D linkFileNameNote=$(<:.md=) -D HEADER_HEADER=$(addprefix notes/tmp/,$(notdir $(basename $@)_header.htm)) -D CANONIC="https://ache.one/$@" notes/note.m4 | $(HTML_MINIFIER_CMD) > $@
+
+notes/tmp/%.htm: notes/%.md
+	@echo
+	@echo "# Compile temporaire de la note $@"
+	mkdir -p notes/tmp
+	cat $< | $(MD_CMD) > $@
+
+# > Création des notes depuis le markdown
+# 	On compile le fichier md vers html (tmp/%.htm)
+# 	On rajoute les headers (tmp/%_header.htm)
+# 	On fini d'ajouter le squelette HTML (notes/%.html
+notes/%.html: notes/tmp/%.htm notes/tmp/notes_cards.htm
+	@echo "> Création des notes ($@)"
+	m4 -D TITLE_TITLE="`echo Licornes, hérissons et renards`" headers.m4  > $(addprefix notes/tmp/,$(notdir $(basename $@)_header.htm))
+	m4 -D tmpFileNameNote=$(addprefix notes/tmp/,$(notdir $(@:.html=.htm))) -D linkFileNameNote=$(<:.md=) -D HEADER_HEADER=$(addprefix notes/tmp/,$(notdir $(basename $@)_header.htm)) -D CANONIC="https://ache.one/$@" notes/note.m4 | $(HTML_MINIFIER_CMD) > $@
+
+# > Création de la liste des notes (format cartes)
+# 	On assemble juste les cartes de notes ensemble
+notes/tmp/notes_cards.htm: $(ALL_NOTES_CARDS_OUT)
+	@echo "> Création de la liste des cartes de notes"
+	mkdir -p tmp
+	cat $(ALL_NOTES_CARDS_OUT) > $@
+
+# > Création des cartes de chaque note
+notes/tmp/%_card.htm: notes/tmp/%.htm notes/notes_out
+	@echo "> Création de carte de note : $@  (need $<)"
+	mkdir -p tmp
+	cat $< | $(CATCH_CMD) "h1" > $@.tmp
+	cat $< | $(CATCH_CMD) "p:last-child" | sed 's/res\//notes\/res\//' >> $@.tmp
+	m4 -D tmpCard=$@.tmp notes/card.m4  > $@
+
+
+
+####################################################################
+###		MAIN PAGE
+####################################################################
 
 # > Création de la page principale
 # 	On se sert du menu de gauche, du header, et de la liste des introductions
diff --git a/notes/card.m4 b/notes/card.m4
new file mode 100644
index 0000000..896971c
--- /dev/null
+++ b/notes/card.m4
@@ -0,0 +1,4 @@
+
+<article class="notes">
+include(tmpCard)
+</article>
diff --git a/notes/create-gif-using-ffmpeg.md b/notes/create-gif-using-ffmpeg.md
new file mode 100644
index 0000000..ee89936
--- /dev/null
+++ b/notes/create-gif-using-ffmpeg.md
@@ -0,0 +1,10 @@
+How to create a gif out of a video
+===================
+
+First you need `ffmpeg`. Then, the options you have to know are `-t` and `-s`.
+
+
+Blablabla
+
+
+<tag>ffmpeg</tag><tag>ffmpeg</tag><tag>cli</tag>
diff --git a/notes/e3372h-usb-4g-modem.md b/notes/e3372h-usb-4g-modem.md
new file mode 100644
index 0000000..f3a3ee8
--- /dev/null
+++ b/notes/e3372h-usb-4g-modem.md
@@ -0,0 +1,174 @@
+Utiliser une clé 4G E3372h sous Linux
+===================
+
+Ça fait quelques années que j'ai remplacé mon portable (un galaxy S4 ...) par une clé USB 4G.
+Une clé que j'utilise toujours encore d'ailleurs !
+
+La référence de la clé est E2272h-153, je l'ai en 2 modèles, une un peu vielle qui par l'usure [des années s'est abîmé](https://linuxfr.org/forums/general-cherche-materiel/posts/cle-4g-linux-et-gammu). L'autre plus récente mais qui manifestement n'a rien de différent.
+
+Bref, il se trouve que ces clés fonctionnent de manière bizarre au démarage. Elles veullent installer leurs pilotes avant de vraiment se lancer. Sauf que ça marche pas vraiment comme ça sous Linux. Il va alors faloir changer le mode de la clé automatiquement. Tout ce qu'il faut savoir c'est que c'est une pratique courante et bien utile pour créer des produits plug & play. Le mot clé associé est [ZeroCD](https://en.wikipedia.org/wiki/Virtual_CD-ROM_switching_utility).
+
+Pour changer de mode sous Linux, on utilise `usb_modeswitch`. Pour fonctionner, cet utilitaire aura besoin des droits super utilisateur. Dès qu'il a envoyé la commande de “switch”, l'utilitaire s'arrête; ce n'est donc pas un service qui tourne en tache de fond avec des droits root.
+
+~~~shell
+$ usb_modeswitch  --help
+
+ * usb_modeswitch: handle USB devices with multiple modes
+ * Version 2.6.1 (C) Josua Dietze 2017
+ * Based on libusb1/libusbx
+
+ ! PLEASE REPORT NEW CONFIGURATIONS !
+
+
+Usage: usb_modeswitch [<params>] [-c filename]
+
+ -h, --help                    this help
+ -e, --version                 print version information and exit
+ -j, --find-mbim               return config no. with MBIM interface, exit
+
+ -v, --default-vendor NUM      vendor ID of original mode (mandatory)
+ -p, --default-product NUM     product ID of original mode (mandatory)
+ -V, --target-vendor NUM       target mode vendor ID (optional)
+ -P, --target-product NUM      target mode product ID (optional)
+ -C, --target-class NUM        target mode device class (optional)
+ -b, --bus-num NUM             system bus number of device (for hard ID)
+ -g, --device-num NUM          system device number (for hard ID)
+ -m, --message-endpoint NUM    direct the message transfer there (optional)
+ -M, --message-content <msg>   message to send (hex number as string)
+ -2, --message-content2 <msg>
+ -3, --message-content3 <msg>  additional messages to send if needed
+ -w, --release-delay <msecs>   wait a while before releasing the interface
+ -n, --need-response           obsolete, no effect (always on)
+ -r, --response-endpoint NUM   read response from there (optional)
+ -K, --std-eject               send standard EJECT sequence
+ -d, --detach-only             detach the active driver, no further action
+ -H, --huawei-mode             apply a special procedure
+ -J, --huawei-new-mode         apply a special procedure
+ -X, --huawei-alt-mode         apply a special procedure
+ -S, --sierra-mode             apply a special procedure
+ -O, --sony-mode               apply a special procedure
+ -G, --gct-mode                apply a special procedure
+ -N, --sequans-mode            apply a special procedure
+ -A, --mobileaction-mode       apply a special procedure
+ -T, --kobil-mode              apply a special procedure
+ -L, --cisco-mode              apply a special procedure
+ -B, --qisda-mode              apply a special procedure
+ -E, --quanta-mode             apply a special procedure
+ -F, --pantech-mode NUM        apply a special procedure, pass NUM through
+ -Z, --blackberry-mode         apply a special procedure
+ -U, --option-mode             apply a special procedure
+ -R, --reset-usb               reset the device after all other actions
+ -Q, --quiet                   don't show progress or error messages
+ -W, --verbose                 print all settings and debug output
+ -D, --sysmode                 specific result and syslog message
+ -s, --check-success <seconds> check switching result, with timeout
+ -I, --inquire                 obsolete, no effect
+
+ -c, --config-file <filename>  load long configuration from file
+
+ -t, --stdinput                read long configuration from stdin
+
+ -f, --long-config <text>      get long configuration from string
+
+ -i, --interface NUM           select initial USB interface (default 0)
+ -u, --configuration NUM       select USB configuration
+ -a, --altsetting NUM          select alternative USB interface setting
+~~~
+
+Moi j'utilise une clé Huawei et le mode `-J` fonctionne très bien donc la commande est :
+
+~~~shell
+# usb_modeswitch  -v 12d1 -p 14fe -J
+~~~
+
+Le numéro de vendeur (`-v`) et de produit (`-p`) sont récupérer depuis `dmesg`.
+
+Vous devriez voir ceci apparaitre ceci :
+
+~~~shell
+# dmesg
+...
+[46469.963675] usb 2-1: New USB device found, idVendor=12d1, idProduct=14fe, bcdDevice= 1.01
+[46469.963685] usb 2-1: New USB device strings: Mfr=1, Product=2, SerialNumber=3
+[46469.963689] usb 2-1: Product: HUAWEI_MOBILE
+...
+~~~
+
+Une fois que c'est fait c'est fini. Normalement la clé devrait resté dans le mode modem.
+Cependant depuis quelque temps, elle revient en mode clé USB (*mass storage*).
+
+Pour automatiser ça, j'ai rajouté une règle udev dans le fichier `/etc/udev/rules.d/41-whatever.rules`.
+
+~~~text
+ACTION=="add", SUBSYSTEMS=="usb", ATTRS{idVendor}=="12d1", ATTRS{idProduct}=="14fe", RUN+="/usr/bin/usb_modeswitch -v 12d1 -p 14fe -J"
+~~~~
+
+Ce n'est pas un *big deal* j'avais déjà 2 paires de règles pour automatiser mon installation.
+
+~~~text
+ACTION=="add",    KERNEL=="ttyUSB0", SUBSYSTEMS=="usb", ATTRS{idVendor}=="12d1", ATTRS{idProduct}=="1506", RUN+="/usr/bin/systemctl start smsd"
+
+ACTION=="remove", KERNEL=="ttyUSB0", SUBSYSTEMS=="usb", ATTRS{idVendor}=="12d1", ATTRS{idProduct}=="1506", RUN+="/usr/bin/systemctl stop smsd"
+
+ACTION=="add",    KERNEL=="ttyUSB1", SUBSYSTEMS=="usb", ATTRS{idVendor}=="12d1", ATTRS{idProduct}=="1506", RUN+="/usr/bin/systemctl start wvdial"
+
+ACTION=="remove", KERNEL=="ttyUSB1", SUBSYSTEMS=="usb", ATTRS{idVendor}=="12d1", ATTRS{idProduct}=="1506", RUN+="/usr/bin/systemctl stop wvdial"
+~~~
+
+Qui activent et désactivent gammu et wvdial lorsque je connecte et déconnecte la clé.
+
+Gammu permet de gérer les SMS. J'ai codé un programme en C pour pouvoir gérer ça de manière pratique. Il s'appelle [mesms](https://git.ache.one/mesms) et j'auto-héberge les sources.
+
+Ça ressemble à ça :
+
+![Interface de mesms](https://ache.one/res/mesms.gif)
+
+wvdial est un modème qui se charge d'activer la connection et crée un pont ppp avec la clé pour avoir internet en 4G.
+j'ai entendu dire que je pouvais utiliser [NCM](https://github.com/torvalds/linux/blob/master/drivers/net/usb/huawei_cdc_ncm.c) mais très franchement, je n'ai pas cherché plus que ça. Pour l'instant ça marche.
+
+Le fichier de configuration de wvdial est très basique (`/etc/wvdial.conf`):
+
+~~~text
+[Dialer Defaults]
+ISDN = 0
+Dial Command = ATDT
+Stupid Mode = 1
+Init1 = ATZ
+Init3 = AT+CGDCONT=1,"IP","free"
+Phone = *99***1#
+Modem = /dev/ttyUSB1
+New PPD = yes
+Modem Type = USB Modem
+ISDN = 0
+Username = free
+Password = free
+
+Auto DNS = Off
+~~~
+
+J'ai une autre version pour d'autres carte SIM comme par exemple :
+
+~~~text
+[Dialer Defaults]
+ISDN = 0
+Dial Command = ATDT
+Stupid Mode = 1
+Init1 = ATZ
+Init3 = AT+CGDCONT=1,"IP","drei.at"
+Phone = *99#
+Modem = /dev/ttyUSB1
+New PPD = yes
+Modem Type = USB Modem
+ISDN = 0
+Username = drei.at
+Password = drei.at
+
+Auto DNS = Off
+~~~
+
+Il n'y a pas beaucoup de changement. Il suffit généralement de changer simplement le nom de l'APN.
+
+J'aurais certainement d'autres choses à dire mais ça sera pour une prochaine notes ! \o
+
+
+<tag>4g</tag><tag>huawei</tag><tag>usb</tag><tag>lte</tag>
diff --git a/notes/index.m4 b/notes/index.m4
new file mode 100644
index 0000000..83b532e
--- /dev/null
+++ b/notes/index.m4
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+    <!-- HEADERS -->
+include(tmp/headers.htm)
+        <body>
+<div id="decal_panel">
+            <!-- Note -->
+include(notes/tmp/notes.htm)
+            <!-- aside left column -->
+include(tmp/left.htm)
+</div>
+  </body></html>
diff --git a/notes/index.md b/notes/index.md
new file mode 100644
index 0000000..285b064
--- /dev/null
+++ b/notes/index.md
@@ -0,0 +1,3 @@
+# Notes
+
+J'espère qu'elles vous seront utiles !
diff --git a/notes/note.m4 b/notes/note.m4
new file mode 100644
index 0000000..b6012ed
--- /dev/null
+++ b/notes/note.m4
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+include(HEADER_HEADER)
+
+  <body>
+
+<div id="decal_panel">
+<article class="post">
+include(tmpFileNameNote)
+
+<hr>
+
+<section class="list_notes">
+include(notes/tmp/notes_cards.htm)
+            <!-- aside left column -->
+</section>
+</article>
+</div>
+
+include(tmp/left.htm)
+
+</body></html>
diff --git a/notes/notes_out b/notes/notes_out
new file mode 100644
index 0000000..c083859
--- /dev/null
+++ b/notes/notes_out
@@ -0,0 +1,2 @@
+create-gif-using-ffmpeg.html
+e3372h-usb-4g-modem.html
diff --git a/src/css/_notes.scss b/src/css/_notes.scss
new file mode 100644
index 0000000..f4260f3
--- /dev/null
+++ b/src/css/_notes.scss
@@ -0,0 +1,35 @@
+.list_notes {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: flex-start;
+  justify-content: space-around;
+  article {
+    transition: all .2s ease-in-out; 
+    color: #DDD;
+    margin: 0;
+    padding: 6px 8px;
+    border-radius: 7px;
+    background-color: #000000CA;
+    box-shadow:  2px 1px 1px 0px rgba(0, 0, 0, 0.2);
+    max-width: 215px;
+    font-size: 0.875rem;
+    cursor: pointer;
+    &:hover {
+      transform: scale(1.1) translate(0, -5px) rotate(-0.5deg);
+      box-shadow:  3px 3px 2px 1px rgba(0, 0, 0, 0.2);
+    }
+    h1 {
+      color: #EEE;
+      font-size: 1rem;
+      margin: 0;
+    }
+  }
+}
+tag {
+  background-color: #A8DC;
+  display: inline-block;
+  margin: 2px;
+  padding: 3px;
+  color: white;
+}
+
diff --git a/src/css/design.scss b/src/css/design.scss
index 8a1f33b..952b234 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -6,6 +6,7 @@ $gt-gsm:  "screen and (min-width: 768px)";
 @import 'sommaire';
 @import 'style';
 @import 'rainbow';
+@import 'notes';
 
 html {
   background: #f1f1f1;