added permalinks (pain pain go away)

crates/treehouse/src/html/tree.rs

@@ -83,6 +83,8 @@ pub fn branch_to_html(s: &mut String, treehouse: &mut Treehouse, file_id: FileId
                 BranchKind::Collapsed => "<details>",
             });
             s.push_str("<summary>");
+        } else {
+            s.push_str("<div>");
         }
 
         let raw_block_content = &source[branch.content.clone()];
@@ -108,10 +110,23 @@ pub fn branch_to_html(s: &mut String, treehouse: &mut Treehouse, file_id: FileId
         });
         markdown::push_html(s, markdown_parser);
 
+        s.push_str("<th-bb>");
+        {
+            write!(
+                s,
+                "<a class=\"branch-link\" href=\"#{}\" title=\"permalink\"></a>",
+                EscapeAttribute(&attributes.id)
+            )
+            .unwrap();
+        }
+        s.push_str("</th-bb>");
+
         if !branch.children.is_empty() {
             s.push_str("</summary>");
             branches_to_html(s, treehouse, file_id, &branch.children);
             s.push_str("</details>");
+        } else {
+            s.push_str("</div>");
         }
     }
     s.push_str("</li>");

static/css/tree.css

@@ -12,6 +12,8 @@
 
     /* I have no clue why this works, deal with it */
     --tree-hover-expansion: 0.01px;
+
+    position: relative;
 }
 
 .tree details>summary {
@@ -21,6 +23,29 @@
 
 .tree li {
     list-style: none;
+
+    display: flex;
+    flex-direction: row;
+
+    position: relative;
+}
+
+.tree li>*:first-child {
+    width: 100%;
+}
+
+.tree li>div:first-child {
+    box-sizing: border-box;
+}
+
+.tree li>div:first-child,
+.tree li>details>summary:first-child {
+    padding-right: 32px;
+}
+
+.tree li>div:first-child:hover {
+    border-bottom: 1px solid rgba(0, 0, 0, 15%);
+    margin-bottom: -1px;
 }
 
 .tree details>summary {
@@ -52,3 +77,32 @@
 .tree details[open]>summary {
     background-image: url('../svg/collapse.svg');
 }
+
+.tree th-bb {
+    height: 24px;
+    margin: 4px;
+
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    display: flex;
+    flex-direction: row;
+
+    opacity: 0%;
+}
+
+.tree li>details>summary:hover>th-bb,
+.tree li>div:hover>th-bb {
+    opacity: 100%;
+}
+
+.tree .branch-link {
+    background-image: url("../svg/link.svg");
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    opacity: 35%;
+
+    width: 24px;
+    height: 24px;
+}

static/svg/go.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M10.5858 7L8.29291 4.70711L9.70712 3.29289L14.4142 8L9.70712 12.7071L8.29291 11.2929L10.5858 9H3V7H10.5858Z"
+        fill="currentColor" />
+</svg>

static/svg/link.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd"
+        d="M7.65686 2L9.07107 3.41422C9.75158 4.09473 10.1356 4.95943 10.2232 5.84784C11.1116 5.93544 11.9763 6.31949 12.6569 7L14.0711 8.41422C15.6332 9.97631 15.6332 12.509 14.0711 14.0711C12.509 15.6332 9.97631 15.6332 8.41422 14.0711L7 12.6569C6.31949 11.9763 5.93544 11.1116 5.84784 10.2232C4.95943 10.1356 4.09473 9.75158 3.41422 9.07107L2 7.65686C0.437906 6.09476 0.437906 3.5621 2 2C3.5621 0.437906 6.09476 0.437906 7.65686 2ZM8.27486 9.68907C8.13056 9.77429 7.98205 9.84968 7.83031 9.91523C7.85114 10.3978 8.04577 10.8742 8.41422 11.2426L9.82843 12.6569C10.6095 13.4379 11.8758 13.4379 12.6569 12.6569C13.4379 11.8758 13.4379 10.6095 12.6569 9.82843L11.2426 8.41422C10.8742 8.04577 10.3978 7.85114 9.91523 7.83031C9.84968 7.98204 9.7743 8.13055 9.68907 8.27485L11.5355 10.1213L10.1213 11.5355L8.27486 9.68907ZM7.65686 4.82843C8.0253 5.19688 8.21994 5.67331 8.24077 6.15585C8.08903 6.22139 7.94053 6.29678 7.79623 6.382L5.87869 4.46447L4.46448 5.87868L6.38201 7.79621C6.29678 7.94052 6.2214 8.08903 6.15585 8.24077C5.67331 8.21994 5.19688 8.0253 4.82843 7.65686L3.41422 6.24264C2.63317 5.46159 2.63317 4.19527 3.41422 3.41422C4.19527 2.63317 5.46159 2.63317 6.24264 3.41422L7.65686 4.82843Z"
+        fill="currentColor" />
+</svg>