build: create build script and set up folder for npm distribution

MichaelSolati · Jan 9, 2019 · c5618f6 · c5618f6
1 parent c2ddd27
commit c5618f6
Show file tree

Hide file tree

Showing 9 changed files with 274 additions and 45 deletions.
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at mkslt04@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,47 @@
+# Contributing
+
+## Commit Message Guidelines
+
+We have very precise rules over how our git commit messages can be formatted.  This leads to **more
+readable messages** that are easy to follow when looking through the **project history**.  But also,
+we use the git commit messages to **generate the project change log**.
+
+## Commit Message Format
+
+Each commit message consists of a **header**, a **body** and a **footer**.  The header has a special
+format that includes a **type**, a **scope** and a **subject**:
+
+```text
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+Any line of the commit message cannot be longer 100 characters! This allows the message to be easier
+to read on GitHub as well as in various git tools.
+
+## Revert
+
+If the commit reverts a previous commit, it should begin with `revert:`, followed by the header of
+the reverted commit. In the body it should say: `This reverts commit <hash>.`, where the hash is
+the SHA of the commit being reverted.
+
+## Type
+
+Must be one of the following:
+
+* **feat**: A new feature
+* **fix**: A bug fix
+* **docs**: Documentation only changes
+* **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing
+  semi-colons, etc)
+* **refactor**: A code change that neither fixes a bug nor adds a feature
+* **perf**: A code change that improves performance
+* **test**: Adding missing tests or correcting existing tests
+* **build**: Changes that affect the build system, CI configuration or external dependencies
+            (example scopes: gulp, broccoli, npm)
+* **chore**: Other changes that don't modify `src` or `test` files
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Michael Solati
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,27 +1,37 @@
-# NgeSlides
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.4.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+# Angular Elements Slides
+
+This is a sample library of Angular Elements components geared for a slideshow. Doesn't play well in Angular 2+ applications, but should work with other framworks (tested with vanilla HTML/JS and Vue).
+
+## Downloading
+
+Angular Elements Slides is available via NPM:
+
+```bash
+npm install nge-slides
+```
+
+Or you can use Angular Elements Slides via CDN:
+
+```HTML
+<script src="https://unpkg.com/nge-slides@0.0.0/nge-slides.js"></script>
+```
+
+## Example Usage
+
+```HTML
+<!-- Required wrapper for all slides as well as progress bar -->
+<nge-slides-wrapper>
+  <nge-slide-title title="Angular Element Slides" subtitle="Web Components Made Easy"></nge-slide-title>
+  <nge-slide-section title="Section Slide"></nge-slide-section>
+  <nge-slide title="Slide 3" content="Content can be defined via an attribute"></nge-slide>
+  <nge-slide title="Slide 4">
+    <p>Or you can put your content in as HTML</p>
+  </nge-slide>
+  <nge-slide-blank>
+    <p>A blank slide has little to no properties</p>
+    <p>All it's designed to be is an HTML passthrough</p>
+  </nge-slide-blank>
+  <nge-slide-title title="Goodbye"></nge-slide-title>
+  <nge-slides-progress-bar></nge-slides-progress-bar>
+</nge-slides-wrapper>
+```
diff --git a/angular.json b/angular.json
@@ -17,12 +17,14 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist",
+            "outputPath": "dist/staging",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "assets": [],
+            "assets": [
+              "src/package.json"
+            ],
             "styles": [],
             "scripts": []
           },

diff --git a/build.sh b/build.sh
@@ -0,0 +1,16 @@
+# Remove any dist code
+rm -rf dist
+
+# Build source code
+ng build --prod
+
+# Merge JS files
+cat dist/staging/runtime.js dist/staging/polyfills.js dist/staging/main.js > dist/nge-slides.js
+
+# Move license and readme
+mv dist/staging/package.json dist/
+cp LICENSE.md dist/
+cp README.md dist/
+
+# Remove staged build
+rm -rf dist/staging
diff --git a/package.json b/package.json
@@ -1,15 +1,32 @@
 {
   "name": "nge-slides",
+  "description": "Sample library of Angular Elements components geared for a slideshow",
   "version": "0.0.0",
+  "author": "Michael Solati mkslt04@gmail.com",
+  "homepage": "https://github.com/MichaelSolati/nge-slides/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MichaelSolati/nge-slides.git"
+  },
+  "bugs": {
+    "url": "https://github.com/MichaelSolati/nge-slides/issues"
+  },
+  "readme": "README.md",
+  "license": "MIT",
+  "keywords": [
+    "angular elements",
+    "custom elements",
+    "web components",
+    "slideshow"
+  ],
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "build": "ng build --prod",
+    "build": "sh ./build.sh",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
-  "private": true,
   "dependencies": {
     "@angular/animations": "~7.1.0",
     "@angular/common": "~7.1.0",

diff --git a/src/index.html b/src/index.html
@@ -6,21 +6,62 @@
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://npmcdn.com/vue/dist/vue.js"></script>
 </head>
 <body>
-  <nge-slides-wrapper>
-    <nge-slide-title title="Angular Element Slides" subtitle="Web Components Made Easy"></nge-slide-title>
-    <nge-slide-section title="Section Slide"></nge-slide-section>
-    <nge-slide title="Slide 3" content="Content can be defined via an attribute"></nge-slide>
-    <nge-slide title="Slide 4">
-      <p>Or you can put your content in as HTML</p>
-    </nge-slide>
-    <nge-slide-blank>
-      <p>A blank slide has little to no properties</p>
-      <p>All it's designed to be is an HTML passthrough</p>
-    </nge-slide-blank>
-    <nge-slide-title title="Slide 6"></nge-slide-title>
-    <nge-slides-progress-bar></nge-slides-progress-bar>
-  </nge-slides-wrapper>
+  <div id="vue-app">
+    <nge-slides-wrapper :handle="handle" :hashtag="hashtag">
+      <nge-slide-title :title="slides[0].title" :subtitle="slides[0].subtitle"></nge-slide-title>
+      <nge-slide-section :title="slides[1].title"></nge-slide-section>
+      <nge-slide :title="slides[2].title" :content="slides[2].content"></nge-slide>
+      <nge-slide :title="slides[3].title">
+        <p>Or you can put your content in as HTML</p>
+      </nge-slide>
+      <nge-slide-blank>
+        <p>A blank slide has little to no properties</p>
+        <p>All it's designed to be is an HTML passthrough</p>
+      </nge-slide-blank>
+      <nge-slide-title :title="slides[5].title"></nge-slide-title>
+      <nge-slides-progress-bar></nge-slides-progress-bar>
+    </nge-slides-wrapper>
+  </div>
+  <script>
+    Vue.config.ignoredElements = [
+      'nge-slides-wrapper',
+      'nge-slide-title',
+      'nge-slide-section',
+      'nge-slide',
+      'nge-slide-blank',
+      'nge-slides-progress-bar'
+    ];
+
+    const vm = new Vue({
+      el: '#vue-app',
+      data: {
+        handle: '@MichaelSolati',
+        hashtag: '#angular',
+        slides: [
+        {
+          title: 'Angular Element Slides',
+          subtitle: 'Web Components Made Easy'
+        },
+        {
+          title: 'Section Slide'
+        },
+        {
+          title: 'Slide 3',
+          content: 'Content can be defined via an attribute'
+        },
+        {
+          title: 'Slide 4'
+        },
+        {},
+        {
+          title: 'Goodbye'
+        }
+        ]
+      }
+    });
+  </script>
 </body>
 </html>
diff --git a/src/package.json b/src/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "nge-slides",
+  "description": "Sample library of Angular Elements components geared for a slideshow",
+  "version": "0.0.0",
+  "main": "nge-slides.js",
+  "author": "Michael Solati mkslt04@gmail.com",
+  "homepage": "https://github.com/MichaelSolati/nge-slides/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MichaelSolati/nge-slides.git"
+  },
+  "bugs": {
+    "url": "https://github.com/MichaelSolati/nge-slides/issues"
+  },
+  "readme": "README.md",
+  "license": "MIT",
+  "keywords": [
+    "angular elements",
+    "custom elements",
+    "web components",
+    "slideshow"
+  ],
+  "files": [
+    "LICENSE.md",
+    "nge-slides.js",
+    "package.json",
+    "README.md"
+  ]
+}