Media

Dirstarter integrates with ScreenshotOne to automatically generate and manage screenshots for your directory listings. We also automatically fetch favicons for your listings using Google's favicon API.

This integration helps automate media generation and ensures consistent visual representation across your directory.

Screenshots

ScreenshotOne is a powerful API service that supercharges your directory website with automated media capabilities:

Generate high-quality screenshots of any website
Real-time preview generation for new listings
Consistent image quality and dimensions
Reduces manual work for directory owners
Directly uploads to S3 storage

Setup

Create a ScreenshotOne account, navigate to the API Keys page and add your credentials to your .env file:

.env

SCREENSHOTONE_ACCESS_KEY=your_access_key

Media Service Implementation

The screenshot generation is handled through a dedicated media service. Here's the implementation:

lib/media.ts

export const uploadScreenshot = async (url: string, s3Key: string): Promise<string> => {
  const timestamp = Date.now()

  const query = {
    // screenshotone options
  }

  const { data, error } = await tryCatch(
    wretch("https://api.screenshotone.com/take")
      .query(query)
      .get()
      .json<{ store: { location: string } }>(),
  )

  if (error) {
    console.error("Error fetching screenshot:", error)
    throw error
  }

  return `${data.store.location}?v=${timestamp}`
}

For information on the available options, refer to the ScreenshotOne Docs.

Usage in Components

Here's how to use the screenshot generation in your components:

components/screenshot-generator.tsx

'use client'

import { useState } from 'react'
import { Button } from '~/components/ui/button'
import { uploadScreenshot } from '~/lib/media'

type Props = {
  url: string
  toolId: string
  onSuccess?: (url: string) => void
}

export function ScreenshotGenerator({ url, toolId, onSuccess }: Props) {
  const [isGenerating, setIsGenerating] = useState(false)
  
  const handleGenerate = async () => {
    setIsGenerating(true)
    
    try {
      const s3Key = `tools/${toolId}/screenshot.webp`
      const screenshotUrl = await uploadScreenshot(url, s3Key)
      onSuccess?.(screenshotUrl)
    } catch (error) {
      console.error('Failed to generate screenshot:', error)
    } finally {
      setIsGenerating(false)
    }
  }
  
  return (
    <Button 
      onClick={handleGenerate} 
      disabled={isGenerating}
    >
      {isGenerating ? 'Generating...' : 'Generate Screenshot'}
    </Button>
  )
}

Favicons

In addition to screenshots, Dirstarter automatically generates favicons for your directory listings using Google's favicon service:

lib/media.ts

export const uploadFavicon = async (url: string, s3Key: string): Promise<string | null> => {
  const timestamp = Date.now()
  const cleanedUrl = encodeURIComponent(stripURLSubpath(url) ?? "")
  const faviconUrl = `https://www.google.com/s2/favicons?sz=128&domain_url=${cleanedUrl}`

  // Fetch favicon from Google's service
  const faviconResponse = await tryCatch(
    wretch(faviconUrl)
      .get()
      .badRequest(console.error)
      .arrayBuffer()
      .then(buffer => Buffer.from(buffer)),
  )

  if (faviconResponse.error) {
    console.error("Error fetching favicon:", faviconResponse.error)
    return null
  }

  // Upload to S3
  const { data, error } = await tryCatch(uploadToS3Storage(faviconResponse.data, `${s3Key}.png`))

  if (error) {
    console.error("Error uploading favicon:", error)
    return null
  }

  return `${data}?v=${timestamp}`
}

Key features of the favicon generation:

Uses Google's reliable favicon service
Fetches high-quality 128x128px icons
Automatically cleans and encodes URLs
Handles errors gracefully
Uploads to S3 with cache busting

Documentation

Screenshots

Setup

Media Service Implementation

Usage in Components

Favicons

On this page

Build your directory, launch, earn