loading...
Cover image for GitHub Actions Hackathon: json to html table

GitHub Actions Hackathon: json to html table

eddiejaoude profile image Eddie Jaoude ・1 min read

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 EddieJaoudeCommunity / 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 }}

html-cell [REQUIRED]

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

with
    html-cell: '<td>{{ firstname }} {{ lastname }}</td>'

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" ]'

columns [OPTIONAL]

defaults to 2

with:
    columns: 3

json-file-path [OPTIONAL]

defaults to data.json

with:
    json-file-path: 'your-filename.json'

Example usage

Add <!--START_SECTION:data-section--> and <!--END_SECTION:data-section--> where you would like your table to appear in your README.

jobs
  table:
    runs-on: ubuntu-latest
    name: Update README from json data
    steps:
    - uses: actions/checkout@v2
    - name: Read/Write

Additional Resources / Info

Used on this repo...

GitHub logo EddieJaoudeCommunity / awesome-github-profiles

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

Awesome Github Profiles

.github/workflows/main.yml

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

Feel free to submit a pull request with your suggestions of awesome github profiles.

To add your 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)
  2. in data.json add your own object to the end of the file, your entry should be similar to this example:
{
    "name": "Eddie Jaoude",
    "githubUsername": "eddiejaoude",
    "imageUrl": "https://user-images.githubusercontent.com/624760/91057573-48531300-e61f-11ea-9e13-2d7384e42000.png",
    "issueNumber": 66
}

Any questions let us know

Join the conversation on our Discord community

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

Posted on by:

eddiejaoude profile

Eddie Jaoude

@eddiejaoude

I believe Open Source is for EVERYONE, yes you! Open Source expert, developer relations, YouTuber 🎥. GitHub Stars Program :)

Discussion

pic
Editor guide
 
 

thank you!

 

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

 

thank you!