Skip to content

Commit d202126

Browse files
authored
New SDK Reference Website (#289)
* init docusaurus * remove blog * replace image assets * update footer * update navbar * update docusaurus config * edit landing page * change css theme * add amplitude-js docs * add jsdoc-to-markdown * add generate-jsdoc.js and prettier to format md output * Replace default docs with generated API docs * remove footer content * make sidebar uncollapsible * add syntax highlight to examples * change docusaurus target browsers * change docs to include constructor * make website docs only * change docs/ to website/ * fix baseUrl config * Fix baseUrl problem with yarn serve * update readme * delete autogenerated docs * Add autogenerated docs to gitignore
1 parent 2b69a4f commit d202126

19 files changed

+10861
-7
lines changed

package.json

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"express": "^4.16.2",
2929
"fs-extra": "^4.0.2",
3030
"jsdoc": "^3.6.3",
31+
"jsdoc-to-markdown": "^6.0.1",
3132
"jshint": "^2.9.6",
3233
"karma": "^4.0.0",
3334
"karma-chai": "^0.1.0",
@@ -39,7 +40,7 @@
3940
"karma-sinon": "^1.0.5",
4041
"karma-sourcemap-loader": "^0.3.7",
4142
"mocha": "^4.0.1",
42-
"prettier": "^1.16.4",
43+
"prettier": "^2.1.1",
4344
"requirejs": "^2.3.6",
4445
"rollup": "^1.4.1",
4546
"rollup-plugin-babel": "^4.3.2",
@@ -53,7 +54,14 @@
5354
"uglify-js": "^2.0.0"
5455
},
5556
"scripts": {
57+
"postinstall": "cd website/ && yarn install",
5658
"test": "make test",
57-
"dev": "node test/browser/server.js"
59+
"dev": "node test/browser/server.js",
60+
"docs:generate-jsdoc": "node website/generate-jsdoc",
61+
"docs:start": "cd website/ && yarn start",
62+
"docs:build": "cd website/ && yarn build",
63+
"docs:serve": "cd website/ && yarn serve",
64+
"docs:deploy": "cd website/ && yarn deploy",
65+
"docs:swizzle": "cd website/ && yarn swizzle"
5866
}
5967
}

website/.gitignore

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Dependencies
2+
/node_modules
3+
4+
# Production
5+
/build
6+
7+
# Generated files
8+
.docusaurus
9+
.cache-loader
10+
11+
# Generated jsdoc markdown
12+
docs/Amplitude.md
13+
docs/AmplitudeClient.md
14+
docs/Identify.md
15+
docs/Revenue.md
16+
17+
# Misc
18+
.DS_Store
19+
.env.local
20+
.env.development.local
21+
.env.test.local
22+
.env.production.local
23+
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*

website/README.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Website
2+
3+
The JavaScript SDK API Reference website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
4+
5+
### Installation
6+
7+
Installation is automatically done when `yarn install` is ran from the base directory.
8+
9+
### Generating `website/docs/` from `src/`
10+
11+
The website autogenerates markdown files of public classes and its contents using [generate-jsdoc.js](https://github.com/amplitude/Amplitude-JavaScript/blob/master/website/generate-jsdoc.js).
12+
13+
This is done by calling `yarn docs:generate-jsdoc` from the base directory.
14+
15+
### Local Development Build
16+
17+
Run `yarn start` from this directory or `yarn docs:start` from the base directory.
18+
19+
Because of a bug with how Docusaurus handles `baseUrl` in `docusaurus.config.js`, you should open `localhost:3000/Amplitude-JavaScript` instead of the default `localhost:3000/`
20+
21+
### Local Production Build
22+
23+
Similar to local development build process. This command generates static content into the `website/build/` directory and creates a server to serve it.
24+
25+
Run `yarn serve` from this directory or `yarn docs:serve` from the base directory. Then open `localhost:3000/Amplitude-JavaScript`
26+
27+
### Deployment
28+
29+
```
30+
$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
31+
```
32+
33+
This will create the production build and push it the `gh-pages` branch.

website/babel.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
3+
};

