Feat: add big-button plugin

pelicanconf.py

@@ -3,34 +3,35 @@
 from __future__ import unicode_literals
 import os
 import sys
+
 sys.path.append(os.curdir)
 from globalconf import *
 
-AUTHOR = 'Benjamin Bertrand'
-SITENAME = 'OpyTex'
-SITETITLE = 'OpyTex'
-SITESUBTITLE = "2021-2022"
-SITEURL = ''
+AUTHOR = "Benjamin Bertrand"
+SITENAME = "OpyTex"
+SITETITLE = "OpyTex"
+SITESUBTITLE = "2022-2023"
+SITEURL = ""
 
 CC_LICENSE_COMMERCIAL = True
 CC_LICENSE = True
 
-PATH = './content'
+PATH = "./content"
 
-TIMEZONE = 'Europe/Paris'
+TIMEZONE = "Europe/Paris"
 
-DEFAULT_LANG = 'fr'
+DEFAULT_LANG = "fr"
 
 # Uncomment following line if you want document-relative URLs when developing
-#RELATIVE_URLS = True
+# RELATIVE_URLS = True
 
 # Files places
-IGNORE_FILES = ['venv', '.git', 'tools']
+IGNORE_FILES = ["venv", ".git", "tools"]
 # Pages, articles and static
-#PAGE_PATHS = ['pages']
-ARTICLE_PATHS = ['.']
-STATIC_PATHS = ['.']
-INDEX_SAVE_AS = 'blog_index.html'
+# PAGE_PATHS = ['pages']
+ARTICLE_PATHS = ["."]
+STATIC_PATHS = ["."]
+INDEX_SAVE_AS = "blog_index.html"
 
 #
 USE_FOLDER_AS_CATEGORY = False
@@ -38,17 +39,18 @@ USE_FOLDER_AS_CATEGORY = False
 # Plugins
 PLUGIN_PATHS = ["plugins"]
 PLUGINS = [
-    'i18n_subsites',
+    "i18n_subsites",
     "always_modified",
     "tag_cloud",
-    'pdf-img',
+    "pdf-img",
+    "big-button",
 ]
 
 ALWAYS_MODIFIED = True
 
 # Mirror source structure
-PATH_METADATA = '(?P<path_no_ext>.*)\..*'
-ARTICLE_URL = ARTICLE_SAVE_AS = PAGE_URL = PAGE_SAVE_AS = '{path_no_ext}.html'
+PATH_METADATA = "(?P<path_no_ext>.*)\..*"
+ARTICLE_URL = ARTICLE_SAVE_AS = PAGE_URL = PAGE_SAVE_AS = "{path_no_ext}.html"
 
 # USE_FOLDER_AS_CATEGORY = True
 # DEFAULT_CATEGORY = "Autre"
@@ -56,7 +58,7 @@ ARTICLE_URL = ARTICLE_SAVE_AS = PAGE_URL = PAGE_SAVE_AS = '{path_no_ext}.html'
 # Readers
 READERS = {"html": None}
 # Everythings in french
-JINJA_ENVIRONMENT = {'extensions': ['jinja2.ext.i18n']}
+JINJA_ENVIRONMENT = {"extensions": ["jinja2.ext.i18n"]}
 # Default theme language.
 I18N_TEMPLATES_LANG = "en"
 # Your language.
@@ -78,7 +80,7 @@ DISPLAY_PAGES_ON_SIDE = False
 TOCTREE = True
 TAG_CLOUD = True
 
-#SITELOGO = ""
+# SITELOGO = ""
 LINKS = ()
 DEFAULT_PAGINATION = 10
 

plugins/big-button/__init__.py

@@ -0,0 +1 @@
+from .big_button import *

plugins/big-button/big_button.py

@@ -0,0 +1,66 @@
+# -*- coding: utf-8 -*-
+"""
+big_button tags for reStructuredText
+==============================
+This plugin allows you to use big_button tags from within reST documents.
+
+.. big_button::
+    :title: Title
+    :link: ""
+    :color: default
+
+    Description
+
+"""
+
+from __future__ import unicode_literals
+from docutils import nodes
+from docutils.parsers.rst import directives, Directive
+
+
+class BigButton(Directive):
+    optional_arguments = 0
+    final_argument_whitespace = True
+    has_content = True
+    required_arguments = 0
+    optional_arguments = 0
+    final_argument_whitespace = False
+    option_spec = {
+        "title": directives.unicode_code,
+        "link": directives.path,
+    }
+
+    def settings(self):
+        self.options['content'] = '\n'.join(self.content)
+
+        if not self.options.get('title'):
+            self.options['title'] = 0
+        if not self.options.get('link'):
+            self.options['link'] = 0
+
+    def html(self):
+        html = "<div class='button'>\n"
+        if self.options["link"]:
+            html += f"<a href={self.options['link']}>"
+        else:
+            html += f"<div class='nolink'>"
+        if self.options["title"]:
+            html += f"<h3> {self.options['title']}</h3>"
+        if self.content:
+            html += "<div class='content'>"
+            html += f"{self.options['content']}"
+            html += "</div>"
+        if self.options["link"]:
+            html += "</a>"
+        else:
+            html += "</div>"
+        html += "</div>"
+        return html
+
+    def run(self):
+        self.settings()
+        return [nodes.raw('', self.html(), format='html')]
+
+
+def register():
+    directives.register_directive("big_button", BigButton)

