x-postpress
A Web Component showing the "latest posts" using a WordPress REST API
x-postpress
A Web Component that fetches WordPress posts from the REST API based on attributes set on the element.
About
- Built using LitElement and TypeScript
- Supports Internet Explorer 11
Try
- Demo the element on GitHub Pages
- Exercise the element on CodeSandbox
Use
Add the Web Component to the project (unpkg and npm examples)
Load the custom element using a
script
tag:<script src="https://unpkg.com/x-postpress" type="module" > </script>
Alternatively, add using
npm
:npm i x-postpress
Then import the module from another file:
import 'x-postpress'
Add the tag into the document and style using available CSS custom properties. Articles can be included with the provided slot element:
<style> ul { list-style-type: var(--ul-list-style-type, inherit); } x-postpress { --ul-list-style-type: none; } </style> <x-postpress apiHost="https://content.example.com" per_page="1" > <div slot="articles"> <article> <h1><a href="https://example.com/1970/01/01/slotted/"> Article </a></h1> <h2>Thursday, 01 January 1970</h2> <p>Lorem ipsum dolor sit amet</p> <hr> </article> </div> </x-postpress>
Misc
- An Angular repository and unpkg examples are available for experimentation
- Try using devtools to change the
apiHost
attribute within thex-postpress
tag to render another REST API posts endpoint - If building an app with x-postpress, the included index.html checks the query string for parameters to override particular custom element attributes (example):
<a href="http://localhost:8081/?apiHost=https://content.example.com" > example.com </a>
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- @polymer/app-layout#^3.0.2
- @polymer/polymer#^3.1.0
- @webcomponents/webcomponentsjs#^2.2.4
- fetch-polyfill#^0.8.2
- lit-element#^2.0.0-rc.5
- lit-html#^1.0.0-rc.2
- pwa-helpers#^0.9.0
- Released
- 2019-01-31
- Maturity
- IMPORTED
- License
- BSD 3-clause "New" or "Revised" License
Compatibility
- Framework
- Polymer 3.0+
- Browser
- Browser Independent
x-postpress - Vaadin Add-on Directory
A Web Component showing the "latest posts" using a WordPress REST APIArticle
Thursday, 01 January 1970
Lorem ipsum dolor sit amet
View on GitHub
x-postpress version 1.0.0
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.0.1
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.1.0
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.1.1
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.1.2
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.2.0
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.2.1
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.2.2
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.2.3
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.2.5
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.2.6
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.2.7
### Dependencies
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.3.0
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.4.0
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.4.2
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/lit-element#^0.6.5
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.0.0
* fetch-polyfill#^0.8.2
* lit-html#^1.0.0-rc.1
* pwa-helpers#^0.9.0
x-postpress version 1.4.3
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.3
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.2
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 1.4.4
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.3
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.2
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 1.4.5
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.3
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.2
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 1.4.6
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.4
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.2
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 2.0.0
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.4
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.3
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 2.0.1
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.4
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.3
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 2.0.2
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.4
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.3
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 2.0.3
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.4
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.3
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 2.1.0
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.4
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.5
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 2.1.2
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.4
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.5
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 2.1.3
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.4
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.5
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 2.1.5
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.4
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.5
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 2.1.6
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.4
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.5
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 2.1.7
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.4
* fetch-polyfill#^0.8.2
* lit-element#^2.0.0-rc.5
* lit-html#^1.0.0-rc.2
* pwa-helpers#^0.9.0
x-postpress version 2.1.8
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.7
* fetch-polyfill#^0.8.2
* lit-element#^2.0.1
* lit-html#^1.0.0
* pwa-helpers#^0.9.0
x-postpress version 2.1.9
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.7
* fetch-polyfill#^0.8.2
* lit-element#^2.0.1
* lit-html#^1.0.0
* pwa-helpers#^0.9.0
x-postpress version 2.1.10
### Dependencies
* @polymer/app-layout#^3.0.2
* @polymer/polymer#^3.1.0
* @webcomponents/webcomponentsjs#^2.2.7
* fetch-polyfill#^0.8.2
* lit-element#^2.0.1
* lit-html#^1.0.0
* pwa-helpers#^0.9.0