feat: Multiple: Pinned, default author, md fragments, css adjusts

.github/marmite.yaml

@@ -34,6 +34,7 @@ extra:
               crossorigin="anonymous"
               async>
       </script>
+default_author: rochacbruno
 authors:
   rochacbruno:
     name: Bruno Rocha

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

@@ -217,7 +217,11 @@ Content
     ```
     **important**: the above example shows the keys supported by the default theme.  
 
+**pinned**
 
+  : Boolean `true` or `false` indicating if content is pinned on top
+    of its stream page.
+  **default** false
 
 ## Media
 

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

@@ -4,6 +4,7 @@ slug: getting-started
 tags: docs
 banner_image: media/getting_started.jpg
 authors: rochacbruno
+pinned: true
 ---
 Learn how to create your blog with Marmite in minutes, you can start with zero-config 
 and then customize gradually later.
@@ -345,25 +346,55 @@ To enable this feature add to your `marmite.yaml`
 
 ```yaml
 enable_search: true
+search_title: Search
 ```
 
 ## Special pages and Fragments
 
 There are some contents that are considered **special** as those are 
-not regular posts or pages, right now there are 2:
+not regular posts or pages, right now there are:
 
-Hero
+Hero - `_hero.md`
 
   : A banner that shows as the first content in your home page  
     Marmite will look for a file named `_hero.md` within your content folder.
 
-404
+404 - `_404.md`
 
   : The page that will show for Not Found error  
     Marmite will look for a file named `_404.md` within your content folder.  
     if not found, marmite will generate a default.
 
 
+Footer - `_footer.md`
+
+  : The content of `_footer.md` will be shown on the footer of base template
+    this will override the contents of `marmite.yaml` `footer:` field 
+
+
+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"
+    ```
+
+Markdown Footer - `_markdown_footer.md`
+
+  : This file will be appended to the end of every markdown processed
+    You can include anything inside it, this is useful to add custom
+    callouts, messages, signatures to the end of contents.
+
+Markdown Header - `_markdown_header.md`
+
+  : This file will be prepended to the top of every markdown processed
+    You can include anything inside it, this is useful to add custom
+    callouts, messages, signatures to the end of contents.
+
+
 <figure>
   <figcaption>Hero Section Enabled</figcaption>
   <img src="./media/screenshots/hero.png" width="600">
