feat(readme): new component to display readme

Author: larbish

playground/components/Navigation.vue

@@ -6,6 +6,10 @@ const nav = [
     name: 'Repository',
     path: '/'
   },
+  {
+    name: 'Readme',
+    path: '/readme'
+  },
   {
     name: 'Releases',
     path: '/releases'

playground/pages/contributors.vue

@@ -1,3 +1,8 @@
+<script setup lang="ts">
+const owner = 'nuxt-community'
+const repo = 'supabase-module'
+</script>
+
 <template>
   <div>
     <!-- Fetch from config:
@@ -21,8 +26,3 @@
     </GithubContributors>
   </div>
 </template>
-
-<script setup lang="ts">
-const owner = 'nuxt-community'
-const repo = 'supabase-module'
-</script>

playground/pages/last-release.vue

@@ -1,3 +1,8 @@
+<script setup lang="ts">
+const owner = 'nuxt-community'
+const repo = 'supabase-module'
+</script>
+
 <template>
   <div>
     <!-- Fetch repository from config:
@@ -47,8 +52,3 @@
     </GithubLastRelease>
   </div>
 </template>
-
-<script setup lang="ts">
-const owner = 'nuxt-community'
-const repo = 'supabase-module'
-</script>

playground/pages/readme.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const owner = 'nuxt-community'
+const repo = 'supabase-module'
+</script>
+
+<template>
+  Fetch readme from config:
+  <GithubReadme v-slot="{ readme }">
+    <ContentRenderer :value="readme" />
+  </GithubReadme>
+
+  Fetch readme from query: {{ owner }} / {{ repo }}
+  <GithubReadme v-slot="{ readme }" :query="{ owner, repo}">
+    <ContentRenderer :value="readme" />
+  </GithubReadme>
+</template>

src/module.ts

@@ -103,6 +103,12 @@ export default defineNuxtModule<ModuleOptions>({
       handler: resolveModule('./server/api/repository', { paths: runtimeDir })
     })
 
+    // Setup readme file API
+    nitroConfig.handlers.push({
+      route: '/api/_github/readme',
+      handler: resolveModule('./server/api/readme', { paths: runtimeDir })
+    })
+
     // Repository component
     addComponent({
       name: 'GithubRepository',
@@ -117,6 +123,13 @@ export default defineNuxtModule<ModuleOptions>({
       global: true
     })
 
+    // GithubReadme component
+    addComponent({
+      name: 'GithubReadme',
+      filePath: resolveModule('./components/GithubReadme', { paths: runtimeDir }),
+      global: true
+    })
+
     // Setup releases API
     if (options.releases) {
       // Last release (pre-render friendly)

src/runtime/components/GithubReadme.ts

@@ -0,0 +1,31 @@
+import { defineComponent, useSlots, PropType } from 'vue'
+import { useGithub } from '../composables/useGithub'
+import { GithubRepositoryOptions } from '../types'
+// @ts-ignore
+import { useAsyncData } from '#imports'
+
+export default defineComponent({
+  props: {
+    query: {
+      type: Object as PropType<GithubRepositoryOptions>,
+      required: false,
+      default: () => ({})
+    }
+  },
+  async setup (props) {
+    const { fetchReadme } = useGithub()
+
+    const { data: readme, refresh, pending } = await useAsyncData('github-repository-component', () => fetchReadme(props.query))
+
+    return {
+      readme,
+      refresh,
+      pending
+    }
+  },
+  render ({ readme, refresh, pending }) {
+    const slots = useSlots()
+
+    return slots?.default?.({ readme, refresh, pending })
+  }
+})

src/runtime/composables/useGithub.ts

@@ -1,6 +1,6 @@
 import { withQuery, QueryObject } from 'ufo'
-import { GithubRepositoryOptions, GithubContributorsQuery, GithubReleasesQuery, GithubRepository, GithubRawRelease, GithubRawContributors } from '../types'
-
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import type { GithubRepositoryOptions, GithubContributorsQuery, GithubReleasesQuery, GithubRepository, GithubRawRelease, GithubRawContributors } from '../types'
 export const useGithub = () => {
   const fetchRepository = (query: GithubRepositoryOptions): Promise<GithubRepository> => {
     const url = withQuery('/api/_github/repository', query as QueryObject)
@@ -26,11 +26,17 @@ export const useGithub = () => {
     return $fetch(url, { responseType: 'json' })
   }
 
+  const fetchReadme = (query: GithubRepositoryOptions): Promise<ParsedContent> => {
+    const url = withQuery('/api/_github/readme', query as QueryObject)
+    return $fetch(url, { responseType: 'json' })
+  }
+
   return {
     fetchRepository,
     fetchReleases,
     fetchLastRelease,
     fetchContributors,
-    fetchFileContributors
+    fetchFileContributors,
+    fetchReadme
   }
 }

src/runtime/server/api/readme.ts

@@ -0,0 +1,41 @@
+import { useQuery } from 'h3'
+import { overrideConfig, fetchReadme } from '../utils/queries'
+import type { ModuleOptions } from '../../../module'
+import { GithubRepositoryOptions } from '../../types'
+import { parseContent } from '#content/server'
+// @ts-ignore
+// @ts-ignore
+import * as imports from '#imports'
+
+let handler
+if (process.env.NODE_ENV === 'development') {
+  // @ts-ignore
+  // eslint-disable-next-line import/namespace
+  handler = imports.defineEventHandler
+} else {
+  // @ts-ignore
+  // eslint-disable-next-line import/namespace
+  handler = imports.defineCachedEventHandler
+}
+
+export default handler(
+  async ({ req }) => {
+    const moduleConfig: ModuleOptions = imports.useRuntimeConfig().github
+
+    // Get query
+    const query = useQuery(req) as GithubRepositoryOptions
+
+    // Merge query in base config
+    const githubConfig = overrideConfig(moduleConfig, query)
+
+    if (!githubConfig.owner || !githubConfig.repo || !githubConfig.api) { return [] }
+
+    // Fetches releases from GitHub
+    const readme = await fetchReadme(githubConfig)
+
+    return await parseContent('content:readme.md', Buffer.from(readme.content, 'base64').toString())
+  },
+  {
+    maxAge: 60 // cache for one minute
+  }
+)

src/runtime/server/utils/queries.ts

@@ -4,7 +4,7 @@ import { defu } from 'defu'
 import type {
   ModuleOptions
 } from '../../../module'
-import { GithubRawRelease, GithubRepositoryOptions, GithubRawContributors, GithubContributorsQuery, GithubReleasesQuery } from '../../types'
+import { GithubRawRelease, GithubRepositoryOptions, GithubRawContributors, GithubContributorsQuery, GithubReleasesQuery, GithubRepositoryReadme } from '../../types'
 import { parseContent } from '#content/server'
 function isBot (user) {
   return user.login.includes('[bot]') || user.login.includes('-bot') || user.login.includes('.bot')
@@ -223,3 +223,27 @@ export async function fetchReleases (query: Partial<GithubReleasesQuery>, { api,
 
   return releases
 }
+
+export async function fetchReadme ({ api, owner, repo, token }: GithubRepositoryOptions) {
+  const url = `${api}/repos/${owner}/${repo}/readme`
+
+  const readme = await $fetch<GithubRepositoryReadme>(url, {
+    headers: {
+      Authorization: token ? `token ${token}` : undefined
+    }
+  }).catch((_) => {
+    /*
+
+    // eslint-disable-next-line no-console
+    console.warn(`Cannot fetch GitHub readme on ${url} [${err.response?.status || 500}]`)
+
+    // eslint-disable-next-line no-console
+    console.info('If your repository is private, make sure to provide GITHUB_TOKEN environment in `.env`')
+
+    */
+
+    return {}
+  })
+
+  return readme
+}

src/runtime/types/repository.d.ts

@@ -6,6 +6,20 @@ export interface GithubRepositoryOptions {
   token?: string
 }
 
+export interface GithubRepositoryReadme {
+  name: string
+  path: string
+  sha: string
+  size: number
+  url: string
+  html_url: string
+  git_url: string
+  download_url: string
+  type: 'file'
+  content: string,
+  encoding: 'base64'
+}
+
 export interface GithubRepositoryOwner {
   login: string
   id: number