update posts drafts. Fix most css duplications. Simpolify layouts. Ad…

…d syntax highlighting for code embeds
Holusion · Feb 8, 2024 · 454ec85 · 454ec85
1 parent 3083628
commit 454ec85
Show file tree

Hide file tree

Showing 23 changed files with 1,042 additions and 613 deletions.
diff --git a/_config.yml b/_config.yml
@@ -1,6 +1,6 @@
 url: "https://ecorpus.eu"
 baseurl: ""
-title: "eThesaurus"
+title: "eCorpus"
 
 toc: true
 
@@ -14,6 +14,11 @@ defaults:
       type: "pages"
     values:
       layout: page
+  - scope:
+      path: ""
+      type: "posts"
+    values:
+      layout: post
   - scope:
       path: "fr"
     values:
@@ -22,11 +27,6 @@ defaults:
       path: "en"
     values:
       lang: "en"
-
-  - scope:
-      path: "*/items"
-    values:
-      layout: "item"
 
   - scope:
       path: "*/doc"

diff --git a/_data/nav.yml b/_data/nav.yml
@@ -7,6 +7,9 @@ index:
 doc/:
   fr: Documentation
   en: Documentation
+posts:
+  fr: Articles
+  en: Posts
 about:
   fr: eThesaurus
   en: eThesaurus
diff --git a/_includes/youtube.html b/_includes/youtube.html
@@ -3,57 +3,55 @@
 Usage :
 include youtube.html embed=##########
 {%endcomment%}
-<div style="width:100%; overflow:hidden;" class="media">
-  <div align="center" class="youtube-video ratio ratio-16x9" data-embed="{{include.embed}}" >
-    <div class="play-button">
-    </div>
-    <script defer>
-      (function(){ //Use an anonymous function to prevent poluting the global space
-        var embed = '{{include.embed}}';
-        var video = document.querySelector("[data-embed='"+embed+"']");
+<div class="media ratio ratio-16x9 youtube-video" data-embed="{{include.embed}}" >
+  <div class="play-button">
+  </div>
+  <script defer>
+    (function(){ //Use an anonymous function to prevent poluting the global space
+      var embed = '{{include.embed}}';
+      var video = document.querySelector("[data-embed='"+embed+"']");
 
-        // Load the image asynchronously
-        youtube_thumbnails = [];
-        youtube_thumbnails.push(
-        new Promise ( (resolve, reject) => {
-          var image = new Image();
-          image.src =  "https://img.youtube.com/vi/"+ embed +"/maxresdefault.jpg";
-          image.addEventListener( "load", function() {resolve(image);});
-          image.addEventListener("error", function(e){console.warn(e)});
-        })
-      );
-        //load fallback image
-        youtube_thumbnails.push(
-        new Promise ( (resolve, reject) => {
-          var image_fallback = new Image();
-          image_fallback.src =  "https://img.youtube.com/vi/"+ embed +"/hqdefault.jpg";
-          image_fallback.addEventListener( "load", function() {resolve(image_fallback);})
-        }))
+      // Load the image asynchronously
+      youtube_thumbnails = [];
+      youtube_thumbnails.push(
+      new Promise ( (resolve, reject) => {
+        var image = new Image();
+        image.src =  "https://img.youtube.com/vi/"+ embed +"/maxresdefault.jpg";
+        image.addEventListener( "load", function() {resolve(image);});
+        image.addEventListener("error", function(e){console.warn(e)});
+      })
+    );
+      //load fallback image
+      youtube_thumbnails.push(
+      new Promise ( (resolve, reject) => {
+        var image_fallback = new Image();
+        image_fallback.src =  "https://img.youtube.com/vi/"+ embed +"/hqdefault.jpg";
+        image_fallback.addEventListener( "load", function() {resolve(image_fallback);})
+      }))
 
-        //If maxresdefault quality is good enough go for it. else go to fallback
-        Promise.all(youtube_thumbnails).then( result => {
-          image = result[0]
-          image_fallback = result[1]
-          if (image.width>600) {
-            video.appendChild(image)
-          } else {
-            video.appendChild(image_fallback)
-          }
+      //If maxresdefault quality is good enough go for it. else go to fallback
+      Promise.all(youtube_thumbnails).then( result => {
+        image = result[0]
+        image_fallback = result[1]
+        if (image.width>600) {
+          video.appendChild(image)
+        } else {
+          video.appendChild(image_fallback)
         }
-      );
+      }
+    );
 
 
-        video.addEventListener("click", function(){
-          var iframe = document.createElement( "iframe" );
-          iframe.className = "ratio";
-          iframe.setAttribute( "frameborder", "0" );
-          iframe.setAttribute( "allowfullscreen", "" );
-          iframe.setAttribute("allow", "autoplay; encrypted-media; picture-in-picture");
-          iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ embed +"?rel=0&showinfo=0&autoplay=1");
-          video.innerHTML = "";
-          video.appendChild(iframe);
-        })
-      })()
-    </script>
-  </div>
+      video.addEventListener("click", function(){
+        var iframe = document.createElement( "iframe" );
+        iframe.className = "ratio";
+        iframe.setAttribute( "frameborder", "0" );
+        iframe.setAttribute( "allowfullscreen", "" );
+        iframe.setAttribute("allow", "autoplay; encrypted-media; picture-in-picture");
+        iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ embed +"?rel=0&showinfo=0&autoplay=1");
+        video.innerHTML = "";
+        video.appendChild(iframe);
+      })
+    })()
+  </script>
 </div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
