GitHub Actions Hackathon: json to html table

eddiejaoude

Eddie Jaoude

Posted on September 17, 2020

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

💖 💪 🙅 🚩
eddiejaoude
Eddie Jaoude

Posted on September 17, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Label automation at your fingertips
actionshackathon21 Label automation at your fingertips

December 8, 2021

Releasing the funniest GitHub Action & Workflow
actionshackathon21 Releasing the funniest GitHub Action & Workflow

December 9, 2021

The Gatsby Changelog Prototype
actionshackathon21 The Gatsby Changelog Prototype

December 7, 2021