Issue expressjs#1483

- add gutter links for tags - add JS to handle gutter tags - add CSS for gutter + posts - add blog specfic layout
chrisdel101 · May 6, 2024 · e1196ec · e1196ec
1 parent 4878e46
commit e1196ec
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 11 deletions.
diff --git a/_includes/blog/menu.md b/_includes/blog/menu.md
@@ -0,0 +1,10 @@
+<ul id="blog-side-menu">
+    {% for tag in site.tags %}
+  <h3>{{ tag[0] }}</h3>
+    <ul>
+        {% for post in tag[1] %}
+        <li><a href="{{ post.url }}">{{ post.title }}</a></li>
+        {% endfor %}
+    </ul>
+{% endfor %}  
+</ul>
diff --git a/_layouts/blog-posts.html b/_layouts/blog-posts.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!---
+ Copyright (c) 2016 StrongLoop, IBM, and Express Contributors
+ License: MIT
+-->
+<html lang="{{ page.lang }}">
+  {% include head.html %}
+
+  <body>
+
+    <section class="content">
+      <h1>BLOG POSTS LAYOUT</h1>
+
+      {% include header/header-{{ page.lang }}.html %}
+
+      {% include blog/menu.md %}
+
+      <div id="overlay"></div>
+
+      {{ content }}
+
+    </section>
+
+    {% include footer/footer-{{ page.lang }}.html %}
+    <script src="/js/theme.js"></script>
+
+  </body>
+
+</html>
diff --git a/css/style.css b/css/style.css
@@ -740,7 +740,8 @@ footer {
 
 /* secondary menu */
 
-#menu {
+#menu,
+#blog-side-menu {
   position: fixed;
   margin: 0;
   padding: 0 10px 0 0;
@@ -752,37 +753,44 @@ footer {
   overflow-y: auto;
 }
 
-#menu em {
+#menu em,
+#blog-side-menu em {
   font-weight: bold;
   color: #888;
 }
 
-#menu li {
+#menu li,
+#blog-side-menu li {
   list-style: none;
 }
 
-#menu ul {
+#menu ul,
+#blog-side-menu ul {
   height: 0;
   overflow: hidden;
 }
 
-#menu ul.active {
+#menu ul.active,
+#blog-side-menu ul.active {
   height: auto;
   padding: 0;
 }
 
-#menu > li > a {
+#menu > li > a,
+#blog-side-menu > li > a {
   color: #353535;
   font-weight: bold;
   font-size: 15px;
 }
 
-#menu ul a {
+#menu ul a,
+#blog-side-menu ul a {
   color: #555;
   padding-right: 7px;
 }
 
-#menu ul a.active {
+#menu ul a.active,
+#blog-side-menu ul a.active {
   color: #259dff;
 }
 
@@ -1203,19 +1211,21 @@ h2 a {
 }
 #page-doc:has(> h1#express-blog) {
   min-height: 300px;
+  overflow-y: scroll;
 }
 .blog-posts {
   display: flex;
   flex-direction: column;
+  row-gap: 10px;
 }
 .blog-post {
   width: 100%;
   background-color: #eee;
   display: flex;
-  padding: 10px
+  padding: 10px;
 }
-.blog-img {
-  height: 100%;
+.blog-post.active {
+  height: 300px;
 }
 .blog-post img {
   max-width: 100%;
@@ -1227,11 +1237,14 @@ h2 a {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  padding-right: 5px;
 }
 .blog-post .right-col {
   flex: 1;
   display: flex;
   align-items: center;
+  max-width: 100%;
+  overflow: hidden;
 }
 .blog-post .blog-details {
   display: flex;
@@ -1248,6 +1261,14 @@ h2 a {
 .blog-title a {
   color: #000;
 }
+.blog-excerpt {
+  color: initial;
+  line-height: 1.2rem;
+}
+.blog-img {
+  max-width: 100%;
+  margin: auto;
+}
 /* blog tablet and up*/
 @media (min-width:768px) {
   .blog-post {
@@ -1276,6 +1297,13 @@ h2 a {
   .blog-details  {
     font-size: 1rem;
   }
+  .blog-excerpt {
+    line-height: initial;
+    font-size: 1.2em;
+    font-weight: 300;
+    margin-top: auto;
+    margin-bottom: 10px;
+  }
 }
 /* blog desktop */
 @media (min-width:899px) {

diff --git a/js/app.js b/js/app.js
@@ -152,6 +152,14 @@ $(function(){
     }
 
   })
+  // show/hide blog side menu link
+  if (window.location.pathname.includes('/blog/posts.html')) {
+    $('#blog-side-menu').find('h3').on('click', function() {
+        // Remove prev 'active's 
+        $(this).next().siblings().removeClass('active');
+        $(this).next().addClass('active')
+      })
+  }
 
   // show mobile menu
   $('#nav-button, #overlay').click(function () {