Merge pull request #440 from holochain/feat/external-links-icons

add icon to external links

src/pages/_includes/widgets/navigation.njk

@@ -9,15 +9,15 @@
     </li>
     {% for topLink in mainNavData.links %}
       {% set isCurrentParent = topLink.url == activeParent.url %}
-      <li {% if isCurrentParent %} data-is-current-parent="true" {% endif %} 
+      <li {% if isCurrentParent %} data-is-current-parent="true" {% endif %}
         {% if topLink.url == page.url %} aria-current="page" {% endif %} >
-        <a href="{{ topLink.url }}" {{ 'target=_blank' if topLink.external }}>
+        <a href="{{ topLink.url }}" {% if topLink.external %}target="_blank" rel="noreferrer nofollow noopener external"{% endif %} >
           <span>
             {{ topLink.title }}
           </span>
         </a>
         {% if topLink.hasChildren %}
-        <button class="clear-btn {{ "up-arrow" if isCurrentParent }}" 
+        <button class="clear-btn {{ "up-arrow" if isCurrentParent }}"
             data-children-opener >
           {{ downArrowHead() }}
         </button>
@@ -27,7 +27,7 @@
           <ul class="nav-child-level {% if isCurrentParent %}open{% endif %}">
             {% for childLink in topLink.children %}
             <li {% if childLink.url == page.url %} aria-current="page" {% endif %}>
-              <a href="{{ childLink.url }}" {{ 'target=_blank' if childLink.external }} >
+              <a href="{{ childLink.url }}" {% if childLink.external %}target="_blank" rel="noreferrer nofollow noopener external"{% endif %} >
                 <span>
                   {{ childLink.title }}
                 </span>

src/pages/_includes/widgets/svg-icons.njk

@@ -205,11 +205,4 @@
   <svg width="59" height="52" viewBox="0 0 59 52" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M29.5004 0.00055728C26.6071 0.00055728 24.0053 1.47096 22.1616 3.77387C20.3179 6.07679 19.2002 9.21952 19.2002 12.6759C19.2002 16.482 20.3679 19.7953 22.5261 22.1195C17.7562 22.3446 15.0037 23.7902 13.5993 25.9552C12.0454 28.3515 11.9841 31.3162 11.6464 33.9399C11.6397 34.0492 11.6177 34.1326 11.6209 34.1591C9.52729 35.0154 7.72472 36.1888 6.34629 37.5675C6.29274 37.6223 6.24912 37.6861 6.21756 37.755L0.0376563 51.097C-0.0719178 51.3909 0.0656714 51.7524 0.346171 51.9058C0.626315 52.0591 1.01604 51.9867 1.21818 51.7431C3.50897 48.5449 10.1379 46.031 15.7669 46.031C21.4302 46.031 26.5927 48.4239 28.9421 51.7431C29.1953 52.0856 29.8049 52.0856 30.0581 51.7431C30.7017 50.8337 31.6152 49.975 32.6547 49.2206C32.9877 49.0321 33.0898 48.5459 32.8596 48.2454C32.6295 47.9452 32.1206 47.9011 31.8394 48.1572C31.2348 48.5958 30.6912 49.0811 30.1873 49.5955V37.0449C32.7197 35.3467 36.1229 34.022 39.8002 34.022C44.734 34.022 49.0391 35.8943 51.6019 38.4208L56.2371 48.4485C52.8516 46.0863 47.8065 44.6961 43.2335 44.6961C41.2994 44.6961 39.3242 44.9036 37.5468 45.384C37.1986 45.4822 36.9734 45.8795 37.0745 46.2179C37.1755 46.5563 37.5848 46.7748 37.933 46.6765C39.5568 46.2375 41.403 46.0304 43.2331 46.0304C48.8623 46.0304 55.4914 48.5443 57.7819 51.7425C57.9836 51.9858 58.3734 52.0585 58.6539 51.9051C58.934 51.7518 59.072 51.3903 58.9624 51.0964L52.7825 37.7544C52.7509 37.6855 52.7073 37.6217 52.6538 37.5669C51.275 36.1871 49.4682 35.0211 47.3731 34.1647C47.3735 34.1448 47.3664 34.0486 47.3533 33.9394C47.0157 31.3156 46.9547 28.351 45.4004 25.9547C43.9961 23.7895 41.2435 22.3439 36.4736 22.119C38.6317 19.7943 39.7996 16.481 39.7996 12.6753C39.7996 9.21897 38.6819 6.07623 36.8382 3.77332C34.9945 1.47041 32.3927 0 29.4993 0L29.5004 0.00055728ZM29.5004 1.33484C31.9164 1.33484 34.1306 2.54368 35.7662 4.58715C37.4021 6.63026 38.4269 9.50005 38.4269 12.6759C38.4269 16.791 37.0421 20.1902 34.5644 22.161C34.1232 22.5035 34.4286 23.3495 34.9935 23.3492C40.5312 23.2882 42.9635 24.6927 44.2424 26.6639C45.4449 28.5182 45.6097 31.0727 45.9162 33.6269C44.0406 33.0345 41.9754 32.6888 39.8005 32.6888C35.8288 32.6888 32.2234 34.0948 29.5003 35.8995C26.7772 34.0948 23.1718 32.6888 19.2002 32.6888C17.0253 32.6888 14.9604 33.0348 13.0845 33.6269C13.3909 31.0727 13.5558 28.5182 14.7583 26.6639C16.0367 24.6924 18.4694 23.2881 24.0072 23.3492C24.5721 23.3495 24.8774 22.5035 24.4363 22.161C21.9582 20.1895 20.5738 16.7908 20.5738 12.6759C20.5738 9.50005 21.599 6.63026 23.2345 4.58715C24.8704 2.54404 27.0842 1.33484 29.5003 1.33484H29.5004ZM19.2002 34.0237C22.878 34.0237 26.2812 35.3484 28.8132 37.0466V49.6802C25.873 46.6508 21.0587 44.6977 15.7669 44.6977C11.1937 44.6977 6.1485 46.0882 2.76323 48.45L7.39847 38.4223C9.96162 35.8957 14.2671 34.0236 19.2002 34.0236L19.2002 34.0237Z" fill="{{ fillColor }}"/>
   </svg>
