scapegoat/Docs2.git

parent: 2b432d7f | patch | commit | ignore whitespace

Jacky Zhao

2022-01-03 4a3c4fdef550547aa80947ebaff1bda44b943d4d

popover implementation

1 files added

8 files modified

	assets/base.scss	33 ●●●●● patch \| view \| raw \| blame \| history
	data/config.yaml	4 ●●●●● patch \| view \| raw \| blame \| history
	layouts/_default/_markup/render-link.html	9 ●●●●● patch \| view \| raw \| blame \| history
	layouts/_default/taxonomy.html	2 ●●●●● patch \| view \| raw \| blame \| history
	layouts/_default/term.html	2 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/graph.html	3 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/head.html	10 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/popover.html	29 ●●●●● patch \| view \| raw \| blame \| history
	layouts/partials/search.html	7 ●●●●● patch \| view \| raw \| blame \| history

 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;
  }
}

 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

 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 -}}

 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)) }}

 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>

 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}}

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

 layouts/partials/popover.html

New 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>

 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')

			@@ -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;
			}
			}

			@@ -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

			@@ -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 -}}

			@@ -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)) }}

			@@ -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>

			@@ -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}}

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

New 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>

			@@ -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')