Nuxt/docs/components/atoms/EditOnGithub.vue

<template>
  <div v-if="link" class="flex flex-col justify-between d-secondary-text mt-8 mb-4 px-4 sm:px-6 sm:flex-row">
    <a :href="link" target="_blank" rel="noopener" class="flex items-center mb-2 text-sm sm:mb-0 hover:underline">
      <IconEdit class="w-3 h-3 mr-1" />
      <span>
        {{ $t('article.github') }}
      </span>
    </a>

    <span v-if="page.mtime" class="flex items-center text-sm">
      {{ $t('article.updatedAt') }} {{ $d(Date.parse(page.mtime), 'long') }}
    </span>
  </div>
</template>

<script>
// TODO: remove this file when Docus fixed the issue
// wrong generated link due to folders deepness

import { defineComponent, computed } from '@nuxtjs/composition-api'
import { joinURL } from 'ufo'
import { useSettings } from '../../node_modules/@docus/theme/dist/composables/settings'

export default defineComponent({
  props: {
    page: {
      type: Object,
      required: true
    }
  },
  setup (props) {
    const { settings } = useSettings()

    /**
     * Repository URL computed
     */
    const repoUrl = computed(() => joinURL(settings.value.github.url, settings.value.github.repo))

    /**
     * Get a page link computed from a page object.
     */
    const getPageLink = (page) => {
      const link = computed(() => {
        if (!settings.value.github) { return }

        // TODO: Fix source; regression from split
        const key = page.key.split(':')
        const dir = key.slice(1, key.length - 1).filter(Boolean).join('/')
        const source = key[key.length - 1]

        return [
          repoUrl.value,
          'edit',
          settings.value.github.branch,
          settings.value.github.dir || '',
          settings.value.contentDir,
          dir,
          `${source}`.replace(/^\//g, '')
        ]
          .filter(Boolean)
          .join('/')
      })

      return link
    }

    const link = getPageLink(props.page)

    return {
      link
    }
  }
})
</script>