-{% endmacro %}
-
-{% macro externalLinkIcon(fillColor = 'currentcolor') %}
-  <svg width='9' height='10' viewBox='0 0 9 10' fill='none' xmlns='http://www.w3.org/2000/svg'>
-    <path d='M8.58211 0H5.70405C5.47328 0 5.28626 0.187021 5.28626 0.417788C5.28626 0.648555 5.47328 0.835576 5.70405 0.835576H7.61992L3.51989 4.9356C3.35665 5.09874 3.35665 5.36332 3.51989 5.52646C3.60146 5.60803 3.70842 5.64887 3.81527 5.64887C3.92213 5.64887 4.02908 5.60803 4.11066 5.52646L8.16432 1.47269V3.29575C8.16432 3.52652 8.35135 3.71354 8.58211 3.71354C8.81288 3.71354 8.9999 3.52652 8.9999 3.29575V0.417788C8.9999 0.187021 8.81288 0 8.58211 0Z' fill='{{encodedColor}}'/>
-    <path d='M7.13711 4.20733C6.90635 4.20733 6.71933 4.39435 6.71933 4.62512V7.92127C6.71933 8.07227 6.5918 8.19979 6.4408 8.19979H1.1141C0.9631 8.19979 0.835576 8.07227 0.835576 7.92127V2.59457C0.835576 2.44357 0.9631 2.31604 1.1141 2.31604H4.42189C4.65266 2.31604 4.83968 2.12902 4.83968 1.89826C4.83968 1.66749 4.65266 1.48047 4.42189 1.48047H1.1141C0.499761 1.48047 0 1.98023 0 2.59457V7.92127C0 8.53561 0.499761 9.03537 1.1141 9.03537H6.4408C7.05514 9.03537 7.5549 8.53561 7.5549 7.92127V4.62512C7.5549 4.39445 7.36788 4.20733 7.13711 4.20733Z' fill='{{$encodedColor}}'/>
-  </svg>
 {% endmacro %}

src/pages/get-involved.md

@@ -7,11 +7,11 @@ Regardless of your experience level as a developer, we encourage you to get invo
 ### Jump in and get your feet wet
 
 * Read through our [Core Concepts](/concepts/1_the_basics/)
