From 4be232dea456bb8d8abbca7de72298313ac9bb76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Quentin?= <bjoernQ@users.noreply.github.com>
Date: Thu, 19 Jun 2025 13:07:46 +0200
Subject: [PATCH] Docs landing page (#3654)

* Add resources to docs landing page

* Tweak widths

* Fix scrollbar

* Address review comments

* Adjust margin

* Next suggestion
---
 resources/index.html.jinja | 51 ++++++++++++++++++++++++++++++--------
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/resources/index.html.jinja b/resources/index.html.jinja
index f3a9b254f..a345118c8 100644
--- a/resources/index.html.jinja
+++ b/resources/index.html.jinja
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-  <title>esp-rs Documentation</title>
+  <title>esp-rs Documentation and Resources</title>
 
   <link rel="icon" href="esp-rs.svg" />
   <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap" rel="stylesheet" />
@@ -20,23 +20,25 @@
       margin: 0;
       padding: 40px 20px;
       display: flex;
-      height: 100vh;
-      width: 100vw;
       justify-content: center;
       box-sizing: border-box;
     }
 
     .logo {
       text-align: center;
-      margin-bottom: 50px;
-      font-size: 2em;
-      font-weight: 500;
+      margin-bottom: 42px;
+      font-size: 0.8em;
+      font-weight: 100;
     }
 
     .logo img {
       width: 100px;
       height: auto;
-      margin-bottom: 20px;
+      margin-bottom: 12px;
+    }
+
+    .logo h2 {
+      margin-top: 0.5rem;
     }
 
     .content {
@@ -63,7 +65,7 @@
 
     .crate-name {
       color: #d6991d;
-      width: 120px;
+      width: 220px;
     }
 
     /* Ensure the link color does not change after being clicked */
@@ -81,6 +83,27 @@
       width: 120px;
     }
 
+    .resource {
+      display: flex;
+      align-items: center;
+      padding: 10px;
+      border-bottom: 2px solid #454444;
+    }
+
+    .resource-name {
+      color: #d6991d;
+      width: 400px;
+    }
+
+    /* Ensure the link color does not change after being clicked */
+    .resource-name a:link,
+    .resource-name a:visited,
+    .resource-name a:hover,
+    .resource-name a:active,
+    .resource-name a:focus {
+      color: #d6991d;
+    }
+
     @media screen and (min-height: 650px) {
       body {
         align-items: center;
@@ -93,10 +116,17 @@
   <div class="content">
     <div class="logo">
       <img src="esp-rs.svg" alt="esp-rs logo" />
-      <div>esp-rs Documentation</div>
+      <h2>esp-rs Documentation and Resources</h2>
+      Bare-metal (no_std) hardware abstraction layer for Espressif devices.
     </div>
 
-    <h2>Packages</h2>
+    <h2>Resources</h2>
+
+    <div class="resource"><span class="resource-name"><a href="https://docs.espressif.com/projects/rust/book/">The Rust on ESP Book</a></span></div>
+    <div class="resource"><span class="resource-name"><a href="https://docs.espressif.com/projects/rust/no_std-training/">Embedded Rust (no_std) on Espressif Training</a></span></div>
+
+
+    <h2>Package Documentation</h2>
 
     {%- for meta in metadata %}
     <div class="crate">
@@ -107,6 +137,7 @@
       <span class="crate-version">{{ meta.version }}</span>
     </div>
     {%- endfor %}
+
   </div>
 </body>