A NodeJS implementation of profile visit API hosted on Glitch.

github-profile-visit-count.txt

0

package.json

{
  "name": "github-profile-visits",
  "version": "0.1.0",
  "description": "A simple Node app built on Express that can count profile visits on github.",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.16.4"
  },
  "engines": {
    "node": "8.x"
  },
  "repository": {
    "url": "https://glitch.com/edit/#!/hello-express"
  },
  "license": "MIT",
  "keywords": [
    "node",
    "glitch",
    "express"
  ]
}

server.js

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


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

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>
`
}

// get the image
app.get('/count.svg', (req, res) => {
  const file_name = 'github-profile-visit-count.txt';
  try {
    var count = fs.readFileSync(file_name);
    count++;
    fs.writeFileSync(file_name, (Number(count)).toString());
    console.log("File has been saved.");
    // 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(`
              <svg xmlns="http://www.w3.org/2000/svg" width="160" height="20">

                <rect width="170" height="40" fill="#555"/>
                <rect x="75" width="160" height="70" fill="#4c1"/>

                <rect rx="7" width="10" height="20" fill="transparent"/>
                  <g fill="#fff" text-anchor="middle"
                    font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
                      <text x="38" y="14">Profile Visits</text>
                      <text x="114" y="14">${count}</text>
                  </g>
              </svg>
    `);
  } catch (error) {
      console.error(error);
    res.send({'error': 'Not able to read file!'})
  }
  
  
})

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