website/docusaurus.config.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
module.exports = {
2+
title: 'Amplitude JS SDK Docs',
3+
tagline: 'Amplitude JavaScript SDK',
4+
url: 'https://amplitude.github.io',
5+
baseUrl: '/Amplitude-JavaScript/',
6+
onBrokenLinks: 'throw',
7+
favicon: 'img/amp_favicon.ico',
8+
organizationName: 'Amplitude',
9+
projectName: 'Amplitude-JavaScript',
10+
themeConfig: {
11+
sidebarCollapsible: false,
12+
navbar: {
13+
logo: {
14+
alt: 'Amplitude Logo',
15+
src: 'img/amp_logo.svg',
16+
},
17+
hideOnScroll: true,
18+
items: [
19+
{
20+
href: 'https://github.com/amplitude/Amplitude-JavaScript/',
21+
label: 'GitHub',
22+
position: 'left',
23+
},
24+
],
25+
},
26+
footer: {
27+
logo: {
28+
alt: 'Amplitude Logo',
29+
src: 'img/amp_logo.svg',
30+
},
31+
copyright: `Copyright © ${new Date().getFullYear()} Amplitude, Inc.`,
32+
},
33+
prism: {
34+
defaultLanguage: 'javascript',
35+
},
36+
},
37+
presets: [
38+
[
39+
'@docusaurus/preset-classic',
40+
{
41+
docs: {
42+
homePageId: 'AmplitudeClient',
43+
path: 'docs',
44+
routeBasePath: '/',
45+
sidebarPath: require.resolve('./sidebars.js'),
46+
editUrl:
47+
'https://github.com/amplitude/Amplitude-JavaScript/website',
48+
},
49+
theme: {
50+
customCss: require.resolve('./src/css/custom.css'),
51+
},
52+
},
53+
],
54+
],
55+
};

website/generate-jsdoc.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
const jsdoc2md = require("jsdoc-to-markdown");
2+
const fs = require("fs");
3+
const path = require("path");
4+
const prettier = require("prettier");
5+
const publicFiles = [
6+
"amplitude-client.js",
7+
"amplitude.js",
8+
"identify.js",
9+
"revenue.js",
10+
];
11+
const srcDir = path.join(__dirname, "../", "src");
12+
const outputDir = path.join(__dirname, "docs");
13+
function generateMarkdown(inputFile) {
14+
const inputFilePath = path.join(srcDir, inputFile);
15+
const data = jsdoc2md.getTemplateDataSync({ files: inputFilePath });
16+
const className = data.find((e) => e.kind === "class").name;
17+
const filteredData = data.filter(
18+
(e) =>
19+
e.kind === "constructor" ||
20+
(e.access === "public" && (e.kind === "function" || e.kind === "member"))
21+
);
22+
const outputFilePath = path.join(outputDir, `${className}.md`);
23+
24+
const markdownOutput = filteredData
25+
.map((item) => documentItem(item))
26+
.join("\n");
27+
fs.writeFileSync(
28+
path.join(outputDir, `${className}.md`),
29+
prettier.format(markdownOutput, { parser: "markdown" })
30+
);
31+
}
32+
33+
function documentItem(data) {
34+
return `## \`${data.id}\`
35+
36+
${data.examples ? documentExamples(data) : ""}
37+
38+
${data.description || ""}
39+
40+
${data.params ? documentParams(data) : ""}
41+
42+
${data.returns ? documentReturn(data) : ""}
43+
`;
44+
}
45+
46+
function documentExamples(data) {
47+
return `\`\`\`
48+
${data.examples}
49+
\`\`\`
50+
`;
51+
}
52+
53+
function documentParams(data) {
54+
const params = data.params.map(
55+
(param) => `- \`${param.name}\` (\`${param.type.names[0]}\`)
56+
${param.description}
57+
`
58+
);
59+
return `### Parameters
60+
${params.join("\n")}
61+
`;
62+
}
63+
64+
function documentReturn(data) {
65+
return `### Return Value
66+
- (\`${data.returns[0].type.names[0]}\`)
67+
${data.returns[0].description}
68+
`;
69+
}
70+
71+
if (!fs.existsSync(outputDir)) {
72+
fs.mkdirSync(outputDir);
73+
}
74+
75+
for (const file of publicFiles) {
76+
generateMarkdown(file);
77+
}

