popover implementation

This commit is contained in:
Jacky Zhao 2022-01-03 13:18:31 -05:00
parent 2b432d7f0b
commit 4a3c4fdef5
9 changed files with 81 additions and 18 deletions

View File

@ -179,8 +179,7 @@ article {
font-family: Source Sans Pro; font-family: Source Sans Pro;
font-weight: 600; font-weight: 600;
// internal link &.internal-link {
&[href^="./"], &[href^="/"] {
text-decoration: none; text-decoration: none;
background-color: transparentize(#8f9fa9, 0.85); background-color: transparentize(#8f9fa9, 0.85);
padding: 0 0.1em; padding: 0 0.1em;
@ -464,3 +463,33 @@ header {
} }
} }
} }
.popover {
z-index: 999;
position: absolute;
width: 15em;
display: inline;
background-color: var(--light);
padding: 1em;
border: 1px solid var(--outlinegray);
border-radius: 5px;
transform: translate(-50%, 40%);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
transition-delay: 0.3s;
&.visible {
opacity: 1;
transform: translate(-50%, 20%);
}
& > h3 {
margin: 0.5em 0;
}
& > p {
margin: 0;
font-weight: 400;
}
}

View File

@ -4,7 +4,7 @@ description:
Here is the page description. This is an example Quartz site that details installation, Here is the page description. This is an example Quartz site that details installation,
setup, customization, and troubleshooting for Quartz itself. setup, customization, and troubleshooting for Quartz itself.
page_title: page_title:
"🪴 Quartz v3" "🪴 Quartz 3"
links: links:
- link_name: Twitter - link_name: Twitter
link: https://twitter.com/_jzhao link: https://twitter.com/_jzhao

View File

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

View File

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

View File

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

View File

@ -11,9 +11,6 @@
} }
</style> </style>
<script> <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 curPage = {{ strings.TrimRight "/" .Page.RelPermalink }}
const pathColors = {{$.Site.Data.graphConfig.paths}} const pathColors = {{$.Site.Data.graphConfig.paths}}
let depth = {{$.Site.Data.graphConfig.depth}} let depth = {{$.Site.Data.graphConfig.depth}}

View File

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

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>

View File

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