Skip to content

Commit de6f96c

Browse files
perrygovierperrygovier
committed
support for dynamic meta images @ description
1 parent ad5b6d6 commit de6f96c

4 files changed

Lines changed: 62 additions & 28 deletions

File tree

‎src/components/page/page.tsx‎

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,55 @@ export class DocsPage {
6161
}
6262

6363
@Watch('page')
64-
setDocumentTitle(page: Page) {
64+
setDocumentMeta(page: Page) {
6565
const { title, meta = {} } = page;
66-
const suffix = /^\/docs\/pages\/appflow.*$/.test(this.path) ? 'Ionic Appflow Documentation' : 'Ionic Documentation';
67-
const pageTitle = meta.title || `${title} - ${suffix}`;
68-
this.document.title = pageTitle;
66+
const metaEls = {
67+
title: document.querySelectorAll('head .meta-title'),
68+
description: document.querySelectorAll('head .meta-description'),
69+
url: document.querySelectorAll('head .meta-url'),
70+
image: document.querySelectorAll('head .meta-image')
71+
};
72+
73+
function updateMeta(els, update) {
74+
els.forEach(el => {
75+
['href', 'content'].forEach(attr => {
76+
if (el[attr]) {
77+
el[attr] = update(el[attr]);
78+
}
79+
});
80+
['title'].forEach(elType => {
81+
if (el.nodeName === elType.toUpperCase()) {
82+
el.text = update(el.text);
83+
}
84+
});
85+
});
86+
}
87+
88+
// Title
89+
updateMeta(metaEls.title, () => {
90+
const suffix = /^\/docs\/pages\/appflow.*$/.test(this.path) ?
91+
'Ionic Appflow Documentation' : 'Ionic Documentation';
92+
// Favor meta title, else go with auto-title. fallback to generic title
93+
return meta.title || title ? `${title} - ${suffix}` : suffix;
94+
});
95+
96+
// Canonical URL
97+
updateMeta(metaEls.url, oldVal => {
98+
const uri = '\/docs\/';
99+
let path = location.pathname.split(uri)[1];
100+
if (path === undefined) {
101+
path = '';
102+
}
103+
return oldVal.split(uri)[0] + uri + path;
104+
});
105+
106+
// Description
107+
updateMeta(metaEls.description, () => meta.description ||
108+
'Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards');
109+
110+
// Sharing Image
111+
updateMeta(metaEls.image, () => meta.image ||
112+
'https://ionicframework.com/docs/assets/img/meta/open-graph.png');
69113
}
70114

71115
hostData() {

‎src/components/root/root.tsx‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,6 @@ export class DocsRoot {
1919
(window as any).gtag('config', 'UA-44023830-1', { 'page_path': location.pathname + location.search });
2020
});
2121
}
22-
23-
document.querySelectorAll('head .url').forEach(el => {
24-
const uri = '\/docs\/';
25-
['href', 'content'].forEach(attr => {
26-
if (el[attr]) {
27-
let path = location.pathname.split(uri)[1];
28-
if (path === undefined) {
29-
path = '';
30-
}
31-
el[attr] = el[attr].split(uri)[0] + uri + path;
32-
}
33-
});
34-
});
3522
}
3623

3724
@Watch('isMenuToggled')

‎src/index.html‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,26 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title class="meta-image">Ionic Documentation</title>
5+
<title class="meta-title">Ionic Documentation</title>
66
<meta name="author" content="Ionic">
7-
<meta name="description" content="Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards">
7+
<meta name="description" content="Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards" class="meta-description">
88
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1">
99
<meta name="theme-color" content="#ffffff">
1010
<link rel="manifest" href="/docs/manifest.json">
1111

1212
<meta property="og:site_name" content="Ionic Framework">
13-
<meta property="og:url" content="https://ionicframework.com/docs/" class="url">
13+
<meta property="og:url" content="https://ionicframework.com/docs/" class="meta-url">
1414
<meta property="og:type" content="article">
15-
<meta property="og:title" content="Ionic Documentation" class="meta-image">
15+
<meta property="og:title" content="Ionic Documentation" class="meta-title">
1616
<meta property="og:image" content="https://ionicframework.com/docs/assets/img/meta/open-graph.png" class="meta-image">
17-
<meta property="og:description" content="Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards">
17+
<meta property="og:description" content="Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards" class="meta-description">
1818

1919
<meta name="twitter:site" content="@ionicframework">
20-
<meta name="twitter:title" content="Ionic Documentation" class="meta-image">
20+
<meta name="twitter:title" content="Ionic Documentation" class="meta-title">
2121
<meta name="twitter:image" content="https://ionicframework.com/docs/assets/img/meta/open-graph.png" class="meta-image">
22-
<meta name="twitter:description" content="Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards">
22+
<meta name="twitter:description" content="Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards" class="meta-description">
23+
24+
<meta property="fb:page_id" content="1321836767955949">
2325

2426
<link rel="apple-touch-icon" sizes="57x57" href="/docs/assets/img/meta/apple-touch-icon-57x57.png">
2527
<link rel="apple-touch-icon" sizes="60x60" href="/docs/assets/img/meta/apple-touch-icon-60x60.png">
@@ -34,10 +36,10 @@
3436
<link rel="icon" type="image/png" href="/docs/assets/img/meta/favicon-32x32.png" sizes="32x32">
3537
<link rel="icon" type="image/png" href="/docs/assets/img/meta/favicon-96x96.png" sizes="96x96">
3638

37-
<link rel="canonical-test" href="https://ionicframework.com/docs/" class="url" />
39+
<link rel="canonical" href="https://ionicframework.com/docs/" class="meta-url" />
3840

39-
<link rel="alternate" hreflang="x-default" href="https://ionicframework.com/docs/" class="url" />
40-
<link rel="alternate" hreflang="jp" href="https://ionicframework.com/jp/docs/" class="url" />
41+
<link rel="alternate" hreflang="x-default" href="https://ionicframework.com/docs/" class="meta-url" />
42+
<link rel="alternate" hreflang="jp" href="https://ionicframework.com/jp/docs/" class="meta-url" />
4143

4244
<link rel="stylesheet" href="/docs/build/app.css">
4345
</head>

‎src/pages/index.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
---
22
title: Ionic Framework
33
meta:
4-
image: testing.png
4+
image: /docs/assets/img/meta/open-graph.png
5+
description: Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards
56
---
67

78
<docs-cards>

0 commit comments

Comments
 (0)