feat: author and multi author support

fix #83

example/content/2024-10-24-getting-started.md

@@ -4,6 +4,7 @@ slug: getting-started
 tags: docs
 extra:
   mermaid: true
+authors: rochacbruno
 ---
 Learn how to create your blog with Marmite in minutes, you can start with zero-config 
 and then customize gradually later.

example/content/markdown-format.md

@@ -4,19 +4,25 @@ date: 2024-10-17 12:00:01
 slug: markdown-format
 description: The content here accepts any valid CommonMark or Github Flavoured markdown and some GFM extensions.
 tags: docs, markdown, Common Mark, GFM
+authors: rochacbruno,karlamagueta
 extra:
   math: true
   mermaid: true
-  mermaid_theme: neutral
+  mermaid_theme: default
 ---
 
-# Writing content in Markdown
+The content on Marmite accepts any valid `CommonMark` or **Github** _Flavoured_ markdown
+and some `GFM` extensions, Marmite also does post processing of HTML to support features such as 
+back-links and Obsidian links.
 
-The content here accepts any valid `CommonMark` or **Github** _Flavoured_ markdown
-and some `GFM` extensions.
+### Paragraphs and formatting
 
 Simple paragraph and usual formatting like **bold**, __underline__, *italic*
-and also all sorts of formatting elements.
+and also all sorts of formatting elements, as follows.
+
+```markdown
+**bold**, __underline__, *italic*
+```
 
 ### Strike-through
 

example/marmite.yaml

@@ -25,6 +25,21 @@ menu:
   - ["Github", "https://github.com/rochacbruno/marmite"]
 
 default_date_format: "%A, %d %B"
+
+authors:
+  rochacbruno:
+    name: Bruno Rocha
+    avatar: https://github.com/rochacbruno.png
+    bio: Marmite Maintainer
+    links:
+      - ["Fediverse", "https://go.rocha.social/@bruno"]
+      - ["Github", "https://github.com/rochacbruno"]
+      - ["Linkedin", "https://www.linkedin.com/in/rochacbruno/"]
+      - ["Links", "https://bruno.rocha.social"]
+  karlamagueta:
+    name: Karla Magueta
+    avatar: https://github.com/karlamagueta.png
+
 # extra data for template customization
 # extra:
 #  foo: bar

example/static/marmite.css

@@ -207,7 +207,11 @@ article footer {
 }
 
 pre:has(> code.language-mermaid) {
-  background-color: transparent;
+  background-color: #fff;
+}
+
+pre:has(> code.language-mermaid) p {
+  color: revert;
 }
 
 /* Search */
@@ -384,4 +388,226 @@ pre:has(> code.language-mermaid) {
   .search-magnifier {
     display: none;
   }
-}
+}
+
+.content-title {
+  margin-bottom: 10px;
+}
+.content-title h1 {
+  margin: 0;
+}
+
+.content-authors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-left: 8px;
+}
+
+.content-authors img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+
+.content-authors p {
+  margin: 0;
+}
+
+.content-authors ul {
+  list-style: none;
+  padding: 0;
+  margin-top: revert;
+}
+
+.content-authors li {
+  display: flex;
+  align-items: center;
+}
+
+td, th {
+	padding: calc(var(--pico-spacing)/ 2) var(--pico-spacing);
+	border: var(--pico-border-width) solid var(--pico-table-border-color);
+	background-color: var(--pico-background-color);
+	color: var(--pico-color);
+	font-weight: var(--pico-font-weight);
+	/* text-align: left; */
+	text-align: start;
+}
+
+
+/* <div class="hero author-hero">
+    <article>
+    <h1>{{author.name}}</h1>
+    <img src="{{ author.avatar }}" alt="{{ author.name }}" class="avatar" align="left">
+    <p>{{author.bio}}</p>
+    {% if author.links %}
+    <ul>
+        {% for link in author.links %}
+        <li><a href="{{link.1}}">{{link.0}}</a></li>
+        {% endfor %}
+    {% endif %}
+    </article>
+</div> */
+
+/* .author-hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  margin: 20px 0;
+}
+
+.author-hero h1 {
+  margin-bottom: 20px;
+}
+
+.author-hero article {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.author-hero img.avatar {
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  margin-bottom: 20px;
+}
+
+.author-hero p {
+  margin-bottom: 20px;
+}
+
+.author-hero ul {
+  display: flex;
+  gap: 10px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.author-hero ul li {
+  display: inline;
+}
+
+.author-hero ul li a {
+  text-decoration: none;
+  color: var(--pico-color-azure-550);
+  transition: color 0.3s ease;
+}
+
+.author-hero ul li a:hover {
+  color: var(--pico-color-azure-650);
+}
+
+@media (min-width: 768px) {
+  .author-hero article {
+    flex-direction: row;
+    align-items: flex-start;
+    text-align: left;
+  }
+
+  .author-hero img.avatar {
+    margin-right: 20px;
+    margin-bottom: 0;
+  }
+
+  .author-hero p {
+    flex: 1;
+  }
+
+  .author-hero ul {
+    justify-content: flex-start;
+  }
+} */
+
+
+
+/* 
+
+ <div class="hero author-hero">
+            <article>
+            <h1>{{author.name}}</h1>
+            <div class="author-hero-image">
+                <img src="{{ author.avatar }}" alt="{{ author.name }}" class="avatar">
+            </div>
+            <div class="author-hero-bio">
+                <p>{{author.bio}}</p>
+            </div>
+            {% if author.links %}
+            <div class="author-hero-links">
+                <ul>
+                    {% for link in author.links %}
+                    <li><a href="{{link.1}}">{{link.0}}</a></li>
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+            </article>
+        </div>
+*/
+.author-hero {
+  padding: 20px;
+}
+
+.author-hero article {
+  display: grid;
+  grid-template-areas:
+    "title title"
+    "image bio"
+    "links links";
+  gap: 20px;
+  grid-template-columns: auto 1fr;
+}
+
+.author-hero h1 {
+  grid-area: title;
+  margin: 0;
+}
+
+.author-hero-image {
+  grid-area: image;
+}
+
+.author-hero-image .avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+
+.author-hero-bio {
+  grid-area: bio;
+}
+
+.author-hero-links {
+  grid-area: links;
+}
+
+.author-hero-links ul {
+  display: flex;
+  gap: 15px;
+  padding: 0;
+  list-style: none;
+}
+
+.author-hero-links ul li{
+  list-style: none;
+}
+
+.author-hero-links a {
+  color: var(--pico-color-azure-550);
+}
+
+@media (max-width: 768px) {
+  .author-hero article {
+    grid-template-areas:
+      "title"
+      "image"
+      "bio"
+      "links";
+    grid-template-columns: 1fr;
+    text-align: center;
+  }
+}
+

