Comments (1)
I understand how it can be confusing, but this is how Webpack loaders work.
JSX tags (both in MDX and React files) are rendered as-is, unprocessed, so it is your responsibility to ensure that the <a>
href
prop you provide to them is correct. For Markdown files.
For Markdown files, we make the assumption that a link with an extension is likely to download the file. This is fine because user still has the possibility to use JSX to opt-out of this Markdown link behavior, and having a different behavior for JSX is there on purpose.
Please consider the following JSX:
<div>
<a href={require('./test.csv').default}>Download test.csv</a>
</div>
<div>
The CSV file content is:
<pre>{require('./test.csv').default}
</div>
As you can see, requiring a CSV file can mean different things to different people. They might want to provide a link to that CSV, or they might want to display the content of the file itself. When using Markdown, the case is more limited because the 2nd case doesn't apply here.
It's impossible for Docusaurus to provide an opinion on how files should be loaded that would make all users happy, for that reason we only provide an opinion on the most common media files, and let users add their own opinions through custom Webpack config if they want to.
It's impossible for us to automatically support CSV as a downloadable format in Docusaurus, because many users will not want that. But if on your site, you are sure all CSV files are downloadable files and not rendered inline, you can use the configureWebpack
hook to register your own Webpack loader
Demo time
https://stackblitz.com/edit/github-a18bvz-rmfzbj?file=docs%2Fintro.md
<ul>
<li>{JSON.stringify(require('./test.docx'))}</li>
<li>{JSON.stringify(require('./test.csv'))}</li>
<li>{JSON.stringify(require('!file-loader?name=assets/files/[name]-[contenthash].[ext]!./test.csv'))}</li>
</ul>
An alternative to using configureWebpack
could be to use inline webpack loaders. In practice this is what we actually do with Markdown links.
You can provide a sensible default thanks to the Webpack global config, but you can also decide on a case-by-case basis what does it mean for Webpack to require a file, overriding that default config.
from docusaurus.
Related Issues (20)
- Document solution to "docs last update" date being rendered incorrectly when published through Vercel
- Customizing admonitions not work HOT 3
- When testing on StrictMode, the bar remains on the top HOT 1
- Node.js building getting stuck HOT 2
- Updating to @mdx-js/react 3.0.1 causes admonition blocks to stop rendering colored box HOT 8
- The <!--truncate--> line in my long blog post on the initialized website is not causing the blog post size to be limited. HOT 1
- Add trailing slash to auto generated sitemap.xml for directories only HOT 3
- blogTitle not working HOT 4
- Algolia Contextual Search Generates Incorrect FaceFilters HOT 6
- Multi-Instance Routes Not Working in v3.2.1 HOT 3
- Home page renders twice, one below the other. HOT 1
- Details elements aren't searchable - a11y issue HOT 8
- WARNβ 1 deprecated subdependencies found: [email protected] HOT 1
- npm run build fails when nmetadata are missing HOT 3
- Broken link transformation HOT 2
- Ability to Skip Homepage and Directly Access Feature Page HOT 1
- Light/Dark Mode issues on older versions of Safari 12,13, and 14 HOT 3
- Problems with locale url on homepage and blog HOT 7
- Proposal: createSitemapItems hook - a sitemap equivalent to createFeedItems
- Blob storage files render dynamically HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from docusaurus.