GitHub Actions Hackathon: json to html table
Eddie Jaoude

Eddie Jaoude @eddiejaoude

About: My blogs are on Substack http://eddiejaoude.substack.com

Location:
London | Portugal | Thailand
Joined:
Apr 28, 2018

GitHub Actions Hackathon: json to html table

Publish Date: Sep 17 '20
26 6

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

Comments 6 total

Add comment