feat: allow customization of page fragments

example/content/2024-10-24-21-05-12-getting-started.md

@@ -321,18 +321,15 @@ marmite doesn't come with one as it is a static site and doesn't have the
 ability to handle dynamic data, instead, marmite allows you to plug external
 commenting system providers such as **disqus** or **github**.
 
-`myblog/marmite.yaml`
+`myblog/_comments.md`
 ```yaml
-extra:
-  comments:
-    title: Comments
-    source: |
-      <div id="#comment-box"></div>
-      <script> ... </script>
+##### Comments
+
+<div id="#comment-box"></div>
+<script> ... </script>
 ```
 
-The content of the `source` text depends on which commenting system you choose
-and how it is configured.
+The content depends on which commenting system you choose and how it is configured.
 
 Read more on [Enabling Comments] page to learn how to enable **Gisqus**, a
 commenting system based on Github discussions.
@@ -354,6 +351,39 @@ search_title: Search
 There are some contents that are considered **special** as those are 
 not regular posts or pages, right now there are:
 
+### Global fragments
+
+The Global fragments are written in **dynamic** markdown format and allows raw html 
+and also allows [Tera] expressions as those are rendered with global context.
+
+<details>
+<summary>Click here to see an example.</summary> 
+
+```html
+# Hello
+
+Markdown **here**
+
+<!-- Mind the blank space between markdown and HTML blocks 
+  Then on HTML blocks you can render the global context.
+-->
+<h3>Tags</h3>
+<ul>
+{%for tag, items in group(kind='tag') -%}
+<li>
+    <a href="tag-{{tag}}.html">{{tag}}</a>
+    <ul>
+        {% for item in items %}
+        <li><a href="{{item.slug}}.html">{{item.title}}</li>
+        {% endfor %}
+    </ul>
+</li>  
+{%- endfor %}
+</ul>
+``` 
+
+</details>
+
 Hero - `_hero.md`
 
   : A banner that shows as the first content in your home page  
@@ -372,14 +402,39 @@ Footer - `_footer.md`
     this will override the contents of `marmite.yaml` `footer:` field 
 
 
+Header - `_header.md`
+
+  : The content of `_header.md` will be shown on the header of base template
+    this will replace the Logo, Name, Tagline and menu entirely. 
+
+
+Comments - `_comments.md`
+
+  : The content of `_comments.md` will be rendered at the end of each post page,
+    If exits this will have precedence over the `extra.comments` on `marmite.yaml`
+
+
+Announce - `_announce.md`
+
+  : The content of `_announce.md` will be rendered on the very top of the website, globally
+    as a way to add alerts, annoucements and callouts.
+
+### Content Fragments
+
+The content fragments are **static** Markdown format and allows raw HTML.
+
+> [!IMPORTANT]  
+> [Tera] expressions are not rendered on these fragments because those are rendered
+> before the global context is built.
+
 References - `_references.md`
 
   : This file will be appended to the end of every markdown file
     processed, so it is possible to use the references and footnotes
     globally.
   **format**  
     ```markdown
-    [name]: <https://link> "description"
+    [name]: https://link
     ```
 
 Markdown Footer - `_markdown_footer.md`
@@ -607,14 +662,4 @@ You can ask **Marmite** related questions or suggest features on [Discussions] p
 
 ---
 
-𐚮 Marmite.
-
-[docs]: <./tag-docs.html> "Marmite Docs"
-[Enabling Comments]: <./enabling-comments.html> "Enabling Comments"
-[PicoCSS]: <https://picocss.com> "Pico CSS"
-[Customizing Templates]: <./customizing-templates.html> "Customizing Templates"
-[Tera]: <https://keats.github.io/tera/docs/#templates> "Tera Docs"
-[Discussions]: </~https://github.com/rochacbruno/marmite/discussions> "Github Discussions"
-[Markdown Formatting]: <./markdown-format.html> "Markdown Formatting"
-[Fuse]: <https://fusejs.io> "Fuse JS"
-[example config]: </~https://github.com/rochacbruno/marmite/blob/main/example/marmite.yaml> "Config Example"
+𐚮 Marmite.

example/content/_announce.md

@@ -0,0 +1 @@
+Give us a ☆ on [github]

