Redesign site and optimize page performance

2026-07-18 19:57:44 -04:00
parent 2f2794f5d5
commit 9dda076b56
53 changed files with 747 additions and 277 deletions
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -0,0 +1,11 @@
+{{ define "main" }}
+<main class="home error-page" id="main-content">
+  {{ partial "home-intro.html" . }}
+  <section class="error-panel" aria-labelledby="not-found-heading">
+    <p class="error-code" aria-hidden="true">404</p>
+    <h2 id="not-found-heading">File not found</h2>
+    <p>The page may have moved, or the address may be incomplete.</p>
+    <a class="post-button" href="{{ "/" | relURL }}">&lt; Home</a>
+  </section>
+</main>
+{{ end }}
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<main class="home">
+<main class="home" id="main-content">
  {{ partial "home-intro.html" . }}
  {{ partial "file-index.html" (dict "active" .Section) }}
 </main>
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,6 +1,7 @@
 {{ define "main" }}
-<article class="post" id="top">
+<main class="post" id="main-content">
  {{ $hasToc := and (ne .Params.toc false) (gt (len (findRE "<li>" .TableOfContents)) 0) }}
+  {{ $mobileToc := replace .TableOfContents `id="TableOfContents"` `id="MobileTableOfContents"` }}
  {{ $backHref := "/" | relURL }}
  {{ $backLabel := "Home" }}
  {{ if in (slice "projects" "websites") .Section }}
@@ -10,7 +11,7 @@
    {{ $backHref = "/publications/" | relURL }}
    {{ $backLabel = "Publications" }}
  {{ end }}
-  <div class="post-layout{{ if $hasToc }} has-toc{{ end }}">
+  <article class="post-layout{{ if $hasToc }} has-toc{{ end }}">
    {{ if $hasToc }}
      <aside class="post-margin" aria-label="Table of contents">
        <div class="toc">
@@ -48,16 +49,26 @@
            {{ end }}
          </div>
        {{ end }}
+
+        {{ if $hasToc }}
+          <details class="post-toc-inline">
+            <summary>On this page</summary>
+            <div class="post-toc-inline-body">
+              {{ $mobileToc | safeHTML }}
+            </div>
+          </details>
+        {{ end }}
      </header>

-      <main class="post-content">
+      <div class="post-content">
        {{ .Content }}
-      </main>
+      </div>

      <footer class="post-footer">
-        <a class="post-button" href="#top" aria-label="Scroll to top" title="Scroll to top">^ Top</a>
+        <a class="post-button" href="{{ $backHref }}" aria-label="Back to {{ $backLabel }}" title="Back to {{ $backLabel }}">&lt; {{ $backLabel }}</a>
+        <a class="post-button" href="#main-content" aria-label="Scroll to top" title="Scroll to top">^ Top</a>
      </footer>
    </div>
-  </div>
-</article>
+  </article>
+</main>
 {{ end }}
--- a/layouts/_shortcodes/figure.html
+++ b/layouts/_shortcodes/figure.html
@@ -2,13 +2,43 @@
 {{ $src := .Get "src" }}
 {{ $caption := .Get "caption" }}
 {{ $alt := .Get "alt" | default $caption }}
+{{ $width := .Get "width" }}
+{{ $height := .Get "height" }}
+{{ $loading := .Get "loading" | default "lazy" }}
+{{ $fetchpriority := .Get "fetchpriority" }}
 {{ $figures := .Page.Scratch.Get "figures" | default dict }}
 {{ $number := add (len $figures) 1 }}
 {{ .Page.Scratch.SetInMap "figures" $id $number }}

 <figure id="{{ $id }}" class="figure">
  {{ with $src }}
-    <img src="{{ . | relURL }}" alt="{{ $alt }}">
+    {{ $ext := path.Ext . }}
+    {{ $base := strings.TrimSuffix $ext . }}
+    {{ $srcset := slice }}
+    {{ range slice 480 644 768 960 1344 }}
+      {{ $candidate := printf "%s-%d.webp" $base . }}
+      {{ if fileExists (printf "static%s" $candidate) }}
+        {{ $srcset = $srcset | append (printf "%s %dw" ($candidate | relURL) .) }}
+      {{ end }}
+    {{ end }}
+    <picture class="figure-media">
+      {{ with $srcset }}
+        <source
+          type="image/webp"
+          srcset="{{ delimit . ", " }}"
+          sizes="(max-width: 860px) calc(100vw - 2rem), 42rem"
+        >
+      {{ end }}
+      <img
+        src="{{ . | relURL }}"
+        alt="{{ $alt }}"
+        {{ with $width }}width="{{ . }}"{{ end }}
+        {{ with $height }}height="{{ . }}"{{ end }}
+        loading="{{ $loading }}"
+        decoding="async"
+        {{ with $fetchpriority }}fetchpriority="{{ . }}"{{ end }}
+      >
+    </picture>
  {{ end }}

  {{ if or $caption .Inner }}
