popover implementation

3 years ago · 4a3c4fdef5
parent 2b432d7f0b
commit 4a3c4fdef5
9 changed files with 81 additions and 18 deletions
--- 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;
@ -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;
+  }
+}
--- a/data/config.yaml
+++ b/data/config.yaml
@ -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
--- 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}}
+{{- else -}}
+{{$fixedUrl := (cond (hasPrefix $trimmed "/") $trimmed (print "/" $trimmed)) | urlize}}
+<a href="{{$fixedUrl}}" rel="noopener" class="internal-link" data-src="{{$fixedUrl}}">{{ .Text | safeHTML }}</a>
+{{- end -}}
--- 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)) }}
--- 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>
--- 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}}
--- 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" .}}
--- a/layouts/partials/popover.html
+++ 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>
--- 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')