fix toc and markdown position

src/components/TableOfContents.astro

@@ -2,24 +2,64 @@
 // TableOfContents.astro
 import TableOfContentsHeading from "./TableOfContentsHeading.astro";
 import TocItem from '../utils/generateToc.ts';
-const { headings } = Astro.props;
+const { headings, edit } = Astro.props;
+import { REPOSITORY, edit_page } from "../config";
 
 const toc = headings && headings.length ? TocItem(headings) : [];
 
-console.log(toc);
+console.log(edit);
 
 ---
 
-<nav class="toc">
-    <h2 id="on-this-page">On this page</h2>
-    <ul>
-        {toc.map((heading) => <TableOfContentsHeading heading={heading}/>)}
-    </ul>
-</nav>
-<style>
+<section class="toc">
+    <div class="container">
+        <summary><p id="on-this-page">On this page</p></summary>
+        <nav>
+            <ul>
+                {toc.map((heading) => <TableOfContentsHeading heading={heading}/>)}
+            </ul>
+        </nav>
+    </div>
+</section>
+<style is:inline>
+    .toc {
+        position: fixed;
+        width: var(--sidebar-width);
+        height: 100vh;
+        overflow-y: auto;
+        inset-block: 0;
+        inset-inline-end: 0;
+        padding-top: var(--nav-height);
+        background-color: var(--secondary-background);
+        transition: 0.3s;
+        z-index: 10;
+    }
+
+    .toc .container {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem 1rem 0;
+    }
+
+    .toc .container summary {
+        font-weight: bold;
+    }
+
+    .toc .container nav {
+    }
+    
     .toc ul {
         list-style: none;
         padding-inline-start: 0;
-        border-left: 1px solid var(--secondary-background);
+    }
+    
+    .toc .container nav > ul {
+        margin: 0.5rem;
+        border-left: 1px solid var(--background);
+    }
+
+    .toc ul li:hover {
+        font-size: 0.785rem;
+        /* border-left: 1px solid var(--header-text); */
     }
 </style>

src/components/TableOfContentsHeading.astro

@@ -22,7 +22,7 @@ const { heading } = Astro.props;
         display: inline-block;
         font-size: 0.875rem;
         width: 100%;
-        /* margin-left: 0.3rem; */
+        margin-left: 0.3rem;
         padding: 0.5em 0.5rem;
         border-radius: 0.25em;
     }
@@ -39,7 +39,7 @@ const { heading } = Astro.props;
     }
 
   li ul {
-    list-style: none;
+    /* list-style: none; */
     padding-inline-start: 1rem;
     /* border-left: 1px solid var(--secondary-background); */
   }

src/config.js

@@ -1,4 +1,6 @@
 export const AWESOME_LBRY = "https://github.com/LBRYFoundation/Awesome-LBRY";
+export const EDIT_PAGE = "Edit this page";
+export const REPOSITORY = "LBRYFoundation/lbry-tech";
 
 export const features = [
     {

src/content/resources/claim-signing.mdx

@@ -4,7 +4,7 @@ description: How does signing a claim (a publish) work in LBRY-land? This page e
 ---
 
 Reilly wants to publish _Terror on the Midway_ to the channel he claimed `lbry://@FleischerSuperman`. He picks the name "terroronthemidway", and fills in the information for the claim:
-
+```json
     {
         "claimType": "streamType",
         "stream": {
@@ -30,6 +30,7 @@ Reilly wants to publish _Terror on the Midway_ to the channel he claimed `lbry:/
         },
         "version": "_0_0_1"
     }
+```
 
 This is serialized as:
 
@@ -47,10 +48,10 @@ He starts by generating an address for the new name claim:
 
 His claim for the certificate at the uri `lbry://@FleischerSuperman` has a `claim_id` of
 
-    2996b9a087c18456402b57cba6085b2a8fcc136d
+    `2996b9a087c18456402b57cba6085b2a8fcc136d`
 
 It contains a der-encoded SECP256k1 public key
-
+```json
     {
         "certificate": {
             "keyType": "SECP256k1",
@@ -58,6 +59,7 @@ It contains a der-encoded SECP256k1 public key
                           c59363aa5d77ff2b7ff06cddc07116b335a4a0849b1b524a4a69d908d69f1bcebb",
             "version": "_0_0_1"
     }
+```
 
 ### Signing the claim in detail
 
