From 9fdcf437150f7abff108bd9dbdf67cd0fa0376ae Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Fri, 3 Nov 2017 16:43:28 +0100 Subject: [PATCH 1/9] =?UTF-8?q?=F0=9F=94=96=20bump=20version?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 17 +++++++++++++++++ package.json | 2 +- 2 files changed, 18 insertions(+), 1 deletion(-) create mode 100644 CHANGELOG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..6673c24 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,17 @@ +# Changelog + +*1.0.0* (2017-11-03) + - 🐛 fix broken color table (2e579c7) + - 💄 nicer default design for color page (2622a3b) + - ✨ add theme settings (3838953) + - 💄 better default font (73813f9) + - ✨ add Toolbox icons set (b6b2efb) + - ✨ disable link in styleguide and redirect links in pages (cf8154a) + - 💄 nicer notes and code block (2f2f147) + - ✨ configurable styleguide brand (see docs) (a35912c) + - 💄 add non-grid-browser fallback styles (2898e42) + - ✨ add version under title (4a8cda2) + - ✨ customizable title (926ad74) + - ✨ add copy markup item action (d652e8f) + - 💄 uniformize item actions (4d69061) + - ✨ responsive layout (72034be) diff --git a/package.json b/package.json index b288929..d738b49 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "toolbox-reader", - "version": "0.1.0", + "version": "1.0.0", "private": true, "dependencies": { "colorable": "^1.0.5", From cf35785eba7515e7988c83bc438e642f03f638ca Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Tue, 12 Dec 2017 13:36:34 +0100 Subject: [PATCH 2/9] =?UTF-8?q?=E2=9C=A8=20add=20base=20SidebarDocs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Store.js | 5 ++ src/components/App/App.js | 1 + src/components/Sidebar/Sidebar.js | 3 + src/components/SidebarDocs/SidebarDocs.js | 95 +++++++++++++++++++++ src/components/SidebarItem/SidebarItem.scss | 13 ++- 5 files changed, 116 insertions(+), 1 deletion(-) create mode 100644 src/components/SidebarDocs/SidebarDocs.js diff --git a/src/Store.js b/src/Store.js index 8d96e88..ebe28d9 100644 --- a/src/Store.js +++ b/src/Store.js @@ -5,6 +5,7 @@ class Store { extendObservable(this, { base_path: '', components: [], + docs: {}, showAllCode: true, showMenu: false, }); @@ -17,6 +18,10 @@ class Store { this.components = components; }); + this.addDocs = action((docs) => { + this.docs = docs; + }); + this.toggleAllCode = action(() => { this.showAllCode = !this.showAllCode; }); diff --git a/src/components/App/App.js b/src/components/App/App.js index 79f4b99..a00f012 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -32,6 +32,7 @@ class App extends Component { componentWillMount() { const baseUrl = window.location.href.replace(`#${this.props.location.pathname}`, ''); this.props.store.addPath(baseUrl); + this.props.store.addDocs(window.docs); const components = Object.keys(window.sources).reduce((acc, group) => { const componentArray = window.sources[group].map(slug => { diff --git a/src/components/Sidebar/Sidebar.js b/src/components/Sidebar/Sidebar.js index b541cea..c276aab 100644 --- a/src/components/Sidebar/Sidebar.js +++ b/src/components/Sidebar/Sidebar.js @@ -3,6 +3,7 @@ import { inject, observer } from 'mobx-react'; import { NavLink, withRouter } from 'react-router-dom' import SidebarItem from '../SidebarItem/SidebarItem'; +import SidebarDocs from '../SidebarDocs/SidebarDocs'; import './Sidebar.css'; @@ -28,6 +29,8 @@ class Sidebar extends Component { + + {Object.keys(this.props.store.components).map((group, key) => { if (group === 'docs') return null; diff --git a/src/components/SidebarDocs/SidebarDocs.js b/src/components/SidebarDocs/SidebarDocs.js new file mode 100644 index 0000000..86da3fa --- /dev/null +++ b/src/components/SidebarDocs/SidebarDocs.js @@ -0,0 +1,95 @@ +import React, { Component } from 'react'; +import { inject, observer } from 'mobx-react'; +import { NavLink, withRouter } from 'react-router-dom' +import Collapse from 'react-css-collapse'; +import PropTypes from 'prop-types'; + +class SidebarDocs extends Component { + constructor() { + super(); + + this.state = { + active: false, + } + + this.toggleComponentsList = this.toggleComponentsList.bind(this); + } + + toggleComponentsList() { + this.setState({ + active: !this.state.active, + }); + } + + componentDidMount() { + const regex = new RegExp(`^/${this.props.group}/`); + const isCurrent = this.props.location.pathname.match(regex); + + this.setState({ + active: !!isCurrent + }) + } + + titlelize(string) { + const title = string.split('.')[0].replace('-', ' '); + return title.charAt(0).toUpperCase() + title.slice(1); + } + + renderDocDir(dir) { + return ( +
    + {Object.keys(dir).map((item, i) => { + if (item === 'f') { + return ( + + {dir[item].map((file, j) => { + if (file !== 'index.md' && file !== 'index.html') { + return ( +
  • + {this.titlelize(file)} +
    • + ); + } + })} +     + ); + } else { + return ( +
  • + {dir[item].f.includes('index.md') || dir[item].f.includes('index.html') + ? + {this.titlelize(item)} + : + {this.titlelize(item)} + } + {this.renderDocDir(dir[item])} +
    • + ); + } + })} +
