bitvid/views/blog.html

<!-- views/blog.html -->
<section class="bv-stack" aria-labelledby="blogHeading">
  <article class="card p-lg">
    <div class="bv-stack bv-stack--tight">
      <h2 id="blogHeading" class="text-2xl font-semibold text-text-strong">
        Latest Blog Posts
      </h2>
      <div class="blog-embed-shell relative isolate overflow-hidden rounded-lg bg-surface-alt">
        <iframe
          id="blog-iframe"
          src="https://beta.bitvid.network/blog.html"
          class="w-full border-none"
        ></iframe>
        <script type="module">
          const iframe = document.querySelector('#blog-iframe');
          if (iframe) {
            const abortController = new AbortController();
            const { signal } = abortController;

            const targetOrigin = (() => {
              try {
                return new URL(iframe.src, window.location.href).origin;
              } catch (error) {
                return window.location.origin;
              }
            })();

            const applyHeight = (height) => {
              const numeric = Math.max(0, Math.round(Number(height)));
              if (!Number.isFinite(numeric)) {
                return;
              }
              iframe.style.height = `${numeric}px`;
              iframe.style.removeProperty('min-height');
              iframe.style.removeProperty('max-height');
            };

            let receivedFirstHeight = false;
            let retryIntervalId = null;

            const stopRequestLoop = () => {
              if (retryIntervalId === null) {
                return;
              }
              window.clearInterval(retryIntervalId);
              retryIntervalId = null;
            };

            const startRequestLoop = () => {
              if (retryIntervalId !== null) {
                return;
              }
              retryIntervalId = window.setInterval(() => {
                if (receivedFirstHeight || signal.aborted) {
                  stopRequestLoop();
                  return;
                }
                requestHeight();
              }, 250);
            };

            const handleMessage = (event) => {
              if (event.source !== iframe.contentWindow) {
                return;
              }
              if (event.origin !== targetOrigin) {
                return;
              }
              if (event.data?.type === 'bitvid-blog-resize') {
                applyHeight(event.data.height);
                receivedFirstHeight = true;
                stopRequestLoop();
              }
            };

            window.addEventListener('message', handleMessage, { signal });

            const requestHeight = () => {
              if (!iframe.contentWindow) {
                return;
              }
              iframe.contentWindow.postMessage(
                { type: 'bitvid-blog-request-height' },
                targetOrigin,
              );
            };

            let hasStarted = false;

            const runInitialRequests = () => {
              if (hasStarted) {
                return;
              }
              hasStarted = true;
              requestHeight();
              startRequestLoop();
              if (signal.aborted) {
                stopRequestLoop();
              } else {
                signal.addEventListener('abort', stopRequestLoop, { once: true });
              }
            };

            iframe.addEventListener('load', () => {
              receivedFirstHeight = false;
              stopRequestLoop();
              hasStarted = false;
              runInitialRequests();
            }, { signal });

            if (document.readyState === 'loading') {
              document.addEventListener('DOMContentLoaded', runInitialRequests, {
                once: true,
                signal,
              });
            } else {
              runInitialRequests();
            }

            window.addEventListener('pagehide', () => {
              abortController.abort();
              stopRequestLoop();
            }, { once: true });
          }
        </script>
      </div>
    </div>
  </article>
</section>