New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

x-postpress

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

x-postpress

A Web Component used to render articles.


Version published
Weekly downloads
5
decreased by-37.5%
Maintainers
1
Weekly downloads
 
Created

x-postpress

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

About

Import

  • 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@3"
        type="module"
      >
      </script>
      
    2. Alternatively, add using npm:

      npm i x-postpress@3
      

      Then import the module from another file:

      import 'x-postpress'
      

Use

  • Add the tag into the document and style. Content can be slotted, or fetched over the network as JSON modeled on the WordPress REST API List Posts endpoint, as well as preparsed HTML.

    <style>
      x-postpress {
        --x-postpress-article-margin: 0 auto 1rem auto;
        --x-postpress-h1-font-size: 1.5rem;
      }
    </style>
    
    <!-- use the type and url attribute to fetch over the network -->
    <x-postpress
      type="json"
      url="https://example.com/wp-json/wp/v2/posts?include=1"
    ></x-postpress>
    
    <!-- pre-render or dynamically render slotted content -->
    <x-postpress>
      <template shadowroot="open">
        <slot name="posts"></slot>
      </template>
      <section slot="posts">
        <article>
          <h1>
            <a href="/example-article/">
              example-article
            </a>
          </h1>
    
          <p>Lorem ipsum</p>
        </article>
      </section>
    </x-postpress>
    
    <script>
      // 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();
        });
    </script>
    
    <script
      src="https://unpkg.com/x-postpress@3"
      type="module"
    >
    </script>
    

FAQs

Package last updated on 08 Feb 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts