From a924974026cd2362d3bbff292211650ac5d2df40 Mon Sep 17 00:00:00 2001 From: gigobyte Date: Wed, 11 Jul 2018 20:56:37 +0300 Subject: [PATCH] Some typeclass docs setup --- site/src/components/Sidebar.js | 2 +- site/src/components/SidebarLink.js | 3 +- site/src/components/TypeclassContent.js | 105 ++++++++++++++++++++++ site/src/data.ts | 35 +++++++- site/src/pages/typeclasses/Alt.js | 4 + site/src/pages/typeclasses/Alternative.js | 4 + site/src/pages/typeclasses/Functor.js | 4 + 7 files changed, 153 insertions(+), 4 deletions(-) create mode 100644 site/src/components/TypeclassContent.js create mode 100644 site/src/pages/typeclasses/Alt.js create mode 100644 site/src/pages/typeclasses/Alternative.js create mode 100644 site/src/pages/typeclasses/Functor.js diff --git a/site/src/components/Sidebar.js b/site/src/components/Sidebar.js index 83c5991a..90a8f8c4 100644 --- a/site/src/components/Sidebar.js +++ b/site/src/components/Sidebar.js @@ -69,7 +69,7 @@ class Sidebar extends React.Component { ))} {data.typeclasses.map(typeclass => (
- +
))} diff --git a/site/src/components/SidebarLink.js b/site/src/components/SidebarLink.js index 2b47e3cb..b620e7f8 100644 --- a/site/src/components/SidebarLink.js +++ b/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 }) => diff --git a/site/src/components/TypeclassContent.js b/site/src/components/TypeclassContent.js new file mode 100644 index 00000000..80cdc461 --- /dev/null +++ b/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 => () => + + {typeclass.name} + + {typeclass.implementedBy.map(adt => + {adt} + )} + + {typeclass.description} + + + How to import + {typeclass.example.import} + + + {typeclass.methods.length > 0 && + Methods to implement + } + {typeclass.methods.map(DataTypeMethod)} + + +export default TypeclassContent \ No newline at end of file diff --git a/site/src/data.ts b/site/src/data.ts index 686f4a4c..7b49f8a3 100644 --- a/site/src/data.ts +++ b/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): Alt', + // 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'}, diff --git a/site/src/pages/typeclasses/Alt.js b/site/src/pages/typeclasses/Alt.js new file mode 100644 index 00000000..f36b6aba --- /dev/null +++ b/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')) \ No newline at end of file diff --git a/site/src/pages/typeclasses/Alternative.js b/site/src/pages/typeclasses/Alternative.js new file mode 100644 index 00000000..91848348 --- /dev/null +++ b/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')) \ No newline at end of file diff --git a/site/src/pages/typeclasses/Functor.js b/site/src/pages/typeclasses/Functor.js new file mode 100644 index 00000000..d133b0df --- /dev/null +++ b/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')) \ No newline at end of file