Tumblr summary posts

how to work around Vivaldi blocking Tumblr post JS code as trackers

by Chris Vitalos

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
  </head>

  <body onload="embedTumblrPosts();">
	<div id="FeaturedPosts" class="embed-tweet">
	</div>
	<script src="https://srrpnj.tumblr.com/api/read/json"></script>
  </body>

</html>

CSS

.embed-tweet {
    width: 100%;
}
.tumblr-summary-post-outer {
	border: 1px solid black;
	border-radius: 5px;
	font-size: 14px;
	margin: 10px;
	background-color: lightgray;
}
.tumblr-summary-post-header {
	font-size: 16px;
	margin: 15px 15px 0px 15px;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.tumblr-summary-post-inner {
	border: none;
	margin: 0px 15px 0px 15px;
}
.tumblr-summary-post-inner h1 {
	font-size: 18px;
	margin: 1.1em 0 1.1em 0;
}
.tumblr-summary-post-inner h2 {
	font-size: 16px;
	margin: 1.1em 0 1.1em 0;
}
.tumblr-summary-post-inner img {
	width: 100%;
	max-width: 720px;
}

JavaScript

function buildTumblrSummaryPost(post, node) {
  var outerDiv = document.createElement('div');
  var headerDiv = document.createElement('div');
  var innerDiv = document.createElement('div');
  outerDiv.setAttribute('class', 'tumblr-summary-post-outer');
  headerDiv.setAttribute('class', 'tumblr-summary-post-header');
  var div1 = document.createElement('div');
  var img = document.createElement('img');
  img.setAttribute('src', post.tumblelog.avatar_url_48);
  div1.appendChild(img);
  var div2 = document.createElement('div');
  var atag = document.createElement('a');
  atag.setAttribute('href', post.url);
  atag.innerHTML = post.tumblelog.name;
  div2.appendChild(atag);
  headerDiv.appendChild(div1);
  headerDiv.appendChild(div2);
  innerDiv.setAttribute('class', 'tumblr-summary-post-inner');
  var inner_p = document.createElement('p');
  switch (post.type) {
    case 'regular':
      inner_p.innerHTML = post['regular-body'];
      innerDiv.appendChild(inner_p);
      break;
    case 'link':
      var postTitleHeader = document.createElement('h1');
      postTitleLink = document.createElement('a');
      postTitleLink.setAttribute('href', post['link-url']);
      postTitleLink.innerHTML = post['link-text'];
      innerDiv.appendChild(postTitleHeader).appendChild(postTitleLink);
      inner_p.innerHTML = post['link-description'];
      innerDiv.appendChild(inner_p);
      break;
    default:
      inner_p.innerHTML = "This post is best viewed on our Tumblr site.  Click on the following link to take you there:"
      atag = document.createElement('a');
      atag.setAttribute('href', post.url);
      atag.innerHTML = (post.slug || 'LINK');
      innerDiv.appendChild(inner_p);
      innerDiv.appendChild(atag);
  }
  var tags_p = document.createElement('p');
  tags_p.innerHTML = "Tags: " + post.tags;
  innerDiv.appendChild(tags_p);
  outerDiv.appendChild(headerDiv);
  outerDiv.appendChild(innerDiv);
  node.appendChild(outerDiv);
}

function embedTumblrPosts() {
  if...