From 4a3c4fdef550547aa80947ebaff1bda44b943d4d Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Mon, 3 Jan 2022 13:18:31 -0500 Subject: [PATCH] popover implementation --- assets/base.scss | 33 +++++++++++++++++++++-- data/config.yaml | 4 +-- layouts/_default/_markup/render-link.html | 9 ++++--- layouts/_default/taxonomy.html | 2 +- layouts/_default/term.html | 2 +- layouts/partials/graph.html | 3 --- layouts/partials/head.html | 10 ++++++- layouts/partials/popover.html | 29 ++++++++++++++++++++ layouts/partials/search.html | 7 +++-- 9 files changed, 81 insertions(+), 18 deletions(-) create mode 100644 layouts/partials/popover.html 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 @@ 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; @@ -463,4 +462,34 @@ header { 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 @@ 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 - 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 -}} {{ .Text | safeHTML }} -{{else}} -{{ .Text | safeHTML }} -{{end}} \ No newline at end of file +{{- else -}} +{{$fixedUrl := (cond (hasPrefix $trimmed "/") $trimmed (print "/" $trimmed)) | urlize}} +{{ .Text | safeHTML }} +{{- 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 @@
{{ range .Site.Taxonomies.tags.ByCount }}
-

{{ .Page.Title | humanize }}

+

{{ .Page.Title }}

{{ .Count }} notes with this tag {{if gt .Count 2}}(showing first 2 results){{end}}

{{ 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" .}}
-

Category: {{.Title | humanize}}

+

Tag: {{.Title | humanize}}

{{partial "page-list.html" .Paginator.Pages}} {{ template "_internal/pagination.html" . }}
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 @@ } {{- end -}} + + + {{ 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 @@ + \ 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')