fix: sync libs and docs versions

.github/workflows/ci.yml

@@ -21,6 +21,8 @@ jobs:
       run: npm ci
     - name: Shape libs-data.json
       run: npm run fetch-data
+    - name: Shape packages-versions.json
+      run: npm run get-packages-versions
     - name: Lint Files
       run: npm run lint
     - name: Typecheck

.github/workflows/deploy.yml

@@ -29,8 +29,6 @@ jobs:
         run: npm run build && npm run export
         env:
           GITHUB_TOKEN: ${{ github.token }}
-          UIKIT_TARGET_BRANCH: 'main'
-          DATE_COMPONENTS_TARGET_BRANCH: 'main'
       # Deploy
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3

.gitignore

@@ -27,5 +27,6 @@ yarn-debug.log*
 yarn-error.log*
 
 /src/libs-data.json
+/src/packages-versions.json
 
 .env

README.md

@@ -14,11 +14,5 @@ npm run start
 ```bash
 # .env file
 
-UIKIT_TARGET_BRANCH="your-branch" # default main, target branch for pulling documentation from uikit
-
-COMPONENTS_TARGET_BRANCH="your-branch" # default main, target branch for pulling documentation from components
-
-DATE_COMPONENTS_TARGET_BRANCH="your-branch" # default main, target branch for pulling documentation from date-components
-
 GITHUB_PROFILE="your profile" # default gravity-ui, target profile for pulling documentation from components
 ```

next.config.js

@@ -57,7 +57,7 @@
                 });
 
                 if (!options.isServer) {
                     config.resolve.fallback.fs = false;
                 }
 
                 return config;
