add doc edit link (#46)

storybookjs · Oct 24, 2016 · 2c8fa2d · 2c8fa2d
1 parent ecda62a
commit 2c8fa2d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/src/components/Docs/Container/index.js b/src/components/Docs/Container/index.js
@@ -26,6 +26,10 @@ class Container extends React.Component {
       selectedItemId
     } = this.props;
 
+    const gitHubRepoUrl = 'https://github.com/kadirahq/getstorybook.io';
+    const docPath = `${selectedCatId}/${selectedSectionId}/${selectedItemId}`;
+    const gitHubRepoDocUrl = `${gitHubRepoUrl}/tree/master/src/docs/${docPath}.js`;
+
     return (
       <div id="docs-container" className="row">
         <div className="row">
@@ -59,6 +63,7 @@ class Container extends React.Component {
           <Content
             title={selectedItem.title}
             content={selectedItem.content}
+            editUrl={gitHubRepoDocUrl}
           />
 
           <div className="nav-dropdown">

diff --git a/src/components/Docs/Content/index.js b/src/components/Docs/Content/index.js
@@ -15,10 +15,12 @@ marked.setOptions({
   smartypants: false
 });
 
-const DocsContent = ({ title, content }) => (
+const DocsContent = ({ title, content, editUrl }) => (
   <div id="docs-content">
     <div className="content">
       <h2 className="title">{ title }</h2>
+      <p><a className="edit-link" href={editUrl} target="_blank">Edit this page</a></p>
+
       <div className="markdown">
         <Highlight>
           { marked(content) }
@@ -31,6 +33,7 @@ const DocsContent = ({ title, content }) => (
 DocsContent.propTypes = {
   title: React.PropTypes.string,
   content: React.PropTypes.string.isRequired,
+  editUrl: React.PropTypes.string,
 };
 
 export default DocsContent;
diff --git a/src/components/Docs/Content/style.css b/src/components/Docs/Content/style.css
@@ -10,11 +10,18 @@
 #docs-content .title {
   font-size: 25px;
   color: rgb(0, 0, 0);
-  margin-bottom: 30px;
+  margin-bottom: 0;
   line-height: 28px;
   font-weight: 800;
 }
 
+#docs-content a.edit-link {
+  color: #E25E5E !important;
+  font-size: 11px;
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
 #docs-content .markdown div,
 #docs-content .markdown p,
 #docs-content .markdown li,