jf2: Difference between revisions

From Microformats Wiki
Jump to navigation Jump to search
(→‎Specification: Update the URLs)
 
(19 intermediate revisions by 5 users not shown)
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:
* webmention.io
* webmention.herokuapp.com


(need specific examples from those two)
=== [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:

Consuming Code

Service that converts jf2 into readable HTML:


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 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"]
    }
}
{
  "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'
  );

See Also