--- a/layouts/baseof.html
+++ b/layouts/baseof.html
@@ -7,19 +7,37 @@
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>
-    {{- if .IsHome -}}
-      {{ site.Title }} · {{ site.Params.author }}
-    {{- else -}}
-      {{ .Title }} · {{ site.Title }}
-    {{- end -}}
-  </title>
-  <meta name="description" content="{{ .Description | default site.Params.description }}">
-  <link rel="icon" type="image/png" sizes="50x50" href="{{ "favicon.png" | relURL }}">
+  {{ $pageTitle := site.Title }}
+  {{ if not .IsHome }}{{ $pageTitle = printf "%s · %s" .Title site.Title }}{{ end }}
+  {{ $description := .Description | default site.Params.description }}
+  {{ $socialImage := "og.jpg" | absURL }}
+
+  <title>{{ $pageTitle }}</title>
+  <meta name="description" content="{{ $description }}">
+  <meta name="theme-color" content="#c8c8c8">
+  <link rel="canonical" href="{{ .Permalink }}">
+  <link rel="icon" type="image/png" href="{{ "favicon.png" | relURL }}">
  <link rel="alternate" type="application/rss+xml" title="{{ site.Title }}" href="{{ "index.xml" | absURL }}">

+  <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
+  <meta property="og:site_name" content="{{ site.Title }}">
+  <meta property="og:title" content="{{ $pageTitle }}">
+  <meta property="og:description" content="{{ $description }}">
+  <meta property="og:url" content="{{ .Permalink }}">
+  <meta property="og:image" content="{{ $socialImage }}">
+  <meta property="og:image:width" content="1200">
+  <meta property="og:image:height" content="630">
+  <meta property="og:image:alt" content="{{ site.Title }} — research notes and small software">
+  {{ if .IsPage }}<meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ end }}
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="{{ $pageTitle }}">
+  <meta name="twitter:description" content="{{ $description }}">
+  <meta name="twitter:image" content="{{ $socialImage }}">
+  <meta name="twitter:image:alt" content="{{ site.Title }} — research notes and small software">
+
  <link rel="preload" href="{{ "fonts/VT323-Regular.woff" | relURL }}" as="font" type="font/woff" crossorigin>
-  <style>{{ readFile "static/css/main.css" | safeCSS }}</style>
+  {{ $styles := resources.Get "css/main.css" | minify | fingerprint "sha384" }}
+  <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous">

  {{ if .Param "math" }}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
@@ -31,10 +49,12 @@
    ></script>
  {{ end }}

-  <script defer src="{{ "js/site.js" | relURL }}"></script>
+  {{ $scripts := resources.Get "js/site.js" | minify | fingerprint "sha384" }}
+  <script defer src="{{ $scripts.RelPermalink }}" integrity="{{ $scripts.Data.Integrity }}" crossorigin="anonymous"></script>
 </head>

 <body>
+  <a class="skip-link" href="#main-content">Skip to content</a>
  {{ block "main" . }}{{ end }}

 </body>
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -1,5 +1,5 @@
 {{ define "main" }}
-<main class="home">
+<main class="home" id="main-content">
  {{ partial "home-intro.html" . }}
  {{ partial "file-index.html" (dict "active" "posts") }}
 </main>
--- a/layouts/partials/contact-section.html
+++ b/layouts/partials/contact-section.html
@@ -1,3 +1,3 @@
-<section class="contact-section" aria-labelledby="contact-email-heading">
+<section class="contact-section" aria-label="Contact by email">
  <p>Email me at <a href="mailto:akshaykolli@hotmail.com">akshaykolli@hotmail.com</a></p>
 </section>
--- a/layouts/partials/file-index.html
+++ b/layouts/partials/file-index.html
@@ -1,17 +1,19 @@
 {{ $active := .active | default "posts" }}
 {{ $tabs := slice
-  (dict "id" "posts" "label" "Posts" "href" ("/" | relURL))
-  (dict "id" "projects" "label" "Projects" "href" ("/projects/" | relURL))
-  (dict "id" "publications" "label" "Publications" "href" ("/publications/" | relURL))
-  (dict "id" "contact" "label" "Contact" "href" ("/contact/" | relURL))
+  (dict "id" "posts" "label" "Posts" "href" ("/" | relURL) "pageTitle" site.Title)
+  (dict "id" "projects" "label" "Projects" "href" ("/projects/" | relURL) "pageTitle" (printf "Projects · %s" site.Title))
+  (dict "id" "publications" "label" "Publications" "href" ("/publications/" | relURL) "pageTitle" (printf "Publications · %s" site.Title))
+  (dict "id" "contact" "label" "Contact" "href" ("/contact/" | relURL) "pageTitle" (printf "Contact · %s" site.Title))
 }}

-<div class="file-index">
+<div class="file-index" data-file-index>
  <nav class="file-tabs" aria-label="Index views">
    {{ range $tabs }}
      <a
        class="file-tab{{ if eq $active .id }} active{{ end }}"
        href="{{ .href }}"
