Merge a9139c4dd4 into 865d8cc80f

Collection layout

src/components/Header.astro

@@ -16,6 +16,10 @@ const isActive = (href: string)=>{
     return href === pathname || href === pathname.split('/').slice(0,2).join('/');
 }
 
+function handleMenu(e) {
+  console.log(e);
+}
+
 ---
 
 <header>
@@ -34,8 +38,25 @@ const isActive = (href: string)=>{
       </ul>
     </div>
     <div class="right">
-      <div class="search"><p>Search TODO</p></div>
-      <btn class="menu"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></btn>
+        <div class="search"><p>Search TODO</p></div>
+        <btn id="menu">
+            <span></span>
+            <span></span>
+            <span></span>
+        </btn>
     </div>
   </nav>
-</header>
+</header>
+<script>
+    const btn = document.querySelector('#menu');
+
+    btn.addEventListener('click', () => {
+        btn.classList.toggle('open');
+        document.querySelectorAll('.sidebar').forEach(sidebar=>{
+            sidebar.classList.toggle('active');
+        })
+    });
+</script>
+<style>
+    
+</style>

src/components/TableOfContents.astro

@@ -2,24 +2,68 @@
 // TableOfContents.astro
 import TableOfContentsHeading from "./TableOfContentsHeading.astro";
 import TocItem from '../utils/generateToc.ts';
-const { headings } = Astro.props;
+const { headings, edit } = Astro.props;
+import { REPOSITORY } from "../config";
 
 const toc = headings && headings.length ? TocItem(headings) : [];
 
-console.log(toc);
-
 ---
 
-<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 {
+        width: calc(var(--sidebar-width) - 2rem);
+        height: 100%;
+        overflow-y: scroll;
+        /* max-height: 80%; */
+        /* inset-block: 0; */
+        transition: 0.3s;
+    }
+    
+    .toc .container {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem 1rem 0;
+        overflow-y: auto;
+    }
+
+    .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;
+    }
+
+    @media only screen and (max-width: 750px) {
+        /* .toc {
+            margin-top: var(--nav-height);
+            margin-bottom: 0;
+            inset-inline-start: 0;
+            inset-inline-end: unset;
+            transform: translateX(-100%);
+        } */
     }
 </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;
     }

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,18 +25,21 @@ 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}>
     <div class="wrapper">
         <section class="sidebar">
