Add a link to discussion thread

components/PanelDocs.vue

@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/return-in-computed-property -->
 <script setup lang="ts">
 import type { NavItem, ParsedContent } from '@nuxt/content'
 
@@ -63,6 +64,32 @@ const sourceUrl = computed(() =>
     : undefined,
 )
 
+// NOTE: remove when hands-on finished (will be held on 2024-10-19)
+const THREAD_ID_MAP: Readonly<Record<string, number>> = {
+  '0.index.md': 85,
+  '1.vue/1.index.md': 68,
+  '1.vue/2.reactivity/index.md': 71,
+  '1.vue/3.reactivity-2/index.md': 72,
+  '1.vue/4.composition-api/index.md': 73,
+  '1.vue/5.components/index.md': 74,
+  '1.vue/6.summary/index.md': 75,
+  '2.concepts/1.index.md': 76,
+  '2.concepts/2.app-vue/index.md': 77,
+  '2.concepts/3.routing/index.md': 78,
+  '2.concepts/4.auto-imports/index.md': 79,
+  '2.concepts/5.middleware/index.md': 80,
+  '2.concepts/6.layout/index.md': 81,
+  '2.concepts/7.rendering-modes/index.md': 82,
+  '2.concepts/8.state-manegement/index.md': 83,
+  '2.concepts/9.data-fetching/index.md': 84,
+}
+
+const threadUrl = computed<string | null>(() =>
+  page.value?._file && THREAD_ID_MAP[page.value._file]
+    ? `https://github.com/vuejs-jp/learn.nuxt.com/discussions/${THREAD_ID_MAP[page.value._file]}`
+    : null,
+)
+
 const docsEl = ref<HTMLElement | null>(null)
 const router = useRouter()
 router.beforeEach(() => {
@@ -118,7 +145,7 @@ router.beforeEach(() => {
             />
           </div>
         </div>
-        <div border="t base dashed" mt-8 p3>
+        <div flex="~ items-center gap-4" border="t base dashed" mt-8 p3>
           <NuxtLink
             v-if="sourceUrl"
             :to="sourceUrl" target="_blank"
@@ -129,6 +156,17 @@ router.beforeEach(() => {
             <div i-ph-note-pencil-duotone />
             Edit this page
           </NuxtLink>
+          <NuxtLink
+            v-if="threadUrl"
+            :to="threadUrl"
+            target="_blank"
+            flex="~ items-center gap-2"
+            text-inherit op75
+            hover="text-primary op100"
+          >
+            <div i-ph-arrow-square-out-fill />
+            Ask your question
+          </NuxtLink>
         </div>
       </article>
       <!-- Navigration Dropdown -->