diff --git a/bin/www b/bin/www index fbe6089..a2fd294 100755 --- a/bin/www +++ b/bin/www @@ -22,7 +22,6 @@ const server = http.createServer(app); /** * Listen on provided port, on all network interfaces. */ - server.listen(port); server.on('error', onError); server.on('listening', onListening); @@ -30,7 +29,6 @@ server.on('listening', onListening); /** * Normalize a port into a number, string, or false. */ - function normalizePort(val) { const port = parseInt(val, 10); @@ -50,7 +48,6 @@ function normalizePort(val) { /** * Event listener for HTTP server "error" event. */ - function onError(error) { if (error.syscall !== 'listen') { throw error; @@ -78,7 +75,6 @@ function onError(error) { /** * Event listener for HTTP server "listening" event. */ - function onListening() { const addr = server.address(); const bind = typeof addr === 'string' diff --git a/package.json b/package.json index 76ee838..a964f85 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "start": "nodemon ./bin/www", "test": "mocha --recursive ./test", "lint": "eslint --fix --cache ./src/**/*.js", - "build": "webpack ./src/frontend/js/app.js --o='./public/dist/bundle.js' --output-library=Docs -d", + "build": "webpack ./src/frontend/js/app.js --o='./public/dist/bundle.js' --output-library=Docs -d --watch", "precommit": "yarn lint && yarn test --exit" }, "dependencies": { @@ -19,6 +19,7 @@ "multer": "^1.3.1", "nedb": "^1.8.0", "nodemon": "^1.18.3", + "normalize.css": "^8.0.0", "twig": "~0.10.3", "uuid4": "^1.0.0" }, diff --git a/public/dist/bundle.css b/public/dist/bundle.css index aa606c6..eb27336 100644 --- a/public/dist/bundle.css +++ b/public/dist/bundle.css @@ -1 +1 @@ -body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,Verdana}a{color:#00b7ff} \ No newline at end of file +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{-webkit-text-size-adjust:100%;line-height:1.15}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--color-line-gray:#e8e8eb;--color-link-active:#388ae5;--color-text-main:#1d202b;--color-text-second:#7b7e89;--layout-padding-horisontal:40px;--layout-width-aside:250px;--layout-width-main-col:650px}.docs{display:-webkit-box;display:-ms-flexbox;display:flex;padding:0 40px;padding:0 var(--layout-padding-horisontal)}.docs__aside{width:250px;width:var(--layout-width-aside)}.docs__content{-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2}.docs__content-inner{margin:0 auto;max-width:650px;max-width:var(--layout-width-main-col)}.docs__aside,.docs__content{padding:40px 0}.docs-header{border-bottom:1px solid #e8e8eb;border-bottom:1px solid var(--color-line-gray);display:-webkit-box;display:-ms-flexbox;display:flex;font-size:15.8px;line-height:50px;padding:0 40px;padding:0 var(--layout-padding-horisontal)}.docs-header a{color:inherit;display:inline-block;text-decoration:none}.docs-header a:hover{color:#388ae5;color:var(--color-link-active)}.docs-header__logo{font-weight:700}.docs-header__menu{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 0 0 auto}.docs-header__menu li{list-style:none;margin-left:20px}.docs-aside{color:#7b7e89;color:var(--color-text-second);font-size:15px}.docs-aside a{text-decoration:none}.docs-aside__section{margin-bottom:30px}.docs-aside__section-title{color:#388ae5;color:var(--color-link-active);margin-bottom:15px}.docs-aside__section-list{list-style:none;padding-left:0}.docs-aside__section-list a{color:inherit;display:inline-block;padding:8px 0}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;color:#1d202b;color:var(--color-text-main);font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Helvetica,Arial,Verdana} \ No newline at end of file diff --git a/src/frontend/styles/components/aside.pcss b/src/frontend/styles/components/aside.pcss new file mode 100644 index 0000000..790e9f4 --- /dev/null +++ b/src/frontend/styles/components/aside.pcss @@ -0,0 +1,28 @@ +.docs-aside { + font-size: 15px; + color: var(--color-text-second); + + a { + text-decoration: none; + } + + &__section { + margin-bottom: 30px; + + &-title { + margin-bottom: 15px; + color: var(--color-link-active); + } + + &-list { + padding-left: 0; + list-style: none; + + a { + display: inline-block; + color: inherit; + padding: 8px 0; + } + } + } +} diff --git a/src/frontend/styles/components/header.pcss b/src/frontend/styles/components/header.pcss new file mode 100644 index 0000000..7cf5e43 --- /dev/null +++ b/src/frontend/styles/components/header.pcss @@ -0,0 +1,31 @@ +.docs-header { + font-size: 15.8px; + border-bottom: 1px solid var(--color-line-gray); + line-height: 50px; + display: flex; + padding: 0 var(--layout-padding-horisontal); + + a { + text-decoration: none; + color: inherit; + display: inline-block; + + &:hover { + color: var(--color-link-active); + } + } + + &__logo { + font-weight: bold; + } + + &__menu { + display: flex; + margin: 0 0 0 auto; + + li { + list-style: none; + margin-left: 20px; + } + } +} diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss new file mode 100644 index 0000000..2ef5c5c --- /dev/null +++ b/src/frontend/styles/layout.pcss @@ -0,0 +1,22 @@ +.docs { + display: flex; + padding: 0 var(--layout-padding-horisontal); + + &__aside { + width: var(--layout-width-aside); + } + + &__content { + flex-grow: 2; + + &-inner { + max-width: var(--layout-width-main-col); + margin: 0 auto; + } + } + + &__aside, + &__content { + padding: 40px 0; + } +} diff --git a/src/frontend/styles/main.pcss b/src/frontend/styles/main.pcss index 7a5de2f..d1a492d 100644 --- a/src/frontend/styles/main.pcss +++ b/src/frontend/styles/main.pcss @@ -1,7 +1,12 @@ +@import url('../../../node_modules/normalize.css'); +@import url('vars.pcss'); +@import url('layout.pcss'); +@import url('components/header.pcss'); +@import url('components/aside.pcss'); + body { font-family: system-ui, Helvetica, Arial, Verdana; -} - -a { - color: #00B7FF; + color: var(--color-text-main); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss new file mode 100644 index 0000000..c23d59c --- /dev/null +++ b/src/frontend/styles/vars.pcss @@ -0,0 +1,13 @@ +:root { + --color-text-main: #1D202B; + --color-text-second: #7B7E89; + --color-line-gray: #E8E8EB; + --color-link-active: #388AE5; + + /** + * Site layout sizes + */ + --layout-padding-horisontal: 40px; + --layout-width-aside: 250px; + --layout-width-main-col: 650px; +} diff --git a/src/views/components/aside.twig b/src/views/components/aside.twig new file mode 100644 index 0000000..1888f57 --- /dev/null +++ b/src/views/components/aside.twig @@ -0,0 +1,19 @@ +
+
+ + Base concepts + + +
+
diff --git a/src/views/components/header.twig b/src/views/components/header.twig new file mode 100644 index 0000000..45b8cfb --- /dev/null +++ b/src/views/components/header.twig @@ -0,0 +1,27 @@ +
+ + +
diff --git a/src/views/index.twig b/src/views/index.twig index 20372e3..36b78e1 100644 --- a/src/views/index.twig +++ b/src/views/index.twig @@ -1,6 +1,6 @@ {% extends 'layout.twig' %} {% block body %} -

{{title}}

+ {{title}}

Welcome to {{title}}

{% endblock %} diff --git a/src/views/layout.twig b/src/views/layout.twig index aab39ab..9d324f2 100644 --- a/src/views/layout.twig +++ b/src/views/layout.twig @@ -3,9 +3,22 @@ {{ title }} - - {% block body %}{% endblock %} + {% include "components/header.twig" %} +
+ +
+
+ {% block body %}{% endblock %} +
+
+
+ + diff --git a/yarn.lock b/yarn.lock index 2dd2827..a52430d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3936,6 +3936,10 @@ normalize-url@^3.0.0: version "3.3.0" resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559" +normalize.css@^8.0.0: + version "8.0.0" + resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.0.tgz#14ac5e461612538a4ce9be90a7da23f86e718493" + npm-bundled@^1.0.1: version "1.0.5" resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"