Nonlinear Programming Methods

    x-postpress
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.3 • Public • Published

    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>

    Install

    npm i x-postpress

    DownloadsWeekly Downloads

    10

    Version

    3.0.3

    License

    AGPL-3.0

    Unpacked Size

    15.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • kherrick