Auto Typewriter Blog Feed Ticker

ဒါကတော့မိမိ Blogger website ထဲကမှ မိမိ blog ရဲ့ post များကို feed အဖြစ်ယူ၍ပြသလို့ရ အောင် ပြုလုပ်ထားတဲ့ Typewriter RSS Ticker လေးပါ။ကြိုက် နှစ်သက်လို့ အသုံးပြုချင်တယ်ဆိုရင်‌ အောက်မှာပြထားတဲ့အတိုင်းလုပ်‌ဆောင်၍ထည့်သွင်းအသုံးပြုနိုင်ပါသည်။

1. မိမိ Blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Layout ကိုနှိပ်ပါ
3. Add a Gadget ကိုနှိပ်ပါ
4. HTML/JavaScript ကိုနှိပ်
5. အောက်က Code ကို copy ယူ၍ထည့်ပါ။
6. CSS Code ကို <style>css_code_here</style> အဖွင့်အပိတ်ဖြင့်ထည့်ရန်
7. JavaScript Code ကို <script>javascript_code_here</script> အဖွင့်အပိတ်ဖြင့်ထည့်ရန်
8. https://www.khinmaungwin.dpdns.orgနေရာတွင်မိမိ website link ထည့်ရန်

 #typewriter-container {
    border: 2px solid #333;
    padding: 20px;
    max-width: 600px;
    min-height: 120px;
    border-radius: 8px;
    box-shadow: 0 0 5px #aaa;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: monospace, monospace;
    background: #fff;
    margin: 20px auto;
}
#thumbnail {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    background-color: #ddd;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
}
#text-content {
    flex-grow: 1;
    position: relative;
}
#typewriter {
    font-size: 1.3em;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    min-height: 60px;
}
#cursor {
    display: inline-block;
    background-color: black;
    width: 2px;
    animation: blink 1s step-start infinite;
    position: absolute;
    top: 0;
    right: 0;
    height: 1.3em;
}
@keyframes blink {
    50% { background-color: transparent; }
}
#meta {
    margin-top: 8px;
    font-size: 0.85em;
    color: #555;
}
#meta span {
    margin-right: 12px;
}
#meta .label {
    font-weight: 700;
    color: #0066ff;
} 

const container = document.createElement('div');
  container.id = 'typewriter-container';
  const thumbnail = document.createElement('div');
  thumbnail.id = 'thumbnail';
  const textContent = document.createElement('div');
  textContent.id = 'text-content';
  const typewriter = document.createElement('div');
  typewriter.id = 'typewriter';
  const cursor = document.createElement('span');
  cursor.id = 'cursor';
  cursor.textContent = '|';
  const meta = document.createElement('div');
  meta.id = 'meta';
  const label = document.createElement('span');
  label.className = 'label';
  const date = document.createElement('span');
  date.className = 'date';

// Assemble meta
  meta.appendChild(label);
  meta.appendChild(date);

// Assemble text content
  textContent.appendChild(typewriter);
  textContent.appendChild(cursor);
  textContent.appendChild(meta);

// Assemble container
  container.appendChild(thumbnail);
  container.appendChild(textContent);

// Append to body
  document.body.appendChild(container);

// Variables for typing effect
  let posts = [];
  let currentPostIndex = 0;
  let currentCharIndex = 0;
  const typingSpeed = 70;
  const pauseTime = 2000;

// Fetch RSS feed via rss2json proxy
  fetch('https://api.rss2json.com/v1/api.json?rss_url=https://www.khinmaungwin.dpdns.org/feeds/posts/default?alt=rss')
    .then(res => res.json())
    .then(data => {
      if (!data.items || data.items.length === 0) {
        typewriter.textContent = "No posts found.";
        cursor.style.display = 'none';
        thumbnail.style.backgroundImage = '';
        label.textContent = '';
        date.textContent = '';
        return;
      }
      posts = data.items.map(post => {
        let thumb = post.thumbnail || extractThumbnail(post.content);
        let labelText = (post.categories && post.categories.length > 0) ? post.categories[0] : 'No Label';
        let postDate = new Date(post.pubDate || post.published).toLocaleDateString('en-GB', {
          day: '2-digit', month: 'short', year: 'numeric'
        });
        return {
          title: post.title,
          link: post.link,
          thumbnail: thumb,
          label: labelText,
          date: postDate
        };
      });
      updatePostInfo();
      typeText();
    })
    .catch(err => {
      console.error(err);
      typewriter.textContent = "Failed to load feed.";
      cursor.style.display = 'none';
      thumbnail.style.backgroundImage = '';
      label.textContent = '';
      date.textContent = '';
    });

  function extractThumbnail(content) {
    if (!content) return '';
    const div = document.createElement('div');
    div.innerHTML = content;
    const img = div.querySelector('img');
    return img ? img.src : '';
  }

  function updatePostInfo() {
    const post = posts[currentPostIndex];
    thumbnail.style.backgroundImage = post.thumbnail ? `url(${post.thumbnail})` : '';
    label.textContent = post.label;
    date.textContent = post.date;
  }

  function typeText() {
    const currentText = posts[currentPostIndex].title;
    if (currentCharIndex < currentText.length) {
      typewriter.textContent += currentText.charAt(currentCharIndex);
      currentCharIndex++;
      setTimeout(typeText, typingSpeed);
    } else {
      setTimeout(deleteText, pauseTime);
    }
  }

  function deleteText() {
    if (currentCharIndex > 0) {
      typewriter.textContent = typewriter.textContent.slice(0, -1);
      currentCharIndex--;
      setTimeout(deleteText, typingSpeed / 2);
    } else {
      currentPostIndex = (currentPostIndex + 1) % posts.length;
      updatePostInfo();
      setTimeout(typeText, typingSpeed);
    }
  }