Meta Data Options

9 files changed, 148 insertions, 38 deletions

diff --git a/README.md b/README.md
index e94e835..bd33fb5 100644
--- a/README.md
+++ b/README.md
@@ -203,16 +203,22 @@ The following options should be under the `[extra]` in `config.toml`
 - `language_code` - Set the site language_code.
 - `title_separator` - Separator between title and title_addition, eg "|": "Abridge | Fast & Lightweight Zola Theme"
 - `title_addition` - a default value for title addition, used at the index.
-
-- `author` - Used for articles to denote the author.
-- `author_show = true` - Displays the author name on line with date, tags, categories
-- `readtime = true` - Displays the read time on line with date, tags, categories.
-- `readtime_string` - The word following the read time, you can set this to "min", "minutes", "min read", etc.
 - `recent = true` - This enabled the Recent posts box visible on the top right.
 - `recent_items = 9` - The number of items to display in the recent posts box
+- `author` - Used for articles to denote the author.
+
+- `meta_index / meta_post`
+    * `position` - top, bottom, both, false(hidden), Where to display the meta info in relation to the summary.
+    * `size` - s95, s90, s85, s80, false(full size). The size of the font for the meta info
+    * `author` - true/false, Display the author in the meta info.
+    * `readtime` - true/false, Display the read time in the meta info.
+    * `readstring` - "min", "min read", "minutes read". The string to display after the read time.
+    * `date` - true/false, Display the date in the meta info.
+    * `categories_tags` - true/false, Display the categores and tags in the meta info.
+    * `divider` - `"·"`   `"•"`   `" "`  divider to display between meta info elements.
+
 - `footer_credit = true` - This enables the powered by zola and abridge line in the footer.
 - `footer_credit_override` - Can be used to customize the footer credit, useful to add icons to the text, etc.
-
 - `logo = { file="logo.svg", width="42", height="42", alt="Abridge", text="bridge" }` - Defines the graphical logo with optional text to follow the logo.
 - `textlogo` - A purely Text based logo, this will be used if logo is commented out, if both are commented out then config.title is used.
 - `sitedesc` - This adds the site description just below the text based logo.
@@ -238,6 +244,11 @@ The following options should be under the `[extra]` in `config.toml`
 - `banner` - Image to use in seo related cards, this will be the fallback image if the individual articles does not provide one.
 - `favicon_..` - Used to set the various favicons (displayed in bookmarks and active browser tab)
 - `fontawesome =` - Uncomment to enable fontawesome library, this will include the file in the header.
