tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

popover implementation

Browse Source
This commit is contained in:
Jacky Zhao
2022-01-03 13:18:31 -05:00
parent 51308b20a0
commit 671fe795b2
9 changed files with 81 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
layouts/_default/_markup/render-link.html
View File

@@ -1,8 +1,9 @@
{{$trimmed := strings.TrimSuffix ".md" (.Destination | safeURL)}}
{{$trimmed = replace $trimmed "%20" "-" }}
{{$external := strings.HasPrefix $trimmed "http" }}
{{ if $external }}
{{- if $external -}}
<a href="{{ $trimmed }}" rel="noopener">{{ .Text | safeHTML }}</a>
{{else}}
<a href="{{ if (hasPrefix $trimmed "/") }}{{ $trimmed | urlize }}{{ else }}{{ print "/" $trimmed | urlize }}{{ end }}" rel="noopener">{{ .Text | safeHTML }}</a>
{{end}}
{{- else -}}
{{$fixedUrl := (cond (hasPrefix $trimmed "/") $trimmed (print "/" $trimmed)) | urlize}}
<a href="{{$fixedUrl}}" rel="noopener" class="internal-link" data-src="{{$fixedUrl}}">{{ .Text | safeHTML }}</a>
{{- end -}}

2
layouts/_default/taxonomy.html
View File

@@ -17,7 +17,7 @@
<div class="tags">
{{ range .Site.Taxonomies.tags.ByCount }}
<div class="meta">
<h1><a href="{{ .Page.Permalink }}">{{ .Page.Title | humanize }}</a></h1>
<h1><a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a></h1>
<p><b>{{ .Count }}</b> notes with this tag {{if gt .Count 2}}(showing first 2 results){{end}}</p>
</div>
{{ with ($.Site.GetPage (printf "/tags/%s" .Page.Title)) }}

2
layouts/_default/term.html
View File

@@ -13,7 +13,7 @@
{{partial "darkmode.html" .}}
</header>
<article>
<h1>Category: {{.Title | humanize}}</h1>
<h1>Tag: {{.Title | humanize}}</h1>
{{partial "page-list.html" .Paginator.Pages}}
{{ template "_internal/pagination.html" . }}
</article>

3
layouts/partials/graph.html
View File

@@ -11,9 +11,6 @@
}
</style>
<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}}
let depth = {{$.Site.Data.graphConfig.depth}}

10
layouts/partials/head.html
View File

@@ -1,7 +1,7 @@
<head>
<!-- Meta tags -->
<meta charset="UTF-8">
<meta name="description" content="{{$.Site.Data.config.description}}">
<meta name="description" content="{{if .IsHome}}{{$.Site.Data.config.description}}{{else}}{{.Summary}}{{end}}">
<title>{{ if .Title }}{{ .Title }}{{ else }}{{ $.Site.Data.config.page_title }}{{ end }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="/icon.png" />
@@ -23,5 +23,13 @@
{{.Content | safeJS }}
</script>
{{- end -}}
<!-- Preload page vars -->
<script>
const content = {{$.Site.Data.contentIndex}}
const index = {{$.Site.Data.linkIndex.index}}
const links = {{$.Site.Data.linkIndex.links}}
</script>
</head>
{{ template "_internal/google_analytics.html" . }}
{{ partial "popover.html" .}}

29
layouts/partials/popover.html Normal file
View File

@@ -0,0 +1,29 @@
<script>
function htmlToElement(html) {
const template = document.createElement('template')
html = html.trim()
template.innerHTML = html
return template.content.firstChild
}
document.addEventListener("DOMContentLoaded", () => {
[...document.getElementsByClassName("internal-link")]
.forEach(li => {
const linkDest = content[li.dataset.src]
if (linkDest) {
const popoverElement = `<div class="popover">
<h3>${linkDest.title}</h3>
<p>${removeMarkdown(linkDest.content).split(" ", 15).join(" ")}...</p>
</div>`
const el = htmlToElement(popoverElement)
li.appendChild(el)
li.addEventListener("mouseover", () => {
el.classList.add("visible")
})
li.addEventListener("mouseout", () => {
el.classList.remove("visible")
})
}
})
})
</script>

7
layouts/partials/search.html
View File

@@ -89,8 +89,7 @@
}
})
const scrapedContent = {{$.Site.Data.contentIndex}}
for (const [key, value] of Object.entries(scrapedContent)) {
for (const [key, value] of Object.entries(content)) {
contentIndex.add({
id: key,
title: value.title,
@@ -151,8 +150,8 @@
const fetch = id => ({
id,
url: id,
title: scrapedContent[id].title,
content: scrapedContent[id].content
title: content[id].title,
content: content[id].content
})
const source = document.getElementById('search-bar')