made posts always open up into reading mode
This commit is contained in:
parent
c63833ebba
commit
175202554d
5 changed files with 25 additions and 56 deletions
|
@ -149,7 +149,7 @@
|
||||||
<div class="list-display rounded">
|
<div class="list-display rounded">
|
||||||
<h1>Blog</h1>
|
<h1>Blog</h1>
|
||||||
<p>
|
<p>
|
||||||
Occasionally I enjoy writing stuff. So here's some of the stuff I've written. Just click on any of the headers to expand the post. Alternatively, you can subscribe to this blog using <a href="/rss.xml">RSS</a>, <a href="/atom.xml">Atom</a> or <a href="/feed.json">JSON</a>.
|
Occasionally I enjoy writing stuff. So here's some of the stuff I've written. Just click on any of the headers to open the post. Alternatively, you can subscribe to this blog using <a href="/rss.xml">RSS</a>, <a href="/atom.xml">Atom</a> or <a href="/feed.json">JSON</a>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div id="blog-list">
|
<div id="blog-list">
|
||||||
|
|
|
@ -41,7 +41,7 @@ module.exports = function () {
|
||||||
document.querySelector('meta[property="og:description"]').setAttribute("content", post["summary"]);
|
document.querySelector('meta[property="og:description"]').setAttribute("content", post["summary"]);
|
||||||
|
|
||||||
var nav = "";
|
var nav = "";
|
||||||
nav += '<a class="nav-item nav-link" href="/#blog-' + id + '">Back to Main Page</a>';
|
nav += '<a class="nav-item nav-link" href="/#blog">Back to Main Page</a>';
|
||||||
if (i > 0)
|
if (i > 0)
|
||||||
nav += '<a class="nav-item nav-link" href="/blog-' + json[i - 1]["id"] + '">Previous Post</a>';
|
nav += '<a class="nav-item nav-link" href="/blog-' + json[i - 1]["id"] + '">Previous Post</a>';
|
||||||
if (i < json.length - 1)
|
if (i < json.length - 1)
|
||||||
|
|
|
@ -18,60 +18,11 @@ $.ajax({
|
||||||
p += '<a class="blog-anchor" id="blog-' + id + '"></a>';
|
p += '<a class="blog-anchor" id="blog-' + id + '"></a>';
|
||||||
p += '<div class="card bg-light blog-entry rounded-0">';
|
p += '<div class="card bg-light blog-entry rounded-0">';
|
||||||
p += '<div class="card-body">';
|
p += '<div class="card-body">';
|
||||||
p += '<a class="blog-button" id="blog-button-' + id + '"><h2 class="card-title">' + obj["name"] + '</h2></a>';
|
p += '<h2 class="card-title"><a class="blog-button" href="/blog-' + id + '">' + obj["name"] + '</a></h2>';
|
||||||
p += '<a class="reading-mode" href="/blog-' + id + '" id="reading-mode-' + id + '"></a>';
|
p += '<div class="card-text text-muted blog-summary">' + obj["summary"] + '</div>';
|
||||||
p += '<div class="card-text text-muted blog-summary" id="blog-summary-' + id + '">' + obj["summary"] + '</div>';
|
|
||||||
p += '<div class="card-text" id="blog-post-' + id + '"></div>';
|
|
||||||
p += '<span class="text-muted project-status">' + obj["date"] + "</span>";
|
p += '<span class="text-muted project-status">' + obj["date"] + "</span>";
|
||||||
var discussLink = obj["discuss"];
|
|
||||||
if (discussLink)
|
|
||||||
p += '<a href="' + discussLink + '" class="blog-discuss" id="blog-discuss-' + id + '"></a>'
|
|
||||||
p += '</div></div>';
|
p += '</div></div>';
|
||||||
list.append(p);
|
list.append(p);
|
||||||
|
|
||||||
$("#blog-button-" + id).on('click', function () {
|
|
||||||
var post = $("#blog-post-" + id);
|
|
||||||
if (post.html() !== "") {
|
|
||||||
post.html("");
|
|
||||||
var discuss = $("#blog-discuss-" + id);
|
|
||||||
if (discuss.length)
|
|
||||||
discuss.html("");
|
|
||||||
$("#blog-summary-" + id).show();
|
|
||||||
$("#reading-mode-" + id).html("");
|
|
||||||
history.pushState(null, null, "#blog");
|
|
||||||
} else {
|
|
||||||
openBlogPost(id);
|
|
||||||
history.pushState(null, null, "#blog-" + id);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (window.location.hash.startsWith("#blog-")) {
|
|
||||||
var anchor = $(window.location.hash);
|
|
||||||
if (anchor.length) {
|
|
||||||
openBlogPost(window.location.hash.substring(6), function () {
|
|
||||||
$('html, body').animate({
|
|
||||||
scrollTop: anchor.offset().top
|
|
||||||
}, 0)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function openBlogPost(id, onDone) {
|
|
||||||
$.get("blog/" + id + ".md", function (markdown) {
|
|
||||||
let html = converter.makeHtml(markdown);
|
|
||||||
$("#blog-post-" + id).html(html);
|
|
||||||
|
|
||||||
var discuss = $("#blog-discuss-" + id);
|
|
||||||
if (discuss.length)
|
|
||||||
discuss.html("Discuss this post");
|
|
||||||
$("#blog-summary-" + id).hide();
|
|
||||||
$("#reading-mode-" + id).html("Reading Mode");
|
|
||||||
|
|
||||||
PR.prettyPrint();
|
|
||||||
if (onDone)
|
|
||||||
onDone();
|
|
||||||
});
|
|
||||||
}
|
|
|
@ -29,4 +29,14 @@ body {
|
||||||
|
|
||||||
.modal-content {
|
.modal-content {
|
||||||
background-color: #404142;
|
background-color: #404142;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-button:link,
|
||||||
|
.blog-button:visited {
|
||||||
|
color: #d8d8d8 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-button:hover,
|
||||||
|
.blog-button:active {
|
||||||
|
color: white !important;
|
||||||
}
|
}
|
|
@ -86,8 +86,16 @@ body {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-button {
|
.blog-button:link,
|
||||||
cursor: pointer;
|
.blog-button:visited {
|
||||||
|
color: rgb(73, 73, 73);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blog-button:hover,
|
||||||
|
.blog-button:active {
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blog-entry {
|
.blog-entry {
|
||||||
|
|
Loading…
Reference in a new issue