textmode.js

Appearance

Quick Actions

Open in ChatGPTOpen in ClaudeOpen in Perplexity

Getting started ​

Ready to contribute to textmode.js documentation? This guide will help you set up your local development environment.

Prerequisites ​

Before you begin, make sure you have:

  • Node.js - Version 18 or higher recommended
  • npm - Comes with Node.js
  • Git - For version control
  • A code editor - VS Code, Sublime Text, or your favorite editor
  • A GitHub account - For submitting contributions

Setup steps ​

1. Fork the repository ​

Visit the code.textmode.art repository and click the Fork button in the top-right corner.

2. Clone your fork ​

bash
# Replace YOUR-USERNAME with your GitHub username
git clone https://github.com/YOUR-USERNAME/code.textmode.art.git
cd code.textmode.art

3. Install dependencies ​

bash
npm install

This will install VitePress and all required dependencies.

4. Start the development server ​

bash
npm run dev

The documentation site will be available at http://localhost:4175. The dev server supports hot reload - your changes will appear instantly!

5. Create a branch ​

Always create a new branch for your changes:

bash
# Use a descriptive branch name
git checkout -b add-font-ursafont
# or
git checkout -b fix-typo-fundamentals
# or
git checkout -b improve-animation-examples

Project structure ​

Understanding the project layout helps you find what you need:

.vitepress/
├── config.mts          # VitePress configuration
├── data/
│   ├── fonts.json      # Font showcase data
│   ├── sketches.json   # Example sketch metadata
│   └── contributors.json # Contributors list
└── theme/              # Custom theme components

docs/                   # Documentation pages (you'll mostly edit here)
├── examples/           # Example pages with interactive demos
├── contributing/       # Contributing guides
└── *.md                # Core documentation pages

api/                    # Auto-generated API reference
blog/                   # Blog posts
public/                 # Static assets (fonts, images, SVGs)

Key files ​

Making changes ​

Editing documentation ​

Documentation files are in the docs/ folder. They use Markdown format (.md files):

markdown
---
title: Page Title
---

# Heading

Your content here...

Testing your changes ​

As you edit files, the dev server will automatically reload. Check your changes at http://localhost:4175.

Building the site ​

Before submitting, verify the site builds without errors:

bash
npm run build

If the build succeeds, you're ready to submit!

Submitting your contribution ​

1. Commit your changes ​

bash
# Stage your changes
git add .

# Commit with a clear message
git commit -m "Add Ursafont to font showcase"

Write clear commit messages that describe what you changed and why.

2. Push to your fork ​

bash
# Push your branch to GitHub
git push origin your-branch-name

3. Create a pull request ​

  1. Visit your fork on GitHub
  2. Click "Pull request" or "Compare & pull request"
  3. Provide a clear title and description
  4. Click "Create pull request"

Pull request guidelines ​

When submitting a pull request:

  • One feature per PR - Keep changes focused
  • Clear description - Explain what you changed and why
  • Test locally - Make sure the site builds
  • Follow existing style - Match the formatting of surrounding code
  • Be patient - Maintainers will review your PR as soon as possible

Getting credit ​

To be credited as a contributor, add or update your entry in .vitepress/data/contributors.json:

json
{
  "name": "Your Name",
  "github": "your-username",
  "twitter": "your-handle",
  "website": "https://your-site.com",
  "contributions": ["docs", "fonts", "examples"]
}

You'll appear on the Contributors page when your PR is merged!

Tips for success ​

  • Start small - Fix a typo or improve a single paragraph first
  • Ask questions - Open an issue or ask in Discord if you're unsure
  • Read existing docs - Match the style and tone of existing content
  • Be responsive - Reply to feedback on your pull request
  • Have fun! - Contributing should be enjoyable

Common tasks ​

Adding a font ​

  1. Add entry to .vitepress/data/fonts.json
  2. (Optional) Add preview image to public/font_previews/
  3. Submit pull request

Adding a sketch ​

  1. Add entry to .vitepress/data/sketches.json
  2. Test the sketch works correctly
  3. Submit pull request

Fixing a typo ​

  1. Find the file in docs/
  2. Make the correction
  3. Submit pull request

Need help? ​

Thank you for contributing to textmode.js! 🚀