vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
11.48k stars 1.86k forks source link

Configurable asset type #3818

Closed JurreBrandsenInfoSupport closed 3 weeks ago

JurreBrandsenInfoSupport commented 3 weeks ago

Is your feature request related to a problem? Please describe.

The problem I encounter is the fact that certain assets (.pptx, .xlsm, .xlsx) do not behave as I would expect. Currently, if you put these files in the./docs/public folder, you get a link to the location. Clicking this link directs you to a 404 page.

## Resources
-   [Agile Inception Deck](/documents/agile-inception-deck.pptx)

image

What I would expect is that pressing the link would open a download screen, as these files cannot be opened in the browser.


The file agile-inception-deck.pptx is stored in the ./docs/public/documents/ folder.

Describe the solution you'd like

I'd like to be able to configure assets in the config.ts file, where I would be able to configure how these assets should be handled.

Example

assetAction {
    pattern: ['**/*.{pptx, xlsm}']
    action: 'download'
}

Describe alternatives you've considered

Adding custom mimetypes to the vite source code as per the instructions of described in constants.ts

Additional context

The current workaround for this issue is using the <a> tag with target="_blank" in the markdown files. i.e., <a href="/documents/agile-inception-deck.pptx" target="_blank">Agile Inception Deck</a> instead of
[Agile Inception Deck](/documents/agile-inception-deck.pptx)

Validations

brc-dd commented 3 weeks ago

Try adding this to top of your .vitepress/config:

process.env.VITE_EXTRA_EXTENSIONS = 'pptx,xlsm'

However the proper fix should be to specify download attribute:

[Agile Inception Deck](/documents/agile-inception-deck.pptx){download}

or 

<a href="/documents/agile-inception-deck.pptx" download>Agile Inception Deck</a>
JurreBrandsenInfoSupport commented 3 weeks ago

Thank you for the quick response. I've tested both suggestions, and they both seem to be effective. However, I've noticed that when executing npm run docs:build, all .xlsx and .xlsm files are showing up as dead links. Is this the intended behavior? I'm hesitant to enable the ignoredeadlinks flag in the settings, as it might lead to overlooking genuine dead links elsewhere in the project.

image

brc-dd commented 3 weeks ago

You might not have added the env variable properly. It doesn't show such error for me when using VITE_EXTRA_EXTENSIONS

JurreBrandsenInfoSupport commented 3 weeks ago

Yeah, turns out I was being silly. process.env.VITE_EXTRA_EXTENSIONS = "xlsx,pptx,xlsm"; without any spaces does the trick. Thanks again.