From e53ae4858db579e25e3adf954a368f510f6aefc5 Mon Sep 17 00:00:00 2001 From: grinikita Date: Tue, 1 Apr 2025 22:05:38 +0300 Subject: [PATCH] =?UTF-8?q?typescript=20=D0=B8=20handlebars?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dist/index.html | 189 --------------------- dist/style.css | 177 -------------------- package-lock.json | 337 +++++++++++++++++++++++++++++++++++++- package.json | 7 +- src/components/carusel.ts | 37 +++++ src/components/logger.ts | 1 + src/index.hbs | 24 +++ src/index.html | 189 --------------------- src/index.js | 34 ---- src/index.ts | 8 + src/index2.js | 1 - src/views/carusel.hbs | 16 ++ src/views/header.hbs | 12 ++ src/views/nft-card.hbs | 24 +++ tsconfig.json | 114 +++++++++++++ webpack.config.js | 17 +- 16 files changed, 591 insertions(+), 596 deletions(-) delete mode 100644 dist/index.html delete mode 100644 dist/style.css create mode 100644 src/components/carusel.ts create mode 100644 src/components/logger.ts create mode 100644 src/index.hbs delete mode 100644 src/index.html delete mode 100644 src/index.js create mode 100644 src/index.ts delete mode 100644 src/index2.js create mode 100644 src/views/carusel.hbs create mode 100644 src/views/header.hbs create mode 100644 src/views/nft-card.hbs create mode 100644 tsconfig.json diff --git a/dist/index.html b/dist/index.html deleted file mode 100644 index 03efb79..0000000 --- a/dist/index.html +++ /dev/null @@ -1,189 +0,0 @@ - - - - - - - Document - - - - - - - - - -
- - - -
-
-
-

Weakly - Top NFT

