support twitter cards as part of the rendering

[jexp]

So far on neo4j.org we provide the twitter card meta information

<meta name="twitter:site" content="@neo4j">
<meta name="twitter:domain" content="http://neo4j.org">
<meta name="twitter:creator" content="@<%=item['twitter']%>">
<meta name="twitter:title" content="<%=item['title']%>">
<meta name="twitter:description" content="<%=item['introText']%>">
<meta name="twitter:card" content="<%=item['img'] ? 'summary_large_image':'summary' %>">
<meta name="twitter:image:src" content="<%=item['img']||asset('img/neo4j/neo4j-logo.png') %>">

• https://dev.twitter.com/cards/overview
• summary card for graphg gists without image (generic graphgist image) https://dev.twitter.com/cards/types/summary
• and detail card for grapgist with image: https://dev.twitter.com/cards/types/summary-large-image

[cheerfulstoic]

Yay, this is done! Still need to be whitelisted on twitter, though.

I had to change angular to use the hashbang (#!) separator for it's client-side URL changing magic because that's recognized by search engines (and twitter, and node.js I think) as something that should be changed like so:

http://graphgist.herokuapp.com/#!/gists/http%253A%252F%252Fgist.neo4j.org%252F%253Fd2bd983035fd4757d1c2 to http://graphgist.herokuapp.com/?_escaped_fragment_=/gists/http%253A%252F%252Fgist.neo4j.org%252F%253Fd2bd983035fd4757d1c2

Because of that I can render the meta tags on the server side since twitter doesn't parse the javascript.

[jexp]

The html rendering of the adoc and insertion of the meta tags should all be server side, never client side. We can show meta-tags for stuff that we have in our database.

For other graphgist-links which are just provided in the url-form, we can try to extract some of it via asciidoctor.js on the server side, or the /api method during loading, in my other code I just provided http-headers with the information which is then used during the rendering.

[jexp]

I don't really understand the URL aspect. Also the urls look quite complex compared to before (on neo4j.org/graphgist) ? What's the reason for that and can we simplify them back?

What I did in the past, was to check if I already have the URL-fragment or gist-id in our database and then use the information from our db instead.

[cheerfulstoic]

The HTML rendering is server side, but it's requested and displayed by Angular currently. This makes browsing the site much faster since Angular is already loaded and just needs to make the request for the HTML of the content and not need to reload javascript. We can make just the graphgist pages load entirely server side, but it will be slower

I definitely would like to make it work via a database ID (generated, non neo4j ID), but I'm using the URLs for the moment to support ones that are already there before I get that code in place and migrate the data. It actually looks for URL fragments right now, so we could try to find some way to pull out the unique ID from the source URL and then just use that in the portal URL for the gist. I would worry about potentially (though unlikely) conflicting IDs, but using internally generated IDs should solve that just fine.

[jexp]

Ah ok, then we just have to add rendering the meta-tags as part of the html on the server side, or?

[cheerfulstoic]

Yeah, that's what I did. The problem was that Angular (by default) uses the hash to store the state of what "page" it's on within the single page app. But the hash and everything after it are stripped by the browser (and twitter) and so the information can't be used to generate the meta tags. By changing to the hashbang we can use that hash-part to keep the URL state and also twitter will transform it for us into a usable query param which we can use to return the right meta tags

[cheerfulstoic]

Switched to use internal IDs (which are now set in the production DB). I think this is done now

[jexp]

But we still support the external id's / graphgist links as a fallback?

Which is the URL that I should register for the twitter cards now?

[cheerfulstoic]

We support graphgist and dropbox now:

http://graphgist.herokuapp.com/#!/gists/github-neo4j-contrib%252Fgists%252F%252Fother%252FBankFraudDetection.adoc

http://graphgist.herokuapp.com/#!/gists/dropboxs-vhtxfibv7ycstrv%252FBankFraudDetection.adoc.txt%253Fdl%253D0

I'll work on support which is provided from DocGist as well.