From f28d05fc44d3aa5b026e1b1d0dd288cdb49c4b63 Mon Sep 17 00:00:00 2001
From: Zed <zedeus@pm.me>
Date: Mon, 23 Sep 2019 01:42:00 +0200
Subject: [PATCH] Use markdown for about page

---
 nitter.nimble       |  1 +
 public/md/about.md  | 34 ++++++++++++++++++++++++++++++++++
 src/sass/index.scss |  9 +++++----
 src/views/about.nim | 29 ++++-------------------------
 4 files changed, 44 insertions(+), 29 deletions(-)
 create mode 100644 public/md/about.md

diff --git a/nitter.nimble b/nitter.nimble
index c5dac77..f34ad0b 100644
--- a/nitter.nimble
+++ b/nitter.nimble
@@ -18,6 +18,7 @@ requires "q >= 0.0.7"
 requires "nimcrypto >= 0.3.9"
 requires "karax#b99a543"
 requires "sass"
+requires "markdown"
 
 
 # Tasks
diff --git a/public/md/about.md b/public/md/about.md
new file mode 100644
index 0000000..b2e2b00
--- /dev/null
+++ b/public/md/about.md
@@ -0,0 +1,34 @@
+# About
+
+Nitter is a free and open source alternative Twitter front-end focused on
+privacy. The source is available on GitHub at <https://github.com/zedeus/nitter>
+
+* No JavaScript or ads
+* All requests go through the backend, client never talks to Twitter
+* Prevents Twitter from tracking your IP or JavaScript fingerprint
+* Uses unofficial API (no developer account required)
+* AGPLv3 licensed, no proprietary instances permitted
+* Lightweight (for @nim_lang, 36KB vs 580KB from twitter.com)
+* Native RSS feeds
+
+## Why use Nitter?
+
+It's basically impossible to use Twitter without JavaScript enabled. If you try,
+you're redirected to the legacy mobile version which is awful both functionally
+and aesthetically. For privacy-minded folks, preventing JavaScript analytics and
+potential IP-based tracking is important, but apart from using the legacy mobile
+version and a VPN, it's impossible.
+
+Using an instance of Nitter (hosted on a VPS for example), you can browse
+Twitter without JavaScript while retaining your privacy. In addition to
+respecting your privacy, Nitter is on average around 15 times lighter than
+Twitter, and in some cases serves pages faster.
+
+In the future a simple account system will be added that lets you follow Twitter
+users, allowing you to have a clean chronological timeline without needing a
+Twitter account.
+
+## Contact
+
+Feel free to join our Freenode IRC channel at #nitter, or our
+[Matrix server](https://matrix.to/#/#nitter:matrix.org).
diff --git a/src/sass/index.scss b/src/sass/index.scss
index 0d8c50c..ad157d9 100644
--- a/src/sass/index.scss
+++ b/src/sass/index.scss
@@ -62,10 +62,6 @@ ul {
     padding-left: 1.3em;
 }
 
-ul.about-list {
-    margin-bottom: 14px;
-}
-
 .container {
     display: flex;
     flex-wrap: wrap;
@@ -87,6 +83,11 @@ ul.about-list {
     background-color: $bg_overlays;
     padding: 10px 15px;
     align-self: start;
+
+    ul {
+        margin-bottom: 14px;
+    }
+
 }
 
 .verified-icon {
diff --git a/src/views/about.nim b/src/views/about.nim
index 3578f90..95660fb 100644
--- a/src/views/about.nim
+++ b/src/views/about.nim
@@ -1,29 +1,8 @@
 import karax/[karaxdsl, vdom]
+import markdown
+
+let about = markdown(readFile("public/md/about.md"))
 
 proc renderAbout*(): VNode =
   buildHtml(tdiv(class="overlay-panel")):
-    h1: text "About"
-    p:
-      text "Nitter is a free and open source alternative Twitter front-end focused on privacy. "
-      text "The source is available on GitHub at "
-      a(href="https://github.com/zedeus/nitter"): text "https://github.com/zedeus/nitter"
-
-    ul(class="about-list"):
-      li: text "No JavaScript or ads"
-      li: text "All requests go through the backend, client never talks to Twitter"
-      li: text "Prevents Twitter from tracking your IP or JavaScript fingerprint"
-      li: text "Uses unofficial API (no developer account required)"
-      li: text "AGPLv3 licensed, no proprietary instances permitted"
-      li: text "Lightweight (for @nim_lang, 36KB vs 580KB from twitter.com)"
-
-    h2: text "Why use Nitter?"
-    p: text "It's basically impossible to use Twitter without JavaScript enabled. If you try, you're redirected to the legacy mobile version which is awful both functionally and aesthetically. For privacy-minded folks, preventing JavaScript analytics and potential IP-based tracking is important, but apart from using the legacy mobile version and a VPN, it's impossible."
-    p: text "Using an instance of Nitter (hosted on a VPS for example), you can browse Twitter without JavaScript while retaining your privacy. In addition to respecting your privacy, Nitter is on average around 15 times lighter than Twitter, and in some cases serves pages faster."
-    p: text "In the future a simple account system will be added that lets you follow Twitter users, allowing you to have a clean chronological timeline without needing a Twitter account."
-
-    h2: text "Contact"
-    p:
-      text "Feel free to join our Freenode IRC channel at #nitter, or our "
-      a(href="https://riot.im/app/#/room/#nitter:matrix.org"):
-        text "Matrix server"
-      text "."
+    verbatim about