add diagram image

tlsnotary · Apr 12, 2024 · 0066c55 · 0066c55
1 parent 5fa3bb9
commit 0066c55
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/components/AppMarkdown.tsx b/components/AppMarkdown.tsx
@@ -11,6 +11,11 @@ const createMarkdownElement = (tag: keyof JSX.IntrinsicElements, props: any) =>
 
 // Styling for HTML attributes for markdown component
 const REACT_MARKDOWN_CONFIG: Components = {
+  img: ({ node, ...props }) =>
+    createMarkdownElement("img", {
+      className: "py-10 w-full",
+      ...props,
+    }),
   a: ({ node, ...props }) =>
     createMarkdownElement("a", {
       className: "text-orange",

diff --git a/content/about.tsx b/content/about.tsx
@@ -13,8 +13,10 @@ export const ABOUT_CONTENT = {
   },
   HOW_IT_WORKS: {
     TITLE: "How it works",
-    DESCRIPTION:
-      "TLSNotary is a protocol which allows people to export data from any web application and prove facts about it to a third-party in a privacy-preserving way by leveraging secure multi-party computation (MPC) to authenticate data communicated between a Prover and a TLS-enabled web server.",
+    DESCRIPTION: `TLSNotary is a protocol which allows people to export data from any web application and prove facts about it to a third-party in a privacy-preserving way by leveraging secure multi-party computation (MPC) to authenticate data communicated between a Prover and a TLS-enabled web server.
+        <img src="/images/ts-notaly-diagram.svg" />
+      `,
+
     STEPS: [
       {
         TITLE: "Step 1: Multiparty TLS Request",

diff --git a/public/images/ts-notaly-diagram.svg b/public/images/ts-notaly-diagram.svg