CSS + HTML change

app.py

@@ -13,8 +13,9 @@ Application is kept compact, with all its core in a single file.
 #### IMPORTS ####
 
 from flask import (
-    Flask, Markup, abort, flash, g, jsonify, make_response, redirect, request,
+    Flask, abort, flash, g, jsonify, make_response, redirect, request,
     render_template, send_from_directory)
+from markupsafe import Markup
 from flask_login import LoginManager, login_user, logout_user, current_user, login_required
 from flask_wtf import CSRFProtect
 #from flask_arrest import RestBlueprint, serialize_response
@@ -1005,7 +1006,15 @@ def calendar_month(y, m):
         (Page.calendar < datetime.date(y+1 if m==12 else y, 1 if m==12 else m+1, 1))
     ).order_by(Page.calendar)
 
-    return render_paginated_template('month.jinja2', "notes", d=datetime.date(y, m, 1), notes=notes, advance_calendar=_advance_calendar)
+    #toc_q = Page.select(fn.Month(Page.calendar).alias('month'), fn.Count(Page.id).alias('n_notes')).where(
+    #    (datetime.date(y, 1, 1) <= Page.calendar) &
+    #    (Page.calendar < datetime.date(y+1, 1, 1))
+    #).group_by()
+    toc = {}
+    #for i in toc_q:
+    #    toc[i.month] = i.n_notes
+
+    return render_paginated_template('month.jinja2', "notes", d=datetime.date(y, m, 1), notes=notes, advance_calendar=_advance_calendar, toc=toc)
 
 @app.route('/history/revision/<int:revisionid>/')
 def view_old(revisionid):

i18n/salvi.fr.json

@@ -5,6 +5,9 @@
         "latest-notes": "Dernières notes",
         "latest-uploads": "Derniers téléchargements",
         "new-note": "Créer un note",
-        "upload-file": "Télécharger une image"
+        "upload-file": "Télécharger une image",
+        "easter-date-calc": "Calculer la date de Pâques",
+        "easter": "Pâques",
+        "other-dates": "Autres dates"
     }
 }

static/style.css

