website server enhancements

.gitignore

@@ -23,3 +23,4 @@ $RECYCLE.BIN/
 Thumbs.db
 UserInterfaceState.xcuserstate
 .env
+linters/sass-lint.html

README.md

@@ -1,17 +1,42 @@
+<p align="center">
+  <img src="https://github.com/openforge/main-website/blob/master/src/assets/logo-openforge.png?raw=true"/>
+</p>
+<p align="center">
+  <a href="http://www.openforge.io/">Official Website</a> |
+  <a href="http://www.openforge.io/opportunities">Opportunities</a> |
+  <a href="https://www.facebook.com/OpenForgeUS/">Facebook</a>
+</p>
 
-# main-website
-The home of OpenForge.io, built using Stencil.js!
+<h3 align="center">
+  Leading By Example.
+</h3>
 
-## Development
+<p align="center">
+  Working with the latest technologies, designing the best products, and sharing our knowledge with the world wide community.
+</p>
 
-### Running The Application
+# OpenForge
+
+The OpenForge Community is composed of team members and public contributors banded together for a common goal of leading by example.  We are experts in applying UI/UX and Software Architecture principles towards enhancing businesses nation (and world!) wide.
+
+In addition to providing services for our clients; it is our belief that we should also focus on benefiting the community that surrounds us. For this reason; all OpenForge initiatives (that are not client related) are Open Sourced; including our design and business consulting resources which can be found on our Website at [www.openforge.io](http://openforge.io). 
+
+If you are a community member who would like to take part of our paid (yes, we said PAID!) Open Source contributions please reach out to us via our [opportunities page](http://www.openforge.io/opportunities).   We also always encourage anyone to contribute to anything we are doing, and we hope to contribute to your projects as well!
+
+
+# Website Development 
+
+The OpenForge.io website is built using a combination of [Stencil.js](https://stenciljs.com/) by our friends at [Ionic Framework](https://ionicframework.com/), Bootstrap, Node.js, and Express.
+
+### Running This Application
 
 ```npm install```
 
 ```npm run dev --es5``` (firefox)
 
 ```npm start``` or ```npm run dev```
 
+
 ### File Structure
 **UI** components should reside in the `src/components` folder.
 
@@ -23,6 +48,7 @@ While **Page** components should reside in the `src/pages` folder. A page compon
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
 This project uses:
+- [sass-lint](https://github.com/sasstools/sass-lint) for sass linting (sass-lint.yml contains configuration)
 - [prettier](http://prettier.io/) for code formatting.
 - [tslint](https://palantir.github.io/tslint/) for linting with rules from:
   - [tslint-react](https://github.com/palantir/tslint-react)
@@ -34,6 +60,11 @@ This project uses:
 $ npm run lint
 ```
 
+CSS Linting
+```
+$ node_modules/sass-lint/bin/sass-lint.js sass-lint -c sass-lint.yml '**/*.scss' -v -q
+```
+
 #### Versioning & Changelog
 We utilize [Conventional Changelog](https://github.com/conventional-changelog/conventional-changelog) to generate a changelog from git metadata.
 

index.js

@@ -4,15 +4,28 @@
  *  In Package.json, we include a heroku-postbuild script that runs our express server; and our express server
  *  serves the static files that are built by npm build.
  */
+
 const express = require('express');
-const helmet = require ('helmet');
+const stencil = require('@stencil/core/server');
+
+// create the express app
 const app = express();
-const PORT = process.env.PORT || 3000; //heroku assigns port for you, or on local default to 3000
 
-app.use(helmet());
-app.use(express.static('www'));
+// load the stencil config and
+// express serve-side rendering middleware
+const { wwwDir, logger } = stencil.initApp({
+  app: app,
+  configPath: __dirname
+});
+
+// serve static files
+app.use(express.static(wwwDir));
+
+// set which port express it will be listening on
+const PORT = process.env.PORT || 3000; //heroku assigns port for you, or on local default to 3000
 
-app.listen(PORT, () => console.log("App listening on port ", PORT));
+// start listening and handling requests
+app.listen(PORT, () => logger.info(`server-side rendering listening on port: ${ PORT }`));
 
 /**
  * For future usage of cookies; we will use security settings as defined here

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openforge/main-website",
   "private": true,
-  "version": "0.1.0",
+  "version": "1.0.1",
   "description": "Website for OpenForge",
   "files": [
     "dist/"
@@ -15,15 +15,17 @@
     "start": "npm run build && node index.js",
     "test": "jest --no-cache",
     "test.watch": "jest --watch --no-cache",
-    "version": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md"
+    "version": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
+    "st:generate": "node scripts/st-generate.js"
   },
   "engines": {
     "node": "8.9.4",
     "npm": "5.6.0"
   },
   "dependencies": {
-    "@stencil/core": "^0.7.26",
-    "@stencil/router": "^0.1.0",
+    "@stencil/core": "^0.9.1",
+    "@stencil/router": "^0.1.7",
+    "@stencil/sass": "0.0.3",
     "bootstrap": "^4.1.0",
     "express": "^4.16.3",
     "helmet": "^3.12.1",
@@ -34,7 +36,6 @@
     "@commitlint/cli": "^6.1.3",
     "@commitlint/config-conventional": "^6.1.3",
     "@stencil/dev-server": "latest",
-    "@stencil/sass": "0.0.3",
     "@stencil/utils": "latest",
     "@types/jest": "^21.1.10",
     "@types/smoothscroll-polyfill": "^0.3.0",
@@ -45,10 +46,13 @@
     "jest": "^21.2.1",
     "lint-staged": "^7.0.4",
     "prettier": "^1.12.1",
+    "rxjs-compat": "^6.1.0",
+    "sass-lint": "^1.12.1",
     "tslint": "^5.9.1",
     "tslint-config-airbnb": "^5.8.0",
     "tslint-config-prettier": "^1.12.0",
-    "tslint-react": "^3.5.1"
+    "tslint-react": "^3.5.1",
+    "typescript": "^2.8.3"
   },
   "repository": {
     "type": "git",

sass-lint.yml

@@ -0,0 +1,60 @@
+###################################
+## Lincoln Loop Base Sass Lint File
+###################################
+# Linter Options
+# rules @ https://github.com/sasstools/sass-lint/tree/master/docs/rules
+# To use:  sass-lint -c sass-lint.yml '**/*.scss' -v -q
+
+options:
+  # Don't merge default rules
+  merge-default-rules: false
+  output-file: 'linters/sass-lint.html'
+  formatter: html
+  max-warnings: 50
+
+files:
+  ignore: 
+    - 'node_modules/**/*.*'
+    - 'sass/vendor/**/*.*'
+# Rule Configuration
+rules:
+  brace-style:
+    - 2
+    -
+      style: '1tbs'
+  class-name-format:
+    - 2
+    - convention: hyphenatedlowercase
+  empty-args: 2
+  # Extends cause trouble
+  no-extends: 2
+  mixin-name-format:
+    - 2
+    -
+      convention: hyphenatedlowercase
+  nesting-depth:
+    - 1
+    -
+      max-depth: 2
+  no-duplicate-properties: 1
+  no-empty-rulesets: 2
+  no-debug: 1
+  no-ids: 1
+  no-misspelled-properties: 2
+  one-declaration-per-line: 2
+  hex-notation:
+    - 2
+    -
+      style: uppercase
+  indentation:
+    - 2
+    -
+      size: 2
+  single-line-per-selector: 1
+  space-around-operator: 2
+  space-before-brace: 2
+  space-before-bang: 2
+  space-before-colon: 2
+  space-between-parens: 2
+  zero-unit:
+    - 2

scripts/st-generate.js

@@ -0,0 +1,53 @@
+/*
+To setup, place in scripts/generate.js and add
+"st:generate": "node scripts/generate.js"
+To your npm scripts.
+To generate a component in src/components/ run
+npm run st:generate component my-component
+*/
+
+const fs = require('fs');
+
+const capitalize = s => s.charAt(0).toUpperCase() + s.substr(1);
+
+const av = process.argv;
+
+const type = av[2];
+const name = av[3];
+
+const componentClassName = name.split('-').map(p => capitalize(p)).join('');
+
+const jsTemplate = `
+import { Component } from '@stencil/core';
+@Component({
+  tag: '${name}',
+  styleUrl: '${name}.scss'
+})
+export class ${componentClassName} {
+  render() {
+    return (<slot />);
+  }
+}
+`
+
+const scssTemplate = `
+${name} {
+}
+`
+
+const outPath = `src/components/${name}`;
+
+try {
+    fs.mkdirSync(outPath);
+} catch(e) {
+    console.error('Unable to create component')
+    throw e;
+}
+
+try {
+    fs.writeFileSync(`${outPath}/${name}.tsx`, jsTemplate.trim());
+    fs.writeFileSync(`${outPath}/${name}.scss`, scssTemplate.trim());
+} catch(e) {
+    console.error('Unable to create source files');
+    throw e;
+}

src/components.d.ts

@@ -135,7 +135,6 @@ declare global {
 
   namespace StencilComponents {
     interface AppHeroHome {
-      'hideLink': boolean;
       'textNoWrap': boolean;
     }
   }
@@ -159,46 +158,6 @@ declare global {
   }
   namespace JSXElements {
     export interface AppHeroHomeAttributes extends HTMLAttributes {
-      'hideLink'?: boolean;
-      'textNoWrap'?: boolean;
-    }
-  }
-}
-
-
-declare global {
-
-  namespace StencilComponents {
-    interface AppHero {
-      'backgroundUrl': string;
-      'hideLink': boolean;
-      'linkUrl': string;
-      'textNoWrap': boolean;
-    }
-  }
-
-  interface HTMLAppHeroElement extends StencilComponents.AppHero, HTMLStencilElement {}
-
-  var HTMLAppHeroElement: {
-    prototype: HTMLAppHeroElement;
-    new (): HTMLAppHeroElement;
-  };
-  interface HTMLElementTagNameMap {
-    'app-hero': HTMLAppHeroElement;
-  }
-  interface ElementTagNameMap {
-    'app-hero': HTMLAppHeroElement;
-  }
-  namespace JSX {
-    interface IntrinsicElements {
-      'app-hero': JSXElements.AppHeroAttributes;
-    }
-  }
-  namespace JSXElements {
-    export interface AppHeroAttributes extends HTMLAttributes {
-      'backgroundUrl'?: string;
-      'hideLink'?: boolean;
-      'linkUrl'?: string;
       'textNoWrap'?: boolean;
     }
   }
@@ -280,6 +239,39 @@ declare global {
 }
 
 
+declare global {
+
+  namespace StencilComponents {
+    interface AppNavHeader {
+
+    }
+  }
+
+  interface HTMLAppNavHeaderElement extends StencilComponents.AppNavHeader, HTMLStencilElement {}
+
+  var HTMLAppNavHeaderElement: {
+    prototype: HTMLAppNavHeaderElement;
+    new (): HTMLAppNavHeaderElement;
+  };
+  interface HTMLElementTagNameMap {
+    'app-nav-header': HTMLAppNavHeaderElement;
+  }
+  interface ElementTagNameMap {
+    'app-nav-header': HTMLAppNavHeaderElement;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      'app-nav-header': JSXElements.AppNavHeaderAttributes;
+    }
+  }
+  namespace JSXElements {
+    export interface AppNavHeaderAttributes extends HTMLAttributes {
+
+    }
+  }
+}
+
+
 declare global {
 
   namespace StencilComponents {

src/components/app-cta/app-cta.tsx

@@ -8,13 +8,6 @@ export class AppCta {
   @Prop() linkUrl: string;
   @Prop() hideButton: boolean = false;
 
-  componentDidLoad() {
-    if (this.hideButton) {
-      const button = document.getElementsByClassName('btn btn-primary');
-      button['0'].style.visibility = 'hidden';
-    }
-  }
-
   render() {
     return (
       <aside class="cta px-2 text-center text-white">
@@ -24,7 +17,7 @@ export class AppCta {
           </h3>
 
           {this.hideButton ? null : (
-            <a href={this.linkUrl} class="btn btn-primary" target="_blank">
+            <a href={this.linkUrl} class="cta-link btn btn-primary">
               <slot name="link" />
             </a>
           )}