diff --git a/www/package.json b/www/package.json index ab6967af925fa..bc65e993140b8 100644 --- a/www/package.json +++ b/www/package.json @@ -6,49 +6,50 @@ "dependencies": { "bluebird": "^3.5.1", "email-validator": "^1.1.1", - "gatsby": "^1.9.77", - "gatsby-image": "^1.0.14", - "gatsby-link": "^1.6.23", - "gatsby-plugin-canonical-urls": "^1.0.6", - "gatsby-plugin-catch-links": "^1.0.8", - "gatsby-plugin-feed": "^1.3.10", - "gatsby-plugin-glamor": "^1.6.7", - "gatsby-plugin-google-analytics": "^1.0.7", - "gatsby-plugin-lodash": "^1.0.0", - "gatsby-plugin-manifest": "^1.0.7", - "gatsby-plugin-netlify": "^1.0.0", - "gatsby-plugin-nprogress": "^1.0.7", - "gatsby-plugin-offline": "^1.0.9", - "gatsby-plugin-react-helmet": "^1.0.6", - "gatsby-plugin-react-next": "^1.0.0", - "gatsby-plugin-sharp": "^1.6.7", - "gatsby-plugin-sitemap": "^1.2.5", - "gatsby-plugin-twitter": "^1.0.10", - "gatsby-plugin-typography": "^1.7.9", - "gatsby-remark-autolink-headers": "^1.4.7", - "gatsby-remark-copy-linked-files": "^1.5.11", - "gatsby-remark-images": "^1.5.20", - "gatsby-remark-prismjs": "^1.2.8", - "gatsby-remark-responsive-iframe": "^1.4.10", - "gatsby-remark-smartypants": "^1.4.7", - "gatsby-source-filesystem": "^1.4.12", - "gatsby-transformer-csv": "^1.3.5", - "gatsby-transformer-documentationjs": "^1.4.6", - "gatsby-transformer-remark": "^1.7.7", - "gatsby-transformer-sharp": "^1.6.12", - "gatsby-transformer-yaml": "^1.5.7", - "graphql-request": "^1.4.0", + "gatsby": "^1.9.199", + "gatsby-image": "^1.0.37", + "gatsby-link": "^1.6.37", + "gatsby-plugin-canonical-urls": "^1.0.13", + "gatsby-plugin-catch-links": "^1.0.16", + "gatsby-plugin-feed": "^1.3.18", + "gatsby-plugin-glamor": "^1.6.12", + "gatsby-plugin-google-analytics": "^1.0.19", + "gatsby-plugin-lodash": "^1.0.9", + "gatsby-plugin-manifest": "^1.0.14", + "gatsby-plugin-netlify": "^1.0.18", + "gatsby-plugin-nprogress": "^1.0.12", + "gatsby-plugin-offline": "^1.0.14", + "gatsby-plugin-react-helmet": "^2.0.5", + "gatsby-plugin-react-next": "^1.0.9", + "gatsby-plugin-sharp": "^1.6.28", + "gatsby-plugin-sitemap": "^1.2.13", + "gatsby-plugin-twitter": "^1.0.17", + "gatsby-plugin-typography": "^1.7.14", + "gatsby-remark-autolink-headers": "^1.4.12", + "gatsby-remark-copy-linked-files": "^1.5.27", + "gatsby-remark-images": "^1.5.44", + "gatsby-remark-prismjs": "^1.2.15", + "gatsby-remark-responsive-iframe": "^1.4.17", + "gatsby-remark-smartypants": "^1.4.11", + "gatsby-source-filesystem": "^1.5.19", + "gatsby-transformer-csv": "^1.3.8", + "gatsby-transformer-documentationjs": "^1.4.9", + "gatsby-transformer-remark": "^1.7.32", + "gatsby-transformer-sharp": "^1.6.19", + "gatsby-transformer-yaml": "^1.5.15", + "graphql-request": "^1.4.1", "gray-percentage": "^2.0.0", "hex2rgba": "^0.0.1", "jsonp": "^0.2.1", "limax": "^1.5.0", - "lodash": "^4.16.6", - "mitt": "^1.1.2", - "parse-filepath": "^1.0.1", + "lodash": "^4.17.5", + "mitt": "^1.1.3", + "parse-filepath": "^1.0.2", + "react-helmet": "^5.2.0", "react-icons": "^2.2.7", "slash": "^1.0.0", - "typeface-space-mono": "^0.0.40", - "typeface-spectral": "^0.0.40", + "typeface-space-mono": "^0.0.54", + "typeface-spectral": "^0.0.54", "typography-breakpoint-constants": "^0.15.10", "typography-plugin-code": "^0.16.11", "validator": "^9.2.0" diff --git a/www/src/components/sidebar-body.js b/www/src/components/sidebar-body.js index 3448372424c33..43e389f9abb7a 100644 --- a/www/src/components/sidebar-body.js +++ b/www/src/components/sidebar-body.js @@ -1,56 +1,9 @@ import React from "react" import Link from "gatsby-link" -import typography, { rhythm, scale, options } from "../utils/typography" +import { rhythm, scale, options } from "../utils/typography" import presets, { colors } from "../utils/presets" -const accentColor = colors.gatsby -const listStyles = { - listStyle: `none`, - margin: 0, - padding: 0, - fontFamily: typography.options.headerFontFamily.join(`,`), - "& li": { - marginBottom: options.blockMarginBottom / 2, - lineHeight: 1.3, - paddingTop: rhythm(1 / 8), - paddingBottom: rhythm(1 / 8), - "& .nav-link": { - position: `relative`, - "&:before": { - content: ` `, - height: 4, - width: 4, - borderRadius: `100%`, - top: `.5em`, - left: `-.7em`, - fontWeight: `normal`, - position: `absolute`, - transform: `scale(0.1)`, - transition: `all ${presets.animation.speedDefault} ${ - presets.animation.curveDefault - }`, - [presets.Hd]: { - height: 6, - width: 6, - top: `.65em`, - marginTop: -3, - left: `-1em`, - }, - }, - }, - "& .nav-link-active": { - opacity: 1, - color: accentColor, - fontWeight: `600`, - "&:before": { - background: accentColor, - transform: `scale(1)`, - }, - }, - }, -} - const Section = props => (

( ) const SectionLinks = props => { - const tutorialStyles = props.isTutorial - ? { - "&&": { - "& > li": { - marginBottom: `1rem`, - "& > .nav-link": { - fontWeight: `bold`, - }, - }, - }, - } - : false + const listStyles = { + listStyle: `none`, + margin: 0, + padding: 0, + fontFamily: options.headerFontFamily.join(`,`), + } return ( @@ -116,7 +64,13 @@ const SectionLink = props => { let childnodes = null if (props.children) { childnodes = props.children.map((childnode, index) => ( - + )) } @@ -125,23 +79,83 @@ const SectionLink = props => { // If the last character is a * then the doc page is still in draft const isDraft = item.title.slice(-1) === `*` const title = isDraft ? item.title.slice(0, -1) : item.title - const linkStyle = { - "&&": { - "& .nav-link": { - borderBottom: `none`, - boxShadow: `none`, - color: isDraft ? colors.gray.calm : colors.gray.text, + const isTutorialFirstLevel = props.isTutorial && !props.isNested + + const styles = { + listItem: { + marginBottom: isTutorialFirstLevel + ? rhythm(1) + : options.blockMarginBottom / 2, + lineHeight: 1.3, + paddingTop: rhythm(1 / 8), + paddingBottom: rhythm(1 / 8), + }, + linkDefault: { + position: `relative`, + borderBottom: `none`, + boxShadow: `none`, + fontWeight: isTutorialFirstLevel ? `bold` : `normal`, + color: isDraft ? colors.gray.calm : colors.gray.text, + fontStyle: isDraft ? `italic` : false, + "&:before": { + content: ` `, + height: 4, + width: 4, + borderRadius: `100%`, + top: `.5em`, + left: `-.7em`, fontWeight: `normal`, - fontStyle: isDraft ? `italic` : false, + position: `absolute`, + transform: `scale(0.1)`, + transition: `all ${presets.animation.speedDefault} ${ + presets.animation.curveDefault + }`, + [presets.Hd]: { + height: 6, + width: 6, + top: `.65em`, + marginTop: -3, + left: `-1em`, + }, }, - "& .nav-link-active": { - color: accentColor, - fontWeight: `bold`, - fontStyle: isDraft ? `italic` : false, + }, + linkActive: { + opacity: 1, + color: colors.gatsby, + fontWeight: `bold`, + "&:before": { + background: colors.gatsby, + transform: `scale(1)`, }, }, } + const linkStyle = props.isNested + ? { + ...styles.listItem, + "& .nav-link": { + ...styles.linkDefault, + color: isDraft ? colors.gray.calm : colors.gray.text, + }, + "& .nav-link-active": { + ...styles.linkActive, + color: isDraft ? colors.gray.calm : colors.gray.text, + fontWeight: `normal`, + "&:before": { + display: `none`, + }, + }, + } + : { + ...styles.listItem, + "& > .nav-link": { + ...styles.linkDefault, + }, + "& > .nav-link-active": { + ...styles.linkActive, + }, + } + return (
  • {item.link.charAt(0) == `#` ? ( diff --git a/www/src/html.js b/www/src/html.js index 2601bf713d974..dd113122e3077 100644 --- a/www/src/html.js +++ b/www/src/html.js @@ -34,7 +34,7 @@ export default class HTML extends React.Component { /> diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js index 8f12924b2e5fc..9427443b62518 100644 --- a/www/src/layouts/index.js +++ b/www/src/layouts/index.js @@ -68,7 +68,7 @@ class DefaultLayout extends React.Component { } return ( -
    +