How to make the home page layout like a sidebar + docs page?

[davestewart]

For our internal docs, we are using the default theme, but we don't need a splashy home page, and would instead like to make the home page behave like a docs page.

We know we can remove the frontmatter and have it display like layout: doc but the problem is the container, content and VPNavBar have different widths, padding, etc to the main docs pages, so when you navigate, there's a big layout jump:

+-------------------------+
|         :        :      |
|         :  Home  :      |
|         :        :      |
|         :        :      |
|         :        :      |
+-------------------------+

+-------+-----------------+
|       |            :    |
|       |  Content   :    |
|       |            :    |
|       |            :    |
|       |            :    |
+-------+-----------------+

I've tried mucking about with custom styles, but there's a lot to be considered, especially with breakpoints, etc.

I also tried rewrites (to skip the home page and jump directly to a section) but I think I need to those on the server level, and this is just internal.

Does anyone know how we can make the home page behave more consistently?

Thanks.

[brc-dd]

What does your sidebar config look like?

I’m doing this at my company — https://sefirot.globalbrains.com/ — we just have a index.md in docs without home layout — https://github.com/globalbrain/sefirot/tree/main/docs

[davestewart]

Ah, I'm running the "multiple sidebars" setup with a navigation bar.

Home page:

Section page:

Config:

import { defineConfig } from 'vitepress'
import { withSidebar } from 'vitepress-sidebar'

// -----------------------------------------------------------------------------
// helpers
// -----------------------------------------------------------------------------

// @see https://vitepress-sidebar.cdget.com
function getMenu(folder) {
  return {
    documentRootPath: `docs`,
    scanStartPath: folder,
    basePath: `/${folder}/`,
    resolvePath: `/${folder}/`,
    useTitleFromFileHeading: true,
    useFolderTitleFromIndexFile: true,
    capitalizeEachWords: true,
    includeFolderIndexFile: true,
  }
}

...

export default withSidebar(config, [
  getMenu('setup'),
  getMenu('backend'),
  getMenu('frontend'),
  getMenu('specs'),
])

[brc-dd]

Is there something you can show on sidebar on your home page? Or can you add home page to setup sidebar maybe? Something like this - https://stackblitz.com/edit/vite-sy1hhp?file=docs/.vitepress/config.ts

[davestewart]

That's a nice idea for a workaround!

Initially I thought it wasn't going to work as it looks pretty weird having just one sidebar item.

BUT... enhance app to the rescue!

// theme/index.ts
  ...
  enhanceApp({ app, router, siteData }) {
    router.onAfterRouteChanged = (to)  => {
      document.querySelector('#app').setAttribute('data-route', to)
    }
  },

// custom.css
#app[data-route="/"] {
  --vp-sidebar-bg-color: none;

  #VPSidebarNav {
    display: none;
  }

  .VPNavBarTitle .title {
    border-bottom-color: transparent;
  }
}

The docs look great now; a simple home page and no layout shift when I navigate.

I do think it would be cool if the sidebar layout had a way to be more consistent, but I'll take this!

[brc-dd]

You can actually add class without hack too:

---
pageClass: 'home'
---

markdown here...

:root.home {
  ...
}

[davestewart]

OK, this is now the final solution...

I used a null in the sidebar config, which is cleaner:

sidebar: {
  '/': [null],
  ...
}

And I kept the router "hack" as it just means the logic to hide the sidebar is in one place (as above).

The router hook is now:

  enhanceApp({ app, router, siteData }) {
    router.onAfterRouteChanged = (to)  => {
      const sidebar = siteData.value.themeConfig?.sidebar[to]
      const noSidebar = sidebar?.length === 1 && sidebar[0] === null
      document.querySelector('#app')?.classList.toggle('noSidebar', noSidebar)
    }
  },

The CSS is now:

#app.noSidebar {
  --vp-sidebar-bg-color: none;

  #VPSidebarNav {
    display: none;
  }

  .VPNavBarTitle .title {
    border-bottom-color: transparent;
  }
}

Demo here:

• https://stackblitz.com/edit/vite-hidden-sidebar