Added article entity with block components for code, images, text and…

… whole detailed article combined; Article slice, types, selectors. Added shared Skeleton, Icon and Code ui components. Fixed Input styles and storybook & unit tests.
yaazzik · Jun 30, 2023 · a24a471 · a24a471 · vercel · Jun 30, 2023
1 parent 2d08c25
commit a24a471
Show file tree

Hide file tree

Showing 177 changed files with 1,077 additions and 130 deletions.
diff --git a/.loki/reference/chrome_iphone7_entities_ArticleDetails_Blue.png b/.loki/reference/chrome_iphone7_entities_ArticleDetails_Blue.png
diff --git a/.loki/reference/chrome_iphone7_entities_ArticleDetails_Dark.png b/.loki/reference/chrome_iphone7_entities_ArticleDetails_Dark.png
diff --git a/.loki/reference/chrome_iphone7_entities_ArticleDetails_Error.png b/.loki/reference/chrome_iphone7_entities_ArticleDetails_Error.png
diff --git a/.loki/reference/chrome_iphone7_entities_ArticleDetails_Light.png b/.loki/reference/chrome_iphone7_entities_ArticleDetails_Light.png
diff --git a/.loki/reference/chrome_iphone7_entities_ArticleDetails_Loading.png b/.loki/reference/chrome_iphone7_entities_ArticleDetails_Loading.png
diff --git a/.loki/reference/chrome_iphone7_entities_ProfileCard_Dark.png b/.loki/reference/chrome_iphone7_entities_ProfileCard_Dark.png
diff --git a/.loki/reference/chrome_iphone7_entities_ProfileCard_Light.png b/.loki/reference/chrome_iphone7_entities_ProfileCard_Light.png
diff --git a/.loki/reference/chrome_iphone7_entities_ProfileCard_With_Error.png b/.loki/reference/chrome_iphone7_entities_ProfileCard_With_Error.png
diff --git a/.loki/reference/chrome_iphone7_features_LanguageSwitcher_Dark.png b/.loki/reference/chrome_iphone7_features_LanguageSwitcher_Dark.png
diff --git a/.loki/reference/chrome_iphone7_features_LanguageSwitcher_Light.png b/.loki/reference/chrome_iphone7_features_LanguageSwitcher_Light.png
diff --git a/.loki/reference/chrome_iphone7_features_LoginModal_Dark.png b/.loki/reference/chrome_iphone7_features_LoginModal_Dark.png
diff --git a/.loki/reference/chrome_iphone7_features_LoginModal_Error.png b/.loki/reference/chrome_iphone7_features_LoginModal_Error.png
diff --git a/.loki/reference/chrome_iphone7_features_LoginModal_Light.png b/.loki/reference/chrome_iphone7_features_LoginModal_Light.png
diff --git a/.loki/reference/chrome_iphone7_features_LoginModal_Loading.png b/.loki/reference/chrome_iphone7_features_LoginModal_Loading.png
diff --git a/.loki/reference/chrome_iphone7_pages_AboutPage_Dark.png b/.loki/reference/chrome_iphone7_pages_AboutPage_Dark.png
diff --git a/.loki/reference/chrome_iphone7_pages_AboutPage_Light.png b/.loki/reference/chrome_iphone7_pages_AboutPage_Light.png
diff --git a/.loki/reference/chrome_iphone7_pages_MainPage_Dark.png b/.loki/reference/chrome_iphone7_pages_MainPage_Dark.png
diff --git a/.loki/reference/chrome_iphone7_pages_MainPage_Light.png b/.loki/reference/chrome_iphone7_pages_MainPage_Light.png
diff --git a/.loki/reference/chrome_iphone7_pages_PageNotFound_Dark.png b/.loki/reference/chrome_iphone7_pages_PageNotFound_Dark.png
diff --git a/.loki/reference/chrome_iphone7_pages_PageNotFound_Light.png b/.loki/reference/chrome_iphone7_pages_PageNotFound_Light.png
diff --git a/.loki/reference/chrome_iphone7_pages_ProfilePage_Dark.png b/.loki/reference/chrome_iphone7_pages_ProfilePage_Dark.png
diff --git a/.loki/reference/chrome_iphone7_pages_ProfilePage_Light.png b/.loki/reference/chrome_iphone7_pages_ProfilePage_Light.png
diff --git a/.loki/reference/chrome_iphone7_shared_AppLink_Primary_Dark.png b/.loki/reference/chrome_iphone7_shared_AppLink_Primary_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_AppLink_Primary_Light.png b/.loki/reference/chrome_iphone7_shared_AppLink_Primary_Light.png
diff --git a/.loki/reference/chrome_iphone7_shared_AppLink_Secondary_Dark.png b/.loki/reference/chrome_iphone7_shared_AppLink_Secondary_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_AppLink_Secondary_Light.png b/.loki/reference/chrome_iphone7_shared_AppLink_Secondary_Light.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Clear.png b/.loki/reference/chrome_iphone7_shared_Button_Clear.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Clear_Dark.png b/.loki/reference/chrome_iphone7_shared_Button_Clear_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Disabled.png b/.loki/reference/chrome_iphone7_shared_Button_Disabled.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Large_Size_Square_Primary.png b/.loki/reference/chrome_iphone7_shared_Button_Large_Size_Square_Primary.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Large_Size_Square_Primary_Dark.png b/.loki/reference/chrome_iphone7_shared_Button_Large_Size_Square_Primary_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Large_Size_Square_Secondary.png b/.loki/reference/chrome_iphone7_shared_Button_Large_Size_Square_Secondary.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Large_Size_Square_Secondary_Dark.png b/.loki/reference/chrome_iphone7_shared_Button_Large_Size_Square_Secondary_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Medium_Size_Square_Primary.png b/.loki/reference/chrome_iphone7_shared_Button_Medium_Size_Square_Primary.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Medium_Size_Square_Primary_Dark.png b/.loki/reference/chrome_iphone7_shared_Button_Medium_Size_Square_Primary_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Medium_Size_Square_Secondary.png b/.loki/reference/chrome_iphone7_shared_Button_Medium_Size_Square_Secondary.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Medium_Size_Square_Secondary_Dark.png b/.loki/reference/chrome_iphone7_shared_Button_Medium_Size_Square_Secondary_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Outlined.png b/.loki/reference/chrome_iphone7_shared_Button_Outlined.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Outlined_Dark.png b/.loki/reference/chrome_iphone7_shared_Button_Outlined_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Primary.png b/.loki/reference/chrome_iphone7_shared_Button_Primary.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Small_Size_Square_Primary.png b/.loki/reference/chrome_iphone7_shared_Button_Small_Size_Square_Primary.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Small_Size_Square_Primary_Dark.png b/.loki/reference/chrome_iphone7_shared_Button_Small_Size_Square_Primary_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Small_Size_Square_Secondary.png b/.loki/reference/chrome_iphone7_shared_Button_Small_Size_Square_Secondary.png
diff --git a/.loki/reference/chrome_iphone7_shared_Button_Small_Size_Square_Secondary_Dark.png b/.loki/reference/chrome_iphone7_shared_Button_Small_Size_Square_Secondary_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Input_Light.png b/.loki/reference/chrome_iphone7_shared_Input_Light.png
diff --git a/.loki/reference/chrome_iphone7_shared_Modal_Dark.png b/.loki/reference/chrome_iphone7_shared_Modal_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Modal_Primary.png b/.loki/reference/chrome_iphone7_shared_Modal_Primary.png
diff --git a/.loki/reference/chrome_iphone7_shared_Skeleton_Blue.png b/.loki/reference/chrome_iphone7_shared_Skeleton_Blue.png
diff --git a/.loki/reference/chrome_iphone7_shared_Skeleton_Circle.png b/.loki/reference/chrome_iphone7_shared_Skeleton_Circle.png
diff --git a/.loki/reference/chrome_iphone7_shared_Skeleton_Circle_Blue.png b/.loki/reference/chrome_iphone7_shared_Skeleton_Circle_Blue.png
diff --git a/.loki/reference/chrome_iphone7_shared_Skeleton_Circle_Dark.png b/.loki/reference/chrome_iphone7_shared_Skeleton_Circle_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Skeleton_Dark.png b/.loki/reference/chrome_iphone7_shared_Skeleton_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Skeleton_Light.png b/.loki/reference/chrome_iphone7_shared_Skeleton_Light.png
diff --git a/.loki/reference/chrome_iphone7_shared_Text_Dark.png b/.loki/reference/chrome_iphone7_shared_Text_Dark.png
diff --git a/.loki/reference/chrome_iphone7_shared_Text_Error.png b/.loki/reference/chrome_iphone7_shared_Text_Error.png
diff --git a/.loki/reference/chrome_iphone7_shared_Text_Light.png b/.loki/reference/chrome_iphone7_shared_Text_Light.png
diff --git a/.loki/reference/chrome_iphone7_shared_Text_Size_L.png b/.loki/reference/chrome_iphone7_shared_Text_Size_L.png
diff --git a/.loki/reference/chrome_iphone7_shared_Text_Size_M.png b/.loki/reference/chrome_iphone7_shared_Text_Size_M.png
diff --git a/.loki/reference/chrome_iphone7_shared_Text_Size_S.png b/.loki/reference/chrome_iphone7_shared_Text_Size_S.png
diff --git a/.loki/reference/chrome_iphone7_widget_PageError_Dark.png b/.loki/reference/chrome_iphone7_widget_PageError_Dark.png
diff --git a/.loki/reference/chrome_iphone7_widget_PageError_Light.png b/.loki/reference/chrome_iphone7_widget_PageError_Light.png
diff --git a/.loki/reference/chrome_iphone7_widget_Sidebar_Dark.png b/.loki/reference/chrome_iphone7_widget_Sidebar_Dark.png
diff --git a/.loki/reference/chrome_iphone7_widget_Sidebar_Light.png b/.loki/reference/chrome_iphone7_widget_Sidebar_Light.png
diff --git a/.loki/reference/chrome_iphone7_widget_Sidebar_Not_Auth.png b/.loki/reference/chrome_iphone7_widget_Sidebar_Not_Auth.png
diff --git a/.loki/reference/chrome_laptop_entities_ArticleDetails_Blue.png b/.loki/reference/chrome_laptop_entities_ArticleDetails_Blue.png
diff --git a/.loki/reference/chrome_laptop_entities_ArticleDetails_Dark.png b/.loki/reference/chrome_laptop_entities_ArticleDetails_Dark.png
diff --git a/.loki/reference/chrome_laptop_entities_ArticleDetails_Error.png b/.loki/reference/chrome_laptop_entities_ArticleDetails_Error.png
diff --git a/.loki/reference/chrome_laptop_entities_ArticleDetails_Light.png b/.loki/reference/chrome_laptop_entities_ArticleDetails_Light.png
diff --git a/.loki/reference/chrome_laptop_entities_ArticleDetails_Loading.png b/.loki/reference/chrome_laptop_entities_ArticleDetails_Loading.png
diff --git a/.loki/reference/chrome_laptop_entities_ProfileCard_Dark.png b/.loki/reference/chrome_laptop_entities_ProfileCard_Dark.png
diff --git a/.loki/reference/chrome_laptop_entities_ProfileCard_Light.png b/.loki/reference/chrome_laptop_entities_ProfileCard_Light.png
diff --git a/.loki/reference/chrome_laptop_entities_ProfileCard_With_Error.png b/.loki/reference/chrome_laptop_entities_ProfileCard_With_Error.png
diff --git a/.loki/reference/chrome_laptop_features_LanguageSwitcher_Dark.png b/.loki/reference/chrome_laptop_features_LanguageSwitcher_Dark.png
diff --git a/.loki/reference/chrome_laptop_features_LanguageSwitcher_Light.png b/.loki/reference/chrome_laptop_features_LanguageSwitcher_Light.png
diff --git a/.loki/reference/chrome_laptop_features_LoginModal_Dark.png b/.loki/reference/chrome_laptop_features_LoginModal_Dark.png
diff --git a/.loki/reference/chrome_laptop_features_LoginModal_Error.png b/.loki/reference/chrome_laptop_features_LoginModal_Error.png
diff --git a/.loki/reference/chrome_laptop_features_LoginModal_Light.png b/.loki/reference/chrome_laptop_features_LoginModal_Light.png
diff --git a/.loki/reference/chrome_laptop_features_LoginModal_Loading.png b/.loki/reference/chrome_laptop_features_LoginModal_Loading.png
diff --git a/.loki/reference/chrome_laptop_pages_AboutPage_Dark.png b/.loki/reference/chrome_laptop_pages_AboutPage_Dark.png
diff --git a/.loki/reference/chrome_laptop_pages_AboutPage_Light.png b/.loki/reference/chrome_laptop_pages_AboutPage_Light.png
diff --git a/.loki/reference/chrome_laptop_pages_MainPage_Dark.png b/.loki/reference/chrome_laptop_pages_MainPage_Dark.png
diff --git a/.loki/reference/chrome_laptop_pages_MainPage_Light.png b/.loki/reference/chrome_laptop_pages_MainPage_Light.png
diff --git a/.loki/reference/chrome_laptop_pages_PageNotFound_Dark.png b/.loki/reference/chrome_laptop_pages_PageNotFound_Dark.png
diff --git a/.loki/reference/chrome_laptop_pages_PageNotFound_Light.png b/.loki/reference/chrome_laptop_pages_PageNotFound_Light.png
diff --git a/.loki/reference/chrome_laptop_pages_ProfilePage_Dark.png b/.loki/reference/chrome_laptop_pages_ProfilePage_Dark.png
diff --git a/.loki/reference/chrome_laptop_pages_ProfilePage_Light.png b/.loki/reference/chrome_laptop_pages_ProfilePage_Light.png
diff --git a/.loki/reference/chrome_laptop_shared_AppLink_Primary_Dark.png b/.loki/reference/chrome_laptop_shared_AppLink_Primary_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_AppLink_Primary_Light.png b/.loki/reference/chrome_laptop_shared_AppLink_Primary_Light.png
diff --git a/.loki/reference/chrome_laptop_shared_AppLink_Secondary_Dark.png b/.loki/reference/chrome_laptop_shared_AppLink_Secondary_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_AppLink_Secondary_Light.png b/.loki/reference/chrome_laptop_shared_AppLink_Secondary_Light.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Clear.png b/.loki/reference/chrome_laptop_shared_Button_Clear.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Clear_Dark.png b/.loki/reference/chrome_laptop_shared_Button_Clear_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Disabled.png b/.loki/reference/chrome_laptop_shared_Button_Disabled.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Large_Size_Square_Primary.png b/.loki/reference/chrome_laptop_shared_Button_Large_Size_Square_Primary.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Large_Size_Square_Primary_Dark.png b/.loki/reference/chrome_laptop_shared_Button_Large_Size_Square_Primary_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Large_Size_Square_Secondary.png b/.loki/reference/chrome_laptop_shared_Button_Large_Size_Square_Secondary.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Large_Size_Square_Secondary_Dark.png b/.loki/reference/chrome_laptop_shared_Button_Large_Size_Square_Secondary_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Medium_Size_Square_Primary.png b/.loki/reference/chrome_laptop_shared_Button_Medium_Size_Square_Primary.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Medium_Size_Square_Primary_Dark.png b/.loki/reference/chrome_laptop_shared_Button_Medium_Size_Square_Primary_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Medium_Size_Square_Secondary.png b/.loki/reference/chrome_laptop_shared_Button_Medium_Size_Square_Secondary.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Medium_Size_Square_Secondary_Dark.png b/.loki/reference/chrome_laptop_shared_Button_Medium_Size_Square_Secondary_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Outlined.png b/.loki/reference/chrome_laptop_shared_Button_Outlined.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Outlined_Dark.png b/.loki/reference/chrome_laptop_shared_Button_Outlined_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Primary.png b/.loki/reference/chrome_laptop_shared_Button_Primary.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Small_Size_Square_Primary.png b/.loki/reference/chrome_laptop_shared_Button_Small_Size_Square_Primary.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Small_Size_Square_Primary_Dark.png b/.loki/reference/chrome_laptop_shared_Button_Small_Size_Square_Primary_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Small_Size_Square_Secondary.png b/.loki/reference/chrome_laptop_shared_Button_Small_Size_Square_Secondary.png
diff --git a/.loki/reference/chrome_laptop_shared_Button_Small_Size_Square_Secondary_Dark.png b/.loki/reference/chrome_laptop_shared_Button_Small_Size_Square_Secondary_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Input_Light.png b/.loki/reference/chrome_laptop_shared_Input_Light.png
diff --git a/.loki/reference/chrome_laptop_shared_Modal_Dark.png b/.loki/reference/chrome_laptop_shared_Modal_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Modal_Primary.png b/.loki/reference/chrome_laptop_shared_Modal_Primary.png
diff --git a/.loki/reference/chrome_laptop_shared_Skeleton_Blue.png b/.loki/reference/chrome_laptop_shared_Skeleton_Blue.png
diff --git a/.loki/reference/chrome_laptop_shared_Skeleton_Circle.png b/.loki/reference/chrome_laptop_shared_Skeleton_Circle.png
diff --git a/.loki/reference/chrome_laptop_shared_Skeleton_Circle_Blue.png b/.loki/reference/chrome_laptop_shared_Skeleton_Circle_Blue.png
diff --git a/.loki/reference/chrome_laptop_shared_Skeleton_Circle_Dark.png b/.loki/reference/chrome_laptop_shared_Skeleton_Circle_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Skeleton_Dark.png b/.loki/reference/chrome_laptop_shared_Skeleton_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Skeleton_Light.png b/.loki/reference/chrome_laptop_shared_Skeleton_Light.png
diff --git a/.loki/reference/chrome_laptop_shared_Text_Dark.png b/.loki/reference/chrome_laptop_shared_Text_Dark.png
diff --git a/.loki/reference/chrome_laptop_shared_Text_Error.png b/.loki/reference/chrome_laptop_shared_Text_Error.png
diff --git a/.loki/reference/chrome_laptop_shared_Text_Light.png b/.loki/reference/chrome_laptop_shared_Text_Light.png
diff --git a/.loki/reference/chrome_laptop_shared_Text_Size_L.png b/.loki/reference/chrome_laptop_shared_Text_Size_L.png
diff --git a/.loki/reference/chrome_laptop_shared_Text_Size_M.png b/.loki/reference/chrome_laptop_shared_Text_Size_M.png
diff --git a/.loki/reference/chrome_laptop_shared_Text_Size_S.png b/.loki/reference/chrome_laptop_shared_Text_Size_S.png
diff --git a/.loki/reference/chrome_laptop_widget_PageError_Dark.png b/.loki/reference/chrome_laptop_widget_PageError_Dark.png
diff --git a/.loki/reference/chrome_laptop_widget_PageError_Light.png b/.loki/reference/chrome_laptop_widget_PageError_Light.png
diff --git a/.loki/reference/chrome_laptop_widget_Sidebar_Dark.png b/.loki/reference/chrome_laptop_widget_Sidebar_Dark.png
diff --git a/.loki/reference/chrome_laptop_widget_Sidebar_Light.png b/.loki/reference/chrome_laptop_widget_Sidebar_Light.png
diff --git a/.loki/reference/chrome_laptop_widget_Sidebar_Not_Auth.png b/.loki/reference/chrome_laptop_widget_Sidebar_Not_Auth.png
diff --git a/extractedTranslations/en/articleDetailsPage.json b/extractedTranslations/en/articleDetailsPage.json
@@ -0,0 +1,4 @@
+{
+  "Скопировано!": "",
+  "Статья не найдена": ""
+}
diff --git a/extractedTranslations/en/translation.json b/extractedTranslations/en/translation.json
@@ -10,7 +10,9 @@
   "Неверное имя пользователя или пароль": "",
   "О сайте": "About",
   "Обновить страницу": "Refresh page",
