add defaultSection and change title shown

app/src/modules/docs/components/sections.ts

@@ -4,16 +4,20 @@ export type Section = {
 	description?: string;
 	icon?: string;
 	sectionIcon?: string;
+	sectionName?: string;
 	children?: Section[];
 	default?: string;
 	flat?: boolean;
 };
 
+export const defaultSection = '/docs/getting-started/introduction';
+
 const sections: Section[] = [
 	{
 		icon: 'play_arrow',
 		name: 'Getting Started',
 		to: '/docs/getting-started',
+		default: '',
 		children: [
 			{
 				name: 'Introduction',

app/src/modules/docs/index.ts

@@ -1,7 +1,8 @@
 import { defineModule } from '@/modules/define';
 import Docs from './routes/docs.vue';
-import sections, { Section } from './components/sections';
+import sections, { Section, defaultSection } from './components/sections';
 import { Route } from 'vue-router';
+import { cloneDeep } from 'lodash';
 
 function urlSplitter(url: string) {
 	if (url.startsWith('/docs')) url = url.replace('/docs', '');
@@ -10,18 +11,21 @@ function urlSplitter(url: string) {
 }
 
 function urlToSection(urlSections: string[], sections: Section[]): Section | null {
-	const section = sections.find((s) => urlSplitter(s.to).pop() === urlSections[0]);
+	let section = sections.find((s) => urlSplitter(s.to).pop() === urlSections[0]);
 
 	if (section === undefined) {
 		return null;
 	}
 
+	section = cloneDeep(section);
+
 	if (urlSections.length === 1) {
 		let finalSection = section;
 		while (finalSection.children !== undefined) {
 			finalSection = finalSection.children[0];
 		}
 		if (section.icon) finalSection.icon = section.icon;
+		if (finalSection.sectionName === undefined) finalSection.sectionName = section.name;
 		return finalSection;
 	}
 
@@ -29,6 +33,10 @@ function urlToSection(urlSections: string[], sections: Section[]): Section | nul
 
 	const sectionDeep = urlToSection(urlSections.slice(1), section.children);
 
+	if (sectionDeep !== null && sectionDeep.sectionName === undefined) {
+		sectionDeep.sectionName = section.name;
+	}
+
 	if (
 		sectionDeep !== null &&
 		sectionDeep.icon === undefined &&
@@ -51,6 +59,10 @@ export default defineModule(({ i18n }) => ({
 	routes: [
 		{
 			path: '/*',
+			beforeEnter: (to, from, next) => {
+				if (to.path === '/docs/') next(defaultSection);
+				else next();
+			},
 			component: Docs,
 			props: props,
 		},

app/src/modules/docs/routes/docs.vue

@@ -50,7 +50,7 @@ export default defineComponent({
 		});
 
 		const title = computed(() => {
-			return isAPIReference.value ? i18n.t('api_reference') : props.section.name;
+			return isAPIReference.value ? i18n.t('api_reference') : props.section.sectionName;
 		});
 
 		watch(() => props.section, loadMD, { immediate: true });