Fetch linked resource.

[thhck]

Hello,

I'm building a little <pos-webid> component based on PodOS.

Its really cool to use <pos-image> <pos-label> and <pos-description> to display relevant info without digging into verbose RDF predicate !

However, crafting the"Contact me" button is not as trivial. The goal of the button is to mailto: the email address present in the webId.

I'm using the following:

    <pos-app>
      <pos-resource uri="https://timbl.solidcommunity.net/profile/card#me">
        <pos-webid></pos-webid>
      </pos-resource>
    </pos-app>

And looking at https://timbl.solidcommunity.net/profile/card we have:

[...]
<#me> 
    [...]
    vcard:hasEmail <#id1532484491415>;
[...]
<#id1532484491415> a vcard:Work;
    vcard:value <mailto:cos@timbl.com>.
[...]

The issue is that the email value is a link to another thing, and not stored as a string.

Is there a way with PodOS to retrieve this email link, or is it out of scope of PodOS ?

Also, what if the email was stored on another webid url, like:

<#me> 
    [...]
    vcard:hasEmail <http://another-url.com/timbl/card#id1532484491415>;

[angelo-v]

Hi @thhck , very cool that you are building your own components based on PodOS and I am glad that the existing elements help you in your endeavors.

Indeed refering linked resources without explicitly stating their URI is not yet possible but an important feature that should be added to PodOS.

It could be another way to use pos-resource, by e.g. nesting a pos-resource within another one and instead of a URI give the predicate that links from the parent resource to the resource in question.

Perhaps something like:

<pos-resource uri="...">
  <pos-resource property="vcard:email">
    <pos-value/>
...

[jg10-mastodon-social]

Based on my experience, I would offer two possible solutions:

Live page at https://jg10.solidcommunity.net/public/2025-04-11.html

Option 1:

If you're writing this as a custom component, then you are anyway using JavaScript, so it would make sense to use PodOS core functions (or rdflib.js functions, where necessary).

1. Receive a resource object from pos-resource by emitting the event pod-os:resource with a callback,
2. access the predicate using the rdflib.js methods (because PodOS core doesn't offer convenience functions for this yet)

I would also use the PodOS core function for label, picture and description in this case because it'll reduce the dom overhead.

      class EmailLink extends HTMLElement {
        connectedCallback() {
          let ev = new CustomEvent("pod-os:resource", {
            bubbles: true,
            composed: true,
            cancelable: true,
            detail: this.receiveResource.bind(this),
          });
          this.dispatchEvent(ev);
        }
        receiveResource(resource) {
          let kb = resource.store;
          let emailObject = kb.any(
            kb.sym(resource.uri),
            kb.sym("http://www.w3.org/2006/vcard/ns#hasEmail"),
          );
          let email = kb.any(
            emailObject,
            kb.sym("http://www.w3.org/2006/vcard/ns#value"),
          );
          this.innerText =
            resource.label() + " " + resource.description() + email.value;
        }
      }
      customElements.define("email-link", EmailLink);

I have occasionally run into race conditions with pos-resource not being ready to provide resource, but haven't identified an authoritative solution.

Option 2

I have implemented an experimental component that does what Angelo describes, and also resolves prefixes. If you're comfortable with things that break and are not user friendly, try:

    <script src="https://king-cello.bnr.la/scripts/ReceiveResourceOS.js"></script>
    <script src="https://king-cello.bnr.la/scripts/PropertyGetter.js"></script>
    <script src="https://king-cello.bnr.la/scripts/Property.js"></script>
    <script>
      customElements.define("my-property", Property);
    </script>
     <pos-app prefix="vcard: http://www.w3.org/2006/vcard/ns#">
      <pos-resource uri="https://timbl.solidcommunity.net/profile/card#me">
        <pos-picture></pos-picture>
        <pos-label></pos-label>
        <pos-description></pos-description>
        <my-property property="vcard:hasEmail">
          <pos-value
            predicate="http://www.w3.org/2006/vcard/ns#value"
          ></pos-value>
        </my-property>
      </pos-resource>
    </pos-app>

This is my preferred solution because the developer doesn't even need to touch JS. The webid "component" can also be reused by loading a HTML fragment using https://htmx.org/ like functionality. It'll make even more sense when PodOS supports this kind of thing natively.

Edit: Opened new issue accordingly: #89