+  "Ошибка": "",
   "Пароль": "Password",
+  "Скопировано!": "",
   "Страна": "",
   "Страница не найдена": "Page not found",
   "Страница профиля": "",

diff --git a/json-server/db.json b/json-server/db.json
@@ -16,11 +16,95 @@
       "id": 3
     }
   ],
+  "articles": [
+    {
+      "id": "1",
+      "title": "Javascript news",
+      "subtitle": "Что нового в JS за 2022 год?",
+      "img": "https://teknotower.com/wp-content/uploads/2020/11/js.png",
+      "views": 1022,
+      "createdAt": "26.02.2022",
+      "type": ["IT"],
+      "blocks": [
+        {
+          "id": "1",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.",
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "4",
+          "type": "CODE",
+          "code": "<!DOCTYPE html>\n<html>\n  <body>\n    <p id=\"hello\"></p>\n\n    <script>\n      document.getElementById(\"hello\").innerHTML = \"Hello, world!\";\n    </script>\n  </body>\n</html>;"
+        },
+        {
+          "id": "5",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "Программа, которую по традиции называют «Hello, world!», очень проста. Она выводит куда-либо фразу «Hello, world!», или другую подобную, средствами некоего языка.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "2",
+          "type": "IMAGE",
+          "src": "https://hsto.org/r/w1560/getpro/habr/post_images/d56/a02/ffc/d56a02ffc62949b42904ca00c63d8cc1.png",
+          "title": "Рисунок 1 - скриншот сайта"
+        },
+        {
+          "id": "3",
+          "type": "CODE",
+          "code": "const path = require('path');\n\nconst server = jsonServer.create();\n\nconst router = jsonServer.router(path.resolve(__dirname, 'db.json'));\n\nserver.use(jsonServer.defaults({}));\nserver.use(jsonServer.bodyParser);"
+        },
+        {
+          "id": "7",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы.",
+            "Существуют и другие способы запуска JS-кода в браузере. Так, если говорить об обычном использовании программ на JavaScript, они загружаются в браузер для обеспечения работы веб-страниц. Как правило, код оформляют в виде отдельных файлов с расширением .js, которые подключают к веб-страницам, но программный код можно включать и непосредственно в код страницы. Всё это делается с помощью тега <script>. Когда браузер обнаруживает такой код, он выполняет его. Подробности о теге script можно посмотреть на сайте w3school.com. В частности, рассмотрим пример, демонстрирующий работу с веб-страницей средствами JavaScript, приведённый на этом ресурсе. Этот пример можно запустить и средствами данного ресурса (ищите кнопку Try it Yourself), но мы поступим немного иначе. А именно, создадим в каком-нибудь текстовом редакторе (например — в VS Code или в Notepad++) новый файл, который назовём hello.html, и добавим в него следующий код:"
+          ]
+        },
+        {
+          "id": "8",
+          "type": "IMAGE",
+          "src": "https://hsto.org/r/w1560/getpro/habr/post_images/d56/a02/ffc/d56a02ffc62949b42904ca00c63d8cc1.png",
+          "title": "Рисунок 1 - скриншот сайта"
+        },
+        {
+          "id": "9",
+          "type": "TEXT",
+          "title": "Заголовок этого блока",
+          "paragraphs": [
+            "JavaScript — это язык, программы на котором можно выполнять в разных средах. В нашем случае речь идёт о браузерах и о серверной платформе Node.js. Если до сих пор вы не написали ни строчки кода на JS и читаете этот текст в браузере, на настольном компьютере, это значит, что вы буквально в считанных секундах от своей первой JavaScript-программы."
+          ]
+        }
+      ]
+    }
+  ],
   "comments": [
     {
-      "id": 1,
-      "body": "some comment",
-      "postId": 1
+      "id": "1",
+      "text": "some comment",
+      "articleId": "1",
+      "userId": "1"
+    },
+    {
+      "id": "2",
+      "text": "some comment 2",
+      "articleId": "1",
+      "userId": "1"
+    },
+    {
+      "id": "3",
+      "text": "some comment 3",
+      "articleId": "1",
+      "userId": "1"
     }
   ],
   "users": [
@@ -40,4 +124,4 @@
     "username": "Karotish",
     "avatar": "https://www.computerhope.com/jargon/g/guest-user.png"
   }
