From 57a0140d406e5334000e0f1ca0e28bdcc8812b52 Mon Sep 17 00:00:00 2001 From: Alex Rattray Date: Sat, 11 Mar 2017 23:17:28 -0800 Subject: [PATCH 1/2] Use PureComponent for DocsContents --- pages/docs/index.lsc | 12 +++++++++--- util/mainDocsTraverser.lsc | 3 ++- yarn.lock | 14 +++----------- 3 files changed, 14 insertions(+), 15 deletions(-) diff --git a/pages/docs/index.lsc b/pages/docs/index.lsc index 4076f5f..116c3ca 100644 --- a/pages/docs/index.lsc +++ b/pages/docs/index.lsc @@ -23,6 +23,12 @@ import rawDocs from '!raw!./docs.md' { TableOfContents, DocsContents } = convertDocsMarkdownToReact() +class PureDocsContents extends React.PureComponent: + render() -> +
+ {DocsContents} +
+ class Docs extends React.Component: constructor() -> this.state = { @@ -58,7 +64,7 @@ class Docs extends React.Component: - {DocsContents} + @@ -138,7 +144,7 @@ convertDocsMarkdownToReact() -> tocMD = split[0].replace('## TOC\n', '') docMD = '## ' + split.slice(1).join('\n## ') - TableOfContents = remark() + const TableOfContents = remark() .use(markdownToReact, { traverse: tocTraverser remarkReactComponents: { @@ -150,7 +156,7 @@ convertDocsMarkdownToReact() -> .process(tocMD) .contents - DocsContents = remark() + const DocsContents = remark() .use(slug) .use(markdownToReact, { sanitize: { clobber: ["name"] } diff --git a/util/mainDocsTraverser.lsc b/util/mainDocsTraverser.lsc index a68e052..650a075 100644 --- a/util/mainDocsTraverser.lsc +++ b/util/mainDocsTraverser.lsc @@ -35,7 +35,8 @@ wrapIntoSectionsByH2(children) -> elif child.value == '\n': continue else: - if sections.length < 1: sections.push(makeSection('first', [])) + if sections.length < 1: + sections.push(makeSection('first', [])) currentSection = sections~last() currentSection.children.push(child) diff --git a/yarn.lock b/yarn.lock index 3a28536..6ef59d4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -273,7 +273,7 @@ babel-eslint@^7.1.1: babylon "^6.13.0" lodash.pickby "^4.6.0" -babel-generator@^6.11.3, babel-generator@^6.23.0: +babel-generator@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.23.0.tgz#6b8edab956ef3116f79d8c84c5a3c05f32a74bc5" dependencies: @@ -506,12 +506,6 @@ babel-plugin-syntax-trailing-function-commas@^6.13.0, babel-plugin-syntax-traili version "6.22.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3" -babel-plugin-tcomb@^0.3.24: - version "0.3.24" - resolved "https://registry.yarnpkg.com/babel-plugin-tcomb/-/babel-plugin-tcomb-0.3.24.tgz#e5397339e3a7dbe9cb932699feee90bd656a7a8a" - dependencies: - babel-generator "^6.11.3" - babel-plugin-transform-amd-system-wrapper@^0.3.3: version "0.3.3" resolved "https://registry.yarnpkg.com/babel-plugin-transform-amd-system-wrapper/-/babel-plugin-transform-amd-system-wrapper-0.3.3.tgz#468d1560cae578b4dcb8543466f59325f1414f47" @@ -906,13 +900,12 @@ babel-preset-es2015@^6.13.2: babel-plugin-transform-regenerator "^6.22.0" babel-preset-lightscript@latest: - version "0.1.0" - resolved "https://registry.yarnpkg.com/babel-preset-lightscript/-/babel-preset-lightscript-0.1.0.tgz#296ee7bc74212abfa25f2032fdf1be85670822c7" + version "0.1.1" + resolved "https://registry.yarnpkg.com/babel-preset-lightscript/-/babel-preset-lightscript-0.1.1.tgz#e0dc68b48c33d26936a40b558069c0e6926bc428" dependencies: babel-plugin-lightscript "^0.1.0" babel-plugin-syntax-async-functions "^6.13.0" babel-plugin-syntax-trailing-function-commas "^6.22.0" - babel-plugin-tcomb "^0.3.24" babel-plugin-transform-class-properties "^6.22.0" babel-plugin-transform-decorators-legacy "^1.3.4" babel-plugin-transform-es2015-modules-commonjs "^6.22.0" @@ -920,7 +913,6 @@ babel-preset-lightscript@latest: babel-plugin-transform-object-rest-spread "^6.22.0" babel-plugin-transform-react-display-name "^6.22.0" babel-plugin-transform-react-jsx "^6.22.0" - tcomb "^3.2.16" babel-preset-react-hmre@^1.1.1: version "1.1.1" From 43862ded8723fc13e546c4eb8ab1bf57ce1d7526 Mon Sep 17 00:00:00 2001 From: Alex Rattray Date: Sat, 11 Mar 2017 23:17:50 -0800 Subject: [PATCH 2/2] split docs --- components/docs.lsc | 60 ++++++++++++++++++++++ pages/docs/index.lsc | 117 +------------------------------------------ util/docs.lsc | 54 ++++++++++++++++++++ 3 files changed, 116 insertions(+), 115 deletions(-) create mode 100644 components/docs.lsc create mode 100644 util/docs.lsc diff --git a/components/docs.lsc b/components/docs.lsc new file mode 100644 index 0000000..e01acb8 --- /dev/null +++ b/components/docs.lsc @@ -0,0 +1,60 @@ +import React from 'react' +import cx from 'classnames' +import Waypoint from 'react-waypoint' +import { Row, Col, NavLink, Nav, Table, Blockquote } from 'components/bootstrap' +import { highlight } from 'highlight.js' +import compileLscToJs from 'util/compileLscToJs' + +export TocSection({ children, section }, { activeSections }) -> + isActive = if section: activeSections.has(section) + classes = cx("nav-item", { active: isActive }) + +
  • + {children} +
    • + +TocSection.contextTypes = { + activeSections: React.PropTypes.object.isRequired +} + +export ScrollTargetSection({ section, id, children }, { onEnter, onLeave }) -> + sectionId = id.replace('section-', '') + _onEnter() -> onEnter(sectionId) + _onLeave() -> onLeave(sectionId) + + +
    + {children} +
    +     + +ScrollTargetSection.contextTypes = { + onEnter: React.PropTypes.func.isRequired + onLeave: React.PropTypes.func.isRequired +} + +CodeCol({ code, syntax }) -> + html = + if syntax == 'js': + highlight('js', code, true).value + elif syntax == 'lsc': + // TODO: use lsc syntax + highlight('js', code, true).value + else: + code + + + 
    +      
+
    + + +CompiledCode({ lsc })-> + js = compileLscToJs(lsc) + +
    + + + + +
    diff --git a/pages/docs/index.lsc b/pages/docs/index.lsc index 116c3ca..319d463 100644 --- a/pages/docs/index.lsc +++ b/pages/docs/index.lsc @@ -1,25 +1,8 @@ import React from 'react' -import cx from 'classnames' import { StickyContainer, Sticky } from 'react-sticky' -import Waypoint from 'react-waypoint' -import { - Container, Row, Col, NavLink, Nav, Table, Blockquote -} from 'components/bootstrap' -import find from 'lodash/find' -import last from 'lodash/last' -import { prefixLink } from 'gatsby-helpers' -import { config } from 'config' +import { Container, Row, Col } from 'components/bootstrap' -import remark from 'remark' -import toc from 'remark-toc' -import slug from 'remark-slug' -import { highlight } from 'highlight.js' - -import markdownToReact from 'util/markdownToReact' -import mainDocsTraverser from 'util/mainDocsTraverser' -import tocTraverser from 'util/tocTraverser' -import compileLscToJs from 'util/compileLscToJs' -import rawDocs from '!raw!./docs.md' +import convertDocsMarkdownToReact from 'util/docs' { TableOfContents, DocsContents } = convertDocsMarkdownToReact() @@ -77,99 +60,3 @@ Docs.childContextTypes = { } export default Docs - - -TocSection({ children, section }, { activeSections }) -> - isActive = if section: activeSections.has(section) - classes = cx("nav-item", { active: isActive }) - -
  • - {children} -
    • - -TocSection.contextTypes = { - activeSections: React.PropTypes.object.isRequired -} - -ScrollTargetSection({ section, id, children }, { onEnter, onLeave }) -> - sectionId = id.replace('section-', '') - _onEnter() -> onEnter(sectionId) - _onLeave() -> onLeave(sectionId) - - -
    - {children} -
    -     - -ScrollTargetSection.contextTypes = { - onEnter: React.PropTypes.func.isRequired - onLeave: React.PropTypes.func.isRequired -} - -CodeCol({ code, syntax }) -> - html = - if syntax == 'js': - highlight('js', code, true).value - elif syntax == 'lsc': - // TODO: use lsc syntax - highlight('js', code, true).value - else: - code - - - 
    -      
-
    - - -CompiledCode({ lsc }) -> - js = compileLscToJs(lsc) - -
    - - - - -
    - -convertDocsMarkdownToReact() -> - markdownWithTOC = remark() - .use(toc) - .process(rawDocs) - .contents - - // HACK; shouldn't need to double-process this way - split = markdownWithTOC.split('\n## ') - tocMD = split[0].replace('## TOC\n', '') - docMD = '## ' + split.slice(1).join('\n## ') - - const TableOfContents = remark() - .use(markdownToReact, { - traverse: tocTraverser - remarkReactComponents: { - ul: Nav - TocSection: TocSection - a: NavLink - } - }) - .process(tocMD) - .contents - - const DocsContents = remark() - .use(slug) - .use(markdownToReact, { - sanitize: { clobber: ["name"] } - traverse: mainDocsTraverser - remarkReactComponents: { - section: ScrollTargetSection - table: Table - blockquote: Blockquote - CompiledCode - } - }) - .process(docMD) - .contents - .props.children - - { TableOfContents, DocsContents } diff --git a/util/docs.lsc b/util/docs.lsc new file mode 100644 index 0000000..1d0a6af --- /dev/null +++ b/util/docs.lsc @@ -0,0 +1,54 @@ +import { NavLink, Nav, Table, Blockquote } from 'components/bootstrap' +import { TocSection, ScrollTargetSection, CompiledCode } from 'components/docs' + +import remark from 'remark' +import toc from 'remark-toc' +import slug from 'remark-slug' + +import markdownToReact from 'util/markdownToReact' +import mainDocsTraverser from 'util/mainDocsTraverser' +import tocTraverser from 'util/tocTraverser' + +import rawDocs from '!raw!pages/docs/docs.md' + + +export default convertDocsMarkdownToReact() -> + markdownWithTOC = remark() + .use(toc) + .process(rawDocs) + .contents + + // HACK; shouldn't need to double-process this way + split = markdownWithTOC.split('\n## ') + tocMD = split[0].replace('## TOC\n', '') + docMD = '## ' + split.slice(1).join('\n## ') + + TableOfContents = remark() + .use(markdownToReact, { + traverse: tocTraverser + remarkReactComponents: { + ul: Nav + TocSection: TocSection + a: NavLink + } + }) + .process(tocMD) + .contents + + DocsContents = remark() + .use(slug) + .use(markdownToReact, { + sanitize: { clobber: ["name"] } + traverse: mainDocsTraverser + remarkReactComponents: { + section: ScrollTargetSection + table: Table + blockquote: Blockquote + CompiledCode + } + }) + .process(docMD) + .contents + .props.children + + { TableOfContents, DocsContents }