feat: link previews to page-list (closes #173)

Jacky Zhao

2022-08-11 a78926ede5a951b2ba48e506c93d25060e240c0e

feat: link previews to page-list (closes #173)

 assets/js/util.js

@@ -58,14 +58,12 @@
  // try to find direct match first
  const directMatchIdx = content.indexOf(term)
  if (directMatchIdx !== -1) {
    console.log(directMatchIdx)
    const h = highlightWindow
    const before = content.substring(0, directMatchIdx).split(" ").slice(-h)
    const after = content
      .substring(directMatchIdx + term.length, content.length - 2)
      .split(" ")
      .slice(0, h)
    console.log(before, after)
    return (
      (before.length == h ? `...${before.join(" ")}` : before.join(" ")) +
      `<span class="search-highlight">${term}</span>` +

 assets/styles/base.scss

@@ -592,9 +592,13 @@
    font-size: 0.8rem;
  }

  & > p {
    margin: 0;
    padding: 0.5rem 0;
  } 

  & > p, & > a {
    font-size: 1rem;
    margin: 0.7rem 0;
    font-weight: 400;
    user-select: none;
  }

 layouts/partials/footer.html

@@ -3,7 +3,7 @@
<hr/>

{{if $.Site.Data.config.enableFooter}}
<div class="page-end">
<div class="page-end" id="footer">
    <div class="backlinks-container">
        {{partial "backlinks.html" .}}
    </div>
@@ -13,4 +13,4 @@
</div>
{{end}}

{{partial "contact.html" .}}
{{partial "contact.html" .}}

 layouts/partials/footerIndex.html

@@ -1,6 +1,6 @@
{{if $.Site.Data.config.enableFooter}}
  {{if $.Site.Data.graphConfig.enableGlobalGraph}}
      <div class="page-end">
      <div class="page-end" id="footer">

        <div>
            {{partial "graph.html" .}}
@@ -9,7 +9,7 @@
      </div>
  {{else}}
      <hr/>
      <div class="page-end">
      <div class="page-end" id="footer">
        <div class="backlinks-container">
            {{partial "backlinks.html" .}}
        </div>

 layouts/partials/head.html

@@ -112,25 +112,7 @@
      {{if $.Site.Data.config.enableCallouts -}}
      addCollapsibleCallouts();
      {{ end }}

      {{if $.Site.Data.config.enableFooter}}
      const container = document.getElementById("graph-container")
      // retry if the graph is not ready
      if (!container) return requestAnimationFrame(render)
      // clear the graph in case there is anything within it
      container.textContent = ""

      const drawGlobal = isHome && {{$.Site.Data.graphConfig.enableGlobalGraph}};
      drawGraph(
          {{strings.TrimRight "/" .Site.BaseURL}},
          drawGlobal,
          {{$.Site.Data.graphConfig.paths}},
          drawGlobal ? {{$.Site.Data.graphConfig.globalGraph}} : {{$.Site.Data.graphConfig.localGraph}}
        );

      {{end}}


     
      {{if $.Site.Data.config.enableLinkPreview}}
      initPopover(
        {{strings.TrimRight "/" .Site.BaseURL }},
@@ -138,6 +120,26 @@
        {{$.Site.Data.config.enableLatex}}
      )
      {{end}}

      {{if $.Site.Data.config.enableFooter}}
      const footer = document.getElementById("footer")
      if (footer) {
        const container = document.getElementById("graph-container")
        // retry if the graph is not ready
        if (!container) return requestAnimationFrame(render)
        // clear the graph in case there is anything within it
        container.textContent = ""

        const drawGlobal = isHome && {{$.Site.Data.graphConfig.enableGlobalGraph}};
        drawGraph(
            {{strings.TrimRight "/" .Site.BaseURL}},
            drawGlobal,
            {{$.Site.Data.graphConfig.paths}},
            drawGlobal ? {{$.Site.Data.graphConfig.globalGraph}} : {{$.Site.Data.graphConfig.localGraph}}
          );

        }
      {{end}}
    }

    const init = (doc = document) => {

 layouts/partials/page-list.html

@@ -6,7 +6,7 @@
                {{partial "date-fmt.html" .}}
            </p>
            <div class="desc">
                <h3><a href="{{ .Permalink }}">{{- .Title -}}</a></h3>
              <h3><a href="{{ .Permalink }}" class="internal-link" data-src="{{ .RelPermalink }}">{{- .Title -}}</a></h3>
            </div>
            <div class="spacer"></div>
            <ul class="tags">