From 1051f72bebb3f46d93dea4c1a14fdb1e26bc1a4a Mon Sep 17 00:00:00 2001 From: Toby Date: Mon, 8 Jul 2024 00:34:17 +0400 Subject: [PATCH 01/12] Add Vite --- .gitignore | 24 +++ counter.js | 9 + index.html | 13 ++ javascript.svg | 1 + main.js | 24 +++ package-lock.json | 534 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 20 ++ public/vite.svg | 1 + style.css | 96 +++++++++ vite.config.js | 19 ++ 10 files changed, 741 insertions(+) create mode 100644 .gitignore create mode 100644 counter.js create mode 100644 index.html create mode 100644 javascript.svg create mode 100644 main.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/vite.svg create mode 100644 style.css create mode 100644 vite.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/counter.js b/counter.js new file mode 100644 index 0000000..881e2d7 --- /dev/null +++ b/counter.js @@ -0,0 +1,9 @@ +export function setupCounter(element) { + let counter = 0 + const setCounter = (count) => { + counter = count + element.innerHTML = `count is ${counter}` + } + element.addEventListener('click', () => setCounter(counter + 1)) + setCounter(0) +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..3d08438 --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite App + + +
+ + + diff --git a/javascript.svg b/javascript.svg new file mode 100644 index 0000000..f9abb2b --- /dev/null +++ b/javascript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..b400b4e --- /dev/null +++ b/main.js @@ -0,0 +1,24 @@ +import './style.css' +import javascriptLogo from './javascript.svg' +import viteLogo from '/vite.svg' +import { setupCounter } from './counter.js' + +document.querySelector('#app').innerHTML = ` +
+ + + + + + +

Hello Vite!

+
+ +
+

+ Click on the Vite logo to learn more +

+
+` + +setupCounter(document.querySelector('#counter')) diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..bf3f12c --- /dev/null +++ b/package-lock.json @@ -0,0 +1,534 @@ +{ + "name": "practikum_project", + "version": "0.0.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@esbuild/aix-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", + "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==", + "optional": true + }, + "@esbuild/android-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz", + "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==", + "optional": true + }, + "@esbuild/android-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz", + "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==", + "optional": true + }, + "@esbuild/android-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz", + "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==", + "optional": true + }, + "@esbuild/darwin-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz", + "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==", + "optional": true + }, + "@esbuild/darwin-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz", + "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==", + "optional": true + }, + "@esbuild/freebsd-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz", + "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==", + "optional": true + }, + "@esbuild/freebsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz", + "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==", + "optional": true + }, + "@esbuild/linux-arm": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz", + "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==", + "optional": true + }, + "@esbuild/linux-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz", + "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==", + "optional": true + }, + "@esbuild/linux-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz", + "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==", + "optional": true + }, + "@esbuild/linux-loong64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz", + "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==", + "optional": true + }, + "@esbuild/linux-mips64el": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz", + "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==", + "optional": true + }, + "@esbuild/linux-ppc64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz", + "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==", + "optional": true + }, + "@esbuild/linux-riscv64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz", + "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==", + "optional": true + }, + "@esbuild/linux-s390x": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz", + "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==", + "optional": true + }, + "@esbuild/linux-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz", + "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==", + "optional": true + }, + "@esbuild/netbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz", + "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==", + "optional": true + }, + "@esbuild/openbsd-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz", + "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==", + "optional": true + }, + "@esbuild/sunos-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz", + "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==", + "optional": true + }, + "@esbuild/win32-arm64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz", + "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==", + "optional": true + }, + "@esbuild/win32-ia32": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz", + "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==", + "optional": true + }, + "@esbuild/win32-x64": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz", + "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==", + "optional": true + }, + "@rollup/rollup-android-arm-eabi": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz", + "integrity": "sha512-Tya6xypR10giZV1XzxmH5wr25VcZSncG0pZIjfePT0OVBvqNEurzValetGNarVrGiq66EBVAFn15iYX4w6FKgQ==", + "optional": true + }, + "@rollup/rollup-android-arm64": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.18.0.tgz", + "integrity": "sha512-avCea0RAP03lTsDhEyfy+hpfr85KfyTctMADqHVhLAF3MlIkq83CP8UfAHUssgXTYd+6er6PaAhx/QGv4L1EiA==", + "optional": true + }, + "@rollup/rollup-darwin-arm64": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.18.0.tgz", + "integrity": "sha512-IWfdwU7KDSm07Ty0PuA/W2JYoZ4iTj3TUQjkVsO/6U+4I1jN5lcR71ZEvRh52sDOERdnNhhHU57UITXz5jC1/w==", + "optional": true + }, + "@rollup/rollup-darwin-x64": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.18.0.tgz", + "integrity": "sha512-n2LMsUz7Ynu7DoQrSQkBf8iNrjOGyPLrdSg802vk6XT3FtsgX6JbE8IHRvposskFm9SNxzkLYGSq9QdpLYpRNA==", + "optional": true + }, + "@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.18.0.tgz", + "integrity": "sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==", + "optional": true + }, + "@rollup/rollup-linux-arm-musleabihf": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.18.0.tgz", + "integrity": "sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==", + "optional": true + }, + "@rollup/rollup-linux-arm64-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.18.0.tgz", + "integrity": "sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==", + "optional": true + }, + "@rollup/rollup-linux-arm64-musl": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.18.0.tgz", + "integrity": "sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==", + "optional": true + }, + "@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.18.0.tgz", + "integrity": "sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==", + "optional": true + }, + "@rollup/rollup-linux-riscv64-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.18.0.tgz", + "integrity": "sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==", + "optional": true + }, + "@rollup/rollup-linux-s390x-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.18.0.tgz", + "integrity": "sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==", + "optional": true + }, + "@rollup/rollup-linux-x64-gnu": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.18.0.tgz", + "integrity": "sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==", + "optional": true + }, + "@rollup/rollup-linux-x64-musl": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.18.0.tgz", + "integrity": "sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==", + "optional": true + }, + "@rollup/rollup-win32-arm64-msvc": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.18.0.tgz", + "integrity": "sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==", + "optional": true + }, + "@rollup/rollup-win32-ia32-msvc": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.18.0.tgz", + "integrity": "sha512-Txjh+IxBPbkUB9+SXZMpv+b/vnTEtFyfWZgJ6iyCmt2tdx0OF5WhFowLmnh8ENGNpfUlUZkdI//4IEmhwPieNg==", + "optional": true + }, + "@rollup/rollup-win32-x64-msvc": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.18.0.tgz", + "integrity": "sha512-UOo5FdvOL0+eIVTgS4tIdbW+TtnBLWg1YBCcU2KWM7nuNwRz9bksDX1bekJJCpu25N1DVWaCwnT39dVQxzqS8g==", + "optional": true + }, + "@types/estree": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==" + }, + "copy-anything": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", + "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", + "dev": true, + "requires": { + "is-what": "^3.14.1" + } + }, + "errno": { + "version": "0.1.8", + "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", + "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", + "dev": true, + "optional": true, + "requires": { + "prr": "~1.0.1" + } + }, + "esbuild": { + "version": "0.21.5", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", + "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==", + "requires": { + "@esbuild/aix-ppc64": "0.21.5", + "@esbuild/android-arm": "0.21.5", + "@esbuild/android-arm64": "0.21.5", + "@esbuild/android-x64": "0.21.5", + "@esbuild/darwin-arm64": "0.21.5", + "@esbuild/darwin-x64": "0.21.5", + "@esbuild/freebsd-arm64": "0.21.5", + "@esbuild/freebsd-x64": "0.21.5", + "@esbuild/linux-arm": "0.21.5", + "@esbuild/linux-arm64": "0.21.5", + "@esbuild/linux-ia32": "0.21.5", + "@esbuild/linux-loong64": "0.21.5", + "@esbuild/linux-mips64el": "0.21.5", + "@esbuild/linux-ppc64": "0.21.5", + "@esbuild/linux-riscv64": "0.21.5", + "@esbuild/linux-s390x": "0.21.5", + "@esbuild/linux-x64": "0.21.5", + "@esbuild/netbsd-x64": "0.21.5", + "@esbuild/openbsd-x64": "0.21.5", + "@esbuild/sunos-x64": "0.21.5", + "@esbuild/win32-arm64": "0.21.5", + "@esbuild/win32-ia32": "0.21.5", + "@esbuild/win32-x64": "0.21.5" + } + }, + "fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "optional": true + }, + "graceful-fs": { + "version": "4.2.11", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", + "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", + "dev": true, + "optional": true + }, + "handlebars": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", + "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "requires": { + "minimist": "^1.2.5", + "neo-async": "^2.6.2", + "source-map": "^0.6.1", + "uglify-js": "^3.1.4", + "wordwrap": "^1.0.0" + } + }, + "iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "optional": true, + "requires": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + } + }, + "image-size": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", + "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", + "dev": true, + "optional": true + }, + "is-what": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", + "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", + "dev": true + }, + "less": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz", + "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==", + "dev": true, + "requires": { + "copy-anything": "^2.0.1", + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "needle": "^3.1.0", + "parse-node-version": "^1.0.1", + "source-map": "~0.6.0", + "tslib": "^2.3.0" + } + }, + "make-dir": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", + "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", + "dev": true, + "optional": true, + "requires": { + "pify": "^4.0.1", + "semver": "^5.6.0" + } + }, + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true, + "optional": true + }, + "minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==" + }, + "nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==" + }, + "needle": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz", + "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==", + "dev": true, + "optional": true, + "requires": { + "iconv-lite": "^0.6.3", + "sax": "^1.2.4" + } + }, + "neo-async": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", + "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" + }, + "parse-node-version": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", + "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", + "dev": true + }, + "picocolors": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" + }, + "pify": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", + "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", + "dev": true, + "optional": true + }, + "postcss": { + "version": "8.4.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz", + "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==", + "requires": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.1", + "source-map-js": "^1.2.0" + } + }, + "prr": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", + "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", + "dev": true, + "optional": true + }, + "rollup": { + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", + "integrity": "sha512-QmJz14PX3rzbJCN1SG4Xe/bAAX2a6NpCP8ab2vfu2GiUr8AQcr2nCV/oEO3yneFarB67zk8ShlIyWb2LGTb3Sg==", + "requires": { + "@rollup/rollup-android-arm-eabi": "4.18.0", + "@rollup/rollup-android-arm64": "4.18.0", + "@rollup/rollup-darwin-arm64": "4.18.0", + "@rollup/rollup-darwin-x64": "4.18.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.18.0", + "@rollup/rollup-linux-arm-musleabihf": "4.18.0", + "@rollup/rollup-linux-arm64-gnu": "4.18.0", + "@rollup/rollup-linux-arm64-musl": "4.18.0", + "@rollup/rollup-linux-powerpc64le-gnu": "4.18.0", + "@rollup/rollup-linux-riscv64-gnu": "4.18.0", + "@rollup/rollup-linux-s390x-gnu": "4.18.0", + "@rollup/rollup-linux-x64-gnu": "4.18.0", + "@rollup/rollup-linux-x64-musl": "4.18.0", + "@rollup/rollup-win32-arm64-msvc": "4.18.0", + "@rollup/rollup-win32-ia32-msvc": "4.18.0", + "@rollup/rollup-win32-x64-msvc": "4.18.0", + "@types/estree": "1.0.5", + "fsevents": "~2.3.2" + } + }, + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "dev": true, + "optional": true + }, + "sax": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz", + "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==", + "dev": true, + "optional": true + }, + "semver": { + "version": "5.7.2", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz", + "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==", + "dev": true, + "optional": true + }, + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + }, + "source-map-js": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", + "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==" + }, + "tslib": { + "version": "2.6.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", + "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==", + "dev": true + }, + "uglify-js": { + "version": "3.18.0", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.18.0.tgz", + "integrity": "sha512-SyVVbcNBCk0dzr9XL/R/ySrmYf0s372K6/hFklzgcp2lBFyXtw4I7BOdDjlLhE1aVqaI/SHWXWmYdlZxuyF38A==", + "optional": true + }, + "vite": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.3.tgz", + "integrity": "sha512-NPQdeCU0Dv2z5fu+ULotpuq5yfCS1BzKUIPhNbP3YBfAMGJXbt2nS+sbTFu+qchaqWTD+H3JK++nRwr6XIcp6A==", + "requires": { + "esbuild": "^0.21.3", + "fsevents": "~2.3.3", + "postcss": "^8.4.39", + "rollup": "^4.13.0" + } + }, + "vite-plugin-handlebars": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/vite-plugin-handlebars/-/vite-plugin-handlebars-2.0.0.tgz", + "integrity": "sha512-+J3It0nyhPzx4nT1I+fnWH+jShTEXzm6X0Tgsggdm9IYFD7/eJ6a3ROI13HTe0CVoyaxm/fPxH5HDAKyfz7T0g==", + "requires": { + "handlebars": "^4.7.6", + "vite": "^5.0.0" + } + }, + "wordwrap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..5d7c139 --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "practikum_project", + "private": true, + "version": "0.0.1", + "type": "module", + "scripts": { + "dev": "vite --port 3000", + "build": "vite build", + "preview": "vite preview", + "start": "npm run build" + }, + "devDependencies": { + "vite": "^5.3.1", + "less": "^4.2.0" + }, + "dependencies": { + "handlebars": "^4.7.8", + "vite-plugin-handlebars": "^2.0.0" + } +} diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..62f2e78 --- /dev/null +++ b/style.css @@ -0,0 +1,96 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: red; + text-decoration: inherit; +} +a:hover { + color: white; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +.logo { + height: 6em; + padding: 1.5em; + will-change: filter; + transition: filter 300ms; +} +.logo:hover { + filter: drop-shadow(0 0 2em #646cffaa); +} +.logo.vanilla:hover { + filter: drop-shadow(0 0 2em #f7df1eaa); +} + +.card { + padding: 2em; +} + +.read-the-docs { + color: #888; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..6caba5a --- /dev/null +++ b/vite.config.js @@ -0,0 +1,19 @@ +import { defineConfig } from 'vite' +import { resolve } from 'path'; +import Handlebars from 'vite-plugin-handlebars'; + +export default defineConfig({ + plugins: [Handlebars()], + build: { + outDir: resolve(__dirname, 'dist'), + }, + css: { + preprocessorOptions: { + less: { + math: 'always', + relativeUrls: true, + javascriptEnabled: true + }, + }, + }, +}) \ No newline at end of file From 8937f0bb07a457729215875ca83f3b65cfca8dbd Mon Sep 17 00:00:00 2001 From: Toby Date: Tue, 9 Jul 2024 17:59:41 +0400 Subject: [PATCH 02/12] Main page & login page & components(button, input) --- main.js | 24 ------------------------ src/components/button/button.hbs | 1 + src/components/button/button.less | 0 src/components/button/index.js | 2 ++ src/components/index.js | 2 ++ src/components/input/index.js | 2 ++ src/components/input/input.hbs | 2 ++ src/components/input/input.less | 0 index.html => src/index.html | 3 ++- src/main.js | 15 +++++++++++++++ src/pages/index.js | 2 ++ src/pages/login-form/index.js | 2 ++ src/pages/login-form/login-form.hbs | 9 +++++++++ src/pages/login-form/login-form.less | 0 src/pages/main-page/index.js | 2 ++ src/pages/main-page/main-page.hbs | 5 +++++ src/pages/main-page/main-page.less | 0 style.css => style.less | 0 18 files changed, 46 insertions(+), 25 deletions(-) delete mode 100644 main.js create mode 100644 src/components/button/button.hbs create mode 100644 src/components/button/button.less create mode 100644 src/components/button/index.js create mode 100644 src/components/index.js create mode 100644 src/components/input/index.js create mode 100644 src/components/input/input.hbs create mode 100644 src/components/input/input.less rename index.html => src/index.html (82%) create mode 100644 src/main.js create mode 100644 src/pages/index.js create mode 100644 src/pages/login-form/index.js create mode 100644 src/pages/login-form/login-form.hbs create mode 100644 src/pages/login-form/login-form.less create mode 100644 src/pages/main-page/index.js create mode 100644 src/pages/main-page/main-page.hbs create mode 100644 src/pages/main-page/main-page.less rename style.css => style.less (100%) diff --git a/main.js b/main.js deleted file mode 100644 index b400b4e..0000000 --- a/main.js +++ /dev/null @@ -1,24 +0,0 @@ -import './style.css' -import javascriptLogo from './javascript.svg' -import viteLogo from '/vite.svg' -import { setupCounter } from './counter.js' - -document.querySelector('#app').innerHTML = ` -
- - - - - - -