+        data-file-tab="{{ .id }}"
+        data-page-title="{{ .pageTitle }}"
        aria-label="Show {{ .label }}"
        title="Show {{ .label }}"
        {{ if eq $active .id }}aria-current="page"{{ end }}
@@ -19,17 +21,26 @@
    {{ end }}
  </nav>

-  <section class="file-panel" aria-labelledby="{{ $active }}-heading">
-    <h2 class="sr-only" id="{{ $active }}-heading">{{ title $active }}</h2>
-
-    {{ if eq $active "publications" }}
-      {{ partial "publication-list.html" hugo.Data.publications }}
-    {{ else if eq $active "projects" }}
-      {{ partial "page-list.html" (where site.RegularPages "Section" "projects") }}
-    {{ else if eq $active "contact" }}
-      {{ partial "contact-section.html" . }}
-    {{ else }}
+  <p class="sr-only" data-file-announcer aria-live="polite"></p>
+  <div class="file-panel-host" data-file-panel-host>
+    <section class="file-panel" data-file-panel="posts" aria-labelledby="posts-heading"{{ if ne $active "posts" }} hidden{{ end }}>
+      <h2 class="sr-only" id="posts-heading">Posts</h2>
      {{ partial "post-list.html" (where site.RegularPages "Section" "posts") }}
-    {{ end }}
-  </section>
+    </section>
+
+    <section class="file-panel" data-file-panel="projects" aria-labelledby="projects-heading"{{ if ne $active "projects" }} hidden{{ end }}>
+      <h2 class="sr-only" id="projects-heading">Projects</h2>
+      {{ partial "page-list.html" (where site.RegularPages "Section" "projects") }}
+    </section>
+
+    <section class="file-panel" data-file-panel="publications" aria-labelledby="publications-heading"{{ if ne $active "publications" }} hidden{{ end }}>
+      <h2 class="sr-only" id="publications-heading">Publications</h2>
+      {{ partial "publication-list.html" hugo.Data.publications }}
+    </section>
+
+    <section class="file-panel" data-file-panel="contact" aria-labelledby="contact-heading"{{ if ne $active "contact" }} hidden{{ end }}>
+      <h2 class="sr-only" id="contact-heading">Contact</h2>
+      {{ partial "contact-section.html" . }}
+    </section>
+  </div>
 </div>
--- a/layouts/partials/page-list.html
+++ b/layouts/partials/page-list.html
@@ -2,7 +2,7 @@
  <div class="item-list">
    {{ range .ByWeight }}
      {{ $pageTitle := .Title }}
-      <article class="item-row" data-row-href="{{ .RelPermalink }}" role="link" tabindex="0" aria-label="Open {{ $pageTitle }}">
+      <article class="item-row" data-row-href="{{ .RelPermalink }}">
        <div class="item-year">{{ with .Date }}{{ .Format "Jan 2006" }}{{ end }}</div>
        <div class="item-body">
          <div class="item-head">
--- a/layouts/partials/post-list.html
+++ b/layouts/partials/post-list.html
@@ -1,9 +1,11 @@
 {{ with . }}
-  <div class="tag-filter-status" data-tag-filter-status hidden>
-    <span>Showing <span data-tag-filter-name></span></span>
+  <div class="tag-filter-status" data-tag-filter-status aria-live="polite" hidden>
+    <span>Showing <span data-tag-filter-name></span> · <span data-tag-filter-count></span></span>
    <a href="{{ "/" | relURL }}" aria-label="Clear tag filter" title="Clear tag filter">clear</a>
  </div>

+  <p class="tag-empty" data-tag-empty hidden>No posts match this tag.</p>
+
  <div class="post-list" data-post-list>
    {{ range .ByDate.Reverse }}
      {{ $tags := .Params.tags | default (slice) }}
--- a/layouts/partials/publication-list.html
+++ b/layouts/partials/publication-list.html
@@ -3,7 +3,7 @@
    {{ range sort . "date" "desc" }}
      {{ $pubTitle := .title }}
      {{ $authors := .authors }}
-      <article class="item-row">
+      <article class="item-row publication-row">
        <div class="item-year">
          {{ with .date }}
            {{ time.Format "Jan 2006" . }}
@@ -15,7 +15,13 @@
          <div class="item-head">
            <div class="item-title">{{ $pubTitle }}</div>
          </div>
+          {{ with .venue }}<p class="publication-venue">{{ . }}</p>{{ end }}
          {{ with $authors }}<p class="row-summary">{{ . }}</p>{{ end }}
+          {{ with .links }}
+            <span class="item-links publication-links">
+              {{ range . }}<a href="{{ .url }}" aria-label="{{ .label }} for {{ $pubTitle }}" title="{{ .label }} for {{ $pubTitle }}">{{ .label }}</a>{{ end }}
+            </span>
+          {{ end }}
        </div>
      </article>
    {{ end }}