+ ); + } + + render() { + return ( +
+ + + {this.renderDocDir(this.props.store.docs)} + +
+ ); + } +} + +SidebarDocs.propTypes = { + group: PropTypes.string.isRequired, + match: PropTypes.object.isRequired, + location: PropTypes.object.isRequired, + history: PropTypes.object.isRequired +}; + +export default withRouter(inject('store')(observer(SidebarDocs))); diff --git a/src/components/SidebarItem/SidebarItem.scss b/src/components/SidebarItem/SidebarItem.scss index 2449d91..0959074 100644 --- a/src/components/SidebarItem/SidebarItem.scss +++ b/src/components/SidebarItem/SidebarItem.scss @@ -54,10 +54,13 @@ list-style: none; padding: 0; + strong { padding-left: 2rem; } + a { display: block; position: relative; - padding: 0.25rem 0.5rem 0.25rem 2rem; + padding: 0.25rem 0.5rem 0.25rem; + padding-left: 2rem; color: $body-color; transition: color 250ms ease; @@ -84,7 +87,15 @@ &.active { font-weight: bold; } + } + + ul a, + ul strong { padding-left: 2.5rem; } + ul ul a, + ul ul strong { padding-left: 3rem; } + ul ul ul a, + ul ul ul strong { padding-left: 3.5rem; } } .tlbx-sidebar-item-list-empty { From 7a92b6f36b84cbaac89f462fa5a6411ac99d537c Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Tue, 12 Dec 2017 15:42:51 +0100 Subject: [PATCH 3/9] =?UTF-8?q?=E2=9C=A8=20add=20proper=20doc=20page=20lin?= =?UTF-8?q?k=20and=20content=20render?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/components/App/App.js | 9 ++- src/components/SidebarDocs/SidebarDocs.js | 18 ++++-- src/views/Doc/Doc.js | 67 +++++++++++++++++++++++ src/views/Doc/Doc.scss | 1 + src/views/Home/Home.js | 12 ---- src/views/Single/Single.js | 6 +- yarn.lock | 13 +++++ 8 files changed, 103 insertions(+), 24 deletions(-) create mode 100644 src/views/Doc/Doc.js create mode 100644 src/views/Doc/Doc.scss delete mode 100644 src/views/Home/Home.js diff --git a/package.json b/package.json index 6a593ea..d8558db 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "1.0.0", "private": true, "dependencies": { + "axios": "^0.17.1", "colorable": "^1.0.5", "mobx": "^3.1.11", "mobx-react": "^4.2.1", diff --git a/src/components/App/App.js b/src/components/App/App.js index a00f012..3ffa015 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -9,10 +9,10 @@ import './App.css'; import Sidebar from '../Sidebar/Sidebar'; import Toolbar from '../Toolbar/Toolbar'; import Single from '../../views/Single/Single'; +import Doc from '../../views/Doc/Doc'; import SingleFull from '../../views/SingleFull/SingleFull'; import Page from '../../views/Page/Page'; import Colors from '../../views/Colors/Colors'; -import Home from '../../views/Home/Home'; class App extends Component { constructor() { @@ -104,8 +104,11 @@ class App extends Component {
- - + + + + +
diff --git a/src/components/SidebarDocs/SidebarDocs.js b/src/components/SidebarDocs/SidebarDocs.js index 86da3fa..60c53ba 100644 --- a/src/components/SidebarDocs/SidebarDocs.js +++ b/src/components/SidebarDocs/SidebarDocs.js @@ -35,7 +35,7 @@ class SidebarDocs extends Component { return title.charAt(0).toUpperCase() + title.slice(1); } - renderDocDir(dir) { + renderDocDir(dir, fullpath) { return (
    {Object.keys(dir).map((item, i) => { @@ -46,7 +46,7 @@ class SidebarDocs extends Component { if (file !== 'index.md' && file !== 'index.html') { return (
  • - {this.titlelize(file)} + {this.titlelize(file)}
    • ); } @@ -54,15 +54,21 @@ class SidebarDocs extends Component { ); } else { + const hasIndexMd = dir[item].f.includes('index.md'); + const hasIndexHtml = dir[item].f.includes('index.html'); + const index = hasIndexMd ? '--index.md' : hasIndexHtml ? '--index.html' : ''; + return (
  • - {dir[item].f.includes('index.md') || dir[item].f.includes('index.html') + {hasIndexMd || hasIndexHtml ? - {this.titlelize(item)} + + {this.titlelize(item)} + : {this.titlelize(item)} } - {this.renderDocDir(dir[item])} + {this.renderDocDir(dir[item], `${fullpath}${item}--`)}
    • ); } @@ -78,7 +84,7 @@ class SidebarDocs extends Component { Documentation - {this.renderDocDir(this.props.store.docs)} + {this.renderDocDir(this.props.store.docs, '')} ); diff --git a/src/views/Doc/Doc.js b/src/views/Doc/Doc.js new file mode 100644 index 0000000..3bcbcc6 --- /dev/null +++ b/src/views/Doc/Doc.js @@ -0,0 +1,67 @@ +import React, { Component } from 'react'; +import { inject, observer } from 'mobx-react'; +import PropTypes from 'prop-types'; +import ReactMarkdown from 'react-markdown'; +import axios from 'axios'; + +import './Doc.css'; + +class Doc extends Component { + constructor() { + super(); + + this.state = { + homeFile: '', + content: '', + } + } + + componentWillMount() { + this.getContent(this.props); + } + + componentWillReceiveProps(nextProps) { + this.getContent(nextProps); + } + + componentWillUnmount() { + this.setState({ content: '' }); + } + + getContent(props) { + const homeFile = props.store.docs.f.includes('index.md') ? 'index.md' : 'index.html'; + const slug = props.match.params.slug || homeFile; + const path = props.store.base_path + 'docs/' + slug.replace(/\-\-/g, '/'); + + this.setState({ homeFile }); + + axios + .get(path) + .then((res) => { + this.setState({ content: res.data }); + }); + } + + render() { + const slug = this.props.match.params.slug || this.state.homeFile; + const slugSplited = slug.split('.'); + const ext = slugSplited[slugSplited.length - 1]; + + return ( +
    + {ext === 'md' + ? + + : +
    + } +
    + ); + } +} + +Doc.propTypes = { + docs: PropTypes.object, +}; + +export default inject('store')(observer(Doc)); diff --git a/src/views/Doc/Doc.scss b/src/views/Doc/Doc.scss new file mode 100644 index 0000000..ea37b29 --- /dev/null +++ b/src/views/Doc/Doc.scss @@ -0,0 +1 @@ +@import '../../variables.scss'; diff --git a/src/views/Home/Home.js b/src/views/Home/Home.js deleted file mode 100644 index 04c457b..0000000 --- a/src/views/Home/Home.js +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; - -const Home = () => { - return ( -
    -

    This is the Homepage.

    -

    There's nothing yet. But soon.

    -
    - ) -} - -export default Home; diff --git a/src/views/Single/Single.js b/src/views/Single/Single.js index 061a00b..44a4acd 100644 --- a/src/views/Single/Single.js +++ b/src/views/Single/Single.js @@ -36,7 +36,7 @@ class Single extends Component { getContent(props) { const params = props.match.params; - const components = props.store.components[params.type]; + const components = props.store.components[props.location.pathname.split('/')[1]]; const component = toJS(components).find(item => item.slug === params.slug); this.setState({ component, variants: [] }); @@ -73,7 +73,7 @@ class Single extends Component { key={key} title={variant.title} slug={`tlbx-${this.state.component.slug}-${variant.slug}`} - fullUrl={`/${this.props.match.params.type}/${this.props.match.params.slug}/${variant.slug}/full`} + fullUrl={`/${this.props.location.pathname.split('/')[1]}/${this.props.match.params.slug}/${variant.slug}/full`} > {variant.markup} @@ -95,7 +95,7 @@ class Single extends Component { wrapper={this.state.component.wrapper || ''} background={this.state.component.background} slug={`tlbx-${this.state.component.slug}`} - fullUrl={`/${this.props.match.params.type}/${this.props.match.params.slug}/full`} + fullUrl={`/${this.props.location.pathname.split('/')[1]}/${this.props.match.params.slug}/full`} > {this.state.content} diff --git a/yarn.lock b/yarn.lock index 53b3519..7523ee8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -337,6 +337,13 @@ aws4@^1.2.1, aws4@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e" +axios@^0.17.1: + version "0.17.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.17.1.tgz#2d8e3e5d0bdbd7327f91bc814f5c57660f81824d" + dependencies: + follow-redirects "^1.2.5" + is-buffer "^1.1.5" + axobject-query@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0" @@ -2825,6 +2832,12 @@ flatten@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782" +follow-redirects@^1.2.5: + version "1.2.6" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.2.6.tgz#4dcdc7e4ab3dd6765a97ff89c3b4c258117c79bf" + dependencies: + debug "^3.1.0" + for-in@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" From eac7b7119b881bafa88e5159c2e6aa58815a071c Mon Sep 17 00:00:00 2001 From: Yann Gouffon Date: Tue, 12 Dec 2017 15:55:46 +0100 Subject: [PATCH 4/9] =?UTF-8?q?=E2=9C=A8=20add=20doc=20retrocompatibility?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/App/App.js | 2 +- src/components/SidebarDocs/SidebarDocs.js | 2 ++ src/views/Doc/Doc.js | 7 ++++--- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/App/App.js b/src/components/App/App.js index 3ffa015..5556224 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -32,7 +32,7 @@ class App extends Component { componentWillMount() { const baseUrl = window.location.href.replace(`#${this.props.location.pathname}`, ''); this.props.store.addPath(baseUrl); - this.props.store.addDocs(window.docs); + if (window.docs) this.props.store.addDocs(window.docs); const components = Object.keys(window.sources).reduce((acc, group) => { const componentArray = window.sources[group].map(slug => { diff --git a/src/components/SidebarDocs/SidebarDocs.js b/src/components/SidebarDocs/SidebarDocs.js index 60c53ba..10bec44 100644 --- a/src/components/SidebarDocs/SidebarDocs.js +++ b/src/components/SidebarDocs/SidebarDocs.js @@ -78,6 +78,8 @@ class SidebarDocs extends Component { } render() { + if (Object.keys(this.props.store.docs).length <= 0) return false; + return (