Fix tsapibox issues and tweak the styles

apollographql · Mar 14, 2019 · 5aea35c · 5aea35c
1 parent 846d581
commit 5aea35c
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 27 deletions.
diff --git a/packages/gatsby-theme-apollo-docs/gatsby-node.js b/packages/gatsby-theme-apollo-docs/gatsby-node.js
@@ -42,7 +42,15 @@ const tagPattern = new RegExp(`^v?${semverSegment}$`);
 
 exports.createPages = async (
   {actions},
-  {contentDir, root, githubRepo, sidebarCategories, versions: versionKeys, docs}
+  {
+    contentDir,
+    root,
+    githubRepo,
+    sidebarCategories,
+    versions: versionKeys,
+    docs,
+    typescriptApiBox
+  }
 ) => {
   const git = simpleGit(root);
   const remotes = await git.getRemotes();
@@ -208,6 +216,7 @@ exports.createPages = async (
             version,
             filePath,
             docs,
+            typescriptApiBox,
             // use `array` here instead of `versions` because we're filtering
             // before the loop starts
             versions: array

diff --git a/packages/gatsby-theme-apollo-docs/src/components/page-content.js b/packages/gatsby-theme-apollo-docs/src/components/page-content.js
@@ -82,8 +82,9 @@ const InnerContainer = styled.div(codeBlockStyles, documentationButtons, {
   },
   'a[href]': {
     color: colors.primary,
+    textDecoration: 'none',
     ':hover': {
-      textDecoration: 'none'
+      textDecoration: 'underline'
     }
   },
   [['h2', 'h3', 'h4']]: {

diff --git a/packages/gatsby-theme-apollo-docs/src/styles/api.less b/packages/gatsby-theme-apollo-docs/src/styles/api.less
@@ -40,7 +40,7 @@
 .term-code() {
   .type-code;
   .font-code;
-  color: @color-complementary;
+  color: #747790;
 
   .type {
     .font-s1;
@@ -50,33 +50,23 @@
     margin-left: 10px;
   }
 
-  a { &:extend(.link.primary); }
+  a {
+    &:extend(.link.primary);
+  }
 }
 
-@color-lightest: #fff;
-@color-lighter: #f8f8f8;
-@color-mediumlight: #EEE;
-@color-mediumdark: #999;
-@color-complementary: #22A699; // sea green
 @color-dark: #666;
 
 .api {
   .font-s3;
-  background: @color-lightest;
-  border: 1px solid @color-mediumlight;
+  border: 1px solid #d8d9e0;
+  border-radius: 4px;
   margin: 1.5em 0;
+  overflow: hidden;
 
   .api-heading {
-    background: @color-lighter;
-    padding: 1rem 1.25rem 1.25rem;
-
-    .locus {
-      .font-s2;
-      .type-italic;
-      color: @color-dark;
-      float: right;
-      line-height: 24px;
-    }
+    background: #f7f8fa;
+    padding: 1.25rem;
 
     .title-api {
       .type-code;
@@ -95,6 +85,7 @@
 
     .subtext-api {
       .font-s2;
+      margin-top: 0.5em;
 
       .code {
         .font-code;
@@ -114,9 +105,9 @@
     padding: 1.25rem 1.25rem;
 
     .subheading {
-      .font-s1;
+      .font-s2;
       .subheading-caps;
-      color: @color-mediumdark;
+      color: #343c5a;
       margin: 0.5rem 0 0.5rem;
     }
 
@@ -139,10 +130,22 @@
 
       dt {
         .term-code;
+        margin-bottom: 0.5em;
+        &:not(:first-child) {
+          margin-top: 1em;
+        }
+
+        .type {
+          font-style: italic;
+          margin-left: 10px;
+        }
       }
 
       dd {
-        margin-left: 0;
+        margin: 0;
+        p {
+          font-size: 14px;
+        }
       }
     }
   }

diff --git a/packages/gatsby-theme-apollo-docs/src/util/remark-tsapibox.js b/packages/gatsby-theme-apollo-docs/src/util/remark-tsapibox.js
@@ -9,6 +9,7 @@ import visit from 'unist-util-visit';
 
 const converter = new showdown.Converter();
 
+// TODO: replace this with a better long-term solution maybe using TSDOC
 // this code is ported from hexo-typescript-api-box
 // https://github.com/apollographql/hexo-typescript-api-box/blob/master/typescript-api-box.js
 
@@ -22,7 +23,7 @@ function _link(id, name) {
 
 const template = handlebars.compile(html);
 const pattern = /\{% tsapibox (\S+) %\}/;
-export default function attacher({docs}) {
+export default function attacher({docs, typescriptApiBox}) {
   const dataByKey = {};
   function traverse(tree, parentName) {
     let name = tree.name;
@@ -45,6 +46,11 @@ export default function attacher({docs}) {
     traverse(docs);
   }
 
+  let filepathPrefix = '';
+  if (typescriptApiBox) {
+    filepathPrefix = typescriptApiBox.filepathPrefix;
+  }
+
   function templateArgs(rawData) {
     const parameters = _parameters(rawData);
     const split = partition(parameters, 'isOptions');
@@ -92,7 +98,7 @@ export default function attacher({docs}) {
       summary: _summary(rawData),
       groups,
       repo: 'apollostack/apollo-client',
-      filepath: rawData.sources[0].fileName,
+      filepath: filepathPrefix + rawData.sources[0].fileName,
       lineno: rawData.sources[0].line
     };
   }

diff --git a/packages/gatsby-theme-apollo/src/util/code-block-styles.js b/packages/gatsby-theme-apollo/src/util/code-block-styles.js
@@ -48,7 +48,7 @@ const codeHighlighting = {
 export default {
   [['pre', 'code']]: {
     fontFamily: "'Source Code Pro', monospace",
-    fontSize: 16
+    fontSize: 'inherit'
   },
   '*:not(pre) > code': {
     padding: '1px 5px',