Hello Vite!

-
- -
-

- Click on the Vite logo to learn more -

-
-` - -setupCounter(document.querySelector('#counter')) diff --git a/src/components/button/button.hbs b/src/components/button/button.hbs new file mode 100644 index 0000000..6fb6aa6 --- /dev/null +++ b/src/components/button/button.hbs @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/button/button.less b/src/components/button/button.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/button/index.js b/src/components/button/index.js new file mode 100644 index 0000000..78c978c --- /dev/null +++ b/src/components/button/index.js @@ -0,0 +1,2 @@ +import './button.less'; +export { default as Button } from './button.hbs?raw'; \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js new file mode 100644 index 0000000..7c29c37 --- /dev/null +++ b/src/components/index.js @@ -0,0 +1,2 @@ +export { Input } from "./input"; +export { Button } from "./button"; diff --git a/src/components/input/index.js b/src/components/input/index.js new file mode 100644 index 0000000..4e79f9f --- /dev/null +++ b/src/components/input/index.js @@ -0,0 +1,2 @@ +import './input.less'; +export { default as Input } from './input.hbs?raw'; \ No newline at end of file diff --git a/src/components/input/input.hbs b/src/components/input/input.hbs new file mode 100644 index 0000000..c24642b --- /dev/null +++ b/src/components/input/input.hbs @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/src/components/input/input.less b/src/components/input/input.less new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/src/index.html similarity index 82% rename from index.html rename to src/index.html index 3d08438..ecc84fd 100644 --- a/index.html +++ b/src/index.html @@ -2,12 +2,13 @@ - Vite App +
+
diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..ff241e7 --- /dev/null +++ b/src/main.js @@ -0,0 +1,15 @@ +import Handlebars from 'handlebars'; +import './style.css' +import * as Components from './src/components'; + +Object.entries(Components).forEach(([ name, component ]) => { + Handlebars.registerPartial(name, component); +}); + +document.querySelector('#app').innerHTML = ` +
+

