DEV Community

Lorna Watson
Lorna Watson

Posted on

GitHub README on portfolio project page

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);
    });
});

Enter fullscreen mode Exit fullscreen mode

Thanks for reading! Check out the repo here.

Top comments (0)