+    * `icon_read` - icon to display in meta info on index and posts, comment out to disable
+    * `icon_date` - icon to display in meta info on index and posts, comment out to disable
+    * `icon_info` - icon to display in meta info on index and posts, comment out to disable
+    * `icon_author` - icon to display in meta info on index and posts, comment out to disable
+
 - `fonts =` - Uncomment to load external fonts, they will be loaded in the header.
 - `math` - Set to true to load the Katex library, enabling the use of the [katex shortcode](https://abridge.netlify.app/overview-math/) (recommend setting on a per page basis instead.)
 - `math_auto_render` - This allows you to define a section of math notation using only $$ $$ symbols instead of using the katex shortcode directly. (recommend setting on a per page basis instead.)
diff --git a/config.toml b/config.toml
index 7f4c600..2e7063e 100644
--- a/config.toml
+++ b/config.toml
@@ -44,21 +44,21 @@ title_separator = "|"  # Separator between title and title_addition, set as |, -
 # To disable title_addition but keep built in page additions eg, Posts page: "Posts | Abridge" set title_addition to an empty string
 # To always set the page title exactly eg "Abridge" then comment out the below line (not recommend, bad for SEO)
 title_addition = "Fast & Lightweight Zola Theme" # a default value for title addition
-
-author = "Jake G" # Put Your Name here
-author_show = true # displays the author name on line with date, tags, categories
-readtime = false # displays the read time on line with date, tags, categories
-readtime_string = "min" # read time indication eg "min": - 1 min  "min read": - 1 min read
 recent = true # TOC / index
 recent_items = 9
+author = "Jake G" # Put Your Name here
+
+meta_index = { position="bottom", size="s90", author=true, readtime=false, readstring="min", date=true, categories_tags=true, divider=" " }
+meta_post = { position="top", size="s95", author=true, readtime=false, readstring="min read", date=true, categories_tags=true, divider=" " }
+## position: top, bottom, both, false(hidden) ## size: s95, s90, s85, s80, false(full size)
+## divider:    "·"    "•"    " "
+
 footer_credit = true
 #footer_credit_override = '<p>Powered by <a href="https://www.getzola.org/">Zola</a> &#38; <a href="https://github.com/Jieiku/abridge/">Abridge</a></p>' # <i class="fa-solid fa-heart"></i>
-
 #uncomment one of the two lines, or neither, depending on which type of logo you want to use:
 #logo = { file="logo.svg", width="32", height="32", alt="Abridge", text="bridge" }
 #textlogo = '<font color="#f90">A</font>bridge'
 textlogo = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#f90" viewBox="0 0 96 96" width="32" height="32"><path stroke-width="14" d="M14 99 46 7h4l32 92"/><path stroke-width="9" d="M-3 82c43-26 59-26 102 0"/><path stroke-linecap="round" stroke-width="1.5" d="M94 72v7m-5-9.8v7m-5-9.8v7.1M79 64v7M63 57.7v7m-5-8.2v7m-5-7.8v7m-5-7.2v7m-5-6.7v7m-5-6.3v7m-5-5.8v7M17 64v7m-5-4.6v7m-5-4.2v7M2 72v7"/></svg>bridge'
-
 sitedesc = false # enables or disables the display of the site description below the logo.
 #copyright_start_year = 2019  # optional
 #copyright_end_year = 2020  # optional, recommend leaving unset, zola build will set this to current year by default
@@ -139,6 +139,10 @@ favicon16 = "favicon-16x16.png" # favicon-16x16.png
 
 # Uncomment below line to load fontawesome, eg: <i class="fa-solid fa-heart"></i>
 #fontawesome = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css"
+#icon_read = "fa-solid fa-glasses" # displayed in metadata on index and below title on page.
+#icon_date = "fa-solid fa-calendar" # displayed in metadata on index and below title on page.
+#icon_info = "fa-solid fa-circle-info" # displayed in metadata on index and below title on page for categories/tags
+#icon_author = "fa-solid fa-pen-fancy" # displayed in metadata on index and below title on page.
 
 # For externally loaded Fonts, make sure to include the FULL url including the http/https prefix
 #fonts = [ {url = "https://fonts.googleapis.com/css?family=Montserrat:400,700,italic|Fira+Code:400,italic"} ]
diff --git a/sass/_imports.scss b/sass/_imports.scss
index 8a7e650..6e61b8e 100644
--- a/sass/_imports.scss
+++ b/sass/_imports.scss
@@ -29,6 +29,7 @@
 @import "include/scroller"; // figure
 @import "include/button"; // button, a[role=button], type=button, type=submit ...
 @import "include/form"; // input, select, textarea, label, fieldset, legend (If you import this, you should also import button)
+@import "include/top"; // back to top button using only CSS
 
 @import "include/search"; // Zola Search - elasticlunr site-wide search
 @import "include/toc"; // Zola TOC - Table of Content Menu (recent posts & index), sticky (floats top right)
diff --git a/sass/include/_top.scss b/sass/include/_top.scss
new file mode 100644
index 0000000..98b2a61
--- /dev/null
+++ b/sass/include/_top.scss
@@ -0,0 +1,17 @@
+.top {
+  position: sticky;
+  bottom: 9px;
+  padding: 9px;
+  place-self: end;
+  margin-top: 109vh;
+
+  font-weight:700;
+  border-radius: 9px;
+  color: var(--a1);
+  background: var(--c2);
+}
+.top:hover {
+  color: var(--c2);
+  background: var(--a1);
+  text-decoration: none;
+}
diff --git a/sass/include/_zola.scss b/sass/include/_zola.scss
index e07c1e1..504fb3a 100644
--- a/sass/include/_zola.scss
+++ b/sass/include/_zola.scss
@@ -1,4 +1,7 @@
 .sum {margin: 0.2rem 0}
-.info {font-size: .8rem}
-.hpad {padding: 0 .4rem}
-.rpad {padding-right: .4rem}
\ No newline at end of file
+.s95 {font-size: .95rem}
+.s90 {font-size: .90rem}
+.s85 {font-size: .85rem}
+.s80 {font-size: .80rem}
+.hpad {padding: 0 .2rem}
+.rpad {padding-right: .2rem}
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 161e147..962cb88 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -48,7 +48,7 @@
           <li><h2><a href="{{ get_url(path=i.url, trailing_slash=i.slash) }}{%- if i.slash and config.extra.uglyurls %}index.html{%- endif %}">{{ i.name | safe }}</a></h2> </li>
           {%- endfor %}
           {%- if config.extra.js_theme %}
-          <li class="js"><i type="reset" id="mode" class="svgs contrast"></i>
+          <li class="js">{%- if config.extra.fontawesome %}<i type="reset" id="mode" class="svgs fa-solid fa-circle-half-stroke"></i>{%- else %}<i type="reset" id="mode" class="svgs contrast"></i>{%- endif %}
           {%- endif %}
           </li>
         </ul>
@@ -112,5 +112,7 @@
     </div>
   </footer>
 {%- endblock footer %}
+{%- block gotop %}
+{%- endblock gotop %}
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 03a652c..6d3bfe0 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -22,11 +22,17 @@
   {{- macros_head::seo(title=title, title_addition=title_addition, description=description, is_home=true) }}
 {%- endblock seo %}
 
+
+
 {%- block content %}
     <div>
     {%- for page in paginator.pages %}
       <article>
         <h1><a href="{{ page.permalink | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ page.title }}</a></h1>
+        {%- if config.extra.meta_index.position %}
+        {%- if config.extra.meta_index.position == "top" or config.extra.meta_index.position == "both" %}
+        {{- macros::title_index(page=page) }}
+        {%- endif %}{%- endif %}
         <p class="sum">
         {%- if page.summary %}
           {{ page.summary | markdown(inline=true) | safe }}
@@ -38,17 +44,11 @@
         {%- endif %}
           <a href="{{ page.permalink | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">...more</a>
         </p>
-        <span class="info">
-          {%- if page.taxonomies.authors and config.taxonomies %}
-          <span class="rpad">{%- for author in page.taxonomies.authors %}
-          {%- if author_flag %} and {% endif %}
-          <a href="{{ get_taxonomy_url(kind='authors', name=author) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ author }}</a>
-          {%- set_global author_flag = true %}
-          {%- endfor %}</span>
-          {%- elif config.extra.author and config.extra.author_show %}<span class="rpad">{{ config.extra.author }}</span>
-          {%- endif %} <span class="rpad">{{ page.date | date(format="%Y %B %d") }}</span>{%- if config.extra.readtime %}<span class="rpad"> {{ page.reading_time }} {{ config.extra.readtime_string | default(value="min") }} </span>{% endif %}
-{%- if page.taxonomies.categories %}<span class="rpad"> [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]</span>{% endif %}
-{%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor -%}{%- endif %}</span>
+        {%- if config.extra.meta_index.position %}
+        {%- if config.extra.meta_index.position == "bottom" or config.extra.meta_index.position == "both" %}
+        {{- macros::title_index(page=page) }}
+        {%- endif %}
+        {%- endif %}
       </article>
     {%- endfor %}
     {{- macros::pagination(paginator=paginator) }}
diff --git a/templates/macros/macros.html b/templates/macros/macros.html
index 4b6c7d5..e818bfd 100644
--- a/templates/macros/macros.html
+++ b/templates/macros/macros.html
@@ -1,20 +1,87 @@
 {%- macro title(page) %}
-        <h1><a href="{{ page.permalink | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ page.title }}</a></h1>
-        <span>
-          {%- if page.taxonomies.authors and config.taxonomies %}
-          <span class="hpad"><b>{%- for author in page.taxonomies.authors %}
+        <span{%- if config.extra.meta_post.size %} class="{{ config.extra.meta_post.size }}"{% endif %}>
+
+        {#- Author #}
+        {%- if page.taxonomies.authors and config.taxonomies %}
+          {%- for author in page.taxonomies.authors %}
+          {%- if author_flag %} and {% endif %}
+          <a href="{{ get_taxonomy_url(kind='authors', name=author) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ author }}</a>
+          {%- set_global author_flag = true %}
+          {%- endfor %}
+        {%- elif config.extra.author and config.extra.meta_post.author %}
+          {%- if config.extra.icon_author %}<i class="{{ config.extra.icon_author }}"></i>{%- endif %}{{ config.extra.author }}
+        {%- endif %}
+
+          {#- divider #}
+          {%- if config.extra.meta_post.author %}
+          {%- if config.extra.meta_post.readtime or config.extra.meta_post.date or config.extra.meta_post.categories_tags %}
+          {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} {%- endif %}
+          {%- endif %}
+          {%- endif %}
+
+        {#- ReadTime #}
+          {%- if config.extra.meta_post.readtime %} {%- if config.extra.icon_read %}<i class="{{ config.extra.icon_read }}"></i>{%- endif %}{{ page.reading_time }} {{ config.extra.meta_post.readstring | default(value="min") }}
+          {#- divider #}
+          {%- if config.extra.meta_post.date or config.extra.meta_post.categories_tags %}
+          {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} {%- endif %}{%- endif %}{%- endif %}
+
+        {#- Date #}
+          {%- if config.extra.meta_post.date %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i>{%- endif %}{{ page.date | date(format="%B %d, %Y") }}
+          {#- divider #}
+          {%- if config.extra.meta_post.categories_tags %}
+          {%- if config.extra.meta_post.divider %}<span class="hpad">{{ config.extra.meta_post.divider | safe }}</span>{%- else %} {%- endif %}{%- endif %}{% endif %}
+
+        {#- Categories #}
+          {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %}<i class="{{ config.extra.icon_info }}"></i>{%- endif %}[{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]{% endif %}
+
+        {#- Tags #}
+          {%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor -%}{%- endif %}</span>
+{%- endmacro title %}
+
+
+{%- macro title_index(page) %}
+        <span{%- if config.extra.meta_index.size %} class="{{ config.extra.meta_index.size }}"{% endif %}>
+
+        {#- Author #}
+        {%- if page.taxonomies.authors and config.taxonomies %}
+          {%- for author in page.taxonomies.authors %}
           {%- if author_flag %} and {% endif %}
           <a href="{{ get_taxonomy_url(kind='authors', name=author) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ author }}</a>
           {%- set_global author_flag = true %}
-          {%- endfor %}</b></span>
-          {%- elif config.extra.author and config.extra.author_show %}<span class="hpad"><b>{{ config.extra.author }}</b></span>
-          {%- endif %}<span class="rpad"> {{ page.date | date(format="%B %d, %Y") }}</span>
-{%- if page.taxonomies.categories %}<span class="rpad"> [{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]</span>{% endif %}
-{%- if page.taxonomies.tags %}<span class="rpad"> {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor -%}</span>{%- endif %}
-{%- if config.extra.readtime %}<span class="rpad"> {{ page.reading_time }} {{ config.extra.readtime_string | default(value="min") }} </span>{% endif %}</span>
+          {%- endfor %}
+        {%- elif config.extra.author and config.extra.meta_index.author %}
+          {%- if config.extra.icon_author %}<i class="{{ config.extra.icon_author }}"></i>{%- endif %}{{ config.extra.author }}
+        {%- endif %}
+
+          {#- divider #}
+          {%- if config.extra.meta_index.author %}
+          {%- if config.extra.meta_index.readtime or config.extra.meta_index.date or config.extra.meta_index.categories_tags %}
+          {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} {%- endif %}
+          {%- endif %}
+          {%- endif %}
+
+        {#- ReadTime #}
+          {%- if config.extra.meta_index.readtime %} {%- if config.extra.icon_read %}<i class="{{ config.extra.icon_read }}"></i>{%- endif %}{{ page.reading_time }} {{ config.extra.meta_index.readstring | default(value="min") }}
+          {#- divider #}
+          {%- if config.extra.meta_index.date or config.extra.meta_index.categories_tags %}
+          {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} {%- endif %}{%- endif %}{%- endif %}
+
+        {#- Date #}
+          {%- if config.extra.meta_index.date %} {%- if config.extra.icon_date %}<i class="{{ config.extra.icon_date }}"></i>{%- endif %}{{ page.date | date(format="%B %d, %Y") }}
+          {#- divider #}
+          {%- if config.extra.meta_index.categories_tags %}
+          {%- if config.extra.meta_index.divider %}<span class="hpad">{{ config.extra.meta_index.divider | safe }}</span>{%- else %} {%- endif %}{%- endif %}{% endif %}
+
+        {#- Categories #}
+          {%- if page.taxonomies.categories %} {%- if config.extra.icon_info %}<i class="{{ config.extra.icon_info }}"></i>{%- endif %}[{% for cat in page.taxonomies.categories %}<a href="{{ get_taxonomy_url(kind='categories', name=cat) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ cat }}</a>{% endfor %}]{% endif %}
+
+        {#- Tags #}
+          {%- if page.taxonomies.tags %} {%- for tag in page.taxonomies.tags %} #<a href="{{ get_taxonomy_url(kind='tags', name=tag) | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ tag }}</a> {% endfor -%}{%- endif %}</span>
 {%- endmacro title %}
 
 
+
+
 {%- macro footer(page) %}
 <p><b><a href="#">Back to top</a></b></p>
 {%- endmacro footer %}
diff --git a/templates/page.html b/templates/page.html
index 736a11e..c653018 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -32,6 +32,7 @@
 
 {%- block content %}
     <article>
+    <h1><a href="{{ page.permalink | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{{ page.title }}</a></h1>
     {{- macros::title(page=page) }}
     {{ page.content | safe }}
     {%- block page_footer %}
@@ -63,3 +64,7 @@
     {%- endif %}
     {%- endblock toc %}
 {%- endblock content %}
+
+{%- block gotop %}
+<a href="#" class="top">&cuwed;</a>
+{%- endblock gotop %}
\ No newline at end of file