_site/gatsby.html

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">

  <link rel="canonical" href="/gatsby" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta name="description" content="Gatsby||— A full-stack frontend framework that comes with everything you need out of the box.">

  <meta property="og:site_name" content="mikedownes.dev">

  <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">

  <link rel="stylesheet" href="/styles.css">

  
  <meta property="og:description" content="Gatsby||— A full-stack frontend framework that comes with everything you need out of the box."/>
  

  <meta property="og:title" content="Gatsby">
  <meta property="og:type" content="article">
  

  <meta property="article:published_time" content="2022-10-12T18:45:48-04:00">
  <meta property="article:author" content="/">
  

  <meta property="og:url" content="/gatsby" />

  
  <title>
    
      Gatsby &mdash; mikedownes.dev
    
  </title>
</head>

  <body>
    <nav><div>
    <a class="internal-link" href="/"><b>mikedownes.dev</b></a>
</div>
</nav>
    <div class="wrapper">
      <main><article>
  <div>
    <h1>Gatsby</h1>
    <time datetime="2022-10-09T19:23:29-04:00">
      Last updated on October 9, 2022
      
    </time>
  </div>

  <div id="notes-entry-container">
    <content>
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body>
<p><a href="https://www.gatsbyjs.com/" target="_blank">Gatsby</a>
|
|— <em>A full-stack frontend framework that comes with everything you need out of the box.</em></p>

<p><a href="https://www.gatsbyjs.com/docs/tutorial/" target="_blank">Tutorial</a></p>

<p>#development #web-development #front-end</p>
</body></html>

    </content>

    <side style="font-size: 0.9em">
      <h3 style="margin-bottom: 1em">Notes mentioning this note</h3>
      

      <div style="font-size: 0.9em">
        <p>
          There are no notes linking to this note.
        </p>
      </div>
      
    </side>
  </div>
</article>

<hr>

<p>Here are all the notes in this garden, along with their links, visualized as a graph.</p>

<style>
  .links line {
    stroke: #ccc;
    opacity: 0.5;
  }

  .nodes circle {
    cursor: pointer;
    fill: #8b88e6;
    transition: all 0.15s ease-out;
  }

  .text text {
    cursor: pointer;
    fill: #333;
    text-shadow: -1px -1px 0 #fafafabb, 1px -1px 0 #fafafabb, -1px 1px 0 #fafafabb, 1px 1px 0 #fafafabb;
  }

  .nodes [active],
  .text [active] {
    cursor: pointer;
    fill: black;
  }

  .inactive {
    opacity: 0.1;
    transition: all 0.15s ease-out;
  }

  #graph-wrapper {
    background: #fcfcfc;
    border-radius: 4px;
    height: auto;
  }
</style>

