Bump @astrojs/mdx from 2.0.3 to 2.1.1

Bumps [@astrojs/mdx](https://github.com/withastro/astro/tree/HEAD/packages/integrations/mdx) from 2.0.3 to 2.1.1.
- [Release notes](https://github.com/withastro/astro/releases)
- [Changelog](https://github.com/withastro/astro/blob/main/packages/integrations/mdx/CHANGELOG.md)
- [Commits](https://github.com/withastro/astro/commits/@astrojs/mdx@2.1.1/packages/integrations/mdx)

---
updated-dependencies:
- dependency-name: "@astrojs/mdx"
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

package.json

@@ -5,12 +5,12 @@
     "@astrojs/mdx": "^2.1.1",
     "@lbry/components": "^4.2.5",
     "@thewebforge/astro-code-blocks": "^0.2.0",
-    "astro": "^4.4.3",
+    "astro": "^4.1.1",
     "astro-preload": "^1.1.2",
     "markdown-wasm": "^1.2.0",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
-    "sass": "^1.71.0"
+    "sass": "^1.69.7"
   },
   "scripts": {
     "dev": "astro dev",

src/components/Header.astro

@@ -16,10 +16,6 @@ const isActive = (href: string)=>{
     return href === pathname || href === pathname.split('/').slice(0,2).join('/');
 }
 
-function handleMenu(e) {
-  console.log(e);
-}
-
 ---
 
 <header>
@@ -38,25 +34,8 @@ function handleMenu(e) {
       </ul>
     </div>
     <div class="right">
-        <div class="search"><p>Search TODO</p></div>
+      <div class="search"><p>Search TODO</p></div>
-        <btn id="menu">
+      <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>
-            <span></span>
-            <span></span>
-            <span></span>
-        </btn>
     </div>
   </nav>
 </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,68 +2,24 @@
 // TableOfContents.astro
 import TableOfContentsHeading from "./TableOfContentsHeading.astro";
 import TocItem from '../utils/generateToc.ts';
-const { headings, edit } = Astro.props;
+const { headings } = Astro.props;
-import { REPOSITORY } from "../config";
 
 const toc = headings && headings.length ? TocItem(headings) : [];
 
+console.log(toc);
+
 ---
 
-<section class="toc">
+<nav class="toc">
-    <div class="container">
+    <h2 id="on-this-page">On this page</h2>
-        <summary><p id="on-this-page">On this page</p></summary>
+    <ul>
-        <nav>
+        {toc.map((heading) => <TableOfContentsHeading heading={heading}/>)}
-            <ul>
+    </ul>
-                {toc.map((heading) => <TableOfContentsHeading heading={heading}/>)}
+</nav>
-            </ul>
+<style>
-        </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,6 +1,4 @@
 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.md

@@ -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,7 +30,6 @@ Reilly wants to publish _Terror on the Midway_ to the channel he claimed `lbry:/
         },
         "version": "_0_0_1"
     }
-```
 
 This is serialized as:
 
@@ -48,10 +47,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",
@@ -59,7 +58,6 @@ It contains a der-encoded SECP256k1 public key
                           c59363aa5d77ff2b7ff06cddc07116b335a4a0849b1b524a4a69d908d69f1bcebb",
             "version": "_0_0_1"
     }
-```
 
 ### Signing the claim in detail
 
@@ -76,14 +74,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": {
@@ -115,7 +113,6 @@ 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.md

@@ -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.md

@@ -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.md

@@ -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 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 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.md

@@ -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.md

@@ -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.md

@@ -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,13 +5,9 @@ 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);
 
@@ -25,21 +21,18 @@ 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>
@@ -55,19 +48,13 @@ const isActive = (href: string)=>{
         </section>
         <div class="main">
             <div class="content">
-                <!-- {headings && (
+                <aside class="toc">
-                    <aside id="toc">
+                    <TableOfContents headings={headings} />
-                        <TableOfContents headings={headings} />
+                </aside>
-                    </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>
@@ -75,29 +62,24 @@ const isActive = (href: string)=>{
     <style>
         .wrapper {
             display: flex;
+            --sidebar-width: 300px;
+            /* max-width: 1000px; */
         }
         
         .wrapper .sidebar {
             position: fixed;
             width: var(--sidebar-width);
-            height: 100%;
+            height: 100vh;
-            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;
+            padding-top: var(--nav-height);
             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 {
@@ -142,13 +124,8 @@ const isActive = (href: string)=>{
         }
 
         .wrapper .main {
-            // width: calc(100vw - var(--sidebar-width));
+            width: 100vw;
             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 {
@@ -156,60 +133,35 @@ const isActive = (href: string)=>{
             /* width: fit-content; */
             /* max-width: 100%; */
             order: 1;
-            // width: 100%;
+            margin: 20px 0 0 20px;
-            margin: 1rem;
+        }
+
+        .wrapper .main aside {
+            display: flex;
+            align-items: center;
+            order: 2;
+            width: fit-content;
+            max-width: 25%;
+            margin: 0 auto;
         }
 
         .wrapper .markdown-body {
-            // padding: 10px 20px;
+            /* margin: 10px 20px; */
-            width: 100%;
+            max-width: 75%;
         }
 
-        .wrapper #toc {
+        .wrapper .toc {
-            position: fixed;
+            display: flex;
-            width: calc(var(--sidebar-width) - 2rem);
+            flex-direction: column;
-            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(-100%);
+                transform: translateX(-80%);
             }
 
-            .wrapper .sidebar.active {
-                transform: translateX(0);
-            }
-
-
             .wrapper .main {
-                padding-inline-start: unset;
+                padding-inline-start: calc(var(--sidebar-width) * 0.2);
             }
         }
     </style>

src/layouts/Markdown.astro

@@ -17,15 +17,13 @@ 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>
@@ -41,7 +39,7 @@ const description = await markdown.parse(frontmatter.description);
         }
 
         .wrapper .main {
-            width: calc(100vw - var(--sidebar-width));
+            width: 100vw;
         }
 
         .wrapper .main .content {
@@ -49,78 +47,35 @@ const description = await markdown.parse(frontmatter.description);
             /* width: fit-content; */
             /* max-width: 100%; */
             order: 1;
-            margin: 1rem;
+            margin: 20px 0 0 20px;
+        }
+
+        .wrapper .main aside {
+            display: flex;
+            align-items: center;
+            order: 2;
+            width: fit-content;
+            max-width: 25%;
+            margin: 0 auto;
         }
 
         .wrapper .markdown-body {
             /* margin: 10px 20px; */
-            /* max-width: 75%; */
+            max-width: 75%;
-            max-width: 100%;
         }
 
-        .wrapper #toc {
+        .wrapper .toc {
-            position: fixed;
+            display: flex;
-            width: calc(var(--sidebar-width) - 2rem);
+            flex-direction: column;
-            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(-100%);
+                transform: translateX(-80%);
-            }
-
-            .wrapper .sidebar.active {
-                transform: translateX(0);
             }
 
             .wrapper .main {
-                width: 100%;
+                padding-inline-start: calc(400px * 0.2);
-                padding-inline-start: 0;
             }
         }
     </style>

src/pages/resources.astro

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

src/pages/tutorials.astro

@@ -2,12 +2,11 @@
 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" noedit={true}>
+<Markdown title="Tutorials" frontmatter={frontmatter} collection="tutorials">
     <h2>Setup your Development Environment</h2>
     
     <h3>Desktop Application</h3>
@@ -22,3 +21,11 @@ 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/Header.css

@@ -41,74 +41,17 @@ header ul li:hover a {
     list-style: none;
 }
 
-header .right #menu {
+header .right .menu {
     display: none;
-    cursor: pointer;
 }
 
-#menu {
+@media only screen and (max-width: 600px) {
-    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 {
+    header .right .menu {
-        display: flex;
+        display: block;
-        /* width: 25px; */
+        width: 25px;
     }
 }

src/styles/global.scss

@@ -7,9 +7,7 @@
     --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;
@@ -24,26 +22,12 @@
     --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{
+*:target{ padding-top: 100px;margin-top: -100px}
-    scroll-margin-top: calc(var(--nav-height) + 1em);
-}
 
 html {
     font-family: 'Roboto', sans-serif;