Skip to content

Commit

Permalink
[www] Fix tutorial sidebar links active state, update deps (#4059)
Browse files Browse the repository at this point in the history 
* Bump deps, add react-helmet for gatsby-plugin-react-helmet v2

* Fix warning

„Warning: Received `false` for non-boolean attribute `className`. If this is expected, cast the value to a string.“

* Update preload href

* Rewire sidebar section and link styles, fix #4036
  • Loading branch information
@fk @KyleAMathews
fk authored and KyleAMathews committed Feb 15, 2018
1 parent cf33a95 commit 94fe5d3
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 112 deletions.
75 changes: 38 additions & 37 deletions www/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
160 changes: 87 additions & 73 deletions www/src/components/sidebar-body.js
View file
Original file line number Diff line number Diff line change
@@ -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 => (
<div>
<h3
Expand All @@ -70,27 +23,21 @@ 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 (
<ul
css={{
...listStyles,
// For nested <ul>s in the "Tutorial" section
"& ul": {
...listStyles,
},
...tutorialStyles,
}}
>
{props.items.map((item, index) => (
Expand All @@ -99,6 +46,7 @@ const SectionLinks = props => {
children={item.items}
key={index}
isInline={props.isInline}
isTutorial={props.isTutorial}
/>
))}
</ul>
Expand All @@ -116,7 +64,13 @@ const SectionLink = props => {
let childnodes = null
if (props.children) {
childnodes = props.children.map((childnode, index) => (
<SectionLink key={index} node={childnode} children={childnode.items} />
<SectionLink
key={index}
node={childnode}
children={childnode.items}
isNested={true}
isTutorial={props.isTutorial}
/>
))
}

Expand All @@ -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 (
<li key={item.title} css={linkStyle}>
{item.link.charAt(0) == `#` ? (
Expand Down
2 changes: 1 addition & 1 deletion www/src/html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default class HTML extends React.Component {
/>
<link
rel="preload"
href="/static/spectral-latin-400.d6a7b14a.woff2"
href="/static/spectral-latin-400.d9fdfd34.woff2"
as="font"
crossOrigin="anonymous"
/>
Expand Down
2 changes: 1 addition & 1 deletion www/src/layouts/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ class DefaultLayout extends React.Component {
}

return (
<div className={isHomepage && `is-homepage`}>
<div className={isHomepage ? `is-homepage` : ``}>
<Helmet defaultTitle={`GatsbyJS`} titleTemplate={`%s | GatsbyJS`}>
<meta name="twitter:site" content="@gatsbyjs" />
<meta name="og:type" content="website" />
Expand Down

0 comments on commit 94fe5d3

Please sign in to comment.