fix #22 fill howto publish page

.sample.npmfrogrc.json

@@ -4,5 +4,6 @@
     "apiKey": "<YOUR_ARTIFACTORY_API_KEY>",
     "repoKey": "npm",
     "https": false
-  }
+  },
+  "companyScope": "<YOUR_DEFAULT_COMPANY_SCOPE_WITHOUT_AT>"
 }

server/config-service.ts

@@ -1,13 +1,14 @@
 import * as path from 'path';
 import * as os from 'os';
 import * as fs from 'fs-extra';
+import Config from '../types/Config';
 
 const homedir = os.homedir();
 
 const configFile = process.env.MOCK
   ? '.sample.npmfrogrc.json'
   : '.npmfrogrc.json';
-let config;
+let config: Config;
 
 try {
   config = fs.readJSONSync(path.join(__dirname, '..', '..', configFile));

server/index.ts

@@ -78,6 +78,7 @@ app.get('/config', (req, res) => {
         repoKey: config.artifactory.repoKey,
         https: config.artifactory.https,
       },
+      companyScope: config.companyScope,
     });
   } catch (error) {
     handleError(error, res, `Could not get npmFrog config from server.`);

src/App.vue

@@ -24,7 +24,7 @@
             value="true"
           >
             <v-list-tile-action>
-              <v-icon v-html="item.icon"></v-icon>
+              <v-icon>{{$vuetify.icons[item.icon]}}</v-icon>
             </v-list-tile-action>
             <v-list-tile-content>
               <v-list-tile-title v-text="item.title"></v-list-tile-title>
@@ -170,6 +170,7 @@ import About from '@/components/About.vue';
 import CrafterAvatar from '@/components/CrafterAvatar.vue';
 import Crafter from '../types/Crafter';
 import Searchable from '../types/Searchable';
+import * as vuetify from './plugins/vuetify';
 
 @Component({
   components: {
@@ -197,8 +198,8 @@ export default class App extends Vue {
   private btnIconSize: number = 36;
   private navItems: Array<{ icon: string, title: string, target: string }> = [
     {
-      icon: 'email',
-      title: 'howto',
+      icon: 'howto',
+      title: 'HowTo',
       target: 'howto',
     },
   ];
@@ -467,6 +468,14 @@ code.hljs {
       vertical-align: baseline;
     }
   }
+
+  .caption {
+    display: block;
+    background-color: rgba(255, 255, 255, 0.13);
+    padding: 6px;
+    margin: -40px -6px 0 -6px;
+    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
+  }
 }
 
 .application .theme--dark.v-chip,

src/components/About.vue

@@ -99,7 +99,9 @@ export default class About extends Vue {
           host: '',
           repoKey: '',
           https: false,
+          apiKey: '',
         },
+        companyScope: '',
       },
     };
     this.loadMetaInfo();

src/plugins/vuetify.js

@@ -25,6 +25,7 @@ const icons = {
   created: 'fas fa-bolt',
   updated: 'far fa-clock',
   about: 'fas fa-info-circle',
+  howto: 'far fa-question-circle',
   clear: 'fas fa-times',
   bug: 'fas fa-bug',
   contact: 'far fa-comments',

src/views/HowTo.vue

@@ -1,18 +1,119 @@
 <template>
   <div class="howto">
-      <v-container>
+    <v-container>
+      <h1>HowTo publish packages</h1>
+      <h2>(For new packages) initialize an npm module</h2>
+        <pre v-highlightjs><code class="bash">npm init</code></pre>
+      <p>
+        This will create a <code class="hljs">package.json</code> file for your new module. If you already have one, proceed with the next step.
+      </p>
+      <h2>Configure artifactory as an npm registry for your company</h2>
+      <h3>Alternative 1) Globally</h3>
+      <pre v-highlightjs v-if="data.artifactoryUrl"><code class="bash">npm set registry {{data.companyScope ? `@${data.companyScope}:` : ''}}{{data.artifactoryUrl}}</code></pre>
+      <v-subheader>More info:</v-subheader>
+      <v-list :class="`link-list`">
+        <v-list-tile><a href="https://docs.npmjs.com/cli/config" target="_blank">https://docs.npmjs.com/cli/config</a></v-list-tile>
+        <v-list-tile><a href="https://docs.npmjs.com/misc/config#registry" target="_blank">https://docs.npmjs.com/misc/config#registry</a></v-list-tile>
+      </v-list>
+      <h3>Alternative 2) Only for your npm package</h3>
+      <pre v-highlightjs v-if="data.artifactoryUrl"><code class="json">
+      <span class="caption">package.json</span>
+  ...
+  "publishConfig": {
+    "registry": "{{data.artifactoryUrl}}"
+  }
+  ...</code></pre>
+      <v-subheader>More info:</v-subheader> 
+      <v-list :class="`link-list`">
+        <v-list-tile><a href="https://docs.npmjs.com/files/package.json#publishconfig" target="_blank">https://docs.npmjs.com/files/package.json#publishconfig</a></v-list-tile>
+      </v-list>
+      <h2>Define files that should be included in your npm package</h2>
+      <pre v-highlightjs><code class="json">
+      <span class="caption">package.json (example)</span>
+  "files": [
+    "assets"
+    "dist",
+    "cli.js"
+    "index.js"
+  ]</code></pre>
+      <h2>Commit everything</h2>
+      <pre v-highlightjs><code class="bash">git commit</code></pre>
+      <h2>Create a new version of your package</h2>
+      <pre v-highlightjs><code class="bash">npm version [&lt;newversion&gt; | major | minor | patch ]
 
