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

View file

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

View file

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