Fix for header and OpenGraph metadata

README.md

@@ -1,11 +1,10 @@
-## simplyOpen ##
+\## simplyOpen ##
 
-## Screenshot ##
+## Screenshot
 
 ![screenshot](screenshot.png)
 
-
+## Options
-## Options ##
 
 Theme inspired by the mkdocs default theme, without all the datadealer (Google, Twitter, Facebook) stuff. [Federation Widget](https://github.com/LubuWest/federation-widget) in sidebar (works currently only with Friendica). Social links to Mastodon, Matrix, Friendica, Diaspora, Misskey,...
 EMail and License is displayed in the footer.
@@ -13,6 +12,7 @@ EMail and License is displayed in the footer.
 Javascript only used for Federation Widget.
 
 Configuration in pelicanconf.py:
+
 ```
     EMAIL='x@y.com'
 
@@ -42,7 +42,11 @@ Configuration in pelicanconf.py:
     # License (choose one)
     LICENSE = 'CC-BY-SA', 'CC-BY', 'CC-BY-NC', 'CC-BY-NC-SA', 'ALL RIGHTS RESERVED'
     
-    FEDERATION_TIMELINE = (('domain','https://loma.ml'),    # CORS headers must be set at the Friendica server, add the following to .htaccess
+    FEDERATION_TIMELINE = (('domain','https://loma.ml'),     # Activate Apache headers module:
+
+# a2enmod headers
+
+# CORS headers must be set at the Friendica server, add the following to .htaccess
                                                             # Header add Access-Control-Allow-Origin "https://myblog.com"
                                                             # Header add Access-Control-Allow-Methods: "GET"
 
@@ -52,7 +56,8 @@ Configuration in pelicanconf.py:
                          ('servertype','friendica'),)    # could be 'diaspora', 'friendica' or 'hubzilla'
 ```
 
-## Project documentation ##
+## Project documentation
+
 For displaying project Markdown files as website similar to mkdocs, additional parameters should be set:
 
 ```
@@ -71,9 +76,10 @@ SITEDESCRIPTION = 'Lorem ipsum dolor sit ..' # Additional text shown on the star
 DISPLAY_PAGES_ON_MENU = True # Markdown files in the 'pages' directory are shown as links in the header
 ```
 
-## Credits ##
+## Credits
+
 * Icons copyright by their respective owners
 
-## License ##
+## License
-In line with Federation Widget (https://git.friendi.ca/lubuwest/Federation-widget) this template is under the [WTF Public License](http://sam.zoy.org/wtfpl/COPYING).
 
+In line with Federation Widget (https://git.friendi.ca/lubuwest/Federation-widget) this template is under the [WTF Public License](http://sam.zoy.org/wtfpl/COPYING).

static/css/main.css

@@ -32,7 +32,6 @@ html {
 
 body {
   font-family: 'Verdana', sans-serif;
-  font-size: 16px;
   line-height: 150%;
   text-align: left;
   padding: 0;
@@ -45,7 +44,7 @@ header {
 
 [role=banner]{
   background-image: linear-gradient(#54b4eb, #2FA4E7 60%, #1d9ce5);
-  height: auto; /*50px;*/
+  height: auto;
   line-height: 50px;
   padding: 0 1%;
   position: fixed;
@@ -171,7 +170,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  font-size: 2em;
+  font-size: 1.8em;
   margin: 0.67em 0;
   padding: 0.7em 0 0.3em;
 }
@@ -267,38 +266,36 @@ ol.archive li .tags
 
 .social li {
   clear: both;
+  margin-bottom: 15px;
 }
 
-.social a {}
+.social a {
-
+    border-bottom: none;
-.social i { 
-  float: left;
-  margin-right: 3px;
-  padding-top: 4px;
 }
-.social a[id*='Buddycloud'] + i:before {content: url('../images/icons/buddycloud-18px.png'); }
+
-.social a[id*='Diaspora'] + i:before {content: url('../images/icons/Diaspora-18px.png'); }
+.social a[id*='Buddycloud']::before {content: url('../images/icons/buddycloud-18px.png'); margin-right: 5px; vertical-align: -15%; }
-.social a[id*='Friendica'] + i:before {content: url('../images/icons/friendica-18px.png'); }
+.social a[id*='Diaspora']::before {content: url('../images/icons/Diaspora-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Forgejo'] + i:before {content: url('../images/icons/forgejo-18px.png'); }
+.social a[id*='Friendica']::before {content: url('../images/icons/friendica-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Funkwhale'] + i:before {content: url('../images/icons/funkwhale-16.png'); }
+.social a[id*='Forgejo']::before {content: url('../images/icons/forgejo-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Gitea'] + i:before {content: url('../images/icons/gitea-18px.png'); }
+.social a[id*='Funkwhale']::before {content: url('../images/icons/funkwhale-16.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Github'] + i:before {content: url('../images/icons/github-18px.png'); }
+.social a[id*='Gitea']::before {content: url('../images/icons/gitea-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Gitlab'] + i:before {content: url('../images/icons/gitlab-18px.png'); }
+.social a[id*='Github']::before {content: url('../images/icons/github-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Gnusocial'] + i:before {content: url('../images/icons/gnusocial-18px.png'); }
+.social a[id*='Gitlab']::before {content: url('../images/icons/gitlab-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Hubzilla'] + i:before {content: url('../images/icons/hubzilla-16.png'); }
+.social a[id*='Gnusocial']::before {content: url('../images/icons/gnusocial-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Mastodon'] + i:before {content: url('../images/icons/mastodon-18px.png'); }
+.social a[id*='Hubzilla']::before {content: url('../images/icons/hubzilla-16.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Matrix'] + i:before {content: url('../images/icons/matrix-16.png'); }
+.social a[id*='Mastodon']::before {content: url('../images/icons/mastodon-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Misskey'] + i:before {content: url('../images/icons/misskey-18px.png'); }
+.social a[id*='Matrix']::before {content: url('../images/icons/matrix-16.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Movim'] + i:before {content: url('../images/icons/movim-18px.png'); }
+.social a[id*='Misskey']::before {content: url('../images/icons/misskey-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Peertube'] + i:before {content: url('../images/icons/peertube-18px.png'); }
+.social a[id*='Movim']::before {content: url('../images/icons/movim-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Pixelfed'] + i:before {content: url('../images/icons/pixelfed-18px.png'); }
+.social a[id*='Peertube']::before {content: url('../images/icons/peertube-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Pleroma'] + i:before {content: url('../images/icons/pleroma-18px.png'); }
+.social a[id*='Pixelfed']::before {content: url('../images/icons/pixelfed-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Plume'] + i:before {content: url('../images/icons/plume-16.png'); }
+.social a[id*='Pleroma']::before {content: url('../images/icons/pleroma-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='Pump.io'] + i:before {content: url('../images/icons/pumpio-18px.png'); }
+.social a[id*='Plume']::before {content: url('../images/icons/plume-16.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='RedMatrix'] + i:before {content: url('../images/icons/redmatrix-18px.png'); }
+.social a[id*='Pump.io']::before {content: url('../images/icons/pumpio-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[id*='XMPP'] + i:before {content: url('../images/icons/xmpp-18px.png'); }
+.social a[id*='RedMatrix']::before {content: url('../images/icons/redmatrix-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[href*='rss.xml']:before {content: url('../images/icons/feed-18px.png'); }
+.social a[id*='XMPP']::before {content: url('../images/icons/xmpp-18px.png'); margin-right: 5px; vertical-align: -15%;}
-.social a[href*='atom.xml']:before {content: url('../images/icons/feed-18px.png'); }
+.social a[href*='rss.xml']:before {content: url('../images/icons/feed-18px.png'); margin-right: 5px; vertical-align: -15%;}
+.social a[href*='atom.xml']:before {content: url('../images/icons/feed-18px.png'); margin-right: 5px; vertical-align: -15%;}
 
 
 /* Tag cloud */
@@ -447,7 +444,6 @@ background: white;
   
    body {
     min-width: 300px;
-    max-width: 600px;
    }
     
    .container {

templates/article.html

@@ -1,8 +1,9 @@
-{% extends "base.html" %}
+{% extends "base.html" %}
 {% block title %}{{ article.title }} - {{ SITENAME }}{% endblock %}
 {% block extra_meta %}
 <meta name="description" content="{{ article.summary|striptags }}">
-
+<meta property=og:description content="{{ article.summary|striptags }}" />
+<meta property=og:title content="{{ article.title }}" />
 {% endblock %}
 {% block content %}
 <article class="full">

templates/base.html

@@ -1,16 +1,18 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html lang="{{ HTML_LANG }}">	
+<html lang="{{ DEFAULT_LANG }}">
 <head>
 <meta charset="utf-8"/>
 <title>{% block title %}{{ SITENAME }}{%endblock%}</title>	
 <meta name="author" content="{{ AUTHOR }}">
-	
+<meta property=og:site_name content="{{ SITENAME }}" />
+<meta property=og:type content=article />
+<meta property=og:url content="{{ SITEURL }}" />
+<meta property=og:image content="{{ SITEURL }}/theme/images/pelican.png" />
 {% block extra_meta %}
 {% endblock %}
 
 <link rel="top" href="#" />
 <link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" />
-		
 {% block scripts %}
 {% if FRIENDICA_COMMENTS %}
     <script type="text/javascript">
@@ -55,9 +57,7 @@
     {% endfor %}
     </nav>
     {% endif %}
-
     </header>
-	
     <div class="wrapper">
     {% if CATEGORIES_ON_SIDEBAR =='left' %}
     <div role="main" class="left-sidebar">
@@ -100,7 +100,6 @@
     {% endfor %}
     </ul>
     {% endif %}
-
     {% if FEDERATION_TIMELINE %}
     <h2>News</h2>
     <div id="federation_timeline">
@@ -162,7 +161,5 @@
 </footer>
 
 </div>
-
-    
 </body>
 </html>

templates/category.html

@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% block title %}{{ category }} - {{ SITENAME }}{% endblock %}
-
+{% block extra_meta %}
+<meta property=og:title content="{{ category }}" />
+{% endblock %}
 {% block content %}
 
 <h1>Category: {{ category }}</h1>

templates/index.html

@@ -1,12 +1,17 @@
-{% extends "base.html" %}
+{% extends "base.html" %}
 {% block content_title %}{% endblock %}
 {℅ block meta_other %}
 <meta name="robots" content="noindex" />
-{℅ endblock %}
+<meta property=og:title content="{{ SITENAME }}" />
 {% if SITEDESCRIPTION %}
-  <p style="font-size: 1.25em">{{ SITEDESCRIPTION }}</p>
+<meta property=og:description content="{{ SITEDESCRIPTION }}" />
 {% endif %}
+{℅ endblock %}
+
 {% block content %}
+{% if SITEDESCRIPTION %}
+<p style="font-size: 1.3em">{{ SITEDESCRIPTION }}</p>
+{% endif %}
 {% for article in articles %}
     {% if loop.index == 1 %}
       <article>

templates/page.html

@@ -1,6 +1,8 @@
 {% extends "base.html" %}
 {% block title %}{{ page.title }}- {{ SITENAME }}{% endblock %}
-
+{% block extra_meta %}
+<meta property=og:title content="{{ page.title }}" />
+{% endblock %}
 {% block content %}
 
 <h1>{{ page.title }}</h1>