Skip to content

gravity-ui/blog-constructor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

@gravity-ui/blog-constructor · npm package CI CI storybook

Install

npm install @gravity-ui/blog-constructor

Blog-constructor

Blog-constructor is a library based on the Page-constructor library for creating blog format web pages. Blog-constructor uses the custom prop from page-constructor to add the components needed for the blog.

Documentation - storybook

Getting started

The blog-constructor has both client components and server components for import. The blog pages is imported as a React component. To make sure it runs properly, wrap it in BlogConstructorProvider:

import {BlogPage, BlogConstructorProvider} from '@gravity-ui/blog-constructor';

// Main blog page
<BlogConstructorProvider {...providerProps}>
    <BlogPage
        content={content}
        posts={posts}
        tags={tags}
        getPosts={handleGetPosts}
        settings={settings}
    />
</BlogConstructorProvider>

---

import {BlogPostPage, BlogConstructorProvider} from '@gravity-ui/blog-constructor';

// Post page
<BlogConstructorProvider {...providerProps}>
    <BlogPostPage
        content={content}
        post={post}
        suggestedPosts={suggestedPosts}
        settings={settings}
        shareOptions={shareOptions}
    />
</BlogConstructorProvider>

Documentation about providerProps.

Also blog-constructor have server components to help you transform your data if you need

import {
  transformPost,
  sanitizeMeta,
  createReadableContent,
  transformPageContent,
} from '@gravity-ui/blog-constructor/server';

The blog-constructor is a uikit-based library, and we use an instance of i18n from uikit. To set up internationalization, you just need to use the configure from uikit:

import {configure} from '@gravity-ui/uikit';

configure({
  lang: 'ru',
});

Development

npm ci
npm run dev