Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/valpackett/indieweb-components

VanillaJS-based Web Components for the IndieWeb
https://github.com/valpackett/indieweb-components

fragmention indie-action indieweb web-components

Last synced: 3 months ago
JSON representation

VanillaJS-based Web Components for the IndieWeb

Host: GitHub
URL: https://github.com/valpackett/indieweb-components
Owner: valpackett
License: isc
Created: 2015-07-26T15:53:07.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2017-05-27T17:00:59.000Z (over 7 years ago)
Last Synced: 2024-10-12T19:29:48.146Z (3 months ago)
Topics: fragmention, indie-action, indieweb, web-components
Language: JavaScript
Homepage: https://myfreeweb.github.io/indieweb-components
Size: 271 KB
Stars: 13
Watchers: 3
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: COPYING

Awesome Lists containing this project

README

# indieweb-components

Some [Web Components] for [IndieWeb] sites.

[Web Components]: https://www.webcomponents.org
[IndieWeb]: https://indieweb.org

## [DEMO PAGE](https://myfreeweb.github.io/indieweb-components)

## Installation

Use npm or bower.

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

Load the polyfill:

```html

```

And use `` 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](https://indieweb.org/webactions).

For users who have configured their posting tools with the [indie-config](http://indieweb.org/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.

```html

```

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](https://indieweb.org/fragmention).

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.

```html

[fragmention] { background: #F4BF75; }
fragmention-exact { background: #AB759F; }

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.

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?

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.

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.

```

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](http://contributor-covenant.org/version/1/4/).

## License