summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorache <ache@ache.one>2022-04-18 15:41:04 +0200
committerache <ache@ache.one>2022-09-19 17:42:10 +0200
commit266db8ecaecabe148ecdccc5f11bd3b33189b482 (patch)
tree12e32349edf83ad14492d7a08cb985766b58df56
parentSaves notes (diff)
Notes implementationsnotes
-rw-r--r--Makefile149
-rw-r--r--notes/card.m44
-rw-r--r--notes/create-gif-using-ffmpeg.md10
-rw-r--r--notes/e3372h-usb-4g-modem.md174
-rw-r--r--notes/index.m413
-rw-r--r--notes/index.md3
-rw-r--r--notes/note.m423
-rw-r--r--notes/notes_out2
-rw-r--r--src/css/_notes.scss35
-rwxr-xr-xsrc/css/design.scss4
10 files changed, 416 insertions, 1 deletions
diff --git a/Makefile b/Makefile
index acb94d9..ec33082 100644
--- a/Makefile
+++ b/Makefile
@@ -1,3 +1,152 @@
+
+MD_CMD=npx remark --rc-path remarkrc
+# pup is from github.com/ericchiang/pup
+CATCH_CMD=pup
+HTML_MINIFIER_CMD=htmlmin
+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
+
+
+# Creation des articles, puis des bases et enfin de l'index
+# 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_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)
+# On fini d'ajouter le squelette HTML (articles/%.html
+articles/%.html: articles/%.md $(BASE_HTML) headers.m4 articles/article.m4
+ @echo "> Création des articles"
+ mkdir -p articles/tmp
+ cat $< | $(MD_CMD) > $(addprefix articles/tmp/,$(notdir $(@:.html=.htm)))
+ m4 -D TITLE_TITLE="`echo Licornes, hérissons et renards`" headers.m4 > $(addprefix articles/tmp/,$(notdir $(basename $@)_header.htm))
+ m4 -D tmpFileNameArticle=$(addprefix articles/tmp/,$(notdir $(@:.html=.htm))) -D linkFileNameArticle=$(<:.md=) -D HEADER_HEADER=$(addprefix articles/tmp/,$(notdir $(basename $@)_header.htm)) -D CANONIC="https://ache.one/$@" articles/article.m4 | $(HTML_MINIFIER_CMD) > $@
+
+# > Création des introductions des articles
+# On conserve le titre principale (dans tmp/%_intro.htm)
+# On y ajoute les deux premiers paragraphe (tmp/%_intro.html)
+#
+articles/tmp/%_intro.html: articles/%.html articles/intro.m4
+ @echo "> Création des introductions d'articles"
+ mkdir -p articles/tmp
+ @cat $< | $(CATCH_CMD) "h1" > $(@:.html=.htm)
+ @cat $< | $(CATCH_CMD) "h1 + p" | sed 's/res\//articles\/res\//' >> $(@:.html=.htm)
+ m4 -D tmpFileNameArticle=$(@:.html=.htm) -D linkFileNameArticle=$(<:.html=) articles/intro.m4 > $@
+
+
+# > Création de la liste des introductions d'articles pour la page principale
+# On assemble juste les introductions d'articles ensemble
+tmp/articles.htm: $(ALL_ARTICLES_INTRO_OUT) articles_intro_out
+ @echo "> Création de la liste des introductions d'articles"
+ 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
+# d'articles
+index.html: index.m4 $(BASE_HTML) tmp/articles.htm
+ @echo "> Création de la page principale"
+ m4 $< | $(HTML_MINIFIER_CMD) > $@
+
+
+# > Création de la page de contact
+# On compile le markdown en html (contact.htm)
+# On ajoute l'entête avec m4 (contact_header.html)
+# On ajoute le reste du squelette avec m4 (contact.html)
+contact/index.html: contact/index.md headers.m4 articles/article.m4
+ @echo "> Création de la page de contact"
+ $(MD_CMD) $< > $(@:.html=.htm)
+ m4 -D TITLE_TITLE="`grep h1 $(@:.html=.htm) | cut -d'>' -f 2 | cut -d'<' -f 1`" headers.m4 > $(basename $@)_header.html
+ m4 -D tmpFileNameArticle=$(@:.html=.htm) -D linkFileNameArticle=$(<:.md=) -D HEADER_HEADER=$(basename $@)_header.html -D CANONIC="https://ache.one/contact" articles/article.m4 | $(HTML_MINIFIER_CMD) > $@
+
+
+# > Création du menu de gauche
+# En se servant des logo dans s/img, on assemble le tout avec m4.
+tmp/left.htm: s/imgM/twitterLogo.svg s/imgM/mastoLogo.svg s/imgM/gitLogo.svg s/imgM/acheLogo.svg left.m4
+ @echo "> Création du menu de gauche"
+ mkdir -p tmp
+ m4 left.m4 > $@
+
+
+# > Création de l'entête principale
+# Tout est fait par le fichier headers.m4. On définit simplement le titre.
+tmp/headers.htm: headers.m4
+ @echo "> Création de l'entête principale"
+ m4 -D TITLE_TITLE="Licornes, hérissons et renards - 🦄 🦔 🦊" -D CANONIC="https://ache.one" headers.m4 > $@
+
+# > Création du fichier principale JavaScript
+# À partir du script `prepare` de npm.
+# En utilisant babel puis uglify-js
+$(SCRIPT_JS): src/js/*
+ mkdir -p s/js
+ npm run-script prepare
+
+# > Création du fichier principale CSS
+# À partir de sassc, un compilateur SCSS écrit en C.
+$(SHEET_CSS): src/css/*
+ mkdir -p s/css
+ sassc -t compressed src/css/design.scss > s/css/style.css
+
+
# > Fonctions de nettoyage
# .PHONY sert à indiquer une commande (sinon un fichier clean poserait problème)
# Un tiret devant une commande indique d'ignorer une éventuelle erreur.
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 8bbaa36..eabfbb4 100755
--- a/src/css/design.scss
+++ b/src/css/design.scss
@@ -8,8 +8,10 @@ $big-screen: "screen and (min-width: 1720px)";
@import 'contenu';
@import 'sommaire';
@import 'style';
-@import 'outrun-dark';
+@import 'outrun-dark';
+//@import 'rainbow';
+@import 'notes';
html {