Optimize packaged gem & use nice system fonts (#174)

Reduces the gem size by about an order of magitude by ignoring various
unneeded files. Includes removal of the font files and unnecessary image
files.

Author: brettchalupa

graphql-docs.gemspec

@@ -30,7 +30,9 @@ Gem::Specification.new do |spec|
   }
 
   spec.files = `git ls-files -z`.split("\x0").reject do |f|
-    f.match(%r{^(test|spec|features)/})
+    f.match(%r{^(test|spec|features|\.github)/}) ||
+      f.match(%r{^(Gemfile|Rakefile|CODE_OF_CONDUCT\.md|CONTRIBUTING\.md|\.gitignore|\.rubocop\.yml|\.standard\.yml|config\.ru)$}) ||
+      f.match(%r{/webfonts/}) # Exclude webfonts directory - using system fonts
   end
   spec.bindir = "exe"
   spec.executables = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }

lib/graphql-docs/generator.rb

@@ -128,7 +128,6 @@ def generate
         File.write(File.join(@options[:output_dir], "assets", "style.css"), css)
 
         FileUtils.cp_r(File.join(assets_dir, "images"), File.join(@options[:output_dir], "assets"))
-        FileUtils.cp_r(File.join(assets_dir, "webfonts"), File.join(@options[:output_dir], "assets"))
       end
 
       true

lib/graphql-docs/layouts/assets/_sass/_content.scss

@@ -7,7 +7,7 @@
     font-style: italic;
   }
   strong {
-    font-family: 'ProximaNova-Bold';
+    font-weight: 700;
   }
   h1 {
     margin: 15px 0;
@@ -188,7 +188,7 @@
   .highlight.html {
     .code {
       &:after {
-        font-family: 'ProximaNova-Semibold';
+        font-weight: 600;
         position: absolute;
         top: 0;
         right: 0;
@@ -206,7 +206,7 @@
   .highlight.js {
     .code {
       &:after {
-        font-family: 'ProximaNova-Semibold';
+        font-weight: 600;
         position: absolute;
         top: 0;
         right: 0;
@@ -224,7 +224,7 @@
   .highlight.bash {
     .code {
       &:after {
-        font-family: 'ProximaNova-Semibold';
+        font-weight: 600;
         position: absolute;
         top: 0;
         right: 0;
@@ -242,7 +242,7 @@
   .highlight.css {
     .code {
       &:after {
-        font-family: 'ProximaNova-Semibold';
+        font-weight: 600;
         position: absolute;
         top: 0;
         right: 0;
@@ -260,7 +260,7 @@
   .highlight.jsx {
     .code {
       &:after {
-        font-family: 'ProximaNova-Semibold';
+        font-weight: 600;
         position: absolute;
         top: 0;
         right: 0;
@@ -460,7 +460,7 @@
       }
     }
     th {
-      font-family: 'ProximaNova-Semibold';
+      font-weight: 600;
       padding: 12px 13px;
       border: 1px solid var(--border-color);
       vertical-align: middle;
@@ -481,15 +481,15 @@
     border-bottom: 1px solid var(--border-color);
     padding-bottom: 25px;
     a {
-      font-family: 'ProximaNova-Semibold';
+      font-weight: 600;
       margin: 0 5px;
     }
   }
   .edit-link {
     text-align: center;
     a {
       color: #aaa;
-      font-family: 'ProximaNova-Semibold';
+      font-weight: 600;
       &:before {
         content: '';
         display: inline-block;

lib/graphql-docs/layouts/assets/_sass/_fonts.scss

@@ -1,21 +1,6 @@
-@import "//hello.myfonts.net/count/2c4b9d";
-@font-face {
-  font-family: 'ProximaNova-Light';
-  src: url("webfonts/2C4B9D_B_0.eot");
-  src: url("webfonts/2C4B9D_B_0.eot?#iefix") format('embedded-opentype'), url("webfonts/2C4B9D_B_0.woff2") format('woff2'), url("webfonts/2C4B9D_B_0.woff") format('woff'), url("webfonts/2C4B9D_B_0.ttf") format('truetype');
-}
-@font-face {
-  font-family: 'ProximaNova-Semibold';
-  src: url("webfonts/2C4B9D_C_0.eot");
-  src: url("webfonts/2C4B9D_C_0.eot?#iefix") format('embedded-opentype'), url("webfonts/2C4B9D_C_0.woff2") format('woff2'), url("webfonts/2C4B9D_C_0.woff") format('woff'), url("webfonts/2C4B9D_C_0.ttf") format('truetype');
-}
-@font-face {
-  font-family: 'ProximaNova-Regular';
-  src: url("webfonts/2C4B9D_D_0.eot");
-  src: url("webfonts/2C4B9D_D_0.eot?#iefix") format('embedded-opentype'), url("webfonts/2C4B9D_D_0.woff2") format('woff2'), url("webfonts/2C4B9D_D_0.woff") format('woff'), url("webfonts/2C4B9D_D_0.ttf") format('truetype');
-}
-@font-face {
-  font-family: 'ProximaNova-Bold';
-  src: url("webfonts/2C4B9D_E_0.eot");
-  src: url("webfonts/2C4B9D_E_0.eot?#iefix") format('embedded-opentype'), url("webfonts/2C4B9D_E_0.woff2") format('woff2'), url("webfonts/2C4B9D_E_0.woff") format('woff'), url("webfonts/2C4B9D_E_0.ttf") format('truetype');
-}
+// Modern system font stack - no webfonts needed!
+$font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+$font-stack-light: $font-stack;
+$font-stack-regular: $font-stack;
+$font-stack-semibold: $font-stack;
+$font-stack-bold: $font-stack;

lib/graphql-docs/layouts/assets/_sass/_search.scss

@@ -20,7 +20,7 @@
     background-color: var(--bg-primary);
     color: var(--text-primary);
     outline: none;
-    font-family: 'ProximaNova-Regular';
+    font-family: inherit;
     font-size: 14px;
     padding: 7px 12px 6px 32px;
     border-radius: 20px;
@@ -42,7 +42,7 @@
   background-color: var(--bg-primary);
   color: var(--text-primary);
   outline: none;
-  font-family: 'ProximaNova-Regular';
+  font-family: inherit;
   font-size: 14px;
   padding: 7px 12px 6px 32px;
   border-radius: 20px;

lib/graphql-docs/layouts/assets/_sass/_sidebar.scss

@@ -11,7 +11,7 @@
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: none;
-  font-family: 'ProximaNova-Semibold';
+  font-weight: 600;
   border-right: 1px solid var(--border-color);
   font-size: 16px;
   line-height: 1.1em;
@@ -48,7 +48,7 @@
     }
   }
   .sub-menu {
-    font-family: 'ProximaNova-Regular';
+    font-weight: 400;
     padding-left: 20px;
     margin: 0.6em 0;
     font-size: 14px;
@@ -95,7 +95,7 @@
       color: var(--text-primary);
       border: none;
       font-size: 14px;
-      font-family: 'ProximaNova-Semibold';
+      font-weight: 600;
     }
 
     input:focus {

lib/graphql-docs/layouts/assets/css/screen.scss

@@ -39,7 +39,7 @@
 }
 
 body {
-  font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 16px;
@@ -53,8 +53,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'ProximaNova-Semibold';
-  font-weight: 200;
+  font-weight: 600;
 }
 em {
   font-style: italic;
@@ -72,7 +71,7 @@ em {
   left: 0;
   width: 100%;
   height: 100px;
-  font-family: 'ProximaNova-Semibold';
+  font-weight: 600;
 }
 
 @include meta.load-css('../_sass/_header');