@@ -70,11 +70,6 @@
 module.exports = withPlugins(plugins, {
     reactStrictMode: true,
     output: 'export',
-    env: {
-        UIKIT_TARGET_BRANCH: process.env.UIKIT_TARGET_BRANCH,
-        COMPONENTS_TARGET_BRANCH: process.env.COMPONENTS_TARGET_BRANCH,
-        DATE_COMPONENTS_TARGET_BRANCH: process.env.DATE_COMPONENTS_TARGET_BRANCH,
-    },
     experimental: {
         esmExternals: 'loose',
     },

package.json

@@ -4,11 +4,11 @@
   "private": true,
   "homepage": "https://gravity-ui.com/",
   "dependencies": {
-    "@doc-tools/transform": "^2.16.0",
-    "@gravity-ui/components": "^2.1.0",
-    "@gravity-ui/icons": "^2.3.0",
-    "@gravity-ui/page-constructor": "^3.9.2",
-    "@gravity-ui/uikit": "^5.12.1",
+    "@doc-tools/transform": "^3.11.0",
+    "@gravity-ui/components": "2.1.0",
+    "@gravity-ui/icons": "^2.8.1",
+    "@gravity-ui/page-constructor": "^4.41.0",
+    "@gravity-ui/uikit": "5.12.1",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -63,18 +63,19 @@
   },
   "overrides": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "@gravity-ui/uikit": "^5.12.1"
+    "react-dom": "^17.0.2"
   },
   "scripts": {
     "prepare": "husky install",
     "start": "next dev",
     "build": "next build",
     "export": "next export -o build/",
     "fetch-data": "node ./scripts/prefetch-data.mjs",
-    "prestart": "npm run fetch-data",
-    "prebuild": "npm run fetch-data",
-    "pretest": "npm run fetch-data",
+    "get-packages-versions": "node ./scripts/get-packages-versions.mjs",
+    "prepare-metadata": "npm run fetch-data && npm run get-packages-versions",
+    "prestart": "npm run prepare-metadata",
+    "prebuild": "npm run prepare-metadata",
+    "pretest": "npm run prepare-metadata",
     "lint:js": "eslint --ext .js,.jsx,.ts,.tsx .",
     "lint:styles": "stylelint '{styles,src}/**/*.scss'",
     "lint:prettier": "prettier --check '**/*.md'",

scripts/get-packages-versions.mjs

@@ -0,0 +1,44 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import {fileURLToPath} from 'node:url';
+
+const packagesMap = {
+    '@gravity-ui/uikit': 'uikit',
+    '@gravity-ui/components': 'components',
+    // '@gravity-ui/date-components': 'date-components',
+};
+
+const packageJsonPath = path.join(path.dirname(fileURLToPath(import.meta.url)), '../package.json');
+const packagesVersionsPath = path.join(
+    path.dirname(fileURLToPath(import.meta.url)),
+    '../src/packages-versions.json',
+);
+
+const getPackagesVersions = () => {
+    try {
+        console.log('GET_PACKAGES_VERSIONS_START');
+
+        const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+        const dependencies = packageJson.dependencies;
+
+        const result = {};
+        Object.keys(packagesMap).forEach((packageName) => {
+            if (dependencies[packageName]) {
+                result[packagesMap[packageName]] = dependencies[packageName].replace(/[\^~]/g, '');
+            } else {
+                console.warn('GET_PACKAGES_VERSIONS_MISSED_PACKAGE', packageName);
+            }
+        });
+
+        console.log('GET_PACKAGES_VERSIONS_RESULT', result);
+
+        fs.writeFileSync(packagesVersionsPath, JSON.stringify(result), 'utf8');
+
+        console.log('GET_PACKAGES_VERSIONS_FINISH');
+    } catch (err) {
+        console.error(err.message);
+        process.exit(1);
+    }
+};
+
+getPackagesVersions();

src/blocks/CustomHeader/CustomHeader.scss

@@ -5,6 +5,12 @@
 $block: '.#{variables.$ns}custom-header';
 
 #{$block} {
+    margin-top: 76px;
+
+    @media (max-width: map-get(pcVariables.$gridBreakpoints, 'sm') - 1) {
+        margin-top: 32px;
+    }
+
     &__title {
         @include pcStyles.heading1();
         max-width: 800px;

src/components/Landing/Landing.tsx

@@ -9,29 +9,22 @@ import {RoadmapBlock} from '../../blocks/RoadmapBlock/RoadmapBlock';
 import {CustomBlock} from '../../blocks/constants';
 import {landing} from '../../content/landing';
 import {useSectionScroll} from '../../hooks/useSectionScroll';
-import {block} from '../../utils';
-
-import './Landing.scss';
-
-const b = block('landing');
 
 export const Landing: React.FC = () => {
     useSectionScroll();
 
     return (
-        <div className={b()}>
-            <PageConstructor
-                content={landing}
-                custom={{
-                    blocks: {
-                        [CustomBlock.CustomHeader]: CustomHeader,
-                        [CustomBlock.CustomExtendedFeatures]: CustomExtendedFeatures,
-                        [CustomBlock.CustomBanner]: CustomBanner,
-                        [CustomBlock.Examples]: Examples,
-                        [CustomBlock.Roadmap]: RoadmapBlock,
-                    },
-                }}
-            />
-        </div>
+        <PageConstructor
+            content={landing}
+            custom={{
+                blocks: {
+                    [CustomBlock.CustomHeader]: CustomHeader,
+                    [CustomBlock.CustomExtendedFeatures]: CustomExtendedFeatures,
+                    [CustomBlock.CustomBanner]: CustomBanner,
+                    [CustomBlock.Examples]: Examples,
+                    [CustomBlock.Roadmap]: RoadmapBlock,
+                },
+            }}
+        />
     );
 };

src/constants.ts

@@ -5,6 +5,4 @@ export const GA_ID = 'GTM-KHT6KD7';
 export const MENU_ID = 'menu';
 export const CONTENT_WRAPPER_ID = 'content';
 
-export const TARGET_BRANCH = 'main';
-
 export const TARGET_PROFILE = 'gravity-ui';

src/content/components/utils.ts

@@ -1,15 +1,13 @@
-import {TARGET_BRANCH, TARGET_PROFILE} from '../../constants';
+import {TARGET_PROFILE} from '../../constants';
+import packagesVersions from '../../packages-versions.json';
 import {Repos} from '../../types/common';
 
-const uikitTargetBranch = process.env.UIKIT_TARGET_BRANCH || TARGET_BRANCH;
-const componentsTargetBranch = process.env.COMPONENTS_TARGET_BRANCH || TARGET_BRANCH;
-const dateComponentsTargetBranch = process.env.DATE_COMPONENTS_TARGET_BRANCH || TARGET_BRANCH;
-const githubTargetprofile = process.env.GITHUB_PROFILE || TARGET_PROFILE;
+const githubTargetProfile = process.env.GITHUB_PROFILE || TARGET_PROFILE;
 
-const TARGET_REPOS_BRANCHES = {
-    [Repos.Uikit]: uikitTargetBranch,
-    [Repos.Components]: componentsTargetBranch,
-    [Repos.DateComponents]: dateComponentsTargetBranch,
+const TARGET_REPOS_VERSIONS = {
+    [Repos.Uikit]: packagesVersions[Repos.Uikit],
+    [Repos.Components]: packagesVersions[Repos.Components],
+    // [Repos.DateComponents]: packagesVersions['@gravity-ui/date-components'],
 };
 
 export type GetterProps = {componentName: string; repoName: Repos};
@@ -23,7 +21,7 @@ export const mappingOptions = (arr: string[]) =>
     }));
 
 export const getReadmeUrl: RepoInfoGetterFunc = ({componentName, repoName}) =>
-    `https://raw.githubusercontent.com/${githubTargetprofile}/${repoName}/${TARGET_REPOS_BRANCHES[repoName]}/src/components/${componentName}/README.md`;
+    `https://raw.githubusercontent.com/${githubTargetProfile}/${repoName}/v${TARGET_REPOS_VERSIONS[repoName]}/src/components/${componentName}/README.md`;
 
 export const getGithubUrl: RepoInfoGetterFunc = ({componentName, repoName}) =>
-    `https://github.com/${githubTargetprofile}/${repoName}/tree/main/src/components/${componentName}`;
+    `https://github.com/${githubTargetProfile}/${repoName}/tree/main/src/components/${componentName}`;

src/styles.scss

@@ -36,15 +36,18 @@ body,
     height: 100%;
 }
 
-body.g-root {
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
+body.g-root,
+.g-root {
     &_theme_dark {
         --g-color-base-background: #160d1b;
         background-color: var(--g-color-base-background);
     }
+}
+
+.g-root {
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 
     &:not(.sandbox) {
         --g-font-family-sans: 'Inter', 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif;
@@ -133,4 +136,8 @@ body.g-root {
             }
         }
     }
+
+    .pc-page-constructor {
+        background-color: transparent;
+    }
 }

src/types/common.ts

@@ -1,5 +1,5 @@
 export enum Repos {
     Uikit = 'uikit',
     Components = 'components',
-    DateComponents = 'date-components',
+    // DateComponents = 'date-components',
 }