Link style for external and anchor links (#254)

* Use internal link style also for external and anchor links

* Remove console.log

* Adjust new line of code from .link-internal to .link

* Exclude external links when handling versions/aliases in links

Author: Simran-B

site/themes/arangodb-docs-theme/layouts/_default/_markup/render-link.html

@@ -8,7 +8,6 @@
 {{- end }}
 
 {{- $permalink := "" }}
-{{- $class := "" }}
 {{- $isRemote := ne $url.Scheme "" }}
 
 {{ if $isRemote -}}
@@ -21,7 +20,6 @@
     {{ $page := .Page.GetPage $path -}}
     {{ with $page -}}
       {{ $permalink = printf "%s%s" $page.RelPermalink $fragment -}}
-      {{ $class = "link-internal" }}
     {{ else -}}
       {{ if ne $currentPage "/" -}}
         {{ $currentFile := .Page.File.Path -}}
@@ -37,7 +35,8 @@
 
 <a href="{{ $permalink | safeURL }}"
   {{- with .Title }} title="{{ . }}"{{ end }}
-  {{- if $isRemote }} target="_blank" rel="noopener noreferrer"{{ else }} class="{{ $class }}"{{ end }}>
+  {{- if $isRemote }} target="_blank" rel="noopener noreferrer"{{ end }} class="link">
   {{- .Text | safeHTML -}}
 </a>
+{{- if $isRemote }}&nbsp;<i class="fas fa-external-link-alt"></i>{{ end }}
 {{- /* whitespace control */ -}}

site/themes/arangodb-docs-theme/layouts/partials/breadcrumbs.html

@@ -5,7 +5,7 @@
     {{ if not .IsHome }}
     <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">
       <meta itemprop="position" content="{{ .Params.menuTitle }}" />
-      <a itemprop="item" class="link-internal" href="{{ .RelPermalink }}">
+      <a itemprop="item" class="link" href="{{ .RelPermalink }}">
         <span itemprop="name" class="breadcrumb-entry">{{- if eq (len .Ancestors) 1 }}{{ template "getVersionLong" dict "page" .Page }}{{ else }}{{ .Params.menuTitle | markdownify }}{{ end }}</span>
       </a>
       <i class="fas fa-chevron-right fa-fw"></i>
@@ -15,7 +15,7 @@
   {{ if not .IsHome }}
   <li itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">
     <meta itemprop="position" content="{{ .Params.menuTitle }}" />
-    <a itemprop="item" class="link-internal" href="{{ .RelPermalink }}">
+    <a itemprop="item" class="link" href="{{ .RelPermalink }}">
       <span itemprop="name" class="breadcrumb-entry">{{- if eq (len .Ancestors) 1 }}{{ template "getVersionLong" dict "page" .Page }}{{ else }}{{ .Params.menuTitle | markdownify }}{{ end }}</span>
     </a>
   </li>

site/themes/arangodb-docs-theme/layouts/partials/content-footer.html

@@ -62,10 +62,10 @@
 <span class="prev">
   {{ with $prev }}
     {{- if eq (len .Ancestors) 1 }}
-      <a class="nav nav-prev link-internal" href="" title="">
+      <a class="nav nav-prev link" href="" title="">
       </a>
     {{ else }}
-        <a class="nav nav-prev link-internal" href="{{.RelPermalink}}" title="{{.Params.menuTitle}}">
+        <a class="nav nav-prev link" href="{{.RelPermalink}}" title="{{.Params.menuTitle}}">
           <i class="fas fa-chevron-left fa-fw"></i><p>{{.Params.menuTitle | markdownify}}</p></a>
         {{- end}}
   {{ end }}
@@ -74,7 +74,7 @@
 
 <span class="next">
   {{ with $next }}
-            <a class="nav nav-next link-internal" href="{{.RelPermalink}}" title="{{.Params.menuTitle}}">
+            <a class="nav nav-next link" href="{{.RelPermalink}}" title="{{.Params.menuTitle}}">
               <p>{{.Params.menuTitle | markdownify}}</p><i class="fas fa-chevron-right fa-fw"></i></a>
           {{- end }}
 </span>

site/themes/arangodb-docs-theme/layouts/partials/shortcodes/card.html

@@ -8,7 +8,7 @@
   {{ $destinationPage = $context.Page.GetPage $link -}}
 {{ end }}
 
-<a href="{{ $destinationPage.RelPermalink }}" class="link-internal">
+<a href="{{ $destinationPage.RelPermalink }}" class="link">
   <div class="card">
     <div class="card-head">
       {{ with $image }}<img

site/themes/arangodb-docs-theme/layouts/shortcodes/cloudbanner.html

@@ -3,7 +3,7 @@
     <div>
         <div class="ag-info">
             Experience the shortest time to value for a hosted graph DB.</div>
-        <a class="link-internal" href="https://cloud.arangodb.com/home" target="_agCloud">
+        <a class="link" href="https://cloud.arangodb.com/home" target="_agCloud">
             Get Started Today!
         </a>   
     </div>

site/themes/arangodb-docs-theme/static/css/theme.css

@@ -189,27 +189,27 @@ ul ul, ul ol, ol ul, ol ol {
     margin-bottom: .5rem;
 }
 
-.link-internal {
+.link {
     text-decoration: none;
     border-bottom: 2px solid var(--green-600);
 }
 
-.link-internal:hover{
+.link:hover{
     border-bottom: 2px solid var(--green-600);
     color: var(--gray-950);
 }
 
-.link-internal > * {
+.link > * {
     text-decoration: none;
     pointer-events: none;
 }
 
-.link-internal > p {
+.link > p {
     border-bottom: 2px solid var(--green-600);
     color: var(--gray-950);
 }
 
-.link-internal:has(code) {
+.link:has(code) {
     border-bottom: 2px solid var(--green-600);
     font-size: 14px;
     overflow: auto;
@@ -222,12 +222,12 @@ ul ul, ul ol, ol ul, ol ol {
     box-shadow: none;
     color: var(--gray-950);
 }
-.link-internal > code {
+.link > code {
     background-color: transparent;
     border: none;
 }
 
-.link-internal > i {
+.link > i {
     color: var(--gray-950);
     text-decoration: none;
 }
@@ -390,7 +390,7 @@ table.fixed code {
     box-shadow: rgb(149 157 165 / 20%) 0px 8px 24px;
 } */
 
-.cards > a.link-internal {
+.cards > a.link {
     border-bottom: 0px;
 }
 
@@ -1990,7 +1990,7 @@ nav.pagination .next {
 .nav-prev {
     display: inherit;
 }
-.nav-prev.link-internal, .nav-next.link-internal  {
+.nav-prev.link, .nav-next.link  {
     border-bottom: 0;
 }
 

site/themes/arangodb-docs-theme/static/js/theme.js

@@ -175,7 +175,11 @@ function loadPage(target) {
 }
 
 function internalLinkListener() {
-  $('.link-internal').click(function(event) {
+  $('.link').click(function(event) {
+    if (event.target.getAttribute("target")) {
+      // external link
+      return;
+    }
     event.preventDefault();
     updateHistory("", event.target.getAttribute('href'))
   })
@@ -199,7 +203,7 @@ function initArticle(url) {
   styleImages();
   internalLinkListener();
   codeShowMoreListener();
-  aliazeLinks('article', 'a.link-internal');
+  aliazeLinks('article', 'a.link:not([target])');
   aliazeLinks('article', 'a.header-link');
   aliazeLinks('#breadcrumbs', 'a')
 }