-* Track development progress with the biweekly [Holochain Dev Pulse](https://blog.holochain.org/tag/dev-pulse/){target=_blank}
+* Track development progress with the biweekly [Holochain Dev Pulse](https://blog.holochain.org/tag/dev-pulse/)
 
 ### Connect and contribute
 
-* Discuss everything related to Holochain and hApp development in the [DEV.HC channel on Discord](https://discord.gg/MwPvM4Vffg){target=_blank}
-* Contribute to the conversation on our [Holochain Developer Forum](https://forum.holochain.org/){target=_blank}
-* Sign up for the [Holochain Blog](http://blog.holochain.org#subscribe){target=_blank} to stay up to date
-* Follow us on social media ([Facebook](https://www.facebook.com/holochain.design){target=_blank} and [Twitter](https://twitter.com/holochain){target=_blank})
+* Discuss everything related to Holochain and hApp development in the [DEV.HC channel on Discord](https://discord.gg/MwPvM4Vffg)
+* Contribute to the conversation on our [Holochain Developer Forum](https://forum.holochain.org/)
+* Sign up for the [Holochain Blog](http://blog.holochain.org#subscribe) to stay up to date
+* Follow us on social media ([Facebook](https://www.facebook.com/holochain.design) and [Twitter](https://twitter.com/holochain))

src/pages/get-started/upgrade-holochain.md

@@ -12,7 +12,7 @@ For existing hApps that have been written for Holochain version 0.1, these are s
 
 !!! note
 The following steps only apply to Nix flakes that have been either generated by the Holochain scaffolding tool
-or follow the recommended format as described in [Dev Tools Setup](../install-advanced){target=_blank}.
+or follow the recommended format as described in [Dev Tools Setup](../install-advanced).
 !!!
 
 #### Update your `flake.nix` using a command

src/pages/resources/index.md

@@ -21,8 +21,8 @@ tocData:
 
 When you write a Holochain application, the part that lives in Holochain is called a [DNA](/concepts/2_application_architecture/#layers-of-the-application-stack). It runs as a guest in a WebAssembly sandbox and talks to the host, or Holochain conductor, through the host API. It's also expected to implement callbacks that the conductor needs to call at certain times. The HDK and HDI Rust crates make it easy for you write guest code that interfaces with the conductor --- the HDK for your DNA's [coordinator zomes](/resources/glossary/#coordinator-zome) and the HDI for [integrity zomes](/resources/glossary/#integrity-zome).
 
-* **[HDK reference](https://docs.rs/hdk){target=_blank}**
-* **[HDI reference](https://docs.rs/hdi){target=_blank}**
+* **[HDK reference](https://docs.rs/hdk)**
+* **[HDI reference](https://docs.rs/hdi)**
 
 ## Conductor APIs {#conductor-apis}
 
@@ -33,22 +33,22 @@ The conductor exposes two separate RPC APIs over WebSocket interfaces:
 
 For both of these APIs, you make an RPC call sending a MessagePack-serialized request in a special envelope format to the conductor over WebSocket and listen for a response. The request's envelope must contain a request ID, and the matching response will have the same ID. On the interface that exposes the app API, you can also listen for [**signals**](/resources/glossary/#signal) broadcast by cells. There are [client libraries](#conductor-clients) for JavaScript and Rust that make it easy to handle requests/responses and set up signal listeners.
 
-* **[Conductor Admin API reference](https://docs.rs/holochain_conductor_api/latest/holochain_conductor_api/enum.AdminRequest.html){target=_blank}**
-* **[Conductor App API reference](https://docs.rs/holochain_conductor_api/latest/holochain_conductor_api/enum.AppRequest.html){target=_blank}**
+* **[Conductor Admin API reference](https://docs.rs/holochain_conductor_api/latest/holochain_conductor_api/enum.AdminRequest.html)**
+* **[Conductor App API reference](https://docs.rs/holochain_conductor_api/latest/holochain_conductor_api/enum.AppRequest.html)**
 
 ## Conductor clients
 
-For ergonomic interaction with the two conductor APIs, there are two officially supported client implementations: one in JavaScript and one in Rust. If you intend to develop Holochain apps with a web-based UI, **it is likely that all you'll ever need is the [JavaScript client](https://www.npmjs.com/package/@holochain/client){target=_blank}**.
+For ergonomic interaction with the two conductor APIs, there are two officially supported client implementations: one in JavaScript and one in Rust. If you intend to develop Holochain apps with a web-based UI, **it is likely that all you'll ever need is the [JavaScript client](https://www.npmjs.com/package/@holochain/client)**.
 
-* **[Conductor Client reference (JavaScript)](https://github.com/holochain/holochain-client-js){target=_blank}**
-* **[Conductor Client reference (Rust)](https://docs.rs/holochain_client/latest/holochain_client/){target=_blank}**
-* **[Conductor Client reference (C#)](https://github.com/holochain-open-dev/holochain-client-csharp){target=_blank}** (community-maintained)
+* **[Conductor Client reference (JavaScript)](https://github.com/holochain/holochain-client-js)**
+* **[Conductor Client reference (Rust)](https://docs.rs/holochain_client/latest/holochain_client/)**
+* **[Conductor Client reference (C#)](https://github.com/holochain-open-dev/holochain-client-csharp)** (community-maintained)
 
 ## Conductor configuration
 
 The conductor has a few settings that can (and should) be configured via a YAML config file. We've provided documentation of the internal structures that hold this config; if you can picture how to serialize this to YAML in your mind, you can write a config file! (We promise we'll produce a more readable config file guide soon.)
 
-* **[ConductorConfig structure](https://docs.rs/holochain_conductor_api/latest/holochain_conductor_api/config/conductor/struct.ConductorConfig.html){target=_blank}**
+* **[ConductorConfig structure](https://docs.rs/holochain_conductor_api/latest/holochain_conductor_api/config/conductor/struct.ConductorConfig.html)**
 
 ## Binaries
 
@@ -61,7 +61,7 @@ There are three main developer binaries, and one user-oriented binary. You can r
     * manages Holochain conductor 'sandboxes' --- configuration files and working folders that can be used to repeatably spin up conductors for testing
     * spawns hApps and UIs for testing
     * see [`holochain_cli` docs](https://docs.rs/holochain_cli/latest/holochain_cli) for more info
-* **`lair-keystore`** is Holochain's [keystore](https://github.com/holochain/lair){target=_blank} for generating and signing with cryptographically secure keys. Use this command for initialization, configuration, and running of a Lair keystore. During normal operation, `holochain` will automatically spawn a `lair` process if it doesn't find one running.
+* **`lair-keystore`** is Holochain's [keystore](https://github.com/holochain/lair) for generating and signing with cryptographically secure keys. Use this command for initialization, configuration, and running of a Lair keystore. During normal operation, `holochain` will automatically spawn a `lair` process if it doesn't find one running.
 * **Holochain Launcher** is meant for users to find, install, and run hApps. It runs in a WebView container (currently Tauri, but we're migrating to Electron) which also hosts the UIs of installed hApps. Developers can also turn on 'developer mode' and publish their hApps to a built-in hApp store.
     * [Download the latest Launcher release from GitHub](https://github.com/holochain/launcher/releases)
 

src/scss/_base-element-styles.scss

@@ -50,6 +50,10 @@ a {
   svg {
     height: 100%;
   }
+
+  .main-area & {
+    @include externalLinkIcon($cl-main-text);
+  }
 }
 
 button {

src/scss/_footer.scss

@@ -14,28 +14,28 @@ $footer-nav-header-to-links: 14px;
     ul {
       padding: 0;
       margin: 0;
-      
+
       li {
         list-style: none;
         margin-bottom: unset;
-        
+
         a {
           color: white;
           text-decoration: none;
 
           &.btn {
-            //TODO: Create a standard reverse-btn 
+            //TODO: Create a standard reverse-btn
             @include btn-base(black);
             background-color: white;
             margin-top: 32px;
             border-color: black;
-      
+
             &:hover {
               color: white;
             }
           }
 
-          //@include offsiteLinkIcon;
+          //@include externalLinkIcon;
         }
       }
 
@@ -48,7 +48,7 @@ $footer-nav-header-to-links: 14px;
           a {
             height: $footer-nav-img-height;
             display: block;
-    
+
             svg {
               height: $footer-nav-img-height;
             }
@@ -66,15 +66,15 @@ $footer-nav-header-to-links: 14px;
       row-gap: 30px;
       margin: 0 auto;
       margin-bottom: 100px;
-      
+
       .nav-column {
         h2 {
           color: $cl-other-green;
           font-size: $fs-footer-col-header;
           margin-bottom: $footer-nav-header-to-links;
           margin-top: 0;
         }
-  
+
         &.newsletter {
           max-width: 200px;
 
@@ -87,7 +87,7 @@ $footer-nav-header-to-links: 14px;
       @media screen and (min-width: 500px) {
         grid-template-columns: repeat(6, 1fr);
         justify-items: center;
-        
+
         .nav-column {
           &:nth-child(1) { grid-area: 1 / 1 / 2 / 3; }
           &:nth-child(2) { grid-area: 1 / 3 / 2 / 5; }
@@ -118,7 +118,7 @@ $footer-nav-header-to-links: 14px;
         display: grid;
         justify-items: center;
         grid-template-columns: 1fr repeat(3, max-content) 1fr;
-        grid-template-areas: 
+        grid-template-areas:
         "... hc-logo hc-logo hc-logo ..."
         "... privacy sep tou ..."
         "... icons icons icons ...";

src/scss/_navigation.scss

@@ -1,6 +1,6 @@
 @mixin navBarList() {
   $current-page-highlight-padding: 10px;
-  
+
   nav#main-nav {
     padding: 18px 34px;
 
@@ -29,7 +29,7 @@
         transition: all .75s;
         text-decoration: none;
 
-        // Add a span so that we can use the border to indicate current page and 
+        // Add a span so that we can use the border to indicate current page and
         //   control the size of the indicator independent of the box size of the a tag
         span {
           display: inline-flex;
@@ -42,7 +42,7 @@
           }
         }
 
-        @include offsiteLinkIcon($link-color, $top: 10px);
+        @include externalLinkIcon($link-color);
 
         &:hover {
           font-variation-settings: "wght" 700;
@@ -59,7 +59,7 @@
             font-weight: 700;
           }
         }
-        
+
         &[aria-current="page"] {
           > a {
             color: black;