Code enhancement

3 files changed, 157 insertions, 163 deletions

diff --git a/layout/index.ejs b/layout/index.ejs
index 7b91e49..cfb032a 100644
--- a/layout/index.ejs
+++ b/layout/index.ejs
@@ -1,117 +1,111 @@
-<section class="hero">
-    <div class="hero-body">
-        <div class="container">
-            <% page.posts.each(function (post) { %>
-                <div class="columns post-entry">
-                    <div class="column is-8 is-offset-2">
-                        <div class="card">
-                            <!-- Post thumbnail with lazayload support -->
-                            <% if (post.thumbnail) { %>
-                                <div class="card-iamge">
-                                    <figure class="image is-16by9">
-                                        <% if (post.thumbnail) { %> 
-                                            <% if (theme.lazyload === true) { %>
-                                                <img class="lazy" data-src="<%= post.thumbnail %>" />
-                                            <% } else { %>
-                                                <img src="<%= post.thumbnail %>" />
-                                            <% } %>
-                                        <% } %>
-                                    </figure>
-                                </div>
+<% page.posts.each(function (post) { %>
+    <div class="columns ">
+        <div class="column is-8 is-offset-2">
+            <div class="card post-entry">
+                <!-- Post thumbnail with lazayload support -->
+                <% if (post.thumbnail) { %>
+                    <div class="card-iamge">
+                        <figure class="image is-16by9">
+                            <% if (post.thumbnail) { %> 
+                                <% if (theme.lazyload === true) { %>
+                                    <img class="lazy" data-src="<%= post.thumbnail %>" />
+                                <% } else { %>
+                                    <img src="<%= post.thumbnail %>" />
+                                <% } %>
                             <% } %>
+                        </figure>
+                    </div>
+                <% } %>
 
-                            <div class="card-content">
-                                
-                                <!-- Post title -->
-                                <p class="title is-4">
-                                    <%= post.title %>
-                                </p>
-
-                                <!-- Post meta info -->
-                                <div class="level">
-                                    <div class="level-left">
-                                        <div class="level-item">
+                <div class="card-content">
+                    
+                    <!-- Post title -->
+                    <p class="title is-4">
+                        <%= post.title %>
+                    </p>
 
-                                            <!-- Podcast duration with post date -->
-                                            <% if (post.podcast && theme.podcast) { %>
-                                                <div class="tags has-addons">
-                                                    <%
-                                                        const duration = post.podcast.duration;
-                                                        const hour = Math.floor(duration / 3600);
-                                                        const minute = Math.floor((duration / 60) % 60);
-                                                        const second = Math.floor(duration % 60);
-                                                        const viewstr = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
-                                                    %>
-                                                    <span class="tag is-danger"><%- viewstr %></span>
-                                                    <span class="tag"><%- date(post.date, theme.timeformat) %></span>
-                                                </div>
-                                            <% } else { %>
-                                                <div class="tags">
-                                                    <span class="tag is-danger">
-                                                        <%- date(post.date, theme.timeformat) %>
-                                                    </span>
-                                                </div>
-                                            <% } %> 
-                                        </div>
-                                        
-                                        <!-- Post tags -->
-                                        <div class="level-item">
-                                            <% if (post.tags) { %> 
-                                                <div class="tags">
-                                                    <% (post.tags).forEach(function(item) { %>
-                                                        <span class="tag"># <%= item.name %></span>
-                                                    <% }); %>
-                                                </div>
-                                            <% } %>
-                                        </div>
+                    <!-- Post meta info -->
+                    <div class="level">
+                        <div class="level-left">
+                            <div class="level-item">
 
+                                <!-- Podcast duration with post date -->
+                                <% if (post.podcast && theme.podcast) { %>
+                                    <div class="tags has-addons">
+                                        <%
+                                            const duration = post.podcast.duration;
+                                            const hour = Math.floor(duration / 3600);
+                                            const minute = Math.floor((duration / 60) % 60);
+                                            const second = Math.floor(duration % 60);
+                                            const viewstr = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
+                                        %>
+                                        <span class="tag is-danger"><%- viewstr %></span>
+                                        <span class="tag"><%- date(post.date, theme.timeformat) %></span>
                                     </div>
-                                </div>
-
-                                <!-- Post content or excerpt -->
-                                <section class="content has-text-weight-light is-size-6">
-                                    <% if (post.excerpt) { %>
-                                        <p><%- post.excerpt %></p>
-                                    <% } else { %>
-                                        <p><%- post.content %></p>
-                                    <% } %>
-                                </section>
+                                <% } else { %>
+                                    <div class="tags">
+                                        <span class="tag is-danger">
+                                            <%- date(post.date, theme.timeformat) %>
+                                        </span>
+                                    </div>
+                                <% } %> 
                             </div>
-
-                            <div class="card-footer">
-                                <a href="<%- url_for(post.path) %>" class="card-footer-item has-text-danger has-text-weight-medium is-uppercase">
-                                    <% if (post.podcast && theme.podcast) { %>
-                                        <%- __("listen") %>
-                                    <% } else { %> 
-                                        <%- __("read") %>
-                                    <% } %> 
-                                </a>
+                            
+                            <!-- Post tags -->
+                            <div class="level-item">
+                                <% if (post.tags) { %> 
+                                    <div class="tags">
+                                        <% (post.tags).forEach(function(item) { %>
+                                            <span class="tag"># <%= item.name %></span>
+                                        <% }); %>
+                                    </div>
+                                <% } %>
                             </div>
 
                         </div>
                     </div>
+
+                    <!-- Post content or excerpt -->
+                    <section class="content has-text-weight-light is-size-6">
+                        <% if (post.excerpt) { %>
+                            <p><%- post.excerpt %></p>
+                        <% } else { %>
+                            <p><%- post.content %></p>
+                        <% } %>
+                    </section>
                 </div>
-            <% }); %>
 
-            <!-- Page navigation -->
-            <% if (page.prev || page.next) { %>
-                <div class="columns pagination-bar">
-                    <div class="column is-8 is-offset-2">
-                        <nav class="pagination is-centered" role="navigation" aria-label="pagination">
-                            <% if (page.prev) { %>
-                                <a class="button is-light" href="<%- url_for(page.prev_link) %>"><%- __("prev") %></a>
-                            <% } else { %>
-                                <a class="button is-disabled is-light" disabled><%- __("prev") %></a>
-                            <% } %> 
-                            <% if (page.next) { %>
-                                <a class="button is-light" href="<%- url_for(page.next_link) %>"><%- __("next") %></a>
-                            <% } else { %>
-                                <a class="button is-disabled is-light" disabled><%- __("next") %></a>
-                            <% } %> 
-                        </nav>
-                    </div>
+                <div class="card-footer">
+                    <a href="<%- url_for(post.path) %>" class="card-footer-item has-text-danger has-text-weight-medium is-uppercase">
+                        <% if (post.podcast && theme.podcast) { %>
+                            <%- __("listen") %>
+                        <% } else { %> 
+                            <%- __("read") %>
+                        <% } %> 
+                    </a>
                 </div>
-            <% } %> 
+
+            </div>
+        </div>
+    </div>
+<% }); %>
+
+<!-- Page navigation -->
+<% if (page.prev || page.next) { %>
+    <div class="columns pagination-bar">
+        <div class="column is-8 is-offset-2">
+            <nav class="pagination is-centered" role="navigation" aria-label="pagination">
+                <% if (page.prev) { %>
+                    <a class="button is-light" href="<%- url_for(page.prev_link) %>"><%- __("prev") %></a>
+                <% } else { %>
+                    <a class="button is-disabled is-light" disabled><%- __("prev") %></a>
+                <% } %> 
+                <% if (page.next) { %>
+                    <a class="button is-light" href="<%- url_for(page.next_link) %>"><%- __("next") %></a>
+                <% } else { %>
+                    <a class="button is-disabled is-light" disabled><%- __("next") %></a>
+                <% } %> 
+            </nav>
         </div>
     </div>
-</section>
+<% } %>
diff --git a/layout/layout.ejs b/layout/layout.ejs
index 96d7f6a..d204ff4 100644
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@@ -4,7 +4,13 @@
     <body>
         <%- partial('_partial/header') %>
         <div class="wrapper">
-            <%- body %>
+            <section class="hero">
+                <div class="hero-body">
+                    <div class="container">
+                        <%- body %>
+                    </div>
+                </div>
+            </section>
         </div>
         <%- partial('_partial/footer') %> 
     </body>
diff --git a/layout/post.ejs b/layout/post.ejs
index 6b8ba67..9c04e82 100644
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -1,67 +1,61 @@
-<section class="hero">
-    <div class="hero-body">
-        <div class="container">
-            <div class="columns">
-                <div class="column is-8 is-offset-2">
-                    <div class="card">
-                        <% if (page.thumbnail) { %>
-                            <div class="card-iamge">
-                                <figure class="image is-16by9">
-                                    <% if (theme.lazyload === true) { %>
-                                        <img class="lazy" data-src="<%= page.thumbnail %>" />
-                                    <% } else { %>
-                                        <img src="<%= page.thumbnail %>" />
-                                    <% } %>
-                                </figure>
-                            </div>
+<div class="columns">
+    <div class="column is-8 is-offset-2">
+        <div class="card post-card">
+            <% if (page.thumbnail) { %>
+                <div class="card-iamge">
+                    <figure class="image is-16by9">
+                        <% if (theme.lazyload === true) { %>
+                            <img class="lazy" data-src="<%= page.thumbnail %>" />
+                        <% } else { %>
+                            <img src="<%= page.thumbnail %>" />
                         <% } %>
-                        <div class="card-content">
-                            <section class="section">
-                                <h2 class="title has-text-centered">
-                                    <%= page.title %>
-                                </h2>
-                                <% if (page.podcast) { %>
-                                    <div class="post-podcast-player"></div>
-                                    <script>
-                                        window.addEventListener("load", () => {
-                                            const player = new Shikwasa({
-                                                container: () => document.querySelector('.post-podcast-player'),
-                                                audio: {
-                                                    title: "<%= page.title %>",
-                                                    artist: "<%= page.podcast.author %>",
-                                                    cover: "<%= page.podcast.cover %>",
-                                                    src: "<%= page.podcast.media %>"
-                                                },
-                                                fixed: {
-                                                    type: "auto",
-                                                    position: "bottom"
-                                                },
-                                                themeColor: "red"
-                                            });
-                                        }, false);
-                                    </script>
-                                <% } %>
-                                <section class="content post-content is-size-6">
-                                    <%- page.content %>
-                                </section>
-                                <div class="level">
-                                    <div class="level-left">
-                                        <div class="level-item">
-                                            <% if (page.tags) { %>
-                                                <div class="tags">
-                                                    <% (page.tags).forEach(function(item) { %>
-                                                        <span class="tag"># <%= item.name %></span>
-                                                        <% }); %>
-                                                </div>
-                                                <% } %>
-                                        </div>
+                    </figure>
+                </div>
+            <% } %>
+            <div class="card-content">
+                <section class="section">
+                    <h2 class="title has-text-centered">
+                        <%= page.title %>
+                    </h2>
+                    <% if (page.podcast) { %>
+                        <div class="post-podcast-player"></div>
+                        <script>
+                            window.addEventListener("load", () => {
+                                const player = new Shikwasa({
+                                    container: () => document.querySelector('.post-podcast-player'),
+                                    audio: {
+                                        title: "<%= page.title %>",
+                                        artist: "<%= page.podcast.author %>",
+                                        cover: "<%= page.podcast.cover %>",
+                                        src: "<%= page.podcast.media %>"
+                                    },
+                                    fixed: {
+                                        type: "auto",
+                                        position: "bottom"
+                                    },
+                                    themeColor: "red"
+                                });
+                            }, false);
+                        </script>
+                    <% } %>
+                    <section class="content post-content is-size-6">
+                        <%- page.content %>
+                    </section>
+                    <div class="level">
+                        <div class="level-left">
+                            <div class="level-item">
+                                <% if (page.tags) { %>
+                                    <div class="tags">
+                                        <% (page.tags).forEach(function(item) { %>
+                                            <span class="tag"># <%= item.name %></span>
+                                            <% }); %>
                                     </div>
-                                </div>
-                            </section>
+                                <% } %>
+                            </div>
                         </div>
                     </div>
-                </div>
+                </section>
             </div>
         </div>
     </div>
-</section>
\ No newline at end of file
+</div>
\ No newline at end of file