website/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "docs",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"docusaurus": "docusaurus",
7+
"start": "docusaurus start",
8+
"build": "docusaurus build",
9+
"swizzle": "docusaurus swizzle",
10+
"deploy": "docusaurus deploy",
11+
"serve": "docusaurus build --out-dir build/Amplitude-JavaScript && yarn run docusaurus serve"
12+
},
13+
"dependencies": {
14+
"@docusaurus/core": "^2.0.0-alpha.61",
15+
"@docusaurus/preset-classic": "^2.0.0-alpha.61",
16+
"@mdx-js/react": "^1.5.8",
17+
"clsx": "^1.1.1",
18+
"react": "^16.8.4",
19+
"react-dom": "^16.8.4"
20+
},
21+
"browserslist": {
22+
"production": [
23+
">0.1%",
24+
"not dead",
25+
"not op_mini all"
26+
],
27+
"development": [
28+
"last 2 chrome version",
29+
"last 2 firefox version",
30+
"last 2 safari version"
31+
]
32+
}
33+
}

website/sidebars.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
sidebar: {
3+
'API Reference': ['AmplitudeClient', 'Amplitude', 'Identify', 'Revenue'],
4+
},
5+
};

website/src/css/custom.css

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/* stylelint-disable docusaurus/copyright-header */
2+
/**
3+
* Any CSS included here will be global. The classic template
4+
* bundles Infima by default. Infima is a CSS framework designed to
5+
* work well for content-centric websites.
6+
*/
7+
8+
/* You can override the default Infima variables here. */
9+
:root {
10+
--ifm-color-primary: #007fd2;
11+
--ifm-color-primary-dark: #005488;
12+
--ifm-color-primary-darker: #003b61;
13+
--ifm-color-primary-darkest: #0c2a4b;
14+
--ifm-color-primary-light: #48a4de;
15+
--ifm-color-primary-lighter: #7bbee7;
16+
--ifm-color-primary-lightest: #c6e2f4;
17+
--ifm-code-font-size: 95%;
18+
}
19+
20+
.docusaurus-highlight-code-line {
21+
background-color: rgb(72, 77, 91);
22+
display: block;
23+
margin: 0 calc(-1 * var(--ifm-pre-padding));
24+
padding: 0 var(--ifm-pre-padding);
25+
}
26+
27+
/* OG site color #10069f */
28+
/* logo color #007fd2 */
29+
/* sidebar dark #003b61 */
30+
/* sidebar darkest #0c2a4b */
31+
/* Sidebar text ##c6d0d9 */
32+
33+
/* $cerulean-50: #f4faff;
34+
$cerulean-100: #e4f1fa;
35+
$cerulean-200: #c6e2f4;
36+
$cerulean-300: #7bbee7;
37+
$cerulean-400: #48a4de;
38+
$cerulean-500: #007fd2;
39+
$cerulean-600: #0065a5;
40+
$cerulean-700: #005488;
41+
$cerulean-800: #003b61;
42+
$cerulean-900: #0c2a4b;
43+
:export {
44+
cerulean-50: $cerulean-50;
45+
cerulean-100: $cerulean-100;
46+
cerulean-200: $cerulean-200;
47+
cerulean-300: $cerulean-300;
48+
cerulean-400: $cerulean-400;
49+
cerulean-500: $cerulean-500;
50+
cerulean-600: $cerulean-600;
51+
cerulean-700: $cerulean-700;
52+
cerulean-800: $cerulean-800;
53+
cerulean-900: $cerulean-900;
54+
} */
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/* stylelint-disable docusaurus/copyright-header */
2+
3+
/**
4+
* CSS files with the .module.css suffix will be treated as CSS modules
5+
* and scoped locally.
6+
*/
7+
8+
.heroBanner {
9+
padding: 4rem 0;
10+
text-align: center;
11+
position: relative;
12+
overflow: hidden;
13+
}
14+
15+
@media screen and (max-width: 966px) {
16+
.heroBanner {
17+
padding: 2rem;
18+
}
19+
}
20+
21+
.buttons {
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
}
26+
27+
.features {
28+
display: flex;
29+
align-items: center;
30+
padding: 2rem 0;
31+
width: 100%;
32+
}
33+
34+
.featureImage {
35+
height: 200px;
36+
width: 200px;
37+
}

0 commit comments

Comments
 (0)