<div id="graph-wrapper">
  <script>
    var commentFlag = true;
    
    window.addEventListener("load", loadGraph);
    window.addEventListener("scroll", loadGraph);

    function loadGraph() {
      if (!( document.getElementById("graph-wrapper").getBoundingClientRect().top <
             window.innerHeight * 1.5 &&
          commentFlag)){
        return;
      }
      var oScript = document.createElement("script");
      oScript.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js";
      oScript.crossOrigin = 'anonymous';
      oScript.integrity =
        "sha512-FHsFVKQ/T1KWJDGSbrUhTJyS1ph3eRrxI228ND0EGaEp6v4a/vGwPWd3Dtd/+9cI7ccofZvl/wulICEurHN1pg==";
      document.body.appendChild(oScript);
      oScript.onload = () => {
        const MINIMAL_NODE_SIZE = 8;
        const MAX_NODE_SIZE = 12;
        const ACTIVE_RADIUS_FACTOR = 1.5;
        const STROKE = 1;
        const FONT_SIZE = 16;
        const TICKS = 200;
        const FONT_BASELINE = 40;
        const MAX_LABEL_LENGTH = 50;

        const graphData = {"edges":[{"source":"681051031051169710832103971141001011103210911199","target":"661171081081011163210611111711411097108"},{"source":"8410410132103971141001011103210397116101","target":"661171081081011163210611111711411097108"},{"source":"661171081081011163210611111711411097108","target":"67971141141111081084432114121100101114"},{"source":"8410410132103971141001011103210397116101","target":"681051031051169710832103971141001011103210911199"},{"source":"681051031051169710832103971141001011103210911199","target":"68105103105116971083210397114100101110321141019710010511010332108105115116"},{"source":"87104971163210511532973210010510310511697108321039711410010111063","target":"68105103105116971083210397114100101110321141019710010511010332108105115116"},{"source":"681051031051169710832103971141001011103210010111832108111103","target":"7310997103101321011099810110032116101115116"},{"source":"681051031051169710832103971141001011103210010111832108111103","target":"74101107121108108"},{"source":"681051031051169710832103971141001011103210911199","target":"77971123211110232991111101161011101163240109111994144"},{"source":"799811510510010597110","target":"7797114107100111119110"},{"source":"8211197109321141011151019711499104","target":"7797114107100111119110"},{"source":"8410410132103971141001011103210397116101","target":"7797114107100111119110"},{"source":"681051031051169710832103971141001011103210010111832108111103","target":"779712032118971051081089711099111117114116391153210610110712110810832116101109112108971161013211611711611111410597108"},{"source":"771011141099710510046106115","target":"771011141099710510046106115"},{"source":"681051031051169710832103971141001011103210010111832108111103","target":"771011141099710510046106115"},{"source":"8710411132105115321091051071013210011111911010111563","target":"82101115117109101"},{"source":"681051031051169710832103971141001011103210911199","target":"78111116105111110"},{"source":"681051031051169710832103971141001011103210911199","target":"799811510510010597110"},{"source":"779712032118971051081089711099111117114116391153210610110712110810832116101109112108971161013211611711611111410597108","target":"799811510510010597110"},{"source":"799811510510010597110","target":"799811510510010597110"},{"source":"681051031051169710832103971141001011103210010111832108111103","target":"799811510510010597110"},{"source":"8211197109321141011151019711499104","target":"799811510510010597110"},{"source":"8410410132103971141001011103210397116101","target":"799811510510010597110"},{"source":"8410410132103971141001011103210397116101","target":"681051031051169710832103971141001011103210010111832108111103"},{"source":"8710411132105115321091051071013210011111911010111563","target":"681051031051169710832103971141001011103210010111832108111103"},{"source":"681051031051169710832103971141001011103210911199","target":"8211197109321141011151019711499104"},{"source":"799811510510010597110","target":"8211197109321141011151019711499104"},{"source":"681051031051169710832103971141001011103210911199","target":"8310199111110100329811497105110"},{"source":"799811510510010597110","target":"8310199111110100329811497105110"},{"source":"8410410132103971141001011103210397116101","target":"8310199111110100329811497105110"},{"source":"681051031051169710832103971141001011103210911199","target":"841041013297114116105115116391153211997121"},{"source":"8410410132103971141001011103210397116101","target":"841041013297114116105115116391153211997121"},{"source":"661171081081011163210611111711411097108","target":"8410410132103971141001011103210397116101"},{"source":"681051031051169710832103971141001011103210911199","target":"8410410132103971141001011103210397116101"},{"source":"68105103105116971083210397114100101110321141019710010511010332108105115116","target":"8410410132103971141001011103210397116101"},{"source":"719711611598121","target":"8410410132103971141001011103210397116101"},{"source":"7310997103101321011099810110032116101115116","target":"8410410132103971141001011103210397116101"},{"source":"74101107121108108","target":"8410410132103971141001011103210397116101"},{"source":"779712032118971051081089711099111117114116391153210610110712110810832116101109112108971161013211611711611111410597108","target":"8410410132103971141001011103210397116101"},{"source":"771011141099710510046106115","target":"8410410132103971141001011103210397116101"},{"source":"82101115117109101","target":"8410410132103971141001011103210397116101"},{"source":"799811510510010597110","target":"8410410132103971141001011103210397116101"},{"source":"681051031051169710832103971141001011103210010111832108111103","target":"8410410132103971141001011103210397116101"},{"source":"8211197109321141011151019711499104","target":"8410410132103971141001011103210397116101"},{"source":"8310199111110100329811497105110","target":"8410410132103971141001011103210397116101"},{"source":"841041013297114116105115116391153211997121","target":"8410410132103971141001011103210397116101"},{"source":"8410410132103971141001011103210397116101","target":"8410410132103971141001011103210397116101"},{"source":"87104971163210511532973210010510310511697108321039711410010111063","target":"8410410132103971141001011103210397116101"},{"source":"8710411132105115321091051071013210011111911010111563","target":"8410410132103971141001011103210397116101"},{"source":"83121109108105110107115","target":"8410410132103971141001011103210397116101"},{"source":"871141051161051101033210511532116104105110107105110103","target":"8410410132103971141001011103210397116101"},{"source":"779712032118971051081089711099111117114116391153210610110712110810832116101109112108971161013211611711611111410597108","target":"86971051081089711099111117114116443210997120105109101"},{"source":"681051031051169710832103971141001011103210010111832108111103","target":"86971051081089711099111117114116443210997120105109101"},{"source":"681051031051169710832103971141001011103210911199","target":"87104971163210511532973210010510310511697108321039711410010111063"},{"source":"681051031051169710832103971141001011103210010111832108111103","target":"8710411132105115321091051071013210011111911010111563"},{"source":"8410410132103971141001011103210397116101","target":"8710411132105115321091051071013210011111911010111563"},{"source":"8410410132103971141001011103210397116101","target":"8011798108105115104321161041013211211411199101115115"},{"source":"87104971163210511532973210010510310511697108321039711410010111063","target":"8011798108105115104321161041013211211411199101115115"},{"source":"681051031051169710832103971141001011103210010111832108111103","target":"83121109108105110107115"},{"source":"8410410132103971141001011103210397116101","target":"871141051161051101033210511532116104105110107105110103"},{"source":"87104971163210511532973210010510310511697108321039711410010111063","target":"871141051161051101033210511532116104105110107105110103"},{"source":"871141051161051101033210511532116104105110107105110103","target":"871141051161051101033210511532116104105110107105110103"}],"nodes":[{"id":"661171081081011163210611111711411097108","path":"/bullet-journal","label":"Bullet journal"},{"id":"67971141141111081084432114121100101114","path":"/carroll-ryder","label":"Carroll, ryder"},{"id":"681051031051169710832103971141001011103210911199","path":"/digital-garden-moc","label":"Digital garden moc"},{"id":"68105103105116971083210397114100101110321141019710010511010332108105115116","path":"/digital-garden-reading-list","label":"Digital garden reading list"},{"id":"719711611598121","path":"/gatsby","label":"Gatsby"},{"id":"7310997103101321011099810110032116101115116","path":"/image-embed-test","label":"Image embed test"},{"id":"74101107121108108","path":"/jekyll","label":"Jekyll"},{"id":"77971123211110232991111101161011101163240109111994144","path":"/map-of-content-moc","label":"Map of content (moc),"},{"id":"7797114107100111119110","path":"/markdown","label":"Markdown"},{"id":"779712032118971051081089711099111117114116391153210610110712110810832116101109112108971161013211611711611111410597108","path":"/max-vaillancourt-s-jekyll-template-tutorial","label":"Max vaillancourt's jekyll template tutorial"},{"id":"771011141099710510046106115","path":"/mermaid-js","label":"Mermaid.js"},{"id":"82101115117109101","path":"/resume","label":"Resume"},{"id":"78111116105111110","path":"/notion","label":"Notion"},{"id":"799811510510010597110","path":"/obsidian","label":"Obsidian"},{"id":"681051031051169710832103971141001011103210010111832108111103","path":"/digital-garden-dev-log","label":"Digital garden dev log"},{"id":"8211197109321141011151019711499104","path":"/roam-research","label":"Roam research"},{"id":"8310199111110100329811497105110","path":"/second-brain","label":"Second brain"},{"id":"841041013297114116105115116391153211997121","path":"/the-artist-s-way","label":"The artist's way"},{"id":"8410410132103971141001011103210397116101","path":"/","label":"The garden gate"},{"id":"86971051081089711099111117114116443210997120105109101","path":"/vaillancourt-maxime","label":"Vaillancourt, maxime"},{"id":"87104971163210511532973210010510310511697108321039711410010111063","path":"/what-is-a-digital-garden","label":"What is a digital garden?"},{"id":"8710411132105115321091051071013210011111911010111563","path":"/who-is-mike-downes","label":"Who is mike downes?"},{"id":"8011798108105115104321161041013211211411199101115115","path":"/publish-the-process","label":"Publish the process"},{"id":"83121109108105110107115","path":"/symlinks","label":"Symlinks"},{"id":"871141051161051101033210511532116104105110107105110103","path":"/writing-is-thinking","label":"Writing is thinking"}]}
        let nodesData = graphData.nodes;
        let linksData = graphData.edges;

        const nodeSize = {};

        const updateNodeSize = () => {
          nodesData.forEach((el) => {
            let weight =
              3 *
              Math.sqrt(
                linksData.filter((l) => l.source.id === el.id || l.target.id === el.id)
                  .length + 1
              );
            if (weight < MINIMAL_NODE_SIZE) {
              weight = MINIMAL_NODE_SIZE;
            } else if (weight > MAX_NODE_SIZE) {
              weight = MAX_NODE_SIZE;
            }
            nodeSize[el.id] = weight;
          });
        };

        const onClick = (d) => {
          window.location = d.path
        };

        const onMouseover = function (d) {
          const relatedNodesSet = new Set();
          linksData
            .filter((n) => n.target.id == d.id || n.source.id == d.id)
            .forEach((n) => {
              relatedNodesSet.add(n.target.id);
              relatedNodesSet.add(n.source.id);
            });

          node.attr("class", (node_d) => {
            if (node_d.id !== d.id && !relatedNodesSet.has(node_d.id)) {
              return "inactive";
            }
            return "";
          });

          link.attr("class", (link_d) => {
            if (link_d.source.id !== d.id && link_d.target.id !== d.id) {
              return "inactive";
            }
            return "";
          });

          link.attr("stroke-width", (link_d) => {
            if (link_d.source.id === d.id || link_d.target.id === d.id) {
              return STROKE * 4;
            }
            return STROKE;
          });
          text.attr("class", (text_d) => {
            if (text_d.id !== d.id && !relatedNodesSet.has(text_d.id)) {
              return "inactive";
            }
            return "";
          });
        };

        const onMouseout = function (d) {
          node.attr("class", "");
          link.attr("class", "");
          text.attr("class", "");
          link.attr("stroke-width", STROKE);
        };

        const sameNodes = (previous, next) => {
          if (next.length !== previous.length) {
            return false;
          }

          const map = new Map();
          for (const node of previous) {
            map.set(node.id, node.label);
          }

          for (const node of next) {
            const found = map.get(node.id);
            if (!found || found !== node.title) {
              return false;
            }
          }

          return true;
        };

        const sameEdges = (previous, next) => {
          if (next.length !== previous.length) {
            return false;
          }

          const set = new Set();
          for (const edge of previous) {
            set.add(`${edge.source.id}-${edge.target.id}`);
          }

          for (const edge of next) {
            if (!set.has(`${edge.source.id}-${edge.target.id}`)) {
              return false;
            }
          }

          return true;
        };

        const graphWrapper = document.getElementById('graph-wrapper')
        const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        element.setAttribute("width", graphWrapper.getBoundingClientRect().width);
        element.setAttribute("height", window.innerHeight * 0.8);
        graphWrapper.appendChild(element);

        const reportWindowSize = () => {
          element.setAttribute("width", window.innerWidth);
          element.setAttribute("height", window.innerHeight);
        };

        window.onresize = reportWindowSize;

        const svg = d3.select("svg");
        const width = Number(svg.attr("width"));
        const height = Number(svg.attr("height"));
        let zoomLevel = 1;

        const simulation = d3
          .forceSimulation(nodesData)
          .force("forceX", d3.forceX().x(width / 2))
          .force("forceY", d3.forceY().y(height / 2))
          .force("charge", d3.forceManyBody())
          .force(
            "link",
            d3
              .forceLink(linksData)
              .id((d) => d.id)
              .distance(70)
          )
          .force("center", d3.forceCenter(width / 2, height / 2))
          .force("collision", d3.forceCollide().radius(80))
          .stop();

        const g = svg.append("g");
        let link = g.append("g").attr("class", "links").selectAll(".link");
        let node = g.append("g").attr("class", "nodes").selectAll(".node");
        let text = g.append("g").attr("class", "text").selectAll(".text");

        const resize = () => {
          if (d3.event) {
            const scale = d3.event.transform;
            zoomLevel = scale.k;
            g.attr("transform", scale);
          }

          const zoomOrKeep = (value) => (zoomLevel >= 1 ? value / zoomLevel : value);

          const font = Math.max(Math.round(zoomOrKeep(FONT_SIZE)), 1);

          text.attr("font-size", (d) => font);
          text.attr("y", (d) => d.y - zoomOrKeep(FONT_BASELINE) + 8);
          link.attr("stroke-width", zoomOrKeep(STROKE));
          node.attr("r", (d) => {
            return zoomOrKeep(nodeSize[d.id]);
          });
          svg
            .selectAll("circle")
            .filter((_d, i, nodes) => d3.select(nodes[i]).attr("active"))
            .attr("r", (d) => zoomOrKeep(ACTIVE_RADIUS_FACTOR * nodeSize[d.id]));
        };

        const ticked = () => {
          node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
          text
            .attr("x", (d) => d.x)
            .attr("y", (d) => d.y - (FONT_BASELINE - nodeSize[d.id]) / zoomLevel);
          link
            .attr("x1", (d) => d.source.x)
            .attr("y1", (d) => d.source.y)
            .attr("x2", (d) => d.target.x)
            .attr("y2", (d) => d.target.y);
        };

        const restart = () => {
          updateNodeSize();
          node = node.data(nodesData, (d) => d.id);
          node.exit().remove();
          node = node
            .enter()
            .append("circle")
            .attr("r", (d) => {
              return nodeSize[d.id];
            })
            .on("click", onClick)
            .on("mouseover", onMouseover)
            .on("mouseout", onMouseout)
            .merge(node);

          link = link.data(linksData, (d) => `${d.source.id}-${d.target.id}`);
          link.exit().remove();
          link = link.enter().append("line").attr("stroke-width", STROKE).merge(link);

          text = text.data(nodesData, (d) => d.label);
          text.exit().remove();
          text = text
            .enter()
            .append("text")
            .text((d) => shorten(d.label.replace(/_*/g, ""), MAX_LABEL_LENGTH))
            .attr("font-size", `${FONT_SIZE}px`)
            .attr("text-anchor", "middle")
            .attr("alignment-baseline", "central")
            .on("click", onClick)
            .on("mouseover", onMouseover)
            .on("mouseout", onMouseout)
            .merge(text);

          node.attr("active", (d) => isCurrentPath(d.path) ? true : null);
          text.attr("active", (d) => isCurrentPath(d.path) ? true : null);

          simulation.nodes(nodesData);
          simulation.force("link").links(linksData);
          simulation.alpha(1).restart();
          simulation.stop();

          for (let i = 0; i < TICKS; i++) {
            simulation.tick();
          }

          ticked();
        };

        const zoomHandler = d3.zoom().scaleExtent([0.2, 3]).on("zoom", resize);

        zoomHandler(svg);
        restart();

        function isCurrentPath(notePath) {
          return window.location.pathname.includes(notePath)
        }

        function shorten(str, maxLen, separator = ' ') {
          if (str.length <= maxLen) return str;
          return str.substr(0, str.lastIndexOf(separator, maxLen)) + '...';
        }
        commentFlag = false;
      }
    }
  </script>
