fix relative link styling, change graph and backlinks to refer to name rather than path

assets/base.scss

@@ -128,9 +128,6 @@ td, th {
 article a {
   font-family: Source Sans Pro;
   font-weight: 600;
-  text-decoration: underline;
-  text-decoration-color: var(--tertiary);
-  text-decoration-thickness: .15em;
 }
 
 sup > a {
@@ -191,10 +188,11 @@ hr {
 }
 
 // internal link
-a[href^="/"] {
+a[href^="./"] {
   text-decoration: none;
-  background-color: #afbfc922;
+  background-color: #afbfc933;
   padding: 0 0.2em;
+  font-weight: 600;
   border-radius: 3px;
 }
 
@@ -370,4 +368,4 @@ header {
       }
     }
   }
-}
+}

content/_index.md

@@ -15,4 +15,4 @@ Not convinced yet? Look at some [community digital gardens](moc/showcase) built
 
 ## Troubleshooting
 - 🚧 [Troubleshooting and FAQ](notes/troubleshooting.md)
-- 🐛 [Submit an Issue](https://github.com/jackyzha0/quartz/issues)
+- 🐛 [Submit an Issue](https://github.com/jackyzha0/quartz/issues)

layouts/partials/backlinks.html

@@ -4,13 +4,14 @@
     {{$host := strings.TrimRight "/" $url.Path }}
     {{$curPage := strings.TrimPrefix $host (strings.TrimRight "/" .Page.RelPermalink) }}
     {{$inbound := index $.Site.Data.linkIndex.index.backlinks $curPage}}
+    {{$contentTable := $.Site.Data.contentIndex}}
     {{if $inbound}}
     {{- range $inbound -}}
         {{$src := index . "source"}}
         {{$src = replace $src " " "-"}}
 
         <li>
-            <a href="{{$src}}">{{index . "source"}}</a>
+            <a href="{{$src}}">{{index (index $contentTable $src) "title"}}</a>
         </li>
     {{- end -}}
     {{else}}
@@ -18,4 +19,4 @@
         No backlinks found
     </li>
     {{end}}
-</ul>
+</ul>

layouts/partials/graph.html

@@ -13,6 +13,7 @@
 <script>
   const index = {{$.Site.Data.linkIndex.index}}
   const links = {{$.Site.Data.linkIndex.links}}
+  const content = {{$.Site.Data.contentIndex}}
   const curPage = {{ strings.TrimRight "/" .Page.RelPermalink }}
   const pathColors = {{$.Site.Data.graphConfig.paths}}
 
@@ -137,7 +138,7 @@
       const neighbours = parseIdsFromLinks([...(index.links[d.id] || []), ...(index.backlinks[d.id] || [])])
       const neighbourNodes = d3.selectAll(".node").filter(d => neighbours.includes(d.id))
       const currentId = d.id
-      const links = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
+      const linkNodes = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
 
       // highlight neighbour nodes
       neighbourNodes
@@ -146,7 +147,7 @@
         .attr("fill", color)
 
       // highlight links
-      links
+      linkNodes
         .transition()
         .duration(200)
         .attr("stroke", "var(--g-link-active)")
@@ -165,9 +166,9 @@
         .attr("fill", color)
 
       const currentId = d.id
-      const links = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
+      const linkNodes = d3.selectAll(".link").filter(d => d.source.id === currentId || d.target.id === currentId)
 
-      links
+      linkNodes
         .transition()
         .duration(200)
         .attr("stroke", "var(--g-link)")
@@ -184,7 +185,7 @@
   const labels = graphNode.append("text")
     .attr("dx", 12)
     .attr("dy", ".35em")
-    .text((d) => d.id.replace("%20", "-"))
+    .text((d) => content[d.id.replace("%20", "-")].title)
     .style("opacity", 0)
     .style("pointer-events", "none")
     .call(drag(simulation));
@@ -216,4 +217,4 @@
       .attr("x", d => d.x)
       .attr("y", d => d.y);
   });
-</script>
+</script>