feat: add link to the github repository (#21)

* feat: add link to the github repository * fix: nav-header now will have the text from repo hyperlink * feat: github link and header should be inline
voltrondata · Jun 27, 2023 · 59427b2 · 59427b2
1 parent 11f755f
commit 59427b2
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 12 deletions.
diff --git a/client/cypress/e2e/basic.cy.js b/client/cypress/e2e/basic.cy.js
@@ -7,7 +7,7 @@ describe("Substrait Fiddle Basic Test", () => {
 
   it("header with title and logo", () => {
     cy.get(".navbar")
-      .should("have.text", "Substrait Fiddle")
+      .should("have.text", "Substrait Fiddlevoltrondata/substrait-fiddle")
       .find("img")
       .should("be.visible");
   });

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -23,7 +23,9 @@
     "monaco-editor": "^0.34.1",
     "monaco-editor-webpack-plugin": "^7.0.1",
     "monaco-languageclient": "^4.0.3",
+    "n": "^9.1.0",
     "protobufjs": "^7.2.0",
+    "stable": "^0.1.8",
     "substrait": "github:westonpace/substrait-js#05c27d5e92bd69426789c192fd574f4f63168fdb",
     "vue": "^3.2.45",
     "vue-multiselect": "^3.0.0-beta.1",

diff --git a/client/src/App.vue b/client/src/App.vue
@@ -8,20 +8,57 @@ import SubstraitGraph from "@/components/SubstraitGraph.vue";
   <div>
     <header>
       <nav
-        class="navbar navbar-dark navbar-expand-md py-4 shadow-lg p-3 mb-5"
+        class="navbar navbar-dark navbar-expand-md shadow-lg mb-5"
         style="background-color: #e92063"
       >
-        <img
-          class="inverted"
-          src="../public/logo.svg"
-          alt="Substrait Fiddle"
-          style="width: 4%; margin: 0%; padding: 0%; border: 0ch"
-        />
-        <span
-          class="nav-header"
-          style="color: #fff; margin-left: 1vh; font-size-adjust: 0.5"
-          >Substrait Fiddle</span
+        <div
+          class="container"
+          style="margin-left: 0%; min-width: 100%; padding-top: 1.5%"
         >
+          <div class="col-8" style="padding-bottom: 1%">
+            <div class="d-flex align-items-center">
+              <img
+                class="inverted"
+                src="../public/logo.svg"
+                alt="Substrait Fiddle"
+                style="width: 5%"
+              />
+              <span
+                class="nav-header"
+                style="color: #fff; font-size-adjust: 0.5; margin-left: 1rem"
+                >Substrait Fiddle</span
+              >
+            </div>
+          </div>
+          <div class="col-4">
+            <div
+              class="d-flex justify-content-end"
+              style="text-align: right; padding-bottom: 0%; margin-right: 1.5%"
+            >
+              <img
+                height="20"
+                width="20"
+                src="https://cdn.simpleicons.org/github/white"
+                style="margin-top: 2px; margin-right: 4px"
+              />
+              <a
+                href="https://github.com/voltrondata/substrait-fiddle/"
+                target="_blank"
+              >
+                <span
+                  class="nav-header navbar-right"
+                  style="
+                    color: #fff;
+                    font-size: 1.1rem;
+                    display: inline-block;
+                    font-family: sans-serif;
+                  "
+                  >voltrondata/substrait-fiddle</span
+                >
+              </a>
+            </div>
+          </div>
+        </div>
       </nav>
     </header>
     <div class="col-5 tabs" style="margin-left: 3vh">