Draft use case template

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:

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;
+}

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)}}

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 %}