@@ -472,6 +503,16 @@ body {
   <img src="./media/screenshots/custom.png" width="600">
 </figure>
 
+#### Customizing Content Width
+
+The content container is optimized for blogs, if you want to change the 
+width just add to the `custom.css`
+
+```css
+:root {
+   --pico-container-max-width: 1024px;
+}
+```
 
 #### Custom JS
 

example/content/_markdown_footer.md

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

example/content/_markdown_header.md

@@ -0,0 +1,4 @@
+<!-- This is hidden but here just for testing
+any content added on _markdown_header.md
+will be prepended to the top of every content.
+ -->

example/content/_references.md

@@ -0,0 +1,6 @@
+[^2]: Another footnote
+[Github]: <https://github.com/rochacbruno/marmite> "Marmite Github"
+
+<!-- _references.md is a file to gather all references together 
+this file is appended to every raw markdown.
+-->

example/content/customizing-templates.md

@@ -1,7 +1,6 @@
 ---
 date: 2024-10-18
 tags: docs, templates, theme, customization
-authors: rochacbruno
 title: Customizing Templates
 banner_image: media/what.jpg
 ---
@@ -77,6 +76,7 @@ back_links: [Content] or []
 card_image: str or None
 banner_image: str or None
 authors: [str] or []
+pinned: bool
 ```
 
 The `GroupedContent` is a map that when iterated returns a map of `name: [Content]`, this is available on global context,

example/content/markdown-format.md

@@ -147,18 +147,19 @@ on its list of back-links:
 
 ## Footnotes
 
-Here is a simple footnote[^1]. With some additional text after it.  
+Here is a simple footnote[^1]. With some[^2] additional text after it.  
 
-A reference[1] can also be hidden from footnotes.
+A reference[1] can also be just a link hidden from footnotes.
 
 ```markdown
-Here is a simple footnote[^1]. With some additional text after it.  
+Here is a simple footnote[^1]. With some[^2] additional text after it.  
 
-A reference[1] can also be hidden from footnotes.
+A reference[1] can also be just a link hidden from footnotes.
 ```
 And on the end of the file:
 ```markdown
 [^1]: My reference.
+[^2]: Another footnote
 [1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
 ```
 
@@ -592,4 +593,4 @@ Bye!
 
 
 [^1]: My reference.
-[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
+[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"

example/marmite.yaml

@@ -8,6 +8,7 @@ pagination: 6
 # archives_title: Archive
 # pages_title: pages
 # authors_title: Authors
+# search_title: Search
 
 # templates_path: templates
 # static_path: static
@@ -20,7 +21,7 @@ banner_image: media/og_image.jpg
 enable_search: true
 
 menu:
-  - ["About", "about.html"]
+  # - ["About", "about.html"]
   - ["Pages", "pages.html"]
   - ["Tags", "tags.html"]
   - ["Archive", "archive.html"]
@@ -31,6 +32,7 @@ menu:
 # https://docs.rs/chrono/latest/chrono/format/strftime/index.html
 default_date_format: "%A, %d %B %Y"
 
+default_author: rochacbruno
 authors:
   rochacbruno:
     name: Bruno Rocha

example/static/marmite.css

@@ -19,6 +19,8 @@
   --pico-typography-spacing-vertical: 1rem;
   --pico-typography-spacing-top: 1rem;
   --pico-form-element-background-color: var(--pico-background-color);
+  /* custom vars */
+  --pico-container-max-width: 894px;
 }
 
 [data-theme="light"],
@@ -83,15 +85,15 @@ blockquote {
 .header-menu {
   list-style: none;
   display: flex;
-  gap: 15px;
+  gap: 4px;
   position: relative;
 }
 
 .header-menu li {
   text-decoration: none;
-  padding: 8px 16px;
   color: var(--pico-color-slate-750);
   display: inline-block;
+  padding: 8px;
 }
 
 .header-menu .selected {
@@ -134,6 +136,11 @@ blockquote {
   position: relative;
 }
 
+.theme-toggle {
+  cursor: pointer;
+  color: var(--pico-menu)
+}
+
 #menu-toggle:focus {
   outline: none;
 }
@@ -147,46 +154,30 @@ blockquote {
   margin: 0 0;
   justify-content: flex-start;
   list-style: none;
-  gap: 8px;
+  gap: 2px;
 }
 
 .content-tags li {
-  padding: 8px 16px;
   border-radius: 4px;
-  margin: 4px 8px;
-  background-color: var(--pico-tag);
+  margin: 0;
   text-wrap: nowrap;
   position: relative;
-  padding: 4px 12px 4px 8px;
+  padding: 2px;
   border-radius: 4px;
-  background-color: var(--pico-tag);
   white-space: nowrap;
   list-style: none;
   display: inline-block;
   color: var( --pico-color-slate-750);
 }
 
-.content-tags li:before {
-  content: "";
-  position: absolute;
-  left: -14px;
-  top: 50%;
-  transform: translateY(-50%);
-  border-top: 16px solid transparent;
-  border-bottom: 16px solid transparent;
-  border-right: 16px solid var(--pico-tag);
+.content-tags li a {
+  color: var(--pico-primary);
 }
 
-.group-list .content-tags {
-  display: flex;
-  width: auto;
-  flex-direction: row;
-  margin: 0;
-  padding: 0;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 12px;
+.content-tags li::before {
+  content: "#";
+  border: 0;
+  color: var(--pico-secondary);
 }
 
 .tag-count {
@@ -197,6 +188,11 @@ blockquote {
   content: "";
 }
 
+.tag-group-title::before {
+  content: "#";
+  color: var(--pico-secondary);
+} 
+
 article footer {
   display: flex;
   justify-content: space-between;
@@ -265,6 +261,8 @@ pre:has(> code.language-mermaid) p {
 
 .hero article {
   overflow: auto;
+  font-size: initial;
+  padding: 8px;
 }
 
 /* Footer content */
@@ -368,7 +366,7 @@ pre:has(> code.language-mermaid) p {
 /* Close button styling */
 .marmite-close-button {
   position: absolute;
-  top: 1.2em;
+  top: 0.5em;
   right: 1em;
   background: transparent;
   border: none;
@@ -379,7 +377,7 @@ pre:has(> code.language-mermaid) p {
 
 /*  Banner img*/
 .content-banner-image {
-  height: 350px;
+  height: 200px;
   width: 100%;
   background-size: cover;
   background-position: center;
@@ -393,6 +391,15 @@ pre:has(> code.language-mermaid) p {
   margin-bottom: 20px;
 }
 
+.content-title-wrapper {
+  position: relative;
+}
+.content-title-wrapper .content-pin {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
 .content-title {
   margin-bottom: 10px;
 }
@@ -533,11 +540,14 @@ th {
 }
 
 select.colorscheme-toggle {
-  background: transparent;
+  /* background-color: var(--pico-card-background-color); */
+  background-color: transparent;
   border: none;
+  width: 150px;
+  padding: 0;
 }
 select.colorscheme-toggle option {
-  background-color: var(--pico-background-color);
+  background-color: var(--pico-card-background-color);
 } 
 
 /* ^ Any non-responsive code goes above here ^ */
@@ -622,6 +632,16 @@ select.colorscheme-toggle option {
   }
 
   .content-banner-image {
-    height: 200px;
+    height: 150px;
+  }
+}
+
+/* Ensure content width complains with readability recommendations */
+@media (1024px <=width <=3072px) {
+  .container {
+      max-width: var(--pico-container-max-width);
+  }
+  :root {
+      --pico-font-size: 118.75%;
   }
 }