indieweb-components

Some Web Components for IndieWeb sites.

DEMO PAGE

Installation

Use npm or bower.

$ bower install --save indieweb-components webcomponents/webcomponentsjs#v1
# or 
$ npm i indieweb-components @webcomponents/webcomponentsjs

Load the polyfill:

<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<!-- or -->
<script src="node_modules/webcomponentsjs/webcomponents-loader.js"></script>

And use <link rel="import"> for the components you want.

(Alternatively, load only the Custom Elements polyfill and load the JS files, skipping HTML imports. Mind the findAndReplaceDOMText dependency in fragmention-target.)

Elements

indie-action

An implementation of the indie-action tag from webactions.

For users who have configured their posting tools with the indie-config protocol, the first a tag inside of the indie-action element will have its href replaced with the URL of the matching action.

The string {url} will be replaced in the href with the contents of the with attribute, resolved against the current domain. The indie-action element also gets the indie-configured attribute when the config is loaded, so you can style the link differently from the fallback link using a selector like [indie-configured] a.

The config is loaded lazily now, when the user first clicks an indie-action link.

<link rel="import" href="bower_components/indieweb-components/indie-action.html">
 
<indie-action do="reply" with="https://unrelenting.technology/notes/2015-07-03-12-48-01">
  <a href="https://twitter.com/intent/reply?tweet_id=616951543720493057">Reply</a>
</indie-action>

Requires Custom Elements, Custom Events and postMessage.
No Shadow DOM -- the lite version of the [Web Components polyfill] is enough!

fragmention-target

A custom element for displaying fragmentions.

In addition to marking the element that contains the linked text with the fragmention attribute, it is also able to wrap the exact linked text in a fragmention-exact tag. To enable this functionality, add the exact attribute.

<link rel="import" href="bower_components/indieweb-components/fragmention-target.html">
 
<style>
  [fragmention] { background: #F4BF75; }
  fragmention-exact { background: #AB759F; }
</style> 
 
<fragmention-target exact>
  <p>Intuitive share generate open-source intuitive 24/365 aggregate monetize peer-to-peer--matrix 24/365 transition rich-clientAPIs morph empower interactive. Syndicate action-items vertical; plug-and-play engage recontextualize, "syndicate virtual data-driven e-markets, integrate synergies design extend," impactful productize standards-compliant sticky.</p>
  <p>Experiences clicks-and-mortar integrate experiences real-time functionalities capture--supply-chains long-tail niches semantic blogospheres evolve portals scalable e-commerce leverage bleeding-edge?</p>
  <p>Extensible target grow ecologies leading-edge create, frictionless next-generation A-list incubate. Vertical: reinvent seize interactive compelling post; syndicate granular systems drive impactful tag evolve strategize seamless.</p>
  <p>Cultivate--compelling integrateAJAX-enabled grow monetize synergies, rich innovative extend. Innovative; incentivize dynamic capture transition relationships, semantic create sticky, "facilitate optimize; share semantic impactful recontextualize e-services: next-generation bandwidth," leading-edge.</p>
</fragmention-target>

Requires Custom Elements.
No Shadow DOM -- the lite version of the [Web Components polyfill] is enough!

Contributing

Please feel free to submit pull requests! Bugfixes and simple non-breaking improvements will be accepted without any questions :-)

By participating in this project you agree to follow the Contributor Code of Conduct.

License

Copyright 2015-2017 Greg V [e-mail]
Available under the ISC license, see the COPYING file