added title and description changes based on area
This commit is contained in:
Ellpeck
parent
bd6fe05510
commit
2cc7bdc9f6
3 changed files with 62 additions and 17 deletions
|
|
@ -8,7 +8,7 @@
|
|||
<title>Ellpeck.de</title>
|
||||
<meta name="author" content="Ellpeck">
|
||||
<meta name="description" content="Ellpeck's little internet place">
|
||||
<meta name="keywords" content="Ellpeck, Actually Additions, Rock Bottom, Programming, Minecraft, Game Development, Nature's Aura">
|
||||
<meta name="keywords" content="Ellpeck, Actually Additions, Rock Bottom, Programming, Minecraft, Game Development, Nature's Aura, C#, Java, Blog, Tutorial, Foe Frenzy">
|
||||
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
|
||||
|
|
@ -16,9 +16,9 @@
|
|||
<link rel="stylesheet" href="style/style.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
|
||||
<meta name="og:title" content="Ellpeck.de">
|
||||
<meta name="og:description" content="Ellpeck's little internet place">
|
||||
<meta name="og:image" content="https://www.ellpeck.de/res/logoSmall.png">
|
||||
<meta property="og:title" content="Ellpeck.de">
|
||||
<meta property="og:description" content="Ellpeck's little internet place">
|
||||
<meta property="og:image" content="https://www.ellpeck.de/res/logoSmall.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@Ellpeck">
|
||||
<meta name="twitter:creator" content="@Ellpeck">
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ $.ajax({
|
|||
let list = $('#blog-list');
|
||||
list.html("");
|
||||
for (let i = json.length - 1; i >= 0; i--) {
|
||||
var obj = json[i];
|
||||
let obj = json[i];
|
||||
let id = obj["id"];
|
||||
|
||||
let p = "";
|
||||
|
|
@ -22,51 +22,69 @@ $.ajax({
|
|||
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>";
|
||||
var discussLink = obj["discuss"];
|
||||
let discussLink = obj["discuss"];
|
||||
if (discussLink)
|
||||
p += '<a href="' + discussLink + '" class="blog-discuss" id="blog-discuss-' + id + '"></a>'
|
||||
p += '</div></div>';
|
||||
list.append(p);
|
||||
|
||||
$("#blog-button-" + id).on('click', function () {
|
||||
var post = $("#blog-post-" + id);
|
||||
let post = $("#blog-post-" + id);
|
||||
if (post.html() !== "") {
|
||||
var newHash = "#blog";
|
||||
history.pushState(null, null, newHash);
|
||||
updateMeta(newHash);
|
||||
|
||||
post.html("");
|
||||
var discuss = $("#blog-discuss-" + id);
|
||||
let discuss = $("#blog-discuss-" + id);
|
||||
if (discuss.length)
|
||||
discuss.html("");
|
||||
$("#blog-summary-" + id).show();
|
||||
history.pushState(null, null, "#blog");
|
||||
} else {
|
||||
openBlogPost(id);
|
||||
history.pushState(null, null, "#blog-" + id);
|
||||
openBlogPost(obj);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (window.location.hash.startsWith("#blog-")) {
|
||||
var anchor = $(window.location.hash);
|
||||
if (anchor.length) {
|
||||
openBlogPost(window.location.hash.substring(6), function () {
|
||||
var blogId = getBlogIdFromHash(window.location.hash);
|
||||
if (blogId) {
|
||||
for (var i = 0; i < json.length; i++) {
|
||||
var obj = json[i];
|
||||
if (obj["id"] !== blogId)
|
||||
continue;
|
||||
|
||||
var anchor = $("#blog-" + blogId);
|
||||
openBlogPost(obj, function () {
|
||||
$('html, body').animate({
|
||||
scrollTop: anchor.offset().top
|
||||
}, 0)
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function openBlogPost(id, onDone) {
|
||||
function getBlogIdFromHash(hash) {
|
||||
if (hash.startsWith("#blog-"))
|
||||
return hash.substring(6);
|
||||
return "";
|
||||
}
|
||||
|
||||
function openBlogPost(obj, onDone) {
|
||||
let id = obj["id"];
|
||||
$.get("blog/" + id + ".md", function (markdown) {
|
||||
let html = converter.makeHtml(markdown);
|
||||
$("#blog-post-" + id).html(html);
|
||||
|
||||
var discuss = $("#blog-discuss-" + id);
|
||||
let discuss = $("#blog-discuss-" + id);
|
||||
if (discuss.length)
|
||||
discuss.html("Discuss this post");
|
||||
$("#blog-summary-" + id).hide();
|
||||
|
||||
setTitleAndDesc(obj["name"], obj["summary"]);
|
||||
|
||||
PR.prettyPrint();
|
||||
if (onDone)
|
||||
onDone();
|
||||
|
|
|
|||
|
|
@ -22,7 +22,12 @@ $(function () {
|
|||
openModals(window.location.hash);
|
||||
$('a').on('click', function () {
|
||||
openModals($(this).attr('href'));
|
||||
});;
|
||||
});
|
||||
|
||||
updateMeta(window.location.hash);
|
||||
$(window).on("hashchange", function () {
|
||||
updateMeta(window.location.hash);
|
||||
});
|
||||
|
||||
$('.navbar-collapse a').on('click', function () {
|
||||
$('.navbar-collapse').collapse('hide');
|
||||
|
|
@ -43,6 +48,28 @@ $(function () {
|
|||
PR.prettyPrint();
|
||||
});
|
||||
|
||||
function updateMeta(hash) {
|
||||
var title;
|
||||
if (hash === "#projects") {
|
||||
title = "Projects";
|
||||
} else if (hash === "#social") {
|
||||
title = "Social";
|
||||
} else if (hash === "#about") {
|
||||
title = "About"
|
||||
} else if (hash === "#blog") {
|
||||
title = "Blog"
|
||||
}
|
||||
setTitleAndDesc(title, "Ellpeck's little internet place");
|
||||
}
|
||||
|
||||
function setTitleAndDesc(title, desc) {
|
||||
let fullTitle = "Ellpeck.de" + (title ? " - " + title : "");
|
||||
$('meta[property="og:title"]').attr("content", fullTitle);
|
||||
document.title = fullTitle;
|
||||
$('meta[property="og:description"]').attr("content", desc);
|
||||
$('meta[name="description"]').attr("content", desc);
|
||||
}
|
||||
|
||||
function getCookie(key) {
|
||||
let c = document.cookie;
|
||||
if (!c)
|
||||
|
|
|
|||
Loading…
Reference in a new issue