Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 4, 2020 09:38 pm GMT

Self-updating GitHub Profile README with JavaScript

GitHub recently released a feature that allows users to add markdown to their profile. People have done some pretty cool things, which inspired me to create a README that dynamically updates with my Dev.to posts. Here's the link to my GitHub repo, which has a live example!

GitHub Actions and NodeJS make this easy. I created a script to:

  1. Get my Dev.to articles
  2. Parse my README
  3. Update the README with my latest articles

GitHub Actions make it possible to schedule automatic runs of a program at timed intervals, known as a cron job.

I currently have my GitHub Action Workflow configured to run the script three times a week. I thought this would push me to publish articles three times a week, but that hasn't happened yet...

You'll need 3 files: .github/workflows/build.yaml, updateReadme.js, and README.md. Without further ado, here's the code:

.github/workflows/build.yaml

# Name of workflowname: Build README# Run workflow at 12:01 on Sunday, Wednesday, and Fridayon:  schedule:    - cron: '1 12 * * 0,3,5'  # Run workflow on pushes to main branch  push:    branches:      - main# Steps to carry outjobs:  build:    # Create a ubuntu virtual machine    runs-on: ubuntu-latest    # Checkout repo code    steps:    - name: Checkout repo      uses: actions/checkout@v2    # Install node    - name: Use Node.js      uses: actions/setup-node@v1      with:        node-version: 10.16    - run: npm install    - run: npm run build --if-present    - run: npm test      env:        CI: true    # Run script "updateReadme.js"     - name: Update README      run: |-        node updateReadme.js        cat README.md    # Commit changes    - name: Commit and push if changed      run: |-        git diff        git config --global user.email "[email protected]"        git config --global user.name "README-bot"        git add -A        git commit -m "Updated articles" || exit 0        git push

updateReadme.js

// Include node fs (file stream) and https modulesconst fs = require('fs');const https = require('https');// API endpointconst url = 'https://dev.to/api/articles?username=<YOUR DEV USERNAME>';function readWriteAsync() {  // Get articles using HTTPS  https.get(url, (res) => {    res.setEncoding('utf8');    // Set variable body to response data from API    let body = '';    res.on('data', (data) => body += data);    res.on('end', () => {      // Parse the JSON response      body = JSON.parse(body);      // Shorten array to latest 3 articles      body = body.slice(0, 3);      // Create string of markdown to be inserted      const articles = `\n - [${body[0].title}](${body[0].url})\n - [${body[1].title}](${body[1].url})\n - [${body[2].title}](${body[2].url})\n \n`;      // Update README using FS      fs.readFile('README.md', 'utf-8', (err, data) => {        if (err) {          throw err;        }        // Replace text using regex: "I'm writing: ...replace... ![Build"        // Regex101.com is a lifesaver!        const updatedMd = data.replace(          /(?<=I'm writing:\n)[\s\S]*(?=\!\[Build)/gim,          articles        );        // Write the new README        fs.writeFile('README.md', updatedMd, 'utf-8', (err) => {          if (err) {             throw err;          }          console.log('README update complete.');        });      });    });  });}// Call the functionreadWriteAsync();

README.md

# Self-updating READMEThis text won't be change.The text below will be, though!What I'm writing:- This will be replaced- This too!- This three!![Build README](https://github.com/<YOUR GITHUB USERNAME>/<YOUR GITHUB USERNAME>/workflows/Build%20README/badge.svg)This won't be impacted either. The text above is a GitHub build badge.

I tried to explain what the code is doing with comments, which makes the code look longer/more daunting than it is. GitHub Action's documentation and this README cheatsheet are excellent if you're just getting started with either. Here's another link to my GitHub repo, to see it live!

What are your README tips for this new feature?


Original Link: https://dev.to/curtiscodes/self-updating-github-profile-readme-with-javascript-lhm

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To