DEV Community

Cover image for GitHub Actions Hackathon: json to html table
Eddie Jaoude
Eddie Jaoude

Posted on

GitHub Actions Hackathon: json to html table

My Workflow

This GitHub Action creates a html table in your README.md from a json file.

gh-actions-html-table-generator is being used on awesome-github-profiles where from a json file, it generates a customisable and configurable html table.

example html table

Submission Category:

This is a Maintainer Must-Haves utility. Not having to worry about changing the number of columns or cell layout. With a simple GitHub Action configuration, the Action will regenerate the html table for any json data structure

Yaml File or Link to Code

GitHub Action...

GitHub logo EddieHubCommunity / gh-actions-html-table-generator

Read from a json file and write to the README

Table generator

This GitHub Action creates a html table in your README.md from a json file.

Screenshot

Inputs

github-token [REQUIRED]

This is available in your GitHub Action

with:
    github-token: ${{ secrets.GITHUB_TOKEN }}
Enter fullscreen mode Exit fullscreen mode

html-cell [REQUIRED]

This is the html table cell content with object-field-names

with:
    html-cell: '<td>{{ firstname }} {{ lastname }}</td>'
Enter fullscreen mode Exit fullscreen mode

object-field-names [REQUIRED]

This is json, and contains a list of the names of the fields in your json file data object

with:
    object-field-names: '[ "firstname", "lastname" ]'
Enter fullscreen mode Exit fullscreen mode

columns [OPTIONAL]

defaults to 2

with:
    columns: 3
Enter fullscreen mode Exit fullscreen mode

json-file-path [OPTIONAL]

defaults to data.json

with:
    json-file-path: 'your-filename.json'
Enter fullscreen mode Exit fullscreen mode

file-to-use [OPTIONAL]

Defaults to README.md

with:
    file-to-use: 'README.md'
Enter fullscreen mode Exit fullscreen mode

section-name [OPTIONAL]

This allows you to change the data-section name in the comments to something else. This also allows multiple runs on the same file, for different sections.

defaults

Additional Resources / Info

Used on this repo...

GitHub logo EddieHubCommunity / awesome-github-profiles

List of GitHub profiles that have awesome customisation, that you can use for inspiration

Note: This repository is not included in the Hacktoberfest event, as it is for practice only!

Awesome GitHub profiles

Read/Write profiles' data

List of GitHub profiles that have awesome customization, that you can use for inspiration.
Feel free to submit a pull request with your suggestions for awesome GitHub profiles.

built with love badge made with markdown badge open source badge
check it out badge built by developers badge

How can I add my GitHub profile? 🤷‍♀️🤷‍♂️

  1. Create an issue, with the title as your name, and in the description put a screenshot of the customised GitHub profile page (copy the generated image URL, this will be needed in the next step). The URL will look something like this https://github.com/EddieHubCommunity/awesome-github-profiles/assets/51878265/ee31b832-d549-4df9-8ffe-24419f9d0e46

  2. Fork the project, using the top right corner button, that states fork

  3. Create a file named your-username.json in the directory profiles with the following content.

Your entry should be similar to this example:

{
  "image": "https://user-images.githubusercontent.com/624760/91057573-48531300-e61f-11ea-9e13-2d7384e42000.png"
  "issueId": 66,
  "name": "Eddie Jaoude",
  
Enter fullscreen mode Exit fullscreen mode

GitHub Actions video, from what is GitHub Actions all the way to customising your own with Javascript

Top comments (6)

Collapse
 
anuraghazra profile image
Anurag Hazra

Awesome eddie!

Collapse
 
eddiejaoude profile image
Eddie Jaoude

thank you!

Collapse
 
mishmanners profile image
Michelle Duke

Yay great to see you publish here as well! Nice work on the video too.

Collapse
 
eddiejaoude profile image
Eddie Jaoude

thank you!

Collapse
 
ben profile image
Ben Halpern

Neat

Collapse
 
eddiejaoude profile image
Eddie Jaoude

Thank you! :)