From b2e2c27775e0055c0d6dd251c37a7665a2974736 Mon Sep 17 00:00:00 2001 From: Piotr Janosz Date: Thu, 11 Jul 2019 15:04:42 +0200 Subject: [PATCH] Updated ToC / usage doc --- packages/website/md/new-docs/usage.mdx | 12 +- .../docs/sidebar/table_of_contents.tsx | 148 +++--------------- 2 files changed, 27 insertions(+), 133 deletions(-) diff --git a/packages/website/md/new-docs/usage.mdx b/packages/website/md/new-docs/usage.mdx index 6a43c0e7d3..52c3c37f1d 100644 --- a/packages/website/md/new-docs/usage.mdx +++ b/packages/website/md/new-docs/usage.mdx @@ -1,3 +1,5 @@ +## Sol-coverage + Sol-coverage uses transaction traces in order to figure out which lines of Solidity source code have been covered by your tests. In order for it to gather these traces, you must add the `CoverageSubprovider` to the [ProviderEngine](https://github.com/MetaMask/provider-engine) instance you use when running your Solidity tests. If you're unfamiliar with `ProviderEngine`, please read the [Web3 Provider explained](https://0x.org/wiki#Web3-Provider-Explained) wiki article. The CoverageSubprovider eavesdrops on the `eth_sendTransaction` and `eth_call` RPC calls and collects traces after each call using `debug_traceTransaction`. `eth_call`'s' don't generate traces - so we take a snapshot, re-submit it as a transaction, get the trace and then revert the snapshot. @@ -6,7 +8,7 @@ Coverage subprovider needs some info about your contracts (`srcMap`, `bytecode`) In order to use `CoverageSubprovider` with your favorite framework you need to pass an `artifactsAdapter` to it. -### Sol-compiler +## Sol-compiler If you are generating your artifacts with [@0x/sol-compiler](https://0x.org/docs/sol-compiler) you can use the `SolCompilerArtifactAdapter` we've implemented for you. @@ -16,7 +18,7 @@ import { SolCompilerArtifactAdapter } from '@0x/sol-coverage'; const artifactAdapter = new SolCompilerArtifactAdapter(artifactsDir, contractsDir); ``` -### Truffle +## Truffle If your project is using [Truffle](https://truffleframework.com/), we've written a `TruffleArtifactsAdapter`for you. @@ -70,7 +72,7 @@ class YourCustomArtifactsAdapter extends AbstractArtifactAdapter {...}; const artifactAdapter = new YourCustomArtifactsAdapter(...); ``` -### Usage +## Usage ```typescript import { CoverageSubprovider } from '@0x/sol-coverage'; @@ -106,7 +108,7 @@ istanbul report html open coverage/index.html ``` -### Notifications +## Notifications This is a standard notification Something isn’t quite right @@ -126,7 +128,7 @@ open coverage/index.html ### Tabs -### Separator +## Separator --- diff --git a/packages/website/ts/components/docs/sidebar/table_of_contents.tsx b/packages/website/ts/components/docs/sidebar/table_of_contents.tsx index 6167665a15..025c562b8c 100644 --- a/packages/website/ts/components/docs/sidebar/table_of_contents.tsx +++ b/packages/website/ts/components/docs/sidebar/table_of_contents.tsx @@ -1,62 +1,10 @@ import React from 'react'; +// import { Link } from '@0x/react-shared'; + import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; -interface IGroupProps { - heading: string; - name: string; - filters: IFilterProps[]; -} - -interface IFilterProps { - value: string; - label: string; -} - -const groups: IGroupProps[] = [ - { - heading: 'Topic', - name: 'topic', - filters: [ - { - value: 'mesh', - label: 'Mesh', - }, - { - value: 'testing', - label: 'Testing', - }, - { - value: 'mesh', - label: 'Mesh', - }, - { - value: 'testing', - label: 'Testing', - }, - ], - }, - { - heading: 'Level', - name: 'level', - filters: [ - { - value: 'beginner', - label: 'Beginner', - }, - { - value: 'intermediate', - label: 'Intermediate', - }, - { - value: 'advanced', - label: 'Advanced', - }, - ], - }, -]; - interface ITableOfContentsProps { contents: IContents[]; } @@ -68,92 +16,36 @@ export interface IContents { title: string; } -const Level: React.FC<{ data: IContents[] }> = ({ data }) => { - return ( - - {data.map((m, index) => { - return ( - <> - - {m.title} - - {m.children.length > 0 && } - - ); - })} - - ); -}; - export const TableOfContents: React.FC = ({ contents }) => { console.log('contents', contents); return ( - <> - - {/* {groups.map(({ heading, name, filters }: IGroupProps, groupIndex) => ( - - 0}> - {heading} - - - {filters.map(({ value, label }: IFilterProps, filterIndex) => ( - - {label} - - ))} - - - ))} */} - +
    + {contents.map(content => { + const { children, id, title } = content; + return ( +
  • + {title} + {children.length > 0 && } +
    • + ); + })} +
); }; -const ChapterLinksWrapper = styled.ul` - position: relative; -`; - -const ChapterGroupWrapper = styled.li` - margin-bottom: 1.111em; -`; - -const ChapterLink = styled.p<{ level: number }>` - padding-bottom: 1rem; - color: ${colors.textDarkSecondary}; +const ContentLink = styled.a` display: block; font-size: 0.8333rem; + color: ${colors.textDarkSecondary}; + margin-bottom: 1rem; - & + ul p { + & + ul { border-left: 1px solid #e3e3e3; padding-left: 0.7rem; - font-size: 0.7222rem; - &:last-of-type { - padding-bottom: 0; + p { + font-size: 0.7222rem; + line-height: 1.45; } } `; - -const ChapterSublink = styled(ChapterLink)` - font-size: 0.7222rem; - line-height: 1.45; - - &:not(:first-child) { - margin-top: 0.555555556rem; - } -`; - -// const ChapterGroupWrapper = styled(Heading)` -// color: ${colors.textDarkPrimary}; -// font-size: 1rem !important; -// font-weight: 400 !important; -// margin-bottom: 1em !important; -// `; - -const ChapterChildren = styled.div` - border-left: 1px solid #e3e3e3; - padding-left: 0.7rem; -`;