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

This commit is contained in:
Jacky Zhao 2021-12-23 14:05:27 -08:00
parent c64322ad3f
commit 56d2382c28
4 changed files with 15 additions and 15 deletions

View file

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

View file

@ -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)

View file

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

View file

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