elringus / stopka Goto Github PK

View Code? Open in Web Editor NEW

20.0 1.0 1.0 98.21 MB

Transform images, video and YouTube links to HTML optimized for web vitals

Home Page: https://imgit.dev

License: MIT License

Shell 0.09% TypeScript 96.47% CSS 3.44%

cls embed size avif encode compress lazy-load md vite-plugin

stopka's Introduction

Convert media links to optimized HTML

Images, video and YouTube: fetch, encode, scale, lazyload – for best UX and Web Vitals — imgit is a JavaScript package and set of plugins for popular web frameworks to enhance user experience when interacting with media-heavy websites, such as blogs, landings, portfolios and documentation sites.

Features

✨ Builds optimized HTML for media URLs, markdown or JSX tags

⚡ Encodes to AV1/AVIF utilizing GPU acceleration

♻️ Supports JPG, A/PNG, GIF, WEBM/P, AVI, MKV, TIFF, PSD and more

🌊 Generates tiny blurred covers cross-faded into HD source on lazy-load

📐 Scales the content while preserving HD original for high-DPI displays

🌐 Fetches sources from remote URLs, uploads optimized versions to CDN

🗺️ Plugs into Astro, Svelte, VitePress and more; runs on Node, Deno and Bun

🎬 Get Started

http://imgit.dev/guide

stopka's People

Contributors

Stargazers

Watchers

Forkers

fryuni

stopka's Issues

Markdow Output

I added the following to my Markdown file

![](/images/learn-javascript/spa/what/google.mp4)

Here's the output I got from this Markdown file:

<p><img src="/images/learn-javascript/spa/what/google.mp4" alt=""></p>

No transformation was done on it.

Resolve AV1 spec used by ffmpeg

Find a way to resolve actual codec spec used by ffmpeg for each run. Currently we're sharing a value manually evaluated by following the guide: https://jakearchibald.com/2022/html-codecs-parameter-for-av1 It's valid at the moment, but may change between ffmpeg releases.

Sniff MIME

Instead of resolving content MIME type via file extension, consider using file --mime-type utility available by default on Linux and Mac. On Windows similar is available via file utility available on choco.

Image Paths

