refactor: simplify putting content on start page with only Markdown

hutscape · Apr 12, 2024 · 0b1650d · 0b1650d
1 parent 4dbf4d8
commit 0b1650d
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 71 deletions.
diff --git a/_includes b/_includes
diff --git a/_layouts b/_layouts
diff --git a/index.md b/index.md
@@ -24,72 +24,3 @@ features:
   - detail: Display the Haversine distance with the peer nodes
   - detail: Display the Haversine distance with a relative time ago when both nodes had a GPS fix
 ---
-<section class="section is-small">
-  <div class="container">
-    <h2 class="title is-1">Getting Started</h2>
-    <div class="tile is-ancestor">
-      <div class="tile is-vertical is-12">
-        <div class="tile">
-          <div class="tile is-parent">
-            <article class="tile is-child notification">
-              <p class="title">Step 1</p>
-              <p class="subtitle">Assemble the components.</p>
-              <p>Screw in the E-Ink screen, the LoRa antenna and insert the 18650 battery at the back.</p>
-              <a href="{{site.url}}/images/prototype/front.jpg">
-                <img src="{{site.url}}/images/prototype/front.jpg" alt="Final assembly">
-              </a>
-              <a href="{{site.url}}/images/prototype/back.jpg">
-                <img src="{{site.url}}/images/prototype/back.jpg" alt="With the battery">
-              </a>
-            </article>
-          </div>
-          <div class="tile is-parent">
-            <article class="tile is-child notification">
-              <p class="title">Step 2</p>
-              <p class="subtitle">[Option A]: Install new board in Arduino IDE</p>
-              <p>Copy and paste the following URL into the File > Preferences > "Additional Boards Manager" textbox in Arduino IDE</p>
-              <code> https://raw.githubusercontent.com/hutscape/arduino-board-index/main/package_hutscape_index.json</code>
-              <a href="{{site.url}}/images/code/paste-board-url.png">
-                <img src="{{site.url}}/images/code/paste-board-url.png" alt="Paste board URL">
-              </a>
-              <p>Restart Arduino IDE. Go to Tools > Boards Manager > Search for Hutscape or Oak</p>
-              <a href="{{site.url}}/images/code/install-custom-board.png">
-                <img src="{{site.url}}/images/code/install-custom-board.png" alt="Install custom board">
-              </a>
-              <a href="{{site.url}}/images/code/custom-board-installed.png">
-                <img src="{{site.url}}/images/code/custom-board-installed.png" alt="Installation of custom board is successful">
-              </a>
-              <p class="subtitle">[Option B]: Use Makefile</p>
-              <p>Run <code>make</code> to upload the sketch to the board.</p>
-              <a href="{{site.url}}/images/code/make-to-install.png">
-                <img src="{{site.url}}/images/code/make-to-install.png" alt="Run the command make to upload the code to the board">
-              </a>
-              <a href="{{site.url}}/images/code/make-successful.png">
-                <img src="{{site.url}}/images/code/make-successful.png" alt="Successfully uploaded the code to the board">
-              </a>
-            </article>
-          </div>
-          <div class="tile is-parent">
-            <article class="tile is-child notification">
-              <div class="content">
-                <p class="title">Step 3</p>
-                <p class="subtitle">Try the <a href="{{site.url}}/code/hello-world">Blinky LED code</a> or other <a href="{{site.url}}/code">code examples</a>.</p>
-                <a href="{{site.url}}/images/code/eink-prototype.jpg">
-                  <img src="{{site.url}}/images/code/eink-prototype.jpg" alt="Typical setup">
-                </a>
-                <p class="subtitle">[Option A]: Use Arduino IDE</p>
-                <a href="{{site.url}}/images/code/option-a-ide-blinky.png">
-                  <img src="{{site.url}}/images/code/option-a-ide-blinky.png" alt="Use Arduino IDE to upoad blinky firmware">
-                </a>
-                <p class="subtitle">[Option B]: Use Makefile</p>
-                <a href="{{site.url}}/images/code/option-b-makefile-blinky.png">
-                  <img src="{{site.url}}/images/code/option-b-makefile-blinky.png" alt="Use Makefile to upload the blinky firmware">
-                </a>
-              </div>
-            </article>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
diff --git a/start/step1.md b/start/step1.md
@@ -0,0 +1,7 @@
+## Assemble the components
+
+Screw in the E-Ink screen, the LoRa antenna and insert the 18650 battery at the back.
+
+[![Final assembly]({{site.url}}/images/prototype/front.jpg)]({{site.url}}/images/prototype/front.jpg)
+
+[![With the battery]({{site.url}}/images/prototype/back.jpg)]({{site.url}}/images/prototype/back.jpg)
diff --git a/start/step2.md b/start/step2.md
@@ -0,0 +1,19 @@
+**[Option A]: Install new board in Arduino IDE**
+
+[Copy and paste the JSON URL](https://raw.githubusercontent.com/hutscape/arduino-board-index/main/package_hutscape_index.json) into the File > Preferences > "Additional Boards Manager" textbox in Arduino IDE
+
+[![Paste board URL]({{site.url}}/images/code/paste-board-url.png)]({{site.url}}/images/code/paste-board-url.png)
+
+Restart Arduino IDE. Go to Tools > Boards Manager > Search for Hutscape or Oak
+
+[![Install custom board]({{site.url}}/images/code/install-custom-board.png)]({{site.url}}/images/code/install-custom-board.png)
+
+[![Installation of custom board is successful]({{site.url}}/images/code/custom-board-installed.png)]({{site.url}}/images/code/custom-board-installed.png)
+
+**[Option B]: Use Makefile**
+
+Run `make` to upload the sketch to the board.
+
+[![Run the command make to upload the code to the board]({{site.url}}/images/code/make-to-install.png)]({{site.url}}/images/code/make-to-install.png)
+
+[![Successfully uploaded the code to the board]({{site.url}}/images/code/make-successful.png)]({{site.url}}/images/code/make-successful.png)
diff --git a/start/step3.md b/start/step3.md
@@ -0,0 +1,11 @@
+Try the [Blinky LED code]({{ site.url }}/code/hello-world) or other [code examples]({{ site.url }}/code).
+
+[![Typical setup]({{ site.url }}/images/code/eink-prototype.jpg)]({{ site.url }}/images/code/eink-prototype.jpg)
+
+**[Option A]: Use Arduino IDE**
+
+[![Use Arduino IDE to upload blinky firmware]({{ site.url }}/images/code/option-a-ide-blinky.png)]({{ site.url }}/images/code/option-a-ide-blinky.png)
+
+**[Option B]: Use Makefile**
+
+[![Use Makefile to upload the blinky firmware]({{ site.url }}/images/code/option-b-makefile-blinky.png)]({{ site.url }}/images/code/option-b-makefile-blinky.png)