פיתוח אתר תיעוד Docusaurus

פיתוח אתר תיעוד Docusaurus

התיעוד של הפרויקט שלך גדל, ומפתחים מבלים שעות בחיפוש אחר המידע הנכון? אנו בונים פורטל תיעוד אחד על Docusaurus — מסגרת React מבית Meta. היא מייצרת דפי HTML מהירים מ-Markdown/MDX, תומכת בגרסאות, בריבוי שפות ובחיפוש טקסט מלא. הניסיון שלנו: מעל 30 פרויקטים מוצלחים לסטארטאפים ולחברות ארגוניות. עם ניסיון של למעלה מ-5 שנים באתרי תיעוד, אנו מבטיחים איכות ועמידה בלוחות זמנים. הלקוחות שלנו חוסכים בממוצע 5,000 דולר בשנה על ידי צמצום זמן המפתחים המושקע בתיעוד.

בניגוד ל-Confluence או Google Docs, מסגרת זו מעניקה לך שליטה מלאה על המבנה והעיצוב. ניהול גרסאות מובנה: כל גרסת API נשמרת בתיקייה נפרדת, והמשתמשים לא מתבלבלים. i18n — מתג שפה מתווסף עם כמה שורות קונפיגורציה. וחיפוש Algolia מוצא תוצאות גם עם שגיאות כתיב. יכולות אלה חוסכות שעות לצוות שלך. הזמינו פיתוח אתר תיעוד — קבלו משאב אמין שגדל עם המוצר שלכם.

אנחנו לא רק מתקינים תבנית — אנו מנתחים את התיעוד שלך, מתכננים ניווט וכותבים רכיבי MDX מותאמים אישית לצרכים שלך. לדוגמה, עבור סטארטאפ פינטק פרסנו 3 גרסאות API ברוסית ובאנגלית, עם Algolia ו-CI/CD תוך 10 ימים. תוצאה: LCP < 1.5 שניות, זמן חיפוש < 200 אלפיות השנייה.

למה Docusaurus?

השוואה עם חלופות

בבדיקות שלנו, Docusaurus משיג 95-100 ב-Lighthouse, ומקדים את VuePress ב-5% ואת MkDocs ב-10% בממוצע.

בעיות שנפתרות

• ניהול גרסאות. כאשר ל-API יש שלוש גרסאות פעילות ותיעוד משותף, בלבול הוא בלתי נמנע. Docusaurus מאפשר לאחסן תיעוד לכל גרסה בתיקייה נפרדת, והניווט מחליף גרסאות אוטומטית. עזרנו לסטארטאפ פינטק לפרוס תיעוד ל-3 גרסאות API תוך 4 ימים.
• חיפוש. חיפוש ברירת המחדל בתיעוד לעיתים קרובות לא מוצא את מה שצריך. אנו משלבים Algolia DocSearch: אינדוקס אוטומטי, החיפוש מטפל במילים נרדפות, שגיאות כתיב ומדרג תוצאות. משתמשים מוצאים תשובות תוך שניות.
• התאמה אישית. רכיבים סטנדרטיים לפעמים לא מספיקים. MDX מאפשר לכתוב רכיבי React ישירות בתיעוד. אנו יוצרים טאבים לשפות תכנות, דוגמאות אינטראקטיביות, הדגמות מוטמעות. עבור לקוח EdTech, בנינו רכיב "דוגמת קוד חיה" שרץ בדפדפן.
• ריבוי שפות. תיעוד ברוסית ובאנגלית הוא סטנדרט. Docusaurus תומך ב-i18n ישירות מהקופסה: פשוט הוסיפו תיקיות שפה. אנו מגדירים את מתג השפה, כתובות URL וסנכרון תרגום אוטומטי.

התהליך והתמחור שלנו

לוחות זמנים אופייניים לפיתוח

לוחות הזמנים תלויים בהיקף: מ-5 ימים (עד 20 עמודים, ללא התאמה אישית) ועד 15 ימים (50+ עמודים, רכיבים מורכבים, גרסאות מרובות). עלות פיתוח אתר תיעוד מתחילה ב-1,500 דולר עבור עד 20 עמודים. העלות מחושבת באופן אישי — נבחן את הפרויקט שלך ונספק לוחות זמנים.

שלבי הפיתוח

מה כלול

• מאגר קוד מקור (Docusaurus עם קונפיגורציה)
• תיעוד על מבנה והתקנה
• הדרכה למנהלי תוכן (עבודה עם MDX, פרסום גרסאות)
• שבועיים של תמיכה לאחר ההשקה

דוגמאות קוד

אתחול

npx create-docusaurus@latest my-docs classic --typescript cd my-docs npm run start 

מבנה הפרויקט

my-docs/
├── docusaurus.config.ts # основной конфиг
├── sidebars.ts # конфиг sidebar
├── docs/ # документация
│   ├── intro.md
│   ├── getting-started/
│   │   ├── installation.md
│   │   └── configuration.md
│   └── api/
│       └── reference.md
├── blog/ # блог (опционально)
├── src/
│   ├── components/
│   ├── css/custom.css
│   └── pages/ # кастомные страницы (React)
└── static/ # статические файлы

docusaurus.config.ts (דוגמה)

import type { Config } from '@docusaurus/types';
import type * as Preset from '@docusaurus/preset-classic';

const config: Config = {
  title: 'My Project',
  tagline: 'Simple and fast',
  url: 'https://docs.myproject.com',
  baseUrl: '/',
  onBrokenLinks: 'throw',
  onBrokenMarkdownLinks: 'warn',
  i18n: {
    defaultLocale: 'ru',
    locales: ['ru', 'en'],
  },
  presets: [
    [
      'classic',
      {
        docs: {
          sidebarPath: './sidebars.ts',
          editUrl: 'https://github.com/my-org/my-docs/tree/main/',
          showLastUpdateTime: true,
          showLastUpdateAuthor: true,
        },
        theme: {
          customCss: './src/css/custom.css',
        },
      } satisfies Preset.Options,
    ],
  ],
  themeConfig: {
    algolia: {
      appId: 'YOUR_APP_ID',
      apiKey: 'YOUR_SEARCH_KEY',
      indexName: 'my-project-docs',
    },
    navbar: {
      title: 'My Project',
      items: [
        {
          type: 'docSidebar',
          sidebarId: 'tutorialSidebar',
          label: 'Docs',
        },
        {
          type: 'docsVersionDropdown',
        },
        {
          type: 'localeDropdown',
        },
      ],
    },
  } satisfies Preset.ThemeConfig,
};

export default config;

רכיבי MDX (דוגמה)

---
title: API Reference
description: Complete API reference for My Project
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import CodeBlock from '@theme/CodeBlock';

# API Reference

<Tabs>
  <TabItem value="curl" label="cURL">

```bash
curl -X POST https://api.myproject.com/v1/users \
  -H "Authorization: Bearer TOKEN" \
  -d '{"name": "John"}'
```

  </TabItem>
  <TabItem value="js" label="JavaScript">

```typescript
const user = await client.users.create({ name: 'John' });
```

  </TabItem>
</Tabs>