Contact us Create app

Directory

← Back

x-postpress

A Web Component showing the "latest posts" using a WordPress REST API

Author

Rating

Links

Popularity

<100

x-postpress

A Web Component that fetches WordPress posts from the REST API based on attributes set on the element.

About

Try

Use

  • Add the Web Component to the project (unpkg and npm examples)

    1. Load the custom element using a script tag:

      <script
  src="https://unpkg.com/x-postpress"
  type="module"
>
</script>

    2. 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 the x-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>

Compatibility

(Loading compatibility data...)

Last updated: 2000-01-01

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-29
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 API x-postpress - Vaadin Add-on Directory
# x-postpress A Web Component that fetches [WordPress](https://wordpress.org/) posts [from the REST API](https://developer.wordpress.org/rest-api/reference/posts/#list-posts) based on attributes set on the element. ## About * Built using [LitElement](https://lit-element.polymer-project.org/) and [TypeScript](https://www.typescriptlang.org/) * [Supports Internet Explorer 11](https://github.com/kherrick/x-postpress/tree/master/build/es5-bundled) ## Try * [Demo the element](https://kherrick.github.io/x-postpress/) on GitHub Pages * [Exercise the element](https://codesandbox.io/s/5yj96r0n9k) on CodeSandbox ## Use * Add the Web Component to the project (unpkg and npm examples) 1. Load the custom element using a `script` tag: ```html ``` 2. Alternatively, add using `npm`: ```bash npm i x-postpress ``` Then import the module from another file: ```javascript 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: ```html

Article

Thursday, 01 January 1970

Lorem ipsum dolor sit amet

 ``` ## Misc * An [Angular repository](https://github.com/kherrick/angular-x-postpress) and [unpkg examples](https://github.com/kherrick/x-postpress/tree/master/examples) are available for experimentation * Try using devtools to change the `apiHost` attribute within the `x-postpress` tag to render another REST API posts endpoint * If building an app with x-postpress, the included [index.html](index.html) checks the query string for parameters to override particular custom element attributes (example): ```html example.com ```
postpress logo
Sauce Labs build status
Travis CI build status
published on webcomponents.org
View on NPM
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

Online