feat: integrate @rsbuild-image/rspress into website
#2156
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
❌ Deploy Preview for rspress-v2 failed. Why did it fail? →
|
❌ Deploy Preview for rspress failed. Why did it fail? →
|
JounQin
reviewed
May 14, 2025
| @@ -4,7 +4,7 @@ The plugin system is a crucial part of Rspress, which allows you to easily exten | |||
|
|
|||
| The overall architecture of Rspress is shown in the figure below: | |||
|
|
|||
|  | |||
|  | |||
There was a problem hiding this comment.
Yep, I imported the image file as a asset module right on the zh translation. So that we can compare the different of their behaviours.
I updated the PR summary. You can see more context there.
There was a problem hiding this comment.
The image is intented to be Rspress Architecture, but the new one css-extract-loader is definitely not.
JounQin
reviewed
May 14, 2025
| "@rsbuild/plugin-sass": "~1.3.1", | ||
| "@rspress/plugin-algolia": "workspace:*", | ||
| "@rspress/plugin-llms": "workspace:*", | ||
| "@rspress/plugin-shiki": "workspace:*", | ||
| "@rstack-dev/doc-ui": "1.8.0", | ||
| "@rstack/resource": "git://github.com/rspack-contrib/rstack-design-resources.git", |
There was a problem hiding this comment.
At least it should be https:// protocol. And it's strange to install the whole repo although we're only relying on several resources inside.
Suggested change
| "@rstack/resource": "git://github.com/rspack-contrib/rstack-design-resources.git", | |
| "@rstack/resource": "rspack-contrib/rstack-design-resources", |
SoonIter
reviewed
May 14, 2025
|
|
||
| export default defineConfig({ | ||
| root: path.join(__dirname, 'doc'), | ||
| plugins: [pluginImage({ ipx: {} })], |
There was a problem hiding this comment.
{} is confused to users,
could this option be set to pluginImage({ ipx: true })?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
I'm working on the Rsbuild Image and which is a rsbuild plugin can bring image compiling and rendering optimizations into any Rsbuild-based applications.
And here is its rspress plugin, I integrated it into our website. Which provides lots of optimization approaches and some of them heavily relay on the compile-time analyzing. Since it perfer to store all of our image assets to the bytedance owned CDN or the https://github.com/rspack-contrib/rstack-design-resources repo (to reduce the file scaling of rspress repo?). I have to install the rstack-design-resources repo as a npm package to make all the assets resolvable.
Plugin Integration
@rsbuild-image/rspressplugin configuration torspress.config.tsfiles in both thee2e/fixtures/rsbuild-imageandpackages/documentdirectories to enable image processing with IPX.Documentation Updates
css-extract-loader.png). Which is only used for demostration. You can visit and compare the differences between and to check the image optimizations.End-to-End Testing
plugin-image.test.tsto validate the functionality of the image plugin, including rendering and responsive behavior of images.Fixture Setup for Testing
e2e/fixtures/rsbuild-imagewith configuration files (package.json,rspress.config.ts,index.mdx,tsconfig.json) to support plugin testing.Configuration Enhancements
@assets/*in thetsconfig.jsonfile for thepackages/documentdirectory to streamline asset imports..vscode/settings.jsonto exclude the.rslibdirectory from search and indexing.Related Issue
Checklist