Navigation

+ Login page + Registration page +
+` diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 0000000..64f464d --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1,2 @@ +export { MainPage } from './main-page'; +export { LoginForm } from './login-form'; diff --git a/src/pages/login-form/index.js b/src/pages/login-form/index.js new file mode 100644 index 0000000..e78f999 --- /dev/null +++ b/src/pages/login-form/index.js @@ -0,0 +1,2 @@ +import './login-form.less'; +export { default as LoginForm } from './login-form.hbs?raw'; \ No newline at end of file diff --git a/src/pages/login-form/login-form.hbs b/src/pages/login-form/login-form.hbs new file mode 100644 index 0000000..dfd6871 --- /dev/null +++ b/src/pages/login-form/login-form.hbs @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/src/pages/login-form/login-form.less b/src/pages/login-form/login-form.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/main-page/index.js b/src/pages/main-page/index.js new file mode 100644 index 0000000..bfe9d22 --- /dev/null +++ b/src/pages/main-page/index.js @@ -0,0 +1,2 @@ +import './main-page.less' +export { default as MainPage } from './main-page.hbs?raw'; \ No newline at end of file diff --git a/src/pages/main-page/main-page.hbs b/src/pages/main-page/main-page.hbs new file mode 100644 index 0000000..dd9b8fc --- /dev/null +++ b/src/pages/main-page/main-page.hbs @@ -0,0 +1,5 @@ +
+
+ {{>Button class="Login" type="submit" label="Login Page" page="loginPage" }} +
+
\ No newline at end of file diff --git a/src/pages/main-page/main-page.less b/src/pages/main-page/main-page.less new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.less similarity index 100% rename from style.css rename to style.less From ba35b92ec6a8705894129378f96b4af73c644c3c Mon Sep 17 00:00:00 2001 From: Toby Date: Tue, 9 Jul 2024 18:04:31 +0400 Subject: [PATCH 03/12] Main page & login page & components(button, input) --- src/index.html | 18 ++++++++--------- src/main.js | 55 +++++++++++++++++++++++++++++++++++++++++--------- vite.config.js | 10 +++++++-- 3 files changed, 63 insertions(+), 20 deletions(-) diff --git a/src/index.html b/src/index.html index ecc84fd..bbc0a4f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,14 @@ - + - Vite App - - -
-
- -
- + Web Messenger + + + +
+
+
+ diff --git a/src/main.js b/src/main.js index ff241e7..4ef1246 100644 --- a/src/main.js +++ b/src/main.js @@ -1,15 +1,52 @@ import Handlebars from 'handlebars'; -import './style.css' -import * as Components from './src/components'; +import * as Components from './components'; +import * as Pages from './pages'; +import '../style.less'; + +const pages = { + 'mainPage': [Pages.MainPage], + 'loginPage': [Pages.LoginForm], +} Object.entries(Components).forEach(([ name, component ]) => { Handlebars.registerPartial(name, component); }); -document.querySelector('#app').innerHTML = ` -
-

