Skip to content

Commit 858681b

Browse files
0618zhamujunreesscot
authored
seo(docs): sitemap path, priority and changefreq change (#1900)
* seo(docs): sitemap path, priority and changefreq change * chore(seo): convert generate-sitemap-robotstxt to ts file * fix docs module * add manifest to generate-sitemap-robotstxt * fix(sitemap): generate correct path * chore(sitemap): clean up console.log and add FRAMEWORKS constant * Update docs/scripts/generate-sitemap-robotstxt.ts Co-authored-by: Scott Rees <[email protected]> * Update docs/scripts/generate-sitemap-robotstxt.ts Co-authored-by: Scott Rees <[email protected]> * chore(docs): update README and remove redundant metaTitle * chore(docs): refactor supportedFrameworks to use `all` * update docs README * Update docs/src/pages/[platform]/getting-started/migration/index.page.mdx Co-authored-by: Scott Rees <[email protected]> * Update docs/src/pages/[platform]/theming/css-variables/index.page.mdx Co-authored-by: Scott Rees <[email protected]> * fix(sitemap): include angular and vue for chatbot and storage * refactor(sitemap): use esbuild-register to replace ts-node * chore(sitemap): delete ts-node Co-authored-by: MJ☔ <[email protected]> Co-authored-by: Scott Rees <[email protected]>
1 parent 89cd6a1 commit 858681b

File tree

21 files changed

+226
-115
lines changed

21 files changed

+226
-115
lines changed

docs/README.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,14 @@ These docs are published at https://docs.amplify.aws/ui and powered by the follo
1515
1. Open <http://localhost:5000/>
1616
1. _Optional:_ To build the flutter authenticator sample, [install flutter](https://docs.flutter.dev/get-started/install) and then run `yarn flutter:build`. This will build the flutter authenticator one time. It will not watch for changes.
1717

18+
Note: to set up local environment
19+
20+
```sh
21+
cp ./docs/.env.example ./docs/.env
22+
```
23+
24+
Then set values to the variables.
25+
1826
### Creating a Page
1927

2028
Page paths mirror their URLs. For example, `/components/authenticator` is located at [/src/pages/[platform]/components/authenticator/index.page.mdx](src/pages/[platform]/components/authenticator/index.page.mdx).
@@ -39,3 +47,16 @@ content & demos are loaded asynchronously.
3947

4048
Pages **must** end with `.page.(mdx|tsx)` to differentiate them supplemental
4149
`.mdx` fragments or `.tsx` utilities.
50+
51+
#### Meta Information
52+
53+
As default, pages use its title and description information as meta information. If you would like to override it with different message, you can use `metaTitle` or `metaDescription`.
54+
55+
## Host on Amplify
56+
57+
To preview the changes you made for this Amplify UI Docs, you can use Amplify to host your feature branch for the forked repository by [following these steps](https://docs.amplify.aws/guides/hosting/git-based-deployments/q/platform/js/#4-deploy-your-app-to-aws-amplify).
58+
59+
Then you need to:
60+
61+
1. After selecting a branch, check "Connecting a monorepo? Pick a folder." and at "Enter the root directory of your app (e.g. src/myapp)", enter "docs"
62+
2. Set "Environment variables" from the left sidebar. Add "SITE_URL" and set it to a string value.

docs/package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"flutter:copy": "cp -r ./flutter/authenticator/build/web public/flutter/authenticator",
1212
"build": "next build",
1313
"lint": "next lint",
14-
"postbuild": "node ./scripts/generate-sitemap-robotstxt.mjs",
14+
"postbuild": "node --require esbuild-register ./scripts/generate-sitemap-robotstxt.ts",
1515
"start": "next start",
1616
"test": "$_ run build"
1717
},
@@ -60,6 +60,8 @@
6060
"@types/node": "^14.14.31",
6161
"@types/react": "^17.0.2",
6262
"autoprefixer": "^10.2.4",
63+
"dotenv-safe": "^8.2.0",
64+
"esbuild-register": "^3.3.2",
6365
"eslint-config-next": "12.0.4",
6466
"globby": "^13.1.1",
6567
"json5-loader": "^4.0.1",

docs/scripts/generate-sitemap-robotstxt.mjs

Lines changed: 0 additions & 103 deletions
This file was deleted.
Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
/**
2+
* Generate SiteMap for SEO Purpose
3+
* We choose to write the script instead of using next-sitemap library because
4+
* next-sitemap library doesn't handle Next.js dynamic path well and it's easier
5+
* to maintain the small script on our own.
6+
* src: https://leerob.io/blog/nextjs-sitemap-robots
7+
*/
8+
9+
import dotenv from 'dotenv-safe';
10+
import { globby } from 'globby';
11+
import prettier from 'prettier';
12+
import { writeFileSync } from 'fs';
13+
import path from 'path';
14+
15+
import { getContentPaths } from '../src/utils/getContentPaths';
16+
import { getPageFromSlug } from '../src/utils/getPageFromSlug';
17+
import { getPagesManifest } from '../src/utils/getPagesManifest';
18+
import { META_INFO } from '../src/data/meta';
19+
import { FRAMEWORKS } from '../src/data/frameworks';
20+
21+
dotenv.config();
22+
23+
async function generateSitemap() {
24+
const manifest = await getPagesManifest(
25+
getContentPaths,
26+
getPageFromSlug,
27+
META_INFO
28+
);
29+
30+
console.log('🗺 ▶️ SiteMap generating...');
31+
const prettierConfig = await prettier.resolveConfig('./.prettierrc.js');
32+
const pagesWithParam = await globby([
33+
'src/pages/**/index.page.tsx',
34+
'src/pages/**/index.page.mdx',
35+
'!src/pages/_*.tsx',
36+
'!src/pages/404.page.tsx',
37+
]);
38+
39+
const pages = pagesWithParam
40+
.slice(1)
41+
.flatMap((p) => {
42+
p = p
43+
.replace('src/pages', '')
44+
.replace('.page.mdx', '')
45+
.replace('.page.tsx', '')
46+
.replace('/index', '');
47+
48+
return FRAMEWORKS.map((framework) => {
49+
const filepath = p.replace('[platform]', framework);
50+
const supportedFrameworks =
51+
manifest[p].frontmatter.supportedFrameworks === 'all'
52+
? FRAMEWORKS
53+
: manifest[p].frontmatter.supportedFrameworks.split('|');
54+
if (supportedFrameworks.includes(framework)) {
55+
return filepath;
56+
} else {
57+
console.log(
58+
`ⓧ ${filepath} does not support ${framework}. Skipping adding to sitemap.`
59+
);
60+
return '';
61+
}
62+
});
63+
})
64+
.filter((el) => el);
65+
66+
const sitemap = `
67+
<?xml version="1.0" encoding="UTF-8"?>
68+
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
69+
<url>
70+
<loc>https://ui.docs.amplify.aws</loc>
71+
<changefreq>weekly</changefreq>
72+
<priority>0.5</priority>
73+
<lastmod>2022-05-19T16:24:03.254Z</lastmod>
74+
</url>
75+
${pages
76+
.map((path) => {
77+
const route = path === '/index' ? '' : path;
78+
79+
/**
80+
* The priority of this URL relative to other URLs on your site.
81+
* Valid values range from 0.0 to 1.0. This value does not affect
82+
* how your pages are compared to pages on other sites—it only lets
83+
* the search engines know which pages you deem most important for
84+
* the crawlers.
85+
* Source: https://www.sitemaps.org/protocol.html#prioritydef
86+
*/
87+
const prioritize = (path) => {
88+
const defaultPriority = 0.5;
89+
const isGetStarted = path.includes('getting-started') ? 0.1 : 0;
90+
const isReact = path.includes('react') ? 0.1 : 0;
91+
92+
return defaultPriority + isGetStarted + isReact;
93+
};
94+
const priority = prioritize(route);
95+
96+
return `
97+
<url>
98+
<loc>${'https://ui.docs.amplify.aws'}${route}</loc>
99+
<changefreq>weekly</changefreq>
100+
<priority>${priority}</priority>
101+
<lastmod>${new Date().toISOString()}</lastmod>
102+
</url>
103+
`;
104+
})
105+
.join('')}
106+
</urlset>
107+
`;
108+
109+
const formatted = prettier.format(sitemap, {
110+
...prettierConfig,
111+
parser: 'html',
112+
});
113+
114+
// eslint-disable-next-line no-sync
115+
writeFileSync(path.resolve(__dirname, '../public/sitemap.xml'), formatted);
116+
console.log('🗺 ✅ SiteMap generated.');
117+
}
118+
119+
function generateRobotsTxt() {
120+
const isProd =
121+
process.env.SITE_URL &&
122+
process.env.SITE_URL.startsWith('https://ui.docs.amplify.aws');
123+
console.log(
124+
`🤖▶️ robots.txt generating for ${
125+
isProd
126+
? 'Prod. Googlebot is allowed.'
127+
: 'non-Prod. Googlebot is disallowed.'
128+
}...`
129+
);
130+
const disallowTxt = `# *
131+
User-agent: Googlebot
132+
Disallow: /
133+
`;
134+
135+
const txt = `${isProd ? '' : disallowTxt}
136+
User-agent: *
137+
Allow: /
138+
139+
# Host
140+
Host: ui.docs.amplify.aws
141+
142+
# Sitemaps
143+
Sitemap: ${'https://ui.docs.amplify.aws'}
144+
`;
145+
writeFileSync(path.resolve(__dirname, '../public/robots.txt'), txt);
146+
console.log('🤖✅ robots.txt generated.');
147+
}
148+
149+
generateSitemap();
150+
generateRobotsTxt();

docs/scripts/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"type": "commonjs"
3+
}

docs/src/data/frameworks.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export type Frameworks = string[];
2+
3+
export const FRAMEWORKS: Frameworks = ['react', 'angular', 'vue', 'flutter'];

docs/src/data/meta.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
export interface MetaInfo {
22
[pathname: string]: {
3-
frontmatter: { metaTitle: string; metaDescription: string };
3+
frontmatter: {
4+
metaTitle: string;
5+
metaDescription: string;
6+
supportedFrameworks: string;
7+
};
48
};
59
}
610

@@ -10,31 +14,36 @@ export const META_INFO: MetaInfo = {
1014
metaTitle: 'Home',
1115
metaDescription:
1216
'Amplify UI is an open-source design system with cloud-connected components and primitives that simplify building accessible, performant, and beautiful applications in React, Angular, Vue, and Flutter (more coming soon).',
17+
supportedFrameworks: 'all',
1318
},
1419
},
1520
'/[platform]': {
1621
frontmatter: {
1722
metaTitle: 'Home',
1823
metaDescription:
1924
'Amplify UI is an open-source design system with cloud-connected components and primitives that simplify building accessible, performant, and beautiful applications in React, Angular, Vue, and Flutter (more coming soon).',
25+
supportedFrameworks: 'all',
2026
},
2127
},
2228
'/404': {
2329
frontmatter: {
2430
metaTitle: '404',
2531
metaDescription: 'Page Not Found',
32+
supportedFrameworks: 'all',
2633
},
2734
},
2835
'/_error': {
2936
frontmatter: {
3037
metaTitle: 'Error',
3138
metaDescription: 'Error',
39+
supportedFrameworks: 'all',
3240
},
3341
},
3442
'/500': {
3543
frontmatter: {
3644
metaTitle: 'Error',
3745
metaDescription: 'Error',
46+
supportedFrameworks: 'all',
3847
},
3948
},
4049
};

docs/src/data/pages.preval.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function pluckMeta({ frontmatter, href, slug }) {
77
return { frontmatter, href, slug };
88
}
99

10-
async function getPagesManifest() {
10+
export async function getPagesManifest() {
1111
const paths = await getContentPaths();
1212
const pages = await Promise.all(
1313
paths.map(getPageFromSlug).map((page) => page.then(pluckMeta))

docs/src/pages/[platform]/components/authenticator/index.page.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Authenticator
33
description: Authenticator component adds complete authentication flows to your application with minimal boilerplate.
4-
supportedFrameworks: react|angular|vue|flutter
4+
supportedFrameworks: all
55
---
66

77
import { Fragment } from '@/components/Fragment';

docs/src/pages/[platform]/components/chatbot/index.page.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Chatbot
33
description: A simple way to add a conversational UI into your app is to use our ChatBot Component.
4-
supportedFrameworks: react
4+
supportedFrameworks: react|angular|vue
55
---
66

77
import { Fragment } from '@/components/Fragment';

0 commit comments

Comments
 (0)