@gravity-ui/blog-constructor 3.1.0 → 3.2.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [3.1.1](https://github.com/gravity-ui/blog-constructor/compare/v3.1.0...v3.1.1) (2023-05-11)
+
+
+### Bug Fixes
+
+* add specificity to headings ([#43](https://github.com/gravity-ui/blog-constructor/issues/43)) ([de53d0b](https://github.com/gravity-ui/blog-constructor/commit/de53d0bb9a697f520626e8c0b1d8c48c8e4d8a64))
+* change href 'prev' to 'blog' and 'next' to page+1 ([#42](https://github.com/gravity-ui/blog-constructor/issues/42)) ([cb8b810](https://github.com/gravity-ui/blog-constructor/commit/cb8b8102d59368cfa0d285d63604a8e9f1ab6619))
+
 ## [3.1.0](https://github.com/gravity-ui/blog-constructor/compare/v3.0.2...v3.1.0) (2023-04-25)
 
 

package/build/cjs/blocks/CTA/CTA.css

@@ -11,46 +11,66 @@
 }
 .bc-cta__button {
   display: flex;
-  padding-bottom: 16px;
+  padding-bottom: 0px;
+}
+.bc-cta__button_layout {
+  width: 100%;
+  max-width: 100%;
+  margin-right: 0px;
+}
+.bc-cta__button_layout_2 {
+  width: calc(50% - (16px / 2));
+  max-width: 50%;
+  margin-right: 16px;
+}
+.bc-cta__button_layout_2:nth-child(2n) {
+  margin-right: 0px;
+}
+.bc-cta__button_layout_3 {
+  width: calc(33.3333333333% - (32px / 3));
+  margin-right: 16px;
+}
+.bc-cta__button_layout_3:nth-child(3n) {
+  margin-right: 0px;
+}
+.bc-cta__button_layout_4 {
+  width: calc(25% - (48px / 4));
+  max-width: 50%;
+  margin-right: 16px;
+}
+.bc-cta__button_layout_4:nth-child(4n) {
+  margin-right: 0px;
 }
 .bc-cta__content {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 }
-@media (min-width: 577px) {
+@media (max-width: 769px) {
   .bc-cta__content {
-    display: flex;
-    flex-direction: row;
+    flex-wrap: wrap;
   }
   .bc-cta__button {
-    padding-bottom: 0px;
-  }
-  .bc-cta__button_layout {
-    width: 100%;
-    max-width: 100%;
-    margin-right: 0px;
+    padding-bottom: 16px;
   }
-  .bc-cta__button_layout_2 {
+  .bc-cta__button_layout_1, .bc-cta__button_layout_2, .bc-cta__button_layout_3, .bc-cta__button_layout_4 {
     width: calc(50% - (16px / 2));
-    max-width: 50%;
+    max-width: 100%;
     margin-right: 16px;
+    flex-grow: 1;
   }
-  .bc-cta__button_layout_2:nth-child(2n) {
-    margin-right: 0px;
+  .bc-cta__button_layout_1:nth-child(2n), .bc-cta__button_layout_2:nth-child(2n), .bc-cta__button_layout_3:nth-child(2n), .bc-cta__button_layout_4:nth-child(2n) {
+    margin-right: 0;
   }
-  .bc-cta__button_layout_3 {
-    width: calc(33.3333333333% - (32px / 3));
-    margin-right: 16px;
-  }
-  .bc-cta__button_layout_3:nth-child(3n) {
-    margin-right: 0px;
+}
+@media (max-width: 577px) {
+  .bc-cta__content {
+    flex-direction: column;
   }
-  .bc-cta__button_layout_4 {
-    width: calc(25% - (48px / 4));
-    max-width: 50%;
-    margin-right: 16px;
+  .bc-cta__button {
+    padding-bottom: 16px;
   }
-  .bc-cta__button_layout_4:nth-child(4n) {
-    margin-right: 0px;
+  .bc-cta__button_layout_1, .bc-cta__button_layout_2, .bc-cta__button_layout_3, .bc-cta__button_layout_4 {
+    width: 100%;
+    max-width: 100%;
   }
 }

package/build/cjs/components/Paginator/Paginator.js

@@ -107,6 +107,7 @@ const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, loadin
             dataKey: types_1.ArrowType.Prev,
             mods: { type: types_1.ArrowType.Prev },
             onClick: handleArrowClick,
+            index: 0,
             content: react_1.default.createElement(NavigationButton_1.NavigationButton, { arrowType: types_1.ArrowType.Prev }),
         });
     }
@@ -115,6 +116,7 @@ const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, loadin
             key: types_1.ArrowType.Next,
             dataKey: types_1.ArrowType.Next,
             mods: { type: types_1.ArrowType.Next },
+            index: page + 1,
             onClick: handleArrowClick,
             content: react_1.default.createElement(NavigationButton_1.NavigationButton, { arrowType: types_1.ArrowType.Next }),
         });

package/build/cjs/components/Paginator/components/PaginatorItem.d.ts

@@ -1,2 +1,2 @@
 import { PaginatorItemProps } from '../types';
-export declare const PaginatorItem: ({ dataKey, mods, content, onClick, loading, }: PaginatorItemProps) => JSX.Element;
+export declare const PaginatorItem: ({ dataKey, mods, content, onClick, loading, index, }: PaginatorItemProps) => JSX.Element;

package/build/cjs/components/Paginator/components/PaginatorItem.js

@@ -30,12 +30,12 @@ const LocaleContext_1 = require("../../../contexts/LocaleContext");
 const cn_1 = require("../../../utils/cn");
 const common_1 = require("../../../utils/common");
 const b = (0, cn_1.block)('paginator');
-const PaginatorItem = ({ dataKey, mods, content, onClick, loading = false, }) => {
+const PaginatorItem = ({ dataKey, mods, content, onClick, loading = false, index, }) => {
     const { locale } = (0, react_1.useContext)(LocaleContext_1.LocaleContext);
     const urlPath = (0, common_1.getBlogPath)((locale === null || locale === void 0 ? void 0 : locale.pathPrefix) || '');
     const itemKey = Number(dataKey) > 0 ? Number(dataKey) : dataKey;
-    const navTag = itemKey > 0 ? `${mods.type || 'page'}=${itemKey}` : itemKey;
-    const navigationLink = `${urlPath || ''}?${navTag}`;
+    const navTag = index > 1 ? `?page=${index}` : '';
+    const navigationLink = `${urlPath || ''}${navTag}`;
     return (react_1.default.createElement(uikit_1.Button, { view: "flat", size: "xl", className: b('item', mods), onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(itemKey), loading: loading && Boolean(mods.active) },
         react_1.default.createElement("a", { href: navigationLink, className: b('link'), onClick: (event) => event.preventDefault() }, content)));
 };

package/build/cjs/components/Paginator/types.d.ts

@@ -8,6 +8,7 @@ export interface PaginatorItemProps {
     content: ReactNode;
     onClick?: (key: number | ArrowType) => void;
     loading?: boolean;
+    index: number;
 }
 export type PaginatorProps = {
     page: number;

package/build/cjs/components/Paginator/utils.js

@@ -17,6 +17,7 @@ const getPageConfigs = ({ page, pagesCount, handlePageClick }) => {
         paginatorItems.push({
             key: String(i),
             dataKey: String(i),
+            index: i,
             mods: { type: 'page', active: page === i },
             onClick: handlePageClick,
             content: i,

package/build/cjs/containers/BlogPostPage/BlogPostPage.css

@@ -49,17 +49,18 @@ unpredictable css rules order in build */
   font-size: var(--yc-text-header-1-font-size);
   line-height: var(--yc-text-header-1-line-height);
 }
-.yfm_blog h1,
-.yfm_blog h2,
-.yfm_blog h3,
-.yfm_blog h4,
-.yfm_blog h5,
-.yfm_blog h6 {
+.yfm_blog.yfm_blog h1,
+.yfm_blog.yfm_blog h2,
+.yfm_blog.yfm_blog h3,
+.yfm_blog.yfm_blog h4,
+.yfm_blog.yfm_blog h5,
+.yfm_blog.yfm_blog h6 {
   margin-bottom: 16px;
   margin-top: 32px;
   padding-top: 0;
   font-weight: var(--yc-text-header-font-weight);
 }
+
 .yfm_blog blockquote,
 .yfm_blog dl,
 .yfm_blog ol,

package/build/esm/blocks/CTA/CTA.css

@@ -11,46 +11,66 @@
 }
 .bc-cta__button {
   display: flex;
-  padding-bottom: 16px;
+  padding-bottom: 0px;
+}
+.bc-cta__button_layout {
+  width: 100%;
+  max-width: 100%;
+  margin-right: 0px;
+}
+.bc-cta__button_layout_2 {
+  width: calc(50% - (16px / 2));
+  max-width: 50%;
+  margin-right: 16px;
+}
+.bc-cta__button_layout_2:nth-child(2n) {
+  margin-right: 0px;
+}
+.bc-cta__button_layout_3 {
+  width: calc(33.3333333333% - (32px / 3));
+  margin-right: 16px;
+}
+.bc-cta__button_layout_3:nth-child(3n) {
+  margin-right: 0px;
+}
+.bc-cta__button_layout_4 {
+  width: calc(25% - (48px / 4));
+  max-width: 50%;
+  margin-right: 16px;
+}
+.bc-cta__button_layout_4:nth-child(4n) {
+  margin-right: 0px;
 }
 .bc-cta__content {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 }
-@media (min-width: 577px) {
+@media (max-width: 769px) {
   .bc-cta__content {
-    display: flex;
-    flex-direction: row;
+    flex-wrap: wrap;
   }
   .bc-cta__button {
-    padding-bottom: 0px;
-  }
-  .bc-cta__button_layout {
-    width: 100%;
-    max-width: 100%;
-    margin-right: 0px;
+    padding-bottom: 16px;
   }
-  .bc-cta__button_layout_2 {
+  .bc-cta__button_layout_1, .bc-cta__button_layout_2, .bc-cta__button_layout_3, .bc-cta__button_layout_4 {
     width: calc(50% - (16px / 2));
-    max-width: 50%;
+    max-width: 100%;
     margin-right: 16px;
+    flex-grow: 1;
   }
-  .bc-cta__button_layout_2:nth-child(2n) {
-    margin-right: 0px;
+  .bc-cta__button_layout_1:nth-child(2n), .bc-cta__button_layout_2:nth-child(2n), .bc-cta__button_layout_3:nth-child(2n), .bc-cta__button_layout_4:nth-child(2n) {
+    margin-right: 0;
   }
-  .bc-cta__button_layout_3 {
-    width: calc(33.3333333333% - (32px / 3));
-    margin-right: 16px;
-  }
-  .bc-cta__button_layout_3:nth-child(3n) {
-    margin-right: 0px;
+}
+@media (max-width: 577px) {
+  .bc-cta__content {
+    flex-direction: column;
   }
-  .bc-cta__button_layout_4 {
-    width: calc(25% - (48px / 4));
-    max-width: 50%;
-    margin-right: 16px;
+  .bc-cta__button {
+    padding-bottom: 16px;
   }
-  .bc-cta__button_layout_4:nth-child(4n) {
-    margin-right: 0px;
+  .bc-cta__button_layout_1, .bc-cta__button_layout_2, .bc-cta__button_layout_3, .bc-cta__button_layout_4 {
+    width: 100%;
+    max-width: 100%;
   }
 }

package/build/esm/components/Paginator/Paginator.js

@@ -79,6 +79,7 @@ export const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className,
             dataKey: ArrowType.Prev,
             mods: { type: ArrowType.Prev },
             onClick: handleArrowClick,
+            index: 0,
             content: React.createElement(NavigationButton, { arrowType: ArrowType.Prev }),
         });
     }
@@ -87,6 +88,7 @@ export const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className,
             key: ArrowType.Next,
             dataKey: ArrowType.Next,
             mods: { type: ArrowType.Next },
+            index: page + 1,
             onClick: handleArrowClick,
             content: React.createElement(NavigationButton, { arrowType: ArrowType.Next }),
         });

package/build/esm/components/Paginator/components/PaginatorItem.d.ts

@@ -1,3 +1,3 @@
 import { PaginatorItemProps } from '../types';
 import '../Paginator.css';
-export declare const PaginatorItem: ({ dataKey, mods, content, onClick, loading, }: PaginatorItemProps) => JSX.Element;
+export declare const PaginatorItem: ({ dataKey, mods, content, onClick, loading, index, }: PaginatorItemProps) => JSX.Element;

package/build/esm/components/Paginator/components/PaginatorItem.js

@@ -5,12 +5,12 @@ import { block } from '../../../utils/cn';
 import { getBlogPath } from '../../../utils/common';
 import '../Paginator.css';
 const b = block('paginator');
-export const PaginatorItem = ({ dataKey, mods, content, onClick, loading = false, }) => {
+export const PaginatorItem = ({ dataKey, mods, content, onClick, loading = false, index, }) => {
     const { locale } = useContext(LocaleContext);
     const urlPath = getBlogPath((locale === null || locale === void 0 ? void 0 : locale.pathPrefix) || '');
     const itemKey = Number(dataKey) > 0 ? Number(dataKey) : dataKey;
-    const navTag = itemKey > 0 ? `${mods.type || 'page'}=${itemKey}` : itemKey;
-    const navigationLink = `${urlPath || ''}?${navTag}`;
+    const navTag = index > 1 ? `?page=${index}` : '';
+    const navigationLink = `${urlPath || ''}${navTag}`;
     return (React.createElement(Button, { view: "flat", size: "xl", className: b('item', mods), onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(itemKey), loading: loading && Boolean(mods.active) },
         React.createElement("a", { href: navigationLink, className: b('link'), onClick: (event) => event.preventDefault() }, content)));
 };

package/build/esm/components/Paginator/types.d.ts

@@ -8,6 +8,7 @@ export interface PaginatorItemProps {
     content: ReactNode;
     onClick?: (key: number | ArrowType) => void;
     loading?: boolean;
+    index: number;
 }
 export type PaginatorProps = {
     page: number;

package/build/esm/components/Paginator/utils.js

@@ -14,6 +14,7 @@ export const getPageConfigs = ({ page, pagesCount, handlePageClick }) => {
         paginatorItems.push({
             key: String(i),
             dataKey: String(i),
+            index: i,
             mods: { type: 'page', active: page === i },
             onClick: handlePageClick,
             content: i,

package/build/esm/containers/BlogPostPage/BlogPostPage.css

@@ -49,17 +49,18 @@ unpredictable css rules order in build */
   font-size: var(--yc-text-header-1-font-size);
   line-height: var(--yc-text-header-1-line-height);
 }
-.yfm_blog h1,
-.yfm_blog h2,
-.yfm_blog h3,
-.yfm_blog h4,
-.yfm_blog h5,
-.yfm_blog h6 {
+.yfm_blog.yfm_blog h1,
+.yfm_blog.yfm_blog h2,
+.yfm_blog.yfm_blog h3,
+.yfm_blog.yfm_blog h4,
+.yfm_blog.yfm_blog h5,
+.yfm_blog.yfm_blog h6 {
   margin-bottom: 16px;
   margin-top: 32px;
   padding-top: 0;
   font-weight: var(--yc-text-header-font-weight);
 }
+
 .yfm_blog blockquote,
 .yfm_blog dl,
 .yfm_blog ol,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/blog-constructor",
-  "version": "3.1.0",
+  "version": "3.2.0-alpha.0",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "repository": {
@@ -141,5 +141,8 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
+  },
+  "publishConfig": {
+    "tag": "alpha"
   }
 }

package/styles/yfm.css

@@ -25,17 +25,18 @@ unpredictable css rules order in build */
   font-size: var(--yc-text-header-1-font-size);
   line-height: var(--yc-text-header-1-line-height);
 }
-.yfm_blog h1,
-.yfm_blog h2,
-.yfm_blog h3,
-.yfm_blog h4,
-.yfm_blog h5,
-.yfm_blog h6 {
+.yfm_blog.yfm_blog h1,
+.yfm_blog.yfm_blog h2,
+.yfm_blog.yfm_blog h3,
+.yfm_blog.yfm_blog h4,
+.yfm_blog.yfm_blog h5,
+.yfm_blog.yfm_blog h6 {
   margin-bottom: 16px;
   margin-top: 32px;
   padding-top: 0;
   font-weight: var(--yc-text-header-font-weight);
 }
+
 .yfm_blog blockquote,
 .yfm_blog dl,
 .yfm_blog ol,

package/styles/yfm.scss

@@ -2,6 +2,8 @@
 @import './variables.scss';
 
 .yfm_blog {
+    $root: &;
+
     @include text-size(body-3);
     color: var(--yc-color-text-primary);
 
@@ -26,16 +28,18 @@
         @include text-size(header-1);
     }
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-        margin-bottom: $indentXS;
-        margin-top: $indentM;
-        padding-top: 0;
-        font-weight: var(--yc-text-header-font-weight);
+    @include add-specificity(&) {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin-bottom: $indentXS;
+            margin-top: $indentM;
+            padding-top: 0;
+            font-weight: var(--yc-text-header-font-weight);
+        }
     }
 
     blockquote,