-}
+}
diff --git a/public/locales/en/articleDetailsPage.json b/public/locales/en/articleDetailsPage.json
@@ -0,0 +1,4 @@
+{
+  "Статья не найдена": "Article not found",
+  "Скопировано!": "Copied!"
+}
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -14,5 +14,7 @@
   "Страна": "Country",
   "Валюта": "Currency",
   "Авторизация": "Authorization",
-  "Выйти": "Logout"
+  "Выйти": "Logout",
+  "Ошибка": "Error",
+  "Статьи": "Articles"
 }
diff --git a/public/locales/ru/articleDetailsPage.json b/public/locales/ru/articleDetailsPage.json
@@ -0,0 +1,4 @@
+{
+  "Статья не найдена": "Статья не найдена",
+  "Скопировано!": "Скопировано!"
+}
diff --git a/public/locales/ru/translation.json b/public/locales/ru/translation.json
@@ -14,6 +14,9 @@
   "Страна": "Страна",
   "Валюта": "Валюта",
   "Авторизация": "Авторизация",
-  "Выйти": "Выйти"
+  "Выйти": "Выйти",
+  "Ошибка": "Ошибка",
+  "Статьи": "Статьи"
+
 }
 
diff --git a/src/app/providers/StoreProvider/config/StateSchema.ts b/src/app/providers/StoreProvider/config/StateSchema.ts
@@ -8,12 +8,14 @@ import { ProfileSchema } from 'entities/Profile';
 import { AxiosInstance } from 'axios';
 import { NavigateOptions } from 'react-router';
 import { To } from 'history';
