Documentation

Complete guide to using and customizing this Codeforces Solutions website

Introduction

Welcome to the Sdmist Codeforces Solutions documentation. This website is designed to showcase competitive programming solutions in a beautiful, user-friendly interface with support for multiple programming languages, mathematical notation, and custom styling.

This platform is built with modern web technologies and is completely free to use, modify, and distribute. Whether you're a competitive programmer looking to share your solutions or someone learning from others' approaches, this documentation will help you get the most out of the platform.

Getting Started

To get started with this website, you'll need:

  • A GitHub account to host your repository
  • Basic knowledge of JSON for adding problem data
  • Your solution code files in supported languages
  • (Optional) Custom images for personalization

The website uses GitHub Pages for free hosting, making it accessible to anyone without any server costs.

How to Use

Browsing Solutions

The homepage displays all available problems in a clean table format. You can:

  • Search for problems by code or name using the search box
  • Filter problems by rating range (e.g., 800-1200)
  • Navigate through pages if you have more than 100 problems
  • Click "Show Code" to view the full solution with explanation

Problem Pages

Each problem page includes:

  • Problem code and name
  • Difficulty rating
  • A helpful hint to guide your thinking
  • Complete solution code with syntax highlighting
  • Language selector (if multiple solutions available)
  • Time and space complexity analysis
  • Detailed explanation of the approach
  • Navigation to previous/next problems

Adding Your Solutions

Adding a new solution is straightforward and requires only two steps:

Step 1: Add Your Solution File

Place your solution file in the solutions/ directory. Supported file extensions:

  • Python: .py
  • C: .c
  • C++: .cpp
  • Java: .java
  • Kotlin: .kt
  • Rust: .rs
  • Go: .go
  • Iylira: .iyr

Step 2: Update problems.json

Add an entry to problems.json with the following structure:

{
  "code": "1A",
  "name": "Theatre Square",
  "rating": 1000,
  "hint": "Think about ceiling division.",
  "solutions": {
    "python": "solutions/theatre_square.py",
    "cpp": "solutions/theatre_square.cpp"
  },
  "explanation": "We calculate the number of flagstones needed...",
  "timeComplexity": "O(1)",
  "spaceComplexity": "O(1)"
}

Important: Remember to add a comma after the previous entry in the JSON array!

Multi-Language Support

The website automatically detects which programming languages you've provided solutions in. Simply add the language to the solutions object in your JSON entry.

For example, if you have solutions in both Python and C++:

"solutions": {
  "python": "solutions/problem.py",
  "cpp": "solutions/problem.cpp"
}

The language selector will automatically appear on the problem page, allowing visitors to switch between implementations.

Using LaTeX Math

You can include mathematical notation in both hints and explanations using LaTeX syntax.

Inline Math

Use single dollar signs for inline formulas:

The time complexity is $O(n \\log n)$.

Display Math

Use double dollar signs for centered, display-style formulas:

$$\\sum_{i=1}^{n} i = \\frac{n(n+1)}{2}$$

Important Notes

  • In JSON files, escape backslashes: use \\ instead of \
  • Common symbols: \\leq, \\geq, \\neq, \\infty
  • Fractions: \\frac{numerator}{denominator}
  • Ceiling/Floor: \\lceil x \\rceil, \\lfloor x \\rfloor

Customization

Adding Custom Images

Personalize your website with custom images:

  • Header Doodle: images/header-doodle.png (280×280px recommended)
  • Homepage Footer: images/footer-home.png (500×200px landscape)
  • Problem Page Footer: images/footer-problem.png (450×180px landscape)

Supported formats: PNG, JPEG, WebP, GIF

Styling

The website uses CSS custom properties (variables) for easy color customization. Edit style.css to change:

  • Background colors
  • Accent colors
  • Font choices
  • Animation speeds

License & Terms

This website template and all associated code is provided free of charge under the following terms:

  • You are free to use this template for personal or commercial projects
  • You may modify and customize the code as needed
  • You may distribute modified or unmodified versions
  • Attribution is appreciated but not required

Solution Code: All solution codes available on this website are completely free to use and modify for educational purposes. They are provided as-is without any warranty.

Third-Party Libraries: This project uses several open-source libraries:

  • Highlight.js for syntax highlighting
  • MathJax for LaTeX rendering
  • Google Fonts for typography

Contributing

We welcome contributions from the community! Here's how you can help:

Adding Solutions

If you'd like to contribute your own solutions:

  1. Fork the repository
  2. Add your solution files and update problems.json
  3. Submit a pull request with a clear description

Reporting Issues

Found a bug or have a suggestion? Please open an issue on the GitHub repository with:

  • A clear description of the problem or suggestion
  • Steps to reproduce (for bugs)
  • Screenshots if applicable

Code Improvements

Code contributions are welcome! Please ensure your code:

  • Follows the existing style and structure
  • Is well-commented and documented
  • Has been tested across different browsers

Contact & Support

For questions, suggestions, or collaboration opportunities, you can reach out through:

We aim to respond to all inquiries within 48 hours. For urgent matters, please mark your message accordingly.

Acknowledgments

Special thanks to the competitive programming community and all contributors who have helped make this platform better.