popover implementation
This commit is contained in:
Jacky Zhao
parent
51308b20a0
commit
671fe795b2
@ -179,8 +179,7 @@ article {
|
||||
font-family: Source Sans Pro;
|
||||
font-weight: 600;
|
||||
|
||||
// internal link
|
||||
&[href^="./"], &[href^="/"] {
|
||||
&.internal-link {
|
||||
text-decoration: none;
|
||||
background-color: transparentize(#8f9fa9, 0.85);
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -4,7 +4,7 @@ description:
|
||||
Here is the page description. This is an example Quartz site that details installation,
|
||||
setup, customization, and troubleshooting for Quartz itself.
|
||||
page_title:
|
||||
"🪴 Quartz v3"
|
||||
"🪴 Quartz 3"
|
||||
links:
|
||||
- link_name: Twitter
|
||||
link: https://twitter.com/_jzhao
|
||||
|
||||
@ -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 -}}
|
||||
@ -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)) }}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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
29
layouts/partials/popover.html
Normal 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>
|
||||
@ -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')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user