50 loc에 있는 나만의 github 쉴드 서버!

예, 50줄의 코드와 github README를 위한 사용자 지정 방패/배지 생성기가 있습니다!

그리고 서버란 "서버리스"를 의미합니다 - using vercel .

전제 조건:

아직 계정이 없다면 vercel에서 무료 계정을 만드십시오. 그런 다음 Vercel CLI를 설치하고 로그인합니다.

npm install -g vercel
vercel login

새 npm 프로젝트를 만듭니다.

mkdir mybadgeserver
cd mybadgeserver
npm init

API 엔드포인트를 생성합니다.

대괄호가 필요합니다!

mkdir -p api/[label]/[value]
cd api/[label]/[value] 
touch index.js

다음 코드를 index.js에 붙여넣습니다.

module.exports = (req, res) => {
    const { label, value, ...options } = req.query
    const svg = makeShield(label, value, options) 
    res.setHeader('content-type', 'image/svg+xml')
    res.send(svg)
}

const defaultOptions = {
    labelColor: 'orange',
    valueColor: '#777',
    fontSize: '.8rem',
}

function makeShield(label, value, options = {}) {
    label = label ?? 'label'
    value = value ?? 'value'
    options = {...defaultOptions, ...options }
    console.log({options})
    return `<svg fill="none" viewBox="0 0 300 50" width="300" height="50" xmlns="http://www.w3.org/2000/svg">
        <style>
            shield {
                position: relative;
                margin: 5px;
                display:flex;
                color: white;
                font-size: ${options.fontSize};
                font-family: 'DejaVu Sans Mono', Verdana, DejaVu Sans, sans-serif;
            }
            label {
                background-color: ${options.labelColor};
                padding: 5px 10px;
                font-weight: 900;
                border-radius: 5px 0 0 5px;
            }
            value {
                position: relative;
                background-color: ${options.valueColor};
                padding: 5px 10px;
                border-radius: 0 5px 5px 0;
                left: 2px;
            }
        </style>
        <foreignObject width="100%" height="100%">
            <shield xmlns="http://www.w3.org/1999/xhtml">
                <label>${label}</label>
                <value>${value}</value>
            </shield>
        </foreignObject>
    </svg>`
}

그리고 그게 다야! 로컬 개발 서버를 시작합니다.

vercel dev

브라우저에서 엔드포인트 테스트localhost:3000/api/label/value

URL의 label 및 value를 원하는 대로 변경하세요!

URL에 ?labelColor=red&valueColor=green를 추가하여 색상을 변경합니다.

vercel에 배포하려면 다음을 입력하십시오.

vercel

이렇게 하면 실행할 때마다 다른 미리보기 URL이 제공됩니다.

프로덕션에 배포하고 멋진 "정적"URL 유형을 얻으려면 다음을 수행하십시오.

vercel --prod

보너스 포인트:

다음 내용으로 프로젝트 루트(api 폴더가 아님)에 api를 생성하여 URL에 vercel.json가 필요하지 않게 할 수 있습니다.

{
    "rewrites": [
        {
            "source": "/:label/:value",
            "destination": "/api/:label/:value"
        }
    ]
}

면책 조항: 이것은 프로덕션 준비 솔루션이 아닌 가이드입니다. 조정이 필요합니다. 생성된 SVG는 너무 많은 공백으로 둘러싸여 있으며 텍스트가 너무 길면 잘릴 수 있습니다.