2017 ? 1 ? 12 ?? ????? ???? ? W3C ?? ?? ? Webmention? ?? ????? ?? ? ? URL? ??? ??? ???????. ???, ???? ?? ??? ?? ? ? ????? ? ????. ????? ? ???? ?? ?? ??? ??? ???? ??? ??? (Twitter, Instagram, Mastodon ?)? ??????? ???????.

? ?? ??? ?????. WordPress ???? ????? ?? ??? ? ??? ?? ?? ??? ??? ? ????. ??? ?????.

?? ??

1. ? ?? ?? ???? ??????.
2. ?? ??? ?? ??? ? ???? ?????.
3. ??? ? ???/?? ?????.
4. ?? ??? ? ???? ??????.

???? ?? ??? ?? ????? ??????. ? ?? ???? ? ?? ??? ????? atila.io? ?? ?? ??? ??? ???????.

?? JS ?? ?? ? ??? ? ???? ????? ? ? ?? ??? ???? ?? React ? ? JavaScript ?? ????? ?? ??? ? ????.

1 ?? : ? ?? ?? ??? ??

? ??? ???? ??? ?? ????? ???? webmention.io (? ??? ???)? ?? ???? ??? ? ????.

webmention.io? ?????. ??? ??? ? ???????. ? ???? ?? ??? ???? ???? rel="me" ??? ??????. ?? ??? ????? ?? ??? ?? ?????.

 <a href="http://www.miracleart.cn/link/069802d489a7b73dd31fd13b0f2cd690" rel="me noopener noreferrer" target="_blank">
  @atilafassina
</a>

?? ???? ? ??? ????? ? ? ????? ?? ??? ?????. webmention.io?? ?? ? ? ??? URL? ??????. ??? ? ?? ?? ???? ?????. ???? ??????<link> ? ???? ?? ??? ????? :

<link href="https://webmention.io/%7Buser%7D/webmention" rel="webmention">
<link href="https://webmention.io/%7Buser%7D/xmlrpc" rel="pingback">

{user} webmention.io ??? ???? ?????.

2 ?? : ?? ??? ?? ?? ??

? ??? ??? ?? ???? ??????. ?? ??? ?? ??? ???? ?? ?????. ?? ??? ? Bridgy? ????? ? ???? ?????? ????? ?????. SSO? ???? ??? ????? ??????.

3 ?? : ???? ? ??? ??

? ???? ? ?? ???? ???? ???? ?? ?????. ??? ??? ????? ????, ??? ????, ??? ????, NextJS?? ?? (?? ??).

? ?? ??

webmention.io API? ?? ?? ?????. ??? ??? ?? ?????.

 type tmentionscountresponse = {
  ? : ??;
  ??: {
    ?? : ??;
    ?? : ??;
    ?? : ??;
    repost : ??;
  };
};

??? ???? ?????.

 type tmentionsCount = {
  ?? : ??;
  ??? : ??;
  ? : ??;
};

??? https://webmention.io/api/count.json?target=${post_url} ????. Max B?ck? Swyx? ???? ?? Reposts ? ??? ??? ?????.

 const getmentionscount = async (posturl : string) : ??<tmentionscount> => {
  const resp = await fetch (`https://webmention.io/api/count.json?target=$ {posturl}/`);
  const {type, count} = await resp.json ();

  ?? {
    ??? : type.like type.repost,
    ?? : type.mention type.Reply,
    ? : ?,
  };
};</tmentionscount>

? ??? ?? ??

https://webmention.io/api/mentions endpoint? page , per-page ? target ?? ??? ???? ???? ??????. ???? ???? links ??? ?????.

 type tmention = {
  ?? : ???;
  ?? : ??;
  gryified_date : ???;
  ID : ??;
  ?? : ??;
  ??? : {
    ??: {
      ?? : ???;
      URL : ???;
      ?? : ???;
    };
    URL : ???;
    ?? : ???;
    ?? : ???;
    ?? : ???;
    published_ts : ??;
  };
  ??: {
    ?? : '??'| '??'| 'repost'| '??';
    ?? : ???;
    sentence_html : ???;
  };
  ?? : ???;
};

?? ?? :

 const getmentions = ??? (
  ??? : ???,
  PostSperPage : ??,
  Posturl : ???
) : ??  => {
  const resp = ???? ????.
    `https://webmention.io/api/mentions?page=$ {page} & per page = $ {postperpage} & target = $ {posturl}`
  );
  const list = await resp.json ();
  ?????. ??;
};

Nextjs ?? (?? ??)

Nextjs? ??? ?? ??? getStaticProps , getStaticPaths ? getServerSideProps ?????. ?? ? ? ??? ?? SWR? ???? ????? ? ?? ??? ??????.

? ?? ?? ?????

MentionsCounter ?? ??? count? ?????.

 // ... (?? ?? ?? ? ??) ...

const consendionscounter = ({posturl}) => {
  const {t} = usetranslation ();
  const {data = {}, error} = usewr (posturl, getmentionsCount);

  if (??) {
    ??<errormessage> {t ( 'common : errorwebmentions')}</errormessage> ;
  }

  const {likes = '-', ?? = '-'} = data;

  ?? (
    <mentioncounter>
      <li>
        <heart title="?????"></heart>
        <counterdata>{number.isnan (???)? 0 : ???}</counterdata>
      </li>
      <li>
        <comment title="??"></comment>
        <counterdata>{number.isnan (??)? 0 : ??}</counterdata>
      </li>
    </mentioncounter>
  );
};

??? ?????

Webmentions ?? ??? ??? ??? ?? ??? ???? ?? ??? ???? ?? ?? ? useEffect .

 // ... (?? ?? ?? ? ??) ...

const abmentions = ({posturl}) => {
  const {t} = usetranslation ();
  const [page, setpage] = usestate (0);
  const [??, ??] = usestate ([]);

  useeffect (() => {
    const fetchmentions = async () => {
      Const Oldmentions = Getmentions (Page, 50, PostUrl);
      ?? ?? ((??) => [... ??, ... Oldermentions]);
    };
    ?? ?? ();
  }, [???]);

  ?? (
    
      {?? .map ((??, ??) => (
        <mention key="{mention.data.author.name}">
          <authoravatar lazy src="%7Bmention.data.author.photo%7D"></authoravatar>
          <mentioncontent>
            <mentiontext activity="{mention.activity.type}" data="{mention.data}"></mentiontext>
          </mentioncontent>
        </mention>
      ))}
      {?? .length> 0 && (
        <morebutton onclick="{()"> setPage (??? 1)} type = "button">
          {t ( 'common : more')}
        </morebutton>
      )}
    >
  );
};

4 ?? : ?? ??? ?? ??

API ?? ? Webhook? ?? webmention.app? ?? ??? ??? ??????. ?? Remy Sharp? wm CLI ???? ?? ? ????? ??? ? ????. ?? ?? (H-Entry ? H-Card)? ? ??? ?? ??? ??? ??????.

??

? ???? ? ?? ??? ?? ??? ? ??? ?????. ??????? ???? ???????!

??

• ?? ????? ? ?? ?? (Max B?ck)
• ????? ? ?? (Swyx)
• ??? ??? ??? (Remy Sharp)
• ? ?? ? ?? (Aaron Parecki)

?? ??

• ? ?? W3C ?? (?? ??)
• webmention.io
• webmention.app
• ?? ??? ??? CLI
• ?? ?
• microformats.org
• indieweb

? ??? Nextjs? ?? ? ???? ?? ?? (?? ??? ??)? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!