tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions 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 2b432d7f0b
commit 4a3c4fdef5
9 changed files with 81 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
assets/base.scss
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;
}
}

2
data/config.yaml
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

9
layouts/_default/_markup/render-link.html
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
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
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
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
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 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(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')