summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--layout/_partial/scripts.ejs2
-rw-r--r--layout/index.ejs13
-rw-r--r--layout/post.ejs23
3 files changed, 30 insertions, 8 deletions
diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs
index 1b20314..a60011f 100644
--- a/layout/_partial/scripts.ejs
+++ b/layout/_partial/scripts.ejs
@@ -19,7 +19,7 @@
<!-- Highlight.js support -->
<% if (theme.highlight.enable === true) { %>
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/highlight.pack.min.js"></script>
+ <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 %>.min.css">
<link id="highlight-dark-theme" rel="stylesheet"
diff --git a/layout/index.ejs b/layout/index.ejs
index ae1db98..42f1a4f 100644
--- a/layout/index.ejs
+++ b/layout/index.ejs
@@ -24,14 +24,15 @@
<!-- Post meta -->
<div class="post-meta">
- <% if (post.podcast && theme.podcast && post.duration) { %>
+ <% if (post.podcast && theme.podcast) { %>
<%
- 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');
+ 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');
%>
- <div class="post-duration"><%- duration %></div>
+ <div class="post-duration"><%- viewstr %></div>
<% } %>
<div class="post-time">
<%- date(post.date, "MMM, D YYYY") %>
diff --git a/layout/post.ejs b/layout/post.ejs
index 0de6e5a..d83d694 100644
--- a/layout/post.ejs
+++ b/layout/post.ejs
@@ -2,10 +2,31 @@
<!-- Post thumbnail with lazayload support -->
<div class="post-thumbnail" style="background-image: url('<%= page.thumbnail %>');"></div>
+ <!-- Podcast Player using Shikwasa -->
+ <% 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.thumbnail %>",
+ src: "<%= page.podcast.media %>"
+ },
+ fixed: {
+ type: "static"
+ }
+ });
+ }, false);
+ </script>
+ <% } %>
+
<!-- Post title and content -->
<div class="post-meta">
<div class="post-time">
- <%- date(page.date, "MMM, D YYYY" ) %>
+ <%- date(page.date, "MMM, D YYYY") %>
</div>
</div>
<h1 class="post-title"><%= page.title %></h1>