Skip to content

Commit ba3e4f6

Browse files
committed
Add default og meta tags - vnext
1 parent 2dd030b commit ba3e4f6

4 files changed

Lines changed: 177 additions & 2 deletions

File tree

gulpfile.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,69 @@ gulp.task("overwrite-package-json", (done) => {
5050
done();
5151
});
5252

53+
const createPrependerdLobStructure = (cb) => {
54+
const folders = [
55+
'./dist/app-lob/angular-demos-lob',
56+
'./dist/app-lob/angular-demos-lob/grid',
57+
'./dist/app-lob/angular-demos-lob/tree-grid',
58+
'./dist/app-lob/angular-demos-lob/grid-finjs-dock-manager',
59+
'./dist/app-lob/angular-demos-lob/hierarchical-grid'
60+
];
61+
folders.forEach(dir => {
62+
if (!fs.existsSync(dir)) {
63+
fs.mkdirSync(dir);
64+
}
65+
});
66+
cb();
67+
}
68+
69+
const addPrerenderedLobPages = (cb) => {
70+
const { metadata } = require('./projects/app-lob/src/app/metadata');
71+
const indexFilePath = path.resolve(__dirname, './', 'dist/app-lob', 'index.html');
72+
73+
// read in the index.html file
74+
fs.readFile(indexFilePath, 'utf8', function (err, data) {
75+
if (err) {
76+
return console.error(err);
77+
}
78+
79+
metadata.forEach(({ url, title, description, og_url, folder }) => {
80+
let result = data;
81+
result = result.replace(/\$OG_TITLE/g, title);
82+
result = result.replace(/\$OG_DESCRIPTION/g, description);
83+
result = result.replace(/\$OG_URL/g, og_url);
84+
85+
let filename = url.substring(1).replace(/\//g, '-');
86+
if (filename.length) {
87+
filename = filename + '.html';
88+
} else {
89+
filename = 'index.html';
90+
}
91+
92+
if (folder) {
93+
fs.writeFile(path.resolve(__dirname, './', './dist/app-lob/angular-demos-lob/' + folder, filename), result, (err) => {
94+
if (err) {
95+
console.log(err);
96+
} else {
97+
console.log('Saved ' + filename);
98+
}
99+
});
100+
} else {
101+
fs.writeFile(path.resolve(__dirname, './', 'dist/app-lob/angular-demos-lob', filename), result, (err) => {
102+
if (err) {
103+
console.log(err);
104+
} else {
105+
console.log('Saved ' + filename);
106+
}
107+
});
108+
}
109+
})
110+
})
111+
cb();
112+
}
113+
114+
exports.prerenderPages = gulp.series(createPrependerdLobStructure, addPrerenderedLobPages);
115+
53116
gulp.task("watch-live-editing", gulp.series("generate-live-editing", () => {
54117
gulp.watch(["./src/**/*.*", "!./src/assets/**", "./live-editing/**/*.*", "package.json"], function () {
55118
Object.keys(require.cache).forEach(function (key) {

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@
3333
"repositoryfyAngularDemosLob": "gulp repositoryfyAngularDemosLob",
3434
"repositoryfyAngularDemosLob:prod": "gulp repositoryfyAngularDemosLob --configuration production",
3535
"build:stats": "ng build --stats-json",
36-
"analyze": "webpack-bundle-analyzer dist/app/stats.json"
36+
"analyze": "webpack-bundle-analyzer dist/app/stats.json",
37+
"postbuild:app-lob": "gulp prerenderPages"
3738
},
3839
"repository": {
3940
"type": "git",
Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
const Routes = {
2+
Landing: '/',
3+
GridFinjs: '/grid-finjs',
4+
TreeGridFinjs: '/treegrid-finjs',
5+
TreeGridChilddatakey: '/treegrid-childdatakey',
6+
TreeGridPrimaryforeignkey: '/treegrid-primaryforeignkey',
7+
BostonMarathon: '/grid',
8+
MasterDetail: '/grid-master-detail',
9+
FinJsDockManagerGrid: '/grid-finjs-dock-manager',
10+
HierarchicalGrid: '/hierarchical-grid-resizing',
11+
}
12+
13+
const defaultTitle = 'Data Grids built with Ignite UI for Angular';
14+
const defaultDescription = 'Data Grids built with Ignite UI for Angular Description';
15+
const defaultOgUrl = 'https://www.infragistics.com';
16+
17+
const metadata = [
18+
{
19+
url: Routes.Landing,
20+
title: defaultTitle,
21+
description: defaultDescription,
22+
og_url: defaultOgUrl,
23+
folder: ''
24+
},
25+
{
26+
url: Routes.GridFinjs,
27+
title: 'Real-Time Financial Analysis Data Grid built with Ignite UI for Angular',
28+
description: 'Real-Time Financial Analysis Data Grid built with Ignite UI for Angular',
29+
og_url: 'https://www.infragistics.com/angular-demos-lob/grid-finjs',
30+
folder: ''
31+
},
32+
{
33+
url: Routes.TreeGridFinjs,
34+
title: 'Angular Tree Grid Example built with Ignite UI for Angular',
35+
description: 'Angular Tree Grid Example built with Ignite UI for Angular',
36+
og_url: 'https://www.infragistics.com/angular-demos-lob/treegrid-finjs',
37+
folder: ''
38+
},
39+
{
40+
url: Routes.TreeGridChilddatakey,
41+
title: 'Build Better Modern Web Experiences, Faster with Angular Components',
42+
description: 'Create feature-rich, progressive web apps with Ignite UI for Angular! A complete library for Angular native UI components, including the fastest Angular data grid and 60+ high-performance charts.',
43+
og_url: 'https://www.infragistics.com/angular-demos-lob/tree-grid/treegrid-childdatakey',
44+
folder: 'tree-grid'
45+
},
46+
{
47+
url: Routes.TreeGridPrimaryforeignkey,
48+
title: 'Build Better Modern Web Experiences, Faster with Angular Components',
49+
description: 'Create feature-rich, progressive web apps with Ignite UI for Angular! A complete library for Angular native UI components, including the fastest Angular data grid and 60+ high-performance charts.',
50+
og_url: 'https://www.infragistics.com/angular-demos-lob/tree-grid/treegrid-primaryforeignkey',
51+
folder: 'tree-grid'
52+
},
53+
{
54+
url: Routes.BostonMarathon,
55+
title: 'Boston Marathon 2020 – Angular Data Grid Example',
56+
description: 'Boston Marathon 2020 – Angular Data Grid Example',
57+
og_url: 'https://www.infragistics.com/angular-demos-lob/grid/grid',
58+
folder: 'grid'
59+
},
60+
{
61+
url: Routes.MasterDetail,
62+
title: 'Angular Grid Master-Detail Example built with Ignite UI for Angular',
63+
description: 'Angular Grid Master-Detail Example built with Ignite UI for Angular',
64+
og_url: 'https://www.infragistics.com/angular-demos-lob/grid/grid-master-detail',
65+
folder: 'grid'
66+
},
67+
{
68+
url: Routes.FinJsDockManagerGrid,
69+
title: 'Build Better Modern Web Experiences, Faster with Angular Components',
70+
description: 'Create feature-rich, progressive web apps with Ignite UI for Angular! A complete library for Angular native UI components, including the fastest Angular data grid and 60+ high-performance charts.',
71+
og_url: 'https://www.infragistics.com/angular-demos-lob/grid-finjs-dock-manager/grid-finjs-dock-manager',
72+
folder: 'grid-finjs-dock-manager'
73+
},
74+
{
75+
url: Routes.HierarchicalGrid,
76+
title: 'Build Better Modern Web Experiences, Faster with Angular Components',
77+
description: 'Create feature-rich, progressive web apps with Ignite UI for Angular! A complete library for Angular native UI components, including the fastest Angular data grid and 60+ high-performance charts.',
78+
og_url: 'https://www.infragistics.com/angular-demos-lob/hierarchical-grid/hierarchical-grid-resizing',
79+
folder: 'hierarchical-grid'
80+
}
81+
];
82+
83+
const get = (route) => {
84+
const data = metadata.find(({ url }) => url === route);
85+
if (data) {
86+
return data;
87+
} else {
88+
return {
89+
url: route,
90+
title: defaultTitle,
91+
description: defaultDescription,
92+
og_url: defaultOgUrl
93+
}
94+
}
95+
}
96+
97+
module.exports = {
98+
metadata,
99+
Routes,
100+
get,
101+
};

projects/app-lob/src/index.html

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,20 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>Angular Demos with DV</title>
76
<base href="/">
87

98
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
<title>$OG_TITLE</title>
11+
<meta property="og:title" content="$OG_TITLE">
12+
<meta property="og:description" content="$OG_DESCRIPTION">
13+
<meta property="og:url" content="$OG_URL">
14+
<meta property="og:image" content="https://avatars0.githubusercontent.com/u/5366066?s=400&amp;amp;v=4">
15+
<meta property="og:image:width" content="300" />
16+
<meta property="og:image:height" content="300" />
17+
<meta property="twitter:image" content="https://avatars0.githubusercontent.com/u/5366066?s=400&amp;amp;v=4" />
18+
<meta property="og:type" content="website">
19+
<meta name="twitter:card" content="summary">
1020
<link rel="icon" type="image/x-icon" href="favicon.ico">
1121
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
1222
<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">

0 commit comments

Comments
 (0)