Best way to retrieve frontmatter from the next page

[BenjaminOddou]

I'm looking to assess the frontmatter of an incoming page using the useRouter and useData composables, but I'm unable to access it before the route change actually occurs. If anyone has suggestions on how to achieve this, please feel free to share.

Additionally, if you know a method to load the HTML content of the next page, that would be very helpful! Thank you very much in advance

[brc-dd]

Hmm page is loaded after route change. So, hard to get it that way. Maybe you can extract the relevant data to a separate file (maybe createContentLoader) and do something like this:

// .vitepress/theme/index.ts

import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import { data } from '../../frontmatter.data.js'

export default {
  extends: DefaultTheme,
  enhanceApp({ router }) {
    router.onBeforeRouteChange = (to) => {
     const frontmatter = data[to]
    }
  }
} satisfies Theme

[BenjaminOddou]

Hello @brc-dd,

Many thanks for the feedback. For those interested, here is my frontmatter.data.ts file code:

// ./vitepress/theme/frontmatter.data.ts
import { createContentLoader } from 'vitepress'
export default createContentLoader('**/*.md', {
  transform(rawData) {
    return rawData.reduce((acc, page) => {
      acc[page.url] = page.frontmatter
      return acc
    }, {} as Record<string, Record<string, any>>)
  },
})

@brc-dd, I saw that createContentLoader can return the HTML content of the page. In association with some HTML encryption logic (pagecrypt library), do you think encrypting some protected pages on the fly would be a good idea to protect pages, or is it not secure enough? (Related to #3131 and #1293)

EDIT :

// .vitepress/theme/index.ts
import { data } from './frontmatter.data.ts'
// ...

return the following typescript error :

Module '"./frontmatter.data.ts"' has no exported member 'data'. Did you mean to use 'import data from "./frontmatter.data.ts"' instead? ts(2614)

[brc-dd]

do you think encrypting some protected pages on the fly would be a good idea to protect pages, or is it not secure enough

You'll need to protect the JS chunks too. Otherwise one can just fetch and read them. If you want to disable access for all pages, you can do something like this - https://github.com/brc-dd/vitepress-kinde-demo/blob/main/src/index.ts. Client-only authentication solutions are easily bypass-able mostly.

[brc-dd]

return the following typescript error :

You can declare the types - https://vitepress.dev/guide/data-loading#typed-data-loaders

declare const data: Record<string, Record<string, any>>
export { data }

export default createContentLoader ...

[BenjaminOddou]

You'll need to protect the JS chunks too

Ah, yes, indeed 😮 ! I can't see a way to solve this problem. My first idea was to encrypt the data at build time, but I'm not sure how to do it properly. Encrypting pages on route change doesn't seem better because all the raw HTML will be loaded in a chunk without being protected. Alternatively, maybe encrypting inside a data.ts file could be the solution, but I'm not sure.

If you want to disable access for all pages

Unfortunately, I'd like to protect only some pages.

[BenjaminOddou]

You can declare the types - https://vitepress.dev/guide/data-loading#typed-data-loaders

Thanks for your help. I really appreciate it!