Adapt design

4 files changed, 163 insertions, 45 deletions

diff --git a/pyblog b/pyblog
index 4c14e9bf..7e1a4970 100755
--- a/pyblog
+++ b/pyblog
@@ -37,6 +37,9 @@ import dateutil.parser
 import dateutil.tz
 import lxml.etree as ET
 
+from bs4 import UnicodeDammit
+from pprint import pprint
+
 ############################# BLOG CONFIGURATIONS ##############################
 # Safe to customize
 BLOG_HOME = "http://neodarz.net/"
@@ -306,7 +309,7 @@ def generate_menu():
     # Generate the a string who contain a list of file in website folder
     htmly_website_page = "<ul>"
     for name in os.listdir(os.path.join(BUILDDIR, "website")):
-        htmly_website_page += "<li><a href='/website/"+name+"'>"+name.split('.html')[0]+"</a></li>"
+        htmly_website_page += "<a href='/website/"+name+"' class='lia'><li><span class='left-lia'></span><span class='center-lia'>"+name.split('.html')[0]+"</span><span class='right-lia'></span></li></a>"
     htmly_website_page += "</ul>"
 
     # Write the menu in file, in place of the <generated_menu>
@@ -627,33 +630,63 @@ def rewrite_title():
                     except IndexError:
                         filenames.append(name)
 
+    h1_titles_list = []
+    h1_title = []
     fd, tmppath = tempfile.mkstemp()
     os.close(fd)
     for filename in filenames:
         soup = bs4.BeautifulSoup(open(filename), "lxml")
-        for h1 in soup.find_all("h1"):
-            if re.match("^(?!.*article-title).*$", str(h1)):
-                print(h1)
-                h1_id = h1['id']
-                h1_name = h1.string
-                h1_ = soup.new_tag("h1")
-                h1_['id'] = h1_id
-                h1_.string = h1_name
-                h1.name = "span"
-                h1.string = ""
-                h1['class'] = "left-h1"
-                del h1['id']
-                h1.string.insert_before(h1_)
-                print(h1)
-
-        #with open(tmppath, 'w', encoding='utf-8') as tmpfile:
-        #    if os.path.exists(filename):
-        #    #    with open(filename, 'r', encoding='utf-8') as indexmd:
-                #    lines = indexmd.readlines()
-                #    with open(filename, 'w', encoding='utf-8') as indexmd:
-                        #for line in lines:
-                            #indexmd.write(re.sub(r'\<pre class="header"\>\<code\>(.+?)\<\/code\>\<\/pre\>', '<pre class="header"><code>'+f.renderText('Miou')+'(^._.^)ﾉ</code></pre>', line))
-                            #indexmd.write(re.suv(r'\<code class="sourceCode diff"\>', '\<code class="sourceCode diff" id="AsourceCode"\>', line))
+        for myh1 in soup.find_all("h1"):
+            if re.match("^(?!.*article-title).*$", str(myh1)):
+                h1_id = myh1['id']
+                h1_name = myh1.string
+
+                h1_title.append(str(myh1))
+
+
+                myh1['class'] = "h1"
+                myh1.string = ""
+
+                h1_span_left = soup.new_tag("span")
+                h1_span_left['class'] = "left-h1"
+                h1_span_left.string = "█▓▒░"
+
+                h1_span_title = soup.new_tag("span")
+                h1_span_title['class'] = "title-h1"
+                h1_span_title.string = "「"+h1_name+"」"
+
+                h1_span_right = soup.new_tag("span")
+                h1_span_right['class'] = "right-h1"
+                h1_span_right.string = "░▒▓█"
+
+                myh1.string.insert_before(h1_span_left)
+                myh1.span.insert_after(h1_span_right)
+                myh1.span.insert_after(h1_span_title)
+
+                h1_title.append(myh1)
+                h1_title.append(h1_name)
+
+                h1_titles_list.append(h1_title)
+            h1_title = []
+
+    tested_title_list = []
+    tested_title = []
+    for filename in filenames:
+        soup = bs4.BeautifulSoup(open(filename), "lxml")
+        if os.path.exists(filename):
+            with open(filename, 'r', encoding='utf-8') as indexmd:
+                lines = indexmd.readlines()
+
+                with open(filename, 'w', encoding='utf-8') as indexmd:
+                    for line in lines:
+                        string = ""
+                        for title in h1_titles_list:
+                            if re.match(".*"+title[0]+".*", line):
+                                string = str(title[1])
+                        if string != "":
+                            indexmd.write(re.sub(line, string, line))
+                        else:
+                            indexmd.write(line)
 
 
 def absolutify_links(soup, baseurl):