Imgit with Astro fetches the file from the public directory. But there are many instances where I want to fetch images from the /src/assets directory instead (since I use Astro's image optimization tool as well). Is it possible to remove the /public?

Example 
// Passed in value 
const test = await import('imgit:/asset/image.png') 

// Path used now
// /absolute-path-to-project/public/src/asset/image.png

// Preferred path 
// /absolute-path-to-project/src/asset/image.png

Implement TTY on Deno

Implement log.tty for Deno platform.

imgit/src/server/platform/deno.ts

Lines 71 to 72 in f5cda02

 log: { 

 tty: () => {}, // TODO: Implement (https://github.com/elringus/imgit/issues/4)

https://deno.land/api?s=Deno.stdout

Invalid type declarations for covariant field in AstroIntegration

The type declared for the Astro plugin specifies unknown[] for Vite's plugin config. This is incompatible with the real AstroIntegration type from astro.

astro.config.mts:110:5 - error TS2322: Type 'AstroIntegration' is not assignable to type 'false | AstroIntegration | (false | AstroIntegration | null | undefined)[] | null | undefined'.
  Type 'AstroIntegration' is not assignable to type 'import("/home/lotus/Workspace/blog/node_modules/.pnpm/[email protected][email protected]/node_modules/astro/dist/@types/astro").AstroIntegration'.
    The types of 'hooks['astro:config:setup']' are incompatible between these types.
      Type '((options: { injectScript: AstroInjector; updateConfig: (config: { vite: { plugins: unknown[]; }; }) => void; }) => void | Promise<void>) | undefined' is not assignable to type '((options: { config: AstroConfig; command: "build" | "dev" | "preview"; isRestart: boolean; updateConfig: (newConfig: DeepPartial<AstroConfig>) => AstroConfig; ... 8 more ...; logger: AstroIntegrationLogger; }) => void | Promise<...>) | undefined'.
        Type '(options: { injectScript: AstroInjector; updateConfig: (config: { vite: { plugins: unknown[]; }; }) => void; }) => void | Promise<void>' is not assignable to type '(options: { config: AstroConfig; command: "build" | "dev" | "preview"; isRestart: boolean; updateConfig: (newConfig: DeepPartial<AstroConfig>) => AstroConfig; ... 8 more ...; logger: AstroIntegrationLogger; }) => void | Promise<...>'.
          Types of parameters 'options' and 'options' are incompatible.
            Type '{ config: AstroConfig; command: "build" | "dev" | "preview"; isRestart: boolean; updateConfig: (newConfig: DeepPartial<AstroConfig>) => AstroConfig; ... 8 more ...; logger: AstroIntegrationLogger; }' is not assignable to type '{ injectScript: AstroInjector; updateConfig: (config: { vite: { plugins: unknown[]; }; }) => void; }'.
              Types of property 'updateConfig' are incompatible.
                Type '(newConfig: DeepPartial<AstroConfig>) => AstroConfig' is not assignable to type '(config: { vite: { plugins: unknown[]; }; }) => void'.
                  Types of parameters 'newConfig' and 'config' are incompatible.
                    Type '{ vite: { plugins: unknown[]; }; }' is not assignable to type 'DeepPartial<AstroConfig>'.
                      The types of 'vite.plugins' are incompatible between these types.
                        Type 'unknown[]' is not assignable to type 'DeepPartial<PluginOption[] | undefined>'.
                          Type 'unknown' is not assignable to type 'PluginOption'.

110     imgit({}),

Print of the error formatted

imgit/src/plugin/astro.ts

Line 11 in e449e6f

updateConfig: (config: { vite: { plugins: unknown[] } }) => void;

That plugins: unknown[] is inside a function parameter, making the type of updateConfig contravariant over it. But the updateConfig field is itself part of a function parameter, meaning that astro:config:setup and by extension AstroIntegration contravariant over updateConfig. Transitively, AstroIntegration is covariant over the plugins field.

This means that assigning this AstroIntegration type over Astro's actual type would require unknown to be assignable to Vite's PluginOption, but of course unknown is not assignable to anything except itself by definition (since it is a top type).

The field should either:

Be properly typed using Vite's PluginOption
Be typed as a subtype of Vite's PluginOptions, possibly with only the used properties
Be typed with any, which is both a top and bottom type and accepts any assignment in both directions

Remote image being processed as a video

I got this on my markdown:

![xkcd about workflow](https://imgs.xkcd.com/comics/workflow.png)

Imgit tries to invoke ffmpeg and convert it to av1, which throws this error:

21:00:09 [ERROR] [vite] [imgit] Command failed: ffmpeg -y -loglevel error -i "/home/lotus/Workspace/blog/public/imgit/fetched/imgs.xkcd.com-comics-workflow.png" -c:v libaom-av1 -still-picture 1 -crf 23 -cpu-used 5 -an -filter_complex "[0:v]scale=iw*1:-1" "/home/lotus/Workspace/blog/public/imgit/encoded/[email protected]"
Unrecognized option 'still-picture'.
Error splitting the argument list: Option not found

ffmpeg info:

ffmpeg version 6.0 Copyright (c) 2000-2023 the FFmpeg developers
  built with gcc 12.3.0 (GCC)
  configuration: --disable-static --prefix=/nix/store/eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee-ffmpeg-6.0 --target_os=linux --arch=x86_64 --pkg-config=pkg-config --enable-gpl --enable-version3 --disable-nonfree --enable-shared --enable-pic --disable-small --enable-runtime-cpudetect --disable-gray --enable-swscale-alpha --enable-hardcoded-tables --enable-safe-bitstream-reader --enable-pthreads --disable-w32threads --disable-os2threads --enable-network --enable-pixelutils --datadir=/nix/store/5zl2754g2r43yp553634fzbligcvj172-ffmpeg-6.0-data/share/ffmpeg --enable-ffmpeg --disable-ffplay --enable-ffprobe --bindir=/nix/store/eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee-ffmpeg-6.0-bin/bin --enable-avcodec --enable-avdevice --enable-avfilter --enable-avformat --enable-avutil --enable-postproc --enable-swresample --enable-swscale --libdir=/nix/store/eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee-ffmpeg-6.0-lib/lib --incdir=/nix/store/eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee-ffmpeg-6.0-dev/include --enable-doc --enable-htmlpages --enable-manpages --mandir=/nix/store/eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee-ffmpeg-6.0-man/share/man --enable-podpages --enable-txtpages --docdir=/nix/store/eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee-ffmpeg-6.0-doc/share/doc/ffmpeg --enable-alsa --enable-bzlib --disable-libcelt --disable-cuda --disable-cuda-llvm --enable-libdav1d --disable-libfdk-aac --disable-libflite --enable-fontconfig --enable-libfreetype --disable-frei0r --disable-libfribidi --disable-libgme --enable-gnutls --disable-libgsm --disable-ladspa --enable-libmp3lame --disable-libaom --enable-libass --disable-libbluray --disable-libbs2b --disable-libdc1394 --enable-libdrm --enable-iconv --disable-libjack --disable-libmfx --disable-libmodplug --disable-libmysofa --enable-libopus --disable-librsvg --enable-libsrt --enable-libssh --disable-libtensorflow --enable-libtheora --enable-libv4l2 --enable-v4l2-m2m --enable-vaapi --enable-vdpau --enable-libvorbis --disable-libvmaf --enable-libvpx --disable-libwebp --disable-xlib --disable-libxcb --disable-libxcb-shm --disable-libxcb-xfixes --disable-libxcb-shape --disable-libxml2 --enable-lzma --enable-cuvid --enable-nvdec --enable-nvenc --disable-openal --disable-opencl --disable-libopencore-amrnb --disable-opengl --disable-libopenh264 --disable-libopenjpeg --disable-libopenmpt --enable-libpulse --disable-librav1e --enable-libsvtav1 --disable-librtmp --enable-sdl2 --enable-libsoxr --enable-libspeex --disable-libvidstab --disable-libvo-amrwbenc --enable-libx264 --enable-libx265 --disable-libxavs --enable-libxvid --disable-libzmq --enable-libzimg --enable-zlib --disable-vulkan --disable-libglslang --disable-libsmbclient --disable-debug --enable-optimizations --disable-extra-warnings --disable-stripping
  libavutil      58.  2.100 / 58.  2.100
  libavcodec     60.  3.100 / 60.  3.100
  libavformat    60.  3.100 / 60.  3.100
  libavdevice    60.  1.100 / 60.  1.100
  libavfilter     9.  3.100 /  9.  3.100
  libswscale      7.  1.100 /  7.  1.100
  libswresample   4. 10.100 /  4. 10.100
  libpostproc    57.  1.100 / 57.  1.100
Hyper fast Audio and Video encoder

Dynamic imports?

Possible to use dynamic imports with this with Astro? I tried and it got an error. Here's a quick screenshot.

Migrate to bun test

Consider when following is resolved:

	log: {
	tty: () => {}, // TODO: Implement (https://github.com/elringus/imgit/issues/4)