+            {(headings && headings.length) ? (
+                <aside id="toc">
+                    <TableOfContents headings={headings} />
+                </aside>
+            ) : ''}
             <div class="container">
                 {items.length ? (
                     <summary>
@@ -48,13 +55,19 @@ const isActive = (href: string)=>{
         </section>
         <div class="main">
             <div class="content">
-                <aside class="toc">
-                    <TableOfContents headings={headings} />
-                </aside>
+                <!-- {headings && (
+                    <aside id="toc">
+                        <TableOfContents headings={headings} />
+                    </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,24 +75,29 @@ const isActive = (href: string)=>{
     <style>
         .wrapper {
             display: flex;
-            --sidebar-width: 300px;
-            /* max-width: 1000px; */
         }
         
         .wrapper .sidebar {
             position: fixed;
             width: var(--sidebar-width);
-            height: 100vh;
+            height: 100%;
+            max-height: calc(100% - var(--nav-height));
             overflow-y: auto;
             inset-block: 0;
             inset-inline-start: 0;
+            margin-top: var(--nav-height);
+            padding-bottom: var(--nav-height);
             /* padding: 20px; */
-            padding-top: var(--nav-height);
+            // padding: var(--nav-height) 0;
             background-color: var(--secondary-background);
+            transition: 0.3s;
+            z-index: 10;
         }
-
+        
         .wrapper .sidebar .container {
+            position: relative;
             padding: 1rem 1rem 0;
+            // height: calc(100vh - var(--nav-height)*2);
         }
 
         .wrapper .sidebar summary .title {
@@ -124,44 +142,74 @@ 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 {
             display: flex;
             /* width: fit-content; */
             /* max-width: 100%; */
             order: 1;
-            margin: 20px 0 0 20px;
-        }
-
-        .wrapper .main aside {
-            display: flex;
-            align-items: center;
-            order: 2;
-            width: fit-content;
-            max-width: 25%;
-            margin: 0 auto;
+            // width: 100%;
+            margin: 1rem;
         }
 
         .wrapper .markdown-body {
-            /* margin: 10px 20px; */
-            max-width: 75%;
+            // padding: 10px 20px;
+            width: 100%;
         }
 
-        .wrapper .toc {
-            display: flex;
-            flex-direction: column;
+        .wrapper #toc {
+            position: fixed;
+            width: calc(var(--sidebar-width) - 2rem);
+            height: fit-content;
+            max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
+            inset-block: 0;
+            inset-inline-end: 2rem;
+            margin: calc(2rem + var(--nav-height)) 0;
+            // background-color: var(--secondary-background);
+            transition: 0.3s;
+            z-index: 10;
+            overflow-y: auto;
+            border-radius: 1em;
+            background-color: var(--secondary-background);
+        }
+
+        @media only screen and (max-width: 1000px) {
+            .wrapper #toc {
+                position: relative;
+                width: var(--sidebar-width);
+                max-height: unset;
+                inset-block: unset;
+                inset-inline-end: unset;
+                margin-top: 0;
+                z-index: 1;
+                background-color: transparent;
+            }
+
+            .wrapper .main {
+                padding-inline-end: unset;
+            }
         }
 
         @media only screen and (max-width: 750px) {
             .wrapper .sidebar {
-                transform: translateX(-80%);
+                transform: translateX(-100%);
             }
 
+            .wrapper .sidebar.active {
+                transform: translateX(0);
+            }
+
+
             .wrapper .main {
-                padding-inline-start: calc(var(--sidebar-width) * 0.2);
+                padding-inline-start: unset;
             }
         }
     </style>

src/layouts/Markdown.astro

@@ -17,13 +17,15 @@ const description = await markdown.parse(frontmatter.description);
 
 <Layout title={frontmatter.title}>
     <div class="wrapper">
+        <section class="sidebar">
+            {headings && (
+                <aside id="toc">
+                    <TableOfContents headings={headings} />
+                </aside>
+            )}
+        </section>
         <div class="main">
             <div class="content">
-                {headings && (
-                    <aside class="toc">
-                        <TableOfContents headings={headings} />
-                    </aside>
-                )}
                 <div class="markdown-body">
                     <h1>{frontmatter.title}</h1>
                     <h3><Fragment set:html={description}/></h3>
@@ -39,7 +41,7 @@ const description = await markdown.parse(frontmatter.description);
         }
 
         .wrapper .main {
-            width: 100vw;
+            width: calc(100vw - var(--sidebar-width));
         }
 
         .wrapper .main .content {
@@ -47,35 +49,78 @@ const description = await markdown.parse(frontmatter.description);
             /* width: fit-content; */
             /* max-width: 100%; */
             order: 1;
-            margin: 20px 0 0 20px;
-        }
-
-        .wrapper .main aside {
-            display: flex;
-            align-items: center;
-            order: 2;
-            width: fit-content;
-            max-width: 25%;
-            margin: 0 auto;
+            margin: 1rem;
         }
 
         .wrapper .markdown-body {
             /* margin: 10px 20px; */
-            max-width: 75%;
+            /* max-width: 75%; */
+            max-width: 100%;
         }
 
-        .wrapper .toc {
-            display: flex;
-            flex-direction: column;
+        .wrapper #toc {
+            position: fixed;
+            width: calc(var(--sidebar-width) - 2rem);
+            height: fit-content;
+            max-height: calc(100vh - var(--nav-height)*2 - 2rem * 2);
+            inset-block: 0;
+            inset-inline-end: 2rem;
+            margin: calc(2rem + var(--nav-height)) 0;
+            background-color: var(--secondary-background);
+            transition: 0.3s;
+            z-index: 10;
+            overflow-y: auto;
+            border-radius: 1em;
+            background-color: var(--secondary-background);
+        }
+
+        @media only screen and (max-width: 1000px) {
+            .wrapper .sidebar {
+                position: fixed;
+                width: var(--sidebar-width);
+                height: 100%;
+                max-height: calc(100% - var(--nav-height));
+                overflow-y: auto;
+                inset-block: 0;
+                inset-inline-start: 0;
+                margin-top: var(--nav-height);
+                padding-bottom: var(--nav-height);
+                /* padding: 20px; */
+                // padding: var(--nav-height) 0;
+                background-color: var(--secondary-background);
+                transition: 0.3s;
+                z-index: 10;
+            }
+
+            .wrapper #toc {
+                position: relative;
+                width: var(--sidebar-width);
+                max-height: unset;
+                inset-block: unset;
+                inset-inline-end: unset;
+                margin-top: 0;
+                z-index: 1;
+                background-color: transparent;
+            }
+
+            .wrapper .main {
+                width: 100%;
+                padding-inline-start: var(--sidebar-width);
+            }
         }
 
         @media only screen and (max-width: 750px) {
             .wrapper .sidebar {
-                transform: translateX(-80%);
+                transform: translateX(-100%);
+            }
+
+            .wrapper .sidebar.active {
+                transform: translateX(0);
             }
 
             .wrapper .main {
-                padding-inline-start: calc(400px * 0.2);
+                width: 100%;
+                padding-inline-start: 0;
             }
         }
     </style>

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>
@@ -20,12 +21,4 @@ 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.
----
-
-
+</Markdown>

src/styles/Header.css

@@ -41,17 +41,74 @@ header ul li:hover a {
     list-style: none;
 }
 
-header .right .menu {
+header .right #menu {
     display: none;
+    cursor: pointer;
 }
 
-@media only screen and (max-width: 600px) {
+#menu {
+    flex-direction: column;
+    /* justify-content: space-between; */
+    justify-content: center;
+    width: 2rem;
+    height: 1.5rem;
+    position: relative;
+    /* margin: 50px auto; */
+    -webkit-transition: .5s ease-in-out;
+    -moz-transition: .5s ease-in-out;
+    -o-transition: .5s ease-in-out;
+    transition: .5s ease-in-out;
+    cursor: pointer;
+    /*   border:1px solid red; */
+}
+
+#menu span {
+    display: block;
+    position: absolute;
+    height: 3px;
+    width: 100%;
+    background: var(--header-text);
+    border-radius: 9px;
+    opacity: 1;
+    left: 0;
+    transform: rotate(0deg);
+    transition: .2s ease-in-out;
+    /*   border:4px solid black; */
+}
+
+#menu span:nth-child(1) {
+    top: 0;
+}
+
+#menu span:nth-child(3) {
+    bottom: 0;
+}
+
+#menu.open span:nth-child(1) {
+    top: 50%;
+    transform: translateY(-50%);
+    transform: rotate(45deg);
+}
+
+#menu.open span:nth-child(2) {
+    width: 0;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+#menu.open span:nth-child(3) {
+    top: 50%;
+    transform: translateY(-50%);
+    transform: rotate(-45deg);
+}
+
+@media only screen and (max-width: 750px) {
     header .left ul, header  .right .search {
         display: none;
     }
 
-    header .right .menu {
-        display: block;
-        width: 25px;
+    header .right #menu {
+        display: flex;
+        /* width: 25px; */
     }
 }

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,12 +24,26 @@
     --astro-code-token-link: firebrick;
 }
 
+@media only screen and (max-width: 1000px) {
+    :root {
+        --sidebar-width: 200px;
+    }
+}
+
+@media only screen and (max-width: 750px) {
+    :root {
+        --sidebar-width: 80vw;
+    }
+}
+
 * {
     margin: 0;
     box-sizing: border-box;
 }
 
-*:target{ padding-top: 100px;margin-top: -100px}
+*:target{
+    scroll-margin-top: calc(var(--nav-height) + 1em);
+}
 
 html {
     font-family: 'Roboto', sans-serif;