Test one Startin'blox component on CSS DFC server

balessan commented 1 year ago

To give us a better idea of the gap between the two implementations for the next steps, it would be good to test a Startin'blox component on a DFC compliant CSS.

[x] Host a single resource on CSS using the DFC ontology
[ ] Host a container resource on CSS using the DFC ontology
[ ] Try to display values from DFC taxonomies
[x] Try to display resources with authentication

lecoqlibre commented 1 year ago

We tried the solid-display component.

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8"/>
      <title>SiB - DFC</title>
      <script type="module" src="https://cdn.skypack.dev/@startinblox/core@0.17.31"></script>
      <script data-default-context id="alpha" type="application/ld+json">
        {
          "dfc-b":"http://static.datafoodconsortium.org/ontologies/DFC_BusinessOntology.owl#",
          "dfc-f": "http://static.datafoodconsortium.org/data/facets.json#"
        }
      </script>

  </head>
  <body>
    <h1>SiB - DFC</h1>
    <div id="form-loader">
        Loading&#8230;
    </div>
    <solid-display 
        data-src="http://localhost:3000/carrot.jsonld" 
        fields="@id, @type, dfc-b:description, dfc-b:related.dfc-b:description"
        extra-context="alpha" 
        loader-id="form-loader"
        default-widget="p"
    />
  </body>
</html>

Carrot.jsonld:

{
  "@context": {
    "dfc-b": "http://static.datafoodconsortium.org/ontologies/DFC_BusinessOntology.owl#",
    "dfc-pt": "http://static.datafoodconsortium.org/data/productTypes.rdf#",
    "dfc-f": "http://static.datafoodconsortium.org/data/facets.rdf#"
  },
  "@id": "http://localhost:3000/carrot.jsonld",
  "@type": "dfc-b:SuppliedProduct",
  "dfc-b:description": "Carrot",
  "dfc-b:related": {
    "@id": "http://localhost:3000/tomato.jsonld"
  },
  "dfc-b:hasCertification": {
    "@id": "dfc-f:Organic-AB"
  },
  "dfc-b:hasType": {
    "@id": "dfc-pt:carrot"
  }
}

Tomato.jsonld:

{
  "@context": {
    "dfc-b": "http://static.datafoodconsortium.org/ontologies/DFC_BusinessOntology.owl#",
    "dfc-pt": "http://static.datafoodconsortium.org/data/productTypes.rdf#",
    "dfc-f": "http://static.datafoodconsortium.org/data/facets.rdf#"
  },
  "@id": "http://localhost:3000/tomato.jsonld",
  "@type": "dfc-b:SuppliedProduct",
  "dfc-b:description": "Tomate",
  "dfc-b:hasCertification": {
    "@id": "dfc-f:Organic-AB"
  },
  "dfc-b:hasType": {
    "@id": "dfc-pt:tomato"
  }
}

Problems found:

The component does not ask for content negotiation. The accept header accepts everything */*. It should ask for application/ld+json. The content-type header should also be removed from GET requests.
We have to provide an extra context, but the component should be able to use the context from the resource itself.

lecoqlibre commented 1 year ago

Try with this https://git.startinblox.com/framework/sib-core/-/merge_requests/677

It works!

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8"/>
      <title>SiB - DFC</title>
      <script type="module" src="../dist/index.js"></script>
  </head>
  <body>
    <h1>SiB - DFC</h1>
    <div id="form-loader">
        Loading&#8230;
    </div>
    <solid-display 
        data-src="https://lecoqlibre.solidcommunity.net/datafoodconsortium/products/carrot.ttl" 
        fields="@id, @type, dfc-b:description"
        loader-id="form-loader"
        default-widget="p" 
        widget-dfc-b:description="h1"
    />
  </body>
</html>

lecoqlibre commented 1 year ago

Authentication works!

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8"/>
      <title>SiB - DFC</title>
      <script type="module" src="../dist/index.js"></script>
      <script type="module" src="https://cdn.skypack.dev/@startinblox/oidc@beta/dist/index.js"></script>
  </head>
  <body>
    <h1>SiB - DFC</h1>

    <div id="form-loader">
        Loading&#8230;
    </div>

    <button id="login">Login</button>

    <script>
      // wherever you want in your project
      document.querySelector('#login').addEventListener('click', () => {
          document.querySelector('sib-auth').login()
      });
  </script>

    <sib-auth>
      <sib-auth-provider
        data-authority="https://solidcommunity.net/"
        data-id="sib"
        data-client-name="Test SIB"
      ></sib-auth-provider>
    </sib-auth>

    <solid-display 
        data-src="https://lecoqlibre.solidcommunity.net/datafoodconsortium/products/private/carrot.ttl" 
        fields="@id, @type, dfc-b:description"
        loader-id="form-loader"
        default-widget="p" 
        widget-dfc-b:description="h1"
    />
  </body>
</html>

Wimmics / solid-start

Test one Startin'blox component on CSS DFC server #9