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:

SCREENSHOTONE_ACCESS_KEY=your_access_key

Media Service Implementation

The screenshot generation is handled through a dedicated media service in lib/media.ts. The getScreenshotFetchUrl function constructs the API URL with the appropriate options, and fetchAndUploadMedia fetches the screenshot and uploads it to S3:

export const getScreenshotFetchUrl = (url: string) => {
  const params = new URLSearchParams({
    url,
    access_key: env.SCREENSHOTONE_ACCESS_KEY,
    cache: "true",

    // Blockers
    delay: "1",
    block_ads: "true",
    block_chats: "true",
    block_trackers: "true",
    block_cookie_banners: "true",

    // Image and viewport options
    format: "webp",
    viewport_width: "1280",
    viewport_height: "720",
    image_quality: "90",
  })

  return `https://api.screenshotone.com/take?${params.toString()}`
}

// fetchAndUploadMedia(url, path, type) downloads the image
// and uploads to S3. See lib/media.ts for the full implementation.

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

Usage

To generate a screenshot for a listing, call fetchAndUploadMedia with the website URL, S3 path, and "screenshot" type:

import { fetchAndUploadMedia } from "~/lib/media"

const screenshotUrl = await fetchAndUploadMedia(
  "https://example.com",
  "tools/my-tool/screenshot",
  "screenshot",
)

The admin panel's tool form includes a built-in FormMedia component that handles screenshot generation with a single click.

Favicons

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

// Constructs a Google Favicon API URL for a given domain
export function getFaviconFetchUrl(url: string): string {
  const domain = getDomain(url)
  return `https://www.google.com/s2/favicons?sz=128&domain=${domain}`
}

To fetch and upload a favicon, use fetchAndUploadMedia with the "favicon" type:

import { fetchAndUploadMedia } from "~/lib/media"

const faviconUrl = await fetchAndUploadMedia(
  "https://example.com",
  "tools/my-tool/favicon",
  "favicon",
)

Key features of the favicon generation:

• Uses Google's reliable favicon service
• Fetches high-quality 128x128px icons
• Extracts the domain using getDomain from @primoui/utils
• Handles errors gracefully
• Uploads to S3 with cache busting