Notification on hatenablog

notification-on-hatenablog.html

<style>
.popup {
  position: relative;
  left: 32px;
  right: 32px;
  bottom: 32px;
  background-color: #333;
  color: white;
  position: fixed;
  padding: 16px;
  border-radius: 16px;
}
.popup .description {
  font-size: 24px;
  line-height: 2;
}
.popup .description a {
  color: white;
}
.popup .button {
  line-height: 2;
  border-radius: 4px;
  padding: 8px;
  text-decoration: none;
  text-shadow: none;
  color: white;
}
.popup .button-primary {
  background-color: tomato;
}
.popup .button-cancel {
  background-color: gray;
}
</style>

<div id='notificationPopup' class='popup'>
  <p class='description'>このブログは<a href='https://i-beam.org/'>i-beam.org</a>に引っ越しました。</p>
  <p class='buttons'>
    <a id='jumpToNewBlog' class='button button-primary' href='#'>移動する</a>
    <a id='closeNotificationPopup' class='button button-cancel' href='#'>閉じる</a>
  </p>
</div>


<script>
(function() {
  function newPathOf(path) {
    var links = path.split('/');
    if (links.length < 2) {
    } else if (links[1] === 'entry') {
      path = '/' + links.slice(2).join('/') + '/';
    } else if (links[1] === 'archive' && links[2] === 'category') {
      var tagname = links[3].toLowerCase().replace(/%2b/g, '').replace(/%2f/g, '-');
      path = ['/tags', tagname, ''].join('/');
    } else if (links[1] === 'archive' && links[2].match(/\d{4}/)) {
      path = '/' + links[2] + '/'
    }
    return path;
  }
  document.getElementById('closeNotificationPopup').onclick = function() {
    document.getElementById('notificationPopup').style.display = 'none';
  };
  var path = newPathOf(window.location.pathname);
  document.getElementById('jumpToNewBlog').href = "https://i-beam.org" + path;  
})()
</script>