feat(astro-org): optimise and display relative content images

[venikx]

Que?

I'm probably breaking plenty of the cases with the semi re-write, but I found the way the plugins were being handled a bit odd. Especially, with the extra vite config and what not. As a partial result the surface api of the astro plugin has been changed during the process.

What's supported?

• [x] astro v4
• [x] relative images, via [[./hello.jpg]], make astro pick them up, and dump them in _astro to be served

Some questions

I noticed midway through the "parsing" that current implementation was dumping jsx stringified snippets into the ast. Was this an purpose for a use-case I'm not aware of? I remember https://github.com/orgapp/orgajs had the capability to generate jsx components from org-mode.

It also was doing something hacky with regards to vite/rollup. Was it supporting a specific use-case I should be aware of? Possibly relevant for @ispringle as well maybe?

Is this site live somewhere?

I tested this out on my own site: https://github.com/venikx/venikx.com/blob/main/src/lib/astro-org.ts (copy of astro-org source), configured via https://github.com/venikx/venikx.com/blob/main/astro.config.ts. The org-mode in question is here: https://github.com/venikx/venikx.com/blob/main/src/content/blog/handmade-hero-nixos/index.org and the site is live here: https://venikx.com/posts/handmade-hero-nixos/

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 0ffc106eaab416a9b78eb81066ae2de2fce82871

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

| Name | Type | | ----------------------- | ----- | | astro-org | Major | | @uniorgjs/astro-example | Major | | uniorg-rehype | Minor | | @uniorgjs/orgx | Patch | | rollup-plugin-orgx | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
org-blog-starter	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 15, 2024 10:53am

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 96.32%. Comparing base (466fd42) to head (8ae3a2b).

:exclamation: Current head 8ae3a2b differs from pull request most recent head 0ffc106. Consider uploading reports for the commit 0ffc106 to get more accurate results

Additional details and impacted files

```diff @@ Coverage Diff @@ ## master #104 +/- ## ======================================= Coverage 96.32% 96.32% ======================================= Files 15 15 Lines 1822 1822 Branches 601 601 ======================================= Hits 1755 1755 Misses 66 66 Partials 1 1 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[venikx]

@rasendubi How are you using the ids in astro?

[rasendubi]

Hey. Sorry, for the long reply

As you seem to have noticed, this PR is breaking orgx support (dumping JSX). This is used to allow users to override standard components from Astro (e.g., overriding <a> to enable pre-loading)

Another example where this overriding is helpful is to override <img> to enable Astro's image optimization. Here's an example implementation I use on my website: oleksii.shmalko.com/src/components/Image.astro and here's how to install it.

This rehype plugin might be relevant for resolving relative links (to images, other pages, and downloadable files). It searches for relative links and replaces them with imports. Probably worth adding it to astro-org package.

[rasendubi]

Another note is that astro-org is mostly a copy-paste-edit from @astrojs/mdx (although from an earlier version), which might explain some of the weirdness you see. If possible, I would like to keep them similar which helps with adapting new fixes and features from @astrojs/mdx.

I just took a look and it seems that @astrojs/mdx has also grown to handle images better. See this plugin.