diff --git a/source/blog/2016-06-04-Mode-kiosk-sur-une-Raspberry-Pi-1.md b/source/blog/2016-06-04-Mode-kiosk-sur-une-Raspberry-Pi-1.md
index 8944f5b1..77b5ee7d 100644
--- a/source/blog/2016-06-04-Mode-kiosk-sur-une-Raspberry-Pi-1.md
+++ b/source/blog/2016-06-04-Mode-kiosk-sur-une-Raspberry-Pi-1.md
@@ -4,7 +4,7 @@ date: 2016-06-04T00:37:05+02:00
 date_display: Jun 04, 2016
 ---
 
-# Mise en place du système
+# Le système
 
 Pour l'un de mes stages il y a quelques semaines, je devais réaliser un écran connecté afin de faire un show room pour une entreprise mais le matériel fournis étant une Raspberry Pi 1, je me suis tout de suite douté qu'il risquait d'avoir des problèmes de performances. De plus pour faire cet écran connecté,  le chef de projet avait décidé de le faire en web,  peut être qu'il aurait été préférable de le faire avec une autre techno, je ne sais pas car je n'ai pas étudié la question.
 
@@ -43,7 +43,7 @@ Et pour la partie serveur web :
   * php-mcrypt
   * apache
 
-# Mise en place du démarrage automatique du navigateur lors de la connexion
+# Démarrage auto
 
 Bon avant d'automatiser le tout nous allons faire en sorte que notre interface graphique démarre sans encombre. Pour ça nous allons créer le fichier `.xinitrc` ou le modifier si celui-ci est déja présent, voila à quoi ressemble mon fichier de conf:
 
@@ -69,7 +69,7 @@ done;
 Je précise que dans le cas actuel ma boucle permet de redémarer le navigateur en cas de crash de celui-ci au cas où...
 Et pour démarrer cette interface graphique un simple coup de `startx` et c'est plié.
 
-# Configuration du navigateur
+# Le navigateur
 
 On va s'occuper de l'étape où j'ai passé la plus part de mon temps, la configuration du navigateur. Car après m'être littéralement battu  avec eux j'ai enfin trouvé la solution ! Sur la Raspberry Pi 1 seulement midori et firefox pouvaient tourner mais le problème est le suivant :
 
