From 259e3f18bc891c9ac6211ab413c75e84d4e2e7f3 Mon Sep 17 00:00:00 2001
From: erciccione <erciccione@protonmail.com>
Date: Wed, 25 Mar 2020 15:04:46 +0100
Subject: [PATCH] Improve 'Developer Guides' page

- Split page vertically and add new section: 'External resources'
- Add description for each resource
- Add pics to suggest where the content is located (web page, github, internal doc)
---
 _i18n/en.yml                        | 15 ++++++++---
 css/custom.css                      | 24 ++++++++++++++++++
 resources/developer-guides/index.md | 39 +++++++++++++++++++++++++----
 3 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/_i18n/en.yml b/_i18n/en.yml
index 054d1185..5613c38f 100644
--- a/_i18n/en.yml
+++ b/_i18n/en.yml
@@ -453,10 +453,19 @@ about:
 
 
 developer-guides:
-  outdated: "Please note: the guides below have been recently refreshed and are maintained almost up-to-date by the community. However, methods are often added / removed / updated and may not be accurately described here."
+  head: Collection of guides, documentation and useful resources for developers (in English).
+  outdated: "Methods are often added / removed / updated and may not be accurately described."
   rpc: RPC Documentation
-  daemonrpc: Daemon RPC Documentation
-  walletrpc: Wallet RPC Documentation
+  daemonrpc: Daemon RPC
+  daemonrpc_descr: RPC calls for the daemon. Including input, outputs and examples.
+  walletrpc: Wallet RPC
+  walletrpc_descr: monero-wallet-rpc calls. Including input, outputs and examples.
+  external: External resources
+  external_head: Useful docs and resources maintained by community members.
+  monerodocs: Comprehensive resource which aims to organize the technical knowledge about Monero. Some sections might be outdated.
+  moneroexamples: Rich list of examples and docs related to Monero development.
+  moneroecosystem: Community of Monero developers. Contains libraries and resources and guides of some Monero Workgroups, like the Localization Workgroup and the Outreach Workgroup.
+  monerose: One of the most complete resources for both users and developers.
 
 user-guides:
   general: General
diff --git a/css/custom.css b/css/custom.css
index ffccf757..169805cf 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -2963,6 +2963,30 @@ footer {
     margin-top: 0;
 }
 
+.guides span {
+  height: 2rem;
+  width: 2rem;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.guides span.icon-github {
+  background-image: url(../img/monero-spritesheet.png);
+  background-position: 0 -240px;
+  float: left;
+  margin-right: 0.5rem;
+}
+
+.guides span.icon-page:before {
+  content: "\01F4C4";
+  float: left;
+}
+
+.guides span.icon-globe:before {
+  content: "\01F310";
+  float: left;
+}
+
 /******************************DOWNLOADS STYLING***********************/
 
 .downloads h2.center {
diff --git a/resources/developer-guides/index.md b/resources/developer-guides/index.md
index 9f5969d5..ec6226ef 100644
--- a/resources/developer-guides/index.md
+++ b/resources/developer-guides/index.md
@@ -7,13 +7,42 @@ permalink: /resources/developer-guides/index.html
 {% t global.lang_tag %}
 <div class="guides">
     <div class="center-xs container description">
-        <p class="text-center">{% t developer-guides.outdated %}</p>
+        <p class="text-center">{% t developer-guides.head %}</p>
     </div>
     <section class="container full">
-        <div class="info-block">
-            <h2>{% t developer-guides.rpc %}</h2>
-            <p><a href="daemon-rpc.html">{% t developer-guides.daemonrpc %}</a></p>
-            <p><a href="wallet-rpc.html">{% t developer-guides.walletrpc %}</a></p>
+        <div class="row">
+            <div class="left half no-pad-sm col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="info-block">
+                    <div class="row center-xs">
+                        <div class="col">
+                            <h2>{% t developer-guides.rpc %}</h2>
+                        </div>
+                    </div>
+                    <p><i>{% t developer-guides.outdated %}</i></p>
+                    <h3><span class="icon-page"></span><a href="daemon-rpc.html">{% t developer-guides.daemonrpc %}</a></h3>
+                        <p>{% t developer-guides.daemonrpc_descr %}</p>
+                    <h3><span class="icon-page"></span><a href="wallet-rpc.html">{% t developer-guides.walletrpc %}</a></h3>
+                        <p>{% t developer-guides.walletrpc_descr %}</p>
+                </div>
+            </div>
+            <div class="left half no-pad-sm col-lg-6 col-md-6 col-sm-12 col-xs-12">
+                <div class="info-block">
+                    <div class="row center-xs">
+                        <div class="col">
+                            <h2>{% t developer-guides.external %}</h2>
+                        </div>
+                    </div>
+                    <p><i>{% t developer-guides.external_head %}</i></p>
+                    <h3><span class="icon-globe"></span><a href="https://monerodocs.org/">Monerodocs.org</a></h3>
+                        <p>{% t developer-guides.monerodocs %}</p>
+                    <h3><a href="https://github.com/moneroexamples"><span class="icon-github"></span>Moneroexamples</a></h3>
+                        <p>{% t developer-guides.moneroexamples %}</p>
+                    <h3><a href="https://github.com/monero-ecosystem"><span class="icon-github"></span>Monero Ecosystem project</a></h3>
+                        <p>{% t developer-guides.moneroecosystem %}</p>
+                    <h3><span class="icon-globe"></span><a href="https://monero.stackexchange.com">Monero StackExchange</a></h3>
+                        <p>{% t developer-guides.monerose %}</p>
+                </div>
+            </div>
         </div>
     </section>
 </div>