feat: show git commit on nav bar (#112)

* feat: show git commit on nav bar * style: little adjustments
pytorch-ignite · May 21, 2021 · 53a645f · 53a645f
1 parent 7fc6af1
commit 53a645f
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 23 deletions.
diff --git a/.env b/.env
@@ -1 +1 @@
-VITE_GIT_COMMIT=8a8c364fafdf20ee8504f004b9db54d9bc82eac4
+VITE_COMMIT=3e6c8a07d35b2c22fdf4b484b4d43f818dc0ff06
diff --git a/index.html b/index.html
@@ -8,6 +8,11 @@
       href="/src/assets/ignite_logomark.svg"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap"
+      rel="stylesheet"
+    />
     <title>Code Generator</title>
   </head>
   <body>

diff --git a/scripts/getCommit.js b/scripts/getCommit.js
@@ -8,5 +8,5 @@ exec('git rev-parse HEAD', (err, stdout, stderr) => {
     console.error(err)
   }
   console.log(stdout, process.env.COMMIT_REF)
-  fs.writeFileSync('./.env', `VITE_GIT_COMMIT=${stdout}`)
+  fs.writeFileSync('./.env', `VITE_COMMIT=${stdout}`)
 })
diff --git a/src/App.vue b/src/App.vue
@@ -49,8 +49,8 @@ export default {
   --c-brand-yellow: #eaa700;
   --c-text: #475569;
   --font-size: 1rem;
-  --font-family-base: Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
+  --font-family-base: 'Inter', Avenir, -apple-system, BlinkMacSystemFont,
+    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
     'Helvetica Neue', sans-serif;
   --code-font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
   --code-font-size: 0.85em;
@@ -68,6 +68,16 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+h1 {
+  font-weight: 600;
+}
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 500;
+}
 @media (prefers-reduced-motion) {
   :focus {
     border-radius: 3px;

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -9,10 +9,17 @@
           height="50"
         />
         <span class="pname">Code Generator</span>
-        <small class="version">v{{ version }}</small>
       </a>
     </h1>
     <div class="left-side-badges">
+      <a
+        :href="`https://github.com/pytorch-ignite/code-generator/commit/${currentCommit}`"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="version external-links"
+      >
+        v{{ version }}@{{ currentCommit.slice(0, 7) }}
+      </a>
       <button
         @click="downloadProject"
         class="download-button"
@@ -90,6 +97,7 @@ export default {
   setup() {
     let zip = new JSZip()
     const showDownloadMsg = ref(false)
+    const currentCommit = import.meta.env.VITE_COMMIT
 
     const downloadProject = () => {
       for (const filename in store.code) {
@@ -100,7 +108,7 @@ export default {
       })
       showDownloadMsg.value = true
     }
-    return { version, downloadProject, showDownloadMsg }
+    return { version, downloadProject, showDownloadMsg, currentCommit }
   }
 }
 </script>
@@ -121,7 +129,6 @@ h1 img {
 }
 .external-links {
   margin: 0 0.5rem;
-  font-size: var(--font-size);
   border-bottom: 2px solid transparent;
 }
 .external-links:hover {
@@ -134,26 +141,17 @@ h1 img {
   justify-content: space-between;
   border-bottom: 1px solid var(--c-white-dark);
 }
-.version {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  margin-left: 0.25rem;
-  background-color: #007bff;
-  border-radius: 8px 2px 8px 2px;
-  color: var(--c-white-light);
-  font-weight: bolder;
-}
 .left-side-badges {
   display: flex;
   align-items: center;
+  font-size: 0.9em;
 }
 .download-button {
   background: none;
   color: var(--c-text);
   cursor: pointer;
   font-family: var(--font-family-base);
-  font-size: var(--font-size);
+  font-size: 1em;
   padding-top: 0;
   padding-bottom: 0;
 }
@@ -190,20 +188,23 @@ h1 img {
   color: var(--c-brand-red);
 }
 .icon-text {
-  margin-left: 0.5rem;
+  margin-left: 0.25rem;
 }
 /* media queries */
 @media (max-width: 768px) {
-  .pname,
-  .version {
+  .pname {
     display: none;
   }
   .nav-bar {
     position: fixed;
     z-index: 6;
     width: 100%;
+    padding: 0.5rem 0.5rem 0;
     background-color: var(--c-white);
   }
+  .external-links {
+    margin: 0 0.25rem;
+  }
   .icon-text {
     display: none;
   }

diff --git a/src/store.js b/src/store.js
@@ -11,14 +11,14 @@ const isProd = import.meta.env.PROD
 // @ts-ignore
 const isDev = import.meta.env.DEV
 // @ts-ignore
-const gitCommit = import.meta.env.VITE_GIT_COMMIT
+const commit = import.meta.env.VITE_COMMIT
 
 // set url for template fetching
 // this only works in production and local mode
 // not in network mode
 const urlTemplates = 'src/templates'
 const urlDev = `${location.href}/${urlTemplates}`
-const urlProd = `https://raw.githubusercontent.com/pytorch-ignite/code-generator/${gitCommit}/${urlTemplates}`
+const urlProd = `https://raw.githubusercontent.com/pytorch-ignite/code-generator/${commit}/${urlTemplates}`
 const url = isDev ? urlDev : isProd ? urlProd : null
 
 // ejs options