docs: update layout

Author: mrholek

packages/docs/.vuepress/src/client/components/ScssDocs.vue

@@ -22,7 +22,7 @@ export default defineComponent({
     }
 
     const files = import.meta.glob(`../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
-      as: 'raw',
+      query: '?raw',
       eager: true,
     })
     const file = files[`../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]

packages/docs/.vuepress/src/client/layouts/Layout.vue

@@ -13,8 +13,15 @@
           <main class="docs-main order-1">
             <div class="docs-intro ps-lg-4">
               <Banner />
-              <h1 className="docs-title" id="content">{{ title }}</h1>
-              <p class="docs-lead">{{ description }}</p>
+              <div v-if="name && name !== title" class="d-flex flex-column">
+                <h1 class="order-2 h5 mb-4 text-body-secondary" id="content">
+                  {{ title }}
+                </h1>
+                <h2 class="docs-title order-1 h1">{{ name }}</h2>
+              </div>
+              <h1 v-else class="docs-title" id="content">
+                {{ title }}
+              </h1>
               <Ads />
               <OtherFrameworks />
             </div>
@@ -56,6 +63,7 @@ const scrollPromise = useScrollPromise()
 const onBeforeEnter = scrollPromise.resolve
 const onBeforeLeave = scrollPromise.pending
 
+const name = frontmatter.value.name
 const title = frontmatter.value.title
 const description = frontmatter.value.description
 

packages/docs/.vuepress/src/shared/page.ts

@@ -9,6 +9,7 @@ export interface DefaultThemePageFrontmatter {
   home?: boolean
   navbar?: boolean
   pageClass?: string
+  name?: string
 }
 
 export interface DefaultThemeHomePageFrontmatter