Stop Maintaining a Separate Changelog. Auto-Sync Your forg.to Product's Updates to Your Website in 5 Minutes

Source: Dev.to

You ship a feature. You post about it on forg.to. Then you open your website changelog and do it all over again.
That’s busywork—writing the same update twice for two different audiences. Since forg.to already stores your updates, your website can simply display them.

Here are three ways to sync forg.to updates to your site. Pick the one that fits your workflow.

Method 1: Embed

The embed shows your five latest updates, logo, tagline, and up‑vote count in a timeline layout. Every time you post on forg.to, the embed updates automatically—no extra work required.

Method 2: Announcement Banner (even less work)

// Fetch the latest update and inject a dismissible banner
(function() {
  const banner = document.createElement('div');
  banner.id = 'forg-banner';
  banner.style.position = 'fixed';
  banner.style[/* "top" or "bottom" */] = '0';
  banner.style.width = '100%';
  banner.style.background = '#10b981';
  banner.style.color = '#fff';
  banner.style.padding = '1rem';
  banner.style.zIndex = '1000';
  banner.innerHTML = ' ✕';

  document.body.appendChild(banner);

  fetch('https://api.forg.to/v1/products/your-slug/updates?limit=1')
    .then(r => r.json())
    .then(data => {
      const update = data[0];
      const seen = localStorage.getItem('forgSeen_' + update.id);
      if (!seen) {
        document.getElementById('forg-message').textContent = update.title;
        document.getElementById('forg-close').onclick = () => {
          banner.remove();
          localStorage.setItem('forgSeen_' + update.id, 'true');
        };
      } else {
        banner.remove();
      }
    });
})();

The script fetches the latest update and injects a dismissible banner at the top (or bottom) of every page. It uses localStorage to remember which update each visitor has already seen, so a new post on forg.to automatically resurfaces the banner for everyone.

Method 3: The API (full control)

• Endpoint: https://api.forg.to/v1/products/{your-slug}/updates
• Rate limit: 100 requests/minute (more than enough for a changelog page)

// app/changelog/page.tsx
import React from 'react';

async function getUpdates() {
  const res = await fetch('https://api.forg.to/v1/products/your-slug/updates', {
    headers: {
      Authorization: `Bearer ${process.env.FORG_API_KEY}`,
    },
  });
  if (!res.ok) throw new Error('Failed to fetch updates');
  return res.json();
}

export default async function ChangelogPage() {
  const updates = await getUpdates();

  return (
    <>
      ## What’s New

      {updates.map((u: any) => (
        <>
          ## {new Date(u.createdAt).toLocaleDateString()}
          ### {u.title}
          {u.content}
        </>
      ))}
    </>
  );
}

With the API you have complete styling control and can build any component structure you like—no iframe quirks.

What you get out of this

You’re already writing updates on forg.to. By using one of the methods above, those updates automatically appear on your website, eliminating duplicate effort.

1. Sign up at forg.to
2. Post your first update
3. Choose an embed, banner, or API integration

You’ll be up and running in under five minutes.