Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 41 additions & 0 deletions packages/build-info/assets/logos/vitepress/default.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions packages/build-info/src/frameworks/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ import { TanStackRouter } from './tanstack-router.js'
import { TanStackStart } from './tanstack-start.js'
import { Vike } from './vike.js'
import { Vite } from './vite.js'
import { VitePress } from './vitepress.js'
import { Vue } from './vue.js'
import { VuePress } from './vuepress.js'
import { Waku } from './waku.js'
Expand Down Expand Up @@ -91,6 +92,7 @@ export const frameworks = [
Analog,
Vike,
Waku,
VitePress,

// Back-end frameworks
Hono,
Expand Down
35 changes: 35 additions & 0 deletions packages/build-info/src/frameworks/vitepress.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { beforeEach, expect, test } from 'vitest'

import { mockFileSystem } from '../../tests/mock-file-system.js'
import { NodeFS } from '../node/file-system.js'
import { Project } from '../project.js'

beforeEach((ctx) => {
ctx.fs = new NodeFS()
})

test('detects a Vitepress site', async ({ fs }) => {
const cwd = mockFileSystem({
'package.json': JSON.stringify({
private: true,
type: 'module',
scripts: {
'docs:dev': 'vitepress dev docs',
'docs:build': 'vitepress build docs',
'docs:preview': 'vitepress preview docs',
},
devDependencies: {
vitepress: '^2.0.0-alpha',
},
}),
})
const detected = await new Project(fs, cwd).detectFrameworks()

expect(detected?.length).toBe(1)

expect(detected?.[0]?.id).toBe('vitepress')
expect(detected?.[0]?.build?.command).toBe('vitepress build')
expect(detected?.[0]?.build?.directory).toBe('.vitepress/dist')
expect(detected?.[0]?.dev?.command).toBe('vitepress dev')
expect(detected?.[0]?.dev?.port).toBe(5173)
})
25 changes: 25 additions & 0 deletions packages/build-info/src/frameworks/vitepress.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { BaseFramework, Category, Framework } from './framework.js'

export class VitePress extends BaseFramework implements Framework {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add vitepress to the big list of excluded dependencies for vite: https://github.com/dario-piotrowicz/netlify-build/blob/796ebb173d716151fe0e864c724be1e67c1cdd1c/packages/build-info/src/frameworks/vite.ts#L7

Huh, never mind, vitepress projects don't have a direct dependency on vite!

readonly id = 'vitepress'
name = 'VitePress'
npmDependencies = ['vitepress']
category = Category.SSG

dev = {
command: 'vitepress dev',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See discussion below. If we want this to align with the defaults from npx vitepress init, we should use:

Suggested change
command: 'vitepress dev',
command: 'vitepress dev docs',

port: 5173,
pollingStrategies: [{ name: 'TCP' }],
}

build = {
command: 'vitepress build',
directory: '.vitepress/dist',
Comment on lines +16 to +17
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

πŸ€” Hmm, VitePress is an interesting case because of https://vitepress.dev/guide/routing#root-and-source-directory. It's doubly strange because the "project root" isn't even configurable; it's an ephemeral concept specified on the command line πŸ™ƒ.

vitepress build foo emits build output into ./foo/.vitepress/dist. VitePress calls ./foo here the "project root". If you run vitepress build without a root arg, root is set to pwd, so the output ends up in ./vitepress/dist. This isn't entirely a build output concernβ€”the project root is where the VitePress config file is expected, etc. so it needs to be correct.

πŸ€”πŸ€”πŸ€”

I don't think it's possible to make this perfect. Perhaps the best we can do is use their current recommended config, which is compatible with the defaults emitted by npx vitepress init (i.e. project root = ./docs).

Suggested change
command: 'vitepress build',
directory: '.vitepress/dist',
command: 'vitepress build docs', // ideally we don't use `npm run build:docs` here due to pnpm, etc.
directory: 'docs/.vitepress/dist',

What do you think? We could do some hacky things inspecting the user build command, but I'm not sure that's worth the complexity...

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think going with the "docs" folder is most common. Users can change it around if they deploy a "plain vitepress site".

And the default command is shown in the Netlify UI too, right (so users will spot a mismatch)?

}

logo = {
default: '/logos/vitepress/default.svg',
light: '/logos/vitepress/default.svg',
dark: '/logos/vitepress/default.svg',
}
}
Loading