feat: add css-api (#515)

* feat: create css-api for all styles without modal * feat: add css-api * feat: add css-api -fix readme * feat: add css-api - fix comment about imports
diplodoc-platform · Sep 23, 2024 · d9b2284 · d9b2284
1 parent 474e5c4
commit d9b2284
Show file tree

Hide file tree

Showing 13 changed files with 309 additions and 195 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,6 @@
 **english** | [русский](https://github.com/yandex-cloud/yfm-transform/blob/master/README.ru.md)
-- - -
+
+---
 
 [![NPM version](https://img.shields.io/npm/v/@diplodoc/transform.svg?style=flat)](https://www.npmjs.org/package/@diplodoc/transform)
 
@@ -11,49 +12,49 @@ Use it in your code to work with text during program execution. For example, to
 
 1. Install a package:
 
-    ```shell
-    npm i @diplodoc/transform
-    ```
+   ```shell
+   npm i @diplodoc/transform
+   ```
 
 1. Add the package in your code using the `require()` or `import()` function:
 
-    ```javascript
-    const transform = require('@diplodoc/transform');
-    ```
+   ```javascript
+   const transform = require('@diplodoc/transform');
+   ```
 
 1. To ensure text is displayed properly, add CSS styles and client scripts to the project:
 
-     ```css
-     @import '~@diplodoc/transform/dist/css/yfm.css';
-     ```
+   ```css
+   @import '~@diplodoc/transform/dist/css/yfm.css';
+   ```
 
-     ```javascript
-     import '@diplodoc/transform/dist/js/yfm';
-     ```
+   ```javascript
+   import '@diplodoc/transform/dist/js/yfm';
+   ```
 
 ## Usage {#use}
 
 The package provides the `transform()` function:
 
-* Input data: [Settings](settings.md) and a string with YFM.
-* Returned value: An object with the `result` and `logs` fields.
+- Input data: [Settings](settings.md) and a string with YFM.
+- Returned value: An object with the `result` and `logs` fields.
 
 ### Result field
 
 `result`: Resulting object, contains the fields:
 
-* `html`: A line with HTML.
-* `meta`: [Metadata](../../syntax/meta.md#meta) from the transmitted content.
-* `title`: The document title. Returned if `extractTitle = true` or `needTitle = true`.
-* `headings`: A list of document headers.
+- `html`: A line with HTML.
+- `meta`: [Metadata](../../syntax/meta.md#meta) from the transmitted content.
+- `title`: The document title. Returned if `extractTitle = true` or `needTitle = true`.
+- `headings`: A list of document headers.
 
 ### Logs field
 
 `logs`: Information about the transformation process, includes arrays:
 
-* `error`: Errors.
-* `warn`: Warnings.
-* `info`: Additional information.
+- `error`: Errors.
+- `warn`: Warnings.
+- `info`: Additional information.
 
 ### Example of a function invocation
 
@@ -62,15 +63,14 @@ const fs = require('fs');
 const transform = require('@diplodoc/transform');
 
 const content = fs.readFileSync(filePath, 'utf');
-const vars = { user: { name: 'Alice' } };
+const vars = {user: {name: 'Alice'}};
 
 const {
-    result: {html, meta, title, headings},
-    logs,
-    } = transform(content, {vars});
+  result: {html, meta, title, headings},
+  logs,
+} = transform(content, {vars});
 ```
 
 ## License
 
 MIT
-
diff --git a/README.ru.md b/README.ru.md
@@ -1,5 +1,6 @@
 **русский** | [english](https://github.com/yandex-cloud/yfm-transform/blob/master/README.md)
-- - -
+
+---
 
 [![NPM version](https://img.shields.io/npm/v/@diplodoc/transform.svg?style=flat)](https://www.npmjs.org/package/@diplodoc/transform)
 
@@ -11,46 +12,49 @@
 
 1. Установите пакет:
 
-    ```shell
-    npm i @diplodoc/transform
-    ```
+   ```shell
+   npm i @diplodoc/transform
+   ```
 
 1. Подключите пакет в своем коде, используя функцию `require()` или `import()`:
 
-    ```javascript
-    const transform = require('@diplodoc/transform');
-    ```
+   ```javascript
+   const transform = require('@diplodoc/transform');
+   ```
 
 1. Для корректного отображения подключите в проект CSS-стили и клиентские скрипты:
 
-     ```css
-     @import '~@diplodoc/transform/dist/css/yfm.css';
-     ```
+   ```css
+   @import '~@diplodoc/transform/dist/css/yfm.css';
+   ```
 
-     ```javascript
-     import '@diplodoc/transform/dist/js/yfm';
-     ```
+   ```javascript
+   import '@diplodoc/transform/dist/js/yfm';
+   ```
 
 ## Использование {#use}
 
 Пакет предоставляет функцию `transform()`:
-* входные данные — строка с YFM и [настройки](settings.md);
-* возвращаемое значение — объект с полями `result` и `logs`.
+
+- входные данные — строка с YFM и [настройки](settings.md);
+- возвращаемое значение — объект с полями `result` и `logs`.
 
 ### Поле result
 
 `result` — объект результата, содержит поля:
-* `html` — строка с HTML.
-* `meta` — [метаданные](../../syntax/meta.md#meta) из переданного контента.
-* `title` — заголовок документа. Возвращается, если заданы настройки `extractTitle = true` или `needTitle = true`.
-* `headings` — список заголовков документа.
+
+- `html` — строка с HTML.
+- `meta` — [метаданные](../../syntax/meta.md#meta) из переданного контента.
+- `title` — заголовок документа. Возвращается, если заданы настройки `extractTitle = true` или `needTitle = true`.
+- `headings` — список заголовков документа.
 
 ### Поле logs
 
 `logs` — информация о процессе трансформации, включает массивы:
-* `error` — ошибки.
-* `warn` — предупреждения.
-* `info` — дополнительная информация.
+
+- `error` — ошибки.
+- `warn` — предупреждения.
+- `info` — дополнительная информация.
 
 ### Пример вызова функции
 
@@ -59,15 +63,14 @@ const fs = require('fs');
 const transform = require('@diplodoc/transform');
 
 const content = fs.readFileSync(filePath, 'utf');
-const vars = { user: { name: 'Alice' } };
+const vars = {user: {name: 'Alice'}};
 
 const {
-    result: {html, meta, title, headings},
-    logs,
-    } = transform(content, {vars});
+  result: {html, meta, title, headings},
+  logs,
+} = transform(content, {vars});
 ```
 
-
 ## License
 
 MIT