implement sidebar related-posts style

implement remark42 commenting system

assets/css/home-style.css

@@ -66,6 +66,8 @@ h1 {
 }
 
 .post-card_main {
+	font-family: 'Montserrat', sans-serif;
+	font-weight: 400;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -79,7 +81,6 @@ h1 {
 	border-radius: 5px;
 	box-shadow: 0 1px 1px black, 0 2px 4px black;
 	transition: 0.5s;
-	padding: 20px;
 	font-size: 18px;
 }
 
@@ -101,8 +102,15 @@ h1 {
 	transform:translate3d(0,-5px,0);
 }
 
+.post-card_header {
+	font-family: 'Roboto', sans-serif;
+	font-weight: 300;
+	padding: 20px 30px 0;
+}
+
 .post-card_excerpt {
   text-align: justify;
+	padding: 0 30px;
 }
 
 a.post-card_main {
@@ -110,7 +118,6 @@ a.post-card_main {
 }
 
 .post-card_meta {
-	font-family: 'Roboto', sans-serif;
 	font-weight: 700;
 	text-transform: uppercase;
 	font-size: 14px;
@@ -132,6 +139,7 @@ footer.post-card_footer {
 	height: 100%;
 	margin-top: 20px;
 	justify-content: flex-end;
+	padding: 0 20px 20px;
 }
 
 article {

assets/css/page-style.css

@@ -74,10 +74,6 @@ pre {
 	text-align: left;
 }
 
-.mind-post_content h2 {
-	font-size: 31px;
-}
-
 .mind-post_content blockquote {
 	color: rgb(180, 180, 180);
 	font-style: italic;
@@ -120,9 +116,16 @@ pre {
 }
 
 .mind-post_sidebar {
-	padding: 50px 20px 0;
+	padding: 0 20px;
 	background-color: rgb(30, 30, 30);
 	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
+	height: 100%;
+}
+
+.mind-post_sidebar-content {
+	padding: 90px 0 10px;
+	position: sticky;
+	top: 0;
 }
 
 .post-card-sidebar_main {
@@ -130,7 +133,6 @@ pre {
 	display: flex;
 	flex-direction: column;
 	margin: 20px 0;
-	padding: 5px;
 
 	/* Style */
 	background-color: rgb(40, 40, 40);
@@ -164,6 +166,22 @@ pre {
 
 }
 
+.post-card-sidebar_meta {
+	font-weight: 700;
+	text-transform: uppercase;
+	font-size: 12px;
+	color: rgb(180, 180, 180);
+}
+
+.post-card-sidebar_header {
+	margin: 0 5px 0;
+	padding: 0 5px 10px;
+}
+
+.post-card-sidebar_tag {
+	color: #3fd5ff;
+}
+
 /* ARROW BOUNCE */
 @keyframes bounce {
 	0% { top: 88%; }

assets/css/screen.css

@@ -28,17 +28,21 @@ h1, h2, h3, h4, h5, h6 {
 
 h2 {
   margin: 38px 0 0;
-  font-size: 40px;
+  font-size: 35px;
 }
 
 h3 {
   margin: 0;
-  font-size: 33px;
+  font-size: 28px;
 }
 
 h4 {
   margin: 0;
-  padding: 20px 0 0;
+  font-size: 24px;
+}
+
+h5 {
+  margin: 0;
   font-size: 20px;
 }
 

assets/js/remark42-comments.js

@@ -0,0 +1,22 @@
+var remark_config = {
+  host: "https://comments.mind-overflow.net", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
+  site_id: 'mindoverflow',
+  components: ['embed'], // optional param; which components to load. default to ["embed"]
+                         // to load all components define components as ['embed', 'last-comments', 'counter']
+                         // available component are:
+                         //     - 'embed': basic comments widget
+                         //     - 'last-comments': last comments widget, see `Last Comments` section below
+                         //     - 'counter': counter widget, see `Counter` section below
+  max_shown_comments: 10, // optional param; if it isn't defined default value (15) will be used
+  theme: 'dark', // optional param; if it isn't defined default value ('light') will be used
+  locale: 'en' // set up locale and language, if it isn't defined default value ('en') will be used
+};
+
+(function(c) {
+  for(var i = 0; i < c.length; i++){
+    var d = document, s = d.createElement('script');
+    s.src = remark_config.host + '/web/' +c[i] +'.js';
+    s.defer = true;
+    (d.head || d.body).appendChild(s);
+  }
+})(remark_config.components || ['embed']);

default.hbs

@@ -23,6 +23,7 @@
       {{#is "post, page"}}
 
         <link rel="stylesheet" type="text/css" href="{{asset "css/page-style.css"}}" />
+        <script src="{{asset "js/remark42-comments.js"}}"></script>
 
           <title>{{meta_title}} – {{@site.title}}</title>
 
@@ -62,7 +63,6 @@
       {{{body}}}
       {{!-- All content gets inserted here, index.hbs, post.hbs, etc --}}
 
-
       <footer class="mind-site-footer_main unselectable">
         <div>
           <p>Copyright © 2019-20 ― Lorenzo Dellacà</p>

index.hbs

@@ -17,8 +17,8 @@
       {{#foreach posts}}
       	<article class="{{post_class}}">
           <a class="post-card_main" href="{{url}}">
+            <img class="post-card_feature-image" src="{{img_url feature_image size="s"}}" />
          		<header class="post-card_header">
-              <img class="post-card_feature-image" src="{{img_url feature_image size="s"}}" />
               <p class="post-card_meta"><span class="post-card_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
            		<h3>{{title}}</h3>
             </header>
@@ -55,5 +55,5 @@
 					   			'scaleMobile: 1.00'+
 							'})'+
 						'<\/script>');
-		}
+    }
 </script>

partials/posts-sidebar-loop.hbs

@@ -0,0 +1,16 @@
+{{#get "posts" limit="3" filter="tags:[{{post.tags}}]+id:-{{post.id}}" include="tags" as |related|}}
+    <h4>Similar posts</h4>
+    {{#foreach related}}
+      <article class="{{post_class}}">
+        <a class="post-card-sidebar_main" href="{{url}}">
+          <img class="post-card-sidebar_feature-image" src="{{img_url feature_image size="s"}}" />
+          <header class="post-card-sidebar_header">
+            <p class="post-card-sidebar_meta"><span class="post-card-sidebar_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
+            <h5>{{title}}</h5>
+          </header>
+        </a>
+      </article>
+    {{/foreach}}
+  {{else}}
+    <h4>No related posts</h4>
+  {{/get}}

post.hbs

@@ -1,38 +1,30 @@
 {{!< default}}
-{{#post}}
+<div class="mind-page-title unselectable">
-  <div class="mind-page-title unselectable">
+  {{#post}}
     <h1>{{title}}</h1>
-    <i class="arrow-down"></i>
+  {{/post}}
-  </div>
+  <i class="arrow-down"></i>
+</div>
 
-  <main>
+<main>
-		<div class="mind-content_main">
+	<div class="mind-content_main">
-      <div class="mind-post_main">
+    <div class="mind-post_main">
-        <div class="mind-post_sidebar"></div>
+      <aside class="mind-post_sidebar unselectable">
-        <div class="mind-post_content">
+      </aside>
-          <div class="mind-post_header">
+      {{#post}}
-            <img class="mind-post_feature-image" src="{{img_url feature_image}}"/>
+      <div class="mind-post_content">
-          </div>
+        <div class="mind-post_header">
-          {{content}}
+          <img class="mind-post_feature-image" src="{{img_url feature_image}}"/>
-        </div>
-        <div class="mind-post_sidebar">
-          {{#get "posts" limit="5"}}
-            <h3>You may also like</h3>
-            {{#foreach posts}}
-                <article class="{{post_class}}">
-                  <a class="post-card-sidebar_main" href="{{url}}">
-                    <header>
-                      <img class="post-card-sidebar_feature-image" src="{{img_url feature_image size="s"}}" />
-                      <h4>{{title}}</h4>
-                    </header>
-                  </a>
-              </article>
-            {{/foreach}}
-          {{else}}
-          <h2>No similar posts.</h2>
-          {{/get}}
         </div>
+        {{content}}
+        <div id="remark42"></div>
       </div>
+      {{/post}}
+      <aside class="mind-post_sidebar unselectable">
+        <div class="mind-post_sidebar-content">
+          {{> "posts-sidebar-loop"}}
+        </div>
+      </aside>
     </div>
-  </main>
+  </div>
-{{/post}}
+</main>