feed feat: implement cards component

.gitignore

@@ -3,3 +3,5 @@
 
 # Node JS
 node_modules/
+
+

package.json

@@ -6,7 +6,9 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepare": "husky && husky install",
+    "prestart": "npm run compile:templates",
     "start": "DEBUG=* && node ./server/server.js",
+    "compile:templates": "handlebars public/components/Cards/cards.hbs -f public/components/Cards/cards.precompiled.js",
     "lint": "eslint . --fix && prettier --write ."
   },
   "author": "",
@@ -27,6 +29,7 @@
   },
   "dependencies": {
     "express": "^4.21.0",
+    "handlebars": "^4.7.8",
     "morgan": "^1.10.0"
   }
 }

public/components/Cards/cards.css

@@ -0,0 +1,35 @@
+@import '/public/variables.css';
+
+.card {
+  background-color: var(--main-color);
+  display: flex;
+  padding: 10px;
+  width: 100%;
+  gap: 10px;
+  border-radius: 10px;
+}
+
+.card img {
+  width: 150px;
+  height: 150px;
+  border-radius: 10px;
+}
+
+.card-content {
+  padding: 0px;
+}
+
+.card-content p {
+  font-family: var(--text-font);
+  margin-top: 0;
+}
+
+.card-content-header {
+  font-weight: 500;
+  font-size: 20px;
+}
+
+.card-content-text {
+  font-weight: 300;
+  font-size: 16px;
+}

public/components/Cards/cards.hbs

@@ -0,0 +1,12 @@
+
+{{#each items}}
+<div class="card">
+    {{#if imageUrl}}
+    <img src="{{imageUrl}}">
+    {{/if}}
+    <div class="card-content">
+        <p class="card-content-header">{{title}}</p>
+        <p class="card-content-text">{{description}}</p>
+    </div>
+</div>
+{{/each}}

public/components/Cards/cards.js

@@ -0,0 +1,13 @@
+export default class Cards {
+  constructor(parent, items) {
+    this.parent = parent;
+    this.items = items;
+    console.log(parent);
+    console.log(items);
+  }
+
+  render() {
+    const template = Handlebars.templates['cards.hbs'];
+    this.parent.innerHTML = template({ items: this.items });
+  }
+}

public/components/Cards/cards.precompiled.js

@@ -0,0 +1,138 @@
+(function () {
+  var template = Handlebars.template,
+    templates = (Handlebars.templates = Handlebars.templates || {});
+  templates['cards.hbs'] = template({
+    1: function (container, depth0, helpers, partials, data) {
+      var stack1,
+        helper,
+        alias1 = depth0 != null ? depth0 : container.nullContext || {},
+        alias2 = container.hooks.helperMissing,
+        alias3 = 'function',
+        alias4 = container.escapeExpression,
+        lookupProperty =
+          container.lookupProperty ||
+          function (parent, propertyName) {
+            if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+              return parent[propertyName];
+            }
+            return undefined;
+          };
+
+      return (
+        '<div class="card">\n' +
+        ((stack1 = lookupProperty(helpers, 'if').call(
+          alias1,
+          depth0 != null ? lookupProperty(depth0, 'imageUrl') : depth0,
+          {
+            name: 'if',
+            hash: {},
+            fn: container.program(2, data, 0),
+            inverse: container.noop,
+            data: data,
+            loc: { start: { line: 4, column: 4 }, end: { line: 6, column: 11 } },
+          },
+        )) != null
+          ? stack1
+          : '') +
+        '    <div class="card-content">\n        <p class="card-content-header">' +
+        alias4(
+          ((helper =
+            (helper =
+              lookupProperty(helpers, 'title') ||
+              (depth0 != null ? lookupProperty(depth0, 'title') : depth0)) != null
+              ? helper
+              : alias2),
+          typeof helper === alias3
+            ? helper.call(alias1, {
+                name: 'title',
+                hash: {},
+                data: data,
+                loc: { start: { line: 8, column: 39 }, end: { line: 8, column: 48 } },
+              })
+            : helper),
+        ) +
+        '</p>\n        <p class="card-content-text">' +
+        alias4(
+          ((helper =
+            (helper =
+              lookupProperty(helpers, 'description') ||
+              (depth0 != null ? lookupProperty(depth0, 'description') : depth0)) != null
+              ? helper
+              : alias2),
+          typeof helper === alias3
+            ? helper.call(alias1, {
+                name: 'description',
+                hash: {},
+                data: data,
+                loc: { start: { line: 9, column: 37 }, end: { line: 9, column: 52 } },
+              })
+            : helper),
+        ) +
+        '</p>\n    </div>\n</div>\n'
+      );
+    },
+    2: function (container, depth0, helpers, partials, data) {
+      var helper,
+        lookupProperty =
+          container.lookupProperty ||
+          function (parent, propertyName) {
+            if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+              return parent[propertyName];
+            }
+            return undefined;
+          };
+
+      return (
+        '    <img src="' +
+        container.escapeExpression(
+          ((helper =
+            (helper =
+              lookupProperty(helpers, 'imageUrl') ||
+              (depth0 != null ? lookupProperty(depth0, 'imageUrl') : depth0)) != null
+              ? helper
+              : container.hooks.helperMissing),
+          typeof helper === 'function'
+            ? helper.call(depth0 != null ? depth0 : container.nullContext || {}, {
+                name: 'imageUrl',
+                hash: {},
+                data: data,
+                loc: { start: { line: 5, column: 14 }, end: { line: 5, column: 26 } },
+              })
+            : helper),
+        ) +
+        '">\n'
+      );
+    },
+    compiler: [8, '>= 4.3.0'],
+    main: function (container, depth0, helpers, partials, data) {
+      var stack1,
+        lookupProperty =
+          container.lookupProperty ||
+          function (parent, propertyName) {
+            if (Object.prototype.hasOwnProperty.call(parent, propertyName)) {
+              return parent[propertyName];
+            }
+            return undefined;
+          };
+
+      return (
+        '\n' +
+        ((stack1 = lookupProperty(helpers, 'each').call(
+          depth0 != null ? depth0 : container.nullContext || {},
+          depth0 != null ? lookupProperty(depth0, 'items') : depth0,
+          {
+            name: 'each',
+            hash: {},
+            fn: container.program(1, data, 0),
+            inverse: container.noop,
+            data: data,
+            loc: { start: { line: 2, column: 0 }, end: { line: 12, column: 9 } },
+          },
+        )) != null
+          ? stack1
+          : '')
+      );
+    },
+    useData: true,
+  });
+})();

public/index.css

@@ -0,0 +1,21 @@
+@import './components/Cards/cards.css';
+@import './variables.css';
+
+body {
+  margin: 0;
+  background-color: var(--background-color);
+}
+
+.main-content {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.feed {
+  margin: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 40%;
+}

public/index.html

@@ -1,10 +1,24 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <title>Hello World!</title>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>DEAD VC.RU</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel="stylesheet" href="index.css"></link>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
   </head>
   <body>
-    <h1>Hello World!</h1>
+
+    <main class="main-content">
+      <div class="feed">
+      </div>
+    </main>
+
+    <script src="/handlebars/dist/handlebars.runtime.js"></script>
+    <script src="./components/Cards/cards.precompiled.js"></script>
+    <script type="module" src="index.js"></script>
   </body>
-</html>
+</html>