+import { ArticleDetailsSchema } from 'entities/Article';
 
 export interface StateSchema {
     counter: CounterSchema;
     user: UserSchema;
     loginForm?: LoginSchema;
     profile?: ProfileSchema;
+    articleDetails?: ArticleDetailsSchema;
 }
 
 export type StateSchemaKeys = keyof StateSchema;

diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
@@ -21,4 +21,7 @@ body {
 .page-wrapper {
     flex-grow: 1;
     padding: 2rem;
+    height: calc(100vh - var(--navbar-height));
+    overflow-y: auto;
+    width: 100%;
 }
diff --git a/src/app/styles/themes/blue.scss b/src/app/styles/themes/blue.scss
@@ -3,4 +3,10 @@
     --bg-color-inverted: #2aa6ac;
     --primary-color: #f4f6fb;
     --secondary-color: #444;
+
+    // skeleton
+    --skeleton-color: #5faff2;
+
+    // text
+    --text-color: #fff;
 }
diff --git a/src/app/styles/themes/dark.scss b/src/app/styles/themes/dark.scss
@@ -3,4 +3,10 @@
     --bg-color-inverted: #fbc7db;
     --primary-color: #3fd055;
     --secondary-color: #6c00d5;
+
+    // skeleton
+    --skeleton-color: #2d2d2d;
+
+    // text
+    --text-color: #fff;
 }
