Merge pull request #3311 from microsoft/feature/fast-frame

feat: add fast-website

lerna.json

@@ -4,7 +4,8 @@
     "sites/fast-color-explorer",
     "sites/fast-component-explorer",
     "sites/fast-creator",
-    "sites/fast-tooling-examples"
+    "sites/fast-tooling-examples",
+    "sites/fast-website"
   ],
   "version": "independent",
   "npmClient": "yarn",

package.json

@@ -9,7 +9,7 @@
   "license": "MIT",
   "private": true,
   "workspaces": {
-    "packages": ["packages/**/*", "sites/fast-color-explorer", "sites/fast-component-explorer", "sites/fast-creator", "sites/site-utilities", "sites/fast-tooling-examples"],
+    "packages": ["packages/**/*", "sites/fast-color-explorer", "sites/fast-component-explorer", "sites/fast-creator", "sites/site-utilities", "sites/fast-tooling-examples", "sites/fast-website"],
     "nohoist": ["**/react-syntax-highlighter", "**/@types/chai", "**/@types/jest", "**/@types/karma", "**/@types/mocha"]
   },
   "repository": {
@@ -45,7 +45,7 @@
       "build/helpers/*.ts"
     ],
     "coverageReporters": [
-      "json", 
+      "json",
       [
         "lcov", {"projectRoot": "."}
       ]

sites/fast-website/.babelrc

@@ -0,0 +1 @@
+{ "presets": [ "env" ] }

sites/fast-website/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+    extends: ["@microsoft/eslint-config-fast-dna", "prettier"],
+    rules: {
+        "@typescript-eslint/no-unused-vars": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/typedef": [
+            "error",
+            {
+                arrowParameter: "false",
+            },
+        ],
+    },
+};

sites/fast-website/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "fast-website",
+  "version": "1.0.0",
+  "description": "fast website",
+  "main": "index.js",
+  "private": true,
+  "license": "MIT",
+  "devDependencies": {
+    "@microsoft/fast-element": "^0.10.2",
+    "@microsoft/fast-foundation": "^1.1.2",
+    "@microsoft/fast-web-utilities": "^4.5.1",
+    "@microsoft/fast-components": "^1.1.2",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.1.0",
+    "babel-preset-env": "^1.7.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "prettier": "2.0.2",
+    "svg-inline-loader": "^0.8.2",
+    "terser-webpack-plugin": "^3.0.1",
+    "ts-loader": "^7.0.2",
+    "typescript": "^3.8.3",
+    "webpack": "^4.43.0",
+    "webpack-dev-server": "^3.10.3",
+    "webpack-merge": "^4.2.2"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --config=./webpack.dev.js --history-api-fallback --progress",
+    "build": "webpack --config=./webpack.prod.js",
+    "prettier": "prettier --config ../../.prettierrc --write \"**/*.ts\"",
+    "prettier:diff": "prettier --config ../../.prettierrc \"**/*.ts\" --list-different"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Microsoft/fast-dna.git"
+  },
+  "author": "Microsoft"
+}

sites/fast-website/src/app/components/background-design/background-design.styles.ts

@@ -0,0 +1,45 @@
+import { css } from "@microsoft/fast-element";
+import { display } from "@microsoft/fast-foundation";
+import { neutralFillRestBehavior } from "@microsoft/fast-components";
+
+export const BackgroundDesignStyles = css`
+    ${display("block")} :host {
+        contain: content;
+        height: 99vh; /* https://developers.google.com/web/updates/2016/12/url-bar-resizing */
+        isolation: isolate;
+        position: fixed;
+        z-index: 0;
+        left: 0;
+        top: 0;
+        width: 100%;
+    }
+
+    :host .background-image {
+        align-items: center;
+        display: flex;
+        height: 100%;
+        justify-content: center;
+        position: relative;
+        width: 100%;
+    }
+
+    :host .background-image::after {
+        background: var(--background-color);
+        content: "";
+        display: block;
+        height: 100%;
+        left: 0;
+        opacity: 0.45;
+        position: absolute;
+        top: 0;
+        width: 100%;
+    }
+
+    :host .background-image canvas {
+        height: auto;
+        min-width: 1440px;
+        object-fit: cover;
+        object-position: 50% 50%;
+        width: 100%;
+    }
+`.withBehaviors(neutralFillRestBehavior);

sites/fast-website/src/app/components/background-design/background-design.template.ts

@@ -0,0 +1,10 @@
+import { html, ref } from "@microsoft/fast-element";
+import { BackgroundDesign } from "./background-design";
+
+export const BackgroundDesignTemplate = html<BackgroundDesign>`
+    <template>
+        <div class="background-image">
+            <canvas ${ref("canvas")}></canvas>
+        </div>
+    </template>
+`;