docs: improve public page accessibility and metadata (#3009)

website/.vitepress/components/AuthorCard.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="author-compact" v-if="author">
-    <img :src="author.avatar" :alt="author.name" class="author-avatar" />
+    <img
+      :src="author.avatar"
+      :alt="author.name"
+      class="author-avatar"
+      width="48"
+      height="48"
+      loading="lazy"
+      decoding="async"
+    />
     <div class="author-info">
       <div class="author-name-line">
         <span class="author-name">{{ author.name }}</span>
@@ -11,9 +19,11 @@
             :key="link"
             :href="link"
             target="_blank"
+            rel="noopener noreferrer"
             class="social-link"
+            :aria-label="`${author.name} on ${socialName(icon)}`"
           >
-            <span :class="`vpi-social-${icon}`"></span>
+            <span :class="`vpi-social-${icon}`" aria-hidden="true"></span>
           </a>
         </div>
       </div>
@@ -22,12 +32,21 @@
   </div>
 </template>
 
-<script setup>
-import { team } from '../team.ts';
+<script setup lang="ts">
+import { team } from '../team';
 import { computed } from 'vue';
-const props = defineProps({
-  author: String
-});
+
+const props = defineProps<{ author?: string }>();
+
+const socialNames: Record<string, string> = {
+  bluesky: 'Bluesky',
+  discord: 'Discord',
+  github: 'GitHub',
+  mastodon: 'Mastodon',
+  x: 'X'
+};
+
+const socialName = (icon: string) => socialNames[icon] ?? icon;
 
 const author = computed(() => {
   return team.find((m) => m.slug === props.author) || null;

website/.vitepress/components/BlogPost.vue

@@ -1,9 +1,9 @@
 <template>
   <article class="blog-post">
     <div class="post-header">
-      <h3 class="post-title">
+      <h2 class="post-title">
         <a :href="url">{{ title }}</a>
-      </h3>
+      </h2>
 
       <div class="post-meta">
         <time :datetime="date" class="post-date">
@@ -37,23 +37,27 @@
   </article>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import AuthorCard from './AuthorCard.vue';
-const props = defineProps({
-  title: String,
-  url: String,
-  date: String,
-  author: String,
-  description: String,
-  tags: Array,
-  image: String
-});
 
-function formatDate(date) {
+interface Props {
+  title: string;
+  url: string;
+  date: string;
+  author?: string;
+  description?: string;
+  tags?: string[];
+  image?: string;
+}
+
+defineProps<Props>();
+
+function formatDate(date: string) {
   return new Date(date).toLocaleDateString('en-US', {
     year: 'numeric',
     month: 'long',
-    day: 'numeric'
+    day: 'numeric',
+    timeZone: 'UTC'
   });
 }
 </script>
@@ -156,7 +160,7 @@ function formatDate(date) {
 
 .read-more:hover {
   background: var(--vp-c-brand-1);
-  color: white;
+  color: var(--vp-c-bg);
 }
 
 /* Responsive */

website/src/donate.md

@@ -1,5 +1,8 @@
 ---
 title: Donate
+description:
+  Support the ongoing development and maintenance of the open-source Task task
+  runner.
 layout: doc
 outline: false
 editLink: false
@@ -31,14 +34,14 @@ The preferred way to donate is through **GitHub Sponsors**. We suggest splitting
 your donation equally between maintainers:
 
 <div style="display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0;">
-  <a href="https://github.com/sponsors/andreynering" target="_blank">
-    <img src="https://img.shields.io/badge/@andreynering-30363d?logo=github&logoColor=white&style=for-the-badge" />
+  <a href="https://github.com/sponsors/andreynering" target="_blank" rel="noopener noreferrer">
+    <img src="https://img.shields.io/badge/@andreynering-30363d?logo=github&logoColor=white&style=for-the-badge" alt="Sponsor Andrey Nering on GitHub" />
   </a>
-  <a href="https://github.com/sponsors/pd93" target="_blank">
-    <img src="https://img.shields.io/badge/@pd93-30363d?logo=github&logoColor=white&style=for-the-badge" />
+  <a href="https://github.com/sponsors/pd93" target="_blank" rel="noopener noreferrer">
+    <img src="https://img.shields.io/badge/@pd93-30363d?logo=github&logoColor=white&style=for-the-badge" alt="Sponsor Pete Davison on GitHub" />
   </a>
-  <a href="https://github.com/sponsors/vmaerten" target="_blank">
-    <img src="https://img.shields.io/badge/@vmaerten-30363d?logo=github&logoColor=white&style=for-the-badge" />
+  <a href="https://github.com/sponsors/vmaerten" target="_blank" rel="noopener noreferrer">
+    <img src="https://img.shields.io/badge/@vmaerten-30363d?logo=github&logoColor=white&style=for-the-badge" alt="Sponsor Valentin Maerten on GitHub" />
   </a>
 </div>
 

website/src/index.md

@@ -1,5 +1,8 @@
 ---
-title: "Task: The Modern Task Runner"
+title: 'Task: The Modern Task Runner'
+description:
+  Task is a fast, cross-platform task runner and build tool that uses a simple
+  YAML Taskfile.
 layout: home
 hero:
   name: Task
@@ -8,7 +11,7 @@ hero:
     A fast, cross-platform build tool inspired by Make, designed for modern
     workflows.
   image:
-    src: /img/logo.png
+    src: /img/logo.svg
     alt: Task logo
   actions:
     - theme: brand

website/src/team.md

@@ -1,4 +1,8 @@
 ---
+title: Task maintainers
+description:
+  Meet the international team that maintains the Task task runner and its
+  open-source community.
 layout: page
 ---