example/templates/content.html

@@ -37,12 +37,24 @@
 
 {% endblock %}
 
+
 {% block main %}
+
+{#
+<div>
+{% if content.card_image %} <img class="content-card-image" src="{{content.card_image}}" alt="{{content.title}}"> {% endif %}
+</div>
+#}
+
 <article>
-    <div class="content-html">{{ content.html | safe }}</div>
+
+    {% include "content_title.html" ignore missing %}
+
+    <div class="content-html">{{ content.html }}</div>
     {% if content.date %}
     <footer class="data-tags-footer">
-        <span class="content-date"> {{ content.date | date(format="%b %e, %Y") }}</span>
+        {% include "content_authors.html" ignore missing %}
+        {% include "content_date.html" ignore missing %}
         <ul class="content-tags overflow-auto">
         {% for tag in content.tags  %}
             <li><a href="./tag-{{ tag | trim | slugify }}.html">{{ tag }}</a></li>
@@ -81,7 +93,7 @@
 <script>
 var config = {
     startOnLoad:true,
-    theme: '{{content.extra.mermaid_theme | default(value="neutral") }}',
+    theme: '{{content.extra.mermaid_theme | default(value="default") }}',
     flowchart:{useMaxWidth:false, htmlLabels:true}
 };
 mermaid.initialize(config);

example/templates/content_authors.html

@@ -0,0 +1,15 @@
+{% if content.authors %}
+<div class="content-authors">
+    <ul>
+        {% for username in content.authors %}
+            {% set author = site.authors[username] %}
+            <li>
+                <a href="author-{{username}}.html">
+                    <img src="{{ author.avatar }}" alt="{{ author.name }}" class="avatar">
+                    {{ author.name }}
+                </a>
+            </li>
+        {% endfor %}
+    </ul>
+</div>
+{% endif %}

example/templates/content_date.html

@@ -0,0 +1,6 @@
+{# Calculate reading time #}
+{% set words = content.html | striptags | split(pat=' ') | length %}
+{% set reading_time = (words / 200) | round(method='ceil') %}
+<span class="content-date">
+    <small>{% if content.date %} {{ content.date | default_date_format }} {% endif %} - {{ reading_time }} minute{% if reading_time > 1 %}s{% endif %}</small>
+</span>

example/templates/content_title.html

@@ -0,0 +1,8 @@
+{# Display title and date if not starting with h1, else render the content using the user given title #}
+
+{% if content.html is not starting_with("<h1>") %}
+<div class="content-title">
+    <h1>{{content.title}}</h1> 
+    {% include "content_date.html" ignore missing %}
+</div>
+{% endif %}