external links

input-output-hk · Aug 8, 2022 · 980a961 · 980a961
1 parent 816efb4
commit 980a961
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/config.js b/config.js
@@ -57,7 +57,7 @@ const config = {
     ],
     links: [
       { text: 'Cardano.org', link: 'https://cardano.org' },
-      { text: 'Developer Portal', link: '(https://developers.cardano.org/' },
+      { text: 'Developer Portal', link: 'https://developers.cardano.org/' },
     ],
     frontLine: true, // This toggles collapse arrows
     ignoreIndex: true,

diff --git a/src/components/sidebar/treeNode.js b/src/components/sidebar/treeNode.js
@@ -1,4 +1,6 @@
 import React from 'react'
+import { ExternalLink } from 'react-feather'
+
 import OpenedSvg from '../images/opened'
 import ClosedSvg from '../images/closed'
 import config from '../../../config'
@@ -35,6 +37,17 @@ const TreeNode = ({
 
   const calculatedClassName = `${className} item ${active ? 'active' : ''}`
 
+  // TODO: Some child entries are intented to simply link out to an external source.
+  // This is a quick and dirty way of making this happen which needs to be tidied up.
+
+  if (title === 'Testnet Explorer')
+    url = 'https://explorer.cardano-testnet.iohkdev.io/en'
+  if (title === 'Grafana Dashboard')
+    url =
+      'https://monitoring.cardano-testnet.iohkdev.io/grafana/d/Oe0reiHef/cardano-application-metrics-v2?orgId=1&refresh=1m&from=now-2d&to=now'
+
+  const isExternal = url && url.includes('http')
+
   return (
     <li className={calculatedClassName}>
       {hasChildren
@@ -55,6 +68,8 @@ const TreeNode = ({
         : title && (
             <Link to={url}>
               {title}
+              {isExternal && <ExternalLink size={14} />}
+
               {!config.sidebar.frontLine && title && hasChildren ? (
                 <button
                   onClick={collapse}

diff --git a/src/components/styles/GlobalStyles.js b/src/components/styles/GlobalStyles.js
@@ -511,11 +511,13 @@ export const baseStyles = injectGlobal`
     width: 100%;
     padding-right: 35px;
     padding-left: 15px;
+    justify-content: space-between;
   }
 
   .sideBarUL .sectionHeading + ul a {
     font-weight: normal;
   }
+  
 
   .showFrontLine .item a {
     color: #1d1e21;

diff --git a/src/components/styles/Sidebar.js b/src/components/styles/Sidebar.js
@@ -13,7 +13,7 @@ export const Sidebar = styled('aside')`
   position: sticky;
   top: 0;
 
-  background: ${(props) => props.theme.colors.background};
+  background: ${props => props.theme.colors.background};
 
   .rightSideTitle {
     font-size: 10px;
@@ -25,7 +25,7 @@ export const Sidebar = styled('aside')`
     border-left: 1px solid #e6ecf1;
     border-left-color: rgb(230, 236, 241);
 
-    color: ${(props) => props.theme.colors.text};
+    color: ${props => props.theme.colors.text};
   }
 
   .rightSideBarUL {
@@ -44,7 +44,7 @@ export const Sidebar = styled('aside')`
     line-height: 1.5;
     padding: 7px 24px 7px 16px;
 
-    color: ${(props) => props.theme.colors.text};
+    color: ${props => props.theme.colors.text};
   }
 
   @media only screen and (max-width: 50rem) {
@@ -68,15 +68,15 @@ export const ListItem = styled(({ className, active, level, ...props }) => {
     color: #5c6975;
     text-decoration: none;
     font-weight: ${({ level }) => (level === 0 ? 700 : 400)};
-    padding: 0.45rem 0 0.45rem ${(props) => 2 + (props.level || 0) * 1}rem;
+    padding: 0.45rem 0 0.45rem ${props => 2 + (props.level || 0) * 1}rem;
     display: block;
     position: relative;
 
     &:hover {
       color: rgba(82, 129, 247, 1) !important;
     }
 
-    ${(props) =>
+    ${props =>
       props.active &&
       `
       color: #1ED3C6;