feat(github): add provider for github avatars (#1990)

Author: luc122c

docs/content/3.providers/github.md

@@ -0,0 +1,27 @@
+---
+title: GitHub
+description: Nuxt Image for easy GitHub avatars.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/image/blob/main/src/runtime/providers/github.ts
+    size: xs
+---
+
+Easily use GitHub avatars in your Nuxt app. 
+
+
+Just pass the username as the `src` prop and set the width and height. Since GitHub avatars must always be square, the largest dimension is used as the size.
+
+
+```vue
+<!-- Width and Height -->
+<NuxtImg provider="github" src="nuxt" height="50" width="50" />
+
+<!-- Width only -->
+<NuxtImg provider="github" src="unjs" width="512" />
+
+<!-- Default size -->
+<NuxtImg provider="github" src="npm"/>
+```
+

docs/public/providers/github.svg

@@ -321,6 +321,25 @@ export const providers: Provider[] = [
       },
     ],
   },
+  // GitHub
+  {
+    name: 'github',
+    samples: [
+      {
+        src: 'npm',
+        width: 50,
+        height: 50,
+      },
+      {
+        src: 'nuxt',
+        width: 50,
+        height: 100,
+      },
+      {
+        src: 'unjs',
+      },
+    ],
+  },
   // gumlet
   {
     name: 'gumlet',

playground/app/providers.ts

@@ -71,6 +71,7 @@ export default defineNuxtConfig({
     filerobot: {
       baseURL: 'https://fesrinkeb.filerobot.com/',
     },
+    github: {},
     glide: {
       baseURL: 'https://glide.herokuapp.com/1.0/',
     },

playground/nuxt.config.ts

@@ -24,6 +24,7 @@ export const BuiltInProviders = [
   'directus',
   'fastly',
   'filerobot',
+  'github',
   'glide',
   'gumlet',
   'hygraph',

src/provider.ts

@@ -0,0 +1,31 @@
+import { encodeQueryItem, joinURL } from 'ufo'
+import { createOperationsGenerator } from '../utils/index'
+import { defineProvider } from '../utils/provider'
+
+const operationsGenerator = createOperationsGenerator({
+  joinWith: '&',
+  formatter: (key, value) => encodeQueryItem(key, value),
+})
+
+interface GitHubOptions {
+  baseURL?: string
+}
+
+export default defineProvider<GitHubOptions>({
+  getImage: (src, { modifiers, baseURL = 'https://avatars.githubusercontent.com/' }) => {
+    let size = 460 // Default size
+    // Calculate size based on width/height
+    if (modifiers?.width || modifiers?.height) {
+      size = Math.max(modifiers?.height ?? 0, modifiers?.width ?? 0)
+    }
+
+    const operations = operationsGenerator({
+      v: 4,
+      s: size,
+    })
+
+    return {
+      url: joinURL(baseURL, src + '?' + operations),
+    }
+  },
+})

src/runtime/providers/github.ts

@@ -0,0 +1,12 @@
+{
+  "requests": [
+    "https://avatars.githubusercontent.com/npm?v=4&s=50",
+    "https://avatars.githubusercontent.com/nuxt?v=4&s=100",
+    "https://avatars.githubusercontent.com/unjs?v=4&s=460",
+  ],
+  "sources": [
+    "https://avatars.githubusercontent.com/npm?v=4&s=50",
+    "https://avatars.githubusercontent.com/nuxt?v=4&s=100",
+    "https://avatars.githubusercontent.com/unjs?v=4&s=460",
+  ],
+}

test/e2e/__snapshots__/github.json5

@@ -11,6 +11,7 @@ export const images = [
     fastly: { url: '/test.png' },
     filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b' },
     glide: { url: '/test.png' },
+    github: { url: 'npm' },
     gumlet: { url: '/test.png' },
     imgix: { url: '/test.png' },
     imageengine: { url: '/test.png' },
@@ -47,6 +48,7 @@ export const images = [
     twicpics: { url: '/test.png?twic=v1/cover=200x-' },
     fastly: { url: '/test.png?width=200' },
     filerobot: { url: '/monitoring3/boat-2023-03-06T15%3A03%3A12.6382894Z?vh=b3583b?w=200' },
+    github: { url: 'https://avatars.githubusercontent.com/npm?v=4' },
     glide: { url: '/test.png?w=200' },
     gumlet: { url: '/test.png?w=200' },
     imgix: { url: '/test.png?w=200' },