@@ -74,14 +76,14 @@ Reilly decodes and combines the claim address, the serialized claim value, and t
 
 Then he takes the SHA256 of the combined string, giving:
 
-    dea44974ace1893f304cae4073af06a7a6cbb209f97cf8ad5f322216f044304e
+    `dea44974ace1893f304cae4073af06a7a6cbb209f97cf8ad5f322216f044304e`
 
 He signs (RFC 6979) this hash using the private key to the previously shown certificate, giving the signature:
 
-    bf82d53143155bb0cac1fd3d917c000322244b5ad17e7865124db2ed33812ea66c9b0c3f390a65a9e2d452e315e91ae695642847d88e90348ef3c1fa283a36a8
+    `bf82d53143155bb0cac1fd3d917c000322244b5ad17e7865124db2ed33812ea66c9b0c3f390a65a9e2d452e315e91ae695642847d88e90348ef3c1fa283a36a8`
 
 Now he add this signature to the claim:
-
+```json
     {
         "claimType": "streamType",
         "publisherSignature": {
@@ -113,6 +115,7 @@ Now he add this signature to the claim:
         },
         "version": "_0_0_1"
     }
+```
 
 Serialized, the signed claim is represented as:
 

src/content/resources/download-overview-new.mdx

@@ -63,7 +63,7 @@ Use the blob exchange protocol to request the manifest blob from the hosts found
 
 The manifest is JSON-formatted text. It contains a dictionary with the following structure:
 