-    <h1>HowTo publish packages</h1>
-    <p>
-      Bla
-    </p>
-      </v-container>
+'npm [-v | --version]' to print npm version
+'npm view &lt;pkg&gt; version' to view a package's published version
+'npm ls' to inspect current package/dependency versions</code></pre>
+      <v-subheader>More info:</v-subheader> 
+      <v-list :class="`link-list`">
+        <v-list-tile><a href="https://docs.npmjs.com/cli/version" target="_blank">https://docs.npmjs.com/cli/version</a></v-list-tile>
+        <v-list-tile><a href="https://semver.org/" target="_blank">semver.org</a></v-list-tile>
+      </v-list>
+      <h2>Publish package</h2>
+      <pre v-highlightjs><code class="bash">npm publish</code></pre>
+      <v-subheader>More info:</v-subheader> 
+      <v-list :class="`link-list`">
+        <v-list-tile><a href="https://docs.npmjs.com/cli/publish" target="_blank">https://docs.npmjs.com/cli/publish</a></v-list-tile>
+      </v-list>
+      <h2>Useful references</h2>
+      <v-list :class="`link-list`">
+        <v-list-tile><a href="https://www.npmjs.com/package/release-it" target="_blank">release-it</a></v-list-tile>
+        <v-list-tile><a href="https://github.com/geddski/grunt-release" target="_blank">grunt-release</a></v-list-tile>
+        <v-list-tile><a href="https://docs.npmjs.com/misc/scripts#description" target="_blank">How npm handles the "scripts" field</a></v-list-tile>
+        <v-list-tile><a href="https://semver.org/" target="_blank">semver.org</a></v-list-tile>
+      </v-list>
+    </v-container>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
+import DataStore from '@/services/DataStore';
 
 @Component
-export default class HowTo extends Vue {}
+export default class HowTo extends Vue {
+  private data: {
+    artifactoryUrl: string,
+    companyScope: string,
+  } = {
+    artifactoryUrl: '',
+    companyScope: '',
+  };
+
+  constructor() {
+    super();
+    DataStore.Instance.getConfig().then((response) => {
+      console.log(response);
+      if (response) {
+        this.data.artifactoryUrl = `http${
+          response.artifactory.https ? 's' : ''
+        }://${
+          response.artifactory.host
+        }/artifactory/api/npm/${
+          response.artifactory.repoKey
+        }/`;
+        this.data.companyScope = response.companyScope;
+      }
+    });
+  }
+}
 </script>
+
+<style lang="scss">
+
+.v-list.link-list {
+  background-color: transparent;
+}
+
+a[target="_blank"] {
+
+  &::before {
+    content: "↗";
+    display: inline-block;
+    vertical-align: baseline;
+    margin-right: .7em;
+    font-weight: bold;
+  }
+}
+
+</style>

types/Config.ts

@@ -3,5 +3,7 @@ export default interface Config {
     host: string;
     repoKey: string;
     https: boolean;
+    apiKey: string;
   };
+  companyScope: string;
 }