빠른 GitHub 프로필 방문 카운터

업데이트:

자신의 서버를 운영하고 싶지 않은 사람들은 반드시 .

GitHub 프로필은 플랫폼에 큰 도움이 됩니다. 이 프로필을 사용하면 귀하의 경험/관심사를 강조하고 사람들이 귀하의 프로필을 방문할 때 보는 것에 약간의 개성을 부여할 수 있습니다. 프로필 생성에 대한 가이드가 꽤 많이 있지만 아직 시작하지 않은 사용자를 위해 GitHub 사용자 이름과 일치하는 새 리포지토리를 생성하여 프로필을 추가할 수 있습니다. 사람들이 github.com/{your_user_name}을 방문하면 README.md 파일에 대한 편집 내용이 표시됩니다.

웹사이트 카운터

내 프로필을 1990년대 웹사이트처럼 보이게 만들 수 있는지 확인하고 싶었습니다. 90년대 개인 웹사이트의 큰 부분은 방문자 카운터입니다. 우리는 node와 express를 사용하여 매우 빠르게 재미있는(정확할 필요는 없는) 카운터를 만들 수 있습니다. 결국 Glitch를 사용하게 되었지만 이 개념은 노드를 지원하는 모든 플랫폼에서 작동해야 합니다.



Take a look at my GitHub profile to see this in action .

노드 / 익스프레스 프로젝트

이 프로젝트의 전체 코드는 아래(또는 this GitHub gist 또는 실행 중인 위치on Glitch)에 게시됩니다. 더 많은 프로덕션 애플리케이션을 위한 것이라면 피하거나 정리하고 싶은 관행이 많이 있습니다. 여기서 핵심은 재미로 빨리 달성할 수 있는 것입니다.

방문 추적

높은 수준에서 이 애플리케이션에는 방문 수를 기록하는 변수, count.svg에 응답하고 방문 수를 업데이트하는 엔드포인트가 있습니다. 또한 count.svg 끝점은 개수를 기반으로 이미지를 생성하고 응답해야 합니다.

const express = require('express')
const app = express()

const PLACES = 7;

// no db - so global var to keep track of count
let counter = 0

function getCountImage(count) {
   ...
}

// get the image
app.get('/count.svg', (req, res) => {
  counter++;

  // This helps with GitHub's image cache 
  //   see more: https://rushter.com/counter.svg
  res.set({
  'content-type': 'image/svg+xml',
  'cache-control': 'max-age=0, no-cache, no-store, must-revalidate'
  })

  // Send the generated SVG as the result
  res.send(getCountImage(counter));
})

const listener = app.listen(process.env.PORT, () => {
  console.log('Your app is listening on port ' + listener.address().port)
})

방문 횟수 추적

방문을 추적하기 위해 글로벌 카운터 변수를 사용하고 있습니다. count.svg에 요청이 들어오면 전역 카운터 변수를 업데이트하고 이미지를 생성합니다.

// set up the counter variable
let counter = 0;

...
app.get('/count.svg', (req, res) => {
  // update the counter on any image request
  counter++;
  ...
}

이미지 생성

Sketch에서 이미지를 생성하고 결과를 SVG로 복사하여 getCountImage 메소드에 붙여넣었습니다. 이미지를 약간 해부하고 카운트 값을 사용하여 재구성했습니다.

이 함수에서 카운트를 패딩된 문자열로 전환한 다음 배열로 전환하고 있음을 알 수 있습니다. 이를 통해 지정된 PLACES 수로 카운트 앞에 0을 표시할 수 있습니다. const countArray = count.toString().padStart(PLACES, '0').split(''); 거기에서 배열을 단일 문자열로 줄인 다음 svg에서 참조하여 이미지의 제곱 수 부분을 구성합니다.

Reduce는 때때로 따라하기 약간 까다로울 수 있으며 종종 보다 표준적인 루프 구조로 대체될 수 있습니다. 이 경우 모든 배열 요소를 반복하고 이 새 svg 섹션을 이전 항목과 함께 추가합니다.

function getCountImage(count) {
  // This is not the greatest way for generating an SVG but it'll do for now
  const countArray = count.toString().padStart(PLACES, '0').split('');

  const parts = countArray.reduce((acc, next, index) => `
        ${acc}
        <rect id="Rectangle" fill="#000000" x="${index * 32}" y="0.5" width="29" height="29"></rect>
        <text id="0" font-family="Courier" font-size="24" font-weight="normal" fill="#00FF13">
            <tspan x="${index * 32 + 7}" y="22">${next}</tspan>
        </text>
`, '');

  return `<?xml version="1.0" encoding="UTF-8"?>
<svg width="${PLACES * 32}px" height="30px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Count</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
      ${parts}
    </g>
</svg>
}

마무리

이상적으로는 서버가 다시 시작되면 카운트 값이 중단된 위치에서 다시 선택되도록 카운트를 유지하려고 합니다.
이것은 데이터베이스 레코드와 같거나 단순히 파일에 쓰는 것일 수 있습니다. 이 예에서는 대부분 90년대 디자인 미학을 달성하기 위한 것이므로 카운트를 잃어도 크게 신경쓰지 않습니다 :D

전체 코드는 this GitHub gist 또는 실행 중인 위치on Glitch에서 사용할 수 있습니다.

추가 참조:

여기에서 사용할 수 있는 참조an analytics example by Flavio Copes를 시작했습니다. 이 예에서 Flavio는 Google Analytics의 간단한 대안으로 웹사이트 방문 횟수를 수집하는 svg를 만들었습니다.

이article on the same topic by Artem Golubin는 GitHub의 이미지 캐싱과 함께 작동하도록 HTTP 헤더를 조정하는 방법을 결정하는 데 정말 도움이 되었습니다. GitHub has an excellent feature that anonymizes browser details from images to help prevent tracking called Camo . HTTP 헤더를 조정하지 않으면 새 방문 시 이미지가 업데이트되지 않습니다.