wrong image URL : missing initial `/` ?

mathieunicolas commented 1 year ago

Thanks for asking me to create a new issue, I've been able to look at the problem deeper and I think it's more simpler than I thought !

Describe the bug

I have a problem with SRC rewriting on IMG tags :

with external source https://6433e5d6a9fb4e07289a360d--kaleidoscopic-brioche-dc7d6b.netlify.app/alloe18/partie1/chapitre1/ you can find here the generated page for this file
with local content files (slighly different setup but mostly the same files) https://6433e915f7271a7c8fcfd222--kaleidoscopic-brioche-dc7d6b.netlify.app/alloe18/partie1/chapitre1

the IMG tag :

<img src="alloe18/machine.png" alt="image" data-v-2ef15301="">

Expected behaviour

IMO the expected behaviour should be an image SRC = /alloe18/machine.png, which is where the image has been copied : since the URL doesn't start with a / it's considered as a relative path and interpreted by the browser as /alloe18/partie1/alloe18/machine.png

the file machine.png is inserted in the /alloe18/partie1/chapitre1.md file with the code ![image](../machine.png),
BUT it is copied in the path /alloe18/machine.png
AND is referenced as alloe18/machine.png in the generated HTML tag.

To Reproduce

my nuxt.config.ts for the external files setup, same for the local content files with the sources object commented :

  modules: [
    'nuxt-content-assets', // make sure to add before content!
    '@nuxt/content'
  ],
  content: {
    sources: {
      gh: {
        driver: 'github',
        repo: 'mathieunicolas/alloe',
        dir: '/',
        prefix: '/'
      }
    }
  },
  'content-assets': {
    output: '/[folder]/[file]',
    additionalExtensions: 'epub',
  },

Additional context

Maybe it's just a / missing !

Software versions:

Node v18.15.0

docus-starter@0.1.0 /Users/mathieu/WebstormProjects/alloe-site
├── nuxt-content-assets@0.7.0
└── nuxt@3.3.3

davestewart commented 1 year ago

Hey! Thanks for creating this.

I'm actually considering dropping all the path transform stuff altogether, and just mirroring the final content folder structure.

I originally put it in so users could upload a single folder to image CDNs but it does make things more complicated.

I'm currently working on the watch folder functionality and that is complex enough without additional transforms!

I'll let you know when I get the next version out, hopefully in the next day or so.

davestewart commented 1 year ago

OK @mathieunicolas...

A big refactor took place over the last couple of days:

output configuration has been removed (at least, for now)
image locations now default to same as content source
local assets additions, moves and deletes are mirrored live
images live-reload in development!

Do you want to try 0.9.0-alpha and let me know how you get on?

https://www.npmjs.com/package/nuxt-content-assets

The sockets code is a bit rough, but it works. I have been trying to extract it to an external module but it's been a little problematic.

The 1.0.0 will probably wait until I can do this.

mathieunicolas commented 1 year ago

You did an amazing job ! It's really impressive, big thanks to you ! The image URL issue is now fixed ! All the new features you added look very cool and I can't wait to try them on an other project !

One more thing, it looks like the _dir.yml files are either ignored or not processed, for example I set the title "alloé18" in such a file here and it's not applied in the header :

You can see it live in my Kaleidoscopic Brioche ! Do you want me to create a new issue related to this ?

I also have this error in my VSCode editor, related to additionalExtensions in 'content-assets' nuxt.config.ts :

davestewart commented 1 year ago

In theory we don't need additional extensions anymore as I've flipped how assets are determined.

However, the yaml thing you posted needs investigation so yeah, please make a new issue for that and I'll take a look!

davestewart commented 1 year ago

One other thing, I saw that there was a jump when your images loaded in.

If you set the setting imageSize to attrs the module will correctly size your images and you won't get the jolt:

'content-assets': {
  imageSize: 'attrs'
}

If you want the image small (I notice you set the width) you might be better with a max-height rule in your CSS to retain the ratio but make sure they never get too big:

.page-body img {
  max-height: 400px;
}

// could even do this
.page-body img:first-of-type {
  max-height: 400px;
}

davestewart commented 1 year ago

Closing as the paths issue is considered fixed.

PS. the docs for this alpha version are here: https://github.com/davestewart/nuxt-content-assets/tree/0001-watch-assets

davestewart / nuxt-content-assets