Navigation

- Login page - Registration page -
-` +const navigator = (page) => { + const [src, args] = pages[page]; + const handlebars = Handlebars.compile(src); + document.getElementById('app').innerHTML = handlebars(args); +} + +document.addEventListener('DOMContentLoaded', (e) => { + const path = e.target.location.pathname; + + switch (path) { + case '/main-page': { + navigator('mainPage'); + break; + } + + case '/login': { + navigator('loginPage'); + break; + } + + default: { + window.location.pathname = '/main-page'; + break; + } + } +}); + + +document.addEventListener('click', (event) => { + const page = event.target.getAttribute('page'); + + if (page) { + navigator(page); + + event.preventDefault(); + event.stopImmediatePropagation(); + } +}); \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 6caba5a..6eb451a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,9 +3,15 @@ import { resolve } from 'path'; import Handlebars from 'vite-plugin-handlebars'; export default defineConfig({ - plugins: [Handlebars()], + plugins: [Handlebars({})], + root: resolve(__dirname, 'src'), build: { outDir: resolve(__dirname, 'dist'), + rollupOptions: { + input: { + index: resolve(__dirname, 'src/index.html'), + }, + }, }, css: { preprocessorOptions: { @@ -15,5 +21,5 @@ export default defineConfig({ javascriptEnabled: true }, }, - }, + } }) \ No newline at end of file From 53ccdeb1d61d4b5479500585207e43c323d1d513 Mon Sep 17 00:00:00 2001 From: Toby Date: Wed, 10 Jul 2024 22:22:35 +0400 Subject: [PATCH 04/12] Added the remaining pages --- src/components/button/button.hbs | 2 +- src/components/button/index.js | 2 +- src/components/error/error.hbs | 7 +++ src/components/error/error.less | 0 src/components/error/index.js | 2 + src/components/index.js | 6 ++- src/components/input/index.js | 2 +- src/components/input/input.hbs | 4 +- src/components/link/index.js | 2 + src/components/link/link.hbs | 1 + src/components/link/link.less | 0 src/main.js | 44 ++++++++++++++++++- src/pages/chat/chat.hbs | 27 ++++++++++++ src/pages/chat/chat.less | 0 src/pages/chat/index.js | 2 + src/pages/error404/error404.hbs | 1 + src/pages/error404/error404.less | 0 src/pages/error404/index.js | 2 + src/pages/error500/error500.hbs | 1 + src/pages/error500/error500.less | 0 src/pages/error500/index.js | 2 + src/pages/index.js | 7 +++ src/pages/login-form/index.js | 2 +- src/pages/login-form/login-form.hbs | 12 +++-- src/pages/main-page/index.js | 2 +- src/pages/main-page/main-page.hbs | 11 ++++- src/pages/profile-edit-password/index.js | 2 + .../profile-edit-password.hbs | 13 ++++++ .../profile-edit-password.less | 0 src/pages/profile-edit/index.js | 2 + src/pages/profile-edit/profile-edit.hbs | 23 ++++++++++ src/pages/profile-edit/profile-edit.less | 0 src/pages/profile/index.js | 2 + src/pages/profile/profile.hbs | 28 ++++++++++++ src/pages/profile/profile.less | 0 src/pages/registration-form/index.js | 2 + .../registration-form/registration-form.hbs | 26 +++++++++++ .../registration-form/registration-form.less | 0 38 files changed, 223 insertions(+), 16 deletions(-) create mode 100644 src/components/error/error.hbs create mode 100644 src/components/error/error.less create mode 100644 src/components/error/index.js create mode 100644 src/components/link/index.js create mode 100644 src/components/link/link.hbs create mode 100644 src/components/link/link.less create mode 100644 src/pages/chat/chat.hbs create mode 100644 src/pages/chat/chat.less create mode 100644 src/pages/chat/index.js create mode 100644 src/pages/error404/error404.hbs create mode 100644 src/pages/error404/error404.less create mode 100644 src/pages/error404/index.js create mode 100644 src/pages/error500/error500.hbs create mode 100644 src/pages/error500/error500.less create mode 100644 src/pages/error500/index.js create mode 100644 src/pages/profile-edit-password/index.js create mode 100644 src/pages/profile-edit-password/profile-edit-password.hbs create mode 100644 src/pages/profile-edit-password/profile-edit-password.less create mode 100644 src/pages/profile-edit/index.js create mode 100644 src/pages/profile-edit/profile-edit.hbs create mode 100644 src/pages/profile-edit/profile-edit.less create mode 100644 src/pages/profile/index.js create mode 100644 src/pages/profile/profile.hbs create mode 100644 src/pages/profile/profile.less create mode 100644 src/pages/registration-form/index.js create mode 100644 src/pages/registration-form/registration-form.hbs create mode 100644 src/pages/registration-form/registration-form.less diff --git a/src/components/button/button.hbs b/src/components/button/button.hbs index 6fb6aa6..d3aed93 100644 --- a/src/components/button/button.hbs +++ b/src/components/button/button.hbs @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/components/button/index.js b/src/components/button/index.js index 78c978c..e10c3ea 100644 --- a/src/components/button/index.js +++ b/src/components/button/index.js @@ -1,2 +1,2 @@ import './button.less'; -export { default as Button } from './button.hbs?raw'; \ No newline at end of file +export { default as Button } from './button.hbs?raw'; diff --git a/src/components/error/error.hbs b/src/components/error/error.hbs new file mode 100644 index 0000000..7f6fb17 --- /dev/null +++ b/src/components/error/error.hbs @@ -0,0 +1,7 @@ +
+

+ {{errorText}} + {{> Button class="error__back-button" label="Chat" page="chatPage" }} + +

+
diff --git a/src/components/error/error.less b/src/components/error/error.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/error/index.js b/src/components/error/index.js new file mode 100644 index 0000000..5af10fd --- /dev/null +++ b/src/components/error/index.js @@ -0,0 +1,2 @@ +import './error.less'; +export { default as Error } from './error.hbs?raw'; diff --git a/src/components/index.js b/src/components/index.js index 7c29c37..8a783d0 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,2 +1,4 @@ -export { Input } from "./input"; -export { Button } from "./button"; +export { Input } from './input'; +export { Button } from './button'; +export { Link } from './link'; +export { Error } from './error'; diff --git a/src/components/input/index.js b/src/components/input/index.js index 4e79f9f..19fc34a 100644 --- a/src/components/input/index.js +++ b/src/components/input/index.js @@ -1,2 +1,2 @@ import './input.less'; -export { default as Input } from './input.hbs?raw'; \ No newline at end of file +export { default as Input } from './input.hbs?raw'; diff --git a/src/components/input/input.hbs b/src/components/input/input.hbs index c24642b..6c2b201 100644 --- a/src/components/input/input.hbs +++ b/src/components/input/input.hbs @@ -1,2 +1,2 @@ - - \ No newline at end of file + + diff --git a/src/components/link/index.js b/src/components/link/index.js new file mode 100644 index 0000000..6ac52b2 --- /dev/null +++ b/src/components/link/index.js @@ -0,0 +1,2 @@ +import './link.less'; +export { default as Link } from './link.hbs?raw'; diff --git a/src/components/link/link.hbs b/src/components/link/link.hbs new file mode 100644 index 0000000..e7b2590 --- /dev/null +++ b/src/components/link/link.hbs @@ -0,0 +1 @@ +{{ label }} diff --git a/src/components/link/link.less b/src/components/link/link.less new file mode 100644 index 0000000..e69de29 diff --git a/src/main.js b/src/main.js index 4ef1246..1288b6b 100644 --- a/src/main.js +++ b/src/main.js @@ -6,6 +6,13 @@ import '../style.less'; const pages = { 'mainPage': [Pages.MainPage], 'loginPage': [Pages.LoginForm], + 'registrationPage': [Pages.RegistrationForm], + 'chatPage': [Pages.ChatPage], + 'profilePage': [Pages.ProfilePage], + 'profileEditPage': [Pages.ProfileEditPage], + 'profileEditPasswordPage': [Pages.ProfileEditPasswordPage], + 'error404': [Pages.Error404Page], + 'error500': [Pages.Error500Page] } Object.entries(Components).forEach(([ name, component ]) => { @@ -32,6 +39,41 @@ document.addEventListener('DOMContentLoaded', (e) => { break; } + case '/registration': { + navigator('registrationPage'); + break; + } + + case '/chat': { + navigator('chatPage'); + break; + } + + case '/profile': { + navigator('profilePage'); + break; + } + + case '/profile-edit': { + navigator('profileEditPage'); + break; + } + + case '/profile-edit-password': { + navigator('profileEditPasswordPage'); + break; + } + + case '/error404': { + navigator('error404'); + break; + } + + case '/error500': { + navigator('error500'); + break; + } + default: { window.location.pathname = '/main-page'; break; @@ -49,4 +91,4 @@ document.addEventListener('click', (event) => { event.preventDefault(); event.stopImmediatePropagation(); } -}); \ No newline at end of file +}); diff --git a/src/pages/chat/chat.hbs b/src/pages/chat/chat.hbs new file mode 100644 index 0000000..c0011b9 --- /dev/null +++ b/src/pages/chat/chat.hbs @@ -0,0 +1,27 @@ +
+
+ +
+
+ Select a chat to send a message +
+ +
+
+
diff --git a/src/pages/chat/chat.less b/src/pages/chat/chat.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/chat/index.js b/src/pages/chat/index.js new file mode 100644 index 0000000..9ac4212 --- /dev/null +++ b/src/pages/chat/index.js @@ -0,0 +1,2 @@ +import './chat.less'; +export { default as ChatPage } from './chat.hbs?raw'; diff --git a/src/pages/error404/error404.hbs b/src/pages/error404/error404.hbs new file mode 100644 index 0000000..723506f --- /dev/null +++ b/src/pages/error404/error404.hbs @@ -0,0 +1 @@ +{{> Error errorText="Take a breath.That page does not exist but you back to "}} diff --git a/src/pages/error404/error404.less b/src/pages/error404/error404.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/error404/index.js b/src/pages/error404/index.js new file mode 100644 index 0000000..c8021ae --- /dev/null +++ b/src/pages/error404/index.js @@ -0,0 +1,2 @@ +import './error404.less'; +export { default as Error404Page } from './error404.hbs?raw'; diff --git a/src/pages/error500/error500.hbs b/src/pages/error500/error500.hbs new file mode 100644 index 0000000..a81578c --- /dev/null +++ b/src/pages/error500/error500.hbs @@ -0,0 +1 @@ +{{> Error errorText="Oooops! Something went wrong. Back to "}} diff --git a/src/pages/error500/error500.less b/src/pages/error500/error500.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/error500/index.js b/src/pages/error500/index.js new file mode 100644 index 0000000..96770ed --- /dev/null +++ b/src/pages/error500/index.js @@ -0,0 +1,2 @@ +import './error500.less'; +export { default as Error500Page } from './error500.hbs?raw'; diff --git a/src/pages/index.js b/src/pages/index.js index 64f464d..f024075 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,2 +1,9 @@ export { MainPage } from './main-page'; export { LoginForm } from './login-form'; +export { RegistrationForm } from './registration-form'; +export { ChatPage } from './chat'; +export { ProfilePage } from './profile'; +export { ProfileEditPage } from './profile-edit'; +export { ProfileEditPasswordPage } from './profile-edit-password'; +export { Error404Page } from './error404'; +export { Error500Page } from './error500'; diff --git a/src/pages/login-form/index.js b/src/pages/login-form/index.js index e78f999..cb9d1ce 100644 --- a/src/pages/login-form/index.js +++ b/src/pages/login-form/index.js @@ -1,2 +1,2 @@ import './login-form.less'; -export { default as LoginForm } from './login-form.hbs?raw'; \ No newline at end of file +export { default as LoginForm } from './login-form.hbs?raw'; diff --git a/src/pages/login-form/login-form.hbs b/src/pages/login-form/login-form.hbs index dfd6871..3989a11 100644 --- a/src/pages/login-form/login-form.hbs +++ b/src/pages/login-form/login-form.hbs @@ -1,9 +1,13 @@ diff --git a/src/pages/main-page/index.js b/src/pages/main-page/index.js index bfe9d22..1d5a3cb 100644 --- a/src/pages/main-page/index.js +++ b/src/pages/main-page/index.js @@ -1,2 +1,2 @@ import './main-page.less' -export { default as MainPage } from './main-page.hbs?raw'; \ No newline at end of file +export { default as MainPage } from './main-page.hbs?raw'; diff --git a/src/pages/main-page/main-page.hbs b/src/pages/main-page/main-page.hbs index dd9b8fc..4889d38 100644 --- a/src/pages/main-page/main-page.hbs +++ b/src/pages/main-page/main-page.hbs @@ -1,5 +1,12 @@
- {{>Button class="Login" type="submit" label="Login Page" page="loginPage" }} + {{> Button class="login" type="button" label="Login Page" page="loginPage" }} + {{> Button class="registration" type="button" label="Registation Page" page="registrationPage" }} + {{> Button class="chat_list" type="button" label="Chat Page" page="chatPage" }} + {{> Button class="profile" type="button" label="Profile Page" page="profilePage" }} + {{> Button class="profile-edit" type="button" label="Edit Profile Page" page="profileEditPage" }} + {{> Button class="profile-edit-password" type="button" label="Edit Password Page" page="profileEditPasswordPage" }} + {{> Button class="error-404" type="button" label="Error 404" page="error404" }} + {{> Button class="error-500" type="button" label="Error 500" page="error500" }}
-
\ No newline at end of file + diff --git a/src/pages/profile-edit-password/index.js b/src/pages/profile-edit-password/index.js new file mode 100644 index 0000000..edab2cc --- /dev/null +++ b/src/pages/profile-edit-password/index.js @@ -0,0 +1,2 @@ +import './profile-edit-password.less'; +export { default as ProfileEditPasswordPage } from './profile-edit-password.hbs?raw'; diff --git a/src/pages/profile-edit-password/profile-edit-password.hbs b/src/pages/profile-edit-password/profile-edit-password.hbs new file mode 100644 index 0000000..30baf39 --- /dev/null +++ b/src/pages/profile-edit-password/profile-edit-password.hbs @@ -0,0 +1,13 @@ +
+
+
+ {{> Input type='password' name='oldPassword' class="profile__old-password" id="old-password" label='Old Password' }} +
+
+ {{> Input type='password' name='newPassword' class="profile__new-password" id="new-password" label='New Password' }} +
+
+
+ {{> Button class="profile__button-save" type="submit" label="Save" page="profilePage" }} +
+
diff --git a/src/pages/profile-edit-password/profile-edit-password.less b/src/pages/profile-edit-password/profile-edit-password.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/profile-edit/index.js b/src/pages/profile-edit/index.js new file mode 100644 index 0000000..05340c8 --- /dev/null +++ b/src/pages/profile-edit/index.js @@ -0,0 +1,2 @@ +import './profile-edit.less'; +export { default as ProfileEditPage } from './profile-edit.hbs?raw'; diff --git a/src/pages/profile-edit/profile-edit.hbs b/src/pages/profile-edit/profile-edit.hbs new file mode 100644 index 0000000..6ebd523 --- /dev/null +++ b/src/pages/profile-edit/profile-edit.hbs @@ -0,0 +1,23 @@ +
+
+
+
+ {{> Input type='email' name='email' class="email" id="email" label='Email' value="ivan@gmail.com" }} +
+
+ {{> Input type='input' name='login' class="login" id="login" label='Login' value="ivanivanov" }} +
+
+ {{> Input type='input' name='first_name' class="first_name" id="first_name" label='First Name' value="Ivan" }} +
+
+ {{> Input type='input' name='second_name' class="second_name" id="second_name" label='Second Name' value="Ivanov" }} +
+
+ {{> Input type='tel' name='phone' class="phone" id="phone" label='Phone Number' value="+78005553535" }} +
+
+ {{> Button class="profile__button-save" type="submit" label="Save" page="profilePage" }} +
+
+
diff --git a/src/pages/profile-edit/profile-edit.less b/src/pages/profile-edit/profile-edit.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/profile/index.js b/src/pages/profile/index.js new file mode 100644 index 0000000..4e55059 --- /dev/null +++ b/src/pages/profile/index.js @@ -0,0 +1,2 @@ +import './profile.less'; +export { default as ProfilePage } from './profile.hbs?raw'; diff --git a/src/pages/profile/profile.hbs b/src/pages/profile/profile.hbs new file mode 100644 index 0000000..696932e --- /dev/null +++ b/src/pages/profile/profile.hbs @@ -0,0 +1,28 @@ +
+
+
+
+ Email +
+
+ Login +
+
+ First NameIvan +
+
+ Second NameIvanov +
+
+ Phone +
+
+
+
+ {{> Button class="profile__button-edit-profile" label="Change Profile" page="profileEditPage"}} +
+
+ {{> Button class="profile__button-edit-password" label="Change Password" page="profileEditPasswordPage"}} +
+
+
diff --git a/src/pages/profile/profile.less b/src/pages/profile/profile.less new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/registration-form/index.js b/src/pages/registration-form/index.js new file mode 100644 index 0000000..c0580f9 --- /dev/null +++ b/src/pages/registration-form/index.js @@ -0,0 +1,2 @@ +import './registration-form.less'; +export { default as RegistrationForm } from './registration-form.hbs?raw'; diff --git a/src/pages/registration-form/registration-form.hbs b/src/pages/registration-form/registration-form.hbs new file mode 100644 index 0000000..c6dfc20 --- /dev/null +++ b/src/pages/registration-form/registration-form.hbs @@ -0,0 +1,26 @@ +
+

Create Account

+
+
+ {{> Input type='text' name='first_name' class="first_name" id="first_name" label='First Name' }} +
+
+ {{> Input type='text' name='second_name' class="second_name" id="second_name" label='Second Name' }} +
+
+ {{> Input type='text' name='login' class="login" id="login" label='Login' }} +
+
+ {{> Input type='email' name='email' class="email" id="email" label='Email' }} +
+
+ {{> Input type='password' name='password' class="password" id="password" label='Password' }} +
+
+ {{> Input type='tel' name='phone' class="phone" id="phone" label='Phone Number' }} +
+
+ {{> Button class="registration__button-registration" type="submit" label='Create account' page="chatPage"}} +
+
+
diff --git a/src/pages/registration-form/registration-form.less b/src/pages/registration-form/registration-form.less new file mode 100644 index 0000000..e69de29 From 57bb290d3896cb82d07bfbc684eb668ac6788a99 Mon Sep 17 00:00:00 2001 From: Toby Date: Fri, 12 Jul 2024 22:22:14 +0400 Subject: [PATCH 05/12] Added style & change readme.md & added netlify config --- README.md | 89 +++----------- counter.js | 9 -- javascript.svg | 1 - netlify.toml | 8 ++ package.json | 5 +- src/components/button/button.hbs | 2 +- src/components/button/button.less | 45 +++++++ src/components/error/error.hbs | 11 +- src/components/error/error.less | 25 ++++ src/components/input/input.hbs | 2 +- src/components/input/input.less | 32 +++++ src/main.js | 2 +- src/pages/chat/chat.hbs | 63 +++++++--- src/pages/chat/chat.less | 115 ++++++++++++++++++ src/pages/error404/error404.hbs | 2 +- src/pages/error404/error404.less | 0 src/pages/error404/index.js | 2 +- src/pages/error500/error500.hbs | 2 +- src/pages/error500/error500.less | 0 src/pages/error500/index.js | 2 +- src/pages/login-form/login-form.hbs | 22 ++-- src/pages/login-form/login-form.less | 62 ++++++++++ src/pages/main-page/main-page.hbs | 20 +-- src/pages/main-page/main-page.less | 0 src/pages/profile-edit-password/index.js | 2 +- .../profile-edit-password.hbs | 30 +++-- .../profile-edit-password.less | 0 src/pages/profile-edit/index.js | 2 +- src/pages/profile-edit/profile-edit.hbs | 47 +++---- src/pages/profile-edit/profile-edit.less | 0 src/pages/profile/profile.hbs | 49 ++++---- src/pages/profile/profile.less | 107 ++++++++++++++++ .../registration-form/registration-form.hbs | 20 +-- .../registration-form/registration-form.less | 31 +++++ src/style.less | 32 +++++ src/utils.less | 25 ++++ src/variables.less | 12 ++ style.less | 96 --------------- vite.config.js | 2 +- 39 files changed, 679 insertions(+), 297 deletions(-) delete mode 100644 counter.js delete mode 100644 javascript.svg create mode 100644 netlify.toml delete mode 100644 src/pages/error404/error404.less delete mode 100644 src/pages/error500/error500.less delete mode 100644 src/pages/main-page/main-page.less delete mode 100644 src/pages/profile-edit-password/profile-edit-password.less delete mode 100644 src/pages/profile-edit/profile-edit.less create mode 100644 src/style.less create mode 100644 src/utils.less create mode 100644 src/variables.less delete mode 100644 style.less diff --git a/README.md b/README.md index bcd1a13..1318803 100644 --- a/README.md +++ b/README.md @@ -1,83 +1,28 @@ -### Ветка, в которой делаете задания спринта, должна называться sprint_i, где i - номер спринта. Не переименовывайте её. +## Веб мессенджер -### Откройте pull request в ветку main из ветки, где вы разрабатывали проект, и добавьте ссылку на этот pr в README.md в ветке main. -### ВАЖНО: pull request должен называться “Sprint i” (i — номер спринта). - -### Например, задания для проектной работы во втором спринте вы делаете в ветке sprint_2. Открываете из неё pull request в ветку main. Ссылку на этот pr добавляете в README.md в ветке main. После этого на платформе Практикума нажимаете «Проверить задание». - -### Также не забудьте проверить, что репозиторий публичный. --- +### При разработке были использованы следующие технологии: -Даже законченный проект остаётся только заготовкой, пока им не начнут пользоваться. Но сначала пользователь должен понять, зачем ему пользоваться вашим кодом. В этом помогает файл README. - -README — первое, что прочитает пользователь, когда попадёт в репозиторий на «Гитхабе». Хороший REAMDE отвечает на четыре вопроса: - -- Готов ли проект к использованию? -- В чём его польза? -- Как установить? -- Как применять? - -## Бейджи - -Быстро понять статус проекта помогают бейджи на «Гитхабе». Иногда разработчики ограничиваются парой бейджев, которые сообщат о статусе тестов кода: - -![Бэйджи](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/b.png) - -Если пользователь увидит ошибку в работе тестов, то поймёт: использовать текущую версию в важном проекте — не лучшая идея. - -Бейджи помогают похвастаться достижениями: насколько популярен проект, как много разработчиков создавало этот код. Через бейджи можно даже пригласить пользователя в чат: - -![Версии](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/vers.png) - -В README **Webpack** строка бейджев подробно рассказывает о покрытии кода тестами. Когда проект протестирован, это вызывает доверие пользователя. Последний бейдж приглашает присоединиться к разработке. - -Другая строка убедит пользователя в стабильности инфраструктуры и популярности проекта. Последний бейдж зовёт в чат проекта. - -## Описание - -Краткое опишите, какую задачу решает проект. Пользователь не верит обещаниям и не готов читать «полотна» текста. Поэтому в описании достаточно нескольких строк: +- Vite +- Шаблонизатор Handlebars +- Препроцессор Less -![Описание](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/desc.png) - -Авторы **React** дробят описание на абзацы и списки — так проще пробежаться глазами по тексту и найти ключевую информацию. - -Если у проекта есть сайт, добавьте ссылку в заголовок. - -## Установка - -Лучше всего пользователя убеждает собственный опыт. Чем быстрее он начнёт пользоваться проектом, тем раньше почувствует пользу. Для этого помогите ему установить приложение: напишите краткую пошаговую инструкцию. - -Если проект предназначен для разработчиков, добавьте информацию об установке тестовых версий. Например: - -- `npm install` — установка стабильной версии, -- `npm start` — запуск версии для разработчика, -- `npm run build:prod` — сборка стабильной версии. - -## **Примеры использования** - -Хорошо, если сразу после установки пользователь сможет решить свои задачи без изучения проекта. Это особенно верно, если ваш пользователь — не профессиональный разработчик. Но даже профессионал поймёт вас лучше, если показать примеры использования: - -![Ссылки](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/link.png) - -Для более подробных инструкции добавьте новые разделы или ссылки: - -- на документацию, -- вики проекта, -- описание API. +--- -В учебном проекте будут полезен раздел с описанием стиля кода и правилами разработки: как работать с ветками, пул-реквестами и релизами. +### Макет веб мессенджера - [Figma](https://www.figma.com/design/nQd8AZRwSvq3ykmQsQ8euM/Messanger-(Community)?node-id=0-1&t=CCL9PUHjO5FaLwJF-0) -### **Команда** +--- -Если вы работаете в команде, укажите основных участников: им будет приятно, а новые разработчики охотнее присоединятся к проекту. «Гитхаб» — не просто инструмент, это социальная сеть разработчиков. +### Установка -![Команда](https://github.com/yandex-praktikum/mf.messenger.praktikum.yandex.images/blob/master/mf/team.png) +#### Для установки нужно выполнить следующие действия: -### **Примеры README** +- Склонировать данный репозиторий (git clone *ссылка на репозиторий*) +- В корне проекта запустить команду **npm install**, для установки зависимостей +- **npm run dev** запуск проекта в режиме разработчика +- В браузере откройте страницу [localhost:3000](localhost:3000) +- **npm run build** сборка билда +- **npm run start** запуск проекта в режиме сборки -- «[Реакт](https://github.com/facebook/react)», -- «[Эхо](https://github.com/labstack/echo)», -- «[Вебпак](https://github.com/webpack/webpack)», -- «[ТДенгине](https://github.com/taosdata/TDengine)», -- «[Соул-хантинг](https://github.com/vladpereskokov/soul-hunting/)». +--- diff --git a/counter.js b/counter.js deleted file mode 100644 index 881e2d7..0000000 --- a/counter.js +++ /dev/null @@ -1,9 +0,0 @@ -export function setupCounter(element) { - let counter = 0 - const setCounter = (count) => { - counter = count - element.innerHTML = `count is ${counter}` - } - element.addEventListener('click', () => setCounter(counter + 1)) - setCounter(0) -} diff --git a/javascript.svg b/javascript.svg deleted file mode 100644 index f9abb2b..0000000 --- a/javascript.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 0000000..df9f053 --- /dev/null +++ b/netlify.toml @@ -0,0 +1,8 @@ +[build] + command = "npm run build" + publish = "dist" + +[[redirects]] + from = "/*" + to = "/index.html" + status = 200 diff --git a/package.json b/package.json index 5d7c139..f9e1429 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "dev": "vite --port 3000", "build": "vite build", "preview": "vite preview", - "start": "npm run build" + "start": "vite build && vite preview --port 3000" }, "devDependencies": { "vite": "^5.3.1", @@ -16,5 +16,8 @@ "dependencies": { "handlebars": "^4.7.8", "vite-plugin-handlebars": "^2.0.0" + }, + "engines": { + "node": "^17.4.0" } } diff --git a/src/components/button/button.hbs b/src/components/button/button.hbs index d3aed93..66c4e6c 100644 --- a/src/components/button/button.hbs +++ b/src/components/button/button.hbs @@ -1 +1 @@ - + diff --git a/src/components/button/button.less b/src/components/button/button.less index e69de29..6896b43 100644 --- a/src/components/button/button.less +++ b/src/components/button/button.less @@ -0,0 +1,45 @@ +@import '../../utils.less'; + +.button ( + @border-radius: 8px; + @border: 1px solid transparent; + @font-size: 1em; + @padding: 0.5rem; + @margin: 0 0 1.5rem 0; + @width: 15rem; + @font-weight: 500; + @font-family: inherit; + @background: @main__button-background-color; + @cursor: pointer; + @transition: border-color 0.25s; + @color: @main__font-color; +){ + border-radius: @border-radius; + border: @border; + font-size: @font-size; + padding: @padding; + margin: @margin; + width: @width; + font-weight: @font-weight; + font-family: @font-family; + background: @background; + cursor: @cursor; + transition: @transition; + color: @color; +} + +.custom-button-hover( + @background: none; + @color: @main__button-background-hover; +){ + background: @background !important; + color: @color; +} + +.button { + .button(); + + &:hover { + background-color: @main__button-background-hover !important; + } +} diff --git a/src/components/error/error.hbs b/src/components/error/error.hbs index 7f6fb17..cd2bc36 100644 --- a/src/components/error/error.hbs +++ b/src/components/error/error.hbs @@ -1,7 +1,6 @@ -
-

- {{errorText}} - {{> Button class="error__back-button" label="Chat" page="chatPage" }} - -

+
+

{{errorTitle}}

+ {{errorText}} + {{> Button class="error back-button" label="Chat" page="chatPage" }} +
diff --git a/src/components/error/error.less b/src/components/error/error.less index e69de29..bbde5b8 100644 --- a/src/components/error/error.less +++ b/src/components/error/error.less @@ -0,0 +1,25 @@ +@import '../../utils.less'; + +.error { + &.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: 5rem 0; + + .title { + + } + + .text { + .back-button { + .button(@background: none, @margin: 0, @padding: 0, @width: auto, @color: @main__button-background-color); + + &:hover { + .custom-button-hover(@color: @main__button-background-hover); + } + } + } + } +} diff --git a/src/components/input/input.hbs b/src/components/input/input.hbs index 6c2b201..2af695e 100644 --- a/src/components/input/input.hbs +++ b/src/components/input/input.hbs @@ -1,2 +1,2 @@ - + diff --git a/src/components/input/input.less b/src/components/input/input.less index e69de29..faa1807 100644 --- a/src/components/input/input.less +++ b/src/components/input/input.less @@ -0,0 +1,32 @@ +@import '../../utils.less'; + +.input( + @width: 100%; + @height: 2rem; + @margin: 0 0 0 0; + @background: @main__input-background-color; + @color: @main__font-color; + @padding: 5px; + @border: 1px solid transparent; + @border-radius: 5px; + @font-size: 18px; +){ + width: @width; + margin: @margin; + height: @height; + background: @background; + color: @color; + padding: @padding; + border: @border; + border-radius: @border-radius; + font-size: @font-size; +} + +.input { + .input(); + + &:hover, &:active, &:focus-visible { + border: 1px solid @main__button-background-color !important; + outline: none; + } +} diff --git a/src/main.js b/src/main.js index 1288b6b..fc1ada5 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,7 @@ import Handlebars from 'handlebars'; import * as Components from './components'; import * as Pages from './pages'; -import '../style.less'; +import './style.less'; const pages = { 'mainPage': [Pages.MainPage], diff --git a/src/pages/chat/chat.hbs b/src/pages/chat/chat.hbs index c0011b9..b83c3e4 100644 --- a/src/pages/chat/chat.hbs +++ b/src/pages/chat/chat.hbs @@ -1,27 +1,52 @@
-
- +
-
- Select a chat to send a message -
- +
+
+ Select a chat to send a message
diff --git a/src/pages/chat/chat.less b/src/pages/chat/chat.less index e69de29..b20b9f0 100644 --- a/src/pages/chat/chat.less +++ b/src/pages/chat/chat.less @@ -0,0 +1,115 @@ +@import '../../utils.less'; + +.chat { + display: flex; + + .sidebar { + flex: 1; + + .list { + display: flex; + flex-direction: column; + width: 100%; + + .list-header { + display: flex; + flex-direction: column; + height: 5rem; + border-right: 1px solid @secondary__background-color; + border-bottom: 1px solid @secondary__background-color; + + .profile { + align-self: flex-end; + padding: 0.25rem 0.1rem; + + .profile-button { + .button(@background: none, @width: 100%, @margin: 0); + + &:hover { + background: none !important; + color: @main__button-background-hover; + } + } + } + + .search { + display: block; + width: 95%; + margin: 0 auto; + + .chat-search { + .input(@background: @secondary__background-color, @margin: 0 auto); + } + } + } + + .item { + display: flex; + flex-direction: column; + justify-content: center; + padding-top: 0 !important; + padding-bottom: 0 !important; + padding-inline: 1rem .75rem; + border-bottom: 1px solid @secondary__background-color; + min-height: 4.5rem; + padding-inline-start: 4.5rem !important; + text-decoration: none; + color: @main__font-color; + + .avatar { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + inset-inline-start: .5625rem !important; + width: 3.375rem !important; + height: 3.375rem !important; + + &:after { + content: ''; + border: 25px solid @secondary__background-color; + border-radius: 100%; + } + } + + .dialog { + display: flex; + justify-content: space-between; + align-items: center; + + &.title { + height: 1.375rem; + } + + &.subtitle { + height: 1.375rem; + margin-top: .125rem; + color: @secondary__font-color; + + &.unread { + color: @main__font-color; + transform-style: preserve-3d; + + &:after { + content: ''; + right: -5px; + position: absolute; + border: 10px solid @secondary__font-color; + border-radius: 100%; + transform: translateZ(-1px); + } + } + } + } + } + } + } + + .messenger { + flex: 2; + display: flex; + justify-content: center; + align-items: center; + background: @secondary__background-color; + } +} diff --git a/src/pages/error404/error404.hbs b/src/pages/error404/error404.hbs index 723506f..4da0a8b 100644 --- a/src/pages/error404/error404.hbs +++ b/src/pages/error404/error404.hbs @@ -1 +1 @@ -{{> Error errorText="Take a breath.That page does not exist but you back to "}} +{{> Error errorTitle="Error 404" errorText="Take a breath. That page does not exist but you back to "}} diff --git a/src/pages/error404/error404.less b/src/pages/error404/error404.less deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/error404/index.js b/src/pages/error404/index.js index c8021ae..333b90e 100644 --- a/src/pages/error404/index.js +++ b/src/pages/error404/index.js @@ -1,2 +1,2 @@ -import './error404.less'; +import '../../components/error/error.less'; export { default as Error404Page } from './error404.hbs?raw'; diff --git a/src/pages/error500/error500.hbs b/src/pages/error500/error500.hbs index a81578c..5853bba 100644 --- a/src/pages/error500/error500.hbs +++ b/src/pages/error500/error500.hbs @@ -1 +1 @@ -{{> Error errorText="Oooops! Something went wrong. Back to "}} +{{> Error errorTitle="Error 505" errorText="Oooops! Something went wrong. Back to "}} diff --git a/src/pages/error500/error500.less b/src/pages/error500/error500.less deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/error500/index.js b/src/pages/error500/index.js index 96770ed..0332baa 100644 --- a/src/pages/error500/index.js +++ b/src/pages/error500/index.js @@ -1,2 +1,2 @@ -import './error500.less'; +import '../../components/error/error.less'; export { default as Error500Page } from './error500.hbs?raw'; diff --git a/src/pages/login-form/login-form.hbs b/src/pages/login-form/login-form.hbs index 3989a11..e2ad30a 100644 --- a/src/pages/login-form/login-form.hbs +++ b/src/pages/login-form/login-form.hbs @@ -1,13 +1,17 @@ -