Making progress

4 files changed, 73 insertions, 8 deletions

diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
index 6e6f5fd..1206434 100644
--- a/layout/_partial/head.ejs
+++ b/layout/_partial/head.ejs
@@ -20,9 +20,6 @@
 
     <!-- Scripts and styles -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma/css/bulma.min.css">
-    <% if (is_post() && theme.podcast && post.podcast) { %>
-        <script src="https://cdn.jsdelivr.net/npm/shikwasa/dist/shikwasa.min.js"></script>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shikwasa/dist/shikwasa.min.css">
-    <% } %>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
     <%- css("css/style.css") %>
 </head>
\ No newline at end of file
diff --git a/layout/_partial/header.ejs b/layout/_partial/header.ejs
index e69de29..e96f62b 100644
--- a/layout/_partial/header.ejs
+++ b/layout/_partial/header.ejs
@@ -0,0 +1,20 @@
+<header class="header">
+    <div class="header-title">
+        <%= config.title %>
+    </div>
+    <nav class="header-navbar">
+        <ul class="header-menu">
+            <% for (let index in theme.navbar) { %>
+                <% 
+                    const mapping = theme.navbar[index];
+                    const link = mapping[0];
+                    const favicon = mapping[1];
+                    let outter = link.startsWith("https://") ? true : false;
+                %>
+                <a href="<%= link %>" target="<%= outter ? '_blank' : '_self' %>">
+                    <i class="<%= favicon %>"></i>
+                </a>
+            <% } %>
+        </ul>
+    </nav>
+</header>
\ No newline at end of file
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index 662702a..588c843 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -4,12 +4,29 @@
     <script>
         window.lazyLoadOptions = {
             elements_selector: ".lazy",
-            threshold: 0
+            threshold: 0,
+            effect: "fadeIn"
         };
     </script>
 <% } %>
 
 <!-- Darkmode support -->
-<script defer src="https://cdn.jsdelivr.net/npm/darkmode-js/lib/darkmode-js.min.js"></script>
+
 
 <!-- Highlight.js support -->
+<% if (theme.highlight.enable === true) { %> 
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/highlight.pack.min.js"></script>
+    <link id="highlight-light-theme" rel="stylesheet" 
+        href="https://cdn.jsdelivr.net/npm/[email protected]/styles/<%= theme.highlight.lightmode %>.css">
+    <link id="highlight-dark-theme" rel="stylesheet"
+        href="https://cdn.jsdelivr.net/npm/[email protected]/styles/<%= theme.highlight.darkmode %>.css">
+    <script>
+        
+    </script>
+<% } %>
+
+<!-- Shikwasa Player support -->
+<% if (is_post() && theme.podcast && page.podcast) { %>
+    <script defer src="https://cdn.jsdelivr.net/npm/shikwasa/dist/shikwasa.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/shikwasa/dist/shikwasa.min.css">
+<% } %>
diff --git a/layout/index.ejs b/layout/index.ejs
index 9d0d7bd..1857e73 100644
--- a/layout/index.ejs
+++ b/layout/index.ejs
@@ -1,19 +1,50 @@
 <section class="posts">
     <% page.posts.each(function (post) { %>
         <article class="post">
+            <!-- Post thumbnail with lazayload support -->
             <% if (post.thumbnail) { %> 
-                <% if (theme.lazyload) { %>
+                <% if (theme.lazyload === true) { %>
                     <div class="post-thumbnail lazy" data-bg="<%= post.thumbnail %>"></div>
                 <% } else { %>
                     <div class="post-thumbnail" style="background-image: url('<%= post.thumbnail %>');"></div>
                 <% } %>
             <% } %>
-            <h1 class="post-title"><%= post.title %></h1>
+
+            <!-- Post title and excerpt -->
+            <h1 class="post-title">
+                <a class="post-link" href="<%- url_for(post.path) %>">
+                    <%= post.title %>
+                </a>
+            </h1>
             <% if (post.excerpt) { %>
                 <div class="post-excerpt"><%- post.excerpt %></div>
             <% } else { %>
                 <div class="post-content"><%- post.content %></div>
             <% } %>
+
+            <!-- Post meta -->
+            <div class="post-meta">
+                <% if (post.podcast && theme.podcast && post.duration) { %>
+                    <%
+                        const hour = Math.floor(post.duration / 3600);
+                        const minute = Math.floor((post.duration / 60) % 60);
+                        const second = Math.floor(post.duration % 60);
+                        const duration = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
+                    %>
+                    <div class="post-duration"><%- duration %></div>
+                <% } %>
+                <div class="post-time">
+                    <%- date(post.date, "MMM, D YYYY") %> 
+                </div>
+                <% if (post.tags) { %> 
+                    <div class="post-tags">
+                        <% (post.tags).forEach(function(item) { %>
+                            <span class="post-tag"><%= item.name %></span>
+                        <% }); %>
+                    </div>
+                <% } %>
+            </div>
+            
         </article>
     <% }) %>
 </section>
\ No newline at end of file