jekyll-theme-horizon-flow 1.0.3 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd4a3025c5c7dee3341d1b781738590518af5ec7d17438132723a39a13758e9d
-  data.tar.gz: 8606bb51af10a0e4e3fbd022b2ce394d9cf299e9e06ccceb52f06741af34c29d
+  metadata.gz: 9c647058ba28712037b2b276685ef637181cebaf265936fa6fe33851bfd33dbd
+  data.tar.gz: cecdc33724d7eb33c8f82f478b7350467521716b16928e03d178e3b586421794
 SHA512:
-  metadata.gz: 6f296954fdad793ba6945194ce91b40e1fc71933df88d0e4b07442084fcc3a6c5beb62c0f0af2a0d9a4564c793a36e3bce0de2a9db94e7df849d7813e2412301
-  data.tar.gz: 32617a1c81c5d929a9e6bf5c73d59f47e6d29bbec9f0dfc774e688e986eb5771bd7d8dac0ed07df6f2c030cbe8e3f1223cac2aefde9f58f187c4c13bd4efa024
+  metadata.gz: 135dfa6cfba4c0de80dff89de1e9d8c9faea873f01614290b43c61b5546d1f1889232de0f1c9933ac1ec8443c97efca37189b93904f5a6a135beadef6821548e
+  data.tar.gz: 2bf8d58ff86af1d06aa699f6242c9d3491063dc32cb927eeafa73b5a6637c9aeaa14f6d0309c5354732c576c0cef54741f60d4752b23e1e4f95345dfe249ebe5

data/README.md

