feat: SEO SPA Sites, Articles and Integration (4/4)

web/src/views/IntegrationView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { t, translate } from '@/i18n'
 
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
 import CodeSnippet from '@/components/CodeSnippet.vue'
 import CodeText from '@/components/CodeText.vue'
 import DashboardShell from '@/components/DashboardShell.vue'
@@ -21,6 +22,7 @@ import { SECTION_TITLE } from '@/lib/apiReference'
 
 const SPY_OFFSET_PX = 120
 
+const route = useRoute()
 const origin = computed(() => window.location.origin)
 
 const root = ref<HTMLElement | null>(null)
@@ -151,6 +153,10 @@ let scroller: HTMLElement | null = null
 onMounted(() => {
 	scroller = root.value ? scrollParent(root.value) : null
 	scroller?.addEventListener('scroll', updateActive, { passive: true })
+	const target = route.hash.slice(1)
+	if (sections.value.some((section) => section.id === target)) {
+		nextTick(() => goTo(target))
+	}
 })
 
 onBeforeUnmount(() => scroller?.removeEventListener('scroll', updateActive))
@@ -354,6 +360,12 @@ const CARD_TITLE = 'text-md/6 font-semibold text-highlighted'
 									<span class="text-pretty text-toned">{{
 										quoteMessages(row.original.messages)
 									}}</span>
+									<span
+										v-if="row.original.note"
+										class="text-pretty text-muted"
+										data-testid="error-note"
+										>{{ translate(row.original.note) }}</span
+									>
 								</div>
 							</div>
 						</template>
@@ -362,6 +374,12 @@ const CARD_TITLE = 'text-md/6 font-semibold text-highlighted'
 								<span class="text-pretty">{{
 									quoteMessages(row.original.messages)
 								}}</span>
+								<span
+									v-if="row.original.note"
+									class="text-pretty text-muted"
+									data-testid="error-note"
+									>{{ translate(row.original.note) }}</span
+								>
 							</div>
 						</template>
 					</UTable>