loading...

GitHub README on portfolio project page

lornasw93 profile image Lorna Watson ใƒป2 min read

Please note: my approach with the code feels dirty and needs improving. Nevertheless I felt was worth sharing. ๐ŸŽ‰

enter

I wanted to improve my portfolio website - specifically the projects and blog page where originally both links just redirected the user elsewhere. I created a card layout page (for projects) and for each project displayed basic details such as name, URL and created date etc. Initially I was planning on displaying the readme file when a user clicked on a card. Since, my objectives changed and I decided to leave it. Nevertheless, it was interesting to work on so thought I'd share. ๐Ÿ˜Ž

I briefly talked in this post about why I chose not to use the GitHub API - essentially I wanted something quickly.

From this... (Readme)
Alt Text

To this...
Alt Text

To keep this post short and sweet, I'm gonna jump right into the code. Basically fetching the html of article. ๐Ÿ‘€

var express = require("express"),
  app = express(),
  bodyParser = require("body-parser"),
  axios = require("axios"),
  cheerio = require("cheerio");

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get("/repo/:name/readme", (request, res) => {
  var repo = request.params.name;

  axios({
    method: "get",
    url: `https://github.com/lornasw93/${repo}/blob/master/README.md`,
  })
    .then((response) => {
      const htmlString = response.data;
      const $ = cheerio.load(htmlString);
      const pText = $("article").html();
      res.send(pText);
    })
    .catch((err) => {
      res.send(err);
    });
});

Thanks for reading! Check out the repo here.

Posted on by:

lornasw93 profile

Lorna Watson

@lornasw93

Full-stack developer based in Leeds

Discussion

markdown guide