WIP: Blog

next.config.js

@@ -8,13 +8,15 @@
 const withTM = require('next-transpile-modules')([
     '@gravity-ui/uikit',
     '@gravity-ui/page-constructor',
+    '@gravity-ui/blog-constructor',
     '@gravity-ui/components',
     '@gravity-ui/date-components',
     '@gravity-ui/navigation',
     '@gravity-ui/chartkit',
     '@gravity-ui/charts',
     '@gravity-ui/yagr',
     '@gravity-ui/markdown-editor',
+    'swiper',
 ]);
 
 const {i18n} = require('./next-i18next.config');
@@ -81,7 +83,7 @@
                 });
 
                 if (!options.isServer) {
                     config.resolve.fallback.fs = false;
                 }
 
                 if (process.env.ANALYZE_BUNDLE) {

package.json

@@ -6,6 +6,7 @@
   "sideEffects": false,
   "dependencies": {
     "@diplodoc/transform": "^4.18.0",
+    "@gravity-ui/blog-constructor": "^9.0.0-alpha.1",
     "@gravity-ui/chartkit": "^6.1.1",
     "@gravity-ui/charts": "^0.8.0",
     "@gravity-ui/components": "^4.16.0",
@@ -15,7 +16,7 @@
     "@gravity-ui/icons": "^2.16.0",
     "@gravity-ui/markdown-editor": "^15.1.0",
     "@gravity-ui/navigation": "^3.10.1",
-    "@gravity-ui/page-constructor": "^6.0.0-beta.6",
+    "@gravity-ui/page-constructor": "^8.0.0-alpha.1",
     "@gravity-ui/uikit": "^7.26.2",
     "@gravity-ui/uikit-themer": "^1.4.1",
     "@mdx-js/mdx": "^2.3.0",

public/locales/en/blog.json

@@ -0,0 +1,33 @@
+{
+    "meta_title": "Blog",
+    "meta_description": "Articles, news and updates from Gravity UI team",
+    "page_title": "Blog",
+    "page_description": "Latest articles and updates",
+    "post_readingTime": "{{minutes}} min read",
+    "post_publishedAt": "Published on",
+    "post_updatedAt": "Updated on",
+    "post_backToBlog": "Back to Blog",
+    "post_share": "Share",
+    "post_tags": "Tags",
+    "post_relatedPosts": "Related posts",
+    "post_notFound": "Post not found",
+    "post_notFoundDescription": "The article you are looking for doesn't exist or has been removed.",
+    "filter_search": "Search",
+    "filter_searchPlaceholder": "Search articles...",
+    "filter_tags": "Tags",
+    "filter_services": "Services",
+    "filter_allTags": "All tags",
+    "filter_allServices": "All services",
+    "filter_clearFilters": "Clear filters",
+    "filter_noResults": "No articles found",
+    "filter_noResultsDescription": "Try changing your search query or filters",
+    "pagination_previous": "Previous",
+    "pagination_next": "Next",
+    "pagination_page": "Page {{page}} of {{total}}",
+    "error_loadFailed": "Failed to load content",
+    "error_tryAgain": "Try again",
+    "author_by": "By",
+    "author_authors": "Authors",
+    "pinnedPost": "Pinned"
+}
+

public/locales/en/common.json

@@ -12,6 +12,7 @@
     "menu_icons": "Icons",
     "menu_themer": "Themer",
     "menu_media": "Media",
+    "menu_blog": "Blog",
     "roadmap_inProgress": "In progress",
     "navigation_previous": "Previous",
     "navigation_next": "Next",

public/locales/ru/blog.json

@@ -0,0 +1,33 @@
+{
+    "meta_title": "Блог",
+    "meta_description": "Статьи, новости и обновления от команды Gravity UI",
+    "page_title": "Блог",
+    "page_description": "Последние статьи и обновления",
+    "post_readingTime": "{{minutes}} мин",
+    "post_publishedAt": "Опубликовано",
+    "post_updatedAt": "Обновлено",
+    "post_backToBlog": "Вернуться в блог",
+    "post_share": "Поделиться",
+    "post_tags": "Теги",
+    "post_relatedPosts": "Похожие статьи",
+    "post_notFound": "Статья не найдена",
+    "post_notFoundDescription": "Статья, которую вы ищете, не существует или была удалена.",
+    "filter_search": "Поиск",
+    "filter_searchPlaceholder": "Поиск статей...",
+    "filter_tags": "Теги",
+    "filter_services": "Сервисы",
+    "filter_allTags": "Все теги",
+    "filter_allServices": "Все сервисы",
+    "filter_clearFilters": "Очистить фильтры",
+    "filter_noResults": "Статьи не найдены",
+    "filter_noResultsDescription": "Попробуйте изменить запрос или фильтры",
+    "pagination_previous": "Назад",
+    "pagination_next": "Далее",
+    "pagination_page": "Страница {{page}} из {{total}}",
+    "error_loadFailed": "Не удалось загрузить контент",
+    "error_tryAgain": "Попробовать снова",
+    "author_by": "Автор",
+    "author_authors": "Авторы",
+    "pinnedPost": "Закреплено"
+}
+

public/locales/ru/common.json

@@ -15,6 +15,7 @@
     "menu_icons": "Иконки",
     "menu_themer": "Темизатор",
     "menu_media": "Медиа",
+    "menu_blog": "Блог",
     "roadmap_inProgress": "В работе",
     "navigation_previous": "Назад",
     "navigation_next": "Далее",

src/api/.mocks/blogPage.json

@@ -0,0 +1,47 @@
+{
+  "id": 969,
+  "name": "blog",
+  "createdAt": "2022-08-24T15:40:07.513Z",
+  "updatedAt": "2022-08-24T15:40:07.513Z",
+  "type": "default",
+  "isDeleted": false,
+  "pageId": 969,
+  "locale": "ru",
+  "publishedVersionId": 17498,
+  "lastVersionId": 17498,
+  "content": {
+    "blocks": [
+      {
+        "type": "blog-feed-block",
+        "resetPaddings": true,
+        "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png",
+        "title": "Blog"
+      }
+    ]
+  },
+  "title": "Blog",
+  "noIndex": false,
+  "shareTitle": null,
+  "shareDescription": null,
+  "shareImage": null,
+  "pageLocaleId": 1261,
+  "author": "author",
+  "metaDescription": null,
+  "keywords": [],
+  "shareGenImage": null,
+  "shareGenTitle": null,
+  "tempShareGenTitle": null,
+  "solution": null,
+  "service": null,
+  "regions": [],
+  "locales": [
+    {
+      "locale": "en",
+      "publishedVersionId": null
+    },
+    {
+      "locale": "ru",
+      "publishedVersionId": 17498
+    }
+  ]
+}

src/api/.mocks/contentBlocks.json

@@ -0,0 +1,104 @@
+[
+  {
+    "type": "blog-media-block",
+    "column": "left",
+    "resetPaddings": true,
+    "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
+    "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png",
+    "fullWidth": false
+  },
+  {
+    "type": "blog-yfm-block",
+    "column": "right",
+    "resetPaddings": true,
+    "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
+    "buttons": [
+      {
+        "text": "Get",
+        "url": "http://example.com/",
+        "theme": "action"
+      }
+    ]
+  },
+  {
+    "type": "blog-yfm-block",
+    "column": "left",
+    "resetPaddings": true,
+    "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
+    "buttons": [
+      {
+        "text": "Get",
+        "url": "http://example.com/",
+        "theme": "outlined-info",
+        "size": "xl"
+      }
+    ],
+    "additionalInfo": "Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+  },
+  {
+    "type": "blog-yfm-block",
+    "column": "left",
+    "resetPaddings": true,
+    "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
+    "links": [
+      {
+        "text": "sed do",
+        "url": "http://example.com/",
+        "arrow": true,
+        "theme": "normal"
+      }
+    ]
+  },
+  {
+    "type": "blog-yfm-block",
+    "column": "left",
+    "resetPaddings": true,
+    "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
+  },
+  {
+    "type": "blog-media-block",
+    "column": "left",
+    "resetPaddings": true,
+    "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>",
+    "youtube": "https://youtu.be/bxZRUtMAlFI",
+    "fullWidth": false
+  },
+  {
+    "type": "blog-yfm-block",
+    "column": "left",
+    "resetPaddings": true,
+    "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
+  },
+  {
+    "type": "blog-colored-text-block",
+    "column": "left",
+    "resetPaddings": true,
+    "background": {
+      "color": "#EFF2F8"
+    },
+    "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
+  },
+  {
+    "type": "blog-yfm-block",
+    "column": "left",
+    "resetPaddings": true,
+    "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
+  },
+  {
+    "type": "blog-colored-text-block",
+    "column": "left",
+    "resetPaddings": true,
+    "background": {
+      "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png",
+      "altText": "alt text from bo"
+    },
+    "title": "Lorem ipsum ",
+    "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
+  },
+  {
+    "type": "blog-yfm-block",
+    "column": "left",
+    "resetPaddings": true,
+    "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
+  }
+]

src/api/.mocks/forms.json

@@ -0,0 +1,22 @@
+{
+  "default": {
+    "type": "blog-form-block",
+    "paddingTop": "xl",
+    "formData": {
+      "hubspot": {
+        "region": "eu1",
+        "portalId": "25764979",
+        "formId": "a3eb06a6-e8ce-45d4-81bd-7fadb7dab313"
+      }
+    }
+  },
+  "yandexForm": {
+    "formData": {
+      "yandex": {
+        "theme": "default",
+        "id": "61a4e639d4d24e0dbba36f5c",
+        "customFormSection": "cloud"
+      }
+    }
+  }
+}

src/api/.mocks/layoutBlock.json

@@ -0,0 +1,68 @@
+{
+  "type": "blog-layout-block",
+  "resetPaddings": true,
+  "mobileOrder": "reverse",
+  "children": [
+    {
+      "type": "blog-author-block",
+      "column": "right",
+      "resetPaddings": true,
+      "authorId": 386
+    },
+    {
+      "type": "blog-author-block",
+      "column": "right",
+      "resetPaddings": true,
+      "authorId": 292
+    },
+    {
+      "type": "blog-author-block",
+      "column": "right",
+      "resetPaddings": true,
+      "authorId": 290
+    },
+    {
+      "type": "blog-author-block",
+      "column": "right",
+      "resetPaddings": true,
+      "authorId": 396
+    },
+    {
+      "type": "blog-author-block",
+      "column": "right",
+      "resetPaddings": true,
+      "authorId": 392
+    },
+    {
+      "type": "blog-yfm-block",
+      "column": "left",
+      "resetPaddings": true,
+      "text": "<p><strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur adipiscing elit</a> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>"
+    },
+    {
+      "type": "blog-banner-block",
+      "resetPaddings": true,
+      "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+      "text": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "color": "#5282FF",
+      "theme": "dark",
+      "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png",
+      "buttons": [
+        {
+          "text": "Get",
+          "url": "http://example.com/",
+          "theme": "normal-contrast"
+        }
+      ],
+      "fullWidth": false,
+      "column": "left"
+    },
+    {
+      "type": "card-with-image",
+      "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png",
+      "title": "Lorem ipsum",
+      "description": "Ut enim ad minim veniam, quis nostrud exercitation",
+      "column": "left"
+    }
+  ]
+}