Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added search to docs #1256

Merged
merged 4 commits into from
Jun 16, 2017
Merged

Added search to docs #1256

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
89ed61f
WIP
ndelangen Jun 11, 2017
1488ae9
ADD a search-field to the homepage
ndelangen Jun 11, 2017
df17bc8
Merge branch 'master' into add-search-to-docs
ndelangen Jun 11, 2017
c7ba1a2
Merge branch 'master' into add-search-to-docs
ndelangen Jun 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 5 additions & 9 deletions docs/components/Homepage/Demo/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
.demo-img {
width: 800px;
border: 5px solid #444;
}

@media only screen and (max-width: 800px) {
.demo-img {
width: 90%;
border: 2px solid #444;
}
max-width: 800px;
width: 100%;
border: 2px solid rgba(0, 0, 0, 0.35);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
border-radius: 4px;
}
6 changes: 1 addition & 5 deletions docs/components/Homepage/Heading/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,7 @@ const Heading = () =>
<h3 className="sb-tagline">
The UI Development Environment
<br />
You'll
{' '}
<span className="glyphicon glyphicon-heart heart" />
{' '}
to use
You'll ♥️ to use
</h3>
</div>
</div>;
Expand Down
108 changes: 87 additions & 21 deletions docs/components/Homepage/MainLinks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,98 @@
import React from 'react';
import { Link } from 'react-router';
import { UsedByBg } from '../UsedBy/';
import './style.css';

const MainLinks = () =>
<div id="main-links" className="row">
<div className="col-md-12">
<div className="row">
<div className="main-links-container">
<div className="col-xs-6 try-now">
<h2>Try Now</h2>
<pre>
<code>
npm i -g @storybook/cli<br />
cd my-react-app<br />
getstorybook<br />
</code>
</pre>
</div>
<div id="main-links">
<div className="main-links-container">
<div className="try-now">
<h2>Try Now</h2>
<pre>
<code>
npm i -g @storybook/cli<br />
cd my-react-app<br />
getstorybook<br />
</code>
</pre>
</div>

<div className="col-xs-6 read-docs">
<h2>Read Docs</h2>
<center>
<Link to="/basics/introduction/">
<div className="docs-img" />
</Link>
</center>
<div
className="row"
id="nav"
style={{
borderRight: '0 none',
position: 'relative',
}}
>
<UsedByBg
color="#a7d0ff"
style={{
transform: 'rotateY(180deg)',
}}
/>
<div className="col-xs-12 read-docs">
<h2 style={{ color: '#6DABF5' }}>Documentation</h2>
<div
className="form-group has-feedback"
style={{ maxWidth: '450px', margin: '20px auto' }}
>
<label className="sr-only control-label" htmlFor="search">
Search storybook documentation
</label>
<input
className="form-control"
type="search"
id="search"
placeholder="type to search"
/>
<span className="form-control-feedback" aria-hidden="true">🔍</span>
</div>
</div>

<div className="col-sm-4 read-docs">
<Link to="/basics/introduction/"><h3>Basics</h3></Link>
<ul>
<li><Link to="/basics/quick-start-guide/">Quick setup</Link></li>
<li><Link to="/basics/slow-start-guide/">Adding to existing project</Link></li>
<li><Link to="/basics/slow-start-guide/">Writing stories</Link></li>
</ul>
</div>

<div className="col-sm-4 read-docs">
<Link to="/configurations/default-config/"><h3>Configuration</h3></Link>
<ul>
<li><Link to="/configurations/custom-babel-config/">Babel configurations</Link></li>
<li>
<Link to="/configurations/custom-webpack-config/">Webpack configurations</Link>
</li>
<li>
<Link to="/configurations/add-custom-head-tags/">Custom scripts & styling</Link>
</li>
<li>
<Link to="/configurations/serving-static-files/">Serving static files</Link>
</li>
</ul>
</div>

<div className="col-sm-4 read-docs">
<Link to="/configurations/default-config/"><h3>Addons</h3></Link>
<ul>
<li><Link to="/addons/introduction/">Intro to Addons</Link></li>
<li>
<Link to="/addons/using-addons/">Using Addons</Link>
</li>
<li>
<Link to="/addons/addon-gallery/">Addon Gallery</Link>
</li>
<li>
<Link to="/addons/writing-addons/">Writing Addons</Link>
</li>
<li>
<Link to="/addons/api/">Api</Link>
</li>
</ul>
</div>
</div>
</div>
</div>;
Expand Down
19 changes: 8 additions & 11 deletions docs/components/Homepage/MainLinks/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,29 @@
}

.main-links-container {
max-width: 600px;
margin: auto;
}

#main-links h2 {
text-transform: uppercase;
text-align: center;
font-size: 25px;
font-weight: 600;
}

#main-links pre {
background-color: #444;
color: #DDD;
padding: 15px 30px;
padding: 15px 20px;
line-height: 22px;
border: 0;
border-radius: 0;
}

.docs-img {
background: url('./images/docs.png');
background-repeat: no-repeat;
width: 40px;
height: 54px;
margin-top: 25px;
.algolia-autocomplete {
display: block !important;
}

.try-now {
max-width: 450px;
margin: 40px auto;
}

@media only screen and (max-width: 700px) {
Expand Down
7 changes: 5 additions & 2 deletions docs/components/Homepage/UsedBy/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import React from 'react';
import { Link } from 'react-router';
import './style.css';

const UsedByBg = ({ color }) =>
<div className="used-by-bg">
export const UsedByBg = ({ color, style }) =>
<div className="used-by-bg" style={style}>
<svg
width="100%"
height="100%"
Expand All @@ -28,9 +28,12 @@ const UsedByBg = ({ color }) =>
</div>;
UsedByBg.propTypes = {
color: PropTypes.string,
// eslint-disable-next-line
style: PropTypes.object,
};
UsedByBg.defaultProps = {
color: 'white',
style: {},
};

const User = ({ logo, demo, site, title }) =>
Expand Down
8 changes: 4 additions & 4 deletions docs/components/Homepage/UsedBy/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@

.used-by-bg {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
top: -30px;
left: -30px;
right: -30px;
bottom: -30px;
}

.used-by-bg svg {
Expand Down
20 changes: 20 additions & 0 deletions docs/html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,25 @@ const HTML = props => {
css = <style dangerouslySetInnerHTML={{ __html: require('!raw!./public/styles.css') }} />;
}

const searchScript = [
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />,
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"
/>,
<script
type="text/javascript"
dangerouslySetInnerHTML={{
__html: `docsearch({
apiKey: 'a4f7f972f1d8f99a66e237e7fd2e489f',
indexName: 'storybook-js',
inputSelector: '#search',
debug: false // Set debug to true if you want to inspect the dropdown
});`,
}}
/>,
];

return (
<html lang="en">
<head>
Expand All @@ -29,6 +48,7 @@ const HTML = props => {
<body>
<div id="react-mount" dangerouslySetInnerHTML={{ __html: props.body }} />
<script src={prefixLink(`/bundle.js?t=${BUILD_TIME}`)} />
{searchScript}
</body>
</html>
);
Expand Down
1 change: 1 addition & 0 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"bootstrap": "^3.3.7",
"chroma-js": "^0.7.2",
"color-pairs-picker": "^1.3.5",
"docsearch.js": "^2.3.3",
"front-matter": "^2.1.2",
"gatsby": "^0.12.45",
"gh-pages": "^0.12.0",
Expand Down