example/content/_comments.md

@@ -0,0 +1,18 @@
+##### Comments
+
+<script src="https://giscus.app/client.js"
+        data-repo="rochacbruno/marmite"
+        data-repo-id="R_kgDONAKMvQ"
+        data-category="Comments"
+        data-category-id="DIC_kwDONAKMvc4CjmH_"
+        data-mapping="pathname"
+        data-strict="0"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="bottom"
+        data-theme="preferred_color_scheme"
+        data-lang="en"
+        data-loading="lazy"
+        crossorigin="anonymous"
+        async>
+</script>

example/content/_footer.md.example

@@ -0,0 +1,6 @@
+I customized the **footer**
+
+<div class="colorscheme-toggle-div">
+    colorscheme: <select name="colorscheme" class="colorscheme-toggle"><option value="default">default</option></select>
+    <span class="theme-toggle secondary" title="dark mode">&#9789;</span>
+</div>

example/content/_header.md.example

@@ -0,0 +1,17 @@
+
+<header class="header-content">
+<nav class="header-nav">
+
+
+- [**My Awesome Site**](index.html)  
+   My Site is great
+
+
+- [[About|about]]
+- [[Tags|tags]]
+- <span class="theme-toggle secondary" title="dark mode">&#9789;</span>
+
+
+</nav>
+
+</header>

example/content/_markdown_footer.md

@@ -1,5 +1,5 @@
 >>>
-Please consider giving a **star** on Marmite [Github] repository, that helps a lot!
+Please consider giving a ☆ on Marmite [Github] repository, that helps a lot!
 >>>
 
 <!-- Contents from _markdown_footer.md are appended to every content -->

example/content/_references.md

@@ -1,5 +1,15 @@
 [^2]: Another footnote
-[Github]: </~https://github.com/rochacbruno/marmite> "Marmite Github"
+[Github]: /~https://github.com/rochacbruno/marmite
+[docs]: <./tag-docs.html> "Marmite Docs"
+[Enabling Comments]: <./enabling-comments.html> "Enabling Comments"
+[PicoCSS]: <https://picocss.com> "Pico CSS"
+[Customizing Templates]: <./customizing-templates.html> "Customizing Templates"
+[Tera]: <https://keats.github.io/tera/docs/#templates> "Tera Docs"
+[Discussions]: </~https://github.com/rochacbruno/marmite/discussions> "Github Discussions"
+[Markdown Formatting]: <./markdown-format.html> "Markdown Formatting"
+[Fuse]: <https://fusejs.io> "Fuse JS"
+[example config]: </~https://github.com/rochacbruno/marmite/blob/main/example/marmite.yaml> "Config Example"
+
 
 <!-- _references.md is a file to gather all references together 
 this file is appended to every raw markdown.

example/content/enabling-comments.md

@@ -28,6 +28,10 @@ Hatsu
   Requires user to comment from a fediverse account.
 
 
+Altearnatives are Disqus and Commento.
+
+---
+
 For now the easiest system is Giscus.
 
 ## Setting up Giscus
@@ -40,9 +44,38 @@ For now the easiest system is Giscus.
 4. The Discussions feature must be [enabled](https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/enabling-or-disabling-github-discussions-for-a-repository) on your repository.
 
 
-Now go to https://giscus.app/ and find the **configuration** section.
+Now go to https://giscus.app/ and find the **configuration** section, configure ir and and Copy the `<script ... /script>`.
+
+
+Now there are 2 ways to add it to Marmite
+
+1. On a markdown fragment
+
+
+Add a `_comments.md` to your content folder.
+```markdown
+##### Comments
+
+<script src="https://giscus.app/client.js"
+        data-repo="rochacbruno/marmite"
+        data-repo-id="R_kgDONAKMvQ"
+        data-category="Comments"
+        data-category-id="DIC_kwDONAKMvc4CjmH_"
+        data-mapping="pathname"
+        data-strict="0"
+        data-reactions-enabled="1"
+        data-emit-metadata="0"
+        data-input-position="bottom"
+        data-theme="preferred_color_scheme"
+        data-lang="en"
+        data-loading="lazy"
+        crossorigin="anonymous"
+        async>
+</script>
+```
+
 
