jf2: Difference between revisions
Jump to navigation
Jump to search
(→Basic Example: add category for full illustration (how plurals work)) |
(→Specification: Update the URLs) |
||
(20 intermediate revisions by 5 users not shown) | |||
Line 12: | Line 12: | ||
"name": "Tantek Çelik", | "name": "Tantek Çelik", | ||
"url": "http:\/\/tantek.com\/", | "url": "http:\/\/tantek.com\/", | ||
"photo": "http:\/\/tantek.com\/photo.jpg" | "photo": "http:\/\/tantek.com\/photo.jpg" | ||
}, | }, | ||
"published": "2015-10-21T12:34-0700", | "published": "2015-10-21T12:34-0700", | ||
Line 19: | Line 19: | ||
} | } | ||
</source> | </source> | ||
== Specification == | |||
* [https://jf2.spec.indieweb.org/ JF2 Post Serialization Format] | |||
** [https://github.com/indieweb/jf2 On GitHub] | |||
== Implementations == | |||
=== Parsers === | |||
Open source parsers: | |||
* [https://github.com/dissolve/socialstream github.com/dissolve/socialstream] - Sample php code to convert MF2 -> JS2 | |||
* [http://www.unmung.com/ unmung.com] - another conversion service that can convert mf2 to jf2 | |||
=== Consuming Code === | |||
Service that converts jf2 into readable HTML: | |||
* [http://stream.thatmustbe.us/ stream.thatmustbe.us] - Service running the socialstream code | |||
== Name Candidates == | |||
As 'jf2' is only a working name let's collect alternatives: | |||
;JFDI | |||
:Backronym: JSON For Data Interchange | |||
;jf2 | |||
:Minimal JSON for mf2 | |||
== Prior Work == | == Prior Work == | ||
Line 25: | Line 49: | ||
== Prior Simplifications == | == Prior Simplifications == | ||
Output from: | Output from: | ||
( | === [http://webmention.io webmention.io] === | ||
This service outputs a list of webmentions received for a post. It recognizes when a post is a reply, like, repost, invitation, RSVP, and mention. Example JSON output: | |||
<source lang="javascript"> | |||
{ | |||
"source": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback", | |||
"verified": true, | |||
"verified_date": "2013-04-25T17:09:33-07:00", | |||
"id": 900, | |||
"data": { | |||
"author": { | |||
"name": "Tantek Çelik", | |||
"url": "http://tantek.com/", | |||
"photo": "http://tantek.com/logo.jpg" | |||
}, | |||
"name": "Another milestone: @eschnou automatically shows #indieweb comments with h-entry sent via pingback http://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html", | |||
"content": "Another milestone: <a class=\"auto-link h-x-username\" href=\"https:\/\/twitter.com\/eschnou\">@eschnou<\/a> automatically shows #indieweb comments with h-entry sent via pingback <a class=\"auto-link\" href=\"http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html\">http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html<\/a>", | |||
"published": "2013-04-22T15:03:00-07:00", | |||
"published_ts": 1366668180, | |||
"url": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback" | |||
} | |||
} | |||
</source> | |||
=== webmention.herokuapp.com === | |||
This site outputs in multiple formats, based on receiving webmentions, parsing them for microformats and consolidating into a single feed. Live examples for kevinmarks.com: | |||
*[https://webmention.herokuapp.com/api/mentions?site=kevinmarks.com&format=html HTML mf2 markup] | |||
<source lang=html4strict> | |||
<div class="h-entry"> | |||
<a href="http://waterpigs.co.uk/" class="p-author h-card"> | |||
<img src="http://waterpigs.co.uk/photo.jpg" alt=""> | |||
Barnaby Walters | |||
</a> | |||
<div class="p-summary p-name">@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf</div> | |||
<footer> | |||
<time class="dt-published" datetime="2014-04-01T14:25:14.000Z" pubdate=""> | |||
<a class="u-url u-uid" href="http://waterpigs.co.uk/notes/4VMERE/">2 years ago</a> | |||
</time> | |||
mentioning <a href="http://kevinmarks.com/">http://kevinmarks.com/</a> | |||
</footer> | |||
</div> | |||
</source> | |||
*[http://www.unmung.com/mf2?url=https%3A%2F%2Fwebmention.herokuapp.com%2Fapi%2Fmentions%3Fsite%3Dkevinmarks.com%26format%3Dhtml&html=&pretty=on parsed JSON form of the HTML] | |||
<source lang=javascript> | |||
{ | |||
"type": ["h-entry"], | |||
"properties": { | |||
"uid": ["http://waterpigs.co.uk/notes/4VMERE/"], | |||
"author": [ | |||
{"type": ["h-card"], | |||
"properties": { | |||
"url": ["http://waterpigs.co.uk/"], | |||
"photo": ["http://waterpigs.co.uk/photo.jpg"], | |||
"name": [""] | |||
}, | |||
"value": "Barnaby Walters" | |||
}], | |||
"url": ["http://waterpigs.co.uk/notes/4VMERE/"], | |||
"summary": ["@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf"], | |||
"published": ["2014-04-01T14:25:14Z"], | |||
"name": [ "@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf"] | |||
} | |||
} | |||
</source> | |||
*[https://webmention.herokuapp.com/api/mentions?site=kevinmarks.com&format=json simplified JSON] (whitespace added) | |||
<source lang=javascript> | |||
{ | |||
"url":"http://waterpigs.co.uk/notes/4VMERE/", | |||
"name":null, | |||
"published":1396362314000, | |||
"summary":"@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf", | |||
"author": { | |||
"name":"Barnaby Walters", | |||
"photo":"http://waterpigs.co.uk/photo.jpg", | |||
"url":"http://waterpigs.co.uk/" | |||
}, | |||
"interactions": ["http://www.kevinmarks.com/indiewebsfdemowrapup.html"], | |||
"targets":["http://kevinmarks.com/"], | |||
"type":"reply", | |||
"interactionTarget":false | |||
} | |||
</source> | |||
=== [https://github.com/indieweb/php-comments php-comments] library === | |||
This library takes HTML and converts it to a simple PHP data structure. Example post: | |||
<source lang="php"> | |||
$result = array( | |||
'type' => 'reply', | |||
'author' => array( | |||
'name' => 'Aaron Parecki', | |||
'photo' => 'http://aaronparecki.com/images/aaronpk.png', | |||
'url' => 'http://aaronparecki.com/' | |||
), | |||
'published' => '2014-02-16T18:48:17-0800', | |||
'name' => 'Example Note', | |||
'text' => 'this text is displayed as the comment', | |||
'url' => 'http://aaronparecki.com/post/1' | |||
); | |||
</source> | |||
== See Also == | == See Also == |
Latest revision as of 17:21, 25 June 2018
This article is a stub. You can help the microformats.org wiki by expanding it.
jf2 is a working name for a simplified more minimal JSON representation of microformats2.
Basic Example
{
"type": "entry",
"author": {
"type": "card",
"name": "Tantek Çelik",
"url": "http:\/\/tantek.com\/",
"photo": "http:\/\/tantek.com\/photo.jpg"
},
"published": "2015-10-21T12:34-0700",
"category": ["simple", "example"],
"content": "Example of a simple note"
}
Specification
Implementations
Parsers
Open source parsers:
- github.com/dissolve/socialstream - Sample php code to convert MF2 -> JS2
- unmung.com - another conversion service that can convert mf2 to jf2
Consuming Code
Service that converts jf2 into readable HTML:
- stream.thatmustbe.us - Service running the socialstream code
Name Candidates
As 'jf2' is only a working name let's collect alternatives:
- JFDI
- Backronym: JSON For Data Interchange
- jf2
- Minimal JSON for mf2
Prior Work
- microformats2 JSON
Prior Simplifications
Output from:
webmention.io
This service outputs a list of webmentions received for a post. It recognizes when a post is a reply, like, repost, invitation, RSVP, and mention. Example JSON output:
{
"source": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback",
"verified": true,
"verified_date": "2013-04-25T17:09:33-07:00",
"id": 900,
"data": {
"author": {
"name": "Tantek Çelik",
"url": "http://tantek.com/",
"photo": "http://tantek.com/logo.jpg"
},
"name": "Another milestone: @eschnou automatically shows #indieweb comments with h-entry sent via pingback http://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html",
"content": "Another milestone: <a class=\"auto-link h-x-username\" href=\"https:\/\/twitter.com\/eschnou\">@eschnou<\/a> automatically shows #indieweb comments with h-entry sent via pingback <a class=\"auto-link\" href=\"http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html\">http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html<\/a>",
"published": "2013-04-22T15:03:00-07:00",
"published_ts": 1366668180,
"url": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback"
}
}
webmention.herokuapp.com
This site outputs in multiple formats, based on receiving webmentions, parsing them for microformats and consolidating into a single feed. Live examples for kevinmarks.com:
<div class="h-entry">
<a href="http://waterpigs.co.uk/" class="p-author h-card">
<img src="http://waterpigs.co.uk/photo.jpg" alt="">
Barnaby Walters
</a>
<div class="p-summary p-name">@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf</div>
<footer>
<time class="dt-published" datetime="2014-04-01T14:25:14.000Z" pubdate="">
<a class="u-url u-uid" href="http://waterpigs.co.uk/notes/4VMERE/">2 years ago</a>
</time>
mentioning <a href="http://kevinmarks.com/">http://kevinmarks.com/</a>
</footer>
</div>
{
"type": ["h-entry"],
"properties": {
"uid": ["http://waterpigs.co.uk/notes/4VMERE/"],
"author": [
{"type": ["h-card"],
"properties": {
"url": ["http://waterpigs.co.uk/"],
"photo": ["http://waterpigs.co.uk/photo.jpg"],
"name": [""]
},
"value": "Barnaby Walters"
}],
"url": ["http://waterpigs.co.uk/notes/4VMERE/"],
"summary": ["@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf"],
"published": ["2014-04-01T14:25:14Z"],
"name": [ "@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf"]
}
}
- simplified JSON (whitespace added)
{
"url":"http://waterpigs.co.uk/notes/4VMERE/",
"name":null,
"published":1396362314000,
"summary":"@kevinmarks awesome demos as always! Thanks for live posting! #indiewebcampsf",
"author": {
"name":"Barnaby Walters",
"photo":"http://waterpigs.co.uk/photo.jpg",
"url":"http://waterpigs.co.uk/"
},
"interactions": ["http://www.kevinmarks.com/indiewebsfdemowrapup.html"],
"targets":["http://kevinmarks.com/"],
"type":"reply",
"interactionTarget":false
}
php-comments library
This library takes HTML and converts it to a simple PHP data structure. Example post:
$result = array(
'type' => 'reply',
'author' => array(
'name' => 'Aaron Parecki',
'photo' => 'http://aaronparecki.com/images/aaronpk.png',
'url' => 'http://aaronparecki.com/'
),
'published' => '2014-02-16T18:48:17-0800',
'name' => 'Example Note',
'text' => 'this text is displayed as the comment',
'url' => 'http://aaronparecki.com/post/1'
);