diff --git a/src/components/DocContent.jsx b/src/components/DocContent.jsx
index e639bc02..32dc08ae 100644
--- a/src/components/DocContent.jsx
+++ b/src/components/DocContent.jsx
@@ -1,7 +1,7 @@
import React from 'react'
import PropTypes from 'prop-types'
import RehypeReact from 'rehype-react'
-import Repository from './Repositories/Repository'
+import Repository from './Repository'
import styles from './DocContent.module.scss'
const renderAst = new RehypeReact({
diff --git a/src/components/DocFooter.jsx b/src/components/DocFooter.jsx
index 1c9a321a..893881a9 100644
--- a/src/components/DocFooter.jsx
+++ b/src/components/DocFooter.jsx
@@ -4,7 +4,7 @@ import { ReactComponent as Pencil } from '../images/pencil.svg'
import styles from './DocFooter.module.scss'
import { social, githubContentPath, githubDevOceanPath } from '../../config'
-const DocFooter = ({ post, url, externalName }) => {
+export default function DocFooter({ post, url, externalName }) {
let path
if (post) {
@@ -42,5 +42,3 @@ DocFooter.propTypes = {
url: PropTypes.string,
externalName: PropTypes.string
}
-
-export default DocFooter
diff --git a/src/components/QuickRun.jsx b/src/components/QuickRun.jsx
index ffc18015..a874cef7 100644
--- a/src/components/QuickRun.jsx
+++ b/src/components/QuickRun.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import { Link, StaticQuery, graphql } from 'gatsby'
-import Repository from './Repositories/Repository'
+import Repository from './Repository'
import styles from './QuickRun.module.scss'
const QuickRun = () => (
diff --git a/src/components/Repositories/Repository.module.scss b/src/components/Repositories/Repository.module.scss
deleted file mode 100644
index b2966208..00000000
--- a/src/components/Repositories/Repository.module.scss
+++ /dev/null
@@ -1,162 +0,0 @@
-@import 'variables';
-
-.repository {
- padding: $spacer / $line-height;
- border: 1px solid $brand-grey-lighter;
- background: $brand-white;
- border-radius: $border-radius;
- font-size: $font-size-small;
- text-align: left;
- width: 100%;
- margin-bottom: $spacer;
- display: flex;
- flex-wrap: wrap;
-
- p {
- align-self: flex-start;
- }
-}
-
-.repositoryName {
- font-size: $font-size-h4;
- margin-top: 0;
- margin-bottom: $spacer / 2;
- border: 0;
- padding: 0;
- width: 100%;
- position: relative;
-
- a:first-of-type {
- color: $brand-black;
-
- &:hover,
- &:focus {
- color: $brand-pink;
- }
- }
-
- svg {
- width: 1em;
- height: 1em;
- display: inline-block;
- fill: $brand-grey-light;
- margin-right: $spacer / 8;
- margin-left: -.2rem;
- margin-bottom: -.2rem;
- }
-}
-
-.forkLine {
- display: inline;
- margin-left: $spacer / 4;
- font-size: $font-size-mini;
- font-family: $font-family-monospace;
- font-weight: $font-weight-base;
- color: $brand-grey-light;
-}
-
-.repositoryRelease {
- font-family: $font-family-base;
- font-weight: $font-weight-base;
- font-size: $font-size-small;
- color: $brand-grey-light;
- display: inline-block;
- margin-left: $spacer / 4;
-
- &:hover,
- &:focus {
- transform: none;
- }
-}
-
-.repositoryMeta {
- display: flex;
- align-items: flex-end;
- align-self: flex-end;
- width: 100%;
-}
-
-.repositoryLinks {
- margin: 0;
- padding: 0;
- margin-left: -($spacer / $line-height);
- width: 80%;
-
- li {
- display: inline-block;
- padding: 0;
- margin-left: $spacer / $line-height;
-
- &:before {
- display: none;
- }
- }
-
- a {
- font-family: $font-family-button;
- font-weight: $font-weight-bold;
- }
-}
-
-.repositorynumbers {
- font-size: $font-size-small;
- margin-left: -($spacer / 4);
- flex: 1;
- text-align: right;
- width: 20%;
-
- a {
- color: $brand-grey-light;
- margin-left: $spacer / 4;
- display: inline-block;
-
- &:hover,
- &:focus {
- color: $brand-pink;
- transform: none;
-
- svg {
- fill: $brand-pink;
- }
- }
-
- span {
- margin-left: -.15rem;
- }
- }
-
- svg {
- display: inline-block;
- fill: $brand-grey-light;
- margin-bottom: -.1rem;
- }
-}
-
-.repositoryReadme {
- margin-top: $spacer / $line-height;
- padding: $spacer / 2;
- background: darken($brand-white, 2%);
-
- h1,
- h2 {
- font-size: $font-size-large;
- }
-
- h3,
- h4 {
- font-size: $font-size-base;
- }
-
- img {
- display: inline-block;
- }
-}
-
-.repositoryReadmeTitle {
- font-size: $font-size-small !important; // stylelint-disable-line
- font-family: $font-family-monospace;
- font-weight: $font-weight-base;
- margin: 0;
- color: $brand-grey-light;
- margin-bottom: $spacer / 2;
-}
diff --git a/src/components/Repositories/RepositoryList.jsx b/src/components/Repositories/RepositoryList.jsx
index 06e83f00..5d392af2 100644
--- a/src/components/Repositories/RepositoryList.jsx
+++ b/src/components/Repositories/RepositoryList.jsx
@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
-import Repository from './Repository'
+import Repository from '../Repository'
import styles from './RepositoryList.module.scss'
const RepositoryList = ({ repositories }) => (
diff --git a/src/components/Repository/Links.jsx b/src/components/Repository/Links.jsx
new file mode 100644
index 00000000..74df2146
--- /dev/null
+++ b/src/components/Repository/Links.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Links.module.scss'
+
+export default function Links({ links, url }) {
+ return (
+
+ )
+}
+
+Links.propTypes = {
+ links: PropTypes.array,
+ url: PropTypes.string.isRequired
+}
diff --git a/src/components/Repository/Links.module.scss b/src/components/Repository/Links.module.scss
new file mode 100644
index 00000000..93674faa
--- /dev/null
+++ b/src/components/Repository/Links.module.scss
@@ -0,0 +1,23 @@
+@import 'variables';
+
+.links {
+ margin: 0;
+ padding: 0;
+ margin-left: -($spacer / $line-height);
+ width: 80%;
+
+ li {
+ display: inline-block;
+ padding: 0;
+ margin-left: $spacer / $line-height;
+
+ &:before {
+ display: none;
+ }
+ }
+
+ a {
+ font-family: $font-family-button;
+ font-weight: $font-weight-bold;
+ }
+}
diff --git a/src/components/Repository/Numbers.jsx b/src/components/Repository/Numbers.jsx
new file mode 100644
index 00000000..60cea958
--- /dev/null
+++ b/src/components/Repository/Numbers.jsx
@@ -0,0 +1,88 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import axios from 'axios'
+import { ReactComponent as Star } from '../../images/star.svg'
+import { ReactComponent as Forks } from '../../images/forks.svg'
+import styles from './Numbers.module.scss'
+
+export default class Numbers extends PureComponent {
+ static propTypes = {
+ stargazers: PropTypes.object.isRequired,
+ forkCount: PropTypes.number.isRequired,
+ url: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired
+ }
+
+ state = {
+ forks: this.props.forkCount,
+ stars: this.props.stargazers.totalCount
+ }
+
+ url = 'https://oceanprotocol-github.now.sh'
+
+ signal = axios.CancelToken.source()
+
+ componentDidMount() {
+ this.fetchNumbers()
+ }
+
+ componentWillUnmount() {
+ this.signal.cancel()
+ }
+
+ fetchNumbers = async () => {
+ try {
+ const response = await axios({
+ method: 'get',
+ url: this.url,
+ timeout: 10000, // 10 sec.
+ headers: {
+ 'Content-Type': 'application/json'
+ }
+ })
+
+ const repo = response.data
+ .map(item => {
+ if (item.name === this.props.name) {
+ return item
+ }
+ })
+ .filter(n => n)
+
+ const { forks, stars } = repo
+
+ // update state only when numbers have changed
+ if (forks && forks !== this.props.forkCount) {
+ this.setState({ forks })
+ }
+
+ if (stars && stars !== this.props.stargazers.totalCount) {
+ this.setState({ stars })
+ }
+ } catch (error) {
+ if (axios.isCancel(error)) {
+ return null
+ } else {
+ console.log(error.message) // eslint-disable-line no-console
+ }
+ }
+ }
+
+ render() {
+ const { url } = this.props
+ const { forks, stars } = this.state
+
+ return (
+
+ )
+ }
+}
diff --git a/src/components/Repository/Numbers.module.scss b/src/components/Repository/Numbers.module.scss
new file mode 100644
index 00000000..48bf096e
--- /dev/null
+++ b/src/components/Repository/Numbers.module.scss
@@ -0,0 +1,35 @@
+@import 'variables';
+
+.repositorynumbers {
+ font-size: $font-size-small;
+ margin-left: -($spacer / 4);
+ flex: 1;
+ text-align: right;
+ width: 20%;
+
+ a {
+ color: $brand-grey-light;
+ margin-left: $spacer / 4;
+ display: inline-block;
+
+ &:hover,
+ &:focus {
+ color: $brand-pink;
+ transform: none;
+
+ svg {
+ fill: $brand-pink;
+ }
+ }
+
+ span {
+ margin-left: -.15rem;
+ }
+ }
+
+ svg {
+ display: inline-block;
+ fill: $brand-grey-light;
+ margin-bottom: -.1rem;
+ }
+}
diff --git a/src/components/Repository/Readme.jsx b/src/components/Repository/Readme.jsx
new file mode 100644
index 00000000..d7395a5d
--- /dev/null
+++ b/src/components/Repository/Readme.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import remark from 'remark'
+import remarkReact from 'remark-react'
+import styles from './Readme.module.scss'
+
+export default function Readme({ object }) {
+ const readmeHtml =
+ object &&
+ remark()
+ .use(remarkReact)
+ .processSync(object.text).contents
+
+ return (
+ object && (
+
+ )
+ )
+}
diff --git a/src/components/Repository/Readme.module.scss b/src/components/Repository/Readme.module.scss
new file mode 100644
index 00000000..86a1a47b
--- /dev/null
+++ b/src/components/Repository/Readme.module.scss
@@ -0,0 +1,30 @@
+@import 'variables';
+
+.readme {
+ margin-top: $spacer / $line-height;
+ padding: $spacer / 2;
+ background: darken($brand-white, 2%);
+
+ h1,
+ h2 {
+ font-size: $font-size-large;
+ }
+
+ h3,
+ h4 {
+ font-size: $font-size-base;
+ }
+
+ img {
+ display: inline-block;
+ }
+}
+
+.title {
+ font-size: $font-size-small !important; // stylelint-disable-line
+ font-family: $font-family-monospace;
+ font-weight: $font-weight-base;
+ margin: 0;
+ color: $brand-grey-light;
+ margin-bottom: $spacer / 2;
+}
diff --git a/src/components/Repository/Title.jsx b/src/components/Repository/Title.jsx
new file mode 100644
index 00000000..c86f9014
--- /dev/null
+++ b/src/components/Repository/Title.jsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Title.module.scss'
+
+import { ReactComponent as Forks } from '../../images/forks.svg'
+
+export default function Title({ name, isFork, parent, releases, url }) {
+ return (
+
+ )
+}
+
+Title.propTypes = {
+ name: PropTypes.string.isRequired,
+ isFork: PropTypes.bool,
+ parent: PropTypes.shape({
+ nameWithOwner: PropTypes.string
+ }),
+ releases: PropTypes.object.isRequired,
+ url: PropTypes.string.isRequired
+}
diff --git a/src/components/Repository/Title.module.scss b/src/components/Repository/Title.module.scss
new file mode 100644
index 00000000..f4d6dabd
--- /dev/null
+++ b/src/components/Repository/Title.module.scss
@@ -0,0 +1,53 @@
+@import 'variables';
+
+.title {
+ font-size: $font-size-h4;
+ margin-top: 0;
+ margin-bottom: $spacer / 2;
+ border: 0;
+ padding: 0;
+ width: 100%;
+ position: relative;
+
+ a:first-of-type {
+ color: $brand-black;
+
+ &:hover,
+ &:focus {
+ color: $brand-pink;
+ }
+ }
+
+ svg {
+ width: 1em;
+ height: 1em;
+ display: inline-block;
+ fill: $brand-grey-light;
+ margin-right: $spacer / 8;
+ margin-left: -.2rem;
+ margin-bottom: -.2rem;
+ }
+}
+
+.repositoryRelease {
+ font-family: $font-family-base;
+ font-weight: $font-weight-base;
+ font-size: $font-size-small;
+ color: $brand-grey-light;
+ display: inline-block;
+ margin-left: $spacer / 4;
+
+ &:hover,
+ &:focus {
+ transform: none;
+ }
+}
+
+.forkLine {
+ display: inline;
+ margin-left: $spacer / 4;
+ font-size: $font-size-mini;
+ font-family: $font-family-monospace;
+ font-weight: $font-weight-base;
+ color: $brand-grey-light;
+}
diff --git a/src/components/Repositories/Repository.jsx b/src/components/Repository/index.jsx
similarity index 52%
rename from src/components/Repositories/Repository.jsx
rename to src/components/Repository/index.jsx
index feeabfae..9ddc489c 100644
--- a/src/components/Repositories/Repository.jsx
+++ b/src/components/Repository/index.jsx
@@ -1,12 +1,11 @@
-import React, { PureComponent } from 'react'
+import React from 'react'
import PropTypes from 'prop-types'
import { StaticQuery, graphql } from 'gatsby'
-import remark from 'remark'
-import remarkReact from 'remark-react'
-import axios from 'axios'
-import { ReactComponent as Star } from '../../images/star.svg'
-import { ReactComponent as Forks } from '../../images/forks.svg'
-import styles from './Repository.module.scss'
+import Numbers from './Numbers'
+import Readme from './Readme'
+import styles from './index.module.scss'
+import Title from './Title'
+import Links from './Links'
const queryGithub = graphql`
query GitHubReposInfo {
@@ -66,155 +65,6 @@ const queryGithub = graphql`
}
`
-const Title = ({ name, isFork, parent, releases, url }) => (
-
-)
-
-Title.propTypes = {
- name: PropTypes.string.isRequired,
- isFork: PropTypes.bool,
- parent: PropTypes.shape({
- nameWithOwner: PropTypes.string
- }),
- releases: PropTypes.object.isRequired,
- url: PropTypes.string.isRequired
-}
-
-const Links = ({ links, url }) => (
-
-)
-
-Links.propTypes = {
- links: PropTypes.array,
- url: PropTypes.string.isRequired
-}
-
-class Numbers extends PureComponent {
- static propTypes = {
- stargazers: PropTypes.object.isRequired,
- forkCount: PropTypes.number.isRequired,
- url: PropTypes.string.isRequired,
- name: PropTypes.string.isRequired
- }
-
- state = {
- forks: this.props.forkCount,
- stars: this.props.stargazers.totalCount
- }
-
- url = 'https://oceanprotocol-github.now.sh'
-
- signal = axios.CancelToken.source()
-
- componentDidMount() {
- this.fetchNumbers()
- }
-
- componentWillUnmount() {
- this.signal.cancel()
- }
-
- fetchNumbers = async () => {
- try {
- const response = await axios({
- method: 'get',
- url: this.url,
- timeout: 10000, // 10 sec.
- headers: {
- 'Content-Type': 'application/json'
- }
- })
-
- const repo = response.data
- .map(item => {
- if (item.name === this.props.name) {
- return item
- }
- })
- .filter(n => n)
-
- const { forks, stars } = repo
-
- // update state only when numbers have changed
- if (forks && forks !== this.props.forkCount) {
- this.setState({ forks })
- }
-
- if (stars && stars !== this.props.stargazers.totalCount) {
- this.setState({ stars })
- }
- } catch (error) {
- if (axios.isCancel(error)) {
- return null
- } else {
- console.log(error.message) // eslint-disable-line no-console
- }
- }
- }
-
- render() {
- const { url } = this.props
- const { forks, stars } = this.state
-
- return (
-
- )
- }
-}
-
-const Readme = ({ object }) => {
- const readmeHtml =
- object &&
- remark()
- .use(remarkReact)
- .processSync(object.text).contents
-
- return (
- object && (
-
- )
- )
-}
-
const Repository = ({ name, links, readme }) => (