feat: add edit on github (#767)

Co-authored-by: Yaël GUILLOUX <yael.guilloux@gmail.com>
fix #756

.docs/.studio/app.config.json

@@ -26,6 +26,13 @@
         "lg": true
       }
     },
+    "github": {
+      "dir": ".docs/content",
+      "branch": "dev",
+      "repo": "docus",
+      "owner": "nuxt-themes",
+      "edit": true
+    },
     "footer": {
       "credits": {
         "icon": "IconDocus",

.docs/content/1.introduction/4.configuration.md

@@ -78,6 +78,7 @@ export default defineAppConfig({
 | **Key**                      | **Type**   | **Default**      | **Description**                                                     |
 | ---------------------------- | ---------- | ---------------- | ------------------------------------------------------------------- |
 | `title`                      | `string`   | Docus            | Website title                                                       |
+| `titleTemplate`              | `string`   | Docus            | Website title template                                              |
 | `description`                | `string`   | My Docus Project | Website description                                                 |
 | `url`                        | `string`   |                  | Website URL                                                         |
 | `layout`                     | `string`   | default          | Fallback layout to use                                              |
@@ -122,6 +123,8 @@ export default defineAppConfig({
 | `footer.iconLinks[0].icon`   | `string`   |                  | The icon to use (can be a component name)                           |
 | **GitHub**                   |            |                  |                                                                     |
 | `github`                     | `object`   | `false`          | GitHub integration configuration                                    |
+| `github.dir`                 | `boolean`  |                  | Toggle "Edit this page on Github" component on documentation pages  |
+| `github.branch`              | `boolean`  |                  | Toggle "Edit this page on Github" component on documentation pages  |
+| `github.repo`                | `boolean`  |                  | Toggle "Edit this page on Github" component on documentation pages  |
+| `github.owner`               | `boolean`  |                  | Toggle "Edit this page on Github" component on documentation pages  |
 | `github.edit`                | `boolean`  |                  | Toggle "Edit this page on Github" component on documentation pages  |
-| `github.contributors`        | `boolean`  |                  | Toggle contributors component on documentation pages                |
-| `github.root`                | `string`   |                  | The root path to use for "Edit on Github" component                 |

.playground/app.config.ts

@@ -1,5 +1,15 @@
 export default defineAppConfig({
   docus: {
-    title: 'MDC'
+    title: 'MDC',
+    socials: {
+      github: 'nuxt-themes/docus',
+    },
+    github: {
+      dir: '.playground/content',
+      branch: 'dev',
+      repo: 'docus',
+      owner: 'nuxt-themes',
+      edit: true,
+    }
   }
 })

.playground/content/0.index.md

@@ -16,5 +16,3 @@ I am using an inline component :counter-button.
 ::
 
 ::
-
-COucou ca va

app.config.ts

@@ -21,8 +21,19 @@ export default defineAppConfig({
       title: '',
       logo: false,
       showLinkIcon: false,
+      fixed: {
+        initial: true,
+        lg: true
+      },
       exclude: []
     },
+    github: {
+      dir: undefined,
+      branch: undefined,
+      repo: undefined,
+      owner: undefined,
+      edit: false
+    },
     footer: {
       credits: {
         icon: 'IconDocus',

components/app/AppLayout.vue

@@ -3,12 +3,10 @@ const docus = useDocus()
 const { navigation, page } = useContent()
 const { navKeyFromPath } = useContentHelpers()
 
-const headerPosition = computed(() => {
-  return page.value.header?.fixed || docus.value.header.fixed
-})
+const headerPosition = computed(() => page.value?.header?.fixed || docus?.value?.header?.fixed || false)
 
 const titleTemplate = computed(() => {
-  const appTitleTemplate = docus.value.head?.titleTemplate || `%s · ${docus.value.title}`
+  const appTitleTemplate = docus?.value?.titleTemplate || `%s · ${docus?.value?.title}`
   if (page.value) {
     return page.value.head?.titleTemplate || navKeyFromPath(page.value._path, 'titleTemplate', navigation.value || []) || appTitleTemplate
   }
@@ -30,18 +28,16 @@ useHead({
   ]
 })
 
-watch(titleTemplate, () => {
-  useHead({ titleTemplate: titleTemplate.value })
-})
+watch(titleTemplate, () => useHead({ titleTemplate: titleTemplate.value }))
 
 useContentHead(docus.value as any)
 </script>
 
 <template>
   <div>
     <AppLoadingBar />
-    <AppHeader v-if="docus.header" :fixed="headerPosition"/>
+    <AppHeader v-if="docus?.header" :fixed="headerPosition" />
     <slot />
-    <AppFooter v-if="docus.footer" />
+    <AppFooter v-if="docus?.footer" />
   </div>
 </template>

components/docs/DocsPageBottom.vue

@@ -6,7 +6,15 @@ const docus = useDocus()
 <template>
   <div v-if="page" class="docs-page-bottom">
     <div class="edit-link">
-      <EditOnLink v-if="docus?.socials?.github && docus?.github?.edit" :page="page" />
+      <EditOnLink v-if="docus?.github?.edit" v-slot="{url}" :page="page">
+        <NuxtLink :to="url">
+          <Icon name="uil:edit" />
+          <span>
+            Edit this page on GitHub
+          </span>
+        </NuxtLink>
+      </EditOnLink>
+      <!-- Need to be supported by @nuxt/content -->
       <span v-if="page.mtime">Updated on: {{ new Intl.DateTimeFormat('en-US').format(Date.parse(page.mtime)) }}</span>
     </div>
   </div>
@@ -30,14 +38,15 @@ css({
       flexDirection: 'column',
       flex: '1',
       width: '100%',
-      gap: '{space.4}',
       '@md': {
         width: '50%'
       },
-      span: {
+      a: {
         display: 'flex',
-        alignItems: 'center'
-      }
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: '{space.4}',
+      },
     }
   }
 })

components/docs/DocsPageLayout.vue

@@ -74,8 +74,7 @@ onBeforeUnmount(() => {
         Start writing in <ProseCodeInline>content/{{ page._file }}</ProseCodeInline> to see this page taking shape.
       </Alert>
       <template v-if="hasBody && page && bottom">
-        <!-- TODO: Finish rewrite -->
-        <DocsPageBottom v-if="false" />
+        <DocsPageBottom />
         <DocsPrevNext />
       </template>
     </article>

components/docs/EditOnLink.vue

@@ -11,23 +11,23 @@ export default defineComponent({
      */
     owner: {
       type: String,
-      default: () => useAppConfig()?.github?.owner,
+      default: () => useAppConfig()?.docus.github?.owner,
       required: false
     },
     /**
      * Repository name.
      */
     repo: {
       type: String,
-      default: () => useAppConfig()?.github?.repo,
+      default: () => useAppConfig()?.docus.github?.repo,
       required: false
     },
     /**
      * The branch to use for the edit link.
      */
     branch: {
       type: String,
-      default: () => useAppConfig()?.github?.branch,
+      default: () => useAppConfig()?.docus.github?.branch,
       required: false
     },
     /**
@@ -37,7 +37,7 @@ export default defineComponent({
      */
     dir: {
       type: String,
-      default: () => useAppConfig()?.github?.dir,
+      default: () => useAppConfig()?.docus.github?.dir,
       required: false
     },
     /**
@@ -64,15 +64,15 @@ export default defineComponent({
     contentDir: {
       type: String,
       required: false,
-      default: 'content'
+      default: () => useAppConfig()?.docus.github?.dir || 'content'
     },
     /**
      * Send to an edit page or not.
      */
     edit: {
       type: Boolean,
       required: false,
-      default: true
+      default: () => useAppConfig()?.docus.github?.edit
     }
   },
   setup (props) {

nuxt.schema.ts

@@ -12,6 +12,10 @@ export default defineNuxtConfigSchema({
        * @studioIcon material-symbols:title
        */
       title: 'Docus',
+      /**
+       * The website title template, to overwrite the default one.
+       */
+      titleTemplate: '%s · Docus',
       /**
        * Website description, used for meta description.
        *
@@ -146,7 +150,17 @@ export default defineNuxtConfigSchema({
          * @type {string[]}
          *
          */
-        exclude: []
+        exclude: [],
+        /**
+         * Sets the header to fixed or static mode.
+         *
+         * @studioInput object
+         * @type {{[key: import('pincea').PinceauMediaQueries]: boolean }}
+         */
+        fixed: {
+          initial: true,
+          lg: true
+        }
       },
       /**
        * Footer configuration
@@ -218,6 +232,45 @@ export default defineNuxtConfigSchema({
             }
           }
         }
+      },
+      /**
+       * GitHub integration
+       *
+       * Configure the Edit on Github integration.
+       *
+       * @studioIcon simple-icons:github
+       */
+      github: {
+        /**
+         * Directory
+         *
+         * Your GitHub repository root directory.
+         */
+        dir: '',
+        /**
+         * Branch
+         *
+         * Your GitHub repository branch.
+         */
+        branch: '',
+        /**
+         * Repository
+         *
+         * Your GitHub repository name.
+         */
+        repo: '',
+        /**
+         * Owner
+         *
+         * Your GitHub repository owner.
+         */
+        owner: '',
+        /**
+         * EditOnGithub
+         *
+         * Display EditOnGithub button.
+         */
+        edit: false
       }
     }
   }