From cedccbcc00ee09ccd1c3ce05d77804020ecad084 Mon Sep 17 00:00:00 2001
From: Ben van Hartingsveldt <ben.vanhartingsveldt@yocto.com>
Date: Wed, 23 Jul 2025 20:39:13 +0200
Subject: [PATCH] Fix tutorials page

---
 app/components/note.js                        | 19 +++++++++
 app/sass/bundle.scss                          |  1 +
 app/sass/partials/_note.scss                  | 29 ++++++++++++++
 documents/tutorials.md                        | 40 ++++++++++---------
 documents/tutorials/setup-blockchain-lbcd.md  |  0
 .../tutorials/setup-blockchain-lbrycrd.md     | 33 +++++++++++++++
 documents/tutorials/setup-hub.md              |  0
 documents/tutorials/setup-sdk-lbrynet.md      |  0
 8 files changed, 103 insertions(+), 19 deletions(-)
 create mode 100644 app/components/note.js
 create mode 100644 app/sass/partials/_note.scss
 create mode 100644 documents/tutorials/setup-blockchain-lbcd.md
 create mode 100644 documents/tutorials/setup-blockchain-lbrycrd.md
 create mode 100644 documents/tutorials/setup-hub.md
 create mode 100644 documents/tutorials/setup-sdk-lbrynet.md

diff --git a/app/components/note.js b/app/components/note.js
new file mode 100644
index 0000000..ed5252c
--- /dev/null
+++ b/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>
+`;
diff --git a/app/sass/bundle.scss b/app/sass/bundle.scss
index 37b50a9..0bee69c 100755
--- a/app/sass/bundle.scss
+++ b/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";
diff --git a/app/sass/partials/_note.scss b/app/sass/partials/_note.scss
new file mode 100644
index 0000000..f77a956
--- /dev/null
+++ b/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;
+}
diff --git a/documents/tutorials.md b/documents/tutorials.md
index c313fb6..295b366 100644
--- a/documents/tutorials.md
+++ b/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.
-
diff --git a/documents/tutorials/setup-blockchain-lbcd.md b/documents/tutorials/setup-blockchain-lbcd.md
new file mode 100644
index 0000000..e69de29
diff --git a/documents/tutorials/setup-blockchain-lbrycrd.md b/documents/tutorials/setup-blockchain-lbrycrd.md
new file mode 100644
index 0000000..5286ae0
--- /dev/null
+++ b/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
+```
diff --git a/documents/tutorials/setup-hub.md b/documents/tutorials/setup-hub.md
new file mode 100644
index 0000000..e69de29
diff --git a/documents/tutorials/setup-sdk-lbrynet.md b/documents/tutorials/setup-sdk-lbrynet.md
new file mode 100644
index 0000000..e69de29