Image embed option

[VarunSAthreya]

Can we get an Image embed option also? As then we would be able to add it to markdown files.

[Paullux]

You can do it, works for people and organization README.md, for this:

in your README repository

create file index.js :

const puppeteer = require('puppeteer');

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://ionicabizau.github.io/github-profile-languages/api.html?yourname');
  await sleep(10000);
  await page.screenshot({ path: 'language-graph.png' });

  await browser.close();
})();

where yourname is your username or your organization name.

create file package.json:

{
  "name": "language",
  "version": "1.0.0",
  "description": "Moi",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/YourName/.github.git"
  },
  "keywords": [
    "Moi"
  ],
  "author": "YourUserName",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/YourName/.github/issues"
  },
  "homepage": "https://www.example.com",
  "dependencies": {
    "node-fetch": "^2.6.1",
    "puppeteer": "^5.1.0"
  }
}

You need to replace all values by yours.

create file .gitignore:

node_modules/*

create folders .github/workflows/

in these folders create this file main.yaml:

name: LANGUAGE Image

on:
  push:
    branches:
      - main
  schedule:
    - cron: '0 */6 * * *'

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout current repository to Master branch
        uses: actions/checkout@v1
      - name: Setup NodeJs 13.x
        uses: actions/setup-node@v1
        with:
          node-version: '13.x'
      - name: Cache dependencies and build outputs to improve workflow execution time.
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.os }}-js-${{ hashFiles('package-lock.json') }}
      - name: Install dependencies
        run: npm install
      - name: Generate LANGUAGE Image file
        run: node index.js
      - name: Commit and Push new LANGUAGE Image to the repository
        uses: mikeal/publish-to-github-action@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH_NAME: 'main'

where GITHUB_TOKEN is secrets create in your profile (for organization you need to be owner of organization for that works). where BRANCH_NAME is your branch of your Repository for your README.

before push execute these two commands (to avoid an error):

git config --global http.version HTTP/1.1

git config http.postBuffer 524288000

Now after push, go in Action Category of your Repository you can follow the building. Normally after build (~30s) you have a language-graph.png in your repo (which will be recreate every 6 hours), that you can link in your README.md. (Like in my repo https://github.com/Heficience/.github)

[VarunSAthreya]

@Paullux Thank you for such a detailed answer.

But I wanted a direct image option built into the website. As using the GitHub action one would create unnecessary commits every set duration.