From 2abfc918c3b458e324ded45a3b1eecf0bd23b13c Mon Sep 17 00:00:00 2001
From: jaxoncreed <jaxoncreed@gmail.com>
Date: Tue, 26 Sep 2023 17:47:28 -0400
Subject: [PATCH] Completed Documentation

---
 Readme.md                             | 20 +++++++++
 documentation/solid-react-tutorial.md | 59 ++++++++++++++++++++++++++-
 2 files changed, 78 insertions(+), 1 deletion(-)
 create mode 100644 Readme.md

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 <p>postResource.status.message</p>;
+  }
+
+  return (
+    <div>
+      <p>{post.articleBody}</p>
+      {blobUrl && (
+        <img src={blobUrl} alt={post.articleBody} style={{ height: 300 }} />
+      )}
+      <button onClick={deletePost}>Delete Post</button>
+    </div>
+  );
+};
+```
+
+Here, we've employed a few concepts that we're already familiar with as well as a few new tricks. Of course, we're using "useResource" and "useSubject" to get data about the Post. Then we can render that information by treating it just like JSON. For example `<p>{post.articleBody}</p>`.
+
+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 `<img src={post.image["@id"]} />`). Why? Many resources on a Solid Pod (these included) are not open to the public. If we put the image URL directly in the the img tag, the request to get that image would be unauthorized. Instead, we perform an authenticated fetch on the image the same way we do with anything else: using `useResource`. Once we have the resource, we can convert the resource to a blob url with `URL.createObjectURL(imageResource.getBlob())`.
+
+We've also added a delete button. Deleting containers and resources is just as simple as running `resource.delete()`.
+
+## Conclusion
+
+And with that, you have a fully functional Solid application. LDO's React/Solid integration keeps track of state and makes sure everything is run efficiently so you can focus on developing your application.
\ No newline at end of file