-
Notifications
You must be signed in to change notification settings - Fork 601
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: fast-website #3311
feat: fast-website #3311
Changes from all commits
a6cd644
83a3aa6
fa48c99
df92ec5
374f776
c7cb9a1
17881fe
4dcf66d
4ab354c
e569794
ac1cbfe
eb108fd
b843689
7ebd643
bdff98b
54d9f71
2e3a169
cb6b12b
a8b4c19
8ba91a1
6449ba8
ebd374d
a3f1fd7
5b42f8c
9be0ca4
8cfcbd9
08c8e9b
1bfee5c
08b5f3a
b6658cb
932208a
4997ad0
7f28cae
d08fd3f
2cc5f9e
d29f2ee
1e0af4e
c57c064
0333bee
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
{ "presets": [ "env" ] } |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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", | ||
}, | ||
], | ||
}, | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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": { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit: but, I prefer to see the dependencies near the bottom, since more often newbies want to see the authorship details and scripts when onboarding or researching. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If this is something we feel is important to standardize on, can we create an issue to discuss it? My fear is that we'll end up in a long discussion on opinions with no action without a formal resolution. |
||
"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" | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you provide a better description in the package.json? "FAST website is a culmination of marketing and documentation compiled for release to https://www.fast.design" for example?