Pagination

.github/marmite.yaml

@@ -2,7 +2,7 @@ name: Marmite SSG
 tagline: Simply create a static blog from markdown files
 url: https://rochacbruno.github.io/marmite/
 menu: 
-  - ['Docs', 'tag/docs.html']
+  - ['Docs', 'tag-docs.html']
   - ['Contributors', 'contributors.html']
   - ['Tags', 'tags.html']
   - ['Github', 'https://github.com/rochacbruno/marmite/']

example/content/2024-10-19-what-is-marmite-static-site-generator.md

@@ -237,5 +237,5 @@ If you have ideas please open issues on the repository.
 
 That's all!
 
-[Read the Docs](./tag/docs.html)
+[Read the Docs](./tag-docs.html)
 

example/content/customizing-templates.md

@@ -7,14 +7,18 @@ tags: docs, templates, theme, customization
 Marmite uses [Tera](https://keats.github.io/tera/docs/#templates) as its template
 parser, the language is very similar to **Jinja** or **Twig**.
 
+> [!IMPORTANT]  
+> always link relative to the current path starting with `./`  
+> If absolute url is needed then use `{{ url_for(path="path", abs=true) }}` template function.
+
 Example on `templates/list.html`
 
 ```html
 {% extends "base.html" %}
 {% block main %}
   <div class="content-list">
   {%- for content in content_list %}
-    <h2 class="content-title"><a href="{{url_for(path=content.slug)}}.html">{{ content.title | capitalize }}</a></h2>
+    <h2 class="content-title"><a href="./{{content.slug}}.html">{{ content.title | capitalize }}</a></h2>
     <p class="content-excerpt">{{ content.html | striptags | truncate(length=100, end="...") }}</p>
   {%- endfor %}
   </div>
@@ -47,15 +51,18 @@ slug: str
 html: str
 tags: [str] or []
 date: DateTimeObject or None
+extra: {key: value}
 ```
 
-There are 4 templates inside the `templates` folder, each adds more data to context.
+There are 6 templates inside the `templates` folder, each adds more data to context.
 
 - base.html
   - All other templates inherits blocks from this one.
 - list.html
   - Renders `index.html`, `pages.html`, `tags.html`
-  - adds `title:str`, `content_list: [Content]`, `current_page: str`
+  - adds `title:str`, `content_list: [Content]`, 
+  - pagination: `current_page: str`, `next_page:str`, `previous_page:str`, 
+    `total_pages:int`, `current_page_number:int`, `total_content:int`
 - content.html
   - Renders individual content page `my-post.html`
   - adds `title:str`, `content: [Content]`, `current_page: str`
@@ -81,13 +88,22 @@ marmite will then copy the embedded static files to the static folder.
 
 ## URL 
 
-On templates use the `url_for` function to refer to urls.
+Prefer to use relative paths for URLS, examples:
+
+- `./my-blog-post.html`
+- `./static/style.css`
+- `./media/photo.png`
+
+This is recommended because **marmite** will always generate a **flat** html website,
+there is no subpaths.
+
+If you need absolute url use the `url_for` function to refer to urls.
 
 ```html
-{{ url_for(path='static/mystyle.css') }}
 {{ url_for(path='static/mystyle.css', abs=true) }}
 ```
 
+
 ## Extra data
 
 On site config `marmite.yaml` there is an arbitrary field `extra` that can be accessed

example/static/marmite.css

@@ -1,4 +1,8 @@
 /* https://picocss.com/docs */
+@font-face {
+    font-family: "Atkinson Hyperlegible";
+    src: url("./Atkinson-Hyperlegible-Regular-102.woff");
+}
 :root {
   --pico-typography-spacing-vertical: 1.5rem;
   --pico-font-family: "Atkinson Hyperlegible", sans-serif;
@@ -232,3 +236,7 @@ pre:has(> code.language-mermaid) {
     display: none;
   }
 }
+
+.pagination nav li a {
+  font-size: 2rem;
+}

example/static/marmite.js

@@ -56,8 +56,7 @@ const themeSwitcher = {
     // Apply scheme
     applyScheme() {
         document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
-        // staticBase is defined on content.html template
-        document.querySelector("#highlightjs-theme")?.setAttribute("href", `${staticBase}/github-${this.scheme}.min.css`);
+        document.querySelector("#highlightjs-theme")?.setAttribute("href", `./static/github-${this.scheme}.min.css`);
     },
 
     // Store scheme to local storage

example/templates/base.html

@@ -8,15 +8,9 @@
     <meta name="color-scheme" content="light dark" />
     {%- block head %}
     <title>{{ site.name }} | {{ title }}</title>
-    <link rel="stylesheet" type="text/css" href="{{url_for(path='/static/pico.min.css')}}">
-    <style>
-    @font-face {
-        font-family: "Atkinson Hyperlegible";
-        src: url("{{url_for(path='/static/Atkinson-Hyperlegible-Regular-102.woff')}}");
-    }
-    </style>
-    <link rel="stylesheet" type="text/css" href="{{url_for(path='/static/marmite.css')}}">
-    <link rel="stylesheet" type="text/css" href="{{url_for(path='/static/custom.css')}}">
+    <link rel="stylesheet" type="text/css" href="./static/pico.min.css">
+    <link rel="stylesheet" type="text/css" href="./static/marmite.css">
+    <link rel="stylesheet" type="text/css" href="./static/custom.css">
     {% endblock -%}
 </head>
 
@@ -27,7 +21,7 @@
                 <ul class="header-name">
                     <li>
                         <hgroup>
-                            <h2><a href="{{url_for(path='/')}}" class="contrast">{{ site.name }}</a></h2>
+                            <h2><a href="./index.html" class="contrast">{{ site.name }}</a></h2>
                             <p>{{ site.tagline }}</p>
                         </hgroup>
                     </li>
@@ -40,7 +34,7 @@ <h2><a href="{{url_for(path='/')}}" class="contrast">{{ site.name }}</a></h2>
                         {% if current_page and current_page == item.1 %}
                         <button class="menu-item active selected">{{item.0 | safe }}</button>
                         {% else %}
-                        <a href="{{ url_for(path=item.1) }}" class="menu-item secondary" {% if item.1 is starting_with("http") %}target="_blank"{% endif %}>{{ item.0 | safe }}</a>
+                        <a class="menu-item secondary" {% if item.1 is starting_with("http") %} href="{{item.1}}" target="_blank" {% else %} href="./{{item.1}}"{% endif %}>{{ item.0 | safe }}</a>
                         {% endif %}
                     </li>
                     {% endfor %}
@@ -63,8 +57,8 @@ <h2><a href="{{url_for(path='/')}}" class="contrast">{{ site.name }}</a></h2>
         </footer>
     </main>
     {%- block tail %}
-    <script src="{{url_for(path='/static/marmite.js')}}"></script>
-    <script src="{{url_for(path='/static/custom.js')}}"></script>
+    <script src="./static/marmite.js"></script>
+    <script src="./static/custom.js"></script>
     {% endblock -%}
 </body>
 

example/templates/content.html

@@ -2,11 +2,7 @@
 
 {% block head %}
 {{ super() }}
-<link rel="stylesheet" href="{{url_for(path='/static/github-light.min.css')}}" id="highlightjs-theme" />
-<script>
-   const staticBase = "{{ url_for(path='static')}}";
-</script>
-
+<link rel="stylesheet" href="./static/github-light.min.css" id="highlightjs-theme" />
 {%if content.extra.math %}
 <script type="text/x-mathjax-config">
   MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
@@ -26,22 +22,22 @@
         <span class="content-date"> {{ content.date | date(format="%v") }}</span>
         <ul class="content-tags overflow-auto">
         {% for tag in content.tags  %}
-            <li><a href="{{url_for(path='/tag/')}}{{ tag | trim | slugify }}.html">{{ tag }}</a></li>
+            <li><a href="./tag-{{ tag | trim | slugify }}.html">{{ tag }}</a></li>
         {% endfor %}
         </ul>
     </footer>
     {% endif %}
 </article>
 
 {% if site.extra.comments.source is defined and content.date %}
-   {%include "comments.html"%}
+   {%include "comments.html" ignore missing %}
 {% endif %}
 
 {% endblock %}
 
 {% block tail %}
 {{ super() }}
-<script src="{{url_for(path='/static/highlight.min.js')}}"></script>
+<script src="./static/highlight.min.js"></script>
 <script>
     hljs.highlightAll();
 </script>

example/templates/group.html

@@ -6,7 +6,7 @@
         <article class="group-list">
         <ul class="content-tags">
             {% for content in group_content -%}
-                <li><a href="{{url_for(path='/tag/')}}{{ content.0 | trim | slugify }}.html">{{ content.0 | capitalize }}</a><span class="tag-count"> [{{content.1}}]</span></li>
+                <li><a href="./tag-{{ content.0 | trim | slugify }}.html">{{ content.0 }}</a><span class="tag-count"> [{{content.1}}]</span></li>
             {%- endfor %}
         </ul>
         </article>

example/templates/list.html

@@ -8,15 +8,15 @@
         <div class="content-list">
             {%- for content in content_list %}
             <article class="content-list-item">
-                <h2 class="content-title"><a href="{{url_for(path=content.slug)}}.html">{{ content.title | capitalize }}</a></h2>
+                <h2 class="content-title"><a href="./{{content.slug}}.html">{{ content.title | capitalize }}</a></h2>
                 <p class="content-excerpt">{{ content.html | striptags | truncate(length=100, end="...") }}</p>
                 {% if content.date -%}
                 <footer class="">
                     <span class="content-date">{{ content.date | date(format="%v") }}</span>
                     {% if content.tags -%}
                     <ul class="content-tags overflow-auto">
                         {% for tag in content.tags | slice(end=3) -%}
-                            <li><a href="{{url_for(path='/tag/')}}{{ tag | trim | slugify }}.html">{{ tag }}</a></li>
+                            <li><a href="./tag-{{ tag | trim | slugify }}.html">{{ tag }}</a></li>
                         {%- endfor %}
                     </ul>
                     {%- endif %}
@@ -25,4 +25,7 @@ <h2 class="content-title"><a href="{{url_for(path=content.slug)}}.html">{{ conte
             </article>
             {%- endfor %}
         </div>
+        {% if total_pages is defined and total_pages > 1 %}
+          {% include "pagination.html" ignore missing %}
+        {% endif %}
 {% endblock %}

example/templates/pagination.html

@@ -0,0 +1,19 @@
+<div class="pagination">
+        <nav>
+            <ul>
+            {% if previous_page %}
+                <li><a href="{{previous_page}}"><strong>&larr;</strong></a></li>
+            {% endif %}
+            </ul>
+            <ul>
+
+                <li><small>{{current_page_number}}/{{total_pages}}</small></li>
+
+            </ul>
+            <ul>
+            {% if next_page %}
+                <li><a href="{{next_page}}"><strong>&rarr;</strong></a></li>
+            {% endif %}
+            </ul>
+        </nav>
+</div>

src/config.rs

@@ -13,7 +13,7 @@ pub struct Marmite {
     #[serde(default = "default_footer")]
     pub footer: String,
     #[serde(default = "default_pagination")]
-    pub pagination: u32,
+    pub pagination: usize,
 
     #[serde(default = "default_list_title")]
     pub list_title: String,
@@ -65,8 +65,8 @@ fn default_footer() -> String {
     r#"<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC-BY_NC-SA</a> | Site generated with <a href="https://github.com/rochacbruno/marmite">Marmite</a>"#.to_string()
 }
 
-fn default_pagination() -> u32 {
-    10
+fn default_pagination() -> usize {
+    10usize
 }
 
 fn default_list_title() -> String {