diff --git a/source/css/theme.css b/source/css/theme.css
index dc273960..1b245620 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -51,10 +51,9 @@ only screen and ( min-resolution: 1.25dppx) {
 
 .nav {
     position: fixed;
-    left: 5%;
-    top: 90px;
+    left: 2.5%;
     height: 150px;
-    width: 100px;
+    width: 200px;
     text-align: center;
 }
 
@@ -111,11 +110,68 @@ only screen and ( min-resolution: 1.25dppx) {
     content: "by neodarz";
 }
 
-.content, .content-separator, .footer {
+.nav li {
+
+  list-style: none;
+}
+
+.nav li a {
+  text-decoration: none;
+}
+
+.left-lia {
+  float: left;
+}
+
+.left-lia::after {
+  content: "█▓▒░";
+}
+
+.right-lia {
+  float: right;
+}
+
+.right-lia::after {
+  content: "░▒▓█";
+}
+
+.lia {
+  text-decoration: none;
+}
+
+.lia-border {
+  border: 1px solid white;
+}
+
+.lia-border ul {
+  padding: 0px;
+  margin: 0;
+}
+
+.lia-border hr {
+  background-color: white;
+  margin: 0;
+  padding: 0;
+}
+
+.lia:hover li{
+    background-color: white;
+    color: black;
+}
+
+.content pre, .content ul, .content p, .content-separator, .footer {
     width: 60%;
     margin: 0 auto;
 }
 
+.content .sourceCode {
+  margin: 0 auto;
+}
+
+.header {
+  width: 100%;
+}
+
 hr {
     border: 0;
     height: 1px;
@@ -135,6 +191,7 @@ h1 {
     text-align: center;
     font-size: 160%;
     font-weight: bold;
+    width: 100%
 }
 
 .h1 {
@@ -353,7 +410,6 @@ table {
 
 .right-h1 {
   float: right;
-  margin-right: -1.6%;
   font-weight: bold;
   font-size: 24.4px;
 }
@@ -371,9 +427,17 @@ table {
 /*** Wide screen ***/
 
 @media screen and (min-width: 1441px) {
-    .content, .content-separator, .footer {
+    .content pre, .content ul, .content p, .content-separator, .footer {
         width: 50%;
     }
+
+    .content .sourceCode {
+
+    }
+
+    .header {
+      width: 100%;
+    }
 }
 
 /*** Narrow screen ***/
@@ -407,9 +471,13 @@ table {
         pointer-events: none;
     }
 
-    .content, .content-separator, .footer {
+    p, .content-separator, .footer {
         width: 80%;
     }
+
+    .header {
+      width: 100%;
+    }
 }
 
 /*** Ultranarrow screen ***/
@@ -419,10 +487,18 @@ table {
       display: none;
     }
 
-    .content, .content-separator, .footer {
+    .content pre, .content ul, .content p, .content-separator, .footer {
         width: 90%;
     }
 
+    .content .sourceCode {
+
+    }
+
+    .header {
+      width: 100%;
+    }
+
     .blog-index-yearly-index {
         margin-left: 0;
     }
@@ -449,10 +525,18 @@ table {
         -webkit-print-color-adjust: exact;
     }
 
-    .content, .content-separator, .footer {
+    .content pre, .content ul, .content p, .content-separator, .footer {
         width: 90%;
     }
 
+    .content .sourceCode {
+
+    }
+
+    .header {
+      width: 100%;
+    }
+
     .nav, .rss-icon, .atom-icon, .cc-icon, #archival-notice {
         display: none;
     }
diff --git a/source/template.html b/source/template.html
index 543142f2..986ce492 100644
--- a/source/template.html
+++ b/source/template.html
@@ -40,15 +40,16 @@ $endif$
               ░░ ░░░░░   ░░     ░░░         ░░   ░░░░░ ░░
       </code></pre></div></a>
     <nav class="nav">
-      <a class="nav-title" href="/" title="Home"><!--blog title--></a>
-      -- generate menu here --
-      <hr>
-      <ul>
-        <li><a href="/blog">blog</a></li>
-        <li><a href="/notes">notes</a></li>
-        <li><a href="https://shaarli.neodarz.net/">shaarli</a></li>
-        <li><a href="https://git.neodarz.net">code</a></li>
-      </ul>
+      <div class="lia-border">
+        -- generate menu here --
+        <hr>
+        <ul>
+          <a href="/blog" class='lia'><li><span class='left-lia'></span><span class='center-lia'>blog</span><span class='right-lia'></span></li></a>
+          <a href="/notes" class='lia'><li><span class='left-lia'></span><span class='center-lia'>notes</span><span class='right-lia'></span></a>
+          <a href="https://shaarli.neodarz.net/" class='lia'><li><span class='left-lia'></span><span class='center-lia'>shaarli</span><span class='right-lia'></span></a>
+          <a href="https://git.neodarz.net" class='lia'><li><span class='left-lia'></span><span class='center-lia'>code</span><span class='right-lia'></span></a>
+        </ul>
+      </div>
     </nav>
     <div class="bodya">