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,7 +12,7 @@ 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
@@ -23,11 +23,11 @@ Alternatively, you can install it manually:
 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}
 
@@ -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;
+}