chore: initial commit

README.md

@@ -1,94 +1,34 @@
-# `component-name`
+# `<api-text>` web component
 
-A Web Component for…
+A web component to load text from an API and display it.
 
-**[Demo](https://daviddarnes.github.io/component-template/demo.html)** | **[Further reading](https://darn.es/web-component-github-starter-template/)**
+## Example usage
 
-## Examples
-
-General usage example:
+Add the `api-text.js` to your markup and define the necessary markup within your web component:
 
 ```html
-<script type="module" src="component-name.js"></script>
-
-<component-name>
-  <button>Button</button>
-</component-name>
-```
-
-Example using a fallback method:
-
-```html
-<script type="module" src="component-name.js"></script>
-
-<component-name>
-  <button>Button</button>
-  <a href="#">Anchor</a>
-</component-name>
-<style>
-  component-name:not(:defined) button,
-  component-name:defined a {
-    display: none;
-  }
-</style>
+<script type="module" src="api-text.js"></script>
+<api-text api-url="/api/api-text">
+  <p class="loading text--blurred fade">🎧 Loading...</p>
+  <p class="content fade" style="opacity:0"></p>
+</api-text>
 ```
 
-Example using options or additional fallback method:
-
-```html
-<script type="module" src="component-name.js"></script>
-
-<component-name attribute="value">
-  <button>Button</button>
-</component-name>
-<style>
-  component-name[attribute="value"] {
-    outline: 1px solid red;
-  }
-</style>
-```
-
-## Features
-
-This Web Component allows you to:
+**Example CSS:**
 
-- Check for…
+```css
+.text--blurred {
+  color: transparent;
+  text-shadow: 0 0 6px var(--text-color);
+}
 
-## Installation
-
-You have a few options (choose one of these):
-
-1. Install via [npm](https://www.npmjs.com/package/@daviddarnes/component-name): `npm install @daviddarnes/component-name`
-1. [Download the source manually from GitHub](https://github.com/daviddarnes/component-name/releases) into your project.
-1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)
-
-### Usage
-
-Make sure you include the `<script>` in your project (choose one of these):
-
-```html
-<!-- Host yourself -->
-<script type="module" src="component-name.js"></script>
+.fade {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
 ```
 
-```html
-<!-- 3rd party CDN, not recommended for production use -->
-<script
-  type="module"
-  src="https://www.unpkg.com/@daviddarnes/component-name@1.0.0/component-name.js"
-></script>
-```
-
-```html
-<!-- 3rd party CDN, not recommended for production use -->
-<script
-  type="module"
-  src="https://esm.sh/@daviddarnes/component-name@1.0.0"
-></script>
-```
-
-## Credit
-
-With thanks to the following people:
+---
 
-- [Zach Leatherman](https://zachleat.com) for inspiring this [Web Component repo template](https://github.com/daviddarnes/component-template)
+I use this component to load media data from a Netlify edge function and describe an earlier iteration in [this blog post](https://coryd.dev/posts/2024/building-a-bespoke-now-playing-web-component/).

api-text.js

@@ -0,0 +1,48 @@
+class ApiText extends HTMLElement {
+  static tagName = 'api-text'
+
+  static register(tagName, registry) {
+    if(!registry && ('customElements' in globalThis)) {
+      registry = globalThis.customElements;
+    }
+    registry?.define(tagName || this.tagName, this);
+  }
+
+  static attr = {
+    url: 'api-url'
+  }
+
+  get url() {
+    return this.getAttribute(ApiText.attr.url) || '';
+  }
+
+  async connectedCallback() {
+    if (this.shadowRoot) return;
+    const data = { ...(await this.data) };
+    let shadowroot = this.attachShadow({ mode: 'open' })
+    let slot = document.createElement('slot')
+    shadowroot.appendChild(slot)
+
+    const loading = this.querySelector('.loading')
+    const content = this.querySelector('.content')
+    const value = data['content']
+
+    if (!value) {
+      loading.style.display = 'none'
+      content.style.display = 'none'
+    }
+
+    if (value) {
+      loading.style.opacity = '0'
+      loading.style.display = 'none'
+      content.style.opacity = '1'
+      content.innerHTML = value
+    }
+  }
+
+  get data() {
+    return fetch(this.url, { type: 'json' }).then((data) => data.json()).catch((e) => {})
+  }
+}
+
+ApiText.register();

package.json

@@ -1,14 +1,11 @@
 {
-  "name": "@daviddarnes/component-name",
+  "name": "@cdransf/api-text",
   "version": "1.0.0",
-  "description": "A Web Component for…",
-  "main": "component-name.js",
-  "scripts": {
-    "start": "npx http-server ."
-  },
+  "description": "A web component to load text from an API and display it.",
+  "main": "api-text.js",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/daviddarnes/component-name.git"
+    "url": "git+https://github.com/cdransf/api-text.git"
   },
   "keywords": [
     "web",
@@ -22,12 +19,12 @@
     "access": "public"
   },
   "bugs": {
-    "url": "https://github.com/daviddarnes/component-name/issues"
+    "url": "https://github.com/cdransf/api-text/issues"
   },
   "author": {
-    "name": "David Darnes",
-    "email": "me@daviddarnes.com",
-    "url": "https://darn.es/"
+    "name": "Cory Dransfeldt",
+    "email": "coryd@hey.com",
+    "url": "https://coryd.dev"
   },
-  "homepage": "https://github.com/daviddarnes/component-name#readme"
+  "homepage": "https://github.com/cdransf/api-text#readme"
 }