GitHub had released a new feature: profile READMEs for quite some time now. Though, writing the file entirely in Github Markdown has it’s limitations, it didn’t stop me from playing around and exploring various possibilities. Sprinkle some Algolia DocSearch magic on Node.js, mix it with Github Actions and voilà, we have a self-updating profile README.
Algolia DocSearch
DocSearch is an awesome open source utility scrapper to create a search index for your website. All you need to do is create an account on Algolia and drop in a config.yaml which tells DocSearch which sections of your website to scrape and index. You can read more about it here.
Fetching Recent Posts
All the code for generating the README file exists in the index.js. This file contains a getRecentPosts() function which uses algoliasearch to get the posts scraped by DocSearch and returns an array of objects;
[{
url: //post url,
title: //post title,
}]You can replace the logic in this function with that of your own using an RSS parser, database query or whatever method you prefer.
Generating the README using EJS
EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. If you’re someone coming from Django, it is very similar to Django’s default templating engine.
Generating a markdown file is very simple with ejs. All you need to do is define a template and populate it with data. In our case, this data is sourced from the config.toml file.
This is what my toml file looks like:
[meta]
firstName = "Vidhi"
lastName = "Mody"
role = "Software Developer"
about = """My career is developing software, but my life is adventuring. I am a curious person who enjoys figuring out the building blocks of the world, and rearranging them to build something even better. ¯\ (ツ) /¯ """
[meta.location]
city = "Mumbai"
country = "India"
logo = "https://www.flaticon.com/svg/static/icons/svg/330/330176.svg"
[[social]]
name = "github"
url = "https://github.com/vidhi-mody"
logo = "https://img.shields.io/github/followers/vidhi-mody?label=GitHub&style=social"
[[social]]
name = "linkedin"
url = "https://linkedin.com/in/vidhi-m"
logo = "https://img.shields.io/badge/Linkedin-grey?logo=linkedin&style=social"
[[projects]]
name = "Friend.ly"
url = "https://github.com/und3fined-v01d/Friend.ly"
stars = "https://img.shields.io/github/stars/und3fined-v01d/Friend.ly?style=plastic&labelColor=343b41"
forks = "https://img.shields.io/github/forks/und3fined-v01d/Friend.ly?style=plastic&labelColor=343b41"
[[projects]]
name = "Apply By AI"
url = "https://github.com/vidhi-mody/Apply-By-AI"
stars = "https://img.shields.io/github/stars/vidhi-mody/Apply-By-AI?style=plastic&labelColor=343b41"
forks = "https://img.shields.io/github/forks/vidhi-mody/Apply-By-AI?style=plastic&labelColor=343b41"
[technologies]
python = "https://img.shields.io/badge/Python-black?logo=python&style=plastic"
go = "https://img.shields.io/badge/Go-black?logo=go&style=plastic"
java = "https://img.shields.io/badge/Java-black?logo=java&style=plastic"
javascript = "https://img.shields.io/badge/Javascript-black?logo=javascript&style=plastic"
typescript = "https://img.shields.io/badge/Typescript-black?logo=typescript&style=plastic"
npm = "https://img.shields.io/badge/npm-black?logo=npm&style=plastic"There is a handy npm package for parsing toml files.
Defining the Github Actions
Take a look at the GitHub Action in my main.yml file. It’s configured to run everyday at 00:00 UTC.
Conclusion
Visit github.com/vidhi-mody to have a look at the end result. It is really easy to build this auto updating profile page. Do share with me the other ideas y’all come up with! 😇