aboutsummaryrefslogtreecommitdiffstats
path: root/packages/react-docs
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2018-10-09 02:12:52 +0800
committerGitHub <noreply@github.com>2018-10-09 02:12:52 +0800
commit9654397b292ee03c503313e3fbb127ebb4b7d76b (patch)
treeb1c9423b9b1c41de8481db83c4987cfeb500e216 /packages/react-docs
parent3991e66a58f28dbed5e75f74ef4aaaf6bb3a4d3e (diff)
parent6cc9631ef6458d88249a5abd5c7c5ee7b3614e62 (diff)
downloaddexon-sol-tools-9654397b292ee03c503313e3fbb127ebb4b7d76b.tar
dexon-sol-tools-9654397b292ee03c503313e3fbb127ebb4b7d76b.tar.gz
dexon-sol-tools-9654397b292ee03c503313e3fbb127ebb4b7d76b.tar.bz2
dexon-sol-tools-9654397b292ee03c503313e3fbb127ebb4b7d76b.tar.lz
dexon-sol-tools-9654397b292ee03c503313e3fbb127ebb4b7d76b.tar.xz
dexon-sol-tools-9654397b292ee03c503313e3fbb127ebb4b7d76b.tar.zst
dexon-sol-tools-9654397b292ee03c503313e3fbb127ebb4b7d76b.zip
Merge pull request #1103 from 0xProject/doc-overview-page
Implement Developer Home
Diffstat (limited to 'packages/react-docs')
-rw-r--r--packages/react-docs/src/components/documentation.tsx30
-rw-r--r--packages/react-docs/src/components/source_link.tsx8
-rw-r--r--packages/react-docs/src/components/type.tsx13
-rw-r--r--packages/react-docs/src/docs_info.ts51
4 files changed, 63 insertions, 39 deletions
diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx
index a23111297..6a08d50e0 100644
--- a/packages/react-docs/src/components/documentation.tsx
+++ b/packages/react-docs/src/components/documentation.tsx
@@ -2,6 +2,7 @@ import {
colors,
constants as sharedConstants,
EtherscanLinkSuffixes,
+ Link,
MarkdownSection,
NestedSidebarMenu,
Networks,
@@ -98,7 +99,8 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
marginLeft: 20,
},
};
- const menuSubsectionsBySection = this.props.docsInfo.getMenuSubsectionsBySection(this.props.docAgnosticFormat);
+ const sectionNameToLinks = this.props.docsInfo.getSectionNameToLinks();
+ const subsectionNameToLinks = this.props.docsInfo.getSubsectionNameToLinks(this.props.docAgnosticFormat);
return (
<div>
{_.isUndefined(this.props.docAgnosticFormat) ? (
@@ -128,8 +130,8 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
selectedVersion={this.props.selectedVersion}
versions={this.props.availableVersions}
sidebarHeader={this.props.sidebarHeader}
- topLevelMenu={this.props.docsInfo.menu}
- menuSubsectionsBySection={menuSubsectionsBySection}
+ sectionNameToLinks={sectionNameToLinks}
+ subsectionNameToLinks={subsectionNameToLinks}
onVersionSelected={this.props.onVersionSelected}
/>
</div>
@@ -318,9 +320,9 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
<div className="pt2" key={`external-export-${exportName}`}>
<code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
{`import { `}
- <a href={link} target="_blank" style={{ color: colors.lightBlueA700, textDecoration: 'none' }}>
+ <Link to={link} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}>
{exportName}
- </a>
+ </Link>
{` } from '${this.props.docsInfo.packageName}'`}
</code>
</div>
@@ -349,14 +351,16 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
EtherscanLinkSuffixes.Address,
);
return (
- <a
- key={`badge-${networkName}-${sectionName}`}
- href={linkIfExists}
- target="_blank"
- style={{ color: colors.white, textDecoration: 'none', marginTop: 8 }}
- >
- <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} />
- </a>
+ <div style={{ marginTop: 8 }}>
+ <Link
+ key={`badge-${networkName}-${sectionName}`}
+ to={linkIfExists}
+ shouldOpenInNewTab={true}
+ fontColor={colors.white}
+ >
+ <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} />
+ </Link>
+ </div>
);
},
);
diff --git a/packages/react-docs/src/components/source_link.tsx b/packages/react-docs/src/components/source_link.tsx
index 3096ad8d5..c6dd09adb 100644
--- a/packages/react-docs/src/components/source_link.tsx
+++ b/packages/react-docs/src/components/source_link.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
import { Source } from '@0xproject/types';
import * as React from 'react';
@@ -13,9 +13,9 @@ export const SourceLink = (props: SourceLinkProps) => {
const sourceCodeUrl = `${props.sourceUrl}/${src.fileName}#L${src.line}`;
return (
<div className="pt2" style={{ fontSize: 14 }}>
- <a href={sourceCodeUrl} target="_blank" className="underline" style={{ color: colors.grey }}>
- Source
- </a>
+ <Link to={sourceCodeUrl} shouldOpenInNewTab={true} textDecoration="underline" fontColor={colors.grey}>
+ {'Source'}
+ </Link>
</div>
);
};
diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx
index 5c018f5dd..1ae1324c6 100644
--- a/packages/react-docs/src/components/type.tsx
+++ b/packages/react-docs/src/components/type.tsx
@@ -1,4 +1,4 @@
-import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants, Link, utils as sharedUtils } from '@0xproject/react-shared';
import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '@0xproject/types';
import { errorUtils } from '@0xproject/utils';
import * as _ from 'lodash';
@@ -205,14 +205,9 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
const typeNameUrlIfExists = !_.isUndefined(props.type.externalLink) ? props.type.externalLink : undefined;
if (!_.isUndefined(typeNameUrlIfExists)) {
typeName = (
- <a
- href={typeNameUrlIfExists}
- target="_blank"
- className="text-decoration-none"
- style={{ color: colors.lightBlueA700 }}
- >
+ <Link to={typeNameUrlIfExists} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}>
{typeName}
- </a>
+ </Link>
);
} else if (
(isReference || isArray) &&
@@ -228,7 +223,7 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
offset={0}
hashSpy={true}
duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
- containerId={sharedConstants.DOCS_CONTAINER_ID}
+ containerId={sharedConstants.SCROLL_CONTAINER_ID}
>
{sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? (
<span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
diff --git a/packages/react-docs/src/docs_info.ts b/packages/react-docs/src/docs_info.ts
index 092a8c266..549106c77 100644
--- a/packages/react-docs/src/docs_info.ts
+++ b/packages/react-docs/src/docs_info.ts
@@ -1,5 +1,5 @@
-import { MenuSubsectionsBySection } from '@0xproject/react-shared';
-import { DocAgnosticFormat, TypeDefinitionByName } from '@0xproject/types';
+import { ALink, utils as sharedUtils } from '@0xproject/react-shared';
+import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0xproject/types';
import * as _ from 'lodash';
import {
@@ -34,10 +34,10 @@ export class DocsInfo {
this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion;
this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId;
}
- public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection {
- const menuSubsectionsBySection = {} as MenuSubsectionsBySection;
+ public getSubsectionNameToLinks(docAgnosticFormat?: DocAgnosticFormat): ObjectMap<ALink[]> {
+ const subsectionNameToLinks: ObjectMap<ALink[]> = {};
if (_.isUndefined(docAgnosticFormat)) {
- return menuSubsectionsBySection;
+ return subsectionNameToLinks;
}
const docSections = _.keys(this.sections);
@@ -58,7 +58,13 @@ export class DocsInfo {
if (sectionName === this.typeSectionName) {
const sortedTypesNames = _.sortBy(docSection.types, 'name');
const typeNames = _.map(sortedTypesNames, t => t.name);
- menuSubsectionsBySection[sectionName] = typeNames;
+ const typeLinks = _.map(typeNames, typeName => {
+ return {
+ to: `${sectionName}-${typeName}`,
+ title: typeName,
+ };
+ });
+ subsectionNameToLinks[sectionName] = typeLinks;
} else if (isExportedFunctionSection) {
// Noop so that we don't have the method listed underneath itself.
} else {
@@ -73,15 +79,19 @@ export class DocsInfo {
const methodNames = _.map(methodsSortedByName, m => m.name);
const sortedFunctionNames = _.sortBy(docSection.functions, 'name');
const functionNames = _.map(sortedFunctionNames, m => m.name);
- menuSubsectionsBySection[sectionName] = [
- ...eventNames,
- ...propertyNames,
- ...functionNames,
- ...methodNames,
- ];
+ const names = [...eventNames, ...propertyNames, ...functionNames, ...methodNames];
+
+ const links = _.map(names, name => {
+ return {
+ to: `${sectionName}-${name}`,
+ title: name,
+ };
+ });
+
+ subsectionNameToLinks[sectionName] = links;
}
});
- return menuSubsectionsBySection;
+ return subsectionNameToLinks;
}
public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } {
if (_.isUndefined(docAgnosticFormat[this.typeSectionName])) {
@@ -92,4 +102,19 @@ export class DocsInfo {
const typeDefinitionByName = _.keyBy(section.types, 'name') as any;
return typeDefinitionByName;
}
+ public getSectionNameToLinks(): ObjectMap<ALink[]> {
+ const sectionNameToLinks: ObjectMap<ALink[]> = {};
+ _.each(this.menu, (linkTitles, sectionName) => {
+ sectionNameToLinks[sectionName] = [];
+ _.each(linkTitles, linkTitle => {
+ const to = sharedUtils.getIdFromName(linkTitle);
+ const links = sectionNameToLinks[sectionName];
+ links.push({
+ title: linkTitle,
+ to,
+ });
+ });
+ });
+ return sectionNameToLinks;
+ }
}