feat: add help for getting started steps (#156)

Author: ydcjeff

src/App.vue

@@ -55,7 +55,7 @@ h5,
 h6 {
   font-weight: 500;
 }
-@media (max-width: 768px) {
+@media (max-width: 915px) {
   h1 {
     font-size: 1.5rem;
   }

src/README.md

@@ -6,6 +6,7 @@ This is the source directory of Code-Generator App.
 
 - `assets` - includes image files
 - `components` - includes Vue components
+- `components/css` - includes the common css code used in components
 - `metadata` - includes the data of the app in json format (Distributed/Non-distributed training values, Ignite Handlers, and Loggers)
 - `templates` - includes deep learning training template scripts
 
@@ -28,6 +29,7 @@ The following table explains the usage of some notable components. The component
 | [`Instruction`](./components/Instruction.vue)   | Use for showing how to get started                                                                                      |
 | [`Message`](./components/Message.vue)           | Use for showing the status of user input event (copying code, missing configuration values when attempting to download) |
 | [`NavBar`](./components/NavBar.vue)             | Use for navigation bar                                                                                                  |
+| [`NavHelp`](./components/NavHelp.vue)           | Use for showing step by step guide                                                                                      |
 | [`PaneLeft`](./components/PaneLeft.vue)         | Use for everything in the left pane                                                                                     |
 | [`PaneRight`](./components/PaneRight.vue)       | Use for everything in the right pane                                                                                    |
 | [`PaneSplit`](./components/PaneSplit.vue)       | Use for how to split the left pane, right pane, and split line                                                          |

src/components/CodeBlock.vue

@@ -168,7 +168,7 @@ div[class~='language-yaml']::before {
   content: 'yaml';
 }
 /* media queries */
-@media (max-width: 768px) {
+@media (max-width: 915px) {
   .code-block-wrapper {
     height: 100%;
   }

src/components/IconDiscord.vue

@@ -7,7 +7,7 @@
         xmlns:xlink="http://www.w3.org/1999/xlink"
         aria-hidden="true"
         role="img"
-        class="iconify iconify--carbon animate-bounce"
+        class="animate-bounce iconify iconify--carbon"
         width="32"
         height="32"
         preserveAspectRatio="xMidYMid meet"
@@ -60,7 +60,7 @@
 .mobile {
   display: none;
 }
-@media (max-width: 768px) {
+@media (max-width: 915px) {
   .desktop {
     display: none;
   }

src/components/IconDownload.vue

@@ -12,6 +12,11 @@
       </RouterLink>
     </h1>
     <div class="left-side-badges">
+      <NavHelp />
+      <NavDownload />
+      <NavGitHub />
+      <NavTwitter />
+      <NavDiscord />
       <a
         :href="`https://github.com/pytorch-ignite/code-generator/commit/${currentCommit}`"
         target="_blank"
@@ -20,114 +25,31 @@
       >
         v{{ version }}@{{ currentCommit.slice(0, 7) }}
       </a>
-      <button
-        @click="downloadProject"
-        class="download-button"
-        title="Download the generated code as a zip file"
-      >
-        <IconDownload />
-        <span class="icon-text">Download</span>
-      </button>
-      <a
-        class="external-links"
-        href="https://github.com/pytorch-ignite/code-generator"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <IconGitHub />
-        <span class="icon-text">GitHub</span>
-      </a>
-      <a
-        class="external-links"
-        href="https://twitter.com/pytorch_ignite"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <IconTwitter />
-        <span class="icon-text">Twitter</span>
-      </a>
-      <a
-        class="external-links"
-        href="https://discord.gg/djZtm3EmKj"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <IconDiscord />
-        <span class="icon-text">Discord</span>
-      </a>
-    </div>
-    <div
-      class="download-success"
-      v-show="showDownloadMsg"
-      @click="showDownloadMsg = false"
-    >
-      <div class="msg-wrapper">
-        <div class="msg">
-          <h2>🎉 Your Training Script Has Been Generated! 🎉</h2>
-          <p>
-            Thanks for using Code-Generator! Feel free to reach out to us on
-            <a
-              class="external-links msg-gh"
-              href="https://github.com/pytorch-ignite/code-generator"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              GitHub </a
-            >with any feedback, bug report, and feature request.
-          </p>
-        </div>
-      </div>
     </div>
   </nav>
 </template>
 
 <script>
 import { version } from '../../package.json'
-import { store, msg } from '../store'
-import { saveAs } from 'file-saver'
-import JSZip from 'jszip'
-import IconDiscord from './IconDiscord.vue'
-import IconDownload from './IconDownload.vue'
-import IconGitHub from './IconGitHub.vue'
-import IconTwitter from './IconTwitter.vue'
-import { ref } from 'vue'
+import NavDiscord from './NavDiscord.vue'
+import NavDownload from './NavDownload.vue'
+import NavGitHub from './NavGitHub.vue'
+import NavTwitter from './NavTwitter.vue'
+import NavHelp from './NavHelp.vue'
 
 export default {
-  components: { IconDiscord, IconDownload, IconGitHub, IconTwitter },
+  components: { NavDiscord, NavDownload, NavGitHub, NavTwitter, NavHelp },
   setup() {
-    const showDownloadMsg = ref(false)
-    const currentCommit = __COMMIT__ /* from vite.config.js */
+    const currentCommit = __COMMIT__ // from vite.config.js
 
-    const downloadProject = () => {
-      const zip = new JSZip()
-      if (store.code && Object.keys(store.code).length) {
-        msg.color = 'red'
-        if (!store.config.output_dir) {
-          msg.showMsg = true
-          msg.content = `Output directory is required. Please input in Loggers tab.`
-        } else if (!store.config.log_every_iters) {
-          msg.showMsg = true
-          msg.content = `Logging interval is required. Please input in Loggers tab.`
-        } else {
-          for (const filename in store.code) {
-            zip.file(filename, store.code[filename])
-          }
-          zip.generateAsync({ type: 'blob' }).then((content) => {
-            saveAs(content, `ignite-${store.config.template}.zip`)
-          })
-          showDownloadMsg.value = true
-        }
-      } else {
-        msg.showMsg = true
-        msg.content = 'Choose a template to download.'
-      }
-    }
-    return { version, downloadProject, showDownloadMsg, currentCommit }
+    return { version, currentCommit }
   }
 }
 </script>
 
 <style scoped>
+@import url('./css/nav-right.css');
+
 h1 {
   margin: 0;
   font-weight: normal;
@@ -137,13 +59,6 @@ h1 img {
   position: relative;
   top: -5px;
 }
-.external-links {
-  margin: 0 0.5rem;
-  border-bottom: 2px solid transparent;
-}
-.external-links:hover {
-  border-bottom: 2px solid var(--c-brand-red);
-}
 .nav-bar {
   display: flex;
   align-items: center;
@@ -156,52 +71,8 @@ h1 img {
   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: 1em;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.icons {
-  vertical-align: middle;
-  position: relative;
-  top: -1px;
-}
-.download-success {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: rgba(101, 110, 133, 0.8);
-  z-index: 10;
-  width: 100vw;
-  height: 100vh;
-}
-.msg-wrapper {
-  display: block;
-  max-width: 38rem;
-  margin: 20vh auto 0;
-  text-align: center;
-  padding: 0 1rem;
-}
-.msg {
-  padding: 2rem 1rem;
-  background-color: var(--c-white-light);
-  color: var(--c-text);
-  border-radius: 8px;
-  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.33);
-}
-.msg-gh {
-  margin: 0;
-  color: var(--c-brand-red);
-}
-.icon-text {
-  margin-left: 0.25rem;
-}
 /* media queries */
-@media (max-width: 768px) {
+@media (max-width: 915px) {
   .pname {
     display: none;
   }
@@ -212,11 +83,5 @@ h1 img {
     padding: 0.5rem 0.5rem 0;
     background-color: var(--c-white);
   }
-  .external-links {
-    margin: 0 0.25rem;
-  }
-  .icon-text {
-    display: none;
-  }
 }
 </style>

src/components/IconGitHub.vue

@@ -0,0 +1,20 @@
+<template>
+  <a
+    class="external-links"
+    href="https://discord.gg/djZtm3EmKj"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <svg width="1.4em" height="1.4em" viewBox="0 0 448 512" class="icons">
+      <path
+        d="M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416c-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416c.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248c-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512c-60.811-33.329-132.244-33.335-191.232-7.424c-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248c0 0 21.504 37.12 78.08 38.912c0 0 9.472-11.52 17.152-21.248c-32.512-9.728-44.8-30.208-44.8-30.208c3.766 2.636 9.976 6.053 10.496 6.4c43.21 24.198 104.588 32.126 159.744 8.96c8.96-3.328 18.944-8.192 29.44-15.104c0 0-12.8 20.992-46.336 30.464c7.68 9.728 16.896 20.736 16.896 20.736c56.576-1.792 78.336-38.912 78.336-38.912z"
+        fill="currentColor"
+      ></path>
+    </svg>
+    <span class="icon-text">Discord</span>
+  </a>
+</template>
+
+<style scoped>
+@import url('./css/nav-right.css');
+</style>