fix relative link styling, change graph and backlinks to refer to name rath...

Jacky Zhao

2021-12-23 56d2382c282431115b2964d440b790ce11f19e72

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

 assets/base.scss

@@ -128,9 +128,6 @@
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 @@
}

// 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 @@
      }
    }
  }
}
}

 content/_index.md

@@ -15,4 +15,4 @@

## 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>