How to Edit Documentation

Anyone can help improve ArtGeneration.me documentation! It's easier than you think. Here you'll find step-by-step instructions for beginners.

Why Contribute?

You noticed an error or typo
Description is outdated after a service update
You want to add useful information
You can explain a feature better

Your contribution will help thousands of other users!

Method 1: Browser Editing (Easiest)

This method requires no software installation. Everything is done in your browser.

Step 1: Find the Page to Edit

Open the documentation page you want to fix
Scroll to the bottom of the page
Click the "Edit on GitHub" link

If you don't have a GitHub account:

Go to github.com
Click Sign up
Enter your email, create a password and username
Confirm your email

If you have an account — just sign in.

Step 3: Edit the File

GitHub will show the page text in an editor
Find the place you want to change
Make your edits directly in the text

Step 4: Save Your Changes

Scroll down to the "Commit changes" section
In the "Commit message" field, briefly describe what you changed
- For example: "Fixed typo in generator section"
Click the green "Propose changes" button

Step 5: Create a Pull Request

On the next page, click "Create pull request"
Review the description and click "Create pull request" again
Done! Your changes have been submitted for review

After moderator review, changes will appear on the site.

Method 2: Local Editing (Advanced)

This method gives more control and is convenient for large changes.

Requirements

Git installed
Node.js installed (version 18 or higher)
Text editor (VS Code recommended)

Step 1: Clone the Repository

git clone https://github.com/timoncool/artgen_docs.git
cd artgen_docs

Step 2: Install Dependencies

npm install

Step 3: Start Local Server

npm run dev

Open in browser: http://localhost:3000

Step 4: Edit Files

Documentation files are in the pages/ folder:

pages/ru/ — Russian version
pages/en/ — English version

Changes automatically appear in the browser when you save a file.

Step 5: Create a Pull Request

git checkout -b my-changes
git add .
git commit -m "Description of changes"
git push origin my-changes

Then open GitHub and create a Pull Request.

File Format (MDX)

Documentation is written in MDX format — Markdown with React component support.

Basic Elements

# First Level Heading

## Second Level Heading

### Third Level Heading

Regular paragraph text. You can use **bold text**
and *italics*.

- List item
- Another item
- And another

1. Numbered list
2. Second item
3. Third item

[Link text](https://example.com)

`/assets/docs-pages/screens/example.png`

Highlighting Important Information

> This is a quote or important note

**Important:** This is highlighted text.

Code

Use backticks for code:

Inline code: `npm install`

Code block:
\`\`\`bash
npm install
npm run dev
\`\`\`

Adding Images

Screenshots and images make documentation much clearer. Don't hesitate to add them to descriptions!

Step 1: Prepare the Image

Format: PNG or WebP
Recommended width: 800-1200 pixels
Always compress images using TinyPNG — it's free and reduces file size by 2-3x without quality loss. Just drag the file onto the site and download the optimized version.

Step 2: Name the File Properly

File names should be lowercase Latin characters, separated by hyphens:

generator-logo-templates.png — correct
Screenshot 2026.png — incorrect
IMG_1234.png — incorrect

The name should briefly describe the image content.

Step 3: Upload to the Right Folder

Where to place images depends on the section:

Documentation screenshots → .static-assets-src/public/assets/docs-pages/screens/
Guide images → .static-assets-src/public/assets/docs-pages/guide/
News images → .static-assets-src/public/assets/docs-pages/blog/

After adding an image, update the manifest and upload the file to CDN:

python3 scripts/static-assets/sync-static-assets.py \
  --source-dir .static-assets-src/public \
  --manifest src/01-shared/static-assets/static-assets-manifest.json \
  --upload \
  --write-manifest

Step 4: Add to Documentation

Insert the image in the right place in the text:

![Brief image description](/assets/docs-pages/screens/filename.png)

The text in square brackets is the image description — it should be meaningful.

Documentation Structure

pages/
├── ru/                      # Russian version
│   ├── docs/                # User guide
│   │   ├── generator/       # Image generator
│   │   ├── gallery/         # Gallery
│   │   ├── editor/          # Editor
│   │   └── ...
│   ├── news/                # News (auto-loaded from folder)
│   │   ├── index.jsx        # News feed
│   │   ├── 2026-01-15-....mdx
│   │   └── ...
│   └── about-docs/          # Documentation work
│       ├── contributing.mdx # This page
│       └── contributors.mdx # Contributors
└── en/                      # English version (same structure)