diff --git a/src/app/styles/themes/light.scss b/src/app/styles/themes/light.scss
@@ -3,4 +3,11 @@
     --bg-color-inverted: #000;
     --primary-color: #149c04;
     --secondary-color: #d2d2d8;
+
+    // skeleton
+    --skeleton-color: #fff;
+    --skeleton-shadow: rgba(0 0 0 / 20%);
+
+    // text
+    --text-color: #000;
 }
diff --git a/src/app/styles/variables/global.scss b/src/app/styles/variables/global.scss
@@ -1,23 +1,30 @@
 @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
 
 :root {
-    --font-family-main: "Press Start 2P", cursive;
+    --font-family-main: "Press Start 2P", cursive !important;
+    --font-code: var(--font-size-m) / var(--font-line-m) "VT323", monospace;
 
     // Small size
-    --font-size-s: 12px;
+    --font-size-s: 14px;
     --font-line-s: 20px;
     --font-s: var(--font-size-s) / var(--font-line-s) var(--font-family-main);
 
     // Medium size
     --font-size-m: 18px;
-    --font-line-m: 26px;
+    --font-line-m: 24px;
     --font-m: var(--font-size-m) / var(--font-line-m) var(--font-family-main);
 
     // Large size
-    --font-size-l: 44px;
-    --font-line-l: 52px;
+    --font-size-l: 26px;
+    --font-line-l: 36px;
     --font-l: var(--font-size-l) / var(--font-line-l) var(--font-family-main);
 
+    // Extra large size
+    --font-size-xl: 34px;
+    --font-line-xl: 46px;
+    --font-xl: var(--font-size-xl) / var(--font-line-xl) var(--font-family-main);
+
     // Для вычисления размеров элементов
     --navbar-height: 50px;
     --sidebar-width: 240px;
@@ -29,4 +36,8 @@
     // Цвета
     --overlay-color: rgba(0 0 0 / 60%);
     --error-color: #f00;
+
+    // Код
+    --code-bg: #fff;
+    --code-border: 2px solid #000;
 }