publishconf.py

@@ -11,7 +11,7 @@ sys.path.append(os.curdir)
 from pelicanconf import *
 
 # If your site is available via HTTPS, make sure SITEURL begins with https://
-SITEURL = 'https://opytex.org/enseignements/2021-2022/'
+SITEURL = 'https://opytex.org/enseignements/2022-2023/'
 RELATIVE_URLS = False
 
 FEED_ALL_ATOM = 'feeds/all.atom.xml'

theme/static/stylesheet/style.less

@@ -71,6 +71,41 @@ hr {
 
 img {
   max-width: 100%;
+  border: 2px solid @med-light-grey;
+  box-shadow: 0px 0px 10px @light-grey;
+}
+
+.button {
+    margin: 20px;
+    border: 3px solid @orange;
+    width: 250px;
+    height: 150px;
+    border-radius: 25px;
+    display: inline-flex;
+    vertical-align: top;
+    padding: 5px 15px;
+    * {
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        gap: 10px;
+    }
+    a {
+        width:100%;
+        height:100%;
+    }
+    .nolink {
+        width:100%;
+        height:100%;
+    }
+    h3 {
+        margin: 0px;
+    }
+
+}
+
+.button:hover {
+    background-color: @light-grey;
 }
 
 aside {
@@ -110,6 +145,11 @@ aside {
   }
 
   nav {
+      background-color: @navbar-bg;
+      h2 {
+          background-color: @navbar-bg;
+          margin-bottom: 0;
+      }
       ul {
           padding-inline-start: 0px;
           display: block;
@@ -117,7 +157,6 @@ aside {
       ul.toctree {
           li {
               a {
-                  background-color: @navbar-bg;
                   color: @navbar-text-color;
                   border: none;
               }
@@ -127,14 +166,16 @@ aside {
                   background-color: @navbar-toctree-l2-sel-bg;
                   color: @navbar-toctree-l2-sel-txt;
                   padding: 10px;
+                  border-left: solid 2px @orange;
               }
           }
           li.current{
               a {
                   background-color: @navbar-toctree-l1-sel-bg;
-                  border-bottom: solid 1px @light-grey;
-                  border-left: solid 2px @grey;
                   color: @navbar-toctree-l1-sel-txt;
+                  border-top: solid 1px @light-grey;
+                  border-bottom: solid 1px @light-grey;
+                  border-left: solid 2px @orange;
               }
               a:hover {
                   color: @orange;
@@ -166,13 +207,14 @@ aside {
 
   .tagcloud {
       h2 {
-          background-color: @sidebar-bg;
           margin-bottom: 0;
+          background-color: @sidebar-bg;
       }
 
       ul {
           list-style: none;
           padding: 0;
+          margin: 10px;
       }
 
       ul li {

theme/static/stylesheet/variables.less

@@ -4,6 +4,7 @@
 @white:  #ffffff;
 @grey: #333333;
 @light-grey:  #eeeeee;
+@med-light-grey: #d9d8d8;
 @med-grey:  #999999;
 @dark-grey: #242121;
 
@@ -20,7 +21,7 @@
 @link-hover-color: @light-orange;
 
 // Sidebar (aside)
-@sidebar-bg: @grey;
+@sidebar-bg: @dark-grey;
 @sidebar-text-color: @white;
 @sidebar-link-color: @white;
 @sidebar-link-hover-color: @light-grey;
@@ -28,8 +29,10 @@
 // NavBar
 @navbar-bg: @dark-grey;
 @navbar-text-color: @white;
-@navbar-toctree-l1-sel-bg: @dark-grey;
-@navbar-toctree-l1-sel-txt: @light-grey;
+
+@navbar-toctree-l1-sel-bg: @med-light-grey;
+@navbar-toctree-l1-sel-txt: @grey;
+
 @navbar-toctree-l2-bg: @med-grey;
 @navbar-toctree-l2-txt: @grey;
 @navbar-toctree-l2-sel-bg: @light-grey;

theme/templates/partial/toctree.html

@@ -1,4 +1,5 @@
 <ul class="toctree">
+    <h2>Niveaux</h2>
     {% for cat, articles in categories|sort %}
     {% if (article and article.category == cat) or category == cat %}
     <li class="toctree-l1 current"><a href="{{ SITEURL }}/{{ cat.url }}">{{ cat | upper }}</a>