适配手机访问

apps/api.js

@@ -10,6 +10,8 @@ import { render } from '../lib/svg.js'
 export default class Github extends Controller {
   __main__() {
     //
+    let ua = this.request.header('user-agent').toLowerCase()
+    this.IS_MOBILE = ua.includes('iphone') || ua.includes('android')
   }
 
   async toplangsAction() {
@@ -72,6 +74,6 @@ query {
     langs.sort((a, b) => b.size - a.size)
 
     this.response.set('Content-Type', 'image/svg+xml')
-    this.response.end(render({ langs: langs.slice(0, count) }))
+    this.response.end(render({ langs: langs.slice(0, count) }, this.IS_MOBILE))
   }
 }

lib/svg.js

@@ -13,9 +13,9 @@ function html(strs, ...vals) {
 }
 
 function text({ color, name, pc, idx }) {
-  let y = 32 + ~~(idx / 2 + 1) * 36
+  let y = 32 + ~~(idx / 2 + 1) * 32
-  let x1 = idx % 2 === 0 ? 27 : 227
+  let x1 = idx % 2 === 0 ? 12 : 212
-  let x2 = idx % 2 === 0 ? 44 : 244
+  let x2 = idx % 2 === 0 ? 24 : 224
   return html`
     <g class="lang">
       <circle cx="${x1}" cy="${y}" r="5" fill="${color}" />
@@ -24,13 +24,21 @@ function text({ color, name, pc, idx }) {
   `
 }
 
-function pie(langs = [], sum = 0, height) {
+function pie(langs = [], sum = 0, height, mobile) {
-  // 圆心坐标
-  let cx = 540
-  let radius = ~~((height - 64) / 2) // 最小半径
-  let cy = radius + 48
   let per = 0.25
   let deg = per * 2 * Math.PI // 从90度开始计算
+  // 圆心坐标,半径
+  let cx, cy, radius
+
+  if (mobile) {
+    radius = 72
+    cx = 192 - 16
+    cy = ~~(langs.length / 2 + 1) * 32 + 32 + radius
+  } else {
+    radius = ~~((height - 64) / 2) - (langs.length > 10 ? 24 : 0) // 最小半径
+    cx = langs.length > 12 ? 520 : langs.length <= 6 ? 384 : 464
+    cy = radius + (langs.length > 10 ? 64 : 48)
+  }
 
   return langs
     .map((it, idx) => {
@@ -60,18 +68,33 @@ function pie(langs = [], sum = 0, height) {
     .join('')
 }
 
-export function render({ title = 'Most Used Languages', langs = [] } = {}) {
+export function render(
+  { title = 'Most Used Languages', langs = [] } = {},
+  mobile = false
+) {
   let sum = langs.reduce((n, it) => n + it.size, 0)
-  let height = ~~(langs.length / 2 + 1) * 36 + 32
+  let height = ~~(langs.length / 2 + 1) * 32 + 32
+  let width = 736
   if (height < 140) {
     height = 140
   }
 
+  if (langs.length < 5) {
+    width -= 304
+  } else if (langs.length > 4 && langs.length < 7) {
+    width -= 240
+  } else if (langs.length > 6 && langs.length <= 12) {
+    width -= 144
+  }
+
+  if (mobile) {
+    width = 384
+    height = ~~(langs.length / 2 + 1) * 32 + 36 + 72 * 2
+  }
+
   return html`
     <svg
-      width="800"
+      viewBox="0 0 ${width} ${height}"
-      height="${height}"
-      viewBox="0 0 800 ${height}"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
@@ -104,7 +127,7 @@ export function render({ title = 'Most Used Languages', langs = [] } = {}) {
           }
         }
       </style>
-      <g transform="translate(24, 32)">
+      <g transform="translate(6, 32)">
         <text class="header">${title}</text>
       </g>
       <g class="lang-list">
@@ -120,7 +143,7 @@ export function render({ title = 'Most Used Languages', langs = [] } = {}) {
           .join('')}
       </g>
 
-      <g class="lang-pie">${pie(langs, sum, height)}</g>
+      <g class="lang-pie">${pie(langs, sum, height, mobile)}</g>
     </svg>
   `
 }