Editing page and reporting issues (#10)

* Add github repo link to app config

* Draft edit button

* GitHub actions buttons layout

* Create issue link

* More space between content and GitHub buttons

Author: d0rich

app.config.ts

@@ -17,7 +17,33 @@
 import type { ModuleOptions } from 'nuxt-icon'
 
 interface ExactproDocsOptions {
-  title?: string
+  /**
+   * Title of the documentation.
+   * It will be displayed in the header and in the browser tab.
+   */
+  title: string
+  /**
+   * Configuration for GitHub integration
+   */
+  github: {
+    /**
+     * Link to the repository on GitHub
+     */
+    repoLink?: string
+    /**
+     * Name of the default branch on GitHub
+     *
+     * @default 'master'
+     */
+    branch?: string
+    /**
+     * Path to the directory with documentation files on GitHub
+     * Specify if the documentation is stored in a subdirectory of the repository.
+     *
+     * @default '/'
+     */
+    docsDir?: string
+  }
 }
 
 declare module 'nuxt/schema' {
@@ -30,7 +56,12 @@ declare module 'nuxt/schema' {
 
 export default defineAppConfig({
   exactproDocs: {
-    title: 'Exactpro Docs'
+    title: 'Exactpro Docs',
+    github: {
+      repoLink: undefined as string | undefined,
+      branch: 'master',
+      docsDir: '/'
+    }
   },
   // TODO: Workaround for nuxt-icon types module, delete when https://github.com/nuxt-modules/icon/pull/63 is resolved
   nuxtIcon: {}

components/ep/layout/GithubActions.vue

@@ -0,0 +1,65 @@
+<!--
+  ~ Copyright 2023 Exactpro (Exactpro Systems Limited)
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+
+const props = defineProps<{
+  doc: Pick<ParsedContent, string>
+}>()
+
+const githubInfo = useAppConfig().exactproDocs.github
+
+const { data: editBasePath } = useFetch(
+  '/api/_docs-toolkit/github/edit-base-path'
+)
+
+const editPath = computed(() => {
+  return `${editBasePath.value}/${props.doc._source}/${props.doc._file}`
+})
+
+const createIssuePath = computed(() => {
+  return `${githubInfo.repoLink}/issues/new/choose`
+})
+</script>
+
+<template>
+  <div
+    v-if="githubInfo.repoLink"
+    class="flex justify-end gap-4 flex-wrap items-center"
+  >
+    <a :href="editPath" class="github-action-button">
+      <Icon
+        class="w-4 h-4 mr-2 text-primary"
+        name="heroicons:pencil-square-solid"
+      />
+      <span>Edit this page</span>
+    </a>
+    <a :href="createIssuePath" class="github-action-button">
+      <Icon
+        class="w-4 h-4 mr-2 text-error"
+        name="heroicons:chat-bubble-left-20-solid"
+      />
+      <span>Create issue</span>
+    </a>
+  </div>
+</template>
+
+<style>
+.github-action-button {
+  @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center;
+}
+</style>

docs/app.config.ts

@@ -16,6 +16,11 @@
 
 export default defineAppConfig({
   exactproDocs: {
-    title: 'Docs Template Project'
+    title: 'Docs Template Project',
+    github: {
+      repoLink: 'https://github.com/exactpro/docs-toolkit',
+      branch: 'master',
+      docsDir: '/docs'
+    }
   }
 })

pages/[...slug].vue

@@ -19,15 +19,18 @@
     <Title>{{ doc ? doc.title : '' }}</Title>
   </Head>
   <NuxtLayout>
-    <article class="px-4 mt-10 mb-96">
-      <ContentRenderer v-if="doc && doc._type === 'markdown'" :value="doc">
-        <ContentRendererMarkdown :value="doc" class="gevamu-prose" />
-      </ContentRenderer>
-      <div v-else-if="doc" class="gevamu-prose w-screen">
-        <h1>{{ doc._dir.title }} pages</h1>
-        <!-- TODO: Generate index page -->
-      </div>
-    </article>
+    <div class="px-4 mt-10 mb-96">
+      <article class="mb-10">
+        <ContentRenderer v-if="doc && doc._type === 'markdown'" :value="doc">
+          <ContentRendererMarkdown :value="doc" class="gevamu-prose" />
+        </ContentRenderer>
+        <div v-else-if="doc" class="gevamu-prose w-screen">
+          <h1>{{ doc._dir.title }} pages</h1>
+          <!-- TODO: Generate index page -->
+        </div>
+      </article>
+      <EpLayoutGithubActions v-if="doc" :doc="doc" />
+    </div>
   </NuxtLayout>
 </template>
 

server/routes/api/_docs-toolkit/github/edit-base-path.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright 2023 Exactpro (Exactpro Systems Limited)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import path from 'path'
+
+export default defineEventHandler(() => {
+  const config = useAppConfig()
+  const { repoLink, branch, docsDir } = config.exactproDocs.github
+  if (!repoLink) {
+    throw new Error('GitHub repository link is not specified')
+  }
+  return path.join(repoLink, 'edit', branch, docsDir).replaceAll('\\', '/')
+})