-Copy the `<script ... /script>` that was presented and put it in your `marmite.yaml`
+2. Alternatively, add to  `marmite.yaml` extra section.
 
 ```yaml
 extra:

example/static/marmite.css

@@ -50,6 +50,10 @@
   --pico-menu: #969eaf;
 }
 
+body > main {
+  padding-block: revert;
+}
+
 h1, h2, h3, h4, h5, h6 {
   --pico-typography-spacing-top: revert;
 }
@@ -84,6 +88,20 @@ details summary::after {
   transition: transform var(--pico-transition);
 }
 
+.announcement-wrapper {
+  background-color: var(--pico-color);
+  text-align: center;
+}
+
+.announcement a {
+  color: var(--pico-card-background-color);
+  text-decoration: underline;
+}
+
+.announcement, .announcement p {
+  color: var(--pico-background-color);
+}
+
 .header-name a.contrast {
   color: var(--pico-home);
 }

example/templates/base.html

@@ -47,7 +47,15 @@
     {% endblock %}
 </head>
 <body>
+    {% if announce is defined %}
+    <div class="container-fluid announcement-wrapper">
+        <div class="announcement">{{ announce }}</div>
+    </div>
+    {% endif %}
     <main class="container">
+        {% if header is defined %}
+           {{ header}}
+        {% else %}
         <header class="header-content">
             <nav class="header-nav">
                 <ul class="header-name">
@@ -91,9 +99,13 @@ <h2><a href="./" class="contrast">{{ site.name }}</a></h2>
             </div>
             {% endif %}
         </header>
+        {% endif %}
         <section class="main-content">
             {% block main -%}{%- endblock %}
         </section>
+        {% if footer is defined %}
+           {{ footer}}
+        {% else %}
         <footer class="footer-content grid">
             {{ site.footer | safe }}
             {% if site.extra.colorscheme_toggle %}
@@ -103,6 +115,7 @@ <h2><a href="./" class="contrast">{{ site.name }}</a></h2>
             </div>
             {% endif %}
         </footer>
+        {% endif %}
     </main>
     {%- block tail %}
     <script src="./static/marmite.js"></script>

example/templates/content.html

@@ -106,8 +106,10 @@
   {% endif %}
 {% endif %}
 
-{% if site.extra.comments.source is defined and content.date %}
-{%include "comments.html" ignore missing %}
+{% if comments is defined %}
+    <article>{{ comments }}</article>
+{% elif site.extra.comments.source is defined and content.date %}
+    {%include "comments.html" ignore missing %}
 {% endif %}
 
 {% endblock %}

src/markdown.rs

@@ -59,6 +59,9 @@ pub fn process_file(
 
 /// From the file content, extract the frontmatter and the markdown content
 /// then parse the markdown content to html and return a Content struct
+/// if the file is a fragment, the markdown content will be modified to include the references
+/// if is a regular content then content will be modified to include the `markdown_header`
+/// and `markdown_footer` and references
 pub fn get_content(
     path: &Path,
     fragments: Option<&HashMap<String, String>>,
@@ -70,7 +73,15 @@ pub fn get_content(
 
     let is_fragment = path.file_name().unwrap().to_str().unwrap().starts_with('_');
     let html = if is_fragment {
-        get_html(raw_markdown)
+        let references_path = path.with_file_name("_references.md");
+        if path != references_path && references_path.exists() {
+            let references_content = fs::read_to_string(path.with_file_name("_references.md"))
+                .map_err(|e| e.to_string())?;
+            let raw_markdown = format!("{raw_markdown}\n\n{references_content}");
+            get_html(&raw_markdown)
+        } else {
+            get_html(raw_markdown)
+        }
     } else if fragments.is_some() {
         let mut markdown_without_title = markdown_without_title.to_string();
         if let Some(header) = fragments.and_then(|f| f.get("markdown_header")) {
@@ -80,7 +91,7 @@ pub fn get_content(
             markdown_without_title.push_str(format!("\n{footer}").as_str());
         }
         if let Some(references) = fragments.and_then(|f| f.get("references")) {
-            markdown_without_title.push_str(format!("\n{references}").as_str());
+            markdown_without_title.push_str(format!("\n\n{references}").as_str());
         }
         get_html(&markdown_without_title)
     } else {