Merge pull request #592 from stephenplusplus/spp--docs-external-link-icon

site: add external link - fixes #552

Author: stephenplusplus

docs/index.html

@@ -12,6 +12,7 @@
     <link rel="shortcut icon" href="https://cloud.google.com/images/gcp-favicon.ico">
     <link rel="stylesheet" href="site/css/normalize.css">
     <link rel="stylesheet" href="site/css/main.css">
+    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
     <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Droid+Sans+Mono|Roboto:300,400,700,700italic,400italic|Open+Sans:300">
     <link rel="stylesheet" href="site/lib/highlight/github.min.css">
   </head>

docs/site/components/docs/docs.html

@@ -3,7 +3,7 @@
     <div class="row row--right">
       <div class="col margin-vertical">
         <a href="https://github.com/GoogleCloudPlatform/gcloud-node/issues/new"
-          class="v-btn">
+          class="v-btn skip-external-link">
           <img src="site/img/icon-link-github.svg" />
           Report an Issue
         </a>

docs/site/components/language-switcher/language-switcher.html

@@ -2,19 +2,19 @@
   <div class="nav-current" ng-click="showNavDropdown = !showNavDropdown">Node.js</div>
   <ul class="menu">
     <li>
-      <a href="#" title="gcloud-node Documentation">
+      <a href="#" title="gcloud-node Documentation" class="skip-external-link">
         <img src="site/img/icon-lang-nodejs-white.svg" alt="gcloud-node" class="menu-icon">
         Node.js
       </a>
     </li>
     <li>
-      <a href="https://googlecloudplatform.github.io/gcloud-python" title="gcloud-python Documentation">
+      <a href="https://googlecloudplatform.github.io/gcloud-python" title="gcloud-python Documentation" class="skip-external-link">
         <img src="site/img/icon-lang-python.svg" alt="gcloud-python" class="menu-icon">
         Python
       </a>
     </li>
     <li>
-      <a href="https://googlecloudplatform.github.io/gcloud-ruby" title="gcloud-ruby Documentation">
+      <a href="https://googlecloudplatform.github.io/gcloud-ruby" title="gcloud-ruby Documentation" class="skip-external-link">
         <img src="site/img/icon-lang-ruby.svg" alt="gcloud-ruby" class="menu-icon">
         Ruby
       </a>

docs/site/components/subpage/subpage.html

@@ -54,25 +54,25 @@ <h1 class="logo">
 
     <ul class="external-links">
       <li>
-        <a href="https://github.com/GoogleCloudPlatform/gcloud-node" title="gcloud-node on Github">
+        <a href="https://github.com/GoogleCloudPlatform/gcloud-node" title="gcloud-node on Github" class="skip-external-link">
           <img src="site/img/icon-link-github.svg" alt="GitHub icon" />
           GitHub
         </a>
       </li>
       <li>
-        <a href="https://github.com/GoogleCloudPlatform/gcloud-node/issues" title="gcloud-node issues on Github">
+        <a href="https://github.com/GoogleCloudPlatform/gcloud-node/issues" title="gcloud-node issues on Github" class="skip-external-link">
           <img src="site/img/icon-link-github.svg" alt="GitHub icon" />
           Issues
         </a>
       </li>
       <li>
-        <a href="http://stackoverflow.com/questions/tagged/gcloud-node" title="gcloud-node on StackOverflow">
+        <a href="http://stackoverflow.com/questions/tagged/gcloud-node" title="gcloud-node on StackOverflow" class="skip-external-link">
           <img src="site/img/icon-link-stackoverflow.svg" alt="StackOverflow icon" />
           StackOverflow
         </a>
       </li>
       <li>
-        <a href="http://npmjs.org/package/gcloud" title="gcloud-node on npm">
+        <a href="http://npmjs.org/package/gcloud" title="gcloud-node on npm" class="skip-external-link">
           <img src="site/img/icon-link-package-manager.svg" alt="npm icon" />
           npm
         </a>

docs/site/css/main.css

@@ -23,6 +23,24 @@ html {
     line-height: 1.4;
 }
 
+/*
+  target external links:
+  - that have an href attribute (excludes JavaScript links)
+  - that start with #/ (relative)
+  - that start with / (absolute)
+  - that link to "."
+  - that aren't ".ext-link" -- already styled external links on the site (found in the header and navigation)
+  - that aren't ".skip-external-link" -- a custom class used to indicate "don't style me as an external link" for complete control
+*/
+a[href]:not([href^="#/"]):not([href^="/"]):not([href="."]):not(.ext-link):not(.skip-external-link) {
+    text-decoration: none;
+}
+a[href]:not([href^="#/"]):not([href^="/"]):not([href="."]):not(.ext-link):not(.skip-external-link):after {
+    font: normal normal normal 14px/1 FontAwesome;
+    content: " \f08e";
+    color: #666;
+}
+
 /*
  * Remove text-shadow in selection highlight: h5bp.com/i
  * These selection rule sets have to be separate.