Using GitHub as a CMS

NUXT_GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxxxx

export default defineNuxtConfig({
  runtimeConfig: {
    githubToken: '',
  },
})

// Get the Github REST API typings, npm install -D @octokit/openapi-types
import { operations } from '@octokit/openapi-types'

// Moving types to be more readable
type GithubReposRes = operations['repos/list-for-user']['responses']['200']['content']['application/json']
type GithubReposQuery = operations['repos/list-for-user']['parameters']['query']

export default defineEventHandler(async (event) => {
  // Get our githubToken referenced inside our nuxt.config.ts
  const config = useRuntimeConfig()
  const githubToken = config.githubToken

  // Throw an error via h3 (available thanks to Nitro)
  if (!githubToken) {
    throw createError({
      statusCode: 401,
      statusMessage: 'Unauthorized',
      message: 'GitHub token is not provided'
    })
  }

  try {
    // Fetch with the unjs/ofetch shipped with Nuxt
    // Get the list of my repository. Replace <pseudo> with your GitHub username
    const repos = await $fetch<GithubReposRes>(
      '/users/<pseudo>/repos',
      {
        headers: {
          'Authorization': `Bearer ${githubToken}`,
          'Accept': 'application/vnd.github.v3+json',
          'X-GitHub-Api-Version': '2022-11-28'
        },
        baseURL: 'https://api.github.com',
        query: {
          type: 'all', // Get all repositores (mine and other I am member for)
          per_page: 100, // Limited by 100 items per page by the API but I have only around fifty repositories
        } as GithubReposQuery
      }
    )
  }
  catch {
    throw createError({
      statusCode: 500,
      statusMessage: 'Error',
      message: 'An error occurred while calling the GitHub API'
    })
  }

  // Filter to only get non fork repositories and return only useful data.
  return repos
    .filter(repo => !repo.fork)
    .map(repo => ({
      name: repo.name,
      stars: repo.stargazers_count,
      url: repo.html_url,
      description: repo.description
    }))
})

interface GithubPinnedItem {
  name: string
  description: string
  stargazerCount: number
  url: string
  languages: {
    nodes: Array<{
      name: string
    }>
  }
}

interface GithubPinnedItems {
  data: {
    user: {
      pinnedItems: {
        nodes: GithubPinnedItem[]
      }
    }
  }
}

export default defineEventHandler(async (event) => {
  const config = useRuntimeConfig()
  const githubToken = config.githubToken

  if (!githubToken) {
    throw createError({
      statusCode: 401,
      statusMessage: 'Unauthorized',
      message: 'GitHub token is not provided',
    })
  }

  try {
    const repos = await $fetch<GithubPinnedItems>('/graphql', {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${githubToken}`,
        Accept: 'application/json',
      },
      baseURL: 'https://api.github.com',
      body: {
        query: `
        query {
          user(login: "applelo") {
            pinnedItems(first: 6) {
              nodes {
                ... on Repository {
                  name
                  description
                  stargazerCount
                  url
                  languages(first: 1, orderBy: {field:SIZE, direction: DESC}) {
                    nodes {
                      name
                    }
                  }
                }
              }
            }
          }
        }
        `,
      },
    })

    // Clean the data returned by the API route
    return repos.data.user.pinnedItems.nodes.map(item => ({
      ...item,
      languages: item.languages.nodes.map(lang => lang.name),
    }))
  }
  catch {
    throw createError({
      statusCode: 500,
      statusMessage: 'Error',
      message: 'An error happen by calling GitHub API',
    })
  }
})