From b886f6ceafa009af31f776c7d0bc1ee425ac4f29 Mon Sep 17 00:00:00 2001
From: mDuo13 <mduo13@gmail.com>
Date: Fri, 2 Jul 2021 15:24:10 -0700
Subject: [PATCH] Start replacing FAQ with MD filter

---
 .../concepts/introduction/technical-faq.md    |  6 ++-
 template/page-faq2.html.jinja                 | 44 +++++++++++++++++++
 tool/filter_faq.py                            | 31 +++++++++++++
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 template/page-faq2.html.jinja
 create mode 100644 tool/filter_faq.py

diff --git a/content/concepts/introduction/technical-faq.md b/content/concepts/introduction/technical-faq.md
index 428cfd5b39..4beec00200 100644
--- a/content/concepts/introduction/technical-faq.md
+++ b/content/concepts/introduction/technical-faq.md
@@ -5,8 +5,12 @@ blurb: Get answers to frequently asked questions, covering topics such as valida
 labels:
   - Blockchain
 #top_nav_grouping: Questions
+template: page-faq2.html.jinja
+eyebrow_text: Your Questions About XRPL, Answered
+filters:
+  - faq
 ---
-# Technical FAQ
+# FAQ
 
 ## Validators and Unique Node Lists
 
diff --git a/template/page-faq2.html.jinja b/template/page-faq2.html.jinja
new file mode 100644
index 0000000000..cf17b2e25c
--- /dev/null
+++ b/template/page-faq2.html.jinja
@@ -0,0 +1,44 @@
+{% extends "base.html.jinja" %}
+{% block head %}
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+{% endblock %}
+
+{% block bodyclasses %}no-sidebar{% endblock %}
+{% block mainclasses %}landing{% endblock %}
+
+{% block breadcrumbs %}{% endblock %}
+
+{% block main %}
+
+<div class="position-relative">
+  <img src="./img/backgrounds/faq-bg.svg" class="landing-bg" id="faq-background">
+</div>
+
+<section class="py-26 text-center">
+  <div class="col-lg-5 mx-auto text-center">
+    <div class="d-flex flex-column-reverse">
+      <h1 class="mb-0">{{page.name}}</h1>
+      <h6 class="green-500 mb-3">{{page.eyebrow_text}}</h6>
+    </div>
+  </div>
+</section>
+
+<section class="container-new py-26" id="faq-content">
+  {{content}}
+</section>
+{% endblock %}
+
+
+{% block endbody %}
+
+<script type="application/javascript">
+  gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
+</script>
+{% endblock %}
diff --git a/tool/filter_faq.py b/tool/filter_faq.py
new file mode 100644
index 0000000000..8f8c0afa27
--- /dev/null
+++ b/tool/filter_faq.py
@@ -0,0 +1,31 @@
+################################################
+## FAQ Formatter
+## Author: Rome Reginelli
+## Copyright: Ripple Labs, 2021
+##
+## Styles the FAQ as an accordion of questions.
+################################################
+from bs4 import NavigableString
+
+Q_TAG = "h4"
+
+def filter_soup(soup, **kwargs):
+    qs = soup.find_all(Q_TAG)
+
+    for q in qs:
+        stuff_to_wrap = []
+        el = q
+        while el.next_sibling:
+            el = el.next_sibling
+            if isinstance(el, NavigableString):
+                stuff_to_wrap.append(el)
+            elif el.name != Q_TAG:
+                stuff_to_wrap.append(el)
+            else:
+                # We probably found the next question, stop here
+                break
+
+        wrapper = soup.new_tag("div", class_="q-wrapper")
+        [wrapper.append(el) for el in stuff_to_wrap]
+        q.replace_with(wrapper)
+        wrapper.insert(0, q)