feat(Anchor component): Add a component to link to docs sections easyer

sencrop · Sep 28, 2018 · 507242d · 507242d
1 parent 9f80f68
commit 507242d
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 22 deletions.
diff --git a/components/Anchor.js b/components/Anchor.js
@@ -0,0 +1,14 @@
+const Anchor = ({ text, id }) => {
+  const hash = id || text.toLowerCase().replace(/[^\d\w]/g, "_");
+
+  return (
+    <span>
+      <small aria-hidden="true"><a id={hash} href={`#${hash}`}>
+        🔗
+      </a></small>{" "}
+      {text}
+    </span>
+  );
+};
+
+export default Anchor;
diff --git a/pages/guide.js b/pages/guide.js
@@ -1,5 +1,6 @@
 import Link from 'next/link'
 import Layout from '../components/Layout'
+import Anchor from '../components/Anchor'
 
 import SyntaxHighlighter, { registerLanguage } from "react-syntax-highlighter/light"
 import js from 'react-syntax-highlighter/languages/hljs/javascript'
@@ -504,7 +505,7 @@ const Index = () => (
       choices in order to help you grasp our
       API internals quicker.
     </p>
-    <h2>First contact</h2>
+    <h2><Anchor text="First contact" /></h2>
     <p>
       You can simply hit the Sencrop API
       by simply opening our ping endpoint
@@ -525,30 +526,30 @@ const Index = () => (
     <SyntaxHighlighter language="bash" style={docco}>{
       CURL_PING_CODE
     }</SyntaxHighlighter>
-    <h2>Get your token</h2>
+    <h2><Anchor text="Get your token" /></h2>
     <p>
       Most of our API requires you to pass
       a token via the Bearer HTTP mecanism.
       To interact with our servers, you will
       need to choose a way to get one.
     </p>
-    <h3>Via OAuth2</h3>
+    <h3><Anchor text="Via OAuth2" /></h3>
     <p>
       We plan to integrate OAuth authentication
       that will provide you a way to obtain
       a token from our users. Subscribe to our
       mailing list to be informed of the OAuth2
       support.
     </p>
-    <h3>Via the Partners API</h3>
+    <h3><Anchor text="Via the Partners API" /></h3>
     <p>
       The <Link href="/partners"><a>Partners
       API</a></Link> allows you to ask our
       users an access to their data in a
       privilegied way. You first need to meet
       us to get that access.
     </p>
-    <h3>Via the Sencrop app</h3>
+    <h3><Anchor text="Via the Sencrop app" /></h3>
     <p>
       Otherwise, for your own account, you
       can use our API with your own token,
@@ -588,7 +589,7 @@ const Index = () => (
       Or just continue your journey through
       our API guide!
     </p>
-    <h2>Listing your devices</h2>
+    <h2><Anchor text="Listing your devices" /></h2>
     <p>
       Before retrieving your data you may want
       to simply list your own Sencrop Devices:
@@ -615,7 +616,7 @@ const Index = () => (
       our app memory footprint by easing hash
       merges accross our various states.
     </p>
-    <h2>Reading raw device data</h2>
+    <h2><Anchor text="Reading raw device data" /></h2>
     <p>
       Your devices regularly send meteoroligical
       data to our servers. You can get their
@@ -644,7 +645,7 @@ const Index = () => (
       Check out the API reference for more
       information.
     </p>
-    <h2>Reading device data</h2>
+    <h2><Anchor text="Reading device data" /></h2>
     <p>
       The raw data is cool but you may want a bit
       more insight on the data you retrieve.
@@ -694,7 +695,7 @@ const Index = () => (
     <SyntaxHighlighter language="json" style={docco}>{
       SENCROP_STATISTICS_PAYLOAD
     }</SyntaxHighlighter>
-    <h2>Geobased data</h2>
+    <h2><Anchor text="Geobased data" /></h2>
     <p>
       The geobased data provides your insights around
       a given position instead of a single device.
@@ -739,7 +740,7 @@ const Index = () => (
       Check out the API reference for more
       information.
     </p>
-    <h2>Time buckets</h2>
+    <h2><Anchor text="Time buckets" /></h2>
     <p>
       Various measures are aggregated into time
       buckets. The buckets are computed according
@@ -816,7 +817,7 @@ const Index = () => (
       property) and the following buckets are empty since they
       represent future months.
     </p>
-    <h2>Units</h2>
+    <h2><Anchor text="Units" /></h2>
     <p>
       The API returns values in fixed units.
       We use the{' '}
@@ -853,7 +854,7 @@ const Index = () => (
       <code>RAIN_TIC</code>) are still supported but deprecated. We will probably
       remove those measures in a near future.
     </p>
-    <h2>Limits</h2>
+    <h2><Anchor text="Limits" /></h2>
     <p>
       Since we are in an early alpha publication
       of this API, we do not yet provide feedback
@@ -867,7 +868,7 @@ const Index = () => (
       intensive access to the data in the
       meanwhile.
     </p>
-    <h2>What&apos;s next ?</h2>
+    <h2><Anchor text="What&apos;s next ?" /></h2>
     <p>
       So you read it all? Impressive! You are
       now in the best conditions to use our

diff --git a/pages/index.js b/pages/index.js
@@ -3,6 +3,7 @@ import Layout from '../components/Layout'
 import NoSSR from 'react-no-ssr';
 import ReactDOM from 'react-dom'
 import React from 'react'
+import Anchor from '../components/Anchor'
 
 export default class Index extends React.Component {
   render() {
@@ -66,7 +67,7 @@ export default class Index extends React.Component {
         on <a href="https://github.com/sencrop/sencrop-developer-platform"
           >GitHub</a>.
       </p>
-      <h2 id="mailing_list">Developer Mailing List</h2>
+      <h2><Anchor text="Developer Mailing List" id="mailing_list" /></h2>
       <form method="post" action="https://evomedia.us3.list-manage.com/subscribe/post?u=c993ab1c009fbcbc61dea24cd&amp;id=b7ef162deb" target="_blank">
         <div style={{
             position: 'absolute',

diff --git a/pages/partners.js b/pages/partners.js
@@ -1,5 +1,6 @@
 import Link from 'next/link'
 import Layout from '../components/Layout'
+import Anchor from '../components/Anchor'
 
 import SyntaxHighlighter, { registerLanguage } from "react-syntax-highlighter/light"
 import js from 'react-syntax-highlighter/languages/hljs/javascript'
@@ -75,13 +76,13 @@ const Partners = () => (
       by your side but in the meanwhile, please
       contact us to renew it.
     </p>
-    <h2>Delegation flows</h2>
+    <h2><Anchor text="Delegation flows" /></h2>
     <p>
       You can obtain a token from our users via 2
       distinct flows currently, the SMS flow or the
       module flow.
     </p>
-    <h3>Module flow</h3>
+    <h3><Anchor text="Module flow" /></h3>
     <p>
       This flow allows you to directly create tokens
       for our users. The prerequisite is that the user
@@ -104,7 +105,7 @@ const Partners = () => (
       your modules activated you will get a{' '}
       <code>E_MODULE_NOT_ACTIVATED</code> error.
     </p>
-    <h3>SMS flow</h3>
+    <h3><Anchor text="SMS flow" /></h3>
     <p>
       You can obtain a token from our users by sending
       them an SMS with a validation code that allows
@@ -132,7 +133,7 @@ const Partners = () => (
       a token allowing you to act on the behalf
       of that user.
     </p>
-    <h4>Requesting a token</h4>
+    <h4><Anchor text="Requesting a token" /></h4>
     <p>
       To request a token just call the following
       endpoint with your API client id and secret:
@@ -144,7 +145,7 @@ const Partners = () => (
       This will send a SMS to the user with
       an authorization code.
     </p>
-    <h4>Creating a token</h4>
+    <h4><Anchor text="Creating a token" /></h4>
     <p>
       To create the token just call the following
       endpoint with your API client id and secret:
@@ -158,7 +159,7 @@ const Partners = () => (
     <p>
       That token allows your to access the user
       data through the
-      API. <Link href="/guide"><a>See our API
+      API. <Link href="/guide"><a>See our API{' '}
       guide</a></Link> for more information
       on its usage.
     </p>

diff --git a/pages/tools.js b/pages/tools.js
@@ -2,6 +2,7 @@ import SyntaxHighlighter, { registerLanguage } from "react-syntax-highlighter/li
 import js from 'react-syntax-highlighter/languages/hljs/javascript'
 import bash from 'react-syntax-highlighter/languages/hljs/bash'
 import docco from 'react-syntax-highlighter/styles/hljs/docco'
+import Anchor from '../components/Anchor'
 
 const INSTALL_CODE = `npm install --save sencrop-js-api-client
 `;
@@ -30,7 +31,7 @@ const Index = () => (
 `Get some more tooling to interact with our API.`.replace(/\n/, '')
   } tools>
     <h1>Tools</h1>
-    <h2>Swagger/OpenAPI Definition</h2>
+    <h2><Anchor text="Swagger/OpenAPI Definition" /></h2>
     <p>
       You can <a href="/static/swagger.api.json"
       download="sencrop-v1.swagger.js"
@@ -44,7 +45,7 @@ const Index = () => (
       <a href="https://swagger.io/swagger-codegen/">create
       an API client</a> for your favorite programming language.
     </p>
-    <h2>JavaScript SDK</h2>
+    <h2><Anchor text="JavaScript SDK" /></h2>
     <p>
       To use our API writing less code, you can
       also use our JavaScript SDK.