Janady13/llms-txt-hub / apps/web/components/substack-embed.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/llms-txt-hub / apps/web/components/substack-embed.tsx
Date	Not specified in source
Repository	Janady13/llms-txt-hub
Revision	e0f4bf978d4df168369c7601d9c5f5ea89e84377
Branch	main
Path or archive member	apps/web/components/substack-embed.tsx
Original SHA-256	8f75eb1106035e083cd55e499c7ed68b9b152314c31a0c56014466c6074de7f0
Git blob SHA	a740bfa1935293e056de1ed7b0895b5101e5a848
Reading-copy SHA-256	8f75eb1106035e083cd55e499c7ed68b9b152314c31a0c56014466c6074de7f0

Original source ↗

Recovered source transcript

Download complete source text ↓69 lines · 1.9 KB

'use client'

import { useState } from 'react'

export function SubstackEmbed() {
  const [isLoading, setIsLoading] = useState(true)
  const [hasError, setHasError] = useState(false)

  const handleLoad = () => {
    setIsLoading(false)
  }

  const handleError = () => {
    setIsLoading(false)
    setHasError(true)
  }

  if (hasError) {
    return (
      <div className="flex flex-col items-center justify-center p-6 border rounded-lg bg-gray-50 dark:bg-zinc-900">
        <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">
          Unable to load newsletter signup form.
        </p>
        <a
          href="https://thellmstxtdigest.substack.com/subscribe"
          target="_blank"
          rel="noopener noreferrer"
          className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-orange-600 hover:bg-orange-700 rounded-md transition-colors"
        >
          Subscribe on Substack
        </a>
      </div>
    )
  }

  return (
    <div className="relative">
      {isLoading && (
        <div className="absolute inset-0 flex items-center justify-center bg-gray-50 dark:bg-zinc-900 rounded-lg">
          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-orange-600" />
        </div>
      )}
      <iframe
        src="https://thellmstxtdigest.substack.com/embed"
        width="480"
        height="150"
        frameBorder="0"
        scrolling="no"
        title="The llms.txt Digest"
        className="substack-iframe"
        onLoad={handleLoad}
        onError={handleError}
        style={{ opacity: isLoading ? 0 : 1 }}
      />
      <style jsx>{`
        .substack-iframe {
          border-radius: 0.375rem;
          background: white;
          transition: opacity 0.3s ease-in-out;
        }
        
        :global(.dark) .substack-iframe {
          filter: invert(1) hue-rotate(180deg) saturate(1.25) brightness(1.1);
        }
      `}</style>
    </div>
  )
}