From 3642fd0a1e7b0b1301f578a7f55cb397e414f5b7 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 14 Apr 2018 12:32:30 -0400 Subject: [PATCH 1/5] fix(icons): fix out of sync `viewbox` attributes on svgs Ideally we should still move away from the icon font but this fixes some issues with the font's vertical metrics due to different svg sizing. --- src/styles/icons/github.svg | 4 ++-- src/styles/icons/medium.svg | 4 ++-- src/styles/icons/stack-overflow.svg | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/styles/icons/github.svg b/src/styles/icons/github.svg index 941feab41d88..5f08fd120073 100644 --- a/src/styles/icons/github.svg +++ b/src/styles/icons/github.svg @@ -1,3 +1,3 @@ - + - \ No newline at end of file + diff --git a/src/styles/icons/medium.svg b/src/styles/icons/medium.svg index a3cecb5441c1..732be4edc566 100644 --- a/src/styles/icons/medium.svg +++ b/src/styles/icons/medium.svg @@ -1,3 +1,3 @@ - + - \ No newline at end of file + diff --git a/src/styles/icons/stack-overflow.svg b/src/styles/icons/stack-overflow.svg index 4a726692091a..d55416d87906 100644 --- a/src/styles/icons/stack-overflow.svg +++ b/src/styles/icons/stack-overflow.svg @@ -1,3 +1,3 @@ - + - \ No newline at end of file + From 027be8f1e3b5547c47953d29879c75834523e5c8 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 14 Apr 2018 12:49:10 -0400 Subject: [PATCH 2/5] chore(navigation): migrate to `react-banner@next` and re-integrate icon links The `next` version of `react-banner` supports more generic `items` rather than focusing solely on `links` which customizations like icons and dropdowns much easier to handle. --- package-lock.json | 6 +-- package.json | 2 +- src/components/Dropdown/Dropdown.scss | 1 + src/components/Navigation/Navigation.jsx | 56 ++++++++++++-------- src/components/Navigation/Navigation.scss | 64 +++++++++++------------ src/components/Site/Site.jsx | 9 ++-- 6 files changed, 76 insertions(+), 62 deletions(-) diff --git a/package-lock.json b/package-lock.json index 295ec9d795d7..f767cb5f5ad0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12068,9 +12068,9 @@ } }, "react-banner": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/react-banner/-/react-banner-0.5.0.tgz", - "integrity": "sha512-Z3pN+L6v3G08k0wxDQIzzTBAKBtdvM3VFdrV0FiLd/iQiVhuC9bEfeCFacTjxa/0KK0spKfImLGRHa80xoV6xw==" + "version": "1.0.0-rc.0", + "resolved": "https://registry.npmjs.org/react-banner/-/react-banner-1.0.0-rc.0.tgz", + "integrity": "sha512-d9U9ArDcNjegwCcl5+Q4NbGSLHMqsxjALJLnmO6BX0biF5D6HCJuJcHGXxlr9AMnSKMZPUWca8RTGnadYoBujg==" }, "react-dom": { "version": "16.2.0", diff --git a/package.json b/package.json index 1647646766a3..397f015c82be 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "preact-compat": "3.17.0", "prop-types": "^15.5.10", "react": "^16.2.0", - "react-banner": "^0.5.0", + "react-banner": "^1.0.0-rc.0", "react-dom": "^16.2.0", "react-hot-loader": "^4.0.0-beta.12", "react-router": "^4.2.0", diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index 0cf9c2bc3551..cef9210394f6 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -24,6 +24,7 @@ position: absolute; top: 100%; right: 0; + font-size: getFontSize(-1); margin: auto; background-color: #2B3A42; z-index: 1; diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index 0f3c0b3e0953..098850c734ef 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -1,32 +1,20 @@ +// Import External Dependencies import React from 'react'; import Banner from 'react-banner'; + +// Import Utilities/Images +import GitHubIcon from '../../styles/icons/github.svg'; + +// Import Components import Link from '../Link/Link'; import Container from '../Container/Container'; import Logo from '../Logo/Logo'; import Dropdown from '../Dropdown/Dropdown'; + +// Load Styling import './Navigation.scss'; import './Search.scss'; -// TODO: Re-incorporate the icon links -// -// -// -// -// -// -// - // TODO: Re-incorporate docsearch (see `react-banner` docs and `SearchResults` component/discussion) // componentDidMount() { // if (typeof window !== 'undefined') { @@ -57,9 +45,35 @@ export default class Navigation extends React.Component { return ( } url={ pathname } - links={ links } + items={[ + ...links, + { + title: 'GitHub Repository', + url: '//github.com/webpack/webpack', + className: 'navigation__item--icon', + content: + }, + { + title: 'Webpack on Stack Overflow', + url: '//stackoverflow.com/questions/tagged/webpack', + className: 'navigation__item--icon', + content: + }, + { + className: 'navigation__item--icon', + content: ( + + ) + } + ]} link={ Link } onMenuClick={ toggleSidebar } /> ); diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index bc086d8fd511..b8265bf9289a 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -2,21 +2,13 @@ @import 'mixins'; @import 'functions'; -// TODO: Re-incorporate language dropdown and github links although -// this may require linking and re-releasing `react-banner` -// -// .navigation__languages { -// margin-left: 1em; -// margin-top: -4px; -// } - -.banner { +.navigation { flex: 0 0 auto; transition: background 250ms; background: getColor(elephant); } -.banner__inner { +.navigation__inner { position: relative; display: flex; align-items: center; @@ -30,7 +22,7 @@ } } -.banner__mobile { +.navigation__mobile { display: none; fill: white; padding: 0; @@ -43,12 +35,12 @@ transition: color 250ms; } -.banner__mobile svg { +.navigation__mobile svg { width: 20px; height: 20px; } -.banner__logo { +.navigation__logo { margin: auto; text-decoration: none; text-transform: uppercase; @@ -58,7 +50,7 @@ transition: all 250ms; } -.banner__links { +.navigation__items { flex: 1 1 auto; display: flex; height: 56px; @@ -66,12 +58,12 @@ justify-content: flex-end; } -.banner__link { +.navigation__item { position: relative; display: inline-block; font-size: getFontSize(-1); padding-bottom: 0.1em; - margin-right: 1.5em; + margin-right: 18px; text-transform: uppercase; letter-spacing: 0.5px; color: getColor(white); @@ -82,6 +74,12 @@ color: getColor(malibu); } + &--icon { + font-size: 16px; + margin-top: 2px; + -webkit-font-smoothing: antialiased; + } + &--active { color: #fff; @@ -101,14 +99,14 @@ } } -.banner-search { +.navigation-search { flex: 0 0 auto; position: relative; display: flex; justify-content: flex-end; } -.banner-search__input { +.navigation-search__input { font-size: 14px; width: 0; max-width: calc(100vw - 8.5em); @@ -128,7 +126,7 @@ } } -.banner-search__icon { +.navigation-search__icon { font-size: 1em; width: 1em; height: 1em; @@ -140,27 +138,27 @@ transition: color 250ms; } -.banner-search__input:focus, -.banner-search__icon:focus { +.navigation-search__input:focus, +.navigation-search__icon:focus { outline: none; } -.banner-search__clear { +.navigation-search__clear { display: none; margin-right: 0.25em; margin-bottom: -1px; } -.banner-search--active .banner-search__input { +.navigation-search--active .navigation-search__input { margin-right: 0.5em; width: 400px; } -.banner-search--active .banner-search__clear { +.navigation-search--active .navigation-search__clear { display: block; } -.banner-search__results { +.navigation-search__results { position: absolute; top: 100%; right: 0; @@ -168,7 +166,7 @@ margin-top: 5px; } -.banner--search .banner__link { +.navigation--search .navigation__item { pointer-events: none; overflow: hidden; white-space: nowrap; @@ -177,19 +175,19 @@ opacity: 0; } -.banner-sub { +.navigation-sub { display: block; background: getColor(concrete); } -.banner-sub__inner { +.navigation-sub__inner { max-width: map-get($screens, large); margin: 0 auto; padding: 0 1.5em; text-align: right; } -.banner-sub__link { +.navigation-sub__link { display: inline-block; font-size: 0.8em; margin-left: 1.5em; @@ -209,15 +207,15 @@ } @media (max-width: 720px) { - .banner-sub { + .navigation-sub { display: none; } } @media (max-width: 720px) { - .banner__mobile { display: block; } - .banner__links { display: none; } - .banner--search .banner__logo { + .navigation__mobile { display: block; } + .navigation__items { display: none; } + .navigation--search .navigation__logo { pointer-events: none; overflow: hidden; white-space: nowrap; diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx index b09d303aa0d5..dc0af8b2e521 100644 --- a/src/components/Site/Site.jsx +++ b/src/components/Site/Site.jsx @@ -62,16 +62,16 @@ class Site extends React.Component { toggleSidebar={ this._toggleSidebar } links={[ { - title: 'Documentation', + content: 'Documentation', url: '/concepts', isActive: url => /^\/(api|concepts|configuration|guides|loaders|plugins)/.test(url), children: this._strip( sections.filter(item => item.name !== 'contribute') ) }, - { title: 'Contribute', url: '/contribute' }, - { title: 'Vote', url: '/vote' }, - { title: 'Blog', url: '//medium.com/webpack' } + { content: 'Contribute', url: '/contribute' }, + { content: 'Vote', url: '/vote' }, + { content: 'Blog', url: '//medium.com/webpack' } ]} /> { window.document !== undefined ? ( @@ -165,6 +165,7 @@ class Site extends React.Component { _strip = array => { return array.map(({ title, name, url, group, sort, anchors, children }) => ({ title: title || name, + content: title || name, url, group, sort, From 2ce2315e2de9568d0299baad6a017790adcec5a8 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 14 Apr 2018 14:19:01 -0400 Subject: [PATCH 3/5] chore(navigation): re-incorporate docsearch and tweak menu position --- package.json | 1 + src/components/Navigation/Navigation.jsx | 34 +++++++----------------- src/components/Navigation/Search.scss | 2 ++ 3 files changed, 13 insertions(+), 24 deletions(-) diff --git a/package.json b/package.json index 397f015c82be..3d83293f1c07 100644 --- a/package.json +++ b/package.json @@ -104,6 +104,7 @@ }, "dependencies": { "ajv": "^5.5.2", + "docsearch.js": "^2.5.2", "gitter-sidecar": "^1.2.3", "preact": "^8.2.7", "preact-compat": "3.17.0", diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index 098850c734ef..8acbf6629f4c 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -1,6 +1,7 @@ // Import External Dependencies import React from 'react'; import Banner from 'react-banner'; +import DocSearch from 'docsearch.js'; // Import Utilities/Images import GitHubIcon from '../../styles/icons/github.svg'; @@ -12,33 +13,10 @@ import Logo from '../Logo/Logo'; import Dropdown from '../Dropdown/Dropdown'; // Load Styling +import 'docsearch.js/dist/cdn/docsearch.css'; import './Navigation.scss'; import './Search.scss'; -// TODO: Re-incorporate docsearch (see `react-banner` docs and `SearchResults` component/discussion) -// componentDidMount() { -// if (typeof window !== 'undefined') { -// let docsearch = () => {}; - -// // XXX: hack around docsearch -// if (window.docsearch) { -// docsearch = window.docsearch.default || window.docsearch; -// } - -// docsearch({ -// apiKey: 'fac401d1a5f68bc41f01fb6261661490', -// indexName: 'webpack-js-org', -// inputSelector: '.navigation__search-input' -// }); - -// window.addEventListener('keyup', e => { -// if (e.which === 9 && e.target.classList.contains('navigation__search-input')) { -// this._openSearch(); -// } -// }); -// } -// } - export default class Navigation extends React.Component { render() { let { pathname, links, toggleSidebar } = this.props; @@ -78,4 +56,12 @@ export default class Navigation extends React.Component { onMenuClick={ toggleSidebar } /> ); } + + componentDidMount() { + DocSearch({ + apiKey: 'fac401d1a5f68bc41f01fb6261661490', + indexName: 'webpack-js-org', + inputSelector: '.navigation-search__input' + }); + } } diff --git a/src/components/Navigation/Search.scss b/src/components/Navigation/Search.scss index 9c9a59972b5d..98f86a369574 100644 --- a/src/components/Navigation/Search.scss +++ b/src/components/Navigation/Search.scss @@ -6,6 +6,8 @@ .ds-dropdown-menu { box-shadow: none; + margin-top: 19px; + margin-right: -37px; &:before { content: none; From d9fc15b9361855b62a88d5ad9a02cffc9e268728 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Sat, 14 Apr 2018 23:38:08 -0400 Subject: [PATCH 4/5] chore(navigation): include protocol in external links --- src/components/Navigation/Navigation.jsx | 4 ++-- src/components/Site/Site.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index 8acbf6629f4c..a1a98f39eb6d 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -30,13 +30,13 @@ export default class Navigation extends React.Component { ...links, { title: 'GitHub Repository', - url: '//github.com/webpack/webpack', + url: 'https://github.com/webpack/webpack', className: 'navigation__item--icon', content: }, { title: 'Webpack on Stack Overflow', - url: '//stackoverflow.com/questions/tagged/webpack', + url: 'https://stackoverflow.com/questions/tagged/webpack', className: 'navigation__item--icon', content: }, diff --git a/src/components/Site/Site.jsx b/src/components/Site/Site.jsx index dc0af8b2e521..ea37bec2fe37 100644 --- a/src/components/Site/Site.jsx +++ b/src/components/Site/Site.jsx @@ -71,7 +71,7 @@ class Site extends React.Component { }, { content: 'Contribute', url: '/contribute' }, { content: 'Vote', url: '/vote' }, - { content: 'Blog', url: '//medium.com/webpack' } + { content: 'Blog', url: 'https://medium.com/webpack' } ]} /> { window.document !== undefined ? ( From 94dd928ed569c3bd1c0372fe647b758bfd0ad097 Mon Sep 17 00:00:00 2001 From: Greg Venech Date: Tue, 17 Apr 2018 00:47:16 -0400 Subject: [PATCH 5/5] chore(navigation): remove unused `import` --- src/components/Navigation/Navigation.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx index a1a98f39eb6d..11a9806bd966 100644 --- a/src/components/Navigation/Navigation.jsx +++ b/src/components/Navigation/Navigation.jsx @@ -3,9 +3,6 @@ import React from 'react'; import Banner from 'react-banner'; import DocSearch from 'docsearch.js'; -// Import Utilities/Images -import GitHubIcon from '../../styles/icons/github.svg'; - // Import Components import Link from '../Link/Link'; import Container from '../Container/Container';