Nostlr Blog Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YOUR ACCOUNT NAME's blog - Nostlr</title>
    <link id="favicon" rel="shortcut icon" href="https://assets.tumblr.com/images/default_avatar_128.png">
    <style type="text/css">
      /* tumblr 2010s styled css */
      body {
        background: #3b627e;
        margin: 0;
        padding: 0;
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
      }

      #wrapper {
        width: 845px;
        margin: 0 auto;
      }

      #title {
        margin: 30px 0;
        color: #fff;
        font-size: 50px;
        font-weight: bold;
        text-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
        letter-spacing: -1px;
      }

      #title a {
        color: #fff;
        text-decoration: none;
      }

      /* content */
      #content {
        width: 520px;
        float: left;
      }

      .post {
        background: #fff;
        padding: 10px;
        position: relative;
      }

      /* media stuff */
      .post .media {
        text-align: center;
        margin-bottom: 10px;
      }

      .post .media img,
      .post .media video {
        max-width: 300px;
        height: auto;
        display: block;
        margin: 0 auto;
      }

      .post .copy {
        color: #6e7173;
        padding: 10px;
        font-size: 13px;
        line-height: 1.5;
      }

      .post .copy p {
        margin: 10px 0 0 0;
      }

      .post .copy a {
        color: #6e7173;
        text-decoration: underline;
      }

      /* feet :drool: */
      .post .footer {
        background: #eaeaea;
        border-radius: 4px;
        font-family: 'Lucida Sans', sans-serif;
        font-size: 11px;
        color: #666;
        padding: 5px 10px;
        margin-top: 10px;
      }

      .post .footer .date {
        float: left;
        width: 67%;
      }

      .post .footer .notes {
        float: right;
        width: 33%;
        text-align: right;
      }

      .post .footer a {
        color: #666;
        text-decoration: none;
      }

      /* shadow for posts */
      .bottom {
        background: url('https://static.tumblr.com/vr9xgox/TDAnf8t3n/shadow-post.png') top center no-repeat;
        width: 513px;
        height: 40px;
        margin: 0 auto 20px auto;
      }

      /* sidebar */
      #sidebar {
        width: 250px;
        float: right;
        font-family: 'Lucida Sans', sans-serif;
        color: #3b627e;
      }

      #sidebar-top {
        background: #fff;
        padding: 0 20px 20px 20px;
        border-radius: 10px 10px 0 0;
        min-height: 100px;
      }

      #avatar-container {
        width: 146px;
        height: 146px;
        padding: 8px 0 0 9px;
        background: url('https://static.tumblr.com/vr9xgox/mi9nf8t4z/avatar-bg.png') top left no-repeat;
        position: relative;
        top: -24px;
        left: -5px;
        margin-bottom: -15px;
      }

      #avatar-container img {
        width: 128px;
        height: 128px;
        object-fit: cover;
      }

      #description {
        font-size: 11px;
        color: #3b627e;
        position: relative;
        top: -15px;
        line-height: 1.4;
        text-align: left;
        margin-bottom: 5px;
      }

      /* buttons */
      #sidebar-links {
        list-style-type: none;
        padding: 0;
        margin: 0 0 15px 0;
        position: relative;
        top: -5px;
      }

      #sidebar-links li {
        margin-bottom: 5px;
      }

      #sidebar-links a {
        display: block;
        text-decoration: none;
        padding: 8px;
        font-size: 12px;
        font-weight: bold;
        text-align: center;
        border-radius: 4px;
        transition: opacity 0.2s;
      }

      /* follow button */
      #sidebar-links a.follow-btn {
        background-color: #477799;
        color: #fff !important;
      }

      #sidebar-links a.alt-link {
        background-color: #eaeaea;
        color: #666 !important;
      }

      #sidebar-links a:hover {
        opacity: 0.85;
      }

      #nostr-link {
        display: block;
        font-size: 10px;
        color: #999;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      #sidebar-bottom {
        background: url('https://static.tumblr.com/vr9xgox/wySnf8twm/sidebar-bottom.png') top center no-repeat;
        width: 250px;
        height: 25px;
        margin-bottom: 30px;
      }

      .clear {
        clear: both;
        height: 0px;
        overflow: hidden;
      }

      @media (max-width: 860px) {
        #wrapper {
          width: 95%;
        }

        #content,
        #sidebar {
          width: 100%;
          float: none;
        }

        #sidebar {
          margin-top: 50px;
        }
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="title">
        <a href="/" id="blog-name">loading...</a>
      </div>
      <div id="content">
        <div id="nostr-feed"></div>
      </div>
      <div id="sidebar">
        <div id="sidebar-top">
          <div id="avatar-container">
            <img src="" id="user-avatar" alt="" />
          </div>
          <div id="description">loading...</div>
          <ul id="sidebar-links">
            <li>
              <a href="nostr:PUBLIC KEY NOT HEX" class="follow-btn" target="_blank">Follow me on Nostr</a>
            </li>
            <li>
              <a href="TWITTER/MASTODON LINK" class="alt-link" target="_blank">See latest Toots (External)</a>
            </li>
            <li>
              <a href="https://papis802.neocities.org/nostlr-copy" class="alt-link" target="_blank">Create your own Nostlr</a>
            </li>
          </ul>
          <a href="https://nostr.com/" id="nostr-link" target="_blank">Powered by Nostr</a>
        </div>
        <div id="sidebar-bottom"></div>
      </div>
      <div class="clear"></div>
    </div>
    <script src="https://unpkg.com/nostr-tools@1.15.0/lib/nostr.bundle.js"></script>
    <script>
      async function init() {
          const hex = "YOUR HEX VERSION OF YOUR PUBKEY";
          const relays = ["wss://relay.primal.net", "wss://relay.damus.io", "wss://nos.lol"];
          const pool = new window.NostrTools.SimplePool();
          const escapeHTML = (str) => {
            if (!str) return "";
            const p = document.createElement('p');
            p.textContent = str;
            return p.innerHTML;
          };
          try {
            // profile data
            let profile = await pool.get(relays, {
              authors: [hex],
              kinds: [0]
            });
            if (profile) {
              const meta = JSON.parse(profile.content);
              const userImg = meta.picture || ""; // Store the URL in a variable
              document.getElementById('blog-name').innerText = (meta.display_name || meta.name || "NAME") + "'s blog";
              document.getElementById('description').textContent = meta.about || "";
              // set sidebar
              document.getElementById('user-avatar').src = userImg;
              // change the favicon
              document.getElementById('favicon').href = userImg;
            }
            // get notes
            let posts = await pool.list(relays, [{
              authors: [hex],
              kinds: [1, 6],
              limit: 20 // delete this if you have a lot of notes/posts
            }]);
            const feed = document.getElementById('nostr-feed');
            feed.innerHTML = '';
            posts.sort((a, b) => b.created_at - a.created_at).forEach(post => {
                let content = post.content;
                if (post.kind === 6) content = "Reposted a note";
                const imgRegex = /(https?:\/\/.*\.(?:png|jpg|jpeg|gif|webp|svg))/i;
                const vidRegex = /(https?:\/\/.*\.(?:mp4|webm|ogg|mov))/i;
                const imgMatch = content.match(imgRegex);
                const vidMatch = content.match(vidRegex);
                let noteId;
                try {
                  noteId = window.NostrTools.nip19.noteEncode(post.id);
                } catch (e) {
                  noteId = post.id;
                }
                let mediaHtml = '';
                if (vidMatch) {
                  mediaHtml = `
					<div class="media">
						<video controls>
							<source src="${vidMatch[0]}">
							</video>
						</div>`;
                } else if (imgMatch) {
                  mediaHtml = `
						<div class="media">
							<img src="${imgMatch[0]}" />
						</div>`;
                }
                let cleanText = content.replace(imgRegex, '').replace(vidRegex, '').trim();
                let safeContent = escapeHTML(cleanText).replace(/\n/g, '<br>');
                  const postHtml = `
                        
							<div class="post">
                            ${mediaHtml}
                            ${safeContent ? `
								<div class="copy">${safeContent}</div>` : ''}
                            
								<div class="footer">
									<div class="date">${new Date(post.created_at * 1000).toLocaleDateString()}</div>
									<div class="notes">
										<a href="https://primal.net/e/${noteId}" target="_blank">view notes</a>
									</div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="bottom"></div>
                    `; feed.insertAdjacentHTML('beforeend', postHtml);
                });
            }
            catch (e) {
              console.error(e);
            }
          }
          init();
    </script>
  </body>
</html>
Nostlr Blog Template
