Feat/landing first step

Mirved64 commented 1 year ago

@TorinAsakura

Скоуп как сделать стартовую структуру проекта

Описание не могу найти команду (по типу create-react-app) для создания стартовой папки проекта

Мои действия

изучил репозиторий (https://github.com/atls/tools)
изучил (https://github.com/atls/tools/wiki)
смотрел (https://github.com/atls/tools/blob/master/yarn/plugin-schematics/src/generate-project.command.tsx)
изучил репозиторий (https://github.com/atls/project-starter)

Вопрос какой командой генерировать стартовую структуру проекта сайта?

TorinAsakura commented 1 year ago

Никакой. Её нет. Руками. Ты потратил день на чтение, вместо того, чтобы начать делать. Браво.

Mirved64 commented 1 year ago

@TorinAsakura

Скоуп не может найти модули при записи @landing/имя модуля не может найти модуль 'react'

Описание выдаёт ошибку при импорте данных из модуля, при записи, например import { IndexPage } from '@landing/index-page' в IDE подчеркивает красным @landing/index-page в IDE подчеркивает красным react

Мои действия

Проект разбил на модули, каждая секция лендинга отдельный модуль.
Прописал в каждом модуле package.json, создал папку src с соответствующими файлами.
Запустил yarn install

При командах yarn check выдаёт ошибку:

landing/entrypoints/renderer/src/pages/index.tsx:3:26
➤ YN0000: │ 
➤ YN0000: │   Error: Cannot find module '@landing/index-page' or its corresponding type declarations.

package.json index-page:

{
"name": "@landing/index-page",
"version": "0.0.1",
"license": "BSD-3-Clause",
"main": "src/index.tsx",
"dependencies": {
"@landing/courses-fragment": "workspace:0.0.1",
"@landing/faq-fragment": "workspace:0.0.1",
"@landing/main-section-fragment": "workspace:0.0.1",
"@landing/navigation-fragment": "workspace:0.0.1",
"@landing/process-fragment": "workspace:0.0.1"
},
"devDependencies": {
"react": "18.2.0"
},
"peerDependencies": {
"react": "*",
"react-dom": "*",
"react-intl": "*"
}
}

Так же не видит модуль react. Пытался пофиксить как в этой статье и этой статье. Не получилось.

Вопрос: Как сделать, чтобы можно было подключать модули через @landing/имя модуля и подключить react?

TorinAsakura commented 1 year ago

@TorinAsakura

Скоуп не может найти модули при записи @landing/имя модуля не может найти модуль 'react'

Описание выдаёт ошибку при импорте данных из модуля, при записи, например import { IndexPage } from '@landing/index-page' в IDE подчеркивает красным @landing/index-page в IDE подчеркивает красным react

Мои действия

Проект разбил на модули, каждая секция лендинга отдельный модуль.

Прописал в каждом модуле package.json, создал папку src с соответствующими файлами.

Запустил yarn install

При командах yarn check выдаёт ошибку:
landing/entrypoints/renderer/src/pages/index.tsx:3:26
➤ YN0000: │ 
➤ YN0000: │   Error: Cannot find module '@landing/index-page' or its corresponding type declarations.
package.json index-page:
{
  "name": "@landing/index-page",
  "version": "0.0.1",
  "license": "BSD-3-Clause",
  "main": "src/index.tsx",
  "dependencies": {
    "@landing/courses-fragment": "workspace:0.0.1",
    "@landing/faq-fragment": "workspace:0.0.1",
    "@landing/main-section-fragment": "workspace:0.0.1",
    "@landing/navigation-fragment": "workspace:0.0.1",
    "@landing/process-fragment": "workspace:0.0.1"
  },
  "devDependencies": {
    "react": "18.2.0"
  },
  "peerDependencies": {
    "react": "*",
    "react-dom": "*",
    "react-intl": "*"
  }
}
Так же не видит модуль react. Пытался пофиксить как в этой статье и этой статье. Не получилось.

Вопрос: Как сделать, чтобы можно было подключать модули через @landing/имя модуля и подключить react?

у тебя всё перепутано…тебе реакт нужен чтобы запустить приложение? видимо да, но, тогда почему он в девДепсах? Тебе фрагменты нужны для работы после билда? Полагаю нет…тогда почему они у тебя являются основными зависимостями? Тебе IDE всё правильно говорит. Не там ищешь.

Далее, ты воркспейс новый добавил в корневой пекедж?

Mirved64 commented 1 year ago

Далее, ты воркспейс новый добавил в корневой пекедж?

воркспейс добавил, сейчас с зависимостями разбераться буду

Mirved64 commented 1 year ago

у тебя всё перепутано…тебе реакт нужен чтобы запустить приложение? видимо да, но, тогда почему он в девДепсах? Тебе фрагменты нужны для работы после билда? Полагаю нет…тогда почему они у тебя являются основными зависимостями? Тебе IDE всё правильно говорит. Не там ищешь.

Зависимости поменял, не помогло

Далее, ты воркспейс новый добавил в корневой пекедж?

Вот корневой package.json:

{
  "name": "template",
  "private": true,
  "license": "BSD 3-Clause",
  "workspaces": [
    "auth",
    "ui/**/*",
    "landing/**/*"
  ],
  "resolutions": {
    "@types/react": "17.0.39",
    "next": "12.3.4"
  },
  "devDependencies": {
    "@atls/code-service": "^0.0.18",
    "@atls/config-jest": "^0.0.5",
    "@atls/config-typescript": "^0.0.2",
    "@atls/schematics": "^0.0.13",
    "@jest/core": "^27.4.5",
    "@types/eslint": "8",
    "@types/node": "^20.2.3",
    "@types/react": "^17.0.37",
    "eslint": "8.18.0",
    "husky": "^8.0.3",
    "typescript": "^4.6.2"
  },
  "packageManager": "yarn@3.5.1"
}

Mirved64 commented 1 year ago

@TorinAsakura

Тебе IDE всё правильно говорит. Не там ищешь.

Никак не получается решить проблему с реакт модулем. Подскажите, пожалуйста, как исправить или где искать?

TorinAsakura commented 1 year ago

@TorinAsakura

Скоуп не может найти модули при записи @landing/имя модуля не может найти модуль 'react'

Описание выдаёт ошибку при импорте данных из модуля, при записи, например import { IndexPage } from '@landing/index-page' в IDE подчеркивает красным @landing/index-page в IDE подчеркивает красным react

Мои действия

Проект разбил на модули, каждая секция лендинга отдельный модуль.

Прописал в каждом модуле package.json, создал папку src с соответствующими файлами.

Запустил yarn install

При командах yarn check выдаёт ошибку:
landing/entrypoints/renderer/src/pages/index.tsx:3:26
➤ YN0000: │ 
➤ YN0000: │   Error: Cannot find module '@landing/index-page' or its corresponding type declarations.
package.json index-page:
{
  "name": "@landing/index-page",
  "version": "0.0.1",
  "license": "BSD-3-Clause",
  "main": "src/index.tsx",
  "dependencies": {
    "@landing/courses-fragment": "workspace:0.0.1",
    "@landing/faq-fragment": "workspace:0.0.1",
    "@landing/main-section-fragment": "workspace:0.0.1",
    "@landing/navigation-fragment": "workspace:0.0.1",
    "@landing/process-fragment": "workspace:0.0.1"
  },
  "devDependencies": {
    "react": "18.2.0"
  },
  "peerDependencies": {
    "react": "*",
    "react-dom": "*",
    "react-intl": "*"
  }
}
Так же не видит модуль react. Пытался пофиксить как в этой статье и этой статье. Не получилось.

Вопрос: Как сделать, чтобы можно было подключать модули через @landing/имя модуля и подключить react?

Либо пиши шаги воспроизведения либо разбирайся с локальным окружением. Установка зависимостей прошла. Все импорты рабочие.

Снимок экрана 2023-06-10 в 20 00 49

Mirved64 commented 1 year ago

@TorinAsakura

Скоуп как подключить Библиотеку компонентов

Описание не понимаю как подключить к проекту Библиотека компонентов

Мои действия

изучил репозиторий (https://github.com/atls/hyperion);
изучил (https://github.com/atls/hyperion/wiki);
скачал репозиторий Библиотека компонентов;
создал в проекте папку ui;
добавил в неё папки layout, text, link из директории ui-proto скачанного репозитория;
при команде yarn install выдаёт ошибку: YN0001: │ Error: @atls-ui-parts/layout@workspace:0.0.7: Workspace not found (@atls-ui-parts/layout@workspace:0.0.7);

Вопрос Как правильно подключить нужные элементы из Библиотеки компонентов?

Nelfimov commented 1 year ago

добавил в неё папки layout, text, link из директории ui-proto скачанного репозитория;

На этом шаге у тебя проблема - надо не копировать папки из репы, а устанавливать зависимости - yarn add @atls-ui-proto/layout например.

А так надо:

Инициализировать пакет @ui/layout в папке ui/layout.
В нем добавить зависимость как написал выше и экспортировать ее из src/index.ts

Mirved64 commented 1 year ago

добавил в неё папки layout, text, link из директории ui-proto скачанного репозитория;

На этом шаге у тебя проблема - надо не копировать папки из репы, а устанавливать зависимости - yarn add @atls-ui-proto/layout например.

А так надо:

Инициализировать пакет @ui/layout в папке ui/layout.

В нем добавить зависимость как написал выше и экспортировать ее из src/index.ts

Скопированные папки удалил. Создал и перешел в директорию ui/layout. Ввожу yarn init, потом yarn add @atls-ui-proto/layout, зависимость не устанавливается, выдаёт ошибку: YN0001: │ Error: @atls-ui-parts/text@workspace:0.0.10: Workspace not found (@atls-ui-parts/text@workspace:0.0.10)

TorinAsakura commented 1 year ago

@Mirved64 Как зависимости.

Mirved64 commented 1 year ago

@TorinAsakura

Скоуп настройка ui/theme

Описание

создал дирректорию ui/theme, инициализировал модуль @ui/theme;

подключил зависимости. package.json:

{
"name": "@ui/theme",
"version": "0.0.1",
"license": "BSD-3-Clause",
"main": "src/index.ts",
"dependencies": {
"@atls-ui-proto/theme": "^0.0.9",
"@emotion/css": "^11.11.0"
},
"devDependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@types/react": "^18.2.9",
"@types/react-dom": "^18.2.4",
"@types/styled-system": "^5.1.16",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}

в папке src/theme сделал файлы с конфигурациями для темы (fonts, font-sizes, font-weight и т.д.);
создал файл global.styles и указал там глобальные стили (обнулил марджини, задал шрифт хельветика);
создал файл theme.provider как описано здесь
IDE ругается на код в theme.provider

Вопрос: как настроить ui/theme, как исправить ошибки в файле theme.provider?

TorinAsakura commented 1 year ago

@Mirved64 К таким реквестам обычно нужно прикладвыать ссылку на коммит, или сообщить о том, что ветка актуальна и можно проверять прямо в ней. Ветка актуальна? ПР сделан?

TorinAsakura commented 1 year ago

@TorinAsakura

Скоуп настройка ui/theme

Описание

создал дирректорию ui/theme, инициализировал модуль @ui/theme;

подключил зависимости. package.json:
{
  "name": "@ui/theme",
  "version": "0.0.1",
  "license": "BSD-3-Clause",
  "main": "src/index.ts",
  "dependencies": {
    "@atls-ui-proto/theme": "^0.0.9",
    "@emotion/css": "^11.11.0"
  },
  "devDependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@types/react": "^18.2.9",
    "@types/react-dom": "^18.2.4",
    "@types/styled-system": "^5.1.16",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}
в папке src/theme сделал файлы с конфигурациями для темы (fonts, font-sizes, font-weight и т.д.);

создал файл global.styles и указал там глобальные стили (обнулил марджини, задал шрифт хельветика);

создал файл theme.provider как описано здесь

IDE ругается на код в theme.provider

Вопрос: как настроить ui/theme, как исправить ошибки в файле theme.provider?

ну, так может быть у тебя тип файла неправильный? У тебя там jsx структура, а файл у тебя тупо ts. Не?

Mirved64 commented 1 year ago

@TorinAsakura

Скоуп вставка в проект иконок

Описание не могу до конца понять, как добавлять иконки (соц. сети, лого) в проект

Мои действия

изучил папку ui/icons репозитория примера 1
изучил папку ui/icons репозитория примера 2
как экспортировать из фигмы svg иконку из фигмы знаю
где взять информацию в виде кода svg изображения, чтобы вписать её в компонент, не знаю.

Вопрос: Какой алгоритм действий с svg изображением, чтобы на его основе сделать компонент и потом экспортировать в проект?

Mirved64 commented 1 year ago

@TorinAsakura

Скоуп генераторы (в частности генератор иконок)

Описание не могу до конца понять, как пользоваться генераторм иконок

Мои действия

экспортировал с макета иконки в формате svg в директорию ui/icons/icons;

иницировал модуль, подключил зависимости, добавил скрипт. package.json:

{
"name": "@ui/icons",
"version": "0.0.1",
"license": "BSD-3-Clause",
"main": "src/index.ts",
"scripts": {
"generate-icons": "generate-icons src/ -i ./icons"
},
"devDependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@types/glob": "^8.1.0",
"@types/react": "^18.2.9",
"@types/react-dom": "^18.2.4",
"glob": "^10.2.7",
"glob-promise": "^6.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"dependencies": {
"@atls-ui-generators/icons": "^0.0.2"
}
}

при команде yarn generate-icons выдаёт ошибку: Error: glob-promise tried to access glob (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

Вопросы: Правильная команда на генерацию? Как избавиться от ошибки и сгенерить .tsx?

TorinAsakura commented 1 year ago

@Mirved64 Команда правильная. Избавиться от ошибки и сгенерить .tsx можно…ПРОЧИТАВ ОШИБКУ и исправив её…

Mirved64 commented 1 year ago

@Mirved64 Команда правильная. Избавиться от ошибки и сгенерить .tsx можно…ПРОЧИТАВ ОШИБКУ и исправив её…

Скоуп: glob-promise никак не хочет находить glob.

Действия:

Изучил репозиторий glob-promise, где сказано, что необходимо добавить glob в peerDepencies;
Добавлял glob в , peerDepencies, decencies, devDepencies, всё-равно пишет ошибку Error: glob-promise tried to access glob (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.
Загрузил актуальную ветку в ПР

Вопрос: В чем может быть проблема? Как правильно организовать зависимости в этом модуле?

oxiqod commented 1 year ago

@Mirved64

Скоуп: glob-promise никак не хочет находить glob.

Действия:

Изучил репозиторий glob-promise, где сказано, что необходимо добавить glob в peerDepencies; Добавлял glob в , peerDepencies, decencies, devDepencies, всё-равно пишет ошибку Error: glob-promise tried to access glob (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound. Загрузил актуальную ветку в ПР Вопрос: В чем может быть проблема? Как правильно организовать зависимости в этом модуле?

Пакета glob не хватает не в твоем package.json, а зависимостях генератора (моя догадка, что раньше glob был не нужен для нормального функционирования данного генератора, а сейчас необходим) загляни в файл .yarnrc.yml тех проектов, в которых используется генератор иконок, думаю там ты найдешь ответ на свой вопрос

TorinAsakura commented 1 year ago

@Mirved64 Нужно почитать что такое yarn packageExtension

TorinAsakura commented 1 year ago

@Mirved64 Пора начать учиться разделять ошибки в коде и ошибки пакетного менеджера

TorinAsakura commented 1 year ago

Если твой ПР готов - выведи его из драфта

Mirved64 commented 1 year ago

@TorinAsakura

Скоуп адаптивная верстка в проекте

Описание не могу понять где выставлять брейкпоинты на ширину экрана.

Мои действия

изучил репозитории примеров
из них я понял, что задавать значения свойств можно такими конструкциями: display={['none', 'none', 'flex']} - на двух разрешениях скрываем элемент, на третьем он становится флекс контейнером

Вопросы Я правильно понял как задавать значения свойств? Где в проекте задаются брейкпоинты для верстки? В нашем случае ширина экрана

TorinAsakura commented 1 year ago

@Mirved64 https://styled-system.com/theme-specification/

Mirved64 commented 1 year ago

@TorinAsakura

Скоуп svg иконки

Описание не отображаются svg иконки на мобильной версии

Мои действия

скопировал кусок кода с иконкой-заглушкой, которую использую для десктопной версии;
вставил в нужном месте кода (фрагмент один и тот же);
поставил нужные размеры;
все иконки-заглушки на мобильной версии не показываются;
лого и иконки соц. сетей отображаются как надо;
иконки-заглушки на десктопной версии отображаются как надо;

Вопрос Что нужно сделать чтобы отобразились иконки-заглушки в мобильной версии?

ПР сделал, ветка актуальна

TorinAsakura commented 1 year ago

@TorinAsakura

Скоуп svg иконки

Описание не отображаются svg иконки на мобильной версии

Мои действия

скопировал кусок кода с иконкой-заглушкой, которую использую для десктопной версии;

вставил в нужном месте кода (фрагмент один и тот же);

поставил нужные размеры;

все иконки-заглушки на мобильной версии не показываются;

лого и иконки соц. сетей отображаются как надо;

иконки-заглушки на десктопной версии отображаются как надо;

Вопрос Что нужно сделать чтобы отобразились иконки-заглушки в мобильной версии?

ПР сделал, ветка актуальна

а какого цвета иконки?

Mirved64 commented 1 year ago

@TorinAsakura Скоуп svg иконки Описание не отображаются svg иконки на мобильной версии Мои действия

скопировал кусок кода с иконкой-заглушкой, которую использую для десктопной версии;

вставил в нужном месте кода (фрагмент один и тот же);

поставил нужные размеры;

все иконки-заглушки на мобильной версии не показываются;

лого и иконки соц. сетей отображаются как надо;

иконки-заглушки на десктопной версии отображаются как надо;

Вопрос Что нужно сделать чтобы отобразились иконки-заглушки в мобильной версии? ПР сделал, ветка актуальна

а какого цвета иконки?

ставил fill='black' - не помогло;
если эту иконку отображать в десктопной версии (поставить display={['flex', 'flex']}), то она нормально отображается;
не могу понять почему иконки, у которых разница только в width и height, по разному ведут себя

TorinAsakura commented 1 year ago

@Mirved64 Чтож, полагаю тебе стоит ознакомиться с устройством svg https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/viewBox

Mirved64 commented 1 year ago

@Mirved64 Чтож, полагаю тебе стоит ознакомиться с устройством svg https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/viewBox

Читаю, меняю параметры и свойства svg. Пока результата нет.

Может дело не в svg? Заглушка отображается в десктопе, а в мобилке не хочет.

TorinAsakura commented 1 year ago

@Mirved64 Так может тогда проблема в том, какие аттрибуты ты задаёшь мобильной версии этого блока?

Mirved64 commented 1 year ago

@Mirved64 Так может тогда проблема в том, какие аттрибуты ты задаёшь мобильной версии этого блока?

В блоке не должно быть ошибок. Всё попробовал, менял-возвращал. Результата пока нет. Не знаю, что может быть. Буду думать. В остальном всё готово для ревью.

oxiqod commented 1 year ago

@Mirved64

Читаю, меняю параметры и свойства svg. Пока результата нет. Может дело не в svg? Заглушка отображается в десктопе, а в мобилке не хочет.

Сравни файлы уже сгенерированных иконок с этой заглушкой, у них есть одно отличие (сама сейчас кстати эту проблему решаю) Как поняла я изначально эта заглушка не предназначалась как SVG формат, и ее не нужно было создавать через генератор иконок, а вставлять как обычный PNG (потому что на следующих этапах она будет заменена).

я сконвертировала заново эту заглушку, и теперь у нее есть свойства path, выглядит так: <path fill='#000000' d='M -0.5,-0.5 C 32.8333,-0.5 66.1667,-0.5 99.5,-0.5C 99.5,32.8333 99.5,66.1667 99.5,99.5C 66.1667,99.5 32.8333,99.5 -0.5,99.5C -0.5,66.1667 -0.5,32.8333 -0.5,-0.5 Z' /> <path fill='#fefffe' d='M 99.5,-0.5 C 132.833,-0.5 166.167,-0.5 199.5,-0.5C 199.5,32.8333 199.5,66.1667 199.5,99.5C 166.167,99.5 132.833,99.5 99.5,99.5C 99.5,66.1667 99.5,32.8333 99.5,-0.5 Z' /> <path fill='#000000' d='M 199.5,-0.5 C 232.833,-0.5 266.167,-0.5 299.5,-0.5C 299.5,32.8333 299.5,66.1667 299.5,99.5C 266.167,99.5 232.833,99.5 199.5,99.5C 199.5,66.1667 199.5,32.8333 199.5,-0.5 Z' /> <path fill='#fefffe' d='M 299.5,-0.5 C 332.833,-0.5 366.167,-0.5 399.5,-0.5C 399.5,32.8333 399.5,66.1667 399.5,99.5C 366.167,99.5 332.833,99.5 299.5,99.5C 299.5,66.1667 299.5,32.8333 299.5,-0.5 Z' /> <path fill='#fefffe' d='M -0.5,99.5 C 32.8333,99.5 66.1667,99.5 99.5,99.5C 99.5,132.833 99.5,166.167 99.5,199.5C 66.1667,199.5 32.8333,199.5 -0.5,199.5C -0.5,166.167 -0.5,132.833 -0.5,99.5 Z' /> <path fill='#000000' d='M 99.5,99.5 C 132.833,99.5 166.167,99.5 199.5,99.5C 199.5,132.833 199.5,166.167 199.5,199.5C 166.167,199.5 132.833,199.5 99.5,199.5C 99.5,166.167 99.5,132.833 99.5,99.5 Z' /> <path fill='#fefffe' d='M 199.5,99.5 C 232.833,99.5 266.167,99.5 299.5,99.5C 299.5,132.833 299.5,166.167 299.5,199.5C 266.167,199.5 232.833,199.5 199.5,199.5C 199.5,166.167 199.5,132.833 199.5,99.5 Z' /> <path fill='#000000' d='M 299.5,99.5 C 332.833,99.5 366.167,99.5 399.5,99.5C 399.5,132.833 399.5,166.167 399.5,199.5C 366.167,199.5 332.833,199.5 299.5,199.5C 299.5,166.167 299.5,132.833 299.5,99.5 Z' /> <path fill='#000000' d='M -0.5,199.5 C 32.8333,199.5 66.1667,199.5 99.5,199.5C 99.5,232.833 99.5,266.167 99.5,299.5C 66.1667,299.5 32.8333,299.5 -0.5,299.5C -0.5,266.167 -0.5,232.833 -0.5,199.5 Z' /> <path fill='#fefffe' d='M 99.5,199.5 C 132.833,199.5 166.167,199.5 199.5,199.5C 199.5,232.833 199.5,266.167 199.5,299.5C 166.167,299.5 132.833,299.5 99.5,299.5C 99.5,266.167 99.5,232.833 99.5,199.5 Z' /> <path fill='#000000' d='M 199.5,199.5 C 232.833,199.5 266.167,199.5 299.5,199.5C 299.5,232.833 299.5,266.167 299.5,299.5C 266.167,299.5 232.833,299.5 199.5,299.5C 199.5,266.167 199.5,232.833 199.5,199.5 Z' /> <path fill='#fefffe' d='M 299.5,199.5 C 332.833,199.5 366.167,199.5 399.5,199.5C 399.5,232.833 399.5,266.167 399.5,299.5C 366.167,299.5 332.833,299.5 299.5,299.5C 299.5,266.167 299.5,232.833 299.5,199.5 Z' /> <path fill='#fefffe' d='M -0.5,299.5 C 32.8333,299.5 66.1667,299.5 99.5,299.5C 99.5,332.833 99.5,366.167 99.5,399.5C 66.1667,399.5 32.8333,399.5 -0.5,399.5C -0.5,366.167 -0.5,332.833 -0.5,299.5 Z' /> <path fill='#000000' d='M 99.5,299.5 C 132.833,299.5 166.167,299.5 199.5,299.5C 199.5,332.833 199.5,366.167 199.5,399.5C 166.167,399.5 132.833,399.5 99.5,399.5C 99.5,366.167 99.5,332.833 99.5,299.5 Z' /> <path fill='#fefffe' d='M 199.5,299.5 C 232.833,299.5 266.167,299.5 299.5,299.5C 299.5,332.833 299.5,366.167 299.5,399.5C 266.167,399.5 232.833,399.5 199.5,399.5C 199.5,366.167 199.5,332.833 199.5,299.5 Z' /> <path fill='#000000' d='M 299.5,299.5 C 332.833,299.5 366.167,299.5 399.5,299.5C 399.5,332.833 399.5,366.167 399.5,399.5C 366.167,399.5 332.833,399.5 299.5,399.5C 299.5,366.167 299.5,332.833 299.5,299.5 Z' />

Она стала отображаться и на десктопной и на мобильной версии, но проще наверное использовать эту заглушку в формате PNG ))

Mirved64 commented 1 year ago

@TorinAsakura

Я нашел баг с отображением заглушки на мобильной версии, но не знаю как его исправить.

Алгоритм повторения

запускаем yarn dev;
в браузере открываем инструменты разработчика;
находим иконку;
в тэге <svg>, открываем <rect> и в поле fill="url(#pattern0)" переименновываем, например fill="url(#pattern)";
в тэге <svg><def><pattern>меняем поле id="pattern0" на id="pattern"; Если обновить страницу, естественно, всё слетает.

Почему остальные такие же иконки работают нормально, а проблемы только в секции courses и process в мобильной версии

TorinAsakura commented 1 year ago

@Mirved64 Я что-то не понял, а баг-то в чём?

Mirved64 commented 1 year ago

@Mirved64 Я что-то не понял, а баг-то в чём?

не хочет отображать заглушку на мобильной версии сайта, если не делать как я выше писал

TorinAsakura commented 1 year ago

Погоди-те ка, так это не иконка, это растровое изображение, вы чо?

Mirved64 commented 1 year ago

Визуально выглядит неплохо, однако, у тебя есть серьёзный сдвиг: слева отступ больше чем справа Фундаментальные проблемы налицо

Но ведь в макете в секции Курсы и материалы и Вопросы и ответы на десктопной версии отступы слева и справа различаются.

Mirved64 commented 1 year ago

@TorinAsakura

Скоуп настройка react-intl

Описание При запуске в режиме разработки выдаёт ошибку:

Server Error
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

Мои действия:

подключил библиотеку к landing/entrypoints/renderer;
обернул App в IntlProvider, прописал основные пропсы;
во все теги Text вставил <FormattedMessage id='#' defaultMessage='ТО ЧТО БЫЛО В TEXT' />;

Проблему гуглил, читал доку к библиотеке, к next.js. Если каждый фрагмент обернуть в IntlProviderи прописать основные пропсы, то ошибка пропадает! Если в файле _app.ts прописать как в примере из официальной документации, то всё работает.

Вопросы: Если пишет Server Error то проблема не в библиотеке? Где может быть ошибка и как её исправить? Куда ещё можно заглянуть?

ПР сделал, ветка актуальная

TorinAsakura commented 1 year ago

@Mirved64 Нет. Проблема ТОЧНО не в библиотеке, а в том, как ты подключаешь интл в проект. Также, рекомендую использовать версии, сопоставимые с нашими

Mirved64 commented 1 year ago

Вёрстка выполнена достаточно неряшливо. Множественное несоблюдение отступов, размеров, будто фигму вообще не смотрел, а делал на глаз.

@TorinAsakura

В макете отступы в секциях как у меня. На разрешениях 1920px и 375px верстал с помощью плагина PerfectPixel.

На промежуточных разрешениях верстку поправлю.

TorinAsakura commented 1 year ago

@Mirved64 Зачем тебе плагин? Бери все размеры из фигмы

Mirved64 commented 1 year ago

@Mirved64 Зачем тебе плагин? Бери все размеры из фигмы

@TorinAsakura

Я и брал, а плагин для быстрого контроля верстки на разрешениях из макета. Т.е. задал отступы и размеры из макета, чекнул секцию, сразу видно если накосячил. Правда для других версий экрана не проверить.

Уточните, пожалуйста, верстку делать адаптивной или отзывчивой (адаптивная + резиновая верстка)?

TorinAsakura commented 1 year ago

@Mirved64 Для разрешений, не указанных в макете элемент не должен ломаться. Это простой ответ.

TorinAsakura commented 1 year ago

Не надо запрашивать ревью до резрешения всех замечаний. У тебя ещё осталась пачка с прошлого раза.

atls-academy / Mirved64.github.io

Feat/landing first step #9