</div>

</main>
      <footer>This is the footer. Include anything you'd like here, like a link to an <a class="internal-link" href="/about">About</a> page.
</footer>
    </div>

    <!-- That file is not particularly elegant. This will need a refactor at some point. -->
<style>
  content a.internal-link {
    border-color: #8b88e6;
    background-color: #efefff;
  }

  #tooltip-wrapper {
    background: white;
    padding: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    position: absolute;
    width: 400px;
    height: 250px;
    font-size: 0.8em;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    opacity: 0;
    transition: opacity 100ms;
  }

  #tooltip-wrapper:after {
		content: "";
		position: absolute;
		z-index: 1;
		bottom: 0;
		left: 0;
		pointer-events: none;
		background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%);
		width: 100%;
		height: 75px;
  }
</style>

<div style="opacity: 0; display: none;" id='tooltip-wrapper'>
  <div id='tooltip-content'>
  </div>
</div>

<iframe style="display: none; height: 0; width: 0;" id='link-preview-iframe' src="">
</iframe>

<script>
  var opacityTimeout;
  var contentTimeout;
  var transitionDurationMs = 100;

  var iframe = document.getElementById('link-preview-iframe')
  var tooltipWrapper = document.getElementById('tooltip-wrapper')
  var tooltipContent = document.getElementById('tooltip-content')

  var linkHistories = {};

  function hideTooltip() {
    opacityTimeout = setTimeout(function() {
      tooltipWrapper.style.opacity = 0;
      contentTimeout = setTimeout(function() {
        tooltipContent.innerHTML = '';
        tooltipWrapper.style.display = 'none';
      }, transitionDurationMs + 1);
    }, transitionDurationMs)
  }

  function showTooltip(event) {
    var elem = event.target;
    var elem_props = elem.getClientRects()[elem.getClientRects().length - 1];
    var top = window.pageYOffset || document.documentElement.scrollTop

    if (event.target.host === window.location.host) {
      if (!linkHistories[event.target.href]) {
        iframe.src = event.target.href
        iframe.onload = function() {
          tooltipContentHtml = ''
          tooltipContentHtml += '<div style="font-weight: bold;">' + iframe.contentWindow.document.querySelector('h1').innerHTML + '</div>'
          tooltipContentHtml += iframe.contentWindow.document.querySelector('content').innerHTML

          tooltipContent.innerHTML = tooltipContentHtml
          linkHistories[event.target.href] = tooltipContentHtml

          tooltipWrapper.style.display = 'block';
          setTimeout(function() {
            tooltipWrapper.style.opacity = 1;
          }, 1)
        } 
      } else {
        tooltipContent.innerHTML = linkHistories[event.target.href]
        tooltipWrapper.style.display = 'block';
        setTimeout(function() {
          tooltipWrapper.style.opacity = 1;
        }, 1)
      }


      tooltipWrapper.style.left = elem_props.left - (tooltipWrapper.offsetWidth / 2) + (elem_props.width / 2) + "px";
      if ((window.innerHeight - elem_props.top) < (tooltipWrapper.offsetHeight)) {
          tooltipWrapper.style.top = elem_props.top + top - tooltipWrapper.offsetHeight - 10 + "px";
      } else if ((window.innerHeight - elem_props.top) > (tooltipWrapper.offsetHeight)) {
          tooltipWrapper.style.top = elem_props.top + top + 35 + "px";
      }

      if ((elem_props.left + (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) {
          tooltipWrapper.style.left = "10px";
      } else if ((document.body.clientWidth - elem_props.left - (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) {
          tooltipWrapper.style.left = document.body.clientWidth - tooltipWrapper.offsetWidth - 20 + "px";
      }
    }
  }

  function setupListeners(linkElement) {
    linkElement.addEventListener('mouseleave', function(_event) {
      hideTooltip();
    });

    tooltipWrapper.addEventListener('mouseleave', function(_event) {
      hideTooltip();
    });

    linkElement.addEventListener('touchend', function(_event) {
      hideTooltip();
    });

    tooltipWrapper.addEventListener('touchend', function(_event) {
      hideTooltip();
    });

    linkElement.addEventListener('mouseenter', function(event) {
      clearTimeout(opacityTimeout);
      clearTimeout(contentTimeout);
      showTooltip(event);
    });

    tooltipWrapper.addEventListener('mouseenter', function(event) {
      clearTimeout(opacityTimeout);
      clearTimeout(contentTimeout);
    });
  }

  document.querySelectorAll('content a').forEach(setupListeners);
</script>

  </body>
</html>