Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/notacat1/ejs-site-builder
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.
https://github.com/notacat1/ejs-site-builder
ejs html html5 sass scss webpack
Last synced: 19 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/notacat1/ejs-site-builder
- Owner: NotACat1
- Created: 2023-09-24T12:21:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-09-29T09:36:58.000Z (over 1 year ago)
- Last Synced: 2024-11-12T11:40:26.997Z (3 months ago)
- Topics: ejs, html, html5, sass, scss, webpack
- Language: SCSS
- Homepage: https://notacat1.github.io/EJS-site-builder/
- Size: 175 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# EJS-site-builder
## Описание проекта
Данный проект представляет собой одностраничный веб-сайт, созданный с использованием инструмента Webpack. Основная цель проекта заключается в том, чтобы предоставить пользователю информацию о городах Европы и Азии. Для этого данные о городах загружаются из JSON файла и динамически подтягиваются на страницу. Сайт предоставляет пользователю возможность ознакомиться с основной информацией о каждом городе через карточки с подробными описаниями.
Вы можете ознакомиться с сайтом по этой [ссылке](https://notacat1.github.io/EJS-site-builder/).
## Реализованный функционал
### 1. Загрузка данных из JSON
Проект реализует механизм загрузки данных о городах из внешнего JSON файла. Эти данные включают в себя информацию о названии города, его географических координатах, достопримечательностях и прочих интересных фактах.
```js
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
const sitiesData = require('./src/data/cities.json')
const templateParameters = {
sitiesEurope: sitiesData.europe,
sitiesAsia: sitiesData.asia,
}
module.exports = {
// другие настройки WebPack
plugins: [
new HtmlWebpackPlugin({
template: './src/pages/index.html',
filename: 'index.html',
templateParameters,
}),
// другие настройки WebPack
],
}
```
### 2. Динамическое формирование контента
С использованием шаблонизатора EJS, данные о городах динамически передаются на веб-страницу. Это позволяет создавать карточки с подробными описаниями городов автоматически, основываясь на полученных данных.
Шаблон вывода массива карточек:
```ejs
// cards.ejs
<% data.forEach(function(item) { %>
<%- item.name %>
<%- item.description %>
<% }); %>
```
Подключение к странице шаблона ejs:
```html
<%= require('@templates/cards.ejs')({ data: sitiesEurope }) %>
<%= require('@templates/cards.ejs')({ data: sitiesAsia }) %>
```
## Используемые технологии
### 1. Normlize.css
Normlize.css — это небольшая библиотека, которая предназначена для создания единообразной базовой стилизации для веб-страниц. Основная цель normalize.css - это сделать стандартные стили элементов HTML более предсказуемыми и унифицированными между разными браузерами.
Установка:
Откройте терминал и перейдите в корневую директорию вашего проекта. Затем выполните команду установки Normalize.css с использованием пакетного менеджера npm:
```bash
npm install normalize.css
```
Эта команда загрузит и установит Normalize.css в ваш проект.
Импорт Normalize.css в проект:
В файле, где вы организуете ваши стили (например, style.scss), добавьте следующую строку в начале файла, чтобы импортировать Normalize.css:
```scss
// style.scss
@import 'normalize.css';
```
### 2. Webpack
В качестве инструмента сборки и управления зависимостями используется Webpack. Этот мощный инструмент позволяет эффективно управлять ресурсами проекта, собирать модули и оптимизировать производительность веб-приложения.
Скрипты для работы:
1. `npm run build`: этот скрипт используется для сборки проекта в режиме разработки. В режиме разработки, Webpack предоставляет полезные инструменты, такие как `source maps`, которые помогают вам отлаживать и разрабатывать ваш код.
2. `npm run production`: этот скрипт используется для сборки проекта в режиме продукции (production). В режиме продукции, Webpack проводит более тщательные оптимизации, минимизируя размеры файлов и оптимизируя производительность.
3. `npm run gh-pages`: этот скрипт представляет собой комбинацию нескольких команд, которые выкладывают проект на GitHub Pages:
- сначала запускается команда `npm run production`, которая собирает проект в режиме продукции.
- затем, после успешной сборки, запускается команда `npx gh-pages -d dist`
4. `npm run start`: этот скрипт используется для запуска локального сервера разработки. Этот сервер позволяет вам разрабатывать ваш проект локально и автоматически перезагружает страницу при внесении изменений в код.
### 3. EJS (Embedded JavaScript templates)
Для шаблонизации данных используется EJS. Он позволяет внедрять JavaScript код в HTML-шаблоны, что обеспечивает динамическое формирование контента на основе полученных данных.
### 4. JSON (JavaScript Object Notation)
Для хранения и передачи данных о городах используется формат JSON (JavaScript Object Notation). Он обеспечивает легкость чтения и парсинга данных.
### 5. SASS (Syntactically Awesome Stylesheets)
Используется для создания таблиц стилей с использованием расширенного синтаксиса. SASS предоставляет множество удобных функций, вложенности и переменных, что значительно облегчает организацию и поддержку стилей в проекте.