@@ -13,6 +13,7 @@
   - [Read Time](#read-time)
   - [default plugins](#default-plugins)
   - [Configurable Labels](#configurable-labels)
+  - [Comments](#comments)
 - [Front Matter](#front-matter)
 - [Layouts](#layouts-1)
   - [`layout: default`](#layout-default)
@@ -25,10 +26,10 @@
 - [whislist](#whislist)
 
 
-
 [![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg?style=flat-square)](https://raw.githubusercontent.com/papierkorp/jekyll-theme-horizon-flow/main/LICENSE.txt)
 [![Jekyll](https://img.shields.io/badge/jekyll-%3E%3D%203.6-blue.svg?style=flat-square)](https://jekyllrb.com/)
-[![Ruby gem](https://img.shields.io/gem/v/jekyll-theme-so-simple.svg?style=flat-square)](https://rubygems.org/gems/jekyll-theme-horizon-flow)
+[![Gem Version](https://badge.fury.io/rb/jekyll-theme-horizon-flow.svg)](https://badge.fury.io/rb/jekyll-theme-horizon-flow)
+
 
 This is my first ever theme or anything like this so I got a whole damn LOT of Inspiration and Ideas of the [So Simple](https://github.com/mmistakes/so-simple-theme/tree/master) theme from [mmistakes](https://github.com/mmistakes). Also i almost completly copied his readme pls forgive me <3.
 
@@ -36,15 +37,17 @@ This theme can offer:
 
 * Custom Navigation
 * Dynamically created Footer with Font Awesome Icons and Social Links
-* Flexible customizable Footer-Sidebar (above the Footer) where you can include up to 5 elements. You can choose between 4 premade ones and self created ones
+* optional, flexible and customizable Footer-Sidebar (above the Footer)
+* include up to 5 elements in the Footer-sidebar, choosen between 4 premade ones and self created ones
 * SEO best practices via [Jekyll SEO Tag](https://github.com/jekyll/jekyll-seo-tag)
-* Javascript free besides the optional search page
+* Javascript free besides the optional search page and the optional comments
 * supports tags and categories
 * offers an archive
 * Carefully designed posts for almost all Markup elements
 * Activateable TOC and to the TOP Buttons for each post
 * Mobile Friendly
 * Highly Customizable
+* optional server-free [Comments](https://www.aleksandrhovhannisyan.com/blog/jekyll-comment-system-github-issues/#how-to-add-comments-to-a-jekyll-blog) with Github Issues (hosted on Github)
 
 ![Horizon Flow Screenshots](https://papierkorp.github.io/jekyll-theme-horizon-flow/screenshot.png)
 
@@ -213,6 +216,7 @@ As for the possible Configurations this theme offers take note of the following:
 * [Read Time](#read-time)
 * [default plugins](#default-plugins)
 * [Configurable Labels](#configurable-labels)
+* [Comments](#comments)
 
 ### Site URL
 
@@ -364,7 +368,7 @@ footer_links:
 ### Layouts
 
 In here you can define the amount of columns used to display all tags/categories/years via the `_config`.
-Available values are `1-5`.
+Available values are `0-5`.
 
 ```yaml
 layouts:
@@ -380,7 +384,7 @@ layouts:
 ### Footer Sidebar
 
 The footer Sidebar is the content directly above the footer.
-Per default there are 4 elements available:
+Per default there are 6 elements available:
 
 **description:** Uses the `description:` of `_config` to display all the data from there. For the best experience you should use an <h1></h1> on the top.  
 **categories:** Shows random categories according to the count.  
@@ -403,6 +407,8 @@ description: >- # this means to ignore newlines until
   </p>
 
 footer_sidebar:
+  enabled: true
+  auto: false # false = all elements will have the same width, true = each element takes what it needs
   arrangement:  # you can rearrange the positions of the elements
   - description  # will be the first one to be displayed
   - tags  # second in the row ...
@@ -410,32 +416,32 @@ footer_sidebar:
   - recentposts  # will be displayed last
   description:
     enabled: true  # default: true
-    coluns: 2  # default: 2 - if you include a list
+    columns: 2  # default: 0 - if you include a list
   categories:
     enabled: true  # default: false
     count: 100  # default: 100
-    columns: 5  # default: 5
+    columns: 5  # default: 0
   tags:
     enabled: true  # default: false
     count: 100  # default: 100
-    columns: 5  # default: 5
+    columns: 5  # default: 0
   recentposts:
     enabled: true  # default: true
-    count: 10  # default: 10
-    columsn: 2  # default: 2
+    count: 10  # default: 5
+    columns: 2  # default: 0
   custom_content:
     enabled: true
     data: >-
       <h3>EXTRACONTENT</h3>
       <p>not really content though...</p>
-    columns: 2  # default: 2 - if you include a list
+    columns: 2  # default: 0 - if you include a list
   custom_content2:
     enabled: false
     data: "<h3>mhm</h3>"
-    columns: 2  # default: 2 - if you include a list
+    columns: 2  # default: 0 - if you include a list
 ```
 
-
+The default of `0` stands for automatic alignment.
 
 
 ### Table of Contents
@@ -522,6 +528,21 @@ categories_nothing_found: "No categories available."
 ```
 
 
+### Comments
+
+This theme enables the use of Comments per Github Issues API (taken from [here](https://www.aleksandrhovhannisyan.com/blog/jekyll-comment-system-github-issues/#how-to-add-comments-to-a-jekyll-blog)).
+To enable comments you will need the following Config:
+
+```yaml
+issues_repo: YourUsername/RepoName  # e.g.: issues_repo: papierkorp/blog
+```
+
+In addition you will have to open up a Issue for each blog post manually and copy the ID of this Issue.
+Afterwards add this Front Matter to your Post:
+
+```yaml
+comments_id: 1
+```
 
 ---
 
@@ -535,6 +556,7 @@ This theme offers the following Front-Matter:
 |--------|------------------|-----------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|
 | `post` | subtitle         | Adds a subtitle to the post (optional)                                                                                      | ---<br>subtitle: "You're going to love this." <br>---                                        |
 | `post` | display_toc      | true or false, shows the toc button on the bottom right (default: true)                                                     | ---<br>display_toc: false <br>---                                                            |
+| `post` | display_toc2     | true or false, shows another toc on the right side permanently (default: false)                                             | ---<br>display_toc2: true <br>---                                                            |
 | `post` | last_modified_at | Add extra meta-data when the post was last modified. It takes the date as you write it like a string.                       | ---<br>last_modified_at: 10.09.2023 <br>---                                                  |
 | `post` | search_keywords  | Add extra data to the [search.json](#layout-:-search) file                                                                                | ---<br>search_keywords: "words i didnt use in the tags" <br>---                              |
 | `post` | toTop            | true or false, shows the "To the Top" button on the bottom left (default: true)                                             | ---<br>toTop: false <br>---                                                                  |
@@ -542,6 +564,7 @@ This theme offers the following Front-Matter:
 | `post` | noheader         | Disable the whole header and only show the Content. (default: false)                                                        | ---<br>noheader: true <br>---                                                                |
 | `post` | searchable       | The post wont be included in the search.                                                                                    | ---<br>searchable: false <br>---                                                             |
 | `post` | show_supplements | The supplements (date, readtime, tags...) wont be shown.                                                                    | ---<br>show_supplements: false<br><br>---                                                 |
+| `post` | comments_id      | If you want to enable comments (hosted on Github - needs the neccessary config set)                                         | ---<br>comments_id: 1<br><br>---                                                 |
 | `home` | noheader         | Disable the whole header and only show the Content. (default: false)                                                        | ---<br>noheader: true <br>---                                                                |
 
 --- 

data/_config.yml

@@ -54,37 +54,71 @@ plugins:
 #   - vendor/gems/
 #   - vendor/ruby/
 
+#------------------------------------AddOns------------------------------------
+
+issues_repo: papierkorp/blog
+
 #------------------------------------Horizon Flow specific------------------------------------
 
 navigation:
   - title: Home
     url: /index.html
+  - title: Categories
+    url: /categories.html
+  - title: Tags
+    url: /tags.html
+  - title: Archive
+    url: /archive.html
+  - title: Search
+    url: /search.html
 
 footer_sidebar:
+  enabled: true
+  auto: true
   arrangement:
   - description
+  - tags
+  - categories
   - recentposts
   description:
     enabled: true
+  categories:
+    enabled: true
+  tags:
+    enabled: true
   recentposts:
     enabled: true
-    count: 10
-    columns: 2
 
 footer_links:
   - title: Feed
     url: /feed.xml
     icon: fa fa-rss
+  - title: GitHub
+    url: https://github.com/papierkorp
+    icon: fa fa-github
+  - title: Email
+    url: mailto:xxx@test.de
+    icon: fa fa-envelope
+  - title: Twitter
+    url: https://twitter.com
+    icon: fa fa-twitter
+  - title: Facebook
+    url: https://facebook.com
+    icon: fa fa-facebook
+  - title: Instagram
+    url: https://instagram.com
+    icon: fa fa-instagram
+  - title: Impressum
+    url: /impressum.html
 
 defaults:
   -
     scope:
       path: "_posts"
     values:
-      toc: yes
       display_toc: true
 
-paginate: 5
+paginate: 3
 paginate_path: "/:num/"
 
 read_time_after: "min read"

data/_includes/comments.html

@@ -0,0 +1,127 @@
+{% assign issues_repo = site.issues_repo %}
+{% assign issue_id = include.issue_id %}
+
+<section id="comments">
+  <div class="comment-actions">
+    <h2><span id="comments-count"></span> Comments</h2>
+    <a
+      class="comment_button"
+      href="https://github.com/{{ issues_repo }}/issues/{{ issue_id }}"
+      target="_blank"
+      >
+      Comment on Github
+      <i class="fa fa-external-link" aria-hidden="true">
+        
+      </i>
+    </a>
+  </div>
+  <div id="comments-wrapper">
+    Loading...
+  </div>
+</section>
+
+
+
+<script>
+const commentsSection = document.getElementById('comments');
+const commentsWrapper = commentsSection.querySelector('#comments-wrapper');
+const commentsCount = commentsSection.querySelector('#comments-count');
+
+const commentsObserver = new IntersectionObserver((entries, self) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      fetchComments(); // this is the important part
+      self.unobserve(entry.target);
+    }
+  });
+}, { rootMargin: '200px 0px 0px 0px' });
+
+commentsObserver.observe(commentsSection);
+
+const fetchComments = async () => {
+  try {
+    const comments = await (await fetch(
+      'https://api.github.com/repos/{{ issues_repo }}/issues/{{ issue_id }}/comments'
+    )).json();
+    initRenderComments(comments);
+  } catch (e) {
+    commentsWrapper.innerHTML = `<p>Unable to retrieve the comments for this post.</p>`;
+  }
+}
+
+const loadScript = (src) => {
+  const scriptElement = document.createElement('script');
+  document.body.appendChild(scriptElement);
+
+  return new Promise((resolve) => {
+    scriptElement.onload = resolve;
+
+    // Important to register onload before setting src
+    scriptElement.src = src;
+  });
+}
+
+const commentScripts = [
+  'https://unpkg.com/marked@0.3.6/marked.min.js',
+  'https://unpkg.com/dompurify@1.0.8/dist/purify.min.js',
+  'https://unpkg.com/dayjs@1.8.21/dayjs.min.js',
+  'https://unpkg.com/dayjs@1.7.8/plugin/relativeTime.js',
+];
+
+// Reminder: this gets called when the viewport intersects with the comments section
+const initRenderComments = async (comments) => {
+  if (!comments.length) {
+    commentsWrapper.innerHTML = `<p>No comments yet 👀 Be the first to post!</p>`;
+    return;
+  }
+
+  // Load all comment script dependencies async
+  await Promise.all(commentScripts.map((script) => loadScript(script)));
+  renderComments(comments);
+}
+
+const renderComments = (comments) => {
+  // load the relativeTime plugin for dayjs so we can express dates relative to now
+  dayjs.extend(dayjs_plugin_relativeTime);
+
+  commentsCount.innerText = `${comments.length}`;
+
+  const commentsList = document.createElement('ol');
+  commentsList.className = 'comments-list';
+  commentsList.setAttribute('aria-label', 'Comments on this blog post');
+
+  commentsList.innerHTML = comments
+  .sort((comment1, comment2) => {
+    return comment1.created_at < comment2.created_at ? 1 : -1;
+  })
+  .map(comment => {
+    const datePosted = dayjs(comment.created_at).fromNow();
+    const user = comment.user;
+    const body = DOMPurify.sanitize(marked(comment.body));
+    const postedByAuthor = comment.author_association === 'OWNER';
+    const edited = comment.created_at !== comment.updated_at;
+
+    return `<li class="comment">
+                <div class="commenter">
+                    <img src="${user.avatar_url}" alt="" aria-hidden="true" class="avatar" />
+                    <a
+                        href="https://github.com/${user.login}"
+                        class="username"
+                        target="_blank"
+                        >${user.login}</a
+                    >
+                    <div class="date-posted">commented <time datetime="${comment.created_at}">${datePosted}</time></div>
+                    ${postedByAuthor ? '<span class="tag author-badge">Author</span>' : ''}
+                    ${edited ? `<span class="comment-edited">Edited</span>` : ''}
+                </div>
+                <div class="comment-body">${body}</div>
+            </li>`;
+  })
+  .join('');
+
+  commentsWrapper.innerHTML = '';
+  commentsWrapper.appendChild(commentsList);
+}
+
+
+</script>

data/_includes/footer.html

@@ -9,77 +9,79 @@
 <footer>
 
 
-{% if site.footer_sidebar.arrangement %}
-  <aside class="footer_sidebar">
-    {% for section in site.footer_sidebar.arrangement %}
-      {% if section == 'description' and site.footer_sidebar.description.enabled %}
-        <section class="footer_sitedescription footer_sitedescription{% if site.footer_sidebar.description.columns and site.footer_sidebar.description.columns >= 1 and site.footer_sidebar.description.columns <= 5 %}{{site.footer_sidebar.description.columns}}{% else %}2{% endif %}">
-          {{ site.description }}
-        </section>
-      {% elsif section == 'customcontent' and site.footer_sidebar.customcontent.enabled %}
-        <section class="footer_customcontent footer_customcontent{% if site.footer_sidebar.customcontent.columns and site.footer_sidebar.customcontent.columns >= 1 and site.footer_sidebar.customcontent.columns <= 5 %}{{site.footer_sidebar.customcontent.columns}}{% else %}2{% endif %}">
-          {{ site.footer_sidebar.customcontent.data }}
-        </section>
-      {% elsif section == 'customcontent2' and site.footer_sidebar.customcontent2.enabled %}
-        <section class="footer_customcontent2 footer_customcontent2{% if site.footer_sidebar.customcontent2.columns and site.footer_sidebar.customcontent2.columns >= 1 and site.footer_sidebar.customcontent2.columns <= 5 %}{{site.footer_sidebar.customcontent2.columns}}{% else %}2{% endif %}">
-          {{ site.footer_sidebar.customcontent2.data }}
-        </section>
-      {% elsif section == 'categories' and site.footer_sidebar.categories.enabled %}
-        <section class="footer_categories footer_categories{% if site.footer_sidebar.categories.columns and site.footer_sidebar.categories.columns >= 1 and site.footer_sidebar.categories.columns <= 5 %}{{site.footer_sidebar.categories.columns}}{% else %}5{% endif %}">
-          <h3>Categories</h3>
-          <ul>
-            {% assign all_categories = "" %}
-            {% for post in site.posts %}
-              {% assign post_categories = post.categories %}
-              {% for category in post_categories %}
-                {% assign all_categories = all_categories | append: category | append: "," %}
+{% if site.footer_sidebar.enabled %}
+  {% if site.footer_sidebar.arrangement %}
+    <aside class="footer_sidebar footer_aside{% if site.footer_sidebar.auto %}_auto{% endif %}">
+      {% for section in site.footer_sidebar.arrangement %}
+        {% if section == 'description' and site.footer_sidebar.description.enabled %}
+          <section class="footer_sitedescription footer_sitedescription{% if site.footer_sidebar.description.columns and site.footer_sidebar.description.columns >= 0 and site.footer_sidebar.description.columns <= 5 %}{{site.footer_sidebar.description.columns}}{% else %}0{% endif %}">
+            {{ site.description }}
+          </section>
+        {% elsif section == 'customcontent' and site.footer_sidebar.customcontent.enabled %}
+          <section class="footer_customcontent footer_customcontent{% if site.footer_sidebar.customcontent.columns and site.footer_sidebar.customcontent.columns >= 0 and site.footer_sidebar.customcontent.columns <= 5 %}{{site.footer_sidebar.customcontent.columns}}{% else %}0{% endif %}">
+            {{ site.footer_sidebar.customcontent.data }}
+          </section>
+        {% elsif section == 'customcontent2' and site.footer_sidebar.customcontent2.enabled %}
+          <section class="footer_customcontent2 footer_customcontent2{% if site.footer_sidebar.customcontent2.columns and site.footer_sidebar.customcontent2.columns >= 0 and site.footer_sidebar.customcontent2.columns <= 5 %}{{site.footer_sidebar.customcontent2.columns}}{% else %}0{% endif %}">
+            {{ site.footer_sidebar.customcontent2.data }}
+          </section>
+        {% elsif section == 'categories' and site.footer_sidebar.categories.enabled %}
+          <section class="footer_categories footer_categories{% if site.footer_sidebar.categories.columns and site.footer_sidebar.categories.columns >= 0 and site.footer_sidebar.categories.columns <= 5 %}{{site.footer_sidebar.categories.columns}}{% else %}0{% endif %}">
+            <h3>Categories</h3>
+            <ul>
+              {% assign all_categories = "" %}
+              {% for post in site.posts %}
+                {% assign post_categories = post.categories %}
+                {% for category in post_categories %}
+                  {% assign all_categories = all_categories | append: category | append: "," %}
+                {% endfor %}
               {% endfor %}
-            {% endfor %}
-            {% assign unique_categories = all_categories | split: "," | uniq %}
-            
-            {% assign categories_count = site.footer_sidebar.categories.count | default: 100 %}
-            {% assign categories_to_display = unique_categories | slice: 0, categories_count %}
-            
-            {% for category in categories_to_display %}
-              <li><a href="{{ site.baseurl }}/categories.html#{{ category }}">{{ category }}</a></li>
-            {% endfor %}
-          </ul>
-        </section>
-      {% elsif section == 'tags' and site.footer_sidebar.tags.enabled %}
-        <section class="footer_tags footer_tags{% if site.footer_sidebar.tags.columns and site.footer_sidebar.tags.columns >= 1 and site.footer_sidebar.tags.columns <= 5 %}{{site.footer_sidebar.tags.columns}}{% else %}5{% endif %}">
-          <h3>Tags</h3>
-          <ul>
-            {% assign all_tags = "" %}
-            {% for post in site.posts %}
-              {% assign post_tags = post.tags %}
-              {% for tag in post_tags %}
-                {% assign all_tags = all_tags | append: tag | append: "," %}
+              {% assign unique_categories = all_categories | split: "," | uniq %}
+              
+              {% assign categories_count = site.footer_sidebar.categories.count | default: 100 %}
+              {% assign categories_to_display = unique_categories | slice: 0, categories_count %}
+              
+              {% for category in categories_to_display %}
+                <li><a href="{{ site.baseurl }}/categories.html#{{ category }}">{{ category }}</a></li>
               {% endfor %}
-            {% endfor %}
-            {% assign unique_tags = all_tags | split: "," | uniq %}
-            
-            {% assign tags_count = site.footer_sidebar.tags.count | default: 100 %}
-            {% assign tags_to_display = unique_tags | slice: 0, tags_count %}
-            
-            {% for tag in tags_to_display %}
-              <li><a href="{{ site.baseurl }}/tags#{{ tag }}">{{ tag }}</a></li>
-            {% endfor %}
-          </ul>
-        </section>
-      {% elsif section == 'recentposts' and site.footer_sidebar.recentposts.enabled %}
-        <section class="footer_recentposts footer_recentposts{% if site.footer_sidebar.recentposts.columns and site.footer_sidebar.recentposts.columns >= 1 and site.footer_sidebar.recentposts.columns <= 5 %}{{site.footer_sidebar.recentposts.columns}}{% else %}2{% endif %}">
-          <h3>Recent Posts</h3>
-          <ul>
-            {% assign recentposts_count = site.footer_sidebar.recentposts.count | default: 10 %}
-            {% assign recent_posts = site.posts | reverse | limit: recentposts_count %}
-            {% for post in recent_posts %}
-              <li><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
-            {% endfor %}
-          </ul>
-        </section>
-      {% endif %}
-    {% endfor %}
-  </aside>
+            </ul>
+          </section>
+        {% elsif section == 'tags' and site.footer_sidebar.tags.enabled %}
+          <section class="footer_tags footer_tags{% if site.footer_sidebar.tags.columns and site.footer_sidebar.tags.columns >= 0 and site.footer_sidebar.tags.columns <= 5 %}{{site.footer_sidebar.tags.columns}}{% else %}0{% endif %}">
+            <h3>Tags</h3>
+            <ul>
+              {% assign all_tags = "" %}
+              {% for post in site.posts %}
+                {% assign post_tags = post.tags %}
+                {% for tag in post_tags %}
+                  {% assign all_tags = all_tags | append: tag | append: "," %}
+                {% endfor %}
+              {% endfor %}
+              {% assign unique_tags = all_tags | split: "," | uniq %}
+              
+              {% assign tags_count = site.footer_sidebar.tags.count | default: 100 %}
+              {% assign tags_to_display = unique_tags | slice: 0, tags_count %}
+              
+              {% for tag in tags_to_display %}
+                <li><a href="{{ site.baseurl }}/tags#{{ tag }}">{{ tag }}</a></li>
+              {% endfor %}
+            </ul>
+          </section>
+        {% elsif section == 'recentposts' and site.footer_sidebar.recentposts.enabled %}
+          <section class="footer_recentposts footer_recentposts{% if site.footer_sidebar.recentposts.columns and site.footer_sidebar.recentposts.columns >= 0 and site.footer_sidebar.recentposts.columns <= 5 %}{{site.footer_sidebar.recentposts.columns}}{% else %}0{% endif %}">
+            <h3>Recent Posts</h3>
+            <ul>
+              {% assign recentposts_count = site.footer_sidebar.recentposts.count | default: 5 %}
+              {% assign recent_posts = site.posts | reverse %}
+              {% for post in recent_posts limit:recentposts_count %}
+                <li><a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
+              {% endfor %}
+            </ul>
+          </section>
+        {% endif %}
+      {% endfor %}
+    </aside>
+  {% endif %}
 {% endif %}
 
 
@@ -90,9 +92,9 @@
   <div class="social-icons item3">
     {% for link in site.footer_links %}
       {% if link.icon %}
-        <a href="{{ site.baseurl }}{{ link.url }}" class="{{ link.icon }}" target="_blank"></a>
+        <a href="{{ link.url }}" class="{{ link.icon }}" target="_blank"></a>
       {% else %}
-        <a href="{{ site.baseurl }}{{ link.url }}">{{ link.title }}</a>
+        <a href="{{ link.url }}">{{ link.title }}</a>
       {% endif %}
       {% unless forloop.last %}
         <span class="divider"></span>
@@ -101,4 +103,4 @@
   </div>
   {% endif %}
 
-</footer>
+</footer>

data/_layouts/post.html

@@ -4,6 +4,7 @@ layout: default
 
 <main id="post">
 	<article>
+
 		{% if page.display_toc %}
 		<div class="toc">
 			<input type="checkbox" id="tocMenuButton">
@@ -16,58 +17,72 @@ layout: default
 			</div>
 		</div>
 		{% endif %}
-		{% if page.no_header != true %}
-		<div class="post_header">
-			<h1>{{page.title}}</h1>
-			<h3>{{page.subtitle}}</h3>
-			
+
+		<div class="grid">
 			
-			{% if page.show_supplements != false %}
-			  <p class="supplements">
-			    <span>
-			      <i class="fa fa-calendar"></i> {{ page.date | date: "%B %d, %Y" }}
-			    </span>
-			    <span class="supplements-sep"></span>
-			    <span class="reading-time" title="Estimated read time">
-			      {% include read_time.html %}
-			    </span>
-			    {% if page.categories != nil and page.categories.size > 0 %}
-			      <span class="supplements-sep"></span>
-			      <span class="supplements-category">
-			        <i class="fa fa-bars"></i>
-			        {% for category in page.categories %}
-			          <a href="{{ site.baseurl }}/categories#{{ category | slugify }}">{{ category }}</a>{% if forloop.last == false %},{% endif %}
-			        {% endfor %}
-			      </span>
-			    {% endif %}
-			    {% if page.tags != nil and page.tags.size > 0 %}
-			      <span class="supplements-sep"></span>
-			      <span>
-			        <i class="fa fa-tags"></i>
-			        {% for tag in page.tags %}
-			          <a href="{{ site.baseurl }}/tags#{{ tag | slugify }}">{{ tag }}</a>{% if forloop.last == false %},{% endif %}
-			        {% endfor %}
-			      </span>
-			    {% endif %}
-			    {%- if page.last_modified_at -%}
-			      <br /> <br />
-			      <span class="last_modified_at">{% if site.data.configurable_lables.last_modified_at %}{{site.data.configurable_lables.last_modified_at}}{% else %}Last Modified at:{% endif %} {{ page.last_modified_at }}</span>
-			    {% endif %}
-			  </p>
+
+			{% if page.no_header != true %}
+			<div class="post_header">
+				<h1>{{page.title}}</h1>
+				<h3>{{page.subtitle}}</h3>
+				
+				
+				{% if page.show_supplements != false %}
+				  <p class="supplements">
+				    <span>
+				      <i class="fa fa-calendar"></i> {{ page.date | date: "%B %d, %Y" }}
+				    </span>
+				    <span class="supplements-sep"></span>
+				    <span class="reading-time" title="Estimated read time">
+				      {% include read_time.html %}
+				    </span>
+				    {% if page.categories != nil and page.categories.size > 0 %}
+				      <span class="supplements-sep"></span>
+				      <span class="supplements-category">
+				        <i class="fa fa-bars"></i>
+				        {% for category in page.categories %}
+				          <a href="{{ site.baseurl }}/categories#{{ category | slugify }}">{{ category }}</a>{% if forloop.last == false %},{% endif %}
+				        {% endfor %}
+				      </span>
+				    {% endif %}
+				    {% if page.tags != nil and page.tags.size > 0 %}
+				      <span class="supplements-sep"></span>
+				      <span>
+				        <i class="fa fa-tags"></i>
+				        {% for tag in page.tags %}
+				          <a href="{{ site.baseurl }}/tags#{{ tag | slugify }}">{{ tag }}</a>{% if forloop.last == false %},{% endif %}
+				        {% endfor %}
+				      </span>
+				    {% endif %}
+				    {%- if page.last_modified_at -%}
+				      <br /> <br />
+				      <span class="last_modified_at">{% if site.data.configurable_lables.last_modified_at %}{{site.data.configurable_lables.last_modified_at}}{% else %}Last Modified at:{% endif %} {{ page.last_modified_at }}</span>
+				    {% endif %}
+				  </p>
+				{% endif %}
+			</div>
 			{% endif %}
 
+			<div class ="post_content">
+				{{content}}
+				{% if page.toTop != false %}
+				<a href="#" id="toTopButton">
+				  <i class="fa fa-arrow-circle-o-up"></i>
+				</a>
+				{% endif %}
+			</div>
 
-		</div>
-		{% endif %}
-		<div class ="post_content">
-			{{content}}
-			{% if page.toTop != false %}
-			<a href="#" id="toTopButton">
-			  <i class="fa fa-arrow-circle-o-up"></i>
-			</a>
+			{% if page.display_toc2 %}
+			<div id="toc2">
+			 	{% include toc.html html=content %}
+			</div>
 			{% endif %}
+
+
 		</div>
-		
 
 	</article>
+	{% if page.comments_id %}
+  		{% include comments.html issue_id=page.comments_id %}
+	{% endif %}
 </main>

data/_posts/2021-01-01-markdown-test-page.md

@@ -4,6 +4,7 @@ title: "Markdown Test Page"
 date: 2021-01-01
 tags: markdown test
 subtitle: "copied from https://github.com/fullpipe/markdown-test-page/tree/master"
+comments_id: 1
 ---
 # **bold title**
 

data/_posts/2023-07-13-title-for-champions.md

@@ -6,6 +6,9 @@ tags: champion test
 subtitle: "You're going to love this."
 categories: rest
 last_modified_at: 10.09.202
+display_toc2: true
+display_toc: false
+toTop: false
 ---
 # Code Block tests
 

data/_sass/default/_base.scss

@@ -18,6 +18,7 @@ body {
   display: flex;
   flex-direction: column;
   word-break: break-word;
+  color: $primary-color;
 }
 
 header {

data/_sass/default/_footer.scss

@@ -57,50 +57,72 @@ footer aside {
   max-height: max-content;
 }
 
+footer .footer_aside_auto section {
+  padding: 0 0 0 1em;
+  flex-grow: 1;
+  max-width: fit-content;
+}
 
 /* one item */
-footer aside section:first-child:nth-last-child(1) {
+footer .footer_aside section:first-child:nth-last-child(1) {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 100%;
 }
 
 /* two items */
-footer aside section:first-child:nth-last-child(2),
-footer aside section:first-child:nth-last-child(2) ~ section {
+footer .footer_aside section:first-child:nth-last-child(2),
+footer .footer_aside section:first-child:nth-last-child(2) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 50%;
 }
 
 /* three items */
-footer aside section:first-child:nth-last-child(3),
-footer aside section:first-child:nth-last-child(3) ~ section {
+footer .footer_aside section:first-child:nth-last-child(3),
+footer .footer_aside section:first-child:nth-last-child(3) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 33%;
 }
 
 /* four items */
-footer aside section:first-child:nth-last-child(4),
-footer aside section:first-child:nth-last-child(4) ~ section {
+footer .footer_aside section:first-child:nth-last-child(4),
+footer .footer_aside section:first-child:nth-last-child(4) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 25%;
 }
 
 /* five items */
-footer aside section:first-child:nth-last-child(5),
-footer aside section:first-child:nth-last-child(5) ~ section {
+footer .footer_aside section:first-child:nth-last-child(5),
+footer .footer_aside section:first-child:nth-last-child(5) ~ section {
   padding: 0 0 0 1em;
   flex-grow: 1;
   max-width: 20%;
 }
 
-footer aside section:first-child {
+/* six items */
+footer .footer_aside section:first-child:nth-last-child(6),
+footer .footer_aside section:first-child:nth-last-child(6) ~ section {
+  padding: 0 0 0 1em;
+  flex-grow: 1;
+  max-width: 16%;
+}
+
+footer .footer_aside section:first-child {
   padding: 0;
 }
 
+.footer_sitedescription0, 
+.footer_customcontent0, 
+.footer_customcontent20, 
+.footer_recentposts0, 
+.footer_categories0, 
+.footer_tags0 {
+  @include footer_elements_auto();
+}
+
 .footer_sitedescription1, 
 .footer_customcontent1, 
 .footer_customcontent21, 
@@ -146,7 +168,29 @@ footer aside section:first-child {
   @include footer_elements(5);
 }
 
+.footer_recentposts, 
+.footer_recentposts0, 
+.footer_recentposts1, 
+.footer_recentposts2, 
+.footer_recentposts3, 
+.footer_recentposts4, 
+.footer_recentposts5 {
+  ul li a {
+    text-transform: none;
+    border: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+}
 
+.footer_recentposts0, .footer_recentposts1 {
+  ul li {
+    flex-basis: 100%;
+  }
+  ul li a {
+    border: none;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+}
 
 @media (width >= $small) and (max-width: $large) {
   footer {

data/_sass/external/_comments.scss

@@ -0,0 +1,106 @@
+/*
+<main id="post">
+<section id="comments">
+<div class="comment-actions">
+    <h2>
+    <a>
+    <i>
+</div>
+<div id="comments-wrapper">
+    <ol>
+        <li class="comment">
+            <div class="commenter">
+                <img>
+                <a>
+                <div class="date-posted">
+                <span class="author-badge">
+            <div class="comment-body">
+                <p>
+        <li class="comment">
+</div>
+</section>
+</main>
+
+$primary-color:#032539;
+$secondary-color: #1c768f;
+$background-color: #fbf3f2;
+$accent-color: #fa991c;
+*/
+
+
+#comments {
+    word-break: keep-all;
+}
+
+.comment-actions {
+    display: flex;
+    align-items: center;
+
+
+    a {
+        background-color: $primary-color;
+        color: $background-color;
+        padding: 12px;
+        margin-left: auto;
+        border-radius: 4px;
+        text-decoration: none;
+    }
+}
+
+#comments-wrapper {
+
+    ol {
+        list-style-type: none;
+        padding: 0;
+    }
+
+    .commenter {
+
+        display: flex;
+        align-items: center;
+
+        img {
+            border-radius: 50%;
+            width: 50px;
+            margin-right: 10px;
+            vertical-align: middle;
+        }
+
+        a {
+            font-weight: bold;
+            color: $primary-color;
+            margin-right: 10px;
+        }
+
+        .date-posted {
+            font-style: italic;
+        }
+
+        .author-badge {
+            margin-left: auto;
+            padding: 8px;
+            background-color: $secondary-color;
+            border-radius: 24px;
+            font-weight: bold;
+        }
+    }
+
+    .comment-body {
+        margin-left: 70px; //50px width of image + 10px margin +10px???
+    }
+
+}
+
+
+@media screen and (max-width: $large) {
+    .comment-actions, #comments-wrapper .commenter, #comments-wrapper .commenter .date-posted {
+        display: block;
+        font-size: 0.9em;
+    }
+
+    #comments-wrapper .commenter .date-posted {
+        margin-bottom: 16px;
+        margin-top: 8px;
+    }
+
+}

data/_sass/functions/_mixins.scss

@@ -98,7 +98,6 @@
     flex-direction: column;
     align-items: center;
     // gap: -5px;
-    margin: auto;
     min-width: 6em;
 
     @media screen and (max-width: $large) {
@@ -271,6 +270,46 @@
                 }
             }
 
+            .archive_linktitle {
+                flex: 1;
+            }
+        }
+    }
+}
+
+@mixin footer_elements_auto() {
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        row-gap: 0;
+        column-gap: 0;
+        width: fit-content;
+
+        li {
+            display: flex;
+            justify-content: space-between;
+            align-items: left;
+            cursor: pointer;
+            overflow-wrap: break-word;
+            a {
+                text-decoration: none;
+                color: $background-color;
+                text-transform: lowercase;
+                letter-spacing: -1px;
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                padding: 0.5em;
+                text-align: left;
+
+                &:hover {
+                    @include hover();
+                }
+            }
+
             .archive_linktitle {
                 flex: 1;
             }

data/_sass/functions/_values.scss

@@ -20,4 +20,11 @@ $darkblue: #032539;
 $primary-color:#032539;
 $secondary-color: #1c768f;
 $background-color: #fbf3f2;
-$accent-color: #fa991c;
+$accent-color: #fa991c;
+
+@media (prefers-color-scheme: dark) {
+    $primary-color: #fbf3f2;
+    $secondary-color: #1c768f;
+    $background-color: #032539;
+    $accent-color: #fa991c;
+}

data/_sass/jekyll-theme-horizon-flow.scss

@@ -1,9 +1,10 @@
-@import "external/_normalize.scss";
-@import "external/_highlighter_rougify_base16dark.scss";
-
 @import "functions/_mixins.scss";
 @import "functions/_values.scss";
 
+@import "external/_normalize.scss";
+@import "external/_highlighter_rougify_base16dark.scss";
+@import "external/_comments.scss";
+
 @import "layouts/_archive.scss";
 @import "layouts/_categories.scss";
 @import "layouts/_home.scss";

data/_sass/layouts/_home.scss

@@ -31,7 +31,7 @@
 	}
 
 	a {
-		color: #022539;
+		color: $secondary-color;
 		text-decoration: none;
 
 		&:hover {
@@ -73,6 +73,12 @@
 		color: $primary-color;
 	}
 
+	span {
+		&:hover {
+			@include hover();
+		}
+	}
+
 
 	.page_count {
 		margin: 0 auto;

data/_sass/layouts/_post.scss

@@ -5,6 +5,30 @@
 
 
 
+/* ---------------------------------------------------- */
+/* ---------------------------------------------------- */
+/* grid */
+/* ---------------------------------------------------- */
+/* ---------------------------------------------------- */
+
+.grid {
+	display: grid;
+	grid-template-columns: repeat(12,minmax(0,1fr));
+}
+
+
+.post_header {
+	grid-column: span 12/span 12;
+}
+
+.post_content {
+	grid-column: span 10/span 10;
+}
+
+#toc2 {
+	grid-column: span 2/span 2;
+}
+
 /* ---------------------------------------------------- */
 /* ---------------------------------------------------- */
 /* content layout */
@@ -29,6 +53,9 @@
 		overflow-wrap: break-word;
 	}
 
+	h1:first-child{
+		margin-top: 0;
+	}
 
 	h2 {
 		@include default_header(0);
@@ -63,7 +90,7 @@
 		padding: 16px;
 
 		i {
-			color: $accent-color;
+			color: $primary-color;
 			font-size: 1.8em;
 		}
 	}
@@ -148,20 +175,12 @@
 	code.highlighter-rouge {
 		font-style: italic;
 		color: $primary-color;
-		background-color: $background-color;
+		background-color: rgba(0, 0, 0, 33%);
 		padding: 0 5px;
 	}
 }
 
 
-
-
-
-
-
-
-
-
 /* ---------------------------------------------------- */
 /* ---------------------------------------------------- */
 /* TOC */
@@ -188,11 +207,11 @@ article {
 
 #tocMenuButtonLabel {
 	font-size: 2em;
-	color: $accent-color;
+	color: $primary-color;
 	position: fixed;
 	bottom: 0;
 	right: 0;
-	padding: 1rem; /* Adjust padding as needed */
+	padding: 1rem;
 	z-index: 1;
 }
 
@@ -200,28 +219,31 @@ article {
 	display: block;
 	border: 1px solid $primary-color;
 	position: fixed;
-	top: 3vw; /* Adjust top, right, bottom, and left as needed */
-	right: 3vw;
+	top: 4vw;
+	right: 4vw;
 	min-width: 10vw;
 	max-width: 40vw;
 	background-color: $background-color;
-	z-index: 1;
+	z-index: 2;
 	overflow-x: hidden;
 	min-height: 10vh;
 	max-height: 80vh;
 
 	h1 {
-		text-shadow: 0px 0.1em 0.2em rgba(100, 100, 100, 0.5); /* Adjust text-shadow as needed */
+		text-shadow: 0px 0.1em 0.2em rgba(100, 100, 100, 0.5);
 		color: $primary-color;
 		font-size: 2em;
 		font-weight: bold;
-		letter-spacing: 1rem; /* Adjust letter-spacing as needed */
+		letter-spacing: 1rem;
 		text-align: center;
 	}
 
 	ul {
 		list-style: none;
-		padding-left: 24px; /* Remove default list padding */
+		padding-inline-start: 0;
+		ul {
+				padding-left: 1em;
+		}
 	}
 
 	li a {
@@ -229,7 +251,7 @@ article {
 		opacity: 0.8;
 		width: 80%;
 		display: block;
-		margin: 1rem auto; /* Adjust margin as needed */
+		margin: 1rem auto;
 	}
 
 	a {
@@ -274,7 +296,59 @@ article {
 }
 
 
+#toc2 {
+	font-size: 0.75em;
+	position: sticky;
+	top: 2vw;
+	z-index: 1;
+	transform: translate(2.5em);
+	color: $secondary-color;
+	align-self: start;
+	letter-spacing: -1px;
 
+	ul {
+		padding: 0;
+	}
+
+	ul ul {
+		padding-left: 0.8em;
+	}
+
+
+
+	li::marker {
+		content: ' >   ';
+		font-size: 0.8em;
+		font-weight: bold;
+		font-family: "Georgia";
+		vertical-align: middle;
+	  position: relative;
+	  top: -3px;
+	}
+
+	li a {
+		text-decoration: none;
+		color: $primary-color;
+		line-height: 1.5em;
+	}
+
+	li a:hover {
+		@include hover();
+		//font-size: 1.2em;
+	}
+}
+
+@media screen and (max-width: $xlarge) {
+	#toc2 {
+		font-size: 0.5em;
+	}
+}
+
+@media screen and (max-width: $large) {
+	#toc2 {
+		display: none;
+	}
+}
 
 
 /* ---------------------------------------------------- */
@@ -331,18 +405,12 @@ article {
 		}
 
 		.supplements a {
-			/* Set links to display as block-level elements so capitalize works*/
-			display: inline-block;
 			word-break: break-all;
 			&:hover {
 				@include hover();
 			}
 		  }
 
-		.supplements a::first-letter {
-			text-transform: capitalize;
-		  }
-
 		.supplements-sep::before {
 		    content: "\2022";
 		    padding-left: 0.5em;
@@ -353,4 +421,4 @@ article {
 	.post_header_content_parting_line {
 		margin: 2em 0;
 	}
-}
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-horizon-flow
 version: !ruby/object:Gem::Version
-  version: 1.0.3
+  version: 1.1.0
 platform: ruby
 authors:
 - Markus Schiller
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-09-14 00:00:00.000000000 Z
+date: 2024-08-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -118,6 +118,7 @@ files:
 - README.md
 - _config.yml
 - _includes/404.html
+- _includes/comments.html
 - _includes/footer.html
 - _includes/header.html
 - _includes/read_time.html
@@ -140,6 +141,7 @@ files:
 - _sass/default/_base.scss
 - _sass/default/_footer.scss
 - _sass/default/_header.scss
+- _sass/external/_comments.scss
 - _sass/external/_highlighter_rougify_base16dark.scss
 - _sass/external/_normalize.scss
 - _sass/functions/_mixins.scss