Move the content graph layout into theme

This reverts commit 620c269d91.

assets/scss/search.scss

@@ -77,7 +77,7 @@ input.stork-input {
     }
 }
 
-.stork-title, .stork-excerpt {
+.stork-title p, .stork-excerpt p {
     margin: 0;
 }
 

assets/scss/style.scss

@@ -21,6 +21,11 @@ h1, h2, h3, h4, h5, h6 {
   font-weight: normal;
   text-align: center;
 
+  &:target {
+    background-color: lighten(yellow, 30%);
+    border-radius: 1rem;
+  }
+
   a {
     border-bottom: none;
 
@@ -144,10 +149,12 @@ table {
     padding: 0.5rem;
 }
 
-tr {
+.fold-table + table {
-    @include below-container-width {
+    tr {
-        display: flex;
+        @include below-container-width {
-        flex-direction: column;
+            display: flex;
+            flex-direction: column;
+        }
     }
 }
 
@@ -155,7 +162,11 @@ td {
     @include below-container-width {
         overflow-x: auto;
     }
+}
+
+td, th {
     padding: 0.5rem;
+    vertical-align: top;
 }
 
 div.highlight tr {
@@ -229,6 +240,10 @@ figure {
         text-align: center;
     }
 
+    &.fullwide img {
+        max-width: 100%;
+    }
+
     &.tiny img {
         max-height: 15rem;
     }
@@ -246,7 +261,7 @@ figure {
     margin: auto;
 }
 
-.draft-warning {
+.warning {
     @include bordered-block;
     padding: 0.5rem;
     background-color: #ffee99;
@@ -262,3 +277,44 @@ figure {
   stroke-linejoin: round;
   fill: currentColor;
 }
+
+.katex * {
+  font-family: unset;
+}
+
+.block {
+    @include bordered-block;
+    margin: auto;
+    padding: 0.5rem;
+    width: fit-content;
+}
+
+.dialog {
+    .message {
+        max-width: 0.8*$container-width;
+        margin-top: 0.5rem;
+        display: flex;
+        flex-direction: row;
+
+        .message-sender {
+            width: 4rem;
+            margin: 0.75rem;
+
+            .feather {
+                width: 2rem;
+                height: 1.6rem;
+            }
+        }
+
+        .message-text {
+            @include bordered-block;
+            display: block;
+            padding: 0.75rem;
+        }
+
+        &.side-answer {
+            margin-left: auto;
+            flex-direction: row-reverse;
+        }
+    }
+}

i18n/en.toml

@@ -0,0 +1,58 @@
+[home]
+  other = "Home"
+
+[about]
+  other = "About"
+
+[resume]
+  other = "Resume"
+
+[tags]
+  other = "Tags"
+
+[favorites]
+  other = "Favorites"
+
+[search]
+  other = "Search"
+
+[allPosts]
+  other = "All Posts"
+
+[nWords]
+  one = "one word"
+  other = "{{ .Count }} words"
+
+[nMinutesToRead]
+  one = "about one minute to read"
+  other = "about {{ .Count }} minutes to read"
+
+[recentPosts]
+  other = "Recent posts"
+
+[tagged]
+  other = "Tagged \"{{ . }}\""
+
+[postedOn]
+  other = "Posted on {{ . }}"
+
+[tableOfContents]
+  other = "Table of Contents"
+
+[warning]
+  other = "Warning!"
+
+[postDraft]
+  other = "This post is a draft. At best, it may contain grammar mistakes; at worst, it can include significant errors and bugs. Please use your best judgement!"
+
+[contactFooter]
+  other = "Liked this article? Have any questions or comments? Please don't hesitate to reach out to me at <a href=\"mailto:danila.fedorin@gmail.com\">danila.fedorin@gmail.com</a>! I love receiving emails from readers, and I'm always happy to provide any additional clarification or assistance."
+
+[note]
+  other = "note"
+
+[from]
+  other = "From"
+
+[searchRequiresJS]
+  other = "Search (requires JavaScript)"

layouts/_default/list.html

@@ -1,5 +1,6 @@
 {{ define "main" }}
 <h2>{{ .Title }}</h2>
+{{ .Content }}
 
 <ul class="post-list">
     {{ range .Pages.ByDate.Reverse }}

layouts/blog/single.html

@@ -6,25 +6,21 @@
         <a class="button" href="{{ $.Site.BaseURL }}/tags/{{ . | urlize }}">{{ . }}</a>
         {{ end }}
     </p>
-    <p>Posted on {{ .Date.Format "January 2, 2006" }}.</p>
+    <p>{{ i18n "postedOn" (.Date.Format "January 2, 2006") }}.</p>
 </div>
 
 <div class="post-content">
     {{ if not (eq .TableOfContents "<nav id=\"TableOfContents\"></nav>") }}
     <div class="table-of-contents">
         <div class="wrapper">
-            <em>Table of Contents</em>
+            <em>{{ i18n "tableOfContents" }}</em>
             {{ .TableOfContents }}
         </div>
     </div>
     {{ end }}
 
     {{ if .Draft }}
-    <div class="draft-warning">
+    {{ partial "warning.html" (i18n "postDraft") }}
-        <em>Warning!</em> This post is a draft. At best, it may contain grammar mistakes;
-        at worst, it can include significant errors and bugs. Please
-        use your best judgement!
-    </div>
     {{ end }}
 
     {{ .Content }}
@@ -33,10 +29,7 @@
 {{ define "after" }}
 <hr class="container footer-divider">
 <footer class="container">
-    <p>Liked this article? Have any questions or comments?
+    <p>{{ i18n "contactFooter" | safeHTML }}</p>
-    Please don't hesitate to reach out to me at <a href="mailto:danila.fedorin@gmail.com">
-    danila.fedorin@gmail.com</a>! I love receiving emails from readers, and I'm always happy
-    to provide any additional clarification or assistance.</p>
     <!--
     <p>I'm also currently looking for Computer Science internships for the summer
     of 2021. Take a look at my <a href="/Resume-Danila-Fedorin.pdf">resume</a>, 

layouts/graph/single.html

@@ -0,0 +1,16 @@
+{{ define "main" }}
+<h2>{{ .Title }} </h2>
+<script src="//unpkg.com/vis-network@9.1.0/dist/vis-network.min.js"></script>
+<script type="module" src="{{ .Site.BaseURL }}/graph/graph.js"></script>
+<style>
+#graph-container {
+    width: 100%;
+    height: 50vh;
+    border-radius: 0.2rem;
+    border: .075rem solid #bfbfbf
+}
+</style>
+{{ .Content }}
+<div id="graph-container">
+</div>
+{{ end }}

layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 {{ .Content }}
 
-Recent posts:
+{{ i18n "recentPosts" }}:
 <ul class="post-list">
     {{ range first 10 (where (where .Site.Pages.ByDate.Reverse "Section" "blog") ".Kind" "!=" "section") }}
     {{ partial "post.html" . }}

layouts/partials/group.html

@@ -1,3 +1,3 @@
 <div class="highlight-group">
-    <div class="highlight-label">From <a href="{{ .url }}">{{ path.Base .path }}</a>{{ .comment }}</div>{{ .content }}
+    <div class="highlight-label">{{ i18n "from" }} <a href="{{ .url }}">{{ path.Base .path }}</a>{{ .comment }}</div>{{ .content }}
 </div>

layouts/partials/head.html

@@ -8,6 +8,10 @@
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&family=Raleway&family=Lora&display=block" media="screen"> 
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" media="screen">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.min.css" integrity="sha384-bYdxxUwYipFNohQlHt0bjN/LCpueqWz13HufFEV1SUatKs1cm4L6fFgCi1jT643X" crossorigin="anonymous">
+    {{ range .AlternativeOutputFormats -}}
+    <link rel="{{ .Rel }}" type="{{ .MediaType.Type | html }}" href="{{ .Permalink | safeURL }}">
+    {{ end -}}
     {{ $style := resources.Get "scss/style.scss" | resources.ToCSS | resources.Minify }}
     {{ $sidenotes := resources.Get "scss/sidenotes.scss" | resources.ToCSS | resources.Minify }}
     {{ $code := resources.Get "scss/code.scss" | resources.ToCSS | resources.Minify }}
@@ -17,8 +21,15 @@
     <link rel="stylesheet" href="{{ $style.Permalink }}" media="screen">
     <link rel="stylesheet" href="{{ $sidenotes.Permalink }}" media="screen">
     <link rel="stylesheet" href="{{ $code.Permalink }}" media="screen">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous" media="screen">
     <link rel="icon" type="image/png" href="{{ $icon.Permalink }}">
 
+    {{ if .Site.IsServer }}
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css" integrity="sha384-Xi8rHCmBmhbuyyhbI88391ZKP2dmfnOl4rT9ZfRI7mLTdk1wblIUnrIq35nqwEvC" crossorigin="anonymous">
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.js" integrity="sha384-X/XCfMm41VSsqRNQgDerQczD69XqmjOOOwYQvr/uuC+j4OPoNhVgjdGFwhvN02Ja" crossorigin="anonymous"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
+        onload="renderMathInElement(document.body);"></script>
+    {{ end }}
+
+
     <title>{{ .Title }}</title>
 </head>

layouts/partials/header.html

@@ -1,15 +1,15 @@
 <div class="container">
-    <h1>Daniel's Blog</h1>
+    <h1>{{ .Site.Title }}</h1>
 </div>
 <nav>
     <div class="container">
-        <a href="/">Home</a>
+        <a href="{{ .Site.BaseURL }}">{{ i18n "home" }}</a>
-        <a href="/about">About</a>
+        <a href="{{ relref . "about" }}">{{ i18n "about" }}</a>
         <a href="https://github.com/DanilaFe">GitHub</a>
-        <a href="/Resume-Danila-Fedorin.pdf">Resume</a>
+        <a href="{{ .Site.BaseURL }}/Resume-Danila-Fedorin.pdf">{{ i18n "resume" }}</a>
-        <a href="/tags">Tags</a>
+        <a href="{{ .Site.BaseURL }}/tags">{{ i18n "tags" }}</a>
-        <a href="/favorites">Favorites</a>
+        <a href="{{ .Site.BaseURL }}/favorites">{{ i18n "favorites" }}</a>
-        <a href="/search">Search</a>
+        <a href="{{ .Site.BaseURL }}/search">{{ i18n "search" }}</a>
-        <a href="/blog">All Posts</a>
+        <a href="{{ relref . "blog" }}">{{ i18n "allPosts" }}</a>
     </div>
 </nav>

layouts/partials/post.html

@@ -1,5 +1,5 @@
 <li>
     <a href="{{ .Permalink }}" class="post-title">{{ if .Params.favorite }}{{ partial "icon.html" "star" }}{{ end }} {{ .Title }}</a>
-    <p class="post-wordcount">{{ .WordCount }} words, about {{ .ReadingTime }} minutes to read.</p>
+    <p class="post-wordcount">{{ i18n "nWords" .WordCount }}, {{ i18n "nMinutesToRead" .ReadingTime }}.</p>
-    <p class="post-preview">{{ .Summary }} . . .</p>
+    <p class="post-preview">{{ .Summary }} {{ if .Truncated }}. . .{{ end }}</p>
 </li>

layouts/partials/warning.html

@@ -0,0 +1,3 @@
+<div class="warning">
+    <em>{{ i18n "warning" }}</em> {{ . }}
+</div>

layouts/search/single.html

@@ -7,7 +7,7 @@
 
 <div class="stork-wrapper">
     <div class="stork-input-wrapper">
-        <input class="stork-input" data-stork="blog" placeholder="Search (requires JavaScript)"/>
+        <input class="stork-input" data-stork="blog" placeholder="{{ i18n "searchRequiresJS" }}"/>
     </div>
     <div class="stork-output" data-stork="blog-output"></div>
 </div>

layouts/shortcodes/block.html

@@ -0,0 +1,3 @@
+<div class="block">
+    {{ .Inner }}
+</div>

layouts/shortcodes/dialog.html

@@ -0,0 +1,3 @@
+<p class="dialog">
+    {{ .Inner }}
+</p>

layouts/shortcodes/foldtable.html

@@ -0,0 +1 @@
+<span class="fold-table"></span>

layouts/shortcodes/latex.html

@@ -1,3 +1,3 @@
 $$
-{{ .Inner }}
+{{ htmlEscape .Inner }}
 $$

layouts/shortcodes/message.html

@@ -0,0 +1,10 @@
+<span class="message side-{{ .Get 0 }}">
+    <span class="message-sender">
+        {{ if (eq (.Get 1) "reader") }}
+        {{ partial "icon.html" "moon" }}
+        {{ else }}
+        {{ partial "icon.html" "sun" }}
+        {{ end }}
+    </span>
+    <span class="message-text">{{ .Inner }}</span>
+</span>

layouts/shortcodes/numberedsidenote.html

@@ -1,11 +0,0 @@
-{{ .Page.Scratch.Add "numbernote-id" 1 }}
-{{ $id := .Page.Scratch.Get "numbernote-id" }}
-<span class="sidenote">
-<label class="sidenote-label" for="numbernote-{{ $id }}">({{ $id }})</label>
-<input class="sidenote-checkbox" type="checkbox" id="numbernote-{{ $id }}"></input>
-<span class="sidenote-content sidenote-{{ .Get 0 }}">
-<span class="sidenote-delimiter">[note:</span>
-{{ .Inner }}
-<span class="sidenote-delimiter">]</span>
-</span>
-</span>

layouts/shortcodes/rawblock.html

@@ -1,2 +1,2 @@
 {{ partial "geturl.html" (dict "scratch" .Scratch "path" (.Get 0) "submoduleLinks" .Site.Params.submoduleLinks) }}
-{{ partial "group.html" (dict "url" (.Scratch.Get "bestUrl") "path" (.Get 0) "comment" ", entire file" "content" (safeHTML (printf "<pre><code>%s</code></pre>" (readFile (printf "code/%s" (.Get 0)))))) }}
+{{ partial "group.html" (dict "url" (.Scratch.Get "bestUrl") "path" (.Get 0) "comment" ", entire file" "content" (safeHTML (printf "<pre><code>%s</code></pre>" (htmlEscape (readFile (printf "code/%s" (.Get 0))))))) }}

layouts/shortcodes/sidenote.html

@@ -1,8 +1,12 @@
 <span class="sidenote">
 <label class="sidenote-label" for="{{ .Get 1 }}">{{ .Get 2 }}</label>
 <input class="sidenote-checkbox" type="checkbox" id="{{ .Get 1 }}"></input>
+{{ if $offset := .Get 3 }}
+<span class="sidenote-content sidenote-{{ .Get 0 }}" style="margin-top: {{ $offset }}rem">
+{{ else }}
 <span class="sidenote-content sidenote-{{ .Get 0 }}">
-<span class="sidenote-delimiter">[note:</span>
+{{ end }}
+<span class="sidenote-delimiter">[{{ i18n "note" }}:</span>
 {{ .Inner }}
 <span class="sidenote-delimiter">]</span>
 </span>

layouts/tags/list.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<h2>Tagged "{{ .Title }}"</h2>
+<h2>{{ i18n "tagged" .Title }}"</h2>
 
 <ul class="post-list">
     {{ range .Pages.ByDate.Reverse }}

layouts/tags/terms.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
 <h2>{{ .Title }}</h2>
-Below is a list of all the tags ever used on this site.
+{{ .Content }}
 
 <ul>
     {{ range sort .Pages "Title" }}

static/graph/graph.js

@@ -0,0 +1,53 @@
+import { nodes, edges } from "./graph.gen.js";
+
+var container = document.getElementById("graph-container");
+var options = {
+    interaction: {
+        hover: true
+    },
+    nodes: {
+        shape: "dot",
+        size: 16,
+    },
+    physics: {
+        forceAtlas2Based: {
+            gravitationalConstant: -10,
+            centralGravity: 0.005,
+            springLength: 230,
+            springConstant: 0.18,
+        },
+        maxVelocity: 146,
+        solver: "forceAtlas2Based",
+        timestep: 0.35,
+        stabilization: { iterations: 150 },
+    },
+};
+
+var nodesDs = new vis.DataSet();
+nodesDs.add(nodes);
+var edgesDs = new vis.DataSet();
+edgesDs.add(edges);
+var network = new vis.Network(container, { nodes: nodesDs, edges: edgesDs }, options);
+
+network.on("doubleClick", function (params) {
+    params.event = "[original event]";
+    if (params.nodes.length !== 1) return;
+    window.open(nodesDs.get(params.nodes[0]).url, "_blank")
+});
+network.on("hoverNode", function (params) {
+    nodesDs.update({ id: params.node, label: nodesDs.get(params.node).name });
+});
+network.on("blurNode", function (params) {
+    nodesDs.update({ id: params.node, label: undefined });
+});
+// network.on("selectNode", function (params) {
+//     for (const node of params.nodes) {
+//         nodesDs.update({ id: node, label: nodesDs.get(node).name });
+//     }
+// });
+// network.on("deselectNode", function (params) {
+//     for (const node of params.previousSelection.nodes) {
+//         if (params.nodes.some(n => n === node)) continue;
+//         nodesDs.update({ id: node, label: undefined });
+//     }
+// });