From 4a3c4fdef550547aa80947ebaff1bda44b943d4d Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 03 Jan 2022 18:18:31 +0000
Subject: [PATCH] popover implementation
---
layouts/partials/popover.html | 29 ++++++++++++++
layouts/partials/search.html | 7 +--
data/config.yaml | 4 +-
layouts/partials/graph.html | 3 -
layouts/_default/_markup/render-link.html | 9 ++--
layouts/_default/taxonomy.html | 2
assets/base.scss | 33 +++++++++++++++-
layouts/_default/term.html | 2
layouts/partials/head.html | 10 ++++
9 files changed, 81 insertions(+), 18 deletions(-)
diff --git a/assets/base.scss b/assets/base.scss
index e31f5eb..dcb0ae7 100644
--- a/assets/base.scss
+++ b/assets/base.scss
@@ -179,8 +179,7 @@
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;
@@ -463,4 +462,34 @@
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;
+ }
}
\ No newline at end of file
diff --git a/data/config.yaml b/data/config.yaml
index 1ca6d19..0ebe801 100644
--- a/data/config.yaml
+++ b/data/config.yaml
@@ -4,9 +4,9 @@
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
- link_name: Github
- link: https://github.com/jackyzha0
+ link: https://github.com/jackyzha0
\ No newline at end of file
diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html
index a9a6eca..2bde76c 100644
--- a/layouts/_default/_markup/render-link.html
+++ b/layouts/_default/_markup/render-link.html
@@ -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}}
\ No newline at end of file
+{{- else -}}
+{{$fixedUrl := (cond (hasPrefix $trimmed "/") $trimmed (print "/" $trimmed)) | urlize}}
+<a href="{{$fixedUrl}}" rel="noopener" class="internal-link" data-src="{{$fixedUrl}}">{{ .Text | safeHTML }}</a>
+{{- end -}}
\ No newline at end of file
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
index 45a713a..e0a1e87 100644
--- a/layouts/_default/taxonomy.html
+++ b/layouts/_default/taxonomy.html
@@ -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)) }}
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
index fd01425..58f024b 100644
--- a/layouts/_default/term.html
+++ b/layouts/_default/term.html
@@ -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>
diff --git a/layouts/partials/graph.html b/layouts/partials/graph.html
index f089356..0208562 100644
--- a/layouts/partials/graph.html
+++ b/layouts/partials/graph.html
@@ -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}}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 6814aed..a5d824d 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -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" .}}
diff --git a/layouts/partials/popover.html b/layouts/partials/popover.html
new file mode 100644
index 0000000..d9cc941
--- /dev/null
+++ b/layouts/partials/popover.html
@@ -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>
\ No newline at end of file
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
index 5544bc1..0c853a0 100644
--- a/layouts/partials/search.html
+++ b/layouts/partials/search.html
@@ -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')
--
Gitblit v1.10.0