{"id":18387232,"url":"https://github.com/kherrick/x-postpress","last_synced_at":"2025-04-07T00:34:05.315Z","repository":{"id":57400813,"uuid":"162371467","full_name":"kherrick/x-postpress","owner":"kherrick","description":"A Web Component used to render articles.","archived":false,"fork":false,"pushed_at":"2021-02-28T00:07:05.000Z","size":2795,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-01-25T11:02:00.297Z","etag":null,"topics":["custom-elements","rest-api","typescript","web-components","wordpress"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kherrick.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-19T02:26:49.000Z","updated_at":"2024-01-25T11:02:00.298Z","dependencies_parsed_at":"2022-09-05T03:01:31.759Z","dependency_job_id":null,"html_url":"https://github.com/kherrick/x-postpress","commit_stats":null,"previous_names":[],"tags_count":36,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kherrick%2Fx-postpress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kherrick%2Fx-postpress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kherrick%2Fx-postpress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kherrick%2Fx-postpress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kherrick","download_url":"https://codeload.github.com/kherrick/x-postpress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223268502,"owners_count":17116822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","rest-api","typescript","web-components","wordpress"],"created_at":"2024-11-06T01:25:25.508Z","updated_at":"2024-11-06T01:25:26.123Z","avatar_url":"https://github.com/kherrick.png","language":"TypeScript","readme":"# [x-postpress](https://kherrick.github.io/x-postpress/)\n\nA Web Component used to render articles. Content can be slotted or fetched over the network.\n\n## About\n\n* 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/).\n\n## Import\n\n* Add the Web Component to the project (unpkg and npm examples)\n  1. Load the custom element using a `script` tag:\n      ```html\n      \u003cscript\n        src=\"https://unpkg.com/x-postpress@3\"\n        type=\"module\"\n      \u003e\n      \u003c/script\u003e\n      ```\n  2. Alternatively, add using `npm`:\n      ```bash\n      npm i x-postpress@3\n      ```\n      Then import the module from another file:\n\n      ```javascript\n      import 'x-postpress'\n      ```\n\n## Use\n\n* 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.\n\n  ```html\n  \u003cstyle\u003e\n    x-postpress {\n      --x-postpress-article-margin: 0 auto 1rem auto;\n      --x-postpress-h1-font-size: 1.5rem;\n    }\n  \u003c/style\u003e\n\n  \u003c!-- use the type and url attribute to fetch over the network --\u003e\n  \u003cx-postpress\n    type=\"json\"\n    url=\"https://example.com/wp-json/wp/v2/posts?include=1\"\n  \u003e\u003c/x-postpress\u003e\n\n  \u003c!-- pre-render or dynamically render slotted content --\u003e\n  \u003cx-postpress\u003e\n    \u003ctemplate shadowroot=\"open\"\u003e\n      \u003cslot name=\"posts\"\u003e\u003c/slot\u003e\n    \u003c/template\u003e\n    \u003csection slot=\"posts\"\u003e\n      \u003carticle\u003e\n        \u003ch1\u003e\n          \u003ca href=\"/example-article/\"\u003e\n            example-article\n          \u003c/a\u003e\n        \u003c/h1\u003e\n\n        \u003cp\u003eLorem ipsum\u003c/p\u003e\n      \u003c/article\u003e\n    \u003c/section\u003e\n  \u003c/x-postpress\u003e\n\n  \u003cscript\u003e\n    // https://web.dev/declarative-shadow-dom/\n    document.querySelectorAll('template[shadowroot]')\n      .forEach(template =\u003e {\n        const mode = template.getAttribute('shadowroot');\n        const shadowRoot = template.parentNode.attachShadow({\n          mode\n        });\n        shadowRoot.appendChild(template.content);\n        template.remove();\n      });\n  \u003c/script\u003e\n\n  \u003cscript\n    src=\"https://unpkg.com/x-postpress@3\"\n    type=\"module\"\n  \u003e\n  \u003c/script\u003e\n  ```\n\n\u003cdiv\u003e\n  \u003ca href=\"https://www.webcomponents.org/element/x-postpress\"\u003e\n    \u003cimg\n      alt=\"published on webcomponents.org\"\n      src=\"https://img.shields.io/badge/webcomponents.org-published-blue.png\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkherrick%2Fx-postpress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkherrick%2Fx-postpress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkherrick%2Fx-postpress/lists"}