Fix tutorials page

app/components/note.js

@@ -0,0 +1,19 @@
+"use strict";
+
+
+
+//  I M P O R T
+
+import { html } from 'hono/html'
+
+
+
+
+//  E X P O R T
+
+export default (text) => html`
+  <div class="component--note">
+    <strong class="component--note__title">Note</strong>
+    <span>${text}</span>
+  </div>
+`;

app/sass/bundle.scss

@@ -15,6 +15,7 @@
 @import "partials/navigation";
 @import "partials/mission-statement";
 @import "partials/modal";
+@import "partials/note";
 @import "partials/pre";
 
 @import "layout";

app/sass/partials/_note.scss

@@ -0,0 +1,29 @@
+.component--note {
+  padding: 1rem 1rem 1rem 1.25rem;
+
+  background-color: rgba($lbry-teal-1, 0.3);
+  border-left: 0.5rem solid $lbry-teal-3;
+  line-height: 1.55;
+  margin-bottom: 1.5rem;
+  position: relative;
+  user-select: text;
+
+  -ms-user-select: text;
+  -moz-user-select: text;
+  -webkit-user-select: text;
+
+  @media (min-width: 901px) {
+    font-size: 1.25rem;
+  }
+
+  @media (max-width: 900px) {
+    font-size: 1.05rem;
+  }
+}
+
+.component--note__title {
+  color: $lbry-teal-3;
+  display: block;
+  letter-spacing: 0.025rem;
+  text-transform: uppercase;
+}

documents/tutorials.md

@@ -2,24 +2,26 @@
 title: Tutorials
 description: Learn how to setup, use, deploy, and develop with LBRY.
 ---
-# LBRY Programming Tutorials
 
-## Tutorial #1 - "Hello Satoshi!"
+## Deployment tutorials
+
+These tutorials will explain how to run different elements from the LBRY Network.
+
+### Blockchain
+
+- [Setup a LBRY blockchain with lbrycrd](/tutorials/setup-blockchain-lbrycrd)
+- [Setup a LBRY blockchain with lbcd](/tutorials/setup-blockchain-lbcd)
+
+### Hub
+
+- [Setup a LBRY Hub](/tutorials/setup-hub)
+
+### SDK
+
+- [Setup the LBRY SDK with lbrynet](/tutorials/setup-sdk-lbrynet)
+
+## Programming tutorials
+
+### Tutorial #1 - "Hello Satoshi!"
+
 Learn how to [create and modify a simple LBRY electron application](/tutorial-hellosatoshi) we'll call "[Hello Satoshi](/tutorial-hellosatoshi)".
-
----
-
-# Setup your Development Environment
-
-## Desktop Application
-[Video tutorial](/resources/video-lbrydesktop) to setup the [Desktop app](https://github.com/lbryio/lbry-desktop) development environment.
-
-## Android Application
-[Video tutorial](/resources/video-lbryandroid) to setup the [Android app](https://github.com/lbryio/lbry-android) development environment.
-
-## LBRY SDK
-[Video tutorial](/resources/video-lbrysdk) to setup the [LBRY SDK](https://github.com/lbryio/lbry-sdk) development environment.
-
-## LBRY Blockchain
-[Video tutorial](/resources/video-lbrycrd) to setup the [LBRY Blockchain](https://github.com/lbryio/lbrycrd) development environment.
-

documents/tutorials/setup-blockchain-lbrycrd.md

@@ -0,0 +1,33 @@
+---
+title: Setup LBRY blockchain with lbrycrd
+description: Learn how to setup the LBRY blockchain with lbrycrd.
+---
+
+<Note text="It is recommended to use LBCD."/>
+
+## Building
+
+### With Docker
+
+```shell
+git clone https://github.com/lbryio/lbrycrd.git
+cd lbrycrd
+docker run -v "$(pwd):/lbrycrd" --rm -v "${HOME}/ccache:/ccache" -w /lbrycrd -e CCACHE_DIR=/ccache lbry/build_lbrycrd packaging/build_linux_64bit.sh
+
+```
+
+### Ubuntu
+
+```shell
+sudo apt install build-essential git libtool autotools-dev automake pkg-config bsdmainutils curl ca-certificates
+git clone https://github.com/lbryio/lbrycrd.git
+cd lbrycrd
+./packaging/build_linux_64bit.sh
+./src/test/test_lbrycrd
+```
+
+## Running
+
+```shell
+lbrycrdd -server -daemon
+```