mirror of
https://github.com/go-task/task.git
synced 2026-05-18 05:05:20 +02:00
feat(website): improve adopters carousel SEO and accessibility
Promotes the carousel label from <p> to <h2>, links the section to the heading via aria-labelledby, adds an accessible label per chip, and turns the opaque logo <img> tags into proper lazy-loaded assets with explicit dimensions. Adds a subline naming seven brands (Docker, Microsoft, HashiCorp, Vercel, Google Cloud, AWS, Anthropic) so the homepage now has indexable text referencing actual adopters — previously the brand information only lived inside animated chips. Emits a schema.org ItemList of Organization entities (JSON-LD) on the homepage, which none of the comparable OSS sites (Vite, Biome, Astro, Nx, Turborepo) currently expose — cheap differentiator for rich search results.
This commit is contained in:
@@ -5,10 +5,16 @@ const loop = [...adopters, ...adopters];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="adopters-carousel">
|
||||
<p class="label">
|
||||
<section class="adopters-carousel" aria-labelledby="adopters-heading">
|
||||
<h2 id="adopters-heading" class="label">
|
||||
<span class="slashes">//</span>
|
||||
Trusted by open source projects
|
||||
</h2>
|
||||
<p class="subline">
|
||||
Adopted by <strong>Docker</strong>, <strong>Microsoft</strong>,
|
||||
<strong>HashiCorp</strong>, <strong>Vercel</strong>,
|
||||
<strong>Google Cloud</strong>, <strong>AWS</strong>,
|
||||
<strong>Anthropic</strong> and more.
|
||||
</p>
|
||||
|
||||
<div class="viewport">
|
||||
@@ -20,10 +26,19 @@ const loop = [...adopters, ...adopters];
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
class="chip"
|
||||
:aria-label="`${item.name} on GitHub`"
|
||||
>
|
||||
<img :src="item.img" :alt="`${item.name} logo`" class="logo" />
|
||||
<img
|
||||
:src="item.img"
|
||||
:alt="`${item.name} logo`"
|
||||
class="logo"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width="28"
|
||||
height="28"
|
||||
/>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="chevron">→</span>
|
||||
<span class="chevron" aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,7 +60,7 @@ const loop = [...adopters, ...adopters];
|
||||
color: var(--vp-c-text-2);
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
margin: 0 0 2rem;
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.slashes {
|
||||
@@ -53,6 +68,20 @@ const loop = [...adopters, ...adopters];
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
.subline {
|
||||
text-align: center;
|
||||
font-size: 0.95rem;
|
||||
color: var(--vp-c-text-2);
|
||||
max-width: 640px;
|
||||
margin: 0 auto 2rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.subline strong {
|
||||
color: var(--vp-c-text-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
localIconLoader
|
||||
} from 'vitepress-plugin-group-icons';
|
||||
import { team } from './team.ts';
|
||||
import { adopters } from './adopters.ts';
|
||||
import { taskDescription, taskName, ogUrl, ogImage } from './meta.ts';
|
||||
import { fileURLToPath, URL } from 'node:url';
|
||||
import llmstxt from 'vitepress-plugin-llms';
|
||||
@@ -107,6 +108,34 @@ export default defineConfig({
|
||||
head.push(['meta', { name: 'robots', content: 'noindex, nofollow' }])
|
||||
}
|
||||
|
||||
// Structured data for the adopters carousel on the homepage: an ItemList
|
||||
// of Organization entities so search engines can surface Task's adopters
|
||||
// directly in rich results.
|
||||
if (isHome) {
|
||||
head.push([
|
||||
'script',
|
||||
{ type: 'application/ld+json' },
|
||||
JSON.stringify({
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'ItemList',
|
||||
name: 'Organizations and projects using Task',
|
||||
itemListOrder: 'https://schema.org/ItemListUnordered',
|
||||
numberOfItems: adopters.length,
|
||||
itemListElement: adopters.map((a, i) => ({
|
||||
'@type': 'ListItem',
|
||||
position: i + 1,
|
||||
item: {
|
||||
'@type': 'Organization',
|
||||
name: a.name,
|
||||
url: a.url,
|
||||
logo: a.img,
|
||||
sameAs: [a.url]
|
||||
}
|
||||
}))
|
||||
})
|
||||
])
|
||||
}
|
||||
|
||||
return head
|
||||
},
|
||||
srcDir: 'src',
|
||||
|
||||
Reference in New Issue
Block a user