added title and description changes based on area

index.html

@@ -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 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:site" content="@Ellpeck">
     <meta name="twitter:creator" content="@Ellpeck">

scripts/blog.js

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

scripts/main.js

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