added title and description changes based on area

This commit is contained in:
Ellpeck 2019-10-04 14:51:36 +02:00
parent bd6fe05510
commit 2cc7bdc9f6
3 changed files with 62 additions and 17 deletions

View file

@ -8,7 +8,7 @@
<title>Ellpeck.de</title> <title>Ellpeck.de</title>
<meta name="author" content="Ellpeck"> <meta name="author" content="Ellpeck">
<meta name="description" content="Ellpeck's little internet place"> <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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
@ -16,9 +16,9 @@
<link rel="stylesheet" href="style/style.css"> <link rel="stylesheet" href="style/style.css">
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico">
<meta name="og:title" content="Ellpeck.de"> <meta property="og:title" content="Ellpeck.de">
<meta name="og:description" content="Ellpeck's little internet place"> <meta property="og:description" content="Ellpeck's little internet place">
<meta name="og:image" content="https://www.ellpeck.de/res/logoSmall.png"> <meta property="og:image" content="https://www.ellpeck.de/res/logoSmall.png">
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Ellpeck"> <meta name="twitter:site" content="@Ellpeck">
<meta name="twitter:creator" content="@Ellpeck"> <meta name="twitter:creator" content="@Ellpeck">

View file

@ -11,7 +11,7 @@ $.ajax({
let list = $('#blog-list'); let list = $('#blog-list');
list.html(""); list.html("");
for (let i = json.length - 1; i >= 0; i--) { for (let i = json.length - 1; i >= 0; i--) {
var obj = json[i]; let obj = json[i];
let id = obj["id"]; let id = obj["id"];
let p = ""; 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 text-muted blog-summary" id="blog-summary-' + id + '">' + obj["summary"] + '</div>';
p += '<div class="card-text" id="blog-post-' + id + '"></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"]; let discussLink = obj["discuss"];
if (discussLink) if (discussLink)
p += '<a href="' + discussLink + '" class="blog-discuss" id="blog-discuss-' + id + '"></a>' 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 () { $("#blog-button-" + id).on('click', function () {
var post = $("#blog-post-" + id); let post = $("#blog-post-" + id);
if (post.html() !== "") { if (post.html() !== "") {
var newHash = "#blog";
history.pushState(null, null, newHash);
updateMeta(newHash);
post.html(""); post.html("");
var discuss = $("#blog-discuss-" + id); let discuss = $("#blog-discuss-" + id);
if (discuss.length) if (discuss.length)
discuss.html(""); discuss.html("");
$("#blog-summary-" + id).show(); $("#blog-summary-" + id).show();
history.pushState(null, null, "#blog");
} else { } else {
openBlogPost(id);
history.pushState(null, null, "#blog-" + id); history.pushState(null, null, "#blog-" + id);
openBlogPost(obj);
} }
}); });
} }
if (window.location.hash.startsWith("#blog-")) { var blogId = getBlogIdFromHash(window.location.hash);
var anchor = $(window.location.hash); if (blogId) {
if (anchor.length) { for (var i = 0; i < json.length; i++) {
openBlogPost(window.location.hash.substring(6), function () { var obj = json[i];
if (obj["id"] !== blogId)
continue;
var anchor = $("#blog-" + blogId);
openBlogPost(obj, function () {
$('html, body').animate({ $('html, body').animate({
scrollTop: anchor.offset().top scrollTop: anchor.offset().top
}, 0) }, 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) { $.get("blog/" + id + ".md", function (markdown) {
let html = converter.makeHtml(markdown); let html = converter.makeHtml(markdown);
$("#blog-post-" + id).html(html); $("#blog-post-" + id).html(html);
var discuss = $("#blog-discuss-" + id); let discuss = $("#blog-discuss-" + id);
if (discuss.length) if (discuss.length)
discuss.html("Discuss this post"); discuss.html("Discuss this post");
$("#blog-summary-" + id).hide(); $("#blog-summary-" + id).hide();
setTitleAndDesc(obj["name"], obj["summary"]);
PR.prettyPrint(); PR.prettyPrint();
if (onDone) if (onDone)
onDone(); onDone();

View file

@ -22,7 +22,12 @@ $(function () {
openModals(window.location.hash); openModals(window.location.hash);
$('a').on('click', function () { $('a').on('click', function () {
openModals($(this).attr('href')); openModals($(this).attr('href'));
});; });
updateMeta(window.location.hash);
$(window).on("hashchange", function () {
updateMeta(window.location.hash);
});
$('.navbar-collapse a').on('click', function () { $('.navbar-collapse a').on('click', function () {
$('.navbar-collapse').collapse('hide'); $('.navbar-collapse').collapse('hide');
@ -43,6 +48,28 @@ $(function () {
PR.prettyPrint(); 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) { function getCookie(key) {
let c = document.cookie; let c = document.cookie;
if (!c) if (!c)