Updated use case template

assets/css/devportal.css

@@ -778,12 +778,19 @@ a.current {
 }
 
 /* Use Cases ---------------------------------------------------------------- */
+.use-case-steps {
+  padding-left: 1.5rem;
+  margin-left: 1.5rem;
+  border-left: 1px dashed #3B4147;
+  position: relative;
+}
+
 .use-case-step-num {
   border: 1px solid #3B4147;
   border-radius: 50%;
   padding: 0.9rem;
   position: absolute;
-  left: 1.8rem;
+  left: -1.8rem;
   height: 3.5rem;
   width: 3.5rem;
   text-align: center;
@@ -796,18 +803,19 @@ a.current {
   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 #3B4147;
+.use-case-steps p {
+  margin-left: .8rem;
 }
-.use-case h2 {
-  margin-left: 5rem;
+
+.use-case-steps h2 {
+  margin-left: .8rem;
   margin-top: 0;
 }
 
+.use-case-steps h2:first-of-type:before {
+  display: none;
+}
+
 /* Landing Pages ------------------------------------------------------------ */
 
 .landing p {

content/use-cases/contribute-code-to-ripple-lib.md

@@ -3,6 +3,7 @@
 Want to contribute code or a bug report to help improve `ripple-lib`, the official client library for [RippleAPI](rippleapi-reference.html)? RippleAPI is a JavaScript API for interacting with the XRP Ledger. Here’s a roadmap to the high-level tasks that’ll have you reviewing code and functionality in no time.
 
 
+<!-- USE_CASE_STEPS_START -->
 {% set n = cycler(* range(1,99)) %}
 
 <span class="use-case-step-num">{{n.next()}}</span>

content/use-cases/contribute-code-to-rippled.md

@@ -2,9 +2,9 @@
 
 Want to contribute code or a bug report to help improve `rippled`, the core peer-to-peer server that manages the XRP Ledger? Here’s a roadmap to the high-level tasks that’ll have you reviewing code and functionality in no time.
 
+<!-- USE_CASE_STEPS_START -->
 {% set n = cycler(* range(1,99)) %}
 
-
 <span class="use-case-step-num">{{n.next()}}</span>
 ## [Access the `rippled` repo](https://github.com/ripple/rippled)
 

content/use-cases/list-xrp-in-your-exchange.md

@@ -2,6 +2,7 @@
 
 Does your exchange want to list XRP, enabling your users to deposit, trade, and withdraw XRP? Here's a roadmap to the high-level tasks you'll need to perform.
 
+<!-- USE_CASE_STEPS_START -->
 {% set n = cycler(* range(1,99)) %}
 
 <span class="use-case-step-num">{{n.next()}}</span>

content/use-cases/run-a-rippled-validator.md

@@ -2,10 +2,9 @@
 
 Each `rippled` server (not running in stand-alone mode) connects to a network of peers, relays cryptographically signed transactions, and maintains a local copy of the complete shared global ledger. A `rippled` server running in validator mode additionally participates in the consensus process and is a part of an interconnected web of validators who each trust a specific set of validators not to collude. Here’s a roadmap to the high-level tasks you’ll need to perform to run a `rippled` validator.
 
-
+<!-- USE_CASE_STEPS_START -->
 {% set n = cycler(* range(1,99)) %}
 
-
 <span class="use-case-step-num">{{n.next()}}</span>
 <!-- <span class="use-case-step-length">(1 hour)</span> -->
 ## [Understand what it means to run a validator](rippled-server-modes.html#reasons-to-run-a-validator)

dactyl-config.yml

@@ -2755,7 +2755,11 @@ pages:
         template: template-use-case.html
         useful_background:
             - amendments.html
-            - the-rippled-server.html #TODO - add to useful_background when available: fee voting, consensus principles & rules
+            - the-rippled-server.html
+            - fee-voting.html
+            - consensus-principles-and-rules.html
+        filters:
+            - use_case
         targets:
             - local
 
@@ -2767,6 +2771,8 @@ pages:
             - xrp-ledger-overview.html
             - reliable-transaction-submission.html
             - xrp.html
+        filters:
+            - use_case
         targets:
             - local
 
@@ -2777,6 +2783,8 @@ pages:
         useful_background:
             - consensus.html
             - amendments.html #TODO add to useful_background: stand-alone mode, rippled.cfg reference (future feature)
+        filters:
+            - use_case
         targets:
             - local
 
@@ -2787,6 +2795,8 @@ pages:
         useful_background:
             - rippleapi-reference.html
             - get-started-with-rippleapi-for-javascript.html
+        filters:
+            - use_case
         targets:
             - local
 

tool/filter_use_case.py

@@ -0,0 +1,33 @@
+################################################################################
+## Use Case Filter                                                            ##
+## Author: Rome Reginelli                                                     ##
+## Copyright: Ripple Labs, Inc. 2019                                          ##
+##                                                                            ##
+## Nests a comment-delineated section into a use-case-steps div so it can be  ##
+## styled properly.                                                           ##
+################################################################################
+
+import re
+
+START_REGEX = re.compile(r"<!--\s*USE_CASE_STEPS_START\s*-->")
+START_REPL = '<div class="use-case-steps">'
+END_REGEX = re.compile(r"<!--\s*USE_CASE_STEPS_END\s*-->")
+END_REPL = '</div><!--/.use-case-steps-->'
+
+def filter_html(html, mode="html", **kwargs):
+    """
+    Turn multicode comments into a div (after markdown inside is parsed). You
+    can use this div for styling even in PDF format. Doesn't apply to Markdown
+    since most parsers won't parse markdown inside HTML blocks.
+    """
+
+    if mode == "md":
+        return html
+
+    html = re.sub(START_REGEX, START_REPL, html, count=1)
+    if re.search(END_REGEX, html):
+        html = re.sub(END_REGEX, "", html)
+    else:
+        html = html+"\n"+END_REPL+"\n"
+
+    return html