add layer overview page

Author: jaredcnance

src/App.js

@@ -20,6 +20,8 @@ import Routing from "./pages/usage/Routing";
 import Sorting from "./pages/usage/Sorting";
 import SparseFieldsets from "./pages/usage/SparseFieldsets";
 
+import LayerOverview from "./pages/extensibility/LayerOverview";
+
 const { ul } = glamorous;
 
 const List = ul({
@@ -83,6 +85,12 @@ const App = () => {
                   <Link to="/sparse-fieldsets">Sparse Field Sets</Link>
                 </li>
               </List>
+              <h3>Getting Started</h3>
+              <List>
+                <li>
+                  <Link to="/layer-overview">Layer Overview</Link>
+                </li>
+              </List>
             </nav>
           </Sidebar>
           <div className="item main">
@@ -104,6 +112,7 @@ const App = () => {
             <Route exact path="/routing" component={Routing} />
             <Route exact path="/sorting" component={Sorting} />
             <Route exact path="/sparse-fieldsets" component={SparseFieldsets} />
+            <Route exact path="/layer-overview" component={LayerOverview} />
           </div>
         </div>
       </Router>

src/components/HtmlContent.js

@@ -0,0 +1,12 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import Content from "./Content";
+import glamorous from 'glamorous';
+
+const Div = glamorous.div({
+  marginLeft: '20px'
+})
+
+export default props => {
+  return <Div>{props.children}</Div>;
+};

src/index.css

@@ -3,3 +3,6 @@ body {
   padding: 0;
   font-family: sans-serif;
 }
+::-webkit-scrollbar { 
+  display: none; 
+}

src/pages/extensibility/LayerOverview.js

@@ -0,0 +1,45 @@
+import React from "react";
+import SplitPage from "../SplitPage";
+import Example from "../../components/Example";
+import ContentHeader from "../../components/ContentHeader";
+import HtmlContent from "../../components/HtmlContent";
+
+export default () => {
+  return (
+    <SplitPage>
+      <ContentHeader>Layer Overview</ContentHeader>
+      <HtmlContent>
+      By default, data retrieval is distributed across 3 layers:
+
+<p>
+<a href="https://github.com/json-api-dotnet/JsonApiDotNetCore/blob/master/src/JsonApiDotNetCore/Controllers/JsonApiController.cs">JsonApiController</a> (required)
+<br />
+└── <a href="https://github.com/json-api-dotnet/JsonApiDotNetCore/blob/master/src/JsonApiDotNetCore/Services/EntityResourceService.cs">EntityResourceService</a> : <a href="https://github.com/json-api-dotnet/JsonApiDotNetCore/blob/master/src/JsonApiDotNetCore/Services/Contract/IResourceService.cs">IResourceService</a>
+<br />
+&nbsp;&nbsp;&nbsp;&nbsp;└── <a href="https://github.com/json-api-dotnet/JsonApiDotNetCore/blob/master/src/JsonApiDotNetCore/Data/DefaultEntityRepository.cs">DefaultEntityRepository</a> : <a href="https://github.com/json-api-dotnet/JsonApiDotNetCore/blob/master/src/JsonApiDotNetCore/Data/IEntityRepository.cs">IEntityRepository</a>
+</p>
+      </HtmlContent>
+      <Example
+        md={`
+Currently valid
+        `}
+        lang={"http"}
+        code={`
+GET /articles?fields[articles]=title,body HTTP/1.1
+Accept: application/vnd.api+json
+        `}
+      />
+
+      <Example
+        md={`
+Not yet supported
+        `}
+        lang={"http"}
+        code={`
+GET /articles?include=author&fields[articles]=title,body&fields[people]=name HTTP/1.1
+Accept: application/vnd.api+json
+        `}
+      />
+    </SplitPage>
+  );
+};