Patrick Krebs - New Page

import fetch from 'node-fetch';

const allowedOrigins = ['https://patrickmkrebs.squarespace.com', 'https://www.patrickkrebs.com/', 'https://www.patrickkrebs.com/games/', 'https://www.patrickkrebs.com/gamedetails/'];

function setCorsHeaders(headers, origin) {
  if (allowedOrigins.includes(origin)) {
    headers.set('Access-Control-Allow-Origin', origin);
    headers.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
    headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  }
  return headers;
}

export async function GET(request) {
  const origin = request.headers.get('origin');
  let headers = new Headers({
    'Content-Type': 'application/json',
  });
  headers = setCorsHeaders(headers, origin);

  if (request.method === 'OPTIONS') {
    return new Response(null, {
      status: 204,
      headers,
    });
  }

  // Your code to fetch and return data
}

Setting Up Vercel
Creating API Routes on Vercel
Fetching Steam Data
Integrating with Squarespace
Final Code
Conclusion

Setting Up Vercel

Create a Vercel Account:

Go to Vercel and sign up for a free account.
Create a New Project:

Once logged in, click on "New Project" and follow the prompts to set up a new project. You can connect it to a GitHub repository or create a project from scratch.
Set Up Environment Variables:

Add the necessary environment variables for the Steam API.
- STEAM_API_KEY: Your Steam API key.
- STEAM_USER_ID: Your Steam user ID.
In Vercel, go to your project dashboard, navigate to Settings > Environment Variables, and add these variables.

Creating API Routes on Vercel

We'll create two main API routes:

Fetching All Games
Fetching Game Details

import fetch from 'node-fetch';

const allowedOrigins = ['https://patrickmkrebs.squarespace.com', 'https://www.patrickkrebs.com/','https://www.patrickkrebs.com/games/', 'https://www.patrickkrebs.com/gamedetails/'];

function setCorsHeaders(headers, origin) {
  if (allowedOrigins.includes(origin)) {
    headers.set('Access-Control-Allow-Origin', origin);
    headers.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
    headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  }
  return headers;
}

export async function GET(request) {
  const origin = request.headers.get('origin');
  let headers = new Headers({
    'Content-Type': 'application/json',
  });
  headers = setCorsHeaders(headers, origin);

  if (request.method === 'OPTIONS') {
    return new Response(null, {
      status: 204,
      headers,
    });
  }

  try {
    const steamApiKey = process.env.STEAM_API_KEY;
    const steamUserId = process.env.STEAM_USER_ID;

    console.log('Fetching all owned games...');
    const response = await fetch(`https://api.steampowered.com/IPlayerService/GetOwnedGames/v1/?key=${steamApiKey}&steamid=${steamUserId}&include_appinfo=true&include_played_free_games=true`);

    if (!response.ok) {
      console.error('Failed to fetch game data from Steam:', response.statusText);
      return new Response(JSON.stringify({ error: 'Failed to fetch game data from Steam' }), {
        status: 500,
        headers,
      });
    }

    const data = await response.json();
    const games = data.response.games.map(game => ({
      appid: game.appid,
      name: game.name,
      playtime_hours: game.playtime_forever / 60,
      img_icon_url: game.img_icon_url,
      img_logo_url: game.img_logo_url,
    }));

    const totalGames = games.length;
    const totalHours = games.reduce((acc, game) => acc + game.playtime_hours, 0);
    const notPlayedCount = games.filter(game => game.playtime_hours === 0).length;

    const result = {
      games,
      total_games: totalGames,
      total_hours: totalHours,
      total_hours_formatted: `${Math.floor(totalHours)}:${Math.floor((totalHours % 1) * 60)}`,
      not_played_count: notPlayedCount,
    };

    return new Response(JSON.stringify(result), {
      headers,
    });
  } catch (error) {
    console.error('Error fetching game data:', error);
    return new Response(JSON.stringify({ error: 'Error fetching game data' }), {
      status: 500,
      headers,
    });
  }
}

Table of Contents

Setting Up Vercel

Creating API Routes on Vercel