Fix https://github.com/tophf/mpiv/discussions/117: github.com rule update

[necaran]

See https://github.com/tophf/mpiv/discussions/117

[tophf]

I see three network requests are made now, so instead of 100-200ms it takes half a second, depending on the connection. I don't think this is acceptable. Is there a way to generate a direct URL from the source element? Or maybe fallback to your approach only when the repository is private (might be detectable somehow via DOM or via window variable).

[tophf]

Example: https://github.com/openstyles/stylus/tree/master/images/eyedropper

[necaran]

How about this?

      dotDomain.endsWith('.github.com') && {
        r: new RegExp([
          /(avatars.+?&s=)\d+/,
          /(raw\.github)(\.com\/.+?\/img\/.+)$/,
          /\/(github\.com\/.+?\/)blob(\/[^/]+\/.+?\.(?:avif|webp|png|jpe?g|bmp|gif|cur|ico))$/,
        ].map(rx => rx.source).join('|')),
        s: m => `https://${
          m[1] ? `${m[1]}460` :
            m[2] ? `${m[2]}usercontent${m[3]}` :
              `${m[4]}raw${m[5]}`
        }`,
      },

The img generated from markdown by Github looks like this.

<img src="/USER/REPO/raw/main/IMG.webp">

So it loads from the cache if the image is already loaded.

[tophf]

It's better (2 requests instead of 3), but since most repos are public I'd like to keep 1. If there's no way to detect the type, you can return an array of two urls, the direct one first.

[necaran]

You mean something like this?

      dotDomain.endsWith('.github.com') && {
        r: new RegExp([
          /(avatars.+?&s=)\d+/,
          /(raw\.github)(\.com\/.+?\/img\/.+)$/,
          /\/(github)(\.com\/.+?\/)blob\/([^/]+\/.+?\.(?:avif|webp|png|jpe?g|bmp|gif|cur|ico))$/,
        ].map(rx => rx.source).join('|')),
        s: m => m[1] ? `https://${m[1]}460` :
          m[2] ? `https://${m[2]}usercontent${m[3]}` :
            [`https://raw.${m[4]}usercontent${m[5]}${m[6]}`, `https://${m[4]}${m[5]}raw/${m[6]}`]
        ,
      },

[tophf]

Yeah, but maybe like this:

          m[2] ? `https://${m[2]}usercontent${m[3]}` : [
            `https://raw.${m[4]}usercontent${m[5]}${m[6]}`,
            `https://${m[4]}${m[5]}raw/${m[6]}`,
          ],

[necaran]

Got a better one, detecting the lock icon next to repo name.

      dotDomain.endsWith('.github.com') && {
        r: new RegExp([
          /(avatars.+?&s=)\d+/,
          /(raw\.github)(\.com\/.+?\/img\/.+)$/,
          /\/(github)(\.com\/.+?\/)blob\/([^/]+\/.+?\.(?:avif|webp|png|jpe?g|bmp|gif|cur|ico|svg))$/,
        ].map(rx => rx.source).join('|')),
        s: m => m[1] ? `https://${m[1]}460` :
          m[2] ? `https://${m[2]}usercontent${m[3]}` :
            document.querySelector(".AppHeader-context-item>.octicon-lock") ?
              `https://${m[4]}${m[5]}raw/${m[6]}` :
              `https://raw.${m[4]}usercontent${m[5]}${m[6]}`
      },

[tophf]

Great! Then you can restore the original shape to avoid changing the existing lines:

        s: m => `https://${
          m[1] ? `${m[1]}460` :
            m[2] ? `${m[2]}usercontent${m[3]}` :
              $('.AppHeader-context-item > .octicon-lock')
                ? `${m[4]}${m[5]}raw/${m[6]}`
                : `raw.${m[4]}usercontent${m[5]}${m[6]}`
        }`,