-<html lang="{{ page.lang | default: 'en' }}">
+{%- assign lang = page.lang | default: "fr" -%}
+<html lang="{{lang}}">
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta charset="utf-8">
@@ -55,8 +56,8 @@
         <button type="button" class="hidden">
           <span>Toggle navigation</span>
         </button>
-        <a href="/{{page.lang | default: "fr" }}/" aria-label="ecorpus logo">
-          <h1>eCorpus</h1>
+        <a href="/{{ lang }}/" class="header-brand" aria-label="ecorpus logo">
+          eCorpus
         </a>
         <div class="img-header">
           <img src="/assets/img/img-bandeau-ecorpus2.png" alt="plaque de Gédéon et la toison">
@@ -67,7 +68,7 @@ <h1>eCorpus</h1>
         <ul role="menu" class="nav-group">
           {%- for item in site.data.nav -%}
           <li class="nav-item">
-            <a href="/{{ page.lang | default: "fr" }}/{{ item[0] }}">{{ item[1][page.lang] }}</a>
+            <a href="/{{ lang }}/{{ item[0] }}">{{ item[1][page.lang] }}</a>
           </li>
           {%- endfor -%}
         </ul>
@@ -81,7 +82,7 @@ <h1>eCorpus</h1>
     <footer>
       <nav id="navbar-bottom" role="navigation">
         <div class="alignement-footer">
-            <a class="alignement-footer" style="text-decoration: none;" xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/Holusion/eThesaurus" rel="dct:source">
+            <a class="alignement-footer" style="text-decoration: none;" xmlns:dct="http://purl.org/dc/terms/" href="https://github.com/Holusion/eCorpus" rel="dct:source">
               <svg xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M15.22 4.97a.75.75 0 0 1 1.06 0l6.5 6.5a.75.75 0 0 1 0 1.06l-6.5 6.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734L21.19 12l-5.97-5.97a.75.75 0 0 1 0-1.06Zm-6.44 0a.75.75 0 0 1 0 1.06L2.81 12l5.97 5.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215l-6.5-6.5a.75.75 0 0 1 0-1.06l6.5-6.5a.75.75 0 0 1 1.06 0Z"/></svg>
               &nbspon&nbsp
               <svg xmlns="http://www.w3.org/2000/svg" style="fill:currentColor" width="45" height="16" viewBox="0 0 45 16"><path d="M8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17Zm35.85 2.33c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v3.77s.82-.53 2.02-.53l-.01-.02c1.2 0 2.97.45 2.97 3.88ZM27.68 2.43c.09 0 .17.08.17.17v11.11c0 .09-.08.17-.17.17h-2.13c-.09 0-.17-.08-.17-.17l.02-4.75h-3.31v4.75c0 .09-.08.17-.17.17h-2.13c-.08 0-.17-.08-.17-.17V2.6c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v4.09h3.31V2.6c0-.09.08-.17.17-.17Zm8.26 3.64c.11 0 .19.08.19.17l-.02 7.47c0 .09-.06.17-.17.17H34.6c-.07 0-.14-.04-.16-.09-.03-.06-.08-.45-.08-.45s-1.13.77-2.52.77c-1.69 0-2.92-.55-2.92-2.75V6.25c0-.09.08-.17.17-.17h2.14c.09 0 .17.08.17.17V11c0 .75.22 1.09.97 1.09s1.3-.39 1.3-.39V6.26c0-.11.06-.19.17-.19Zm-17.406 5.971h.005a.177.177 0 0 1 .141.179v1.5c0 .07-.03.14-.09.16-.1.05-.74.22-1.27.22-1.16 0-2.86-.25-2.86-2.69V8.13h-1.11c-.09 0-.17-.08-.17-.19V6.58c0-.08.05-.15.13-.17.07-.01 1.16-.28 1.16-.28V3.96c0-.08.05-.13.14-.13h2.16c.09 0 .14.05.14.13v2.11h1.59c.08 0 .16.08.16.17v1.7c0 .11-.07.19-.16.19h-1.59v3.131c0 .47.27.83 1.05.83.247 0 .481-.049.574-.05ZM12.24 6.06c.09 0 .17.08.17.17v7.37c0 .18-.05.27-.25.27h-1.92c-.17 0-.3-.07-.3-.27V6.26c0-.11.08-.2.17-.2Zm29.99 3.78c0-1.81-.73-2.05-1.5-1.97-.6.04-1.08.34-1.08.34v3.52s.49.34 1.22.36c1.03.03 1.36-.34 1.36-2.25ZM11.19 2.68c.75 0 1.36.61 1.36 1.38 0 .77-.61 1.38-1.36 1.38-.77 0-1.38-.61-1.38-1.38 0-.77.61-1.38 1.38-1.38Zm7.34 9.35v.001l.01.01h-.001l-.005-.001v.001c-.009-.001-.015-.011-.024-.011Z"/></svg>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -0,0 +1,8 @@
+---
+layout: page
+---
+
+<h1>{{page.title}}</h1>
+<article class="post-body">
+  {{content}}
+</article>
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -0,0 +1,20 @@
+
+//Colors
+$backgroundColor: #ececec;
+$bodyColor: #000000;
+$bodyFont: 'Open Sans',Roboto,sans-serif;
+$serifFont: 'Noto Serif', serif;
+$darkgrey:#272727;
+$middlegrey:#444444;
+$middlegrey-shadow:rgba(68, 68, 68, 20%);
+$yellow:#E6B900;
+$yellow2:rgba(230, 185, 0, 70%);
+$yellow3:rgba(230, 185, 0, 30%);
+$orange:#EB5806;
+$rose: #e4197e;
+
+// Sizes
+$sidebar_width: 250px;
+$header_height: 150px;
+$navbar_height: 50px;
+$footer_height: 30px;