From de84466c4e3a880e75c42c2bfe3f430272eb51e9 Mon Sep 17 00:00:00 2001
From: Zef Hemel <zef@zef.me>
Date: Mon, 29 Aug 2022 16:48:52 +0200
Subject: [PATCH] Styling horizontal lines

---
 packages/common/customtags.ts  | 1 +
 packages/common/parser.ts      | 1 +
 packages/web/style.ts          | 1 +
 packages/web/styles/theme.scss | 7 +++++++
 4 files changed, 10 insertions(+)

diff --git a/packages/common/customtags.ts b/packages/common/customtags.ts
index 75eb726..206db42 100644
--- a/packages/common/customtags.ts
+++ b/packages/common/customtags.ts
@@ -10,3 +10,4 @@ export const CommentMarkerTag = Tag.define();
 export const BulletList = Tag.define();
 export const OrderedList = Tag.define();
 export const Highlight = Tag.define();
+export const HorizontalRuleTag = Tag.define();
diff --git a/packages/common/parser.ts b/packages/common/parser.ts
index 3af1209..fc1dc1a 100644
--- a/packages/common/parser.ts
+++ b/packages/common/parser.ts
@@ -148,6 +148,7 @@ export default function buildMarkdown(mdExtensions: MDExt[]): Language {
             "TableHeader/...": t.heading,
             TableCell: t.content,
             CodeInfo: ct.CodeInfoTag,
+            HorizontalRule: ct.HorizontalRuleTag,
           }),
           ...mdExtensions.map((mdExt) =>
             styleTags(mdExtensionStyleTags(mdExt))
diff --git a/packages/web/style.ts b/packages/web/style.ts
index 3c5bb50..a2030fa 100644
--- a/packages/web/style.ts
+++ b/packages/web/style.ts
@@ -42,6 +42,7 @@ export default function highlightStyles(mdExtension: MDExt[]) {
     { tag: t.processingInstruction, class: "sb-meta" },
     // { tag: t.content, class: "tbl-content" },
     { tag: t.punctuation, class: "sb-punctuation" },
+    { tag: ct.HorizontalRuleTag, class: "sb-hr" },
     ...mdExtension.map((mdExt) => {
       return { tag: mdExt.tag, ...mdExt.styles, class: mdExt.className };
     }),
diff --git a/packages/web/styles/theme.scss b/packages/web/styles/theme.scss
index fc974c2..8d34d38 100644
--- a/packages/web/styles/theme.scss
+++ b/packages/web/styles/theme.scss
@@ -132,6 +132,13 @@
   color: blue;
 }
 
+.sb-hr {
+  background-color: #f5f5f5;
+  line-height: 0.9em;
+  display: block;
+  color: #8d8a8a;
+}
+
 .sb-naked-url {
   color: #0330cb;
   text-decoration: underline;