feat: show git commit on nav bar

ydcjeff · ydcjeff · commit 7fa66fca358c · 2021-05-14T00:05:35.000+06:30
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 {
@@ -135,25 +142,20 @@ h1 img {
   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;
+  margin: 0 0.5rem;
+  color: var(--c-text);
 }
 .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;
 }
@@ -194,8 +196,7 @@ h1 img {
 }
 /* media queries */
 @media (max-width: 768px) {
-  .pname,
-  .version {
+  .pname {
     display: none;
   }
   .nav-bar {
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

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-VITE_GIT_COMMIT=8a8c364fafdf20ee8504f004b9db54d9bc82eac4`
	`1`	`+VITE_COMMIT=3e6c8a07d35b2c22fdf4b484b4d43f818dc0ff06`
Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,5 @@ exec('git rev-parse HEAD', (err, stdout, stderr) => {`
`8`	`8`	`console.error(err)`
`9`	`9`	`}`
`10`	`10`	`console.log(stdout, process.env.COMMIT_REF)`
`11`		- fs.writeFileSync('./.env', `VITE_GIT_COMMIT=${stdout}`)
	`11`	+ fs.writeFileSync('./.env', `VITE_COMMIT=${stdout}`)
`12`	`12`	`})`