Made docs scrollable to section when selecting a link
This commit is contained in:
Piotr Janosz
committed by
fabioberger
fabioberger
parent
565e5e5770
commit
c868015989
@@ -8,8 +8,6 @@ export const meta = {
|
||||
|
||||
0x is a protocol that facilitates the peer-to-peer exchange of [Ethereum](TODO-Link-to-Ethereum-primer-section)-based assets. The protocol serves as an open standard and common building block for any developer needing exchange functionality. 0x provides secure [smart contracts](TODO-Link-to-smart-contract-section) that are externally audited; [developer tools](TODO-Link-to-Tools-explorer) tailored to the 0x ecosystem; and open access to a [pool of shared liquidity](TODO-Link-to-shared-liquidity-section). Developers can integrate with 0x at the smart contract or application layer.
|
||||
|
||||
<Animation name="network" />
|
||||
|
||||
### What can I build on 0x?
|
||||
|
||||
Some examples of the types of things that can be built on 0x include:
|
||||
|
||||
@@ -37,12 +37,6 @@
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"@mdx-js/react": "^1.0.21",
|
||||
"@reach/tabs": "^0.1.6",
|
||||
"@types/algoliasearch": "^3.30.12",
|
||||
"@types/body-scroll-lock": "^2.6.0",
|
||||
"@types/react-lazyload": "^2.3.1",
|
||||
"@types/react-loadable": "^5.4.2",
|
||||
"@types/react-syntax-highlighter": "^0.0.8",
|
||||
"@types/styled-components": "4.1.1",
|
||||
"accounting": "^0.4.1",
|
||||
"algoliasearch": "^3.33.0",
|
||||
"babel-plugin-syntax-object-rest-spread": "^6.13.0",
|
||||
@@ -109,7 +103,9 @@
|
||||
"@0x/tslint-config": "^3.0.1",
|
||||
"@mdx-js/loader": "^1.0.0-rc.4",
|
||||
"@types/accounting": "^0.4.1",
|
||||
"@types/algoliasearch": "^3.30.12",
|
||||
"@types/blockies": "^0.0.0",
|
||||
"@types/body-scroll-lock": "^2.6.0",
|
||||
"@types/deep-equal": "^1.0.0",
|
||||
"@types/find-versions": "^2.0.0",
|
||||
"@types/is-mobile": "0.3.0",
|
||||
@@ -124,12 +120,16 @@
|
||||
"@types/react-copy-to-clipboard": "^4.2.0",
|
||||
"@types/react-dom": "^16.0.6",
|
||||
"@types/react-helmet": "^5.0.6",
|
||||
"@types/react-lazyload": "^2.3.1",
|
||||
"@types/react-loadable": "^5.4.2",
|
||||
"@types/react-redux": "^4.4.37",
|
||||
"@types/react-router-dom": "^4.3.4",
|
||||
"@types/react-scroll": "1.5.3",
|
||||
"@types/react-syntax-highlighter": "^0.0.8",
|
||||
"@types/react-tap-event-plugin": "0.0.30",
|
||||
"@types/react-transition-group": "^4.2.0",
|
||||
"@types/redux": "^3.6.0",
|
||||
"@types/styled-components": "4.1.1",
|
||||
"@types/valid-url": "^1.0.2",
|
||||
"@types/web3-provider-engine": "^14.0.0",
|
||||
"awesome-typescript-loader": "^5.2.1",
|
||||
|
||||
@@ -17,6 +17,7 @@ interface IHit {
|
||||
isCommunity?: boolean;
|
||||
isFeatured?: boolean;
|
||||
objectID: string;
|
||||
sectionUrl: string;
|
||||
tags?: string[];
|
||||
textContent: string;
|
||||
title: string;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { match } from 'react-router-dom';
|
||||
import { RouteComponentProps } from 'react-router-dom';
|
||||
|
||||
import { MDXProvider } from '@mdx-js/react';
|
||||
|
||||
@@ -29,11 +30,9 @@ import { FullscreenMessage } from 'ts/pages/fullscreen_message';
|
||||
import { Paragraph } from 'ts/components/text';
|
||||
|
||||
import { colors } from 'ts/style/colors';
|
||||
import { docs } from 'ts/style/docs';
|
||||
|
||||
interface IDocsPageProps {
|
||||
match: match<any>;
|
||||
}
|
||||
|
||||
interface IDocsPageProps extends RouteComponentProps<any> {}
|
||||
interface IDocsPageState {
|
||||
Component: React.ReactNode;
|
||||
contents: IContents[];
|
||||
@@ -42,7 +41,7 @@ interface IDocsPageState {
|
||||
wasNotFound: boolean;
|
||||
}
|
||||
|
||||
export const DocsPage: React.FC<IDocsPageProps> = ({ match }) => {
|
||||
export const DocsPage: React.FC<IDocsPageProps> = props => {
|
||||
const [state, setState] = React.useState<IDocsPageState>({
|
||||
Component: null,
|
||||
contents: [],
|
||||
@@ -53,14 +52,12 @@ export const DocsPage: React.FC<IDocsPageProps> = ({ match }) => {
|
||||
|
||||
const { Component, contents, title, subtitle, wasNotFound } = state;
|
||||
const isLoading = !Component && !wasNotFound;
|
||||
const { page, type } = match.params;
|
||||
const { page, type } = props.match.params;
|
||||
const { hash } = props.location;
|
||||
|
||||
React.useEffect(
|
||||
() => {
|
||||
void loadPageAsync(page, type);
|
||||
},
|
||||
[page, type],
|
||||
);
|
||||
React.useEffect(() => {
|
||||
void loadPageAsync(page, type);
|
||||
}, [page, type]);
|
||||
|
||||
const loadPageAsync = async (fileName: string, dirName: string) => {
|
||||
try {
|
||||
@@ -73,11 +70,43 @@ export const DocsPage: React.FC<IDocsPageProps> = ({ match }) => {
|
||||
subtitle: component.meta.subtitle,
|
||||
title: component.meta.title,
|
||||
});
|
||||
|
||||
if (hash) {
|
||||
await waitForImages(); // images will push down content when loading, so we wait...
|
||||
scrollToHash(hash); // ...and then scroll to hash when ready not to push the content down
|
||||
}
|
||||
} catch (error) {
|
||||
setState({ ...state, title: '404', wasNotFound: true });
|
||||
}
|
||||
};
|
||||
|
||||
const waitForImages = async () => {
|
||||
const images = document.querySelectorAll('img');
|
||||
return Promise.all(
|
||||
_.compact(
|
||||
_.map(images, (img: HTMLImageElement) => {
|
||||
if (!img.complete) {
|
||||
return new Promise(resolve => {
|
||||
img.addEventListener('load', () => resolve());
|
||||
});
|
||||
}
|
||||
return false;
|
||||
}),
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const scrollToHash = (hash: string): void => {
|
||||
const element = document.getElementById(hash.substring(1));
|
||||
if (element) {
|
||||
const bodyRect = document.body.getBoundingClientRect();
|
||||
const elemRect = element.getBoundingClientRect();
|
||||
const elemOffset = elemRect.top - bodyRect.top;
|
||||
const totalOffset = elemOffset - docs.headerOffset;
|
||||
window.scrollTo(0, totalOffset);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DocsPageLayout title={title} subtitle={subtitle} loading={isLoading}>
|
||||
{wasNotFound ? (
|
||||
|
||||
@@ -22,8 +22,8 @@ function processContentTree(tree: Node[], url: string, meta: Meta, index: any, s
|
||||
const formattedTextNodes = formatTextNodes(textNodes);
|
||||
const content = getContent(meta, url, formattedTextNodes);
|
||||
|
||||
// setIndexSettings(index, settings);
|
||||
// pushObjectsToAlgolia(index, content);
|
||||
setIndexSettings(index, settings);
|
||||
pushObjectsToAlgolia(index, content);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,12 +84,11 @@ function getContent(meta: Meta, url: string, formattedTextNodes: FormattedNode[]
|
||||
|
||||
formattedTextNodes.forEach((node: FormattedNode, index: number) => {
|
||||
const titleSlug = slugify(meta.title, { lower: true });
|
||||
const sectionUrl = node.hash ? `${url}#${node.hash}` : url; // If we have the hash, append it to url, if not - use the base url
|
||||
const formattedUrl = node.hash ? `${url}#${node.hash}` : url; // If we have the hash, append it to url, if not - use the base url
|
||||
|
||||
content.push({
|
||||
...meta,
|
||||
url,
|
||||
sectionUrl,
|
||||
url: formattedUrl,
|
||||
textContent: node.textContent,
|
||||
id: titleSlug,
|
||||
objectID: `${titleSlug}_${index}`,
|
||||
@@ -168,7 +167,6 @@ interface Meta {
|
||||
|
||||
interface Content extends Meta {
|
||||
url: string;
|
||||
sectionUrl: string;
|
||||
textContent: string;
|
||||
id: string;
|
||||
objectID: string;
|
||||
|
||||
Reference in New Issue
Block a user