feat: fixed centering of docs, fixed images in docs, added new docs from mddbook

docs/intro.md

@@ -54,21 +54,21 @@ In this setup, the `Notary` cryptographically signs commitments to the data and
 
 TLSNotary can be used for various purposes. For example, you can use TLSNotary to prove that:
 
-You have access to an account on a web platform
+- You have access to an account on a web platform
 
-A website showed specific content on a certain date
+- A website showed specific content on a certain date
 
-You have private information about yourself (address, birth date, health, etc.)
+- You have private information about yourself (address, birth date, health, etc.)
 
-You have received a money transfer using your online banking account without revealing your login credentials or sensitive financial information
+- You have received a money transfer using your online banking account without revealing your login credentials or sensitive financial information
 
-You received a private message from someone
+- You received a private message from someone
 
-You purchased an item online
+- You purchased an item online
 
-You were blocked from using an app
+- You were blocked from using an app
 
-You earned professional certificates
+- You earned professional certificates
 
 While TLSNotary can notarize publicly available data, it does not solve the "[oracle problem](https://ethereum.org/en/developers/docs/oracles/)". For this use case, existing oracle solutions are more suitable.
 

docs/quick_start/browser_extension.md

@@ -12,22 +12,22 @@ Optionaly you can [install](#install) and configure a local [websocket proxy](#p
 
 The easiest way to install the TLSN browser extension is to use **[Chrome Web Store](https://chromewebstore.google.com/detail/gcfkkledipjbgdbimfpijgbkhajiaaph)**.
 
-![](images/chromewebstore.png)
+![Chrome Web Store](./images/chromewebstore.png)
 
 Alternatively, you can install it manually:
 1. Download the browser extension from https://github.com/tlsnotary/tlsn-extension/releases/download/0.1.0.1000/tlsn-extension-0.1.0.1000.zip
-2. Unzip  
+2. Unzip
    ⚠️ This is a flat zip file, so be careful if you unzip from the command line, this zip file contains many file at the top level
 3. Open **Manage Extensions**: chrome://extensions/
 4. Enable `Developer mode`
 5. Click the **Load unpacked** button
 6. Select the unzipped folder
 
-![](images/extension_install.png)
+![Extension installation](./images/extension_install.png)
 
 (Optional:) Pin the extension, so that it is easier to find in the next steps:
 
-![](images/extension_pin.png)
+![Pin the extension](./images/extension_pin.png)
 
 ## Websocket Proxy {#proxy}
 
@@ -38,7 +38,7 @@ To use the TLSnotary hosted proxy:
    2. Click **Options**
    3. Enter `wss://notary.pse.dev/proxy` as **proxy API**
    4. Click **Save**
-   
+
 > ⚠️ **Note:** The TLSNotary hosted proxy only supports a predefined set of domains. You can view the full list of supported domains in the [websockify configuration file](https://github.com/privacy-scaling-explorations/tlsn-infra/blob/main/docker/websockify/websockify_config).
 
 To run your own websocket proxy **locally**, run:
@@ -56,7 +56,7 @@ Next use  `ws://localhost:55688` as **proxy API** in Step 3 above.
 
 ## Notary Server {#notary-server}
 
-To create a TLSNotary proof, the browser extension needs a TLSNotary notary server. In a real world scenario, this server should be run by a neutral party, or by the verifier of the proofs. In this quick start, you can either run the server yourself or use the test server from the TLSNotary team. Notarizing TLS with Multi Party Computation involves a lot of communication between the extension and notary server, so running a local server is the fastest option. 
+To create a TLSNotary proof, the browser extension needs a TLSNotary notary server. In a real world scenario, this server should be run by a neutral party, or by the verifier of the proofs. In this quick start, you can either run the server yourself or use the test server from the TLSNotary team. Notarizing TLS with Multi Party Computation involves a lot of communication between the extension and notary server, so running a local server is the fastest option.
 
 To use the TLSNotary team notary server:
 1. Open the extension
@@ -72,7 +72,7 @@ If you plan to run a local notary server:
 4. Click **Save**
 5. Run a local notary server (see [below](#local-notary))
 
-<img width="478"  src="images/extension_proxy.png" />
+![Extension Notary and Proxy settings](./images/extension_proxy.png)
 
 ### Run a Local Notary Server {#local-notary}
 
@@ -89,24 +89,35 @@ If you plan to run a local notary server:
 The notary server will now be running in the background waiting for connections.
 
 ## Notarize Twitter Account Access {#notarize}
+   Note: If you use the hosted notary server, notarization will take multiple seconds. You can track progress by opening the *offscreen console*:
+   * Open: `chrome://extensions` ▸ **TLSN Extension** ▸ **Details** ▸ **offscreen.html**
 
-1. Open the extension, you should see the Twitter plugin:  
-   <img width="477" src="images/extension_plugins.png" />
-2. Click the Twitter Plugin
-3. The TLSNotary Extension sidebar should open and the browser will automatically navigate to Twitter
-4. If you  haven't already, log in
-5. The sidebar should automatically proceeds through the steps
+   Using the TLSNotary Plugin Demo:
+   1. Goto [TLSNotary Plugin Demo](https://demo.tlsnotary.org)
+   2. Run the Twitter Plugin
+   3. When finished you can view the attestation and transcript of the notarization at the bottom of the page or in the extension.
 
-Tip: If you use the hosted notary server, notarization will take multiple seconds. You can track progress by opening the *offscreen console*:
-* Open: chrome://extensions ▸ **TLSN Extension** ▸ **Details** ▸ **offscreen.html**
+
+   Using the Browser console:
+   1. Open Chrome/Brave
+   2. Open the developer console (Right Click -> Inspect or F12)
+   3. Copy/Paste the code below:
+   ```javascript
+   const client = await tlsn.connect();
+
+   await client.runPlugin(
+        'https://github.com/tlsnotary/tlsn-extension/raw/main/src/assets/plugins/twitter_profile.wasm'
+      );
+   ```
+   4. Run the plugin from the pop up window
+   5. This will navigate to [x.com](https://x.com), open the sidepanel, and begin notarization
 
 ## Verify
 
-When the notarization is ready, you can click the **View** button. If you closed the sidebar, you can find the proof by clicking the extension button and selecting the notarization request in the **History** tab.  
-  <img width="477" src="./images/extension_history_new.png" />
-  ![](./images/extension_history_new.png)
+   When the notarization is ready, you can click the **View** button. If you closed the sidebar, you can find the proof by clicking the extension button and clicking the "Notarize Request" that was just completed.
 
+![Extension History](./images/extension_history_new.png)
 
 ## Write your own Extension Plugins
 
-The TLSNotary Browser extension allows you to add custom plugins for more data sources. The repository at https://github.com/tlsnotary/tlsn-plugin-boilerplate shows how the Twitter plugin (see above) is built. The `examples` folder contains more examples.
+The TLSNotary Browser extension allows you to add custom plugins for more data sources. The repository at [tlsn-plugin-boilerplate](https://github.com/tlsnotary/tlsn-plugin-boilerplate) shows how the Twitter plugin (see above) is built. The `examples` folder contains more examples.

src/pages/index.module.css

@@ -85,7 +85,7 @@
   width: auto;
 }
 
-:global(.markdown) {
+.introduction :global(.markdown) {
   font-size: 1.1rem;
   line-height: 1.7;
   text-align: center;
@@ -93,20 +93,20 @@
   margin: 0 auto;
 }
 
-:global(.markdown table) {
-  margin-left: auto;
-  margin-right: auto;
-  display: table;
-}
-
-:global(.markdown p) {
+.introduction :global(.markdown p) {
   text-align: center;
 }
 
-:global(.markdown strong) {
+.introduction :global(.markdown strong) {
   color: #243F5F;
 }
 
+.introduction :global(.markdown table) {
+  margin-left: auto;
+  margin-right: auto;
+  display: table;
+}
+
 section + section {
   margin-top: 2rem;
 }
@@ -141,3 +141,9 @@ img {
     padding: 1rem;
   }
 }
+
+/* Remove global markdown styling */
+:global(.markdown) {
+  font-size: 1.1rem;
+  line-height: 1.7;
+}