Refactor the resources in docs (#626)

* Refactor the resources in docs

* Add alt text to image

docs/docs/getting-started.mdx

@@ -35,7 +35,7 @@ If you would like to prototype, I can also recommend the following items:
 Keep in mind that besides the photodiode board there are also boards in circulation with an LDR. The expansion board is optional, but makes it easier to connect and prototype with the components.
 :::
 
-How everything should be connected can be found on the [wiring diagram](/docs/reference/diagram). Once this is done, you can proceed to step 2.
+How everything should be connected can be found on the [wiring diagram](/docs/resources/schematics). Once this is done, you can proceed to step 2.
 
 ## Step 2: Install firmware
 
@@ -119,7 +119,7 @@ For problems with the measurements, see the [FAQ page](/docs/faq).
 
 ## Step 5: Print Enclosure
 
-The last step is to print a housing, the files for this can be found on the [cases page](/docs/reference/cases). If you do not have a 3D printer, there are platforms where you could place a print job or mount the Home Assistant Glow in a creative way 🙃 (my first concept was with cardboard).
+The last step is to print a housing, the files for this can be found on the [cases page](/docs/resources/cases). If you do not have a 3D printer, there are platforms where you could place a print job or mount the Home Assistant Glow in a creative way 🙃 (my first concept was with cardboard).
 
 ## Step 6: Sit back and relax
 

docs/docs/introduction.mdx

@@ -8,7 +8,7 @@ description: What is the Home Assistant Glow?s
 
 During my internship at [Nabu Casa](https://www.nabucasa.com) in the first half of 2021, I focused on energy management for your house, how to collect all energy data and display it on a dashboard. Since Home Assistant release **2021.8** it's possible to use the [Home Assistant Energy](https://www.home-assistant.io/home-energy-management) dashboard to display your energy usage. Unfortunately, not everyone has a smart meter and/or is equipped with a P1 port. This is where the Home Assistant Glow comes in!
 
-## What is this thing?
+## What does it do?
 
 Home Assistant Glow makes a (not so) smart meter without a P1 port easily readable, using the pulse LED that is always present in most cases and it works with [ESPHome](https://esphome.io)! To neatly hide it all in your meter cupboard, a case has been designed that you can 3D print yourself.
 

docs/docs/reference/cases.mdx → docs/docs/resources/cases.mdx

@@ -1,10 +1,10 @@
 ---
 id: cases
-title: Cases
+title: 3D Printed Cases
 description: Collection of all cases that you can 3D print
 ---
 
-# Cases
+# 3D Printed Cases
 
 On this page you will find all the cases that you can 3D print for the Home Assistant Glow. If you've made some changes on the cases, I'd appreciate it if you add the new case design to the repository for everyone to benefit 😉
 

docs/docs/resources/gpio.mdx

@@ -0,0 +1,31 @@
+---
+id: gpio
+title: GPIO Pinout
+description: GPIO pinout of the ESP32 and ESP8266 boards
+---
+
+# GPIO Pinout
+
+In this section, you will find the GPIO pinout of the ESP32 and ESP8266 boards. The GPIO pins are used to connect the Photodiode and Status LED to the ESP board of your choice.
+
+## Photodiode
+
+How the Photodiode is connected to the ESP board of your choice.
+
+| PHOTODIODE | ESP32        | ESP8266     |
+|------------|--------------|-------------|
+| A0         | NOT USING    | NOT USING   |
+| DO         | D26 (GPIO26) | D7 (GPIO13) |
+| VCC        | 3V3          | 3V3         |
+| GND        | GND          | GND         |
+
+## Status LED
+
+How the status LED is connected to the ESP board of your choice. For each measured pulse, the LED will briefly flash <span style={{ color: 'red' }}>*red*</span> and in case of no WiFi connection, the LED will continue to flash <span style={{ color: 'blue' }}>*blue*</span>.
+
+| LED    | ESP32      | ESP8266    |
+|--------|------------|------------|
+| RED    | D2 (GPIO2) | D4 (GPIO2) |
+| GREEN  | D4 (GPIO4) | D2 (GPIO4) |
+| BLUE   | D5 (GPIO5) | D1 (GPIO5) |
+| GND    | GND        | GND        |

docs/docs/resources/schematics.mdx

@@ -0,0 +1,27 @@
+---
+id: schematics
+title: Schematics
+description: How to connect the Photodiode and Status LED based on wiring diagram
+---
+
+# Schematics
+
+In this section, you will find the wiring diagram of how to connect the Photodiode and Status LED to the ESP board of your choice.
+
+## Wiring diagram
+
+Below you will find a wiring diagram of how everything is connected, depending on the type of board you use, the [GPIO pins](/docs/resources/gpio) may be in a different place. You could also omit the status LED if desired.
+
+<p align="center">
+  <img 
+    width="90%"
+    src={require('@site/static/img/wiring_diagram.png').default}
+    alt="Wiring diagram showing connections between Photodiode, Status LED, and ESP board"
+  />
+</p>
+
+:::important
+Please note that there are different boards in circulation and that the GPIO
+pins may be on a different location than in the example above. So always double
+check and, if necessary, consult the pin layout of your specific board.
+:::

docs/sidebars.ts

@@ -18,20 +18,21 @@ const sidebars: SidebarsConfig = {
     'configuration',
     {
       type: 'category',
-      collapsed: false,
-      label: 'Reference',
+      label: 'Advanced',
       items: [
-        'reference/diagram',
-        'reference/cases',
+        'advanced/firmware_customization',
       ],
     },
     {
       type: 'category',
-      label: 'Advanced',
+      collapsed: false,
+      label: 'Resources',
       items: [
-        'advanced/firmware_customization',
+        'resources/schematics',
+        'resources/gpio',
+        'resources/cases',
       ],
-    }
+    },
   ],
 
   // But you can create a sidebar manually