Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include image metadata from content source #98

Open
vimtor opened this issue Mar 31, 2024 · 10 comments
Open

Include image metadata from content source #98

vimtor opened this issue Mar 31, 2024 · 10 comments

Comments

@vimtor
Copy link

vimtor commented Mar 31, 2024

Hi there! Can image metadata be included when extracted from content instead of front matter?

I need the image width and height in the MDX component for the Next.js Image component. Currently, only src and alt properties are available.

Also, is it possible to import images directly for use with a custom component like this:

import image from './example.png'

# Title

See the image below:

<Figure>
  <FigureImage src={image} alt="" />
  <FigureCaption>
    Caption
  </FigureCaption>
</Figure>
@zce
Copy link
Owner

zce commented Apr 1, 2024

First of all, Velite does not intend to support the dynamic import method, but now there are plans to process the local image metadata referenced in the content.

@vimtor
Copy link
Author

vimtor commented Apr 1, 2024

Got it, @zce!

Velite looks really promising. In case anyone is interested, I finally managed to accomplish this using RSC:

import getImageSize from "image-size";
import { Figure, FigureImage, FigureCaption } from "./components";

const useMDXComponent = (code: string) => {
  const fn = new Function(code);
  return fn({ ...runtime }).default;
};

interface MdxProps {
  code: string;
  components?: Record<string, React.ComponentType>;
}

export const MDXContent = async ({ code, components }: MdxProps) => {
  const Component = useMDXComponent(code);
  return (
    <Component
      components={{
        ...components,
        img: async ({ src, alt }: { src: string; alt?: string }) => {
          const location = path.join(process.cwd(), "public", src);
          const { width, height } = getImageSize(location);

          return (
            <Figure>
              <FigureImage
                src={src}
                alt={alt ?? ""}
                width={width}
                height={height}
              />
              {alt && <FigureCaption>{alt}</FigureCaption>}
            </Figure>
          );
        },
      }}
    />
  );
};

@zce
Copy link
Owner

zce commented Apr 1, 2024

Yes, this is a good idea at the moment, but I still plan to put getting metadata into build to improve runtime efficiency

@Adriel-M
Copy link

Adriel-M commented Apr 2, 2024

I did something hacky where you embed the info via a rehype plugin: https://github.com/Adriel-M/adriel.dev/blob/main/lib/remarkPlugins/RemarkImgToJsx.ts (originally from https://github.com/timlrx/pliny/blob/main/packages/pliny/src/mdx-plugins/remark-img-to-jsx.ts)

I also bundled everything in the images folder https://github.com/Adriel-M/adriel.dev/blob/main/lib/Images.ts#L2 and swap the source to that bundled path: https://github.com/Adriel-M/adriel.dev/blob/main/components/Image.tsx#L7

I did this to actually have the image have a non 0 max age cache-control for nextjs: (https://nextjs.org/docs/app/building-your-application/optimizing/static-assets#caching)

If you're not on nextjs, just the first paragraph seems to be the useful bit. I just came from contentlayer and I'm still exploring the capabilities of velite.

@zce
Copy link
Owner

zce commented Apr 2, 2024

I did something hacky where you embed the info via a rehype plugin: Adriel-M/adriel.dev@main/lib/remarkPlugins/RemarkImgToJsx.ts (originally from timlrx/pliny@main/packages/pliny/src/mdx-plugins/remark-img-to-jsx.ts)

At present, it is a good way to use the remark/rehipe plug-in, but I plan to integrate image metadata into the built-in rehipeCopyLinkedFiles / remarkCopyLinkedFiles plug-in

@zce
Copy link
Owner

zce commented Apr 2, 2024

If you use Next.js, you can also get a better experience by optimizing the pictures in building with the custom image loader.

There is a tool for my own use: https://github.com/zce/zimg

import { ImageLoader } from 'next/image'

const CustomLoader: ImageLoader = ({ src, width, quality }) => {
  if (process.env.NODE_ENV !== 'production') return src + '?dev'
  // do not optimize svgs and gifs
  if (/\.(svg|gif)$/.test(src)) return src + '?uo'
  // pre-optimize images with zimg in production build
  if (/^\//.test(src)) return src.replace(/\.[a-z]+$/i, `.${width}.webp`)
  return `${src}?w=${width}&q=${quality ?? 75}`
}

export default CustomLoader

I do this myself

@Adriel-M
Copy link

Adriel-M commented Apr 4, 2024

Great!
It works with my bundling approach: https://github.com/Adriel-M/adriel.dev/pull/166/files#diff-5acfbc6c5ec1739b3121c7454d949384b38bcbdffa4645a0b002e52521bed26eR3

Using this since cloudflare doesn't have image optimization. Thanks a lot!

Roughly how much time does it add to your builds?

@zce
Copy link
Owner

zce commented Apr 4, 2024

Roughly how much time does it add to your builds?

This depends on the number and size of images you need to process, as well as the performance of the host. Here is my performance of a case in Vercel

image

@syhily
Copy link

syhily commented Apr 10, 2024

Here comes another idea which use the Velite built-in getImageMetadata and remarkPlugins. It's a fork from @Adriel-M 's work.

https://github.com/syhily/yufan.me/blob/0b692189693aa4e1251fd2c038e4728181aeb8e0/src/components/mdx/remark-plugins.ts

@wontory
Copy link

wontory commented Oct 12, 2024

I did something hacky where you embed the info via a rehype plugin: Adriel-M/adriel.dev@main/lib/remarkPlugins/RemarkImgToJsx.ts (originally from timlrx/pliny@main/packages/pliny/src/mdx-plugins/remark-img-to-jsx.ts)

At present, it is a good way to use the remark/rehipe plug-in, but I plan to integrate image metadata into the built-in rehipeCopyLinkedFiles / remarkCopyLinkedFiles plug-in

How is this going?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants