made posts always open up into reading mode

This commit is contained in:
Ellpeck 2019-10-09 23:58:36 +02:00
parent c63833ebba
commit 175202554d
5 changed files with 25 additions and 56 deletions

View file

@ -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">

View file

@ -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)

View file

@ -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();
});
}

View file

@ -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;
} }

View file

@ -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 {