docs: add link to developer.github.com, show example first, simplify …

…search styling
octokit · Apr 30, 2019 · d2a940f · d2a940f
1 parent a1aba59
commit d2a940f
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 34 deletions.
diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
@@ -8,6 +8,7 @@ module.exports = {
     title: `Octokit.js`
   },
   plugins: [
+    `gatsby-plugin-react-helmet`,
     `gatsby-source-octokit-routes`,
     {
       resolve: `gatsby-source-filesystem`,

diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^2.2.1",
     "gatsby": "^2.3.22",
+    "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-typography": "^2.2.6",
     "gatsby-remark-prismjs": "^3.2.6",
     "gatsby-source-filesystem": "^2.0.28",
@@ -20,6 +21,7 @@
     "prismjs": "^1.16.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-helmet": "^5.2.0",
     "react-typography": "^0.16.18",
     "typography": "^0.16.18",
     "typography-theme-fairy-gates": "^0.15.11"

diff --git a/docs/src/components/endpoint.js b/docs/src/components/endpoint.js
@@ -66,11 +66,13 @@ export default class EndPoint extends Component {
                 return <tr key={param.name}>
                   <td>{param.name}</td>
                   <td>{param.required ? 'yes' : 'no'}</td>
-                  <td>{param.description}</td>
+                  <td dangerouslySetInnerHTML={{ __html: marked(param.description) }} />
                 </tr>
               })}
             </tbody>
           </table>
+
+          See also: <a href={method.documentationUrl}>GitHub Developer Guide documentation</a>.
         </div>
       </React.Fragment>
     )

diff --git a/docs/src/components/layout.css b/docs/src/components/layout.css
@@ -32,18 +32,14 @@ header h1 {
 }
 
 header > .search {
-  grid-column: 1/2;
+  grid-column: 1/3;
   grid-row: 1/2;
   --whitespace: 1.25rem;
   width: 100%;
   position: relative;
   z-index: 1;
 }
 
-header > .search.active {
-  grid-column: 1/-1;
-}
-
 header > .search .input {
   background: #272822;
   color: #fff;
@@ -128,6 +124,10 @@ header > button:focus {
 
 /* Hide the navigation toggle button on big screens, since it’s not needed */
 @media (min-width: 55em) { /* --wide-enough-for-two-columns */
+  header > .search {
+    grid-column: 1/-1;
+  }
+
   header button {
     display: none !important;
   }

diff --git a/docs/src/components/layout.js b/docs/src/components/layout.js
@@ -2,23 +2,7 @@ import React, { Component } from 'react'
 
 class Layout extends Component {
   render() {
-    return (
-
-      <html lang="en">
-        <head>
-          <meta charset="utf-8" />
-          <meta http-equiv="x-ua-compatible" content="ie=edge"/>
-          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
-
-          <title>
-            octokit/rest.js
-          </title>
-        </head>
-        <body>
-          {this.props.children}
-        </body>
-      </html>
-    )
+    return this.props.children
   }
 }
 

diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Helmet } from "react-helmet"
 
 import Layout from '../components/layout'
 import { graphql } from 'gatsby'
@@ -7,6 +8,10 @@ import IndexPage from "../components/index-page"
 
 export default ({ data }) => (
   <Layout>
+    <Helmet>
+      <meta charset="utf-8" />
+      <title>octokit/rest.js</title>
+    </Helmet>
     <IndexPage data={data} />
   </Layout>
 )