Some typeclass docs setup

site/src/components/Sidebar.js

@@ -69,7 +69,7 @@ class Sidebar extends React.Component {
                     ))}
                     {data.typeclasses.map(typeclass => (
                         <div key={typeclass.name} onClick={this.toggleMenu}>
-                            <SidebarLink name={typeclass.name} link={`/adts/${typeclasses.name}`} tag="Typeclass" />
+                            <SidebarLink name={typeclass.name} link={`/typeclasses/${typeclass.name}`} tag="Typeclass" />
                         </div>
                     ))}
                 </Nav>

site/src/components/SidebarLink.js

@@ -35,7 +35,8 @@ const Tag = styled.div`
 
 const colorMap = {
     ADT: {color: '#2877ad', bgColor: '#d6eeff'},
-    Util: {color: '#0a9e1b', bgColor: '#d3f9d8'}
+    Util: {color: '#0a9e1b', bgColor: '#d3f9d8'},
+    Typeclass: {color: 'white', bgColor: '#af87e6'}
 }
 
 const SidebarLink = ({ name, tag, link }) =>

site/src/components/TypeclassContent.js

@@ -0,0 +1,105 @@
+import React from 'react'
+import styled from 'styled-components'
+import Link from 'gatsby-link'
+import data from '../data'
+import DataTypeMethod from './DataTypeMethod'
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import highlightStyle from 'react-syntax-highlighter/styles/hljs/googlecode'
+
+const Container = styled.div`
+`
+
+const Title = styled.h1`
+    font-weight: inherit;
+
+    @media only screen and (max-width : 768px) {
+        text-align: center;
+        margin-top: 0;
+    }
+`
+
+const AdtBadges = styled.div`
+    margin-top: -20px;
+    padding-bottom: 20px;
+    display: flex;
+    flex-wrap: wrap;
+
+    @media only screen and (max-width : 768px) {
+        justify-content: center;
+    }
+`
+
+const AdtBadge = styled(Link)`
+    background-color: #d6eeff;
+    border-radius: 6px;
+    color: #2877ad;
+    padding: 0px 5px;
+    font-size: 13px;
+    margin-right: 4px;
+    margin-bottom: 5px;
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
+`
+
+const Description = styled.div`
+    padding-right: 15%;
+    font-size: 1.05em;
+
+    @media only screen and (max-width : 768px) {
+        padding-right: 0;
+        text-align: center;
+    }
+`
+
+const TopicHeader = styled.h2`
+    font-weight: inherit;
+    margin-bottom: 0;
+
+    @media only screen and (max-width : 768px) {
+        text-align: center;
+    }
+`
+
+const ExamplesContainer = styled.div`
+    pre {
+        margin: 0;
+    }
+`
+
+const ExampleHeader = styled.div`
+    text-align: center;
+    background-color: #f9f4f4;
+    padding: 4px;
+`
+
+const Example = styled.div`
+    max-width: 650px;
+    margin: 10px 0;
+    border: 1px solid #f3eeee;
+`
+
+const TypeclassContent = typeclass => () =>
+    <Container>
+        <Title>{typeclass.name}</Title>
+        <AdtBadges>
+            {typeclass.implementedBy.map(adt =>
+                <AdtBadge key={adt} to={`/adts/${adt}`}>{adt}</AdtBadge>
+            )}
+        </AdtBadges>
+        <Description>{typeclass.description}</Description>
+        <ExamplesContainer>
+            <Example>
+                <ExampleHeader>How to import</ExampleHeader>
+                <SyntaxHighlighter language="javascript" style={highlightStyle}>{typeclass.example.import}</SyntaxHighlighter>
+            </Example>
+        </ExamplesContainer>
+        {typeclass.methods.length > 0 &&
+            <TopicHeader>Methods to implement</TopicHeader>
+        }
+        {typeclass.methods.map(DataTypeMethod)}
+    </Container>
+
+export default TypeclassContent

site/src/data.ts

@@ -26,7 +26,13 @@ export interface DataType {
 }
 
 export interface Typeclass {
-    name: string
+    name: string,
+    implementedBy: string[],
+    description: string,
+    example: {
+        import: string
+    },
+    methods: Method[]
 }
 
 export interface Util {
@@ -1171,7 +1177,32 @@ const data: Data = {
         },
     ],
     typeclasses: [
-        // {name: 'Alt'},
+        // {
+        //     name: 'Alt',
+        //     implementedBy: ['Maybe', 'Either'],
+        //     description: 'A value that implements the Alt specification must also implement the Functor specification.',
+        //     example: {
+        //         import: `import { Alt } from 'pure-ts/typeclasses/Alt'`
+        //     },
+        //     methods: [
+        //         {
+        //             name: 'alt',
+        //             description: '',
+        //             signatureML: 'Alt f => f a ~> f a -> f a',
+        //             signatureTS: 'alt(other: Alt<T>): Alt<T>',
+        //             examples: []
+        //         }
+        //     ]
+        // },
+        // {
+        //     name: 'Alternative',
+        //     implementedBy: ['Maybe'],
+        //     description: 'A value that implements the Alternative specification must also implement the Applicative and Plus specifications.',
+        //     example: {
+        //         import: `import { Alternative } from 'pure-ts/typeclasses/Alternative'`
+        //     },
+        //     methods: []
+        // },
         // {name: 'Alternative'},
         // {name: 'Applicative'},
         // {name: 'Apply'},

site/src/pages/typeclasses/Alt.js

@@ -0,0 +1,4 @@
+import TypeclassContent from '../../components/TypeclassContent'
+import data from '../../data'
+
+export default TypeclassContent(data.typeclasses.find(x => x.name === 'Alt'))

site/src/pages/typeclasses/Alternative.js

@@ -0,0 +1,4 @@
+import TypeclassContent from '../../components/TypeclassContent'
+import data from '../../data'
+
+export default TypeclassContent(data.typeclasses.find(x => x.name === 'Alternative'))

site/src/pages/typeclasses/Functor.js

@@ -0,0 +1,4 @@
+import TypeclassContent from '../../components/TypeclassContent'
+import data from '../../data'
+
+export default TypeclassContent(data.typeclasses.find(x => x.name === 'Functor'))