Стартовый шаблон

.browserlistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.eslintignore

@@ -0,0 +1,3 @@
+/public/
+/dist/
+jsconfig.json

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  root: true,
+  parserOptions: {
+    sourceType: 'module',
+  },
+  extends: ['standard', 'prettier', 'prettier/standard'],
+  rules: {
+    'no-unused-vars': 1,
+  },
+};

.gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/public/
+/dist/
+yarn-error.log

.prettierignore

@@ -0,0 +1,5 @@
+/node_modules/**
+/public/
+/dist/
+.browserlistrc
+jsconfig.json

.stylelintignore

@@ -0,0 +1,4 @@
+/node_modules/**
+/public/
+/dist/
+jsconfig.json

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "msjsdiag.debugger-for-chrome",
+    "esbenp.prettier-vscode",
+    "mrmlnc.vscode-scss",
+    "stylelint.vscode-stylelint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,63 @@
+{
+  "editor.minimap.enabled": true,
+  "breadcrumbs.enabled": true,
+  "window.menuBarVisibility": "default",
+  "workbench.activityBar.visible": true,
+  "editor.tabSize": 2,
+  "editor.fontLigatures": true,
+  "editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
+  "editor.tokenColorCustomizations": {
+    "textMateRules": [
+      {
+        "scope": [
+          //following will be in italic (=FlottFlott)
+          "comment",
+          "entity.name.type.class", //class names
+          "keyword", //import, export, return…
+          "constant", //String, Number, Boolean…, this, super
+          "storage.modifier", //static keyword
+          "storage.type.class.js" //class keyword
+        ],
+        "settings": {
+          "fontStyle": "italic"
+        }
+      },
+      {
+        "scope": [
+          //following will be excluded from italics (VSCode has some defaults for italics)
+          "invalid",
+          "keyword.operator",
+          "constant.numeric.css",
+          "keyword.other.unit.px.css",
+          "constant.numeric.decimal.js",
+          "constant.numeric.json"
+        ],
+        "settings": {
+          "fontStyle": ""
+        }
+      }
+    ]
+  },
+  "debug.console.fontSize": 20,
+  "markdown.preview.fontSize": 20,
+  "terminal.integrated.fontSize": 16,
+  "emmet.preferences": {
+    "filter.commentBefore": "<!-- [CLASS] --> \n",
+    "filter.commentAfter": " <!-- ./ End of [CLASS] -->"
+  },
+  "git.autofetch": true,
+  "turboConsoleLog.addSemicolonInTheEnd": true,
+  "window.zoomLevel": 0,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "eslint.run": "onSave",
+  // for prettier
+  "files.associations": {
+    "*.hbs": "html"
+  },
+  "editor.fontSize": 16
+  // for exclude jsconfig.json
+  // "typescript.validate.enable": false
+}

.vscode/snippets.code-snippets

@@ -0,0 +1,114 @@
+{
+  // Place your Рабочая область StartTemplate-paginated-JS- snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
+  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
+  // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
+  // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
+  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
+  // Placeholders with the same ids are connected.
+  // Example:
+  // "Print to console": {
+  // 	"scope": "javascript,typescript",
+  // 	"prefix": "log",
+  // 	"body": [
+  // 		"console.log('$1');",
+  // 		"$2"
+  // 	],
+  // 	"description": "Log output to console"
+  // }
+
+  // HTML
+  "Create section and container": {
+    "scope": "html",
+    "prefix": "s!",
+    "body": [
+      "<!-- $1 -->",
+      "<section class=\"$1-section\">",
+      "\t<div class=\"container\">",
+      "\t\t$0",
+      "\t</div> <!-- ./ End of container -->",
+      "</section> <!-- ./ End of $1 -->"
+    ],
+    "description": "Create section and container"
+  },
+  "Picture": {
+    "scope": "html",
+    "prefix": "p!",
+    "body": [
+      "<picture class=\"$1\">",
+      "\t<source srcset=\"images/$2.webp\" />",
+      "\t<img src=\"../img/$2\" />",
+      "</picture>"
+    ],
+    "description": "Create picture"
+  },
+  // SCSS
+  "max-w": {
+    "scope": "scss",
+    "prefix": "_max",
+    "body": ["@include max-width($1) {", "  $2", "}"],
+    "description": "Media Max Width"
+  },
+  "min-w": {
+    "scope": "scss",
+    "prefix": "_min",
+    "body": ["@include min-width($1) {", "  $2", "}"],
+    "description": "Media Min Width"
+  },
+  "max-h": {
+    "scope": "scss",
+    "prefix": "_maxH",
+    "body": ["@include max-height($1) {", "  $2", "}"],
+    "description": "Media Max Height"
+  },
+  "min-h": {
+    "scope": "scss",
+    "prefix": "_minH",
+    "body": ["@include min-height($1) {", "  $2", "}"],
+    "description": "Media Min Height"
+  },
+  "max-wh": {
+    "scope": "scss",
+    "prefix": "_maxWH",
+    "body": ["@include max-width-and-height($1) {", "  $2", "}"],
+    "description": "Media Max Height"
+  },
+  "min-wh": {
+    "scope": "scss",
+    "prefix": "_minWH",
+    "body": ["@include min-width-and-height($1) {", "  $2", "}"],
+    "description": "Media Min Height"
+  },
+  "ratio": {
+    "scope": "scss",
+    "prefix": "_ratio",
+    "body": [
+      "--size: $1;",
+      "",
+      "width: var(--size);",
+      "min-width: var(--size);",
+      "height: var(--size);",
+      "min-height: var(--size);",
+    ],
+    "description": "For same ratio"
+  },
+  // JS
+  "class": {
+    "scope": "javascript",
+    "prefix": "class!",
+    "body": [
+      "export default class $1 {",
+      "\tconstructor(options) {",
+      "\t\t",
+      "\t\tthis.init();",
+      "\t}" ,
+      "",
+      "\tinit() {",
+      "\t\t$5",
+      "\t}",
+      "}",
+      "const $2 = document.querySelector('$3');",
+      "const $4 = new $1($2);"
+    ],
+    "description": "Class template"
+  }
+}

README.md

@@ -0,0 +1,85 @@
+# boilerplate
+
+Simple webpack configuration with babel, sass and webpack-dev-server.
+
+Js and css will minify in production mode.
+
+## Development mode
+
+```
+yarn dev
+```
+
+In this mode _.css and _.js will remove from /dist folder.
+
+## Production mode
+
+```
+yarn build
+```
+
+Assets (_.css and _.js) will save in /dist folder.
+
+## Основная структура страницы
+
+```
+<body>
+  <div class="content">
+    {{> sections/header }}
+
+    <main>
+      <!-- section -->
+      <!-- section -->
+      <!-- section -->
+    </main>
+
+    {{> sections/footer }}
+  </div>
+</body>
+```
+
+## Handebars
+
+Все компоненты хранятся в `src/modules`.
+
+если компонент находится в `src/modules/examples/example.hbs`, то получить его можно
+
+```
+{{> examples/example }}
+```
+
+## Модальные окна
+
+Реализация модальных окон сделана в `src/js/components/Modal.js`
+
+Класс модальных окон добавлен в window, у класса есть статические методы
+
+```
+Modal.close(id)
+Modal.open(id)
+Modal.setCloseCallback(id, callback)
+Modal.setOpenCallback(id, callback)
+```
+
+`id` это id html элемента окна
+
+Пример использования API
+
+```
+Modal.setOpenCallback('example-id', exampleCallback);
+Modal.open('example-id');
+
+function exampleCallback($target) {
+  console.log($target);
+}
+
+const $modal = document.querySelector('#example-id');
+
+$modal.modal.open();
+
+console.log($modal.modal) // => экземпляр класса Modal;
+```
+
+## Дропдауны
+
+Все то же самое, только имя класса Dropdown

aliases.config.js

@@ -0,0 +1,65 @@
+const path = require('path');
+const fs = require('fs');
+const prettier = require('prettier');
+
+const aliases = {
+  '@': '.',
+  '@src': 'src',
+  '@img': 'src/img',
+  '@sections': 'src/modules/sections',
+  '@scss': 'src/scss',
+  '@modules': 'src/js/modules',
+  '@components': 'src/js/components',
+  '@helpers': 'src/js/helpers',
+};
+
+module.exports = {
+  webpack: {},
+  jsconfig: {},
+};
+
+for (const alias in aliases) {
+  const aliasTo = aliases[alias];
+  module.exports.webpack[alias] = resolveSrc(aliasTo);
+  module.exports.jsconfig[alias + '/*'] = [aliasTo + '/*'];
+  module.exports.jsconfig[alias] = aliasTo.includes('/index.')
+    ? [aliasTo]
+    : [
+        aliasTo + '/index.js',
+        aliasTo + '/index.json',
+        aliasTo + '/index.scss',
+        aliasTo + '/index.css',
+      ];
+}
+
+const jsconfigTemplate = require('./jsconfig.template') || {};
+const jsconfigPath = path.resolve(__dirname, 'jsconfig.json');
+
+fs.writeFile(
+  jsconfigPath,
+  prettier.format(
+    JSON.stringify({
+      ...jsconfigTemplate,
+      compilerOptions: {
+        ...(jsconfigTemplate.compilerOptions || {}),
+        paths: module.exports.jsconfig,
+      },
+    }),
+    {
+      ...require('./prettier.config.js'),
+      parser: 'json',
+    }
+  ),
+  (error) => {
+    if (error) {
+      console.error(
+        'Error while creating jsconfig.json from aliases.config.js.'
+      );
+      throw error;
+    }
+  }
+);
+
+function resolveSrc(_path) {
+  return path.resolve(__dirname, _path);
+}

babel.config.js

@@ -0,0 +1,19 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: [
+      [
+        '@babel/preset-env',
+        {
+          useBuiltIns: 'usage',
+          corejs: '3.8.0',
+        },
+      ],
+    ],
+    plugins: [
+      ['@babel/plugin-proposal-optional-chaining'],
+      ['@babel/plugin-proposal-nullish-coalescing-operator'],
+    ],
+  };
+};