{% extends "base.html" %}
{% load static %}
{% load custom_tags %}
{% block title %}
    Contribute to OWASP {% env 'PROJECT_NAME' %}
{% endblock %}
{% block description %}
    Learn how you can contribute to the OWASP {% env 'PROJECT_NAME' %} project, including code contributions, bug reports, documentation, and community engagement.
{% endblock %}
{% block keywords %}
    OWASP, {% env 'PROJECT_NAME' %}, contribute, code contributions, bug reports, documentation, community engagement, security research
{% endblock %}
{% block og_title %}
    Contribute to OWASP {% env 'PROJECT_NAME' %}
{% endblock %}
{% block og_description %}
    Discover the many ways you can contribute to the OWASP {% env 'PROJECT_NAME' %} project and become part of a global community working to improve web security.
{% endblock %}
{% block content %}
    <div class="container mx-auto px-4">
        <!-- Include the left navigation -->
        {% include "includes/sidenav.html" %}
        <!-- Main Content Section -->
        <div class="max-w-8xl mx-auto">
            <section id="contribute-overview" class="text-center my-8">
                <h2 class="text-3xl font-bold mb-4">Contribute to OWASP BLT</h2>
                <p class="text-lg">
                    OWASP BLT thrives on the contributions of its community. Whether you're a developer, security researcher, designer, or just passionate about making the web a safer place, there are many ways you can contribute to the BLT project.
                </p>
            </section>
            <section id="tech-stack" class="my-8">
                <h3 class="text-2xl font-semibold mb-4">Technology Stack</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h4 class="text-xl font-extrabold tracking-tight text-gray-900 mb-4">Front-End</h4>
                        <ul class="space-y-3">
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/react.svg' %}"
                                     alt="React"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="React">
                                <span>React</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/nextjs.svg' %}"
                                     alt="Next.js"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="Next.js">
                                <span>Next.js</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/tailwind.svg' %}"
                                     alt="Tailwind"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="Tailwind CSS">
                                <span>Tailwind CSS</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/html.svg' %}"
                                     alt="HTML/CSS"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="HTML/CSS">
                                <span>HTML/CSS</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h4 class="text-xl font-extrabold tracking-tight text-gray-900 mb-4">Back-End</h4>
                        <ul class="space-y-3">
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/python.svg' %}"
                                     alt="Python"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="Python">
                                <span>Python</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/django.svg' %}"
                                     alt="Django"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="Django">
                                <span>Django</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/django.svg' %}"
                                     alt="Django Ninja"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="Django Ninja">
                                <span>Django Ninja</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/sql.svg' %}"
                                     alt="SQL"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="SQL">
                                <span>SQL</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h4 class="text-xl font-extrabold tracking-tight text-gray-900 mb-4">BLOCKCHAIN</h4>
                        <ul class="space-y-3">
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/bitcoin.svg' %}"
                                     alt="Bitcoin"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="Bitcoin Ordinals">
                                <span>Bitcoin Ordinals</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/solana.svg' %}"
                                     alt="Solana"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="Solana">
                                <span>Solana</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/smartcontracts.svg' %}"
                                     alt="Smart Contracts"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="Smart Contracts">
                                <span>Smart Contracts</span>
                            </li>
                        </ul>
                    </div>
                    <div class="bg-white p-6 rounded-lg shadow">
                        <h4 class="text-xl font-extrabold tracking-tight text-gray-900 mb-4">DEVOPS & AI</h4>
                        <ul class="space-y-3">
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/github.svg' %}"
                                     alt="GitHub"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="GitHub API">
                                <span>GitHub API</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/restapi.svg' %}"
                                     alt="REST API"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="REST API">
                                <span>REST API</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/oauth.svg' %}"
                                     alt="OAuth"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="OAuth">
                                <span>OAuth</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/authentication.svg' %}"
                                     alt="Authentication"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="Authentication">
                                <span>Authentication</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/nlp.svg' %}"
                                     alt="NLP"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="NLP">
                                <span>NLP</span>
                            </li>
                            <li class="flex items-center space-x-2">
                                <img src="{% static 'images/tech/ml.svg' %}"
                                     alt="Machine Learning"
                                     width="200"
                                     height="200"
                                     class="h-8 w-8"
                                     title="Machine Learning">
                                <span>Machine Learning for security analytics</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            <section id="ways-to-contribute" class="my-8">
                <h3 class="text-2xl font-semibold mb-4">Ways to Contribute</h3>
                <ul class="list-disc list-inside space-y-4">
                    <li>
                        <strong>Code Contributions:</strong> Help us develop new features, fix bugs, or improve existing code. Check out our <a href="https://github.com/owasp/blt"
    target="_blank"
    class="text-blue-500 hover:underline">GitHub repository</a> to see open issues and start contributing.
                    </li>
                    <li>
                        <strong>Report Bugs:</strong> Found a bug? Report it through the <a href="{% url 'issues' %}" class="text-blue-500 hover:underline">Bug Reporting Tool</a>. Your input helps us improve the platform.
                    </li>
                    <li>
                        <strong>Documentation:</strong> Contribute to our documentation by improving the existing guides or writing new ones. Great documentation helps everyone understand and use BLT more effectively.
                    </li>
                    <li>
                        <strong>Design and UX:</strong> If you have skills in design or user experience, you can help make BLT more user-friendly and visually appealing.
                    </li>
                    <li>
                        <strong>Security Research:</strong> Perform security testing and contribute to making BLT more secure. You can also participate in <a href="{% url 'issues' %}" class="text-blue-500 hover:underline">private bug bounties</a> for specific security challenges.
                    </li>
                    <li>
                        <strong>Community Engagement:</strong> Engage with the community by answering questions, providing feedback, and sharing your knowledge on our <a href="https://owasp.org/www-project-bug-logging-tool/"
    target="_blank"
    class="text-blue-500 hover:underline">OWASP BLT Wiki</a> and forums.
                    </li>
                </ul>
            </section>
            <section id="getting-started" class="my-8">
                <h3 class="text-2xl font-semibold mb-4">Getting Started</h3>
                <p class="mb-4">Ready to start contributing? Here are a few steps to get you going:</p>
                <ol class="list-decimal list-inside space-y-2">
                    <li>
                        <strong>Join the Community:</strong> Sign up on the OWASP forums and join the conversation.
                    </li>
                    <li>
                        <strong>Clone the Repository:</strong> Clone the BLT repository from GitHub to your local machine.
                    </li>
                    <li>
                        <strong>Pick an Issue:</strong> Browse the <a href="https://github.com/owasp/blt/issues"
    target="_blank"
    class="text-blue-500 hover:underline">open issues</a> and pick one that matches your skills and interests.
                    </li>
                    <li>
                        <strong>Start Coding:</strong> Fork the repository, create a new branch, and start working on your issue.
                    </li>
                    <li>
                        <strong>Submit a Pull Request:</strong> Once you're done, submit a pull request and our maintainers will review it.
                    </li>
                </ol>
            </section>
            <section id="getting-involved" class="my-8">
                <h3 class="text-2xl font-semibold mb-4">Getting Involved</h3>
                <p class="mb-4">
                    You don't have to be a security expert or programmer to contribute! All types of contributions are welcome.
                </p>
                <div class="space-y-4">
                    <div>
                        <h4 class="text-xl font-medium mb-2">Good First Issues</h4>
                        <p>
                            New contributors can start with issues tagged as "good first issue" on our GitHub repository. These are specifically selected to help newcomers get started.
                        </p>
                    </div>
                    <div>
                        <h4 class="text-xl font-medium mb-2">How to Take an Issue</h4>
                        <ul class="list-disc list-inside space-y-2">
                            <li>Find an issue you'd like to work on</li>
                            <li>Use the "Create a branch" button on the right of the issue to link your contribution</li>
                            <li>Comment "assign to me" or type "/assign" to take ownership of the issue</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-xl font-medium mb-2">Community Support</h4>
                        <p>Join our community on the OWASP Slack Channel in the #project-blt channel to:</p>
                        <ul class="list-disc list-inside space-y-2">
                            <li>Ask questions and get help</li>
                            <li>Connect with other contributors</li>
                            <li>Stay updated on project developments</li>
                            <li>Share your ideas and feedback</li>
                        </ul>
                    </div>
                </div>
            </section>
            <section id="good-first-issues" class="my-8">
                <h3 class="text-2xl font-semibold mb-4">Good First Issues for New Contributors</h3>
                <table class="min-w-full table-auto border-collapse border border-gray-300">
                    <thead>
                        <tr>
                            <th class="px-4 py-2 border border-gray-300">Title</th>
                            <!-- Removed Repository column -->
                            <th class="px-4 py-2 border border-gray-300">Time Listed</th>
                            <th class="px-4 py-2 border border-gray-300">Link</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for issue in good_first_issues %}
                            <tr>
                                <td class="px-4 py-2 border border-gray-300">{{ issue.title }}</td>
                                <!-- Removed repository cell -->
                                <td class="px-4 py-2 border border-gray-300">{{ issue.created_at|date:"M d, Y H:i" }}</td>
                                <td class="px-4 py-2 border border-gray-300">
                                    <a href="{{ issue.url }}"
                                       class="text-blue-600 hover:underline"
                                       target="_blank">View Issue</a>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="3" class="px-4 py-2 text-center">No issues found.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </section>
            <section id="contact" class="my-8">
                <h3 class="text-2xl font-semibold mb-4">Coding Style Guide</h3>
                <p class="mb-4">
                    Please follow the <a href="https://github.com/psf/black"
    target="_blank"
    class="text-blue-500 hover:underline">black</a> code style for the project. It helps us in keeping the codebase consistent and improves readability for other developers. Use <code class="bg-gray-100 p-1 rounded">pre-commit run</code> command to make sure your changes comply with the standards.
                </p>
                <ul class="list-disc list-inside space-y-2">
                    <li>To take a GitHub issue, type a comment that says 'assign to me' or '/assign,' and it will be assigned to you.</li>
                    <li>
                        <strong>Figma Designs:</strong>
                        <ul class="list-disc list-inside ml-6 space-y-1">
                            <li>
                                <a href="https://www.figma.com/file/JE0QlQ95FVpk0wG9HyFw4D/BLT-Website?type=design&node-id=0%3A1&t=9aPMxdjUDBIUirAz-1"
                                   target="_blank"
                                   class="text-blue-500 hover:underline">New Tailwind Website Designs</a>
                            </li>
                            <li>
                                <a href="https://www.figma.com/file/NYD5WZzJywnO338lchnece/Bug-Logging-Tool?type=design&node-id=0%3A1&t=k0Hx6qW4Ue9iZvbH-1"
                                   target="_blank"
                                   class="text-blue-500 hover:underline">New Mobile Designs</a>
                            </li>
                            <li>
                                <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design"
                                   target="_blank"
                                   class="text-blue-500 hover:underline">Old Website and Mobile Designs</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        Github activity can be seen in Slack <strong>#blt-github</strong>.
                    </li>
                    <li>
                        Communicate with us on slack <strong>#project-blt</strong> <a href="#" target="_blank" class="text-blue-500 hover:underline">Join OWASP Slack Channel</a>
                    </li>
                </ul>
                <h3 class="text-2xl font-semibold mt-8 mb-4">Development</h3>
                <p class="mb-4">
                    Make sure to run <code class="bg-gray-100 p-1 rounded">pre-commit</code> before committing so it formats the code.
                </p>
                <h4 class="text-xl font-semibold mb-2">Setting Up Development Server</h4>
                <p class="mb-4">
                    Please follow the development server setup procedure <a href="https://github.com/OWASP/BLT/blob/main/Setup.md"
    target="_blank"
    class="text-blue-500 hover:underline">here</a>. Currently, development server can be installed using Docker or Vagrant. You can also use virtualenv or pipenv install, pipenv shell, and then continue with the remaining instructions.
                </p>
                <h4 class="text-xl font-semibold mb-2">Documentation</h4>
                <ul class="list-disc list-inside space-y-2">
                    <li>
                        Use the <a href="https://github.com/OWASP/BLT/blob/main/Setup.md"
    target="_blank"
    class="text-blue-500 hover:underline">Installation Docs</a> to get started.
                    </li>
                    <li>
                        Swagger API Documentations can be found at the root domain <code class="bg-gray-100 p-1 rounded">/swagger/</code>.
                    </li>
                    <li>
                        Postman API Documentations: <a href="https://documenter.getpostman.com/view/19782933/VUqpscyV"
    target="_blank"
    class="text-blue-500 hover:underline">Postman Docs</a>.
                    </li>
                </ul>
            </section>
        </div>
    </div>
{% endblock content %}