Compare commits

...

2 Commits

Author SHA1 Message Date
arswarog 03f7302317 docuservix/widgets/chat: добавлен компонент чата
Reviewed-on: #6
Co-authored-by: Arswarog <arswarog@yandex.ru>
Co-committed-by: Arswarog <arswarog@yandex.ru>
2026-06-19 18:28:07 +03:00
arswarog f6436d0c83 lint: добавление линтера
Reviewed-on: #5
Co-authored-by: Arswarog <arswarog@yandex.ru>
Co-committed-by: Arswarog <arswarog@yandex.ru>
2026-06-18 13:33:29 +03:00
34 changed files with 3670 additions and 276 deletions
+3 -3
View File
@@ -1,4 +1,4 @@
title: "Title example" title: 'Title example'
project: project:
org: "example" org: 'example'
repo: "example" repo: 'example'
+1
View File
@@ -0,0 +1 @@
yarn lint-staged
+7
View File
@@ -0,0 +1,7 @@
dist
coverage
*.d.ts
node_modules
.idea
logs
report
+29
View File
@@ -0,0 +1,29 @@
{
"printWidth": 100,
"useTabs": false,
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"singleAttributePerLine": true,
"overrides": [
{
"files": [
"*.json"
],
"options": {
"printWidth": 10
}
},
{
"files": [
"*.md",
"*.mdx"
],
"options": {
"proseWrap": "always"
}
}
]
}
+47
View File
@@ -0,0 +1,47 @@
# CLAUDE.md
This file provides guidance to Claude Code (claude.ai/code) when working with code in this
repository.
## Project Overview
Docuservix docs — шаблон документационного сайта на Docusaurus 3.10 (React 19, TypeScript 6).
Конфигурация сайта читается из `.docuservix.yml` (title, project.org, project.repo, dirs). Локаль —
русский (`ru`).
## Commands
Используется **yarn**.
- `yarn start` — dev-сервер
- `yarn build` — production-сборка в `build/`
- `yarn typecheck` — проверка типов (tsc)
- `yarn prettier:check` — проверка форматирования
- `yarn prettier:fix` — автоформатирование
## Architecture
- `docusaurus.config.ts` — главный конфиг; читает `.docuservix.yml` через `js-yaml`
- `src/pages/` — кастомные страницы (index.tsx — главная)
- `src/css/custom.css` — глобальные CSS-переменные (`--ifm-*`)
- `docs/` — Markdown/MDX-документация
- `blog/` — блог (опционально, включается через `dirs.blog` в `.docuservix.yml`)
- Mermaid-диаграммы включены (`@docusaurus/theme-mermaid`)
- Docusaurus future v4 compatibility flag включён
## Code Style
- Prettier: 4 пробела, single quotes, trailing commas, `printWidth: 100`,
`singleAttributePerLine: true`
- JSON: `printWidth: 10` (каждое свойство на отдельной строке)
- Markdown/MDX: `proseWrap: always`
- Husky + lint-staged: prettier запускается автоматически на pre-commit
- CSS Modules (`*.module.css`) с camelCase именами классов
- **Без default export** в shared/UI компонентах; default export допустим только для Docusaurus
route-компонентов (page components)
## Environment
- Node >= 20
- Env vars: `DOCUSERVIX_URL` (production URL), `DOCUSERVIX_ON_BROKEN_LINKS` (override onBrokenLinks)
- Gitea instance: `git.jt4d.ru`
+4 -2
View File
@@ -14,7 +14,8 @@ yarn
yarn start yarn start
``` ```
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. This command starts a local development server and opens up a browser window. Most changes are
reflected live without having to restart the server.
## Build ## Build
@@ -22,4 +23,5 @@ This command starts a local development server and opens up a browser window. Mo
yarn build yarn build
``` ```
This command generates static content into the `build` directory and can be served using any static contents hosting service. This command generates static content into the `build` directory and can be served using any static
contents hosting service.
+104 -104
View File
@@ -2,120 +2,120 @@ name: 'Docusaurus Deploy'
description: 'Builds Docusaurus docs from repo and deploys to S3' description: 'Builds Docusaurus docs from repo and deploys to S3'
inputs: inputs:
docs-path: docs-path:
description: 'Path to docs directory in calling repo' description: 'Path to docs directory in calling repo'
default: 'docs' default: 'docs'
on-broken-links: on-broken-links:
description: 'Behavior on broken links: throw, warn, or ignore' description: 'Behavior on broken links: throw, warn, or ignore'
default: 'throw' default: 'throw'
prefix: prefix:
description: 'Prefix for S3 path' description: 'Prefix for S3 path'
default: '' default: ''
runs: runs:
using: 'composite' using: 'composite'
steps: steps:
- name: Compute target URL - name: Compute target URL
shell: bash shell: bash
run: | run: |
REF="${{ github.head_ref || github.ref_name }}" REF="${{ github.head_ref || github.ref_name }}"
REPO="${{ github.event.repository.name }}" REPO="${{ github.event.repository.name }}"
ORG="${{ github.repository_owner }}" ORG="${{ github.repository_owner }}"
if [[ "$REF" == "main" || "$REF" == "master" ]]; then if [[ "$REF" == "main" || "$REF" == "master" ]]; then
URL="http://${REPO}.${ORG}.jt4d-wiki.ru.net" URL="http://${REPO}.${ORG}.jt4d-wiki.ru.net"
S3_PATH="${ORG}.${REPO}" S3_PATH="${ORG}.${REPO}"
else else
URL="http://${REF}.${REPO}.${ORG}.jt4d-wiki.ru.net" URL="http://${REF}.${REPO}.${ORG}.jt4d-wiki.ru.net"
S3_PATH="${ORG}.${REPO}.${REF}" S3_PATH="${ORG}.${REPO}.${REF}"
fi fi
PREFIX="${{ inputs.prefix }}" PREFIX="${{ inputs.prefix }}"
if [[ -n "$PREFIX" ]]; then if [[ -n "$PREFIX" ]]; then
S3_PATH="${PREFIX}/${S3_PATH}" S3_PATH="${PREFIX}/${S3_PATH}"
fi fi
echo "TARGET_URL=$URL" >> $GITHUB_ENV echo "TARGET_URL=$URL" >> $GITHUB_ENV
echo "S3_PATH=$S3_PATH" >> $GITHUB_ENV echo "S3_PATH=$S3_PATH" >> $GITHUB_ENV
- name: Set docs status pending - name: Set docs status pending
shell: bash shell: bash
run: | run: |
curl -s -X POST \ curl -s -X POST \
-H "Authorization: token ${{ github.token }}" \ -H "Authorization: token ${{ github.token }}" \
-H "Content-Type: application/json" \ -H "Content-Type: application/json" \
-d '{ -d '{
"state": "pending", "state": "pending",
"context": "Docs", "context": "Docs",
"description": "building", "description": "building",
"target_url": "${{ env.TARGET_URL }}" "target_url": "${{ env.TARGET_URL }}"
}' \ }' \
"${{ github.server_url }}/api/v1/repos/${{ github.repository }}/statuses/${{ github.sha }}" "${{ github.server_url }}/api/v1/repos/${{ github.repository }}/statuses/${{ github.sha }}"
- name: Copy docs into Docusaurus - name: Copy docs into Docusaurus
shell: bash shell: bash
run: | run: |
DOCUSAURUS_DIR="${{ github.action_path }}" DOCUSAURUS_DIR="${{ github.action_path }}"
rm -rf "${DOCUSAURUS_DIR}/docs" rm -rf "${DOCUSAURUS_DIR}/docs"
cp -r "${{ inputs.docs-path }}" "${DOCUSAURUS_DIR}/docs" cp -r "${{ inputs.docs-path }}" "${DOCUSAURUS_DIR}/docs"
cp "${{ github.workspace }}/.docuservix.yml" "${DOCUSAURUS_DIR}" cp "${{ github.workspace }}/.docuservix.yml" "${DOCUSAURUS_DIR}"
- name: Prepare docs - name: Prepare docs
shell: bash shell: bash
working-directory: ${{ github.action_path }} working-directory: ${{ github.action_path }}
run: node scripts/prepare-docs.mjs run: node scripts/prepare-docs.mjs
- name: Install Docusaurus dependencies - name: Install Docusaurus dependencies
shell: bash shell: bash
working-directory: ${{ github.action_path }} working-directory: ${{ github.action_path }}
run: yarn install --frozen-lockfile run: yarn install --frozen-lockfile
- name: Build docs - name: Build docs
shell: bash shell: bash
working-directory: ${{ github.action_path }} working-directory: ${{ github.action_path }}
env: env:
DOCUSERVIX_ON_BROKEN_LINKS: ${{ inputs.on-broken-links }} DOCUSERVIX_ON_BROKEN_LINKS: ${{ inputs.on-broken-links }}
DOCUSERVIX_URL: ${{ env.TARGET_URL }} DOCUSERVIX_URL: ${{ env.TARGET_URL }}
run: yarn docusaurus build --out-dir ${{ github.workspace }}/generated-docs run: yarn docusaurus build --out-dir ${{ github.workspace }}/generated-docs
- name: Upload to S3 - name: Upload to S3
shell: bash shell: bash
env: env:
AWS_ACCESS_KEY_ID: ${{ vars.DOCUSERVIX_S3_ACCESS }} AWS_ACCESS_KEY_ID: ${{ vars.DOCUSERVIX_S3_ACCESS }}
AWS_SECRET_ACCESS_KEY: ${{ vars.DOCUSERVIX_S3_SECRET }} AWS_SECRET_ACCESS_KEY: ${{ vars.DOCUSERVIX_S3_SECRET }}
run: | run: |
aws s3 sync generated-docs/ \ aws s3 sync generated-docs/ \
s3://${{ vars.DOCUSERVIX_S3_BUCKET }}/${{ env.S3_PATH }}\ s3://${{ vars.DOCUSERVIX_S3_BUCKET }}/${{ env.S3_PATH }}\
--endpoint-url ${{ vars.DOCUSERVIX_S3_URL }} \ --endpoint-url ${{ vars.DOCUSERVIX_S3_URL }} \
--acl public-read \ --acl public-read \
--delete --delete
- name: Set docs status success - name: Set docs status success
if: success() if: success()
shell: bash shell: bash
run: | run: |
curl -s -X POST \ curl -s -X POST \
-H "Authorization: token ${{ github.token }}" \ -H "Authorization: token ${{ github.token }}" \
-H "Content-Type: application/json" \ -H "Content-Type: application/json" \
-d '{ -d '{
"state": "success", "state": "success",
"context": "Docs", "context": "Docs",
"description": "deployed", "description": "deployed",
"target_url": "${{ env.TARGET_URL }}" "target_url": "${{ env.TARGET_URL }}"
}' \ }' \
"${{ github.server_url }}/api/v1/repos/${{ github.repository }}/statuses/${{ github.sha }}" "${{ github.server_url }}/api/v1/repos/${{ github.repository }}/statuses/${{ github.sha }}"
- name: Set docs status failure - name: Set docs status failure
if: failure() if: failure()
shell: bash shell: bash
run: | run: |
curl -s -X POST \ curl -s -X POST \
-H "Authorization: token ${{ github.token }}" \ -H "Authorization: token ${{ github.token }}" \
-H "Content-Type: application/json" \ -H "Content-Type: application/json" \
-d '{ -d '{
"state": "failure", "state": "failure",
"context": "Docs", "context": "Docs",
"description": "build failed", "description": "build failed",
"target_url": "${{ env.TARGET_URL }}" "target_url": "${{ env.TARGET_URL }}"
}' \ }' \
"${{ github.server_url }}/api/v1/repos/${{ github.repository }}/statuses/${{ github.sha }}" "${{ github.server_url }}/api/v1/repos/${{ github.repository }}/statuses/${{ github.sha }}"
+1 -1
View File
@@ -1,3 +1,3 @@
# Добро пожаловать в Docuservix! # Добро пожаловать в Docuservix!
Вам надо настроить публикацию документации по инструкции в https://git.jt4d.ru/jt4d/docuservix Вам надо настроить публикацию документации по инструкции в https://git.jt4d.ru/jt4d/docuservix
+23 -23
View File
@@ -1,9 +1,12 @@
import fs from 'fs'; import fs from 'fs';
import yaml from 'js-yaml';
import {themes as prismThemes} from 'prism-react-renderer';
import type {Config} from '@docusaurus/types';
import type * as Preset from '@docusaurus/preset-classic'; import type * as Preset from '@docusaurus/preset-classic';
import type {NavbarItem} from '@docusaurus/theme-common' import type { NavbarItem } from '@docusaurus/theme-common';
import type { Config } from '@docusaurus/types';
import yaml from 'js-yaml';
import { themes as prismThemes } from 'prism-react-renderer';
import docuservix from './plugins/docuservix';
interface DocsConfig { interface DocsConfig {
title: string; title: string;
@@ -13,24 +16,17 @@ interface DocsConfig {
const docsConfig = yaml.load(fs.readFileSync('./.docuservix.yml', 'utf8')) as DocsConfig; const docsConfig = yaml.load(fs.readFileSync('./.docuservix.yml', 'utf8')) as DocsConfig;
const { const { title } = docsConfig;
title,
} = docsConfig
const url = process.env.DOCUSERVIX_URL; const url = process.env.DOCUSERVIX_URL || 'http://example.com';
const { const { org, repo } = docsConfig.project;
org,
repo
} = docsConfig.project
const { const { docs: _docsDir = 'docs', blog: blogDir } = docsConfig.dirs || {};
docs: docsDir = 'docs',
blog: blogDir
} = docsConfig.dirs || {}
const giteaUrl = 'https://git.jt4d.ru'; const giteaUrl = 'https://git.jt4d.ru';
const onBrokenLinks = (process.env.DOCUSERVIX_ON_BROKEN_LINKS as Config['onBrokenLinks']) || 'throw'; const onBrokenLinks =
(process.env.DOCUSERVIX_ON_BROKEN_LINKS as Config['onBrokenLinks']) || 'throw';
const config: Config = { const config: Config = {
title, title,
@@ -39,6 +35,7 @@ const config: Config = {
markdown: { markdown: {
mermaid: true, mermaid: true,
}, },
plugins: [docuservix()],
themes: ['@docusaurus/theme-mermaid'], themes: ['@docusaurus/theme-mermaid'],
// Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
@@ -107,11 +104,13 @@ const config: Config = {
label: 'Документация', label: 'Документация',
position: 'left', position: 'left',
}, },
blogDir ? { blogDir
to: '/blog', ? {
label: 'Блог', to: '/blog',
position: 'left' label: 'Блог',
} : undefined, position: 'left',
}
: undefined,
{ {
href: `${giteaUrl}/${org}/${repo}`, href: `${giteaUrl}/${org}/${repo}`,
label: 'Gitea', label: 'Gitea',
@@ -121,7 +120,8 @@ const config: Config = {
}, },
footer: { footer: {
style: 'dark', style: 'dark',
copyright: `Проект хостится на JT4D.ru, документация собрана с использованием Docuservix и Docusaurus.`, copyright:
'Проект хостится на JT4D.ru, документация собрана с использованием Docuservix и Docusaurus.',
}, },
prism: { prism: {
theme: prismThemes.github, theme: prismThemes.github,
+351
View File
@@ -0,0 +1,351 @@
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { fixupPluginRules } from '@eslint/compat';
import { FlatCompat } from '@eslint/eslintrc';
import js from '@eslint/js';
import typescriptEslint from '@typescript-eslint/eslint-plugin';
import tsParser from '@typescript-eslint/parser';
import etc from 'eslint-plugin-etc';
import _import from 'eslint-plugin-import';
import noOnlyTests from 'eslint-plugin-no-only-tests';
import noSkipTests from 'eslint-plugin-no-skip-tests';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import unusedImports from 'eslint-plugin-unused-imports';
import globals from 'globals';
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
});
export default [
{
ignores: [
'**/.eslintrc.js',
'**/node_modules',
'**/coverage',
'**/build',
'**/.docusaurus',
'**/vite.config.*.timestamp*',
'**/vitest.config.*.timestamp*',
],
},
...compat.extends(
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
'prettier',
'plugin:eslint-comments/recommended',
),
{
plugins: {
import: fixupPluginRules(_import),
react,
'react-hooks': fixupPluginRules(reactHooks),
'@typescript-eslint': typescriptEslint,
etc,
'no-only-tests': noOnlyTests,
'no-skip-tests': noSkipTests,
'unused-imports': unusedImports,
},
languageOptions: {
globals: {
...globals.node,
...globals.jest,
},
parser: tsParser,
ecmaVersion: 6,
sourceType: 'module',
parserOptions: {
ecmaFeatures: {
modules: true,
},
},
},
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.ts', '.tsx', '.json'],
},
typescript: {
alwaysTryTypes: true,
},
},
react: {
version: 'detect',
},
},
rules: {
'@typescript-eslint/interface-name-prefix': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
curly: ['error', 'all'],
'max-params': 'off',
'no-console': [
'error',
{
allow: ['warn', 'error'],
},
],
'no-warning-comments': [
'error',
{
terms: ['fixme'],
location: 'anywhere',
},
],
'no-unused-vars': 'off',
'space-before-blocks': 'error',
'padding-line-between-statements': [
'error',
{
blankLine: 'always',
prev: '*',
next: ['break', 'continue', 'return'],
},
{
blankLine: 'always',
prev: ['const', 'let'],
next: '*',
},
{
blankLine: 'any',
prev: ['const', 'let'],
next: ['const', 'let'],
},
{
blankLine: 'always',
prev: 'directive',
next: '*',
},
{
blankLine: 'any',
prev: 'directive',
next: 'directive',
},
{
blankLine: 'always',
prev: 'block-like',
next: '*',
},
{
blankLine: 'always',
prev: '*',
next: 'block-like',
},
],
'import/order': [
'error',
{
pathGroups: [
{
pattern: 'react,bem-css-modules',
group: 'builtin',
position: 'before',
},
{
pattern: '@docuservix/**',
group: 'internal',
},
],
pathGroupsExcludedImportTypes: ['react'],
'newlines-between': 'always',
groups: ['builtin', 'external', 'internal', 'parent', ['sibling', 'index']],
alphabetize: {
order: 'asc',
caseInsensitive: true,
},
},
],
'react/no-direct-mutation-state': 'error',
'react/no-deprecated': 'error',
'react/no-unsafe': 'error',
'react/jsx-uses-vars': 'error',
'react/jsx-uses-react': 'error',
'react/jsx-curly-brace-presence': ['error', 'never'],
'react-hooks/rules-of-hooks': 'error',
'react-hooks/exhaustive-deps': 'warn',
quotes: [
'error',
'single',
{
avoidEscape: true,
},
],
'quote-props': ['warn', 'as-needed'],
'@typescript-eslint/no-explicit-any': [
'warn',
{
ignoreRestArgs: true,
},
],
'@typescript-eslint/member-ordering': [
'error',
{
default: [
'public-static-field',
'protected-static-field',
'private-static-field',
'public-instance-field',
'protected-instance-field',
'private-instance-field',
'constructor',
'public-instance-method',
'protected-instance-method',
'private-instance-method',
'public-static-method',
'protected-static-method',
'private-static-method',
'signature',
],
},
],
'etc/prefer-interface': [
'warn',
{
allowLocal: true,
},
],
'@typescript-eslint/ban-ts-comment': [
'error',
{
'ts-ignore': 'allow-with-description',
'ts-nocheck': 'allow-with-description',
'ts-check': false,
'ts-expect-error': false,
},
],
'@typescript-eslint/no-empty-interface': 'warn',
'@typescript-eslint/no-empty-function': 'warn',
'@typescript-eslint/no-unused-vars': 'off',
// todo изучить и включить
'@typescript-eslint/no-unused-expressions': 'off',
// todo изучить и включить
'@typescript-eslint/no-empty-object-type': 'off',
'no-restricted-imports': [
'error',
{
paths: [
{
name: '@nestjs/swagger',
importNames: ['PartialType'],
message:
"Please import 'PartialType' from '@src/server/common/nest' instead.",
},
{
name: 'react-bootstrap',
importNames: [
'Card',
'CardHeader',
'CardBody',
'CardFooter',
'Row',
'Col',
'Modal',
],
message: "Please use project's components with same name",
},
{
name: 'react-bootstrap/Modal',
message: "Please use project's components with same name",
},
{
name: '@nestjs/common',
importNames: ['Logger'],
message: "Please import 'Logger' from '@src/server/logger' instead.",
},
{
name: 'nestjs-pino',
importNames: ['Logger', 'PinoLogger'],
message: "Please import 'Logger' from '@src/server/logger' instead.",
},
],
},
],
'unused-imports/no-unused-imports': 'error',
'unused-imports/no-unused-vars': [
'error',
{
vars: 'all',
args: 'after-used',
ignoreRestSiblings: true,
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_',
},
],
'eslint-comments/require-description': [
'error',
{
ignore: ['eslint-enable'],
},
],
'eslint-comments/disable-enable-pair': [
'error',
{
allowWholeFile: true,
},
],
complexity: ['warn', 10],
eqeqeq: ['error'],
'func-style': ['warn', 'declaration'],
},
},
{
files: ['**/*.spec.{js,jsx,ts,tsx}'],
rules: {
'no-only-tests/no-only-tests': 'error',
'no-skip-tests/no-skip-tests': 'warn',
'no-console': [
'warn',
{
allow: ['warn', 'error'],
},
],
'@typescript-eslint/no-non-null-assertion': 'off',
},
},
];
+86 -50
View File
@@ -1,52 +1,88 @@
{ {
"name": "docusaurus", "name": "docusaurus",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"scripts": { "scripts": {
"docusaurus": "docusaurus", "build": "docusaurus build",
"start": "docusaurus start", "clear": "docusaurus clear",
"build": "docusaurus build", "deploy": "docusaurus deploy",
"swizzle": "docusaurus swizzle", "docusaurus": "docusaurus",
"deploy": "docusaurus deploy", "eslint:check": "yarn eslint",
"clear": "docusaurus clear", "eslint:fix": "yarn eslint --fix",
"serve": "docusaurus serve", "lint": "run-s eslint:fix prettier:fix",
"write-translations": "docusaurus write-translations", "lint:check": "run-s eslint:check prettier:check",
"write-heading-ids": "docusaurus write-heading-ids", "prepare": "husky",
"typecheck": "tsc" "prettier:check": "prettier --check \"**/*.{ts,tsx,js,mjs,json,yml,yaml,md,mdx}\"",
}, "prettier:fix": "prettier --write \"**/*.{ts,tsx,js,mjs,json,yml,yaml,md,mdx}\"",
"dependencies": { "serve": "docusaurus serve",
"@docusaurus/core": "3.10.1", "start": "docusaurus start",
"@docusaurus/faster": "3.10.1", "swizzle": "docusaurus swizzle",
"@docusaurus/preset-classic": "3.10.1", "typecheck": "tsc",
"@docusaurus/theme-mermaid": "3.10.1", "write-heading-ids": "docusaurus write-heading-ids",
"@mdx-js/react": "^3.0.0", "write-translations": "docusaurus write-translations"
"clsx": "^2.0.0", },
"js-yaml": "^4.2.0", "lint-staged": {
"prism-react-renderer": "^2.3.0", "*.{json,ts,tsx,js,jsx,js,mjs,md,mdx,yaml,yml}": "prettier --write",
"react": "^19.0.0", "{src,e2e}/**/*.{ts,tsx}": "eslint --quiet --fix"
"react-dom": "^19.0.0" },
}, "browserslist": {
"devDependencies": { "production": [
"@docusaurus/module-type-aliases": "3.10.1", ">0.5%",
"@docusaurus/tsconfig": "3.10.1", "not dead",
"@docusaurus/types": "3.10.1", "not op_mini all"
"@types/js-yaml": "^4.0.9", ],
"@types/react": "^19.0.0", "development": [
"typescript": "~6.0.2" "last 3 chrome version",
}, "last 3 firefox version",
"browserslist": { "last 5 safari version"
"production": [ ]
">0.5%", },
"not dead", "dependencies": {
"not op_mini all" "@docusaurus/core": "3.10.1",
], "@docusaurus/faster": "3.10.1",
"development": [ "@docusaurus/preset-classic": "3.10.1",
"last 3 chrome version", "@docusaurus/theme-mermaid": "3.10.1",
"last 3 firefox version", "@mdx-js/react": "^3.0.0",
"last 5 safari version" "bem-css-modules": "^1.4.3",
] "clsx": "^2.0.0",
}, "js-yaml": "^4.2.0",
"engines": { "prism-react-renderer": "^2.3.0",
"node": ">=20.0" "react": "^19.0.0",
} "react-dom": "^19.0.0",
"react-markdown": "^10.1.0",
"remark-gfm": "^4.0.1"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "3.10.1",
"@docusaurus/tsconfig": "3.10.1",
"@docusaurus/types": "3.10.1",
"@eslint/compat": "^1.1.1",
"@eslint/eslintrc": "^3.1.0",
"@eslint/js": "^9.8.0",
"@types/js-yaml": "^4.0.9",
"@types/react": "^19.0.0",
"@typescript-eslint/eslint-plugin": "^8.0.0",
"@typescript-eslint/parser": "^8.0.0",
"eslint": "^9.8.0",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^4.4.5",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-etc": "^2.0.3",
"eslint-plugin-import": "^2.32.0",
"eslint-plugin-no-only-tests": "^3.1.0",
"eslint-plugin-no-skip-tests": "^1.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-unused-imports": "^4.0.1",
"globals": "^17.6.0",
"husky": "^9.1.7",
"lint-staged": "^17.0.7",
"npm-run-all": "^4.1.5",
"prettier": "^3.8.4",
"typescript": "~6.0.2"
},
"engines": {
"node": ">=20.0"
}
} }
@@ -0,0 +1,59 @@
.MD p:last-child {
margin-bottom: 0;
}
.MD p:first-child {
margin-top: 0;
}
.MD code {
padding: 0.15em 0.4em;
border-radius: 4px;
background: var(--ifm-color-emphasis-200);
font-size: 0.85em;
}
.MD pre {
margin: 0.5em 0;
padding: 0.75em;
overflow-x: auto;
border-radius: 6px;
background: var(--ifm-color-emphasis-100);
}
.MD pre code {
padding: 0;
background: none;
}
.MD ul,
.MD ol {
padding-left: 1.5em;
margin: 0.5em 0;
}
.MD table {
width: 100%;
margin: 0.5em 0;
border-collapse: collapse;
font-size: 0.9em;
}
.MD th,
.MD td {
padding: 0.4em 0.75em;
border: 1px solid var(--ifm-color-emphasis-300);
text-align: left;
}
.MD th {
background: var(--ifm-color-emphasis-100);
font-weight: var(--ifm-font-weight-semibold);
}
.MD blockquote {
margin: 0.5em 0;
padding: 0.25em 1em;
border-left: 3px solid var(--ifm-color-emphasis-300);
color: var(--ifm-color-emphasis-700);
}
@@ -0,0 +1,17 @@
import React, { ReactNode } from 'react';
import Markdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import styles from './MD.module.css';
interface MDProps {
children: string;
}
export function MD({ children }: MDProps): ReactNode {
return (
<div className={styles.MD}>
<Markdown remarkPlugins={[remarkGfm]}>{children}</Markdown>
</div>
);
}
@@ -0,0 +1 @@
export { MD } from './MD';
+31
View File
@@ -0,0 +1,31 @@
import path from 'path';
import type { LoadContext, Plugin } from '@docusaurus/types';
export default function docuservix() {
return function pluginDocuservix(_context: LoadContext): Plugin {
return {
name: 'docuservix',
configureWebpack() {
return {
resolve: {
alias: {
'@docuservix': path.resolve(__dirname),
},
},
};
},
async contentLoaded({ actions }) {
const { addRoute } = actions;
addRoute({
path: '/chat',
component: '@docuservix/pages/chat',
exact: true,
});
},
};
};
}
+8
View File
@@ -0,0 +1,8 @@
export interface IChat {
messages: IChatMessage[];
}
export interface IChatMessage {
role: 'user' | 'assistant';
content: string;
}
@@ -0,0 +1,32 @@
import Layout from '@theme/Layout';
import { ReactNode } from 'react';
import { IChat } from '@docuservix/models/chat';
import { Chat } from '@docuservix/widgets/chat';
const dialog: IChat = {
messages: [
{
role: 'user',
content: 'Can you show me some CSS animations? It can be simple tools like chatbots...',
},
{
role: 'assistant',
content: "Hello! I'm your **AI assistant**. How can I help you today?",
},
],
};
export function ChatPage(): ReactNode {
return (
<Layout title="Чат">
<main className="container margin-vert--lg">
<Chat
dialog={dialog}
statusMessage="Unable to connect to the server"
typing
/>
</main>
</Layout>
);
}
+3
View File
@@ -0,0 +1,3 @@
import { ChatPage } from './ChatPage';
export default ChatPage;
@@ -0,0 +1,24 @@
.Chat {
display: flex;
flex-direction: column;
width: 100%;
background: var(--ifm-background-color);
border: 1px solid var(--ifm-color-emphasis-200);
border-radius: var(--ifm-global-radius);
overflow: hidden;
}
.Chat__statusMessage {
font-size: .65rem;
color: #666;
bottom: 0;
left: 0;
right: 0;
padding: .75rem 2.5rem;
background: #eee;
}
.Chat__statusMessage i {
margin-right: .25rem;
color: #667eea;
}
+37
View File
@@ -0,0 +1,37 @@
import block from 'bem-css-modules';
import React, { ReactNode } from 'react';
import { IChat } from '@docuservix/models/chat';
import styles from './Chat.module.css';
import { Header } from './Header';
import { Input } from './Input';
import { Messages } from './Messages';
const b = block(styles, 'Chat');
interface ChatProps {
dialog: IChat;
typing?: boolean;
statusMessage?: string;
onSend?: (text: string) => void;
}
export function Chat({ dialog, typing, statusMessage, onSend }: ChatProps): ReactNode {
const { messages } = dialog;
return (
<div className={b()}>
<Header />
<Messages
messages={messages}
typing={typing}
/>
{statusMessage && <div className={b('statusMessage')}>{statusMessage}</div>}
<Input
disabled={typing}
onSend={onSend}
/>
</div>
);
}
@@ -0,0 +1,32 @@
.Header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--ifm-color-emphasis-200);
}
.Header__avatar {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
flex-shrink: 0;
}
.Header__info h3 {
margin: 0 0 0.25rem;
color: var(--ifm-font-color-base);
font-size: 1.125rem;
}
.Header__info p {
margin: 0;
color: var(--ifm-color-emphasis-600);
font-size: 0.85rem;
}
@@ -0,0 +1,21 @@
import block from 'bem-css-modules';
import React, { ReactNode } from 'react';
import styles from './Header.module.css';
import { RobotIcon } from './icons';
const b = block(styles, 'Header');
export function Header(): ReactNode {
return (
<div className={b()}>
<div className={b('avatar')}>
<RobotIcon />
</div>
<div className={b('info')}>
<h3>AI Assistant</h3>
<p>Ready to help</p>
</div>
</div>
);
}
@@ -0,0 +1,58 @@
.Input {
display: flex;
align-items: flex-end;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-top: 1px solid var(--ifm-color-emphasis-200);
}
.Input__field {
flex: 1;
padding: 0.75rem 1rem;
border: 2px solid var(--ifm-color-emphasis-200);
border-radius: 1.5rem;
font-size: 1rem;
font-family: inherit;
color: var(--ifm-font-color-base);
background: var(--ifm-background-surface-color);
outline: none;
transition: border-color 0.3s;
resize: none;
min-height: 3.25rem;
max-height: 8rem;
field-sizing: content;
}
.Input__field:focus {
border-color: #667eea;
}
.Input__field:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.Input__send {
display: flex;
justify-content: center;
align-items: center;
width: 3.25rem;
height: 3.25rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 50%;
color: white;
font-size: 1.125rem;
cursor: pointer;
flex-shrink: 0;
transition: transform 0.3s;
}
.Input__send:hover:not(:disabled) {
transform: scale(1.1);
}
.Input__send:disabled {
opacity: 0.5;
cursor: not-allowed;
}
+55
View File
@@ -0,0 +1,55 @@
import block from 'bem-css-modules';
import React, { ReactNode, useState } from 'react';
import { PaperPlaneIcon } from './icons';
import styles from './Input.module.css';
const b = block(styles, 'Input');
interface InputProps {
disabled?: boolean;
onSend?: (text: string) => void;
}
export function Input({ disabled, onSend }: InputProps): ReactNode {
const [input, setInput] = useState('');
const handleSend = () => {
const text = input.trim();
if (!text || disabled) {
return;
}
setInput('');
onSend?.(text);
};
const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
handleSend();
}
};
return (
<div className={b()}>
<textarea
className={b('field')}
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Type your message here..."
rows={1}
disabled={disabled}
/>
<button
className={b('send')}
onClick={handleSend}
disabled={disabled || !input.trim()}
>
<PaperPlaneIcon />
</button>
</div>
);
}
@@ -0,0 +1,41 @@
.Message {
max-width: 90%;
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.Message_role_assistant {
align-self: flex-start;
}
.Message_role_user {
align-self: flex-end;
}
.Message__content {
padding: 0.75rem 1rem;
border-radius: 1.25rem;
line-height: 1.5;
}
.Message_role_assistant .Message__content {
background: var(--ifm-color-emphasis-100);
color: var(--ifm-font-color-base);
border-top-left-radius: 0.25rem;
}
.Message_role_user .Message__content {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #fff;
border-bottom-right-radius: 0.25rem;
}
@media (max-width: 576px) {
.Message {
max-width: 100%;
}
}
@@ -0,0 +1,23 @@
import block from 'bem-css-modules';
import React, { ReactNode } from 'react';
import { MD } from '@docuservix/entities/markdown';
import styles from './Message.module.css';
const b = block(styles, 'Message');
interface MessageProps {
role: 'user' | 'assistant';
content: string;
}
export function Message({ role, content }: MessageProps): ReactNode {
return (
<div className={b({ role })}>
<div className={b('content')}>
<MD>{content}</MD>
</div>
</div>
);
}
@@ -0,0 +1,65 @@
.Messages {
flex: 1;
overflow-y: auto;
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Typing indicator */
.Messages__typing {
display: flex;
align-items: center;
align-self: flex-start;
}
.Messages__typingIndicator {
display: flex;
gap: 0.25rem;
padding: 0.75rem 1rem;
background: var(--ifm-color-emphasis-100);
border-radius: 1.25rem;
border-top-left-radius: 0.25rem;
}
.Messages__typingIndicator span {
width: 0.5rem;
height: 0.5rem;
background: var(--ifm-color-emphasis-500);
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out;
}
.Messages__typingIndicator span:nth-child(1) { animation-delay: -0.32s; }
.Messages__typingIndicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce {
0%, 80%, 100% { transform: scale(0); }
40% { transform: scale(1); }
}
/* Scrollbar */
.Messages::-webkit-scrollbar {
width: 6px;
}
.Messages::-webkit-scrollbar-track {
background: transparent;
border-radius: 3px;
}
.Messages::-webkit-scrollbar-thumb {
background: var(--ifm-color-emphasis-300);
border-radius: 3px;
}
.Messages::-webkit-scrollbar-thumb:hover {
background: var(--ifm-color-emphasis-400);
}
@media (min-width: 576px) {
.Messages {
padding: 1.5rem;
}
}
@@ -0,0 +1,38 @@
import block from 'bem-css-modules';
import React, { ReactNode } from 'react';
import { IChatMessage } from '@docuservix/models/chat';
import { Message } from './Message';
import styles from './Messages.module.css';
const b = block(styles, 'Messages');
interface MessagesProps {
messages: IChatMessage[];
typing?: boolean;
}
export function Messages({ messages, typing }: MessagesProps): ReactNode {
return (
<div className={b()}>
{messages.map((msg, i) => (
<Message
key={i}
role={msg.role}
content={msg.content}
/>
))}
{typing && (
<div className={b('typing')}>
<div className={b('typingIndicator')}>
<span></span>
<span></span>
<span></span>
</div>
</div>
)}
</div>
);
}
+30
View File
@@ -0,0 +1,30 @@
import React, { ReactNode } from 'react';
export function RobotIcon(): ReactNode {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M6 12.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5M3 8.062C3 6.76 4.235 5.765 5.53 5.886a26.6 26.6 0 0 0 4.94 0C11.765 5.765 13 6.76 13 8.062v1.157a.93.93 0 0 1-.765.935c-.845.147-2.34.346-4.235.346s-3.39-.2-4.235-.346A.93.93 0 0 1 3 9.219zm4.542-.827a.25.25 0 0 0-.217.068l-.92.9a25 25 0 0 1-1.871-.183.25.25 0 0 0-.068.495c.55.076 1.232.149 2.02.193a.25.25 0 0 0 .189-.071l.754-.736.847 1.71a.25.25 0 0 0 .404.062l.932-.97a25 25 0 0 0 1.922-.188.25.25 0 0 0-.068-.495c-.538.074-1.207.145-1.98.189a.25.25 0 0 0-.166.076l-.754.785-.842-1.7a.25.25 0 0 0-.182-.135" />
<path d="M8.5 1.866a1 1 0 1 0-1 0V3h-2A4.5 4.5 0 0 0 1 7.5V8a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1v-.5A4.5 4.5 0 0 0 10.5 3h-2zM14 7.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7.5A3.5 3.5 0 0 1 5.5 4h5A3.5 3.5 0 0 1 14 7.5" />
</svg>
);
}
export function PaperPlaneIcon(): ReactNode {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="currentColor"
viewBox="0 0 16 16"
>
<path d="M15.964.686a.5.5 0 0 0-.65-.65L.767 5.855H.766l-.452.18a.5.5 0 0 0-.082.887l.41.26.001.002 4.995 3.178 3.178 4.995.002.002.26.41a.5.5 0 0 0 .886-.083zm-1.833 1.89L6.637 10.07l-.215-.338a.5.5 0 0 0-.154-.154l-.338-.215 7.494-7.494 1.178-.471z" />
</svg>
);
}
+1
View File
@@ -0,0 +1 @@
export { Chat } from './Chat';
+26 -14
View File
@@ -1,3 +1,5 @@
/* eslint-disable no-console -- logs required */
import fs from 'fs'; import fs from 'fs';
import path from 'path'; import path from 'path';
@@ -9,23 +11,33 @@ pinIndexToTop();
* Гарантирует наличие sidebar_position: 0 в front matter файла index.md * Гарантирует наличие sidebar_position: 0 в front matter файла index.md
*/ */
function pinIndexToTop() { function pinIndexToTop() {
const indexPath = path.join(docsDir, 'index.md'); const indexPath = path.join(docsDir, 'index.md');
if (!fs.existsSync(indexPath)) return;
let content = fs.readFileSync(indexPath, 'utf8'); if (!fs.existsSync(indexPath)) {
return;
}
if (content.startsWith('---\n')) { let content = fs.readFileSync(indexPath, 'utf8');
const endIdx = content.indexOf('\n---\n', 4);
if (endIdx === -1) return;
const frontMatter = content.slice(4, endIdx); if (content.startsWith('---\n')) {
if (/^sidebar_position\s*:/m.test(frontMatter)) return; const endIdx = content.indexOf('\n---\n', 4);
content = '---\nsidebar_position: 0\n' + frontMatter + '\n---\n' + content.slice(endIdx + 5); if (endIdx === -1) {
} else { return;
content = '---\nsidebar_position: 0\n---\n' + content; }
}
fs.writeFileSync(indexPath, content); const frontMatter = content.slice(4, endIdx);
console.log('prepare-docs: pinned index.md to sidebar top');
if (/^sidebar_position\s*:/m.test(frontMatter)) {
return;
}
content =
'---\nsidebar_position: 0\n' + frontMatter + '\n---\n' + content.slice(endIdx + 5);
} else {
content = '---\nsidebar_position: 0\n---\n' + content;
}
fs.writeFileSync(indexPath, content);
console.log('prepare-docs: pinned index.md to sidebar top');
} }
+36 -29
View File
@@ -1,40 +1,47 @@
import type {ReactNode} from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import Heading from '@theme/Heading'; import Heading from '@theme/Heading';
import Layout from '@theme/Layout';
import clsx from 'clsx';
import type { ReactNode } from 'react';
import styles from './index.module.css'; import styles from './index.module.css';
function HomepageHeader() { function HomepageHeader() {
const {siteConfig} = useDocusaurusContext(); const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx('hero hero--primary', styles.heroBanner)}> return (
<div className="container"> <header className={clsx('hero hero--primary', styles.heroBanner)}>
<Heading as="h1" className="hero__title"> <div className="container">
{siteConfig.title} <Heading
</Heading> as="h1"
<p className="hero__subtitle">{siteConfig.tagline}</p> className="hero__title"
<div className={styles.buttons}> >
<Link {siteConfig.title}
className="button button--secondary button--lg" </Heading>
to="/docs"> <p className="hero__subtitle">{siteConfig.tagline}</p>
Документация <div className={styles.buttons}>
</Link> <Link
</div> className="button button--secondary button--lg"
</div> to="/docs"
</header> >
); Документация
</Link>
</div>
</div>
</header>
);
} }
export default function Home(): ReactNode { export default function Home(): ReactNode {
const {siteConfig} = useDocusaurusContext(); const { siteConfig } = useDocusaurusContext();
return (
<Layout return (
title={`Hello from ${siteConfig.title}`} <Layout
description="Description will go into a meta tag in <head />"> title={`Hello from ${siteConfig.title}`}
<HomepageHeader /> description="Description will go into a meta tag in <head />"
</Layout> >
); <HomepageHeader />
</Layout>
);
} }
+15 -7
View File
@@ -2,11 +2,19 @@
// It is here to improve your IDE experience (type-checking, autocompletion...), // It is here to improve your IDE experience (type-checking, autocompletion...),
// and can also run the package.json "typecheck" script manually. // and can also run the package.json "typecheck" script manually.
{ {
"extends": "@docusaurus/tsconfig", "extends": "@docusaurus/tsconfig",
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": ".",
"ignoreDeprecations": "6.0", "paths": {
"strict": true "@docuservix/*": [
}, "plugins/docuservix/*"
"exclude": [".docusaurus", "build"] ]
},
"ignoreDeprecations": "6.0",
"strict": true
},
"exclude": [
".docusaurus",
"build"
]
} }
+2361 -43
View File
File diff suppressed because it is too large Load Diff