ndumas
/
quartz
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

popover implementation

Browse Source
hugo
Jacky Zhao 3 years ago
parent 2b432d7f0b
commit 4a3c4fdef5
9 changed files with 81 additions and 18 deletions
Show Stats Download Patch File Download Diff File

33
assets/base.scss
Unescape Escape 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;
@ -463,4 +462,34 @@ header {
opacity: 0.6; opacity: 0.6;
} }
} }
}
.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
data/config.yaml
Unescape Escape View File

@ -4,9 +4,9 @@ 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
- link_name: Github - link_name: Github
link: https://github.com/jackyzha0 link: https://github.com/jackyzha0

9
layouts/_default/_markup/render-link.html
Unescape Escape 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 -}}

2
layouts/_default/taxonomy.html
Unescape Escape 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)) }}

2
layouts/_default/term.html
Unescape Escape 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>

3
layouts/partials/graph.html
Unescape Escape 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}}

10
layouts/partials/head.html
Unescape Escape 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" .}}

29
layouts/partials/popover.html
Unescape Escape 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
Unescape Escape 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')

Write Preview
Loading…
Cancel
Save