Frontend HTML+CSS generation (from simple structured data).

[dmitshur]

I will have a list of Go packages with updates available. Basically, the following information (originally in Go structs, e.g. here, but converting it into JSON, if necessary, is trivial):

{
    "packages": [
        {
            "importPath": "github.com/BurntSushi/toml",
            "image": "https://1.gravatar.com/avatar/c07104de771c3b6f6c30be8f592ef8f7?d=https%3A%2F%2Fidenticons.github.com%2Fa4f98968984cf211c9cdfdb95e1e4fbd.png",
            "commitMessages": [
                "We want %s since errorf escapes some characters (like new lines), which turns them into strings.",
                "fix go vet warnings",
                "gofmt"
            ]       
        },
        {
            "importPath": "github.com/Jragonmiris/mathgl",
            "image": "https://identicons.github.com/42de14ab90e8c526c5d389a47bede4f5.png",
            "commitMessages": [
                "Added the most important function",
                "Added the most important function",
                "Added the most important function",
                "Added bezier spline interpolation",
                "Minor documentation fix",
                "Added explicit support for quadratic and cubic bezier curves, should be faster than general method",
                "Fixed a few build errors after refactoring",
                "Added basic support for some 2D shapes, bezier curves, and bezier surfaces",
                "Added Euler angle to quat conversion"
            ]
        }
    ]
}

I'm looking for ways to convert that (either on the backend using Go, or frontend) to HTML+CSS that will be rendered by the browser to look something like this (very rough mockup):

The "Update" buttons should create a POST request to /-/update with import_path = {{.importPath}}. The "Update All" button would have import_path = {{.importPath}}.

Ideally, I'm looking for the simplest and shortest solution, but also one that is easy to modify.

Help wanted and appreciated. /cc @DAddYE :D

[dmitshur]

As of 4f6721cfc363ec2865c07392e99448c6882ee222, the current GoPackage -> HTML generation happens in:

func GenerateGithubHtml(w io.Writer, goPackage *GoPackage, cc *github.CommitsComparison) {

A sample input produces the following HTML,

<h3>github.com/BurntSushi/toml</h3>
<form name="x-update" method="POST" action="/-/update"><input type="hidden" name="import_path" value="github.com/BurntSushi/toml"></form>
<a href="javascript:document.getElementsByName('x-update')[0].submit();" title="go get -u -d github.com/BurntSushi/toml">Update</a>
<ol>
    <li>We want %s since errorf escapes some characters (like new lines), which turns them into strings.</li>
    <li>fix go vet warnings</li>
    <li>gofmt</li>
</ol>

Which looks like this:

[dmitshur]

Just seeing what it's like to make adjustments to the layout by modifying Go -> HTML generation code.

Now it looks like this:

It's very unfriendly towards modification this way. It seems the best (most friendly towards modification) way is to completely do everything in HTML/CSS/JS without mixing in support from Go.

[dmitshur]

Closed for now, until I finish the required backend supprt.