Skip to content

Images.stories.mdx

Latest commit

 

History

History
139 lines (107 loc) · 3.81 KB

Images.stories.mdx

File metadata and controls

139 lines (107 loc) · 3.81 KB
Raw

import * as UI from '../../src/index'

import { Canvas, Meta, Story } from "@storybook/addon-docs"; import { rawJsonDecorator } from "./decorators";

export const imageDecorator = (Story) => { const result = Story(); return <div>Returns:</div> <pre>${result}</pre> <p>Preview:</p> <img src="proxy.php?url=https%3A%2F%2Fgithub.com%2FJavaScriptSolidServer%2Fsolid-ui%2Fblob%2FesmFix%2Fsrc%2Fstories%2F%24%7Bresult%7D" width="80" />; };

findImage

Find something we have as explicit image data for the thing

API docs

for foaf:Agent

{UI.widgets.findImage(UI.ns.foaf("Agent"))}

for rdf:Resource

{UI.widgets.findImage(UI.ns.rdf("Resource"))}

with vcard:hasPhoto

{() => { const person = $rdf.namedNode("https://person.example/1#me"); const photo = $rdf.namedNode("https://michielbdejong.com/img/me.jpg"); SolidLogic.store.add(person, UI.ns.vcard("hasPhoto"), photo); return UI.widgets.findImage(person); }}

with foaf:img

{() => { const person = $rdf.namedNode("https://person.example/2#me"); const photo = $rdf.namedNode("https://michielbdejong.com/img/me.jpg"); SolidLogic.store.add(person, UI.ns.foaf("img"), photo); return UI.widgets.findImage(person); }}

findImageFromURI

Find an image for this thing as a class

API docs

without favicon

{UI.widgets.findImageFromURI($rdf.namedNode("https://example.com/"))}

favicon

{UI.widgets.findImageFromURI($rdf.namedNode("https://solidproject.org/some/file.html"))}

Message-ID (mid:)

{UI.widgets.findImageFromURI($rdf.namedNode("mid:example"))}

E-Mail (mailto:)

{UI.widgets.findImageFromURI($rdf.namedNode("mailto:user@mail.example"))}

imagesOf

Set of suitable images

API docs

{() => { const store = $rdf.graph(); const thing = $rdf.namedNode("http://thing.example/resource#it"); const avatar = $rdf.namedNode("https://pod.example/image1.png"); const image = $rdf.namedNode("https://pod.example/image2.jpg"); store.add(thing, UI.ns.sioc("avatar"), avatar); store.add(thing, UI.ns.foaf("img"), image); return UI.widgets.imagesOf(thing, store); }}

setImage

API docs

{() => { const myTrip = $rdf.namedNode("http://example.com/#trip"); $rdf.graph().add(myTrip, UI.ns.rdf("type"), UI.ns.trip("Trip")); const img = document.createElement("img"); img.setAttribute("style", "height:50px;width:50px;"); UI.widgets.setImage(img, myTrip); return img; }}