A Web Component showing the "latest posts" using a WordPress REST API
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin use typescript Jan 26, 2019
build use css from lit-element Feb 16, 2019
docker use docker on travis-ci Dec 27, 2018
examples use css from lit-element Feb 16, 2019
images use sauce labs Jan 13, 2019
server initial commit Dec 24, 2018
src use css from lit-element Feb 16, 2019
test add types Jan 29, 2019
.editorconfig initial commit Dec 24, 2018
.eslintrc 2.0.0 Jan 21, 2019
.gitignore initial commit Dec 24, 2018
.nojekyll initial commit Dec 24, 2018
.travis.yml use sauce labs Jan 13, 2019
LICENSE use sauce labs Jan 13, 2019
README.md set noAccessor to false for article property Jan 31, 2019
gulpfile.js use typescript Jan 26, 2019
index.html 2.0.0 Jan 21, 2019
manifest.json initial commit Dec 24, 2018
package-lock.json use css from lit-element Feb 16, 2019
package.json use css from lit-element Feb 16, 2019
polymer.json set shell to src/app.js Jan 8, 2019
robots.txt initial commit Dec 24, 2018
service-worker.js initial commit Dec 24, 2018
sw-precache-config.js initial commit Dec 24, 2018
tsconfig.json use typescript Jan 26, 2019
wct.conf.json initial commit Dec 24, 2018

README.md

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>