diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..f41f833 --- /dev/null +++ b/Readme.md @@ -0,0 +1,20 @@ +# LDO Monorepo + +This is a monorepo that conains all libraries associated with Linked Data Objects (LDO). + +## Tutorial +[A tutorial for how to use LDO](./documentation/solid-react-tutorial.md) is available here. + +## Libraries +The LDO monorepo contains the following + - [@ldobjects/cli](./packages/cli/) + - [@ldobjects/dataset](./packages/dataset/) + - [@ldobjects/jsonld-dataset-proxy](./packages/jsonld-dataset-proxy/) + - [@ldobjects/ldo](./packages/ldo/) + - [@ldobjects/rdf-utils](./packages/rdf-utils/) + - [@ldobjects/schema-converter-shex](./packages/schema-converter-shex/) + - [@ldobjects/solid](./packages/solid/) + - [@ldobjects/solid-react](./packages/solid-react/) + - [@ldobjects/subscribable-dataset](./packages/subscribable-dataset/) + - [@ldobjects/traverser-shexj](./packages/traverser-shexj/) + - [@ldobjects/type-traverser](./packages/type-traverser/) \ No newline at end of file diff --git a/documentation/solid-react-tutorial.md b/documentation/solid-react-tutorial.md index 476e2cb..f247846 100644 --- a/documentation/solid-react-tutorial.md +++ b/documentation/solid-react-tutorial.md @@ -727,4 +727,61 @@ When all is saved, the data on the Pod should look something like this: ``` ## 11. Displaying the Post -Finally, let's bring it all together and modify **Post.tsx** to display the uploaded data. \ No newline at end of file +Finally, let's bring it all together and modify **Post.tsx** to display the uploaded data. + +**Post.tsx** +```tsx +import { FunctionComponent, useCallback, useMemo } from "react"; +import { ContainerUri, LeafUri } from "@ldobjects/solid"; +import { useLdo, useResource, useSubject } from "@ldobjects/solid-react"; +import { PostShShapeType } from "./.ldo/post.shapeTypes"; + +export const Post: FunctionComponent<{ postUri: ContainerUri }> = ({ + postUri, +}) => { + const postIndexUri = `${postUri}index.ttl`; + const postResource = useResource(postIndexUri); + const post = useSubject(PostShShapeType, postIndexUri); + const { getResource } = useLdo(); + const imageResource = useResource( + post?.image?.["@id"] as LeafUri | undefined + ); + + // Convert the blob into a URL to be used in the img tag + const blobUrl = useMemo(() => { + if (imageResource && imageResource.isBinary()) { + return URL.createObjectURL(imageResource.getBlob()!); + } + return undefined; + }, [imageResource]); + + const deletePost = useCallback(async () => { + const postContainer = getResource(postUri); + await postContainer.delete(); + }, [postUri, getResource]); + + if (postResource.status.isError) { + return
postResource.status.message
; + } + + return ( +{post.articleBody}
+ {blobUrl && ( +{post.articleBody}
`. + +Notice that we can get the URL for the image with `post.image["@id"]`, but we're not using that directly in the img tag (eg `