more parameter styling

src/templates/Javadoc/Entities.jsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import slugify from 'slugify'
+import { cleanPaths } from './utils'
+import stylesDoc from '../Doc.module.scss'
+import styles from './Entities.module.scss'
+
+const filterPropertyItems = (item, name) => {
+    let title
+    switch (name) {
+        case '@param':
+            title = 'Parameters'
+            break
+        case '@return':
+            title = 'Returns'
+            break
+        case '@throws':
+            title = 'Throws'
+            break
+    }
+
+    return (
+        <>
+            {item.filter(item => item.name === name).length > 0 && (
+                <h4 className={styles.subHeading}>{title}</h4>
+            )}
+            {item
+                .filter(item => item.name === name)
+                .map((item, index) => {
+                    if (item.name === '@param') {
+                        const splitText = item.text.split(' ')
+
+                        return (
+                            <div key={index} className={styles.parameter}>
+                                <code className={styles.param}>
+                                    {splitText[0]}
+                                </code>
+                                <code className={styles.parameterType}>
+                                    {splitText[2]}
+                                </code>
+                                <p>{splitText[1]}</p>
+                            </div>
+                        )
+                    }
+
+                    return <div key={index}>{item.text}</div>
+                })}
+        </>
+    )
+}
+
+const Entities = ({ javadoc }) => {
+    return Object.entries(javadoc).map(([key, value]) => (
+        <div
+            key={key}
+            id={slugify(cleanPaths(key), {
+                remove: /[*+~.()'"/!:@]/g
+            })}
+        >
+            <h2 className={stylesDoc.pathName}>
+                <code>{cleanPaths(key)}</code>
+            </h2>
+
+            <p>{value[0][0].text}</p>
+
+            {value.map((item, index) => {
+                if (index === 0) return
+
+                return (
+                    <div key={index} className={styles.property}>
+                        <h3 className={styles.propertyName}>Function Name</h3>
+
+                        <p>{item[0].text}</p>
+
+                        {filterPropertyItems(item, '@param')}
+                        {filterPropertyItems(item, '@return')}
+                        {filterPropertyItems(item, '@throws')}
+                    </div>
+                )
+            })}
+        </div>
+    ))
+}
+
+export default Entities

src/templates/Javadoc/Entities.module.scss

@@ -0,0 +1,48 @@
+@import 'variables';
+
+.property {
+    padding: $spacer / 2;
+    border: 1px solid $brand-grey-lighter;
+    margin-bottom: $spacer;
+    border-radius: $border-radius;
+
+    > p {
+        margin-bottom: $spacer;
+    }
+}
+
+.subHeading {
+    font-size: $font-size-base;
+    border-bottom: 1px solid $brand-grey-lighter;
+    padding-bottom: $spacer / 4;
+    margin-bottom: $spacer / $line-height;
+    color: $brand-grey;
+}
+
+.propertyName {
+    font-size: $font-size-large;
+    font-family: $font-family-monospace;
+    margin-bottom: $spacer / 2;
+    margin-top: 0;
+}
+
+.parameter {
+    margin-top: $spacer / 4;
+    margin-bottom: $spacer / 2;
+}
+
+.parameterType {
+    font-size: $font-size-small;
+    color: $brand-grey;
+    background: rgba($brand-blue, .2);
+    display: inline-block;
+    padding: 0 $spacer / 5;
+    border-radius: $border-radius;
+    vertical-align: middle;
+}
+
+.param {
+    display: inline-block;
+    margin-right: $spacer / 4;
+    font-weight: 600;
+}

src/templates/Javadoc/index.jsx

@@ -2,7 +2,6 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
 import Helmet from 'react-helmet'
-import slugify from 'slugify'
 import Layout from '../../components/Layout'
 import Content from '../../components/Content'
 import HeaderSection from '../../components/HeaderSection'
@@ -12,72 +11,8 @@ import SEO from '../../components/Seo'
 import stylesDoc from '../Doc.module.scss'
 import styles from './index.module.scss'
 
+import Entities from './Entities'
 import Toc from './Toc'
-import { cleanPaths } from './utils'
-
-const filterPropertyItems = (item, name) => {
-    let title
-    switch (name) {
-        case '@param':
-            title = 'Parameters'
-            break
-        case '@return':
-            title = 'Returns'
-            break
-        case '@throws':
-            title = 'Throws'
-            break
-    }
-
-    return (
-        <>
-            {item.filter(item => item.name === name).length > 0 && (
-                <h4 className={styles.subHeading}>{title}</h4>
-            )}
-
-            {item
-                .filter(item => item.name === name)
-                .map((item, index) => (
-                    <div key={index}>
-                        <code>{item.text}</code>
-                    </div>
-                ))}
-        </>
-    )
-}
-
-const Entities = ({ javadoc }) => {
-    return Object.entries(javadoc).map(([key, value]) => (
-        <div
-            key={key}
-            id={slugify(cleanPaths(key), {
-                remove: /[*+~.()'"/!:@]/g
-            })}
-        >
-            <h2 className={stylesDoc.pathName}>
-                <code>{cleanPaths(key)}</code>
-            </h2>
-
-            <p>{value[0][0].text}</p>
-
-            {value.map((item, index) => {
-                if (index === 0) return
-
-                return (
-                    <div key={index} className={styles.property}>
-                        <h3 className={styles.propertyName}>Function Name</h3>
-
-                        <p>{item[0].text}</p>
-
-                        {filterPropertyItems(item, '@param')}
-                        {filterPropertyItems(item, '@return')}
-                        {filterPropertyItems(item, '@throws')}
-                    </div>
-                )
-            })}
-        </div>
-    ))
-}
 
 export default class JavadocTemplate extends Component {
     static propTypes = {

src/templates/Javadoc/index.module.scss

@@ -1,31 +1,5 @@
 @import 'variables';
 
-.property {
-    padding: $spacer / 2;
-    border: 1px solid $brand-grey-lighter;
-    margin-bottom: $spacer;
-    border-radius: $border-radius;
-
-    > p {
-        margin-bottom: $spacer;
-    }
-}
-
-.subHeading {
-    font-size: $font-size-base;
-    border-bottom: 1px solid $brand-grey-lighter;
-    padding-bottom: $spacer / 4;
-    margin-bottom: $spacer / 4;
-    color: $brand-grey;
-}
-
-.propertyName {
-    font-size: $font-size-large;
-    font-family: $font-family-monospace;
-    margin-bottom: $spacer / 2;
-    margin-top: 0;
-}
-
 .namespace {
     font-size: $font-size-base;
     font-family: $font-family-monospace;