feat: "edit this page" button

Author: antfu

README.md

@@ -45,13 +45,14 @@ The development server will be running at [http://localhost:3000](http://localho
   - [x] Allow each guide to toggle features
   - [ ] Allow each guide to configure file filter
   - [ ] Solution for each guide
-  - [ ] A button of "Edit this page"
+  - [x] A button of "Edit this page"
   - [ ] Verification for tutorial tasks
   - [ ] Search feature
   - [ ] Embedded Nuxt Docs (update CORS headers)
 - [ ] Command K System
 - [ ] About Page
 - [ ] Welcome Screen
+- [ ] Try https://ark-ui.com/docs/components/splitter
 - [x] Show release time for the playground
 - [x] Show Nuxt and Vue versions from the container
 - [x] Custom bundler for templates (replaces `import.meta.glob`, create static virtual modules)

components/PanelDocs.vue

@@ -1,15 +1,26 @@
 <script setup lang="ts">
+const { page } = useContent()
 
+const sourceUrl = computed(() => `https://github.com/nuxt/learn.nuxt.com/edit/main/content/${page.value._file}`)
 </script>
 
 <template>
-  <div h-full grid="~ rows-[min-content_1fr]">
+  <div h-full grid="~ rows-[min-content_1fr_min-content]">
     <div flex="~ gap-2 items-center" border="b base dashed" bg-faded px4 py2>
       <div i-ph-book-duotone />
       <span text-sm>Guide</span>
     </div>
     <article class="max-w-none prose" of-auto p6>
       <ContentDoc />
     </article>
+    <div border="t base dashed" px6 py2>
+      <NuxtLink
+        :to="sourceUrl" target="_blank"
+        flex="~ items-center gap-2" op50 hover="text-primary op100"
+      >
+        <div i-ph-note-pencil-duotone />
+        Edit this page
+      </NuxtLink>
+    </div>
   </div>
 </template>

nuxt.config.ts

@@ -67,6 +67,7 @@ export default defineNuxtConfig({
     defineModel: true,
   },
   content: {
+    documentDriven: true,
     highlight: {
       theme: {
         default: 'vitesse-light',