@@ -69,6 +69,7 @@ body{font-family:sans-serif;background-color:var(--bg-main); color: var(--fg-mai
 .nl-prev,.nl-next{text-align:center}
 .nl-placeholder {font-style: italic; text-align: center;}
 .nl-pagination {text-align: center; color: var(--fg-alt)}
+.nl-item {padding: 12px; border: 1px solid gray; border-radius: 12px; box-shadow: 2px 2px 2px gray; background-color: var(--bg-alt);}
 input{border:0;border-bottom:3px solid var(--border);font:inherit;color:var(--fg-main);background-color:transparent}
 input:focus{color:var(--fg-sharp);border-bottom-color:var(--border-sharp)}
 input.error{border-bottom-color:var(--btn-error)}

templates/administration.jinja2

@@ -3,9 +3,10 @@
 {% block title %}Administrative tools — {{ app_name }}{% endblock %}
 
 {% block content %}
-<h1>Administrative tools</h1>
+<main>
+  <h1>Administrative tools</h1>
 
-<div class="inner-content">
+  <div class="inner-content">
     {% if current_user and current_user.is_admin %}
     <ul>
       <li>
@@ -21,5 +22,6 @@
     {% else %}
     <p>Administrative tools can be accessed by administrator users only.</p>
     {% endif %}
-</div>
+  </div>
+</main>
 {% endblock %}

templates/backlinks.jinja2

@@ -7,10 +7,11 @@
 {% endblock %}
 
 {% block content %}
-<h1 id="firstHeading">{{ p.title }}</h1>
+<main>
-<div class="preview-subtitle">{{ T('backlinks') }}</div>
+  <h1 id="firstHeading">{{ p.title }}</h1>
+  <div class="preview-subtitle">{{ T('backlinks') }}</div>
 
-<div class="inner-content">
+  <div class="inner-content">
     {% if backlinks %}
     <ul>
       {% for op in backlinks %}
@@ -22,9 +23,10 @@
     {% else %}
     <p class="placeholder">{{ T("backlinks-empty") }}</p>
     {% endif %}
-</div>
+  </div>
 
 
-<p>{{ T("back-to") }} <a href="{{ p.get_url() }}">{{ p.title }}</a>.</p>
+  <p>{{ T("back-to") }} <a href="{{ p.get_url() }}">{{ p.title }}</a>.</p>
+</main>
 {% endblock %}
 

templates/badrequest.jinja2

@@ -3,9 +3,11 @@
 {% block title %}Bad Request - {{ app_name }}{% endblock %}
 
 {% block content %}
-<h1>Bad request</h1>
+<main class="error-page">
+  <h1 id="firstHeading">Bad request</h1>
 
-<div class="inner-content">
+  <div class="inner-content">
     <p>You sent a request the server can’t understand. If you entered the URL manually please check your spelling and try again.</p>
-</div>
+  </div>
+</main>
 {% endblock %}

templates/calendar.jinja2

@@ -3,7 +3,7 @@
 {% block title %}Calendar – {{ app_name }}{% endblock %}
 
 {% block content %}
-<article>
+<main>
   <h1 id="firstHeading">{{ T('calendar') }}</h1>
 
   <div class="inner-content">
@@ -32,5 +32,5 @@
       </ul>
     </p>
   </div>
-</article>
+</main>
 {% endblock %}

templates/contributions.jinja2

@@ -7,9 +7,11 @@
 {% endblock %}
 
 {% block content %}
-<h1>Contributions of {{ u.username }}</h1>
+<main>
+  <h1 id="firstHeading">{{ u.username }}</h1>
+  <p class="preview-subtitle">Contributions</p>
 
-<div class="inner-content">
+  <div class="inner-content">
     <p class="nl-pagination">Showing results <strong>{{ page_n * 20 - 19 }}</strong> to <strong>{{ min(page_n * 20, total_count) }}</strong> of <strong>{{ total_count }}</strong> total.</p>
 
     <ul>
@@ -39,5 +41,6 @@
       <li class="nl-next"><a href="?page={{ page_n + 1 }}">Next page &raquo;</a></li>
       {% endif %}
     </ul>
-</div>
+  </div>
+</main>
 {% endblock %}

templates/forbidden.jinja2

@@ -3,9 +3,11 @@
 {% block title %}Access Denied - {{ app_name }}{% endblock %}
 
 {% block content %}
-<h1>Forbidden</h1>
+<main class="error-page">
+  <h1 id="firstHeading">Forbidden</h1>
 
-<div class="inner-content">
+  <div class="inner-content">
     <p>You don’t have permission to access this resource.</p>
-</div>
+  </div>
+</main>
 {% endblock %}

templates/history.jinja2

@@ -7,10 +7,11 @@
 {% endblock %}
 
 {% block content %}
-<h1 id="firstHeading">{{ p.title }}</h1>
+<main>
-<div class="preview-subtitle">Page history</div>
+  <h1 id="firstHeading">{{ p.title }}</h1>
+  <div class="preview-subtitle">Page history</div>
 
-<div class="inner-content">
+  <div class="inner-content">
     <ul>
     {% for rev in history %}
       <li>
@@ -33,7 +34,8 @@
       </li>
     {% endfor %}
     </ul>
-</div>
+  </div>
 
-<p>{{ T("back-to") }} <a href="{{ p.get_url() }}">{{ p.title }}</a>.</p>
+  <p>{{ T("back-to") }} <a href="{{ p.get_url() }}">{{ p.title }}</a>.</p>
+</main>
 {% endblock %}

templates/home.jinja2

@@ -3,9 +3,10 @@
 {% block title %}{{ T('homepage') }} - {{ app_name }}{% endblock %}
 
 {% block content %}
-<article class="homepage">
+<main class="homepage">
   <h1 id="firstHeading">{{ T('welcome').format(app_name) }}</h1>
 
+  <div class="inner-content">
     <div class="nl-new">
       <a href="/create/">
         <button class="submit-primary"><span class="material-icons">create</span> {{ T('new-note') }}</button>
@@ -18,7 +19,8 @@
     
     {% from "macros/nl.jinja2" import nl_list with context %}
     {{ nl_list(new_notes) }}
+  </div>
 
-</article>
+</main>
 
 {% endblock %}

templates/includes/nl_item.jinja2

@@ -1,3 +1,8 @@
+{# DEPRECATED #}
+{# Use "macros/nl.jinja2" instead. #}
+
+
+<div class="flash">DEPRECATED</div>
 <p class="nl-title">
   <a href="{{ n.get_url() }}" class="nl-title">{{ n.title }}</a>
 </p>

templates/internalservererror.jinja2

@@ -3,9 +3,11 @@
 {% block title %}% _ % - {{ app_name }}{% endblock %}
 
 {% block content %}
-<h1>Internal Server Error</h1>
+<main class="error-page">
+  <h1 id="firstHeading">Internal Server Error</h1>
 
-<div class="inner-content">
+  <div class="inner-content">
     <p>We’re sorry, an unexpected error occurred. Try refreshing the page.</p>
-</div>
+  </div>
+</main>
 {% endblock %}

templates/listrecent.jinja2

@@ -1,10 +1,12 @@
 {% extends "base.jinja2" %}
 
 {% block content %}
-<article>
+<main>
   <h1 id="firstHeading">Notes by date</h1>
 
+  <div class="inner-content">
     {% from "macros/nl.jinja2" import nl_list with context %}
     {{ nl_list(notes, page_n=page_n, total_count=total_count) }}
-</article>
+  </div>
+</main>
 {% endblock %}

templates/listtag.jinja2

@@ -3,17 +3,19 @@
 {% block title %}Notes tagged #{{ tagname }} - {{ app_name }}{% endblock %}
 
 {% block content %}
-<article>
+<main>
   <h1 id="firstHeading">#{{ tagname }}</h1>
   <div class="preview-subtitle">{{ T('notes-tagged') }}</div>
 
+  <div class="inner-content">
     {% if total_count > 0 %}
     {% from "macros/nl.jinja2" import nl_list with context %}
-  {{ nl_list(l, page_n=page_n, total_count=total_count, hl_tags=(tagname,)) }}
+    {{ nl_list(tagged_notes, page_n=page_n, total_count=total_count, hl_tags=(tagname,), other_url='tags/' + tagname) }}
     {% else %}
     <p class="nl-placeholder">{{ T('notes-tagged-empty') }}</p>
     {% endif %}
+  </div>
 
-</article>
+</main>
 
 {% endblock %}

templates/macros/nl.jinja2

@@ -1,6 +1,10 @@
 
+{#
+  Recommendations: Always import this macro with context,
+  otherwise it fails. It depends on a couple context-defined functions.
+#}
 
-{% macro nl_list(l, page_n=None, total_count=None, hl_tags=(), other_url='p/most_recent') %}
+{% macro nl_list(l, page_n=None, total_count=None, hl_tags=(), hl_calendar=None, other_url='p/most_recent') %}
 {% if page_n and total_count %}
 <p class="nl-pagination">
   Showing results <strong>{{ page_n * 20 - 19 }}</strong> to <strong>{{ min(page_n * 20, total_count) }}</strong>
@@ -13,6 +17,7 @@
   {% endif %}
   {% for n in l %}
   <li>
+    <article class="nl-item">
       <a href="{{ n.get_url() }}" class="nl-title">{{ n.title }}</a>
       <p class="nl-desc">{{ n.short_desc() }}</p>
       {% if n.tags %}
@@ -32,17 +37,24 @@
       {% if n.calendar %}
       <p class="nl-calendar">
         <span class="material-icons">calendar_today</span>
+        {% if hl_calendar and hl_calendar.y == n.calendar.y and hl_calendar.m == n.calendar.m %}
+        <strong>
+          <time datetime="{{ n.calendar.isoformat() }}">{{ n.calendar.strftime('%B %-d, %Y') }}</time>
+        </strong>
+        {% else %}
         <a href="/calendar/{{ n.calendar.year }}/{{ n.calendar.month }}">
           <time datetime="{{ n.calendar.isoformat() }}">{{ n.calendar.strftime('%B %-d, %Y') }}</time>
         </a>
+        {% endif %}
       </p>
       {% endif %}
+    </article>
   </li>
   {% endfor %}
 
   {% if page_n is none %}
   <li class="nl-next"><a href="/{{ other_url }}/">{{ T('show-all') }}</a></li>
-  {% elif page_n <= total_count // 20 %}
+  {% elif page_n <= (total_count - 1) // 20 %}
   <li class="nl-next"><a href="/{{ other_url }}/?page={{ page_n + 1 }}">Next page &raquo;</a></li>
   {% endif %}
 </ul>

templates/month.jinja2

@@ -3,42 +3,14 @@
 {% block title %}{{ d.strftime("%B %Y") }} – {{ app_name }}{% endblock %}
 
 {% block content %}
-<article>
+<main>
   <h1 id="firstHeading">{{ d.strftime("%B %Y") }}</h1>
 
+  <div class="inner-content">
     {% if total_count > 0 %}
-  <p class="nl-pagination">Showing results <strong>{{ page_n * 20 - 19 }}</strong> to <strong>{{ min(page_n * 20, total_count) }}</strong> of <strong>{{ total_count }}</strong> total.</p>
+    {% from "macros/nl.jinja2" import nl_list with context %}
+    {{ nl_list(notes, total_count=total_count, page_n=page_n, hl_calendar=d) }}
     
-  <ul class="nl-list">
-    {% for n in notes %}
-    <li>
-      <a href="{{ n.get_url() }}" class="nl-title">{{ n.title }}</a>
-      <p class="nl-desc">{{ n.short_desc() }}</p>
-      {% if n.tags %}
-      <p class="nl-tags">{{ T('tags') }}: 
-      {% for tag in n.tags %}
-        {% set tn = tag.name %}
-        <a href="/tags/{{ tn }}/" class="nl-tag">#{{ tn }}</a>
-      {% endfor %}
-      </p>
-      {% endif %}
-      {% if n.calendar %}
-      <p class="nl-calendar">
-        <span class="material-icons">calendar_today</span>
-        {% if n.calendar.year == d.year and n.calendar.month == d.month %}
-        <strong>
-          <time datetime="{{ n.calendar.isoformat() }}">{{ n.calendar.strftime('%B %-d, %Y') }}</time>
-        </strong>
-        {% else %}
-        <a href="/calendar/{{ n.calendar.year }}/{{ n.calendar.month }}">
-          <time datetime="{{ n.calendar.isoformat() }}">{{ n.calendar.strftime('%B %-d, %Y') }}</time>
-        </a>
-        {% endif %}
-      </p>
-      {% endif %}
-    </li>
-    {% endfor %}
-  </ul> 
     {% else %}
     <p class="nl-placeholder">{{ T('notes-month-empty') }}</p>
     {% endif %}
@@ -58,6 +30,21 @@
     </div>
 
     <p>{{ T('back-to') }} <a href="/calendar">{{ T('calendar') }}</a></p>
-</article>
+  </div>
-
+</main>
+{% endblock %}
+
+{% block toc %}
+<nav class="toc">
+  <h3>{{ d.year }}</h3>
+
+  <ul>
+    {#% for i in range(1, 13) %}
+    <li>
+      <a href="/calendar/{{ d.year }}/{{ i }}">{{ nd.strftime("%B") }}</a>
+      <strong>({{ toc[i] }})</strong>
+    </li>
+    {% endfor %#}
+  </ul>
+</nav>
 {% endblock %}

templates/notfound.jinja2

@@ -3,9 +3,11 @@
 {% block title %}{{ T('not-found') }} - {{ app_name }}{% endblock %}
 
 {% block content %}
-<h1>{{ T('not-found') }}</h1>
+<main class="error-page">
+  <h1 id="firstHeading">{{ T('not-found') }}</h1>
 
-<div class="inner-content">
+  <div class="inner-content">
     <p>{{ T('not-found-text-1') }} <strong>{{ request.path }}</strong> {{ T('not-found-text-2') }}.</p>
-</div>
+  </div>
+</main>
 {% endblock %}

templates/search.jinja2

@@ -3,9 +3,10 @@
 {% block title %}{% if q %}Search results for "{{ q }}"{% else %}Search{% endif %} - {{ app_name }}{% endblock %}
 
 {% block content %}
-<h1>Search</h1>
+<main>
+  <h1>Search</h1>
 
-<div class="inner-content">
+  <div class="inner-content">
     <form method="POST">
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
       <div class="search-wrapper">
@@ -22,12 +23,13 @@
     <h2>Search results for <em>{{ q }}</em></h2>
 
     {% from "macros/nl.jinja2" import nl_list with context %}
-  {{ nl_list(l, other_url=None) }}
+    {{ nl_list(results, other_url=None) }}
     {% elif q %}
     <h2>{{ T('search-no-results') }} <em>{{ q }}</em></h2>
     {% else %}
     <p>Please note that search queries do not search for page text.</p> 
     {% endif %}
-</div>
+  </div>
+</main>
 
 {% endblock %}

templates/upload.jinja2

@@ -1,11 +1,12 @@
 {% extends "base.jinja2" %}
 
 {% block content %}
-<h1>Upload new file</h1>
+<main>
+  <h1>Upload new file</h1>
 
-<p>Uploads are no more supported. Please use this syntax instead for external images: <code>![alt text](https://www.example.com/path/to/image.jpg)</code>.</p>
+  <p>Uploads are no more supported. Please use this syntax instead for external images: <code>![alt text](https://www.example.com/path/to/image.jpg)</code>.</p>
 
-<form method="POST" enctype="multipart/form-data">
+  <form method="POST" enctype="multipart/form-data">
     <div>
       <label for="name">Name: </label>
       <input type="text" id="name-input" name="name" required maxlength="256" disabled="">
@@ -17,5 +18,6 @@
     <div>
       <input type="submit" value="Upload" disabled="">
     </div>
-</form>
+  </form>
+</main>
 {% endblock %}