https://github.com/kherrick/x-postpress

A Web Component used to render articles.
https://github.com/kherrick/x-postpress

custom-elements rest-api typescript web-components wordpress

Last synced: 13 days ago
JSON representation

A Web Component used to render articles.

• Host: GitHub
• URL: https://github.com/kherrick/x-postpress
• Owner: kherrick
• Created: 2018-12-19T02:26:49.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-02-28T00:07:05.000Z (over 3 years ago)
• Last Synced: 2024-01-25T11:02:00.297Z (10 months ago)
• Topics: custom-elements, rest-api, typescript, web-components, wordpress
• Language: TypeScript
• Homepage:
• Size: 2.67 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# [x-postpress](https://kherrick.github.io/x-postpress/)

A Web Component used to render articles. Content can be slotted or fetched over the network.

## About

* Built with [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements), [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), and [declarative Shadow DOM](https://web.dev/declarative-shadow-dom/) using [TypeScript](https://www.typescriptlang.org/).

## Import

* 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@3

      ```

      Then import the module from another file:

      ```javascript

      import 'x-postpress'

      ```

## Use

* Add the tag into the document and style. Content can be slotted, or fetched over the network as [JSON](https://www.json.org/json-en.html) modeled on the [WordPress REST API](https://developer.wordpress.org/rest-api/) [List Posts endpoint](https://developer.wordpress.org/rest-api/reference/posts/#list-posts), as well as preparsed HTML.

  ```html

  

    x-postpress {

      --x-postpress-article-margin: 0 auto 1rem auto;

      --x-postpress-h1-font-size: 1.5rem;

    }

  

  

  

  

  

    

      

    

    

      

        


          

            example-article

          

        


        
Lorem ipsum

      

    

  


  

    // https://web.dev/declarative-shadow-dom/

    document.querySelectorAll('template[shadowroot]')

      .forEach(template => {

        const mode = template.getAttribute('shadowroot');

        const shadowRoot = template.parentNode.attachShadow({

          mode

        });

        shadowRoot.appendChild(template.content);

        template.remove();

      });

  

  

  

  ```