-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
- - -
-
-
- - - \ No newline at end of file diff --git a/dist/style.css b/dist/style.css deleted file mode 100644 index f178477..0000000 --- a/dist/style.css +++ /dev/null @@ -1,177 +0,0 @@ -html { - --color-dark: #141416; - --text-dark: var(--color-dark); - --text-light: #FFFFFF; - - --font-poppins: "Poppins", sans-serif; - --font-inter: "Inter", sans-serif; - - font-family: var(--font-poppins); -} - -.container { - padding: 0 97px; -} - -.button { - font-family: var(--font-poppins); - padding: 16px 24px; - background-color: var(--color-dark); - border-radius: 16px; - color: var(--text-light); - font-weight: 600; - font-size: 16px; - line-height: 24px; - text-transform: uppercase; - cursor: pointer; - border: none; -} - -.button[disabled] { - background: #94A3B8; - cursor: default; -} - -.header { - display: flex; - align-items: center; - font-family: var(--font-inter); -} - -.logo { - margin-right: 57px; -} - -.header .button { - margin-left: auto; - font-family: var(--font-inter); -} - -.nav-list { - list-style: none; - padding: 0; - margin: 0; - color: #606060; - font-weight: 500; - font-size: 18px; - line-height: 27px; - text-transform: uppercase; - - display: flex; - gap: 53px; -} - -.header a { - text-decoration: none; - color: inherit; -} - -.top-nft { - padding: 70px 0 90px; - background: #F1F1F1; - overflow: hidden; -} - -.top-nft__title { - font-weight: 600; - font-size: 45px; - line-height: 27px; - letter-spacing: 0; - color: #C5C5C5; - text-align: center; - margin-bottom: 100px; -} - -.nft-card { - width: 282px; - padding: 14px 14px 20px; - box-shadow: 38.82px 11.76px 58.81px 0px #C7C7C799; - background: #FFFFFF; - border-radius: 24px; -} - -.nft-card__img { - position: relative; - border-radius: 24px; - width: 100%; - aspect-ratio: 1; - background: center / cover no-repeat url('https://s3-alpha-sig.figma.com/img/b82f/55d0/61c522d86567e3c5ea1f39ddf68ae4bc?Expires=1743379200&Key-Pair-Id=APKAQ4GOSFWCW27IBOMQ&Signature=UlO4-Fsc27zhQo9T9Tl8fhCSVyxM4GHu6DkUtWgi881ggrnY9uHKNdVvhg2GuSS7ItYldxw9FhYRjgcBrwKBvnf4XLjw8YjkZ8584NLVxfH-POsN8O2eh9gyxEBEgaF~AVwwnNmnRpPN2JFnfcRUIihkRrhZA7IjDRxNY1CbPHB5j~AP9wlWhI6P2TqaXaJj~8JRZPx1YBpGWfrSCgLfgQejNNi58FvkkX1Hkvm0aICdebCSqwFrq~sLI6Rbj5H-QgF~2AxU3EGiBzdaCvMXfBx3xpZIvHGkuSeYlhdlU-KFNmjF9u3VPg7c5S~IvPMIOmvWhwX-GguAGxPZe4tksw__'), #F8F8F8; -} - -.nft-card__content { - padding: 0 4px; - margin-top: 18px; -} - -.nft-card__title { - font-family: var(--font-poppins); - font-weight: 600; - font-size: 22px; - line-height: 140%; - letter-spacing: 0; - vertical-align: middle; - margin-bottom: 14px; -} - -.nft-card__footer { - display: flex; -} -.nft-card__footer > * { - width: 100%; -} - -.nft-card__description { - color: #94A3B8; - font-weight: 400; - font-size: 14px; - line-height: 150%; - letter-spacing: 0.12px; - vertical-align: middle; - margin-top: 0; - margin-bottom: 4px; -} - -.nft-card__price { - display: flex; - align-items: center; - - font-weight: 500; - font-size: 16px; - line-height: 150%; - letter-spacing: 0; - vertical-align: middle; - -} -.nft-card__price { - flex-grow: 0; -} - -.nft-card__time { - position: absolute; - top: 14px; - right: 9px; - - background: #1C1D2059; - border-radius: 9px; - border: 1px solid #1C1D2014; - backdrop-filter: blur(4.7px); - box-shadow: 0 4.71px 14.12px 0 #1C1D2014; - - padding: 8px 14px; - font-weight: 500; - font-size: 14px; - line-height: 150%; - letter-spacing: 0.12px; - color: var(--text-light); -} - -.nft-card-container { - display: flex; - gap: 40px; - - transition: transform 0.3s linear; -} - -.nft-card-container .nft-card { - flex-shrink: 0; -} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c8166be..9570b3c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,15 @@ "version": "1.0.0", "license": "ISC", "dependencies": { + "handlebars-loader": "^1.7.3", "webpack": "^5.98.0", "webpack-cli": "^6.0.1" }, "devDependencies": { "copy-webpack-plugin": "^13.0.0", - "html-webpack-plugin": "^5.6.3" + "html-webpack-plugin": "^5.6.3", + "ts-loader": "^9.5.2", + "typescript": "^5.8.2" } }, "node_modules/@discoveryjs/json-ext": { @@ -401,6 +404,37 @@ "node": ">=8" } }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/async": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", + "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==", + "license": "MIT" + }, + "node_modules/big.js": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz", + "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", + "license": "MIT", + "engines": { + "node": "*" + } + }, "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -408,6 +442,19 @@ "dev": true, "license": "ISC" }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/browserslist": { "version": "4.24.4", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz", @@ -477,6 +524,36 @@ ], "license": "CC-BY-4.0" }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/chalk/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/chrome-trace-event": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz", @@ -513,6 +590,26 @@ "node": ">=6" } }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "license": "MIT" + }, "node_modules/colorette": { "version": "2.0.20", "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", @@ -679,6 +776,15 @@ "integrity": "sha512-refir3NlutEZqlKaBLK0tzlVLe5P2wDKS7UQt/3SpibizgsRAPOsqQC3ffw1nlv3ze5gjRQZYHoPymgVZkplFA==", "license": "ISC" }, + "node_modules/emojis-list": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", + "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==", + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, "node_modules/enhanced-resolve": { "version": "5.18.1", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz", @@ -812,6 +918,12 @@ "node": ">= 4.9.1" } }, + "node_modules/fastparse": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", + "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", + "license": "MIT" + }, "node_modules/fdir": { "version": "6.4.3", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz", @@ -827,6 +939,19 @@ } } }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/find-up": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", @@ -883,6 +1008,43 @@ "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==", "license": "ISC" }, + "node_modules/handlebars": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", + "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "license": "MIT", + "peer": true, + "dependencies": { + "minimist": "^1.2.5", + "neo-async": "^2.6.2", + "source-map": "^0.6.1", + "wordwrap": "^1.0.0" + }, + "bin": { + "handlebars": "bin/handlebars" + }, + "engines": { + "node": ">=0.4.7" + }, + "optionalDependencies": { + "uglify-js": "^3.1.4" + } + }, + "node_modules/handlebars-loader": { + "version": "1.7.3", + "resolved": "https://registry.npmjs.org/handlebars-loader/-/handlebars-loader-1.7.3.tgz", + "integrity": "sha512-dDb+8D51vE3OTSE2wuGPWRAegtsEuw8Mk8hCjtRu/pNcBfN5q+M8ZG3kVJxBuOeBrVElpFStipGmaxSBTRR1mQ==", + "license": "MIT", + "dependencies": { + "async": "^3.2.2", + "fastparse": "^1.0.0", + "loader-utils": "1.4.x", + "object-assign": "^4.1.0" + }, + "peerDependencies": { + "handlebars": ">= 1.3.0 < 5" + } + }, "node_modules/has-flag": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", @@ -1065,6 +1227,16 @@ "node": ">=0.10.0" } }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, "node_modules/is-plain-object": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", @@ -1118,6 +1290,18 @@ "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==", "license": "MIT" }, + "node_modules/json5": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz", + "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==", + "license": "MIT", + "dependencies": { + "minimist": "^1.2.0" + }, + "bin": { + "json5": "lib/cli.js" + } + }, "node_modules/kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -1136,6 +1320,20 @@ "node": ">=6.11.5" } }, + "node_modules/loader-utils": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz", + "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==", + "license": "MIT", + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^1.0.1" + }, + "engines": { + "node": ">=4.0.0" + } + }, "node_modules/locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -1171,6 +1369,33 @@ "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==", "license": "MIT" }, + "node_modules/micromatch": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dev": true, + "license": "MIT", + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/micromatch/node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/mime-db": { "version": "1.52.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", @@ -1192,6 +1417,15 @@ "node": ">= 0.6" } }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/neo-async": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", @@ -1238,6 +1472,15 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/p-limit": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", @@ -1496,6 +1739,19 @@ "url": "https://opencollective.com/webpack" } }, + "node_modules/semver": { + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz", + "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/serialize-javascript": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", @@ -1675,6 +1931,50 @@ "url": "https://github.com/sponsors/SuperchupuDev" } }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/ts-loader": { + "version": "9.5.2", + "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.2.tgz", + "integrity": "sha512-Qo4piXvOTWcMGIgRiuFa6nHNm+54HbYaZCKqc9eeZCLRy3XqafQgwX2F7mofrbJG3g7EEb+lkiR+z2Lic2s3Zw==", + "dev": true, + "license": "MIT", + "dependencies": { + "chalk": "^4.1.0", + "enhanced-resolve": "^5.0.0", + "micromatch": "^4.0.0", + "semver": "^7.3.4", + "source-map": "^0.7.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "typescript": "*", + "webpack": "^5.0.0" + } + }, + "node_modules/ts-loader/node_modules/source-map": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", + "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">= 8" + } + }, "node_modules/tslib": { "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", @@ -1682,6 +1982,34 @@ "dev": true, "license": "0BSD" }, + "node_modules/typescript": { + "version": "5.8.2", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.2.tgz", + "integrity": "sha512-aJn6wq13/afZp/jT9QZmwEjDqqvSGp1VT5GVg+f/t6/oVyrgXM6BY1h9BRh/O5p3PlUPAe+WuiEZOmb/49RqoQ==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/uglify-js": { + "version": "3.19.3", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz", + "integrity": "sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==", + "license": "BSD-2-Clause", + "optional": true, + "peer": true, + "bin": { + "uglifyjs": "bin/uglifyjs" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/undici-types": { "version": "6.20.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", @@ -1878,6 +2206,13 @@ "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz", "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==", "license": "MIT" + }, + "node_modules/wordwrap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==", + "license": "MIT", + "peer": true } } } diff --git a/package.json b/package.json index 3dc28ac..0d43f48 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "html", "version": "1.0.0", - "main": "src/index.js", + "main": "src/index.ts", "scripts": { "build": "webpack --mode=development", "dev": "webpack --mode=development --watch" @@ -10,11 +10,14 @@ "license": "ISC", "description": "", "dependencies": { + "handlebars-loader": "^1.7.3", "webpack": "^5.98.0", "webpack-cli": "^6.0.1" }, "devDependencies": { "copy-webpack-plugin": "^13.0.0", - "html-webpack-plugin": "^5.6.3" + "html-webpack-plugin": "^5.6.3", + "ts-loader": "^9.5.2", + "typescript": "^5.8.2" } } diff --git a/src/components/carusel.ts b/src/components/carusel.ts new file mode 100644 index 0000000..f470b63 --- /dev/null +++ b/src/components/carusel.ts @@ -0,0 +1,37 @@ +import './logger' + +const moveContainer = (container: HTMLElement, btnLeft: HTMLButtonElement, btnRight: HTMLButtonElement, prevOffset: number, offset: number) => { + const containerWidth = container.scrollWidth + + let newOffset = prevOffset + offset + const minOffset = (containerWidth - document.body.clientWidth) * -1 + const maxOffset = 0; + newOffset = Math.min(Math.max(minOffset, newOffset), maxOffset); + container.style.transform = `translateX(${newOffset}px)` + + btnLeft.disabled = newOffset >= maxOffset; + btnRight.disabled = newOffset <= minOffset; + + return newOffset; +} + +/** + * Инициализация карусели + * @param container html элемент + * @param btnLeft + * @param btnRight + */ +export function initCarusel(container: HTMLElement, btnLeft: HTMLButtonElement, btnRight: HTMLButtonElement) { + let containerOffset = 0; + + containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, 0) + + btnLeft.addEventListener('click', () => { + containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, 285) + }) + + btnRight.addEventListener('click', () => { + containerOffset = moveContainer(container, btnLeft, btnRight, containerOffset, -285) + }) +} + diff --git a/src/components/logger.ts b/src/components/logger.ts new file mode 100644 index 0000000..cea4f10 --- /dev/null +++ b/src/components/logger.ts @@ -0,0 +1 @@ +console.log('hello world') diff --git a/src/index.hbs b/src/index.hbs new file mode 100644 index 0000000..3c9731e --- /dev/null +++ b/src/index.hbs @@ -0,0 +1,24 @@ + + + + + + + Document + + + + + + + + + {{> views/header }} +
+ {{> views/carusel }} +
+ + \ No newline at end of file diff --git a/src/index.html b/src/index.html deleted file mode 100644 index a7bdb3d..0000000 --- a/src/index.html +++ /dev/null @@ -1,189 +0,0 @@ - - - - - - - Document - - - - - - - - - -
- - - -
-
-
-

Weakly - Top NFT

-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
-
07h 09m 12s
-
-
-

Sun-Glass

-
-
-

Current bid

-
- - - -
- 1.75 -
-
-
- -
-
-
-
-
- - -
-
-
- - - \ No newline at end of file diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 28451b6..0000000 --- a/src/index.js +++ /dev/null @@ -1,34 +0,0 @@ -const name = 'File' - -import { name as name2 } from './index2.js' - -console.log('From index.js log name', name2) - -const btnLeft = document.querySelector('.top-nft .btn-left') -const btnRight = document.querySelector('.top-nft .btn-right') -const container = document.querySelector('.nft-card-container') - -let containerOffset = 0; - -const moveContainer = (offset) => { - const containerWidth = container.scrollWidth - - const newOffset = containerOffset + offset - const minOffset = (containerWidth - document.body.clientWidth) * -1 - const maxOffset = 0; - containerOffset = Math.min(Math.max(minOffset, newOffset), maxOffset); - container.style.transform = `translateX(${containerOffset}px)` - - btnLeft.disabled = containerOffset >= maxOffset ? true : null; - btnRight.disabled = containerOffset <= minOffset; -} - -moveContainer(0) - -btnLeft.addEventListener('click', () => { - moveContainer(285) -}) - -btnRight.addEventListener('click', () => { - moveContainer(-285) -}) diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..aa9f3c7 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,8 @@ +import { initCarusel } from './components/carusel' + +const container = document.querySelector('.nft-card-container') +const btnLeft = document.querySelector('.top-nft .btn-left') +const btnRight = document.querySelector('.top-nft .btn-right') +if (container && btnLeft && btnRight) { + initCarusel(container, btnLeft, btnRight) +} diff --git a/src/index2.js b/src/index2.js deleted file mode 100644 index a638a24..0000000 --- a/src/index2.js +++ /dev/null @@ -1 +0,0 @@ -export const name = "Vasya" diff --git a/src/views/carusel.hbs b/src/views/carusel.hbs new file mode 100644 index 0000000..9dde787 --- /dev/null +++ b/src/views/carusel.hbs @@ -0,0 +1,16 @@ +
+

Weakly - Top NFT

+
+ {{> nft-card title="Sun-Glass" price=1.75 }} + {{> nft-card title="Sun-Glass2" price=5}} + {{> nft-card title="Sun-Glass3" price=2.15}} + {{> nft-card title="Sun-Glass4" price=1.1}} + {{> nft-card title="Sun-Glass5" price=1.75}} + {{> nft-card title="Sun-Glass6" price=1.75}} + {{> nft-card title="Sun-Glass7" price=1.75}} +
+
+ + +
+
\ No newline at end of file diff --git a/src/views/header.hbs b/src/views/header.hbs new file mode 100644 index 0000000..b95ce10 --- /dev/null +++ b/src/views/header.hbs @@ -0,0 +1,12 @@ +
+ + + +
\ No newline at end of file diff --git a/src/views/nft-card.hbs b/src/views/nft-card.hbs new file mode 100644 index 0000000..5dff759 --- /dev/null +++ b/src/views/nft-card.hbs @@ -0,0 +1,24 @@ +
+
+
07h 09m 12s
+
+
+

{{title}}

+
+
+

Current bid

+
+ + + +
+ {{ price }} +
+
+
+ +
+
+
\ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..1c249ac --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,114 @@ +{ + "compilerOptions": { + /* Visit https://aka.ms/tsconfig to read more about this file */ + + /* Projects */ + // "incremental": true, /* Save .tsbuildinfo files to allow for incremental compilation of projects. */ + // "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */ + // "tsBuildInfoFile": "./.tsbuildinfo", /* Specify the path to .tsbuildinfo incremental compilation file. */ + // "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects. */ + // "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */ + // "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */ + + /* Language and Environment */ + "target": "ES2022", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */ + // "lib": [], /* Specify a set of bundled library declaration files that describe the target runtime environment. */ + // "jsx": "preserve", /* Specify what JSX code is generated. */ + // "libReplacement": true, /* Enable lib replacement. */ + // "experimentalDecorators": true, /* Enable experimental support for legacy experimental decorators. */ + // "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */ + // "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */ + // "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */ + // "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */ + // "reactNamespace": "", /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */ + // "noLib": true, /* Disable including any library files, including the default lib.d.ts. */ + // "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */ + // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ + + /* Modules */ + "module": "commonjs", /* Specify what module code is generated. */ + // "rootDir": "./", /* Specify the root folder within your source files. */ + // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ + // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ + // "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */ + // "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */ + // "typeRoots": [], /* Specify multiple folders that act like './node_modules/@types'. */ + // "types": [], /* Specify type package names to be included without being referenced in a source file. */ + // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */ + // "moduleSuffixes": [], /* List of file name suffixes to search when resolving a module. */ + // "allowImportingTsExtensions": true, /* Allow imports to include TypeScript file extensions. Requires '--moduleResolution bundler' and either '--noEmit' or '--emitDeclarationOnly' to be set. */ + // "rewriteRelativeImportExtensions": true, /* Rewrite '.ts', '.tsx', '.mts', and '.cts' file extensions in relative import paths to their JavaScript equivalent in output files. */ + // "resolvePackageJsonExports": true, /* Use the package.json 'exports' field when resolving package imports. */ + // "resolvePackageJsonImports": true, /* Use the package.json 'imports' field when resolving imports. */ + // "customConditions": [], /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */ + // "noUncheckedSideEffectImports": true, /* Check side effect imports. */ + // "resolveJsonModule": true, /* Enable importing .json files. */ + // "allowArbitraryExtensions": true, /* Enable importing files with any extension, provided a declaration file is present. */ + // "noResolve": true, /* Disallow 'import's, 'require's or ''s from expanding the number of files TypeScript should add to a project. */ + + /* JavaScript Support */ + // "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */ + // "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */ + // "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */ + + /* Emit */ + // "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */ + // "declarationMap": true, /* Create sourcemaps for d.ts files. */ + // "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */ + // "sourceMap": true, /* Create source map files for emitted JavaScript files. */ + // "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */ + // "noEmit": true, /* Disable emitting files from a compilation. */ + // "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */ + "outDir": "./dist", /* Specify an output folder for all emitted files. */ + // "removeComments": true, /* Disable emitting comments. */ + // "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */ + // "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */ + // "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */ + // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ + // "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */ + // "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */ + // "newLine": "crlf", /* Set the newline character for emitting files. */ + // "stripInternal": true, /* Disable emitting declarations that have '@internal' in their JSDoc comments. */ + // "noEmitHelpers": true, /* Disable generating custom helper functions like '__extends' in compiled output. */ + // "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */ + // "preserveConstEnums": true, /* Disable erasing 'const enum' declarations in generated code. */ + // "declarationDir": "./", /* Specify the output directory for generated declaration files. */ + + /* Interop Constraints */ + // "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */ + // "verbatimModuleSyntax": true, /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */ + // "isolatedDeclarations": true, /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */ + // "erasableSyntaxOnly": true, /* Do not allow runtime constructs that are not part of ECMAScript. */ + // "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */ + "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */ + // "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */ + "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */ + + /* Type Checking */ + "strict": true, /* Enable all strict type-checking options. */ + // "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */ + // "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */ + // "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */ + // "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */ + // "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */ + // "strictBuiltinIteratorReturn": true, /* Built-in iterators are instantiated with a 'TReturn' type of 'undefined' instead of 'any'. */ + // "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */ + // "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */ + // "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */ + // "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */ + // "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */ + // "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ + // "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ + // "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ + // "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */ + // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */ + // "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */ + // "allowUnusedLabels": true, /* Disable error reporting for unused labels. */ + // "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */ + + /* Completeness */ + // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ + "skipLibCheck": true /* Skip type checking all .d.ts files. */ + }, + "include": ["src/**/*"] +} diff --git a/webpack.config.js b/webpack.config.js index 29c145e..45d41b8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -3,16 +3,27 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyPlugin = require("copy-webpack-plugin"); module.exports = { - entry: './src/index.js', + entry: './src/index.ts', output: { filename: 'index.js', path: path.resolve(__dirname, 'dist'), clean: true }, - module: {}, + resolve: { + extensions: ['.js', '.ts'] + }, + module: { + rules: [ + { test: /\.(ts|tsx)$/, loader: "ts-loader" }, + { + test: /\.hbs$/, + loader: 'handlebars-loader', + }, + ] + }, plugins: [ new HtmlWebpackPlugin({ - template: "./src/index.html" + template: "./src/index.hbs" }), new CopyPlugin({ patterns: [