frontend-park-mail-ru · AlexNov03 · Sep 23, 2024 · Sep 23, 2024 · Sep 23, 2024 · Sep 23, 2024
diff --git a/.github/workflows/common.yml b/.github/workflows/common.yml
@@ -32,6 +32,8 @@ jobs:
           VALIDATE_JAVASCRIPT_STANDARD: false
           VALIDATE_JSON: false
           VALIDATE_CHECKOV: false
+          VALIDATE_CSS: false
+          VALIDATE_HTML: false
           LINTER_RULES_PATH: /
           JAVASCRIPT_ES_CONFIG_FILE: eslint.config.js
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,8 @@
 
 # Node JS
 node_modules/
+
+public/images
+*precompiled.js
+
+
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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"
   }
 }
diff --git a/public/components/Cards/cards.css b/public/components/Cards/cards.css
@@ -0,0 +1,57 @@
+@import '/public/variables.css';
+
+.card {
+  background-color: var(--main-color);
+  display: flex;
+  padding: var(--space-xs);
+  width: 100%;
+  min-height: var(--card-min-height);
+  max-height: var(--card-max-height);
+  gap: var(--space-xs);
+  border-radius: var(--border-radius-m);
+}
+
+.card-img {
+  min-width: var(--card-img-min-width);
+  max-width: var(--card-img-max-width);
+  height: var(--card-img-height);
+  overflow: hidden;
+  position: relative;
+  border-radius: var(--border-radius-m);
+}
+
+.card-img img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.card-content {
+  padding-bottom: var(--space-xs);
+  overflow: hidden;
+}
+
+.card-content p {
+  line-height: var(--line-height-s);
+  font-family: var(--text-font);
+  margin-top: var(--space-null);
+}
+
+.card-content__header {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--text-size-xl);
+  margin-bottom: var(--space-m);
+}
+
+.card-content__text {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--text-size);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: 95%;
+  overflow: hidden;
+}
diff --git a/public/components/Cards/cards.hbs b/public/components/Cards/cards.hbs
@@ -0,0 +1,13 @@
+{{#each items}}
+  <div class='card'>
+    {{#if imageUrl}}
+    <div class="card-img">
+        <img src="{{imageUrl}}">
+    </div>
+    {{/if}}
+    <div class='card-content'>
+      <p class='card-content__header'>{{title}}</p>
+      <p class='card-content__text'>{{description}}</p>
+    </div>
+  </div>
+{{/each}}
diff --git a/public/components/Cards/cards.js b/public/components/Cards/cards.js
@@ -0,0 +1,11 @@
+export default class Cards {
+  constructor(parent, items) {
+    this.parent = parent;
+    this.items = items;
+  }
+
+  render() {
+    const template = Handlebars.templates['cards.hbs'];
+    this.parent.innerHTML = template({ items: this.items });
+  }
+}
diff --git a/public/index.css b/public/index.css
@@ -0,0 +1,23 @@
+@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;
+}
+
+.main-content__feed {
+  margin: var(--space-m);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  margin-left: var(--main-content-feed-margin-left);
+  margin-right: var(--main-content-feed-margin-right);
+  max-width: var(--main-content-feed-max-width);
+}
diff --git a/public/index.html b/public/index.html
@@ -1,10 +1,25 @@
 <!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 rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
-    <h1>Hello World!</h1>
+    <main class="main-content">
+      <div class="main-content__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>
diff --git a/public/index.js b/public/index.js
@@ -0,0 +1,49 @@
+import Cards from './components/Cards/cards.js';
+
+const cardsCollection = [
+  {
+    title: 'What is Lorem Ipsum? What is Lorem Ipsum?',
+    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
+      text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
+      `,
+    imageUrl: 'images/1.jpg',
+  },
+  {
+    title: 'title2',
+    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      `,
+  },
+  {
+    title: 'title3',
+    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
+      text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 text1 
+      text1 text text1 text1 text1 text1 text1 text1 text`,
+    imageUrl: 'images/1.jpg',
+  },
+  {
+    title: 'title4',
+    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      `,
+  },
+  {
+    title: 'title3',
+    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
+      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
+      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
+      text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 text1 
+      text1 text text1 text1 text1 text1 text1 text1 text`,
+    imageUrl: 'images/1.jpg',
+  },
+];
+
+const feed = document.querySelector('.main-content__feed');
+const cards = new Cards(feed, cardsCollection);
+cards.render();
diff --git a/public/variables.css b/public/variables.css
@@ -0,0 +1,46 @@
+:root {
+  --background-color: #edeef0;
+  --accent-color: #9950f6;
+  --main-color: #ffffff;
+  --hover-color: #551aa0;
+  --active-color: #b47cfb;
+  --disabled-color: #dbbfff;
+
+  --text-color: #000000;
+  --text-font: 'Play', sans-serif;
+
+  --space-null: 0px;
+  --space-xxs: 5px;
+  --space-xs: 10px;
+  --space-s: 15px;
+  --space-m: 20px;
+  --space-l: 25px;
+
+  --border-radius-s: 5px;
+  --border-radius-m: 10px;
+  --border-radius-l: 15px;
+
+  --font-weight-thin: 100;
+  --font-weight-semibold: 300;
+  --font-weight-bold: 600;
+
+  --text-size-xs: 12px;
+  --text-size: 16px;
+  --text-size-l: 18px;
+  --text-size-xl: 20px;
+  --text-size-h2: 24px;
+  --text-size-h1: 40px;
+
+  --line-height-s: 1.4;
+  --line-height-m: 1.6;
+  --line-height-l: 1.8;
+
+  --card-min-height: 120px;
+  --card-max-height: 150px;
+  --card-img-min-width: 150px;
+  --card-img-max-width: 150px;
+  --card-img-height: 150px;
+  --main-content-feed-margin-left: 30vw;
+  --main-content-feed-margin-right: 30vw;
+  --main-content-feed-max-width: 500px;
+}
diff --git a/server/server.js b/server/server.js
@@ -8,7 +8,8 @@ const app = express();
 app.use(morgan('dev'));
 app.use(express.static(path.resolve(__dirname, '..', 'public')));
 app.use(express.static(path.resolve(__dirname, '..', 'node_modules')));
-app.use(express.static(path.resolve(__dirname, 'images')));
+app.use(express.static(path.resolve(__dirname, '..', 'images')));
+app.use(express.static(path.resolve(__dirname, '..', 'components')));
 
 const port = process.env.PORT || 3000;