クイックgithubプロフィール訪問カウンタ

更新:

自分のサーバーを実行したくない場合は、必ずしてください。

Githubプロファイルは、プラットフォームに大きな追加です.これらのプロファイルでは、あなたの経験/興味を強調し、人々があなたのプロフィールを訪問するときに人々が参照してくださいに人格の少しを供給することができます.プロファイルを作成する上でかなり多くのガイドがありますが、まだそれにジャンプしていない可能性があります人のために、あなたのgithubユーザー名に一致する新しいリポジトリを作成することによって、プロファイルを追加することができます.任意の編集にREADME.MDファイルが表示されますときに人々vist github.com/{ YourCacheユーザー名}

ウェブサイトカウンター

私は、1990年代から私のプロフィールをウェブサイトのように少し見ることができるかどうか見たかったです.90年代個人ウェブサイトの大部分は訪問客カウンターです.我々は楽しい(と必ずしも正確に)カウンタを迅速にノードとエクスプレスを使用してカウンタを作成することができます.私はGlitchを使っていましたが、このコンセプトはノードをサポートするプラットフォームで動作するはずです.

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

ノードプロジェクト

このプロジェクトのコード全体はthis GitHub gist , または、それが走っているところon Glitch ). 多くのプラクティスは、私たちがどちらかを避けるために、またはクリーンアップをしたい場合は、生産アプリケーションの詳細です.ここでキーは楽しみのために迅速に達成できる何かです.

追跡訪問

高いレベルから、このアプリケーションは、カウントを記録するカウントを記録する変数を持っています.SVGと更新の訪問回数.また、カウント.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)
})

追跡訪問数

我々は、グローバルカウンタの変数を使用して訪問を追跡する.リクエストがカウントされた場合.SVGはグローバルカウンタ変数を更新し、画像を生成する.

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

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

画像の生成

スケッチでイメージを作成し、結果をSVGとしてコピーしてgetCountImage メソッド.画像を少し解剖し、カウント値を使用して再構築.
この関数で注意してください.私たちは、カウントをパディングされた文字列に切り替えてから配列にします.これにより、指定された数のカウントの前にゼロを表示できます.const countArray = count.toString().padStart(PLACES, '0').split(''); そこから、単一のストリングに配列を減らして、それからSVGでそれを参照することによって、イメージのカウント正方形部分を構築します.
減少は、時々、少しトリッキーになることができて、しばしばより標準的なループ構成によって取り替えられることができました.この例では、すべての配列要素を反復処理して、この新しい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 ここで利用できる.この例では、Flvioは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ヘッダーを調整せずに、画像は新しい訪問時に更新されません.