Redesign site and optimize page performance

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>

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>

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

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

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