From eb62dab0a2cd7c4f96f06dc646a6a83b834bc74d Mon Sep 17 00:00:00 2001
From: mDuo13 <mduo13@gmail.com>
Date: Mon, 23 Apr 2018 19:26:57 -0700
Subject: [PATCH] Draft use case template

---
 5layers.yml                     | 10 ++++++++++
 assets/css/devportal.css        | 31 +++++++++++++++++++++++++++++++
 content/use-case-listing-xrp.md | 25 +++++++++++++++++++++++++
 tool/template-use-case.html     | 25 +++++++++++++++++++++++++
 4 files changed, 91 insertions(+)
 create mode 100644 content/use-case-listing-xrp.md
 create mode 100644 tool/template-use-case.html

diff --git a/5layers.yml b/5layers.yml
index 05c80f60fa..f9ff9fe434 100644
--- a/5layers.yml
+++ b/5layers.yml
@@ -331,6 +331,16 @@ pages:
         targets:
             - local
 
+    -   md: use-case-listing-xrp.md
+        funnel: Use Cases
+        template: template-use-case.html
+        useful_background:
+            - concept-xrp-ledger-intro.html
+            - tutorial-reliable-transaction-submission.html
+            - concept-money.html
+        targets:
+            - local
+
     -   md: dev-tools.md
         funnel: Dev Tools
         filters:
diff --git a/assets/css/devportal.css b/assets/css/devportal.css
index 35907b6a2e..0558e0b11c 100644
--- a/assets/css/devportal.css
+++ b/assets/css/devportal.css
@@ -878,3 +878,34 @@ th {
   width: auto;
   text-align: center;
 }
+
+/* Use Cases stuff----------------------- */
+.use-case-step-num {
+  border: 1px solid #333;
+  border-radius: 50%;
+  padding: 0.9rem;
+  position: absolute;
+  left: 1.8rem;
+  height: 3.5rem;
+  width: 3.5rem;
+  text-align: center;
+  background-color: white;
+}
+
+.use-case-step-length {
+  float: right;
+  color: #888;
+  font-size: 16px;
+}
+
+.use-case p:not(:first-of-type) {
+  margin-top: .8rem;
+  margin-bottom: -.6rem;
+  padding-left: 2.5rem;
+  margin-left: 2.5rem;
+  border-left: 1px dashed #333;
+}
+.use-case h2 {
+  margin-left: 5rem;
+  margin-top: 0;
+}
diff --git a/content/use-case-listing-xrp.md b/content/use-case-listing-xrp.md
new file mode 100644
index 0000000000..daefa95080
--- /dev/null
+++ b/content/use-case-listing-xrp.md
@@ -0,0 +1,25 @@
+# List XRP in Your Exchange (Experimental)
+
+Does your exchange want to list XRP? Here's a roadmap to the high-level tasks you'll need to perform. When you've completed each of these tasks, you'll have your exchange listing XRP.
+
+{% set n = cycler(* range(1,99)) %}
+
+<span class="use-case-step-num">{{n.next()}}</span>
+<span class="use-case-step-length">(1 hour)</span>
+## [Set Up and Run a rippled Server](tutorial-rippled-setup.html)
+
+{{lipsum(n=1, html=False)}}
+
+
+<span class="use-case-step-num">{{n.next()}}</span>
+<span class="use-case-step-length">(5 minutes)</span>
+## [Get Test Net XRP](xrp-test-net-faucet.html)
+
+{{lipsum(n=1, html=False)}}
+
+
+<span class="use-case-step-num">{{n.next()}}</span>
+<span class="use-case-step-length">(1 hour)</span>
+## [Try Out XRP Ledger Integration Tools](websocket-api-tool.html)
+
+{{lipsum(n=1, html=False)}}
diff --git a/tool/template-use-case.html b/tool/template-use-case.html
new file mode 100644
index 0000000000..97ddbcd7e7
--- /dev/null
+++ b/tool/template-use-case.html
@@ -0,0 +1,25 @@
+{% extends "template-base.html" %}
+
+{% block main %}
+  <article class="use-case p-3">
+    <div class="content">
+        {{ content }}
+    </div>
+  </article>
+{% endblock %}
+
+{% block right_sidebar %}
+  <div class="card" id="use-case-related">
+    <p class="in-this-doc card-header">Useful Background:</p>
+    <div class="card-body">
+      <div class="curated-links">
+        <ol>
+          {% for link in currentpage.useful_background %}
+            {% set linkpage = pages|selectattr("html", "equalto", link)|first %}
+            <li><a href="{{linkpage.html}}">{{linkpage.name}}</a></li>
+          {% endfor %}
+        </ol>
+      </div><!--/.curated-links-->
+    </div><!--/.card-body-->
+  </div>
+{% endblock %}