-```
+```json
 {
   "blobs": [
     {

src/content/resources/encrypt-lbrycrd.mdx

@@ -7,8 +7,8 @@ description: Learn how to use encryption with lbrycrd, the full blockchain softw
 
 You can use `lbrycrd-cli encryptwallet <passphrase>` to encrypt your wallet.
 
-You can use `lbrycrd-cli walletpassphrase <passphrase> <timeout>` to temporarily unlock the wallet. The <timeout> parameter is in seconds.
+You can use `lbrycrd-cli walletpassphrase <passphrase> <timeout>` to temporarily unlock the wallet. The `<timeout>` parameter is in seconds.
 
 For example, `lbrycrd-cli walletpassphrase 'open sesame 321' 300` would unlock your wallet for five minutes, assuming your passphrase was `open sesame 321`. (In reality, you should choose a harder-to-guess passphrase than that.)
 
-If you set <timeout> too low, it might expire before you get done using your wallet. If you set it too high, you might forget that you left your wallet unlocked.
+If you set `<timeout>` too low, it might expire before you get done using your wallet. If you set it too high, you might forget that you left your wallet unlocked.

src/content/resources/p2p-seeding.mdx

@@ -1,6 +1,6 @@
 ---
 title: "LBRY P2P: Settings and troubleshooting"
-description: Guide on properly setting up P2P nodes and how to diagnose/fix common issues.
+description: "Guide on properly setting up P2P nodes and how to diagnose/fix common issues."
 ---
 
 # LBRY P2P: Settings and troubleshooting
@@ -21,8 +21,8 @@ There are some websites providing generic ways to check ports, like:
 - https://portchecker.co/check
 
 However, checking the port does not check if LBRY P2P protocol is working behind it. For a better check, we can use a tool hosted by Madiator, a community member.
-- To test for UDP (DHT): http://test.madiator.com:60666/dht/<your `udp_port`>
-- To test for TCP (P2P): http://test.madiator.com:60666/p2p/<your `tcp_port`>
+- To test for UDP (DHT): `http://test.madiator.com:60666/dht/<your udp_port>`
+- To test for TCP (P2P): `http://test.madiator.com:60666/p2p/<your tcp_port>`
 
 As a last resource to test a remote machine DHT service, from a local SDK try:
 ```bash

src/content/resources/time-locked-transactions.mdx

@@ -8,13 +8,13 @@ This guide will walk you through the process of claiming a time locked transacti
 
 If you already have `lbrynet` installed then you can check your version like this:
 
-```
+```bash
 lbrynet version
 ```
 
 If above command fails, you may need to start `lbrynet` first (and then try above again):
 
-```
+```bash
 lbrynet start
 ```
 
@@ -39,7 +39,7 @@ If you do not have `lbrynet` installed or your version is less than `v0.108.0` t
 1. On the USB key, find a file named `key.zip` and unzip this file using the password emailed to you previously.
 1. You should now have a file named `key.txt` which is base64 encoded and contains your `private key` and `redeem script`.
 1. To decode the contents of the file you can use a website such as [base64decode.org](https://www.base64decode.org/) (not a secure option) or if you have Python installed you can do this on the command line:
-  ```
+  ```bash
   python -m base64 -d /path/to/key.txt
   ```
 1. After decoding you will see a key/value mapping of various items, including `privateKey` and `redeemScript`. Take note of these values.
@@ -48,7 +48,7 @@ If you do not have `lbrynet` installed or your version is less than `v0.108.0` t
 
 Now that you have gathered the necessary information it is easy to redeem your LBC. Time locked transaction can be redeemed using the `lbrynet account deposit` command (fill in the values you gathered previously):
 
-```
+```bash
 lbrynet account deposit <transaction id> <nout> <redeemScript> <privateKey>
 ```
 

src/content/resources/wallet-server.mdx

@@ -19,7 +19,7 @@ Make sure your firewall has ports 9246 and 50001 open. 9246 is the port lbrycrd
 Download the [latest release of lbrycrd](https://github.com/lbryio/lbrycrd/releases/latest).
 
 Then, create a folder on your home directory called `.lbrycrd` and save the following to `.lbrycrd/lbrycrd.conf`:
-```
+```json
 txindex=1
 server=1
 daemon=1
@@ -36,7 +36,7 @@ You can run lbrycrdd directly using `./lbrycrdd`. However, we recommend creating
 
 Create a file at `/etc/systemd/system/lbrycrdd.service` with the following contents:
 
-```
+```json
 [Unit]
 Description="LBRYcrd daemon"
 After=network.target
@@ -69,7 +69,7 @@ You can watch the lbrycrd log with `tail -f ~/.lbrycrd/debug.log`
 ## Set Up Docker
 
 ### Install Docker & Docker Compose
-```
+```bash
 sudo apt install -y apt-transport-https ca-certificates curl software-properties-common && \
 curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - && \
 sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" && \
@@ -83,7 +83,7 @@ sudo usermod -aG docker $USER
 ### Download our example docker-compose.yml
 
 You can see it [here](https://github.com/lbryio/lbry-sdk/blob/master/docker/docker-compose-wallet-server.yml).
-```
+```bash
 curl -L "https://raw.githubusercontent.com/lbryio/lbry-sdk/master/docker/docker-compose-wallet-server.yml" -o docker-compose.yml
 ```
 
@@ -130,7 +130,7 @@ sudo mv "snapshot_${SNAPSHOT_HEIGHT}" "${HUB_VOLUME_PATH}/_data"
 
 ### Start the servers
 
-```
+```bash
 docker-compose up --detach
 ```
 
@@ -138,13 +138,13 @@ docker-compose up --detach
 
 The first time you start the wallet server, it will take a few minutes to download a recent snapshot of the database and extract it. You can follow the progress with
 
-```
+```bash
 docker-compose logs --follow
 ```
 
 After the wallet server has caught up, it will bind to port 50001 and start responding to requests. You can check if this happened by running
 
-```
+```bash
 sudo netstat -tlpn | grep 50001
 ```
 
@@ -152,7 +152,7 @@ If there is no output, the port is ont bound yet and the server is still catchin
 
 After the wallet server is ready, check that it responds to basic RPC calls:
 
-```
+```bash
 echo '{"id":1,"method":"server.version"}' | timeout 1 curl telnet://localhost:50001
 ```
 
@@ -161,7 +161,7 @@ You should see a response like `{"jsonrpc": "2.0", "result": ["0.46.1", "0.0"],
 
 To check Elastic search, there are two commands you can use:
 
-```
+```bash
 curl localhost:9200 # get Elastic status
 
 curl localhost:9200/claims/_count # check how many claims have been synced to Elastic
@@ -178,7 +178,7 @@ options.
 ### Updating
 
 To update to the latest wallet server release, run the following:
-```
+```bash
 docker pull lbry/wallet-server:latest-release
 docker-compose down
 docker-compose up --detach
@@ -192,7 +192,7 @@ The process is similar to an update, but causes the server to be down for much l
 #### Main database
 Holds the raw blockchain data and takes several days to resync from scratch, so be sure to have a snapshot or try that last.
 
-```
+```bash
 docker pull lbry/wallet-server:latest-release
 docker-compose down
 docker volume rm "$(whoami)_wallet_server"
@@ -202,7 +202,7 @@ WALLET_SERVER_SNAPSHOT_URL= docker-compose up --detach
 #### Elasticsearch
 ES does the indexing of claims from the main database. It should take around 6 hours to resync on a fast machine.
 
-```
+```bash
 docker pull lbry/wallet-server:latest-release
 docker-compose down
 docker volume rm "$(whoami)_es01"

src/content/resources/web-instance.mdx

@@ -10,7 +10,7 @@ Run your own instance of https://lbry.tv using Docker images.
 
 The LBRY SDK provides RPC and streaming endpoints to interact with the LBRY network. Web users will connect to it directly, so it must be web-accessible. You may have to open ports on your firewall.
 
-```
+```bash
 docker run -d -p 5279:5279 -p 5280:5280 vshyba/websdk
 ```
 
@@ -22,14 +22,14 @@ This image will not save files to disk. It has the `save_blobs` and `save_files`
 Clone and install the app as described in the [lbry-desktop repo README](https://github.com/lbryio/lbry-desktop).
 If you want to customize it further, follow the extra steps in `Customize the web app` section. Otherwise:
 
-```
+```bash
 git clone https://github.com/lbryio/lbry-desktop.git
 yarn
 cp .env.defaults .env
 ```
 
 Configure .env with the following settings. They must match the SDK ports in the previous section.
-```
+```json
 WEB_SERVER_PORT=8080
 SDK_API_PATH=http://localhost:5279
 LBRY_WEB_API=http://localhost:5279
@@ -39,7 +39,7 @@ LBRY_WEB_BUFFER_API=https://disabled
 ```
 
 Compile and run
-```
+```bash
 NODE_ENV=production yarn compile:web
 nodejs web/index.js
 ```
@@ -50,12 +50,12 @@ nodejs web/index.js
 If you want to customize the SDK settings, you can 
 
 Clone the SDK repo:
-```
+```bash
 git clone https://github.com/lbryio/lbry-sdk.git
 ```
 
 Create a `docker/webconf.yaml` file and modify as you need. This is a good start:
-```
+```yaml
 allowed_origin: "*"
 max_key_fee: "0.0 USD"
 save_files: false
@@ -71,7 +71,7 @@ Note that it is required to have `streaming_server` and `api` set to user-access
 
 
 To build the image, run:
-```
+```bash
 docker build -f docker/Dockerfile.web -t <your dockerhub username>/<project name, like 'websdk'> .
 docker push <dockerhub username/project name>
 ```

src/layouts/Collections.astro

@@ -5,9 +5,13 @@ import markdown from 'markdown-wasm';
 import { getCollection } from "astro:content";
 import TableOfContents from '../components/TableOfContents.astro';
 
+import { REPOSITORY, EDIT_PAGE } from '../config';
+
 import '../styles/markdown.css';
 
-const { frontmatter, headings, collection } = Astro.props;
+
+
+const { frontmatter, headings, collection, noedit } = Astro.props;
 let { pathname } = Astro.url;
 if (pathname.split('')[pathname.length - 1] === '/') pathname = pathname.substring(0, pathname.length - 1);
 
@@ -21,13 +25,11 @@ const isActive = (href: string)=>{
         pathname.pop();
         pathname = pathname.join('');
     }
-    console.log(pathname);
     
     
     return href === pathname || href === pathname.split('/').slice(0,2).join('/');
 }
 
-
 ---
 
 <Layout title={frontmatter.title}>
@@ -49,12 +51,16 @@ const isActive = (href: string)=>{
         <div class="main">
             <div class="content">
                 <aside class="toc">
-                    <TableOfContents headings={headings} />
+                    <TableOfContents headings={headings} edit={'src/content' + pathname + '.md'} />
                 </aside>
                 <div class="markdown-body">
                     <h1>{frontmatter.title}</h1>
                     <h3><Fragment set:html={description}/></h3>
                     <slot/>
+                    {!noedit && (
+                        <hr>
+                        <a class="edit" href={`https://github.com/${REPOSITORY}/tree/master/src/content${pathname}.mdx`} target="_blank">{EDIT_PAGE}</a>
+                    )}
                 </div>
             </div>
         </div>
@@ -62,7 +68,6 @@ const isActive = (href: string)=>{
     <style>
         .wrapper {
             display: flex;
-            --sidebar-width: 300px;
             /* max-width: 1000px; */
         }
         
@@ -76,6 +81,7 @@ const isActive = (href: string)=>{
             /* padding: 20px; */
             padding-top: var(--nav-height);
             background-color: var(--secondary-background);
+            transition: 0.3s;
         }
 
         .wrapper .sidebar .container {
@@ -124,8 +130,13 @@ const isActive = (href: string)=>{
         }
 
         .wrapper .main {
-            width: 100vw;
+            // width: calc(100vw - var(--sidebar-width));
             padding-inline-start: var(--sidebar-width);
+            padding-inline-end: var(--sidebar-width);
+            transition: 0.3s;
+            overflow-x: hidden;
+            max-width: 1750px;
+            width: calc(100vw);
         }
         
         .wrapper .main .content {
@@ -133,7 +144,8 @@ const isActive = (href: string)=>{
             /* width: fit-content; */
             /* max-width: 100%; */
             order: 1;
-            margin: 20px 0 0 20px;
+            // width: 100%;
+            margin: 1rem;
         }
 
         .wrapper .main aside {
@@ -146,8 +158,8 @@ const isActive = (href: string)=>{
         }
 
         .wrapper .markdown-body {
-            /* margin: 10px 20px; */
-            max-width: 75%;
+            // padding: 10px 20px;
+            width: 100%;
         }
 
         .wrapper .toc {

src/layouts/Markdown.astro

@@ -39,7 +39,7 @@ const description = await markdown.parse(frontmatter.description);
         }
 
         .wrapper .main {
-            width: 100vw;
+            width: calc(100vw - var(--sidebar-width));
         }
 
         .wrapper .main .content {
@@ -47,21 +47,21 @@ const description = await markdown.parse(frontmatter.description);
             /* width: fit-content; */
             /* max-width: 100%; */
             order: 1;
-            margin: 20px 0 0 20px;
+            margin: 1rem;
         }
 
         .wrapper .main aside {
             display: flex;
             align-items: center;
             order: 2;
-            width: fit-content;
-            max-width: 25%;
+            /* max-width: 25%; */
             margin: 0 auto;
         }
 
         .wrapper .markdown-body {
             /* margin: 10px 20px; */
-            max-width: 75%;
+            /* max-width: 75%; */
+            max-width: 100%;
         }
 
         .wrapper .toc {

src/pages/resources.astro

@@ -7,6 +7,6 @@ const frontmatter = {
 }
 ---
 
-<Collections title="Resources" frontmatter={frontmatter} collection="resources">
+<Collections title="Resources" frontmatter={frontmatter} collection="resources" noedit={true}>
     
 </Collections>

src/pages/tutorials.astro

@@ -2,11 +2,12 @@
 import Markdown from '../layouts/Collections.astro';
 
 const frontmatter = {
+    title: "Tutorials",
     description: "Find the LBRY specification, API documentation, our Contributor's guide, and more in the Resources area."
 }
 ---
 
-<Markdown title="Tutorials" frontmatter={frontmatter} collection="tutorials">
+<Markdown title="Tutorials" frontmatter={frontmatter} collection="tutorials" noedit={true}>
     <h2>Setup your Development Environment</h2>
     
     <h3>Desktop Application</h3>
@@ -21,11 +22,3 @@ const frontmatter = {
     <h3>LBRY Blockchain</h3>
     <p><a href="/resources/video-lbrycrd">Video tutorial</a> to setup the <a href="https://github.com/lbryio/lbrycrd">LBRY Blockchain</a> development environment.</p>
 </Markdown>
-
----
-layout: '../layouts/Markdown.astro'
-title: Tutorials
-description: Learn how to setup, use, deploy, and develop with LBRY.
----
-
-

src/styles/global.scss

@@ -7,7 +7,9 @@
     --tertiary-background: #041523;
     --header-text: #FAFAFA;
     --body-text: #DDDDDD;
+
     --nav-height: 75px;
+    --sidebar-width: 300px;
 
     --astro-code-color-text: white;
     --astro-code-color-background: black;
@@ -22,6 +24,12 @@
     --astro-code-token-link: firebrick;
 }
 
+@media only screen and (max-width: 1000px) {
+    :root {
+        --sidebar-width: 200px;
+    }
+}
+
 * {
     margin: 0;
     box-sizing: border-box;