Tried it locally, it's blurry but not that terrible if we use the same size/ppi:

You can use a bigger-sized PNG:

Or you can use this plugin which we enabled for our site, then inline the image. The documentation is garbage though.

import Image from '@theme/IdealImage';

{/* stuff in the middle  */}
import local_libraries from '../assets/images/vs_code/local_libraries.png';
<Image img={local_libraries} style={{maxWidth: 400}} />

The reason inline SVG looks better is that it inlines the style and additional metadata in the SVG, and stored a bigger PNG.

Or you can use this plugin which we enabled for our site, then inline the image. The documentation is garbage though.

import Image from '@theme/IdealImage';

{/* stuff in the middle  */}
import local_libraries from '../assets/images/vs_code/local_libraries.png';
<Image img={local_libraries} style={{maxWidth: 400}} />

The reason inline SVG looks better is that it inlines the style and additional metadata in the SVG, and stored a bigger PNG.

Got it, thanks! I’ll use this plugin with PNGs instead of SVGs

To-Do

• Standardize the use of package instead of project
• Rename the Create a new file section to Create a new package and include details on using lingo init to create an LF package from scratch

Just a reminder, after you finish it would be nice to clean up the commits a little bit by squashing some of them