{"id":19831536,"url":"https://github.com/notacat1/ejs-site-builder","last_synced_at":"2026-04-13T20:32:28.175Z","repository":{"id":196911980,"uuid":"695848897","full_name":"NotACat1/EJS-site-builder","owner":"NotACat1","description":" This project is a single-page website built with Webpack. Its main goal is to provide users with information about cities in Europe and Asia. City data is dynamically loaded from a JSON file onto the page, allowing users to explore key details through informative cards.","archived":false,"fork":false,"pushed_at":"2023-09-29T09:36:58.000Z","size":179,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-14T15:02:23.927Z","etag":null,"topics":["ejs","html","html5","sass","scss","webpack"],"latest_commit_sha":null,"homepage":"https://notacat1.github.io/EJS-site-builder/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NotACat1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-24T12:21:59.000Z","updated_at":"2023-09-29T09:28:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"20f1b0f9-0e21-4f85-80b6-9509385c4300","html_url":"https://github.com/NotACat1/EJS-site-builder","commit_stats":null,"previous_names":["notacat1/ejs-site-builder"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/NotACat1/EJS-site-builder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2FEJS-site-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2FEJS-site-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2FEJS-site-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2FEJS-site-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NotACat1","download_url":"https://codeload.github.com/NotACat1/EJS-site-builder/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NotACat1%2FEJS-site-builder/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31770720,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T20:17:16.280Z","status":"ssl_error","status_checked_at":"2026-04-13T20:17:08.216Z","response_time":93,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ejs","html","html5","sass","scss","webpack"],"created_at":"2024-11-12T11:32:39.993Z","updated_at":"2026-04-13T20:32:28.149Z","avatar_url":"https://github.com/NotACat1.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# EJS-site-builder\n\n![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)\n![SASS](https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge\u0026logo=SASS\u0026logoColor=white)\n![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge\u0026logo=node.js\u0026logoColor=white)\n\n![EJS-site-builder](https://github.com/NotACat1/EJS-site-builder/assets/113008873/eabd1035-fada-47da-9f6e-a31ceee2752e)\n\n## Описание проекта\n\nДанный проект представляет собой одностраничный веб-сайт, созданный с использованием инструмента Webpack. Основная цель проекта заключается в том, чтобы предоставить пользователю информацию о городах Европы и Азии. Для этого данные о городах загружаются из JSON файла и динамически подтягиваются на страницу. Сайт предоставляет пользователю возможность ознакомиться с основной информацией о каждом городе через карточки с подробными описаниями.\n\nВы можете ознакомиться с сайтом по этой [ссылке](https://notacat1.github.io/EJS-site-builder/).\n\n## Реализованный функционал\n\n### 1. Загрузка данных из JSON\n\nПроект реализует механизм загрузки данных о городах из внешнего JSON файла. Эти данные включают в себя информацию о названии города, его географических координатах, достопримечательностях и прочих интересных фактах.\n\n```js\n// webpack.config.js\nconst HtmlWebpackPlugin = require('html-webpack-plugin')\n\nconst sitiesData = require('./src/data/cities.json')\nconst templateParameters = {\n  sitiesEurope: sitiesData.europe,\n  sitiesAsia: sitiesData.asia,\n}\n\nmodule.exports = {\n  // другие настройки WebPack\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './src/pages/index.html',\n      filename: 'index.html',\n      templateParameters,\n    }),\n    // другие настройки WebPack\n  ],\n}\n```\n\n### 2. Динамическое формирование контента\n\nС использованием шаблонизатора EJS, данные о городах динамически передаются на веб-страницу. Это позволяет создавать карточки с подробными описаниями городов автоматически, основываясь на полученных данных.\n\nШаблон вывода массива карточек:\n\n```ejs\n// cards.ejs\n\u003c% data.forEach(function(item) { %\u003e\n\u003carticle class=\"card\"\u003e\n  \u003cdiv\n    class=\"card__img\"\n    style=\"background-image: url( \u003c%= item.imgPath %\u003e )\"\n  \u003e\u003c/div\u003e\n  \u003cdiv class=\"card__info\"\u003e\n    \u003ch2 class=\"card__title\"\u003e\u003c%- item.name %\u003e\u003c/h2\u003e\n    \u003cp class=\"card__text\"\u003e\u003c%- item.description %\u003e\u003c/p\u003e\n  \u003c/div\u003e\n\u003c/article\u003e\n\u003c% }); %\u003e\n```\n\nПодключение к странице шаблона ejs:\n\n```html\n\u003c%= require('@templates/cards.ejs')({ data: sitiesEurope }) %\u003e\n\u003c%= require('@templates/cards.ejs')({ data: sitiesAsia }) %\u003e\n```\n\n## Используемые технологии\n\n### 1. Normlize.css\n\nNormlize.css — это небольшая библиотека, которая предназначена для создания единообразной базовой стилизации для веб-страниц. Основная цель normalize.css - это сделать стандартные стили элементов HTML более предсказуемыми и унифицированными между разными браузерами.\n\nУстановка:\n\nОткройте терминал и перейдите в корневую директорию вашего проекта. Затем выполните команду установки Normalize.css с использованием пакетного менеджера npm:\n\n```bash\nnpm install normalize.css\n```\n\nЭта команда загрузит и установит Normalize.css в ваш проект.\n\nИмпорт Normalize.css в проект:\n\nВ файле, где вы организуете ваши стили (например, style.scss), добавьте следующую строку в начале файла, чтобы импортировать Normalize.css:\n\n```scss\n// style.scss\n@import 'normalize.css';\n```\n\n### 2. Webpack\n\nВ качестве инструмента сборки и управления зависимостями используется Webpack. Этот мощный инструмент позволяет эффективно управлять ресурсами проекта, собирать модули и оптимизировать производительность веб-приложения.\n\nСкрипты для работы:\n\n1. `npm run build`: этот скрипт используется для сборки проекта в режиме разработки. В режиме разработки, Webpack предоставляет полезные инструменты, такие как `source maps`, которые помогают вам отлаживать и разрабатывать ваш код.\n2. `npm run production`: этот скрипт используется для сборки проекта в режиме продукции (production). В режиме продукции, Webpack проводит более тщательные оптимизации, минимизируя размеры файлов и оптимизируя производительность.\n3. `npm run gh-pages`: этот скрипт представляет собой комбинацию нескольких команд, которые выкладывают проект на GitHub Pages:\n  - сначала запускается команда `npm run production`, которая собирает проект в режиме продукции.\n  - затем, после успешной сборки, запускается команда `npx gh-pages -d dist`\n4. `npm run start`: этот скрипт используется для запуска локального сервера разработки. Этот сервер позволяет вам разрабатывать ваш проект локально и автоматически перезагружает страницу при внесении изменений в код.\n\n### 3. EJS (Embedded JavaScript templates)\n\nДля шаблонизации данных используется EJS. Он позволяет внедрять JavaScript код в HTML-шаблоны, что обеспечивает динамическое формирование контента на основе полученных данных.\n\n### 4. JSON (JavaScript Object Notation)\n\nДля хранения и передачи данных о городах используется формат JSON (JavaScript Object Notation). Он обеспечивает легкость чтения и парсинга данных.\n\n### 5. SASS (Syntactically Awesome Stylesheets)\n\nИспользуется для создания таблиц стилей с использованием расширенного синтаксиса. SASS предоставляет множество удобных функций, вложенности и переменных, что значительно облегчает организацию и поддержку стилей в проекте.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotacat1%2Fejs-site-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnotacat1%2Fejs-site-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnotacat1%2Fejs-site-builder/lists"}