From ed155b01271d63ae00998999eacac91cf106c2fa Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 19 Oct 2022 20:20:09 +0100
Subject: [PATCH] link some things

---
 src/images/github.svg      |  1 +
 src/pages/index.tsx        | 26 +++++++++++++++++++++++++-
 src/styles/Home.module.css | 36 ++++++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 src/images/github.svg

diff --git a/src/images/github.svg b/src/images/github.svg
new file mode 100644
index 0000000..ff0af48
--- /dev/null
+++ b/src/images/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c450c79..5c20f92 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -5,6 +5,7 @@ import styles from '../styles/Home.module.css'
 import { getData } from '../utils/getData'
 import LogoAsset from '../images/logo.svg'
 import CheckAsset from '../images/check.svg'
+import GithubAsset from '../images/github.svg'
 import addresses from '@oceanprotocol/contracts/addresses/address.json'
 import { statusApiUri } from '../../app.config'
 import relativeDate from 'tiny-relative-date'
@@ -99,7 +100,15 @@ export default function HomePage(): ReactElement {
                     )}`}
                   >
                     <h2 className={styles.titleComponent}>
-                      {statusIcon(component.status)} {component.name}
+                      {statusIcon(component.status)}{' '}
+                      <a
+                        href=""
+                        title="Go to tested endpoint"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        {component.name}
+                      </a>
                       <code className={styles.version} title="deployed version">
                         {component.version}
                       </code>
@@ -116,6 +125,21 @@ export default function HomePage(): ReactElement {
                         )}
                       </ul>
                     ) : null}
+                    <footer className={styles.links}>
+                      {component.name !== 'data-farming' &&
+                        component.name !== 'cexa' && (
+                          <a
+                            href={`https://github.com/oceanprotocol/${
+                              component.name === 'subgraph' ? 'ocean-' : ''
+                            }${component.name}`}
+                            target="_blank"
+                            rel="noreferrer"
+                            title="Go to GitHub repository"
+                          >
+                            <GithubAsset className={styles.icon} />
+                          </a>
+                        )}
+                    </footer>
                   </div>
                 ))}
               </div>
diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css
index 827d070..e6f06d6 100644
--- a/src/styles/Home.module.css
+++ b/src/styles/Home.module.css
@@ -59,11 +59,45 @@
   border-radius: var(--border-radius);
   box-shadow: 0 6px 17px 0 var(--box-shadow-color);
   border: 1px solid var(--border-color);
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .titleComponent {
   font-size: var(--font-size-large);
   margin: 0;
+  width: 100%;
+}
+
+.titleComponent a {
+  color: inherit;
+}
+
+.titleComponent a:hover,
+.titleComponent a:focus {
+  color: var(--color-primary);
+}
+
+.links {
+  width: calc(100% + 1rem);
+  margin-top: calc(var(--spacer) / 2);
+  font-size: var(--font-size-small);
+  text-align: right;
+  margin-bottom: -1.2rem;
+  margin-right: -1rem;
+  align-self: flex-end;
+}
+
+.links svg {
+  display: inline-block;
+  stroke: var(--color-secondary);
+  width: 1.2em;
+  height: 1.2em;
+}
+
+.links a:hover svg,
+.links a:focus svg {
+  stroke: var(--color-primary);
 }
 
 .warning {
@@ -97,6 +131,7 @@
 }
 
 .messages {
+  width: 100%;
   list-style-type: square;
   margin-left: 1rem;
   margin-top: calc(var(--spacer) / 4);
@@ -130,6 +165,7 @@
 
 .contracts .titleComponent {
   display: inline-block;
+  width: auto;
 }
 
 .loading {