Skip to content

Commit

Permalink
docs: improve meta tags
Browse files Browse the repository at this point in the history
  • Loading branch information
mtdvlpr committed Dec 19, 2024
1 parent ad07b61 commit a9eda4f
Show file tree
Hide file tree
Showing 14 changed files with 89 additions and 11 deletions.
80 changes: 69 additions & 11 deletions docs/.vitepress/config.mts
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,11 @@ export default defineConfig({
base,
cleanUrls: true,
head: [
// Favicon variants
[
'link',
{
href: `${base}icons/favicon-128x128.png`,
href: `${base}icons/icon-128x128.png`,
rel: 'icon',
sizes: '128x128',
type: 'image/png',
Expand All @@ -29,7 +30,7 @@ export default defineConfig({
[
'link',
{
href: `${base}icons/favicon-96x96.png`,
href: `${base}icons/icon-96x96.png`,
rel: 'icon',
sizes: '96x96',
type: 'image/png',
Expand All @@ -38,7 +39,7 @@ export default defineConfig({
[
'link',
{
href: `${base}icons/favicon-32x32.png`,
href: `${base}icons/icon-32x32.png`,
rel: 'icon',
sizes: '32x32',
type: 'image/png',
Expand All @@ -47,7 +48,7 @@ export default defineConfig({
[
'link',
{
href: `${base}icons/favicon-16x16.png`,
href: `${base}icons/icon-16x16.png`,
rel: 'icon',
sizes: '16x16',
type: 'image/png',
Expand All @@ -62,18 +63,36 @@ export default defineConfig({
type: 'image/svg+xml',
},
],

// General meta tags
['meta', { content: 'light dark', name: 'color-scheme' }],
['meta', { content: '#3075F2', name: 'theme-color' }],
['meta', { content: 'yes', name: 'mobile-web-app-capable' }],
['meta', { content: 'telephone=no', name: 'format-detection' }],
[
'meta',
{ content: `${base}browserconfig.xml`, name: 'msapplication-config' },
],

// Apple meta tags
['meta', { content: 'yes', name: 'apple-mobile-web-app-capable' }],
[
'meta',
{ content: 'black', name: 'apple-mobile-web-app-status-bar-style' },
],

// Twitter meta tags
['meta', { content: 'summary_large_image', name: 'twitter:card' }],
[
'meta',
{
content: `${CANONICAL_URL}m3-project-cover.png`,
name: 'twitter:image',
},
],
['meta', { content: 'M³ project cover', name: 'twitter:image:alt' }],
['meta', { content: 'website', property: 'og:type' }],
// Project cover

// Project cover og image
[
'meta',
{ content: `${CANONICAL_URL}m3-project-cover.png`, property: 'og:image' },
Expand All @@ -82,18 +101,20 @@ export default defineConfig({
['meta', { content: '1442', property: 'og:image:width' }],
['meta', { content: '865', property: 'og:image:height' }],
['meta', { content: 'M³ project cover', property: 'og:image:alt' }],
// // Logo
// ['meta', { content: `${CANONICAL_URL}icon.png`, property: 'og:image' }],

// Logo og image
// ['meta', { content: `${CANONICAL_URL}icons/icon-512x512.png`, property: 'og:image' }],
// ['meta', { content: 'image/png', property: 'og:image:type' }],
// ['meta', { content: '512', property: 'og:image:width' }],
// ['meta', { content: '512', property: 'og:image:height' }],
// ['meta', { content: 'The logo of M³', property: 'og:image:alt' }],
// // Repo preview

// Repo preview og image
// [
// 'meta',
// { content: `${CANONICAL_URL}m3-repo-preview.jpg`, property: 'og:image' },
// { content: `${CANONICAL_URL}m3-repo-preview.png`, property: 'og:image' },
// ],
// ['meta', { content: 'image/jpg', property: 'og:image:type' }],
// ['meta', { content: 'image/png', property: 'og:image:type' }],
// ['meta', { content: '1280', property: 'og:image:width' }],
// ['meta', { content: '640', property: 'og:image:height' }],
// ['meta', { content: 'M³ repo preview banner', property: 'og:image:alt' }],
Expand Down Expand Up @@ -139,10 +160,43 @@ export default defineConfig({
const messageLocale = kebabToCamelCase(pageLang) as LanguageValue;
const isEnglish = pageData.relativePath.split('/').length === 1;

const lastUpdated = (
pageData.lastUpdated ? new Date(pageData.lastUpdated) : new Date()
).toISOString();

pageData.frontmatter.head ??= [];
pageData.frontmatter.head.push(
// Page url
['link', { href: canonicalUrl, rel: 'canonical' }],
['meta', { content: canonicalUrl, property: 'og:url' }],

// Page type
[
'meta',
{
content:
pageData.frontmatter.layout === 'home' ? 'website' : 'article',
property: 'og:type',
},
],

// Page last updated
['meta', { content: lastUpdated, property: 'og:updated_time' }],
['meta', { content: lastUpdated, property: 'article:modified_time' }],

// Page title
[
'meta',
{
content:
pageData.frontmatter.layout === 'home'
? isEnglish
? messages['en'].title
: messages[messageLocale].title
: `${pageData.title} | M³ docs`,
name: 'twitter:title',
},
],
[
'meta',
{
Expand All @@ -155,6 +209,8 @@ export default defineConfig({
property: 'og:title',
},
],

// Page default locale
[
'link',
{
Expand All @@ -165,6 +221,8 @@ export default defineConfig({
rel: 'alternate',
},
],

// Available page locales
...localeOptions
.filter((l) => l.value === 'en' || enabled.includes(l.value))
.map((l): [string, Record<string, string>] => {
Expand Down
12 changes: 12 additions & 0 deletions docs/src/public/browserconfig.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/meeting-media-manager/icons/icon-75x75.png"/>
<square150x150logo src="/meeting-media-manager/icons/icon-150x150.png"/>
<wide310x150logo src="/meeting-media-manager/icons/icon-310x150.png"/>
<square310x310logo src="/meeting-media-manager/icons/icon-310x310.png"/>
<TileColor>#3075F2</TileColor>
</tile>
</msapplication>
</browserconfig>
File renamed without changes
Binary file added docs/src/public/icons/icon-150x150.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Binary file added docs/src/public/icons/icon-310x150.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/src/public/icons/icon-310x310.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
File renamed without changes
Binary file added docs/src/public/icons/icon-75x75.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Binary file removed docs/src/public/m3-repo-preview.jpg
Binary file not shown.
Binary file added docs/src/public/m3-repo-preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions docs/utils/locales.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,16 @@ const mapLocale = (
} => ({
description: msg.description,
head: [
// Site name
['meta', { content: msg.title, name: 'application-name' }],
['meta', { content: msg.title, name: 'apple-mobile-web-app-title' }],
['meta', { content: msg.title, property: 'og:site_name' }],

// Site description
['meta', { content: msg.description, property: 'og:description' }],
['meta', { content: msg.description, name: 'twitter:description' }],

// Current locale and alternate locales
['meta', { content: lang, property: 'og:locale' }],
...localeOptions
.filter(
Expand All @@ -41,6 +47,8 @@ const mapLocale = (
property: 'og:locale:alternate',
},
]),

// Translate the "Copied" message in code blocks
[
'style',
{},
Expand Down

0 comments on commit a9eda4f

Please sign in to comment.