diff --git a/src/entities/Article/index.ts b/src/entities/Article/index.ts
@@ -0,0 +1,6 @@
+export { ArticleDetails } from './ui/ArticleDetails/ArticleDetails';
+export type { Article } from './model/types/article';
+export { ArticleDetailsSchema } from './model/types/articleDetailsSchema';
+export { ArticleImageBlockComponent } from './ui/ArticleImageBlockComponent/ArticleImageBlockComponent';
+export { ArticleTextBlockComponent } from './ui/ArticleTextBlockComponent/ArticleTextBlockComponent';
+export { ArticleCodeBlockComponent } from './ui/ArticleCodeBlockComponent/ArticleCodeBlockComponent';
diff --git a/src/entities/Article/model/selectors/articleDetailsSelectors.test.ts b/src/entities/Article/model/selectors/articleDetailsSelectors.test.ts
@@ -0,0 +1,60 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+import { getArticleDetailsData, getArticleDetailsError, getArticleDetailsIsLoading } from './articleDetailsSelectors';
+
+describe('getArticleDetailsData.test', () => {
+    test('should return article data', () => {
+        const state: DeepPartial<StateSchema> = {
+            articleDetails: {
+                data: {
+                    title: 'Title',
+                    blocks: [],
+                    views: 20,
+                    id: '1',
+                },
+            },
+        };
+        expect(getArticleDetailsData(state as StateSchema)).toEqual({
+            title: 'Title',
+            blocks: [],
+            views: 20,
+            id: '1',
+        });
+    });
+
+    test('should return undefined from empty state', () => {
+        const state: DeepPartial<StateSchema> = {};
+        expect(getArticleDetailsData(state as StateSchema)).toEqual(undefined);
+    });
+});
+
+describe('getArticleDetailsError.test', () => {
+    test('should return article error', () => {
+        const state: DeepPartial<StateSchema> = {
+            articleDetails: {
+                error: 'error',
+            },
+        };
+        expect(getArticleDetailsError(state as StateSchema)).toEqual('error');
+    });
+
+    test('should return undefined from empty error', () => {
+        const state: DeepPartial<StateSchema> = {};
+        expect(getArticleDetailsError(state as StateSchema)).toEqual(undefined);
+    });
+});
+
+describe('getArticleDetailsIsLoading.test', () => {
+    test('should return article data', () => {
+        const state: DeepPartial<StateSchema> = {
+            articleDetails: {
+                isLoading: true,
+            },
+        };
+        expect(getArticleDetailsIsLoading(state as StateSchema)).toEqual(true);
+    });
+
+    test('should return undefined from empty state', () => {
+        const state: DeepPartial<StateSchema> = {};
+        expect(getArticleDetailsIsLoading(state as StateSchema)).toEqual(undefined);
+    });
+});
diff --git a/src/entities/Article/model/selectors/articleDetailsSelectors.ts b/src/entities/Article/model/selectors/articleDetailsSelectors.ts
@@ -0,0 +1,5 @@
+import { StateSchema } from 'app/providers/StoreProvider';
+
+export const getArticleDetailsData = (state: StateSchema) => state.articleDetails?.data;
+export const getArticleDetailsIsLoading = (state: StateSchema) => state.articleDetails?.isLoading;
+export const getArticleDetailsError = (state: StateSchema) => state.articleDetails?.error;
diff --git a/src/entities/Article/model/services/fetchArticleById/fetchArticleById.ts b/src/entities/Article/model/services/fetchArticleById/fetchArticleById.ts
@@ -0,0 +1,27 @@
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { ThunkConfig } from 'app/providers/StoreProvider';
+import { Article } from '../../types/article';
+
+export const fetchArticleById = createAsyncThunk<
+    Article,
+    string,
+    ThunkConfig<string>
+>(
+    'articleDetails/fetchArticleById',
+    async (articleId, thunkApi) => {
+        const { extra, rejectWithValue } = thunkApi;
+
+        try {
+            const response = await extra.api.get<Article>(`/articles/${articleId}`);
+
+            if (!response.data) {
+                throw new Error();
+            }
+
+            return response.data;
+        } catch (e) {
+            console.log(e);
+            return rejectWithValue('error');
+        }
+    },
+);
diff --git a/src/entities/Article/model/slice/articleSlice.ts b/src/entities/Article/model/slice/articleSlice.ts
@@ -0,0 +1,38 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { fetchArticleById } from 'entities/Article/model/services/fetchArticleById/fetchArticleById';
+import { Article } from '../types/article';
+import { ArticleDetailsSchema } from '../types/articleDetailsSchema';
+
+const initialState: ArticleDetailsSchema = {
+    isLoading: false,
+    error: undefined,
+    data: undefined,
+};
+
+export const articleDetailsSlice = createSlice({
+    name: 'articleDetails',
+    initialState,
+    reducers: {},
+    extraReducers: (builder) => {
+        builder
+            .addCase(fetchArticleById.pending, (state) => {
+                state.error = undefined;
+                state.isLoading = true;
+            })
+            .addCase(fetchArticleById.fulfilled, (
+                state,
+                action: PayloadAction<Article>,
+            ) => {
+                state.isLoading = false;
+                state.data = action.payload;
+            })
+            .addCase(fetchArticleById.rejected, (state, action) => {
+                state.isLoading = false;
+                state.error = action.payload;
+            });
+    },
+});
+
+// Action creators are generated for each case reducer function
+export const { actions: articleDetailsActions } = articleDetailsSlice;
+export const { reducer: articleDetailsReducer } = articleDetailsSlice;