Add playground links to most examples

[gkellogg]

Only does expansion, at least for now.

Fixes #48.

[iherman]

I wonder what the problem is, there may be some tricky HTML issues...

• The preview does not work. Unfortunately, the service is not maintained by our systeam, and Toby, who originally did it, does not have time for maintenance either
• I am unable to look at this via rawgit. I tried (both with cdn version and without), but the URL I get does not work.

Any idea?

(I am, of course, all in favor of adding those links to the examples!)

[iherman]

Forget my previous remark about rawgit. It works if one uses the URL of the index.html file (not with the repo as a whole):

https://rawgit.com/w3c/json-ld-syntax/playground-links/index.html

[iherman]

• I find the playground logo in the tab a bit disturbing and unclear. I would prefer to spell it out
• in some cases (e.g. Example 14) the link leads to an error message because the JSON-LD is, well, invalid (it contains a ...) :-(

[gkellogg]

Yes, I think I know the source of the invalid JSON-LD.

Would you see a similarly styled button for this instead, or just a link such as “open in playground”?

[iherman]

@gkellogg I would just use text as for all the other options

[gkellogg]

@iherman Changed style to use buttons.

[iherman]

Thanks! As far as I am concerned, we can merge this...

[davidlehn]

It is a bit odd to have tabs you can flip between and another "tab" that is actually an action to open a another site. Fine for now unless anyone has a better UI idea.

[BigBlueHat]

Agreed with @davidlehn about needing consistency among the experience of the tabs. Also, the styles have some issues in the latest Firefox, fwiw.

[gkellogg]

A UI designer I am not. I would appreciate anyone’s help in styling.

As for the separate button for the playground link, this is entirely manipulated in JavaScript, so something else would be easy to propagate. Personally, I found the previous icon taken from json-ld.org reasonable, is it is representative of where the link will take you. When saved, there is an aria label that indicates it’s purpose.

[BigBlueHat]

I missed the logo preview, but that does sound nice. Also, I sadly can't take a look at the UI stuff until next week (currently tied up with event running), but I'd be happy to then. UX was most of what I did until I got into standards. 😄 🎨

[gkellogg]

@BigBlueHat It's never too late on GitHub! https://rawgit.com/w3c/json-ld-syntax/7abb999a4ae7dd1b8f88d0fedb7617e16e6091fa/index.html.

[gkellogg]

@BigBlueHat said:

Also, the styles have some issues in the latest Firefox, fwiw.

It doesn't resize content when programmatically updated, apparently. I updated to give a classname and style with width: 150px.

I'm going to go ahead and merge this, along with the other repos; we can work on other styling issues later.