diff options
Diffstat (limited to 'pydis_site/templates')
21 files changed, 655 insertions, 170 deletions
diff --git a/pydis_site/templates/base/base.html b/pydis_site/templates/base/base.html index 906fc577..b7322f12 100644 --- a/pydis_site/templates/base/base.html +++ b/pydis_site/templates/base/base.html @@ -24,10 +24,7 @@ <title>Python Discord | {% block title %}Website{% endblock %}</title> {% bulma %} - - {# Font-awesome here is defined explicitly so that we can have Pro #} - <script src="https://kit.fontawesome.com/ae6a3152d8.js"></script> - + {% font_awesome %} <link rel="stylesheet" href="{% static "css/base/base.css" %}"> {% block head %}{% endblock %} diff --git a/pydis_site/templates/base/footer.html b/pydis_site/templates/base/footer.html index bca43b5d..0bc93578 100644 --- a/pydis_site/templates/base/footer.html +++ b/pydis_site/templates/base/footer.html @@ -1,7 +1,7 @@ <footer class="footer has-background-dark has-text-light"> <div class="content has-text-centered"> <p> - Powered by <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085"><span id="linode-logo">Linode</span></a><br>Built with <a href="https://www.djangoproject.com/"><span id="django-logo">django</span></a> and <a href="https://bulma.io"><span id="bulma-logo">Bulma</span></a> <br/> © {% now "Y" %} <span id="pydis-text">Python Discord</span> + Powered by <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085"><span id="linode-logo">Linode</span></a> and <a href="https://www.netcup.eu/"><span id="netcup-logo">netcup</span></a><br>Built with <a href="https://www.djangoproject.com/"><span id="django-logo">django</span></a> and <a href="https://bulma.io"><span id="bulma-logo">Bulma</span></a> <br/> © {% now "Y" %} <span id="pydis-text">Python Discord</span> </p> </div> </footer> diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 4b68dd6c..d7fb4f4c 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -67,9 +67,6 @@ <a class="navbar-item" href="{% url "resources:index" %}"> Resources </a> - <a class="navbar-item" href="{% url "resources:resources" category="tools" %}"> - Tools - </a> <a class="navbar-item" href="{% url "events:index" %}"> Events </a> @@ -79,6 +76,9 @@ <a class="navbar-item" href="{% url "content:page_category" location="frequently-asked-questions" %}"> FAQ </a> + <a class="navbar-item" href="{% url "content:page_category" location="guides" %}"> + Guides + </a> <a class="navbar-item" href="{% url 'home:timeline' %}"> Timeline </a> diff --git a/pydis_site/templates/content/base.html b/pydis_site/templates/content/base.html index 00f4fce4..4a19a275 100644 --- a/pydis_site/templates/content/base.html +++ b/pydis_site/templates/content/base.html @@ -7,7 +7,8 @@ <meta property="og:type" content="website" /> <meta property="og:description" content="{{ page_description }}" /> <link rel="stylesheet" href="{% static "css/content/page.css" %}"> - <script src="{% static "js/content/page.js" %}"></script> + <link rel="stylesheet" href="{% static "css/collapsibles.css" %}"> + <script src="{% static "js/collapsibles.js" %}"></script> {% endblock %} {% block content %} diff --git a/pydis_site/templates/content/dropdown.html b/pydis_site/templates/content/dropdown.html index d81e29dc..13c89c68 100644 --- a/pydis_site/templates/content/dropdown.html +++ b/pydis_site/templates/content/dropdown.html @@ -1,4 +1,4 @@ -<div class="dropdown is-pulled-right is-right" id="dropdown"> +<div class="dropdown is-pulled-right is-right" id="dropdown" style="z-index: 1"> <div class="dropdown-trigger"> <a aria-haspopup="true" aria-controls="subarticle-menu"> <span>Sub-Articles</span> diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html index 158ec56b..db3e32f7 100644 --- a/pydis_site/templates/events/index.html +++ b/pydis_site/templates/events/index.html @@ -8,8 +8,11 @@ {% block event_content %} <div class="box"> - <h2 class="title is-4">Code Jams</h2> - <p>Each year, we organize at least one code jam, one during the summer and sometimes one during the winter. During these events, members of our community will work together in teams to create something amazing using a technology we picked for them. One such technology that was picked for the Summer 2021 Code Jam was text user interfaces (TUIS), where teams could pick from a pre-approved list of frameworks.</p> + <h2 class="title is-4"><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></h2> + <div class="notification is-success"> + The <b>2022 Summer Code Jam</b> is currently underway and you can still enter! <b>The qualifier is open until July 13</b>; check out the details <a href="{% url "events:page" path="code-jams/9" %}">here</a>. + </div> + <p>Every year we hold a community-wide Summer Code Jam. For this event, members of our community are assigned to teams to collaborate and create something amazing using a technology we picked for them. One such technology that was picked for the Summer 2021 Code Jam was text user interfaces (TUIs), where teams could pick from a pre-approved list of frameworks.</p> <p>To help fuel the creative process, we provide a specific theme, like <strong>Think Inside the Box</strong> or <strong>Early Internet</strong>. At the end of the Code Jam, the projects are judged by Python Discord server staff members and guest judges from the larger Python community. The judges will consider creativity, code quality, teamwork, and adherence to the theme.</p> <p>If you want to read more about Code Jams, visit our <a href="{% url "events:page" path="code-jams" %}">Code Jam info page</a> or watch this video showcasing the best projects created during the <strong>Winter Code Jam 2020: Ancient Technology</strong>:</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe> diff --git a/pydis_site/templates/events/pages/code-jams/9/_index.html b/pydis_site/templates/events/pages/code-jams/9/_index.html new file mode 100644 index 00000000..7c57b799 --- /dev/null +++ b/pydis_site/templates/events/pages/code-jams/9/_index.html @@ -0,0 +1,117 @@ +{% extends "events/base_sidebar.html" %} + +{% load static %} + +{% block title %}Summer Code Jam 2022{% endblock %} + +{% block breadcrumb %} + <li><a href="{% url "events:index" %}">Events</a></li> + <li><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></li> + <li class="is-active"><a href="#">Summer Code Jam 2022</a></li> +{% endblock %} + +{% block event_content %} + <p>Once a year we host a code jam for members of our server to participate in. The code jam is an event where we place you + in a team with 5 other random server members. You then have 11 days to code some sort of application or program in Python. + Your program must use the specified technology/framework and incorporate the theme chosen by the server. + </p> + <p> + After the 11 days are complete, your team has 4 days to finish documentation and create a video presentation showcasing + and walking through the program that your team has created. More details and specifics of this will be released within the next 2 weeks. + </p> + + <h3 id="important-dates"><a href="#important-dates">Important Dates</a></h3> + <ul> + <li><strike>Saturday, June 18 - Form to submit theme suggestions opens</strike></li> + <li><strike>Wednesday, June 29 - The Qualifier is released</strike></li> + <li>Wednesday, July 6 - Voting for the theme opens</li> + <li>Wednesday, July 13 - The Qualifier closes</li> + <li>Thursday, July 21 - Code Jam Begins</li> + <li>Sunday, July 31 - Coding portion of the jam ends</li> + <li>Sunday, August 4 - Code Jam submissions are closed</li> + </ul> + <h3 id="how-to-join"><a href="#how-to-join">How to Join</a></h3> + <p> + Before being able to join the code jam, you must complete a qualifier which tests your knowledge in Python. + The qualifier can be found <a href="https://github.com/python-discord/code-jam-qualifier-9/" title="Code Jam 9 qualifier repository" target="_blank" rel="noopener">on our GitHub</a> + and once completed you should submit your solution using the <a href="https://forms.pythondiscord.com/form/cj9-qualifier" target="_blank" rel="noopener">sign-up form</a>. + </p> + <h3 id="technology"><a href="#technology">Technology</a></h3> + <p> + The chosen technology/tech stack for this year is <strong>WebSockets</strong>. + Each team must make use of <a href="{% url "events:page" path="code-jams/9/frameworks" %}">the approved frameworks</a> to create a WebSockets-based app. + For more information of websockets, check out <a href="https://en.wikipedia.org/wiki/WebSocket" target="_blank" rel="noopener">this wikipedia article</a>. + </p> + + <h3 id="prizes"><a href="#prizes">Prizes</a></h3> + <p> + Our Code Jam Sponsors have provided prizes for the winners of the code jam. + Also, thanks to our Patreon patrons supporting this server, we are able to send members of the winning teams + Python Discord t-shirts and possibly other goodies. + </p> + + <div class="card mb-4"> + <div class="card-content"> + <div class="media"> + <div class="media-left" style="max-width:150px"> + <img src="{% static "images/events/DO_Logo_Vertical_Blue.png" %}" alt="Digital Ocean"> + </div> + <div class="media-content"> + <p class="subtitle has-link"><a href="https://www.digitalocean.com/" target="_blank" rel="noopener">DigitalOcean</a></p> + <p class="is-italic"> + Scalable compute platform with add-on storage, security, and monitoring capabilities. + We make it simple to launch in the cloud and scale up as you grow—whether you’re running one virtual machine or ten thousand. + </p> + <p><strong>Prizes</strong><br> + DigitalOcean credits to the members of a winning team.</p> + </div> + </div> + </div> + </div> + + <div class="card mb-4"> + <div class="card-content"> + <div class="media"> + <div class="media-left" style="max-width:150px"> + <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains"> + </div> + <div class="media-content"> + <p class="subtitle has-link"><a href="https://www.jetbrains.com/" target="_blank" rel="noopener">JetBrains</a></p> + <p class="is-italic"> + Whatever platform or language you work with, JetBrains has a development tool for you. + We help developers work faster by automating common, repetitive tasks to enable them to stay focused on code design and the big picture. + We provide tools to explore and familiarize with code bases faster. Our products make it easy for you to take care of quality during all stages of development and spend less time on maintenance tasks. + </p> + <p><strong>Prizes</strong><br> + 1-year JetBrain licenses to the members of a winning team.</p> + </div> + </div> + </div> + </div> + + <div class="card mb"> + <div class="card-content"> + <div class="media"> + <div class="media-left" style="max-width:150px"> + <img src="{% static "images/events/Replit.png" %}" alt="Replit"> + </div> + <div class="media-content"> + <p class="subtitle has-link"><a href="https://www.replit.com" target="_blank" rel="noopener">Replit</a></p> + <p class="is-italic">Start coding instantly, right from your browser. + With GitHub integration and support for nearly every major programming language, Replit is the best place to code. + Our mission is to bring the next billion software creators online. + We build powerful, simple tools and platforms for learners, educators, and developers. + </p> + <p><strong>Prizes</strong><br> + Three months of the Replit hacker plan to the members of a winning team.</p> + </div> + </div> + </div> + </div> +{% endblock %} + +{% block sidebar %} + + {% include "events/sidebar/code-jams/9.html" %} + +{% endblock %} diff --git a/pydis_site/templates/events/pages/code-jams/9/frameworks.html b/pydis_site/templates/events/pages/code-jams/9/frameworks.html new file mode 100644 index 00000000..355bf9c3 --- /dev/null +++ b/pydis_site/templates/events/pages/code-jams/9/frameworks.html @@ -0,0 +1,148 @@ +{% extends "events/base_sidebar.html" %} + +{% load static %} + +{% block title %}Summer Code Jam 2022{% endblock %} + +{% block breadcrumb %} + <li><a href="{% url "events:index" %}">Events</a></li> + <li><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></li> + <li><a href="{% url "events:page" path="code-jams/9" %}">Summer Code Jam 2022</a></li> + <li class="is-active"><a href="#">Approved Frameworks</a></li> +{% endblock %} + +{% block event_content %} + <p>Below is the list of approved frameworks that you can use for the code jam. + Please work with your team to choose a library that everyone can and want to develop with. + If there is a library not listed below that you think should be here, you're welcome to discuss it with the Events Team over at <a href="https://discord.gg/HnGd3znxhJ">the server</a>. + </p> + + <div class="notification is-info is-light"> + <p>Most of the below frameworks implement what is called the ASGI Specification. + This specification documents how the frameworks should interact with ASGI servers. + You are also allowed to <strong>work with the ASGI specification directly</strong> without a framework, if your team so chooses to. + Refer to the <a href="https://asgi.readthedocs.io/en/latest/">specification online</a>. + </p> + </div> + + <h3 id="approved-frameworks"><a href="#approved-frameworks">Approved Frameworks</a></h3> + + <div class="card mb-4"> + <div class="card-content"> + <div class="content"> + <p class="subtitle">FastAPI</p> + <p>FastAPI is a modern web framework great for WebSockets based on standard Python type hints which provides great editor support.</p> + </div> + </div> + <div class="card-footer"> + <a href="https://fastapi.tiangolo.com/advanced/websockets" class="card-footer-item"><i class="fas fa-book"></i> Documentation</a> + <a href="https://github.com/tiangolo/fastapi" class="card-footer-item"><i class="fab fa-github"></i> GitHub</a> + </div> + </div> + + <div class="card mb-4"> + <div class="card-content"> + <div class="content"> + <p class="subtitle">Starlette</p> + <p>Starlette is a lightweight ASGI framework/toolkit, which is ideal for building async web services in Python. + </p> + </div> + </div> + <div class="card-footer"> + <a href="https://www.starlette.io/websockets" class="card-footer-item"><i class="fas fa-book"></i> Documentation</a> + <a href="https://github.com/encode/starlette" class="card-footer-item"><i class="fab fa-github"></i> GitHub</a> + </div> + </div> + + <div class="card mb-4"> + <div class="card-content"> + <div class="content"> + <p class="subtitle">websockets</p> + <p>websockets is a library for building both WebSocket clients and servers with focus on simplicity and performance. + </p> + </div> + </div> + <div class="card-footer"> + <a href="https://websockets.readthedocs.io/en/stable" class="card-footer-item"><i class="fas fa-book"></i> Documentation</a> + <a href="https://github.com/aaugustin/websockets" class="card-footer-item"><i class="fab fa-github"></i> GitHub</a> + </div> + </div> + + <div class="card mb-4"> + <div class="card-content"> + <div class="content"> + <p class="subtitle">Django Channels</p> + <p>Django Channels adds WebSocket-support to Django - built on ASGI like other web frameworks. + </p> + </div> + </div> + <div class="card-footer"> + <a href="https://channels.readthedocs.io/en/stable" class="card-footer-item"><i class="fas fa-book"></i> Documentation</a> + <a href="https://github.com/django/channels" class="card-footer-item"><i class="fab fa-github"></i> GitHub</a> + </div> + </div> + + <div class="card mb-4"> + <div class="card-content"> + <div class="content"> + <p class="subtitle">Flask-SocketIO</p> + <p>Flask-SocketIO gives Flask applications access to low latency bi-directional communications between the clients and the server. + </p> + </div> + </div> + <div class="card-footer"> + <a href="https://flask-socketio.readthedocs.io/en/latest" class="card-footer-item"><i class="fas fa-book"></i> Documentation</a> + <a href="https://github.com/miguelgrinberg/flask-socketio" class="card-footer-item"><i class="fab fa-github"></i> GitHub</a> + </div> + </div> + + <div class="card mb-4"> + <div class="card-content"> + <div class="content"> + <p class="subtitle">wsproto</p> + <p>wsproto is a pure-Python WebSocket protocol stack written to be as flexible as possible by having the user build the bridge to the I/O. + </p> + </div> + </div> + <div class="card-footer"> + <a href="https://python-hyper.org/projects/wsproto/en/stable" class="card-footer-item"><i class="fas fa-book"></i> Documentation</a> + <a href="https://github.com/python-hyper/wsproto" class="card-footer-item"><i class="fab fa-github"></i> GitHub</a> + </div> + </div> + + <div class="card mb-4"> + <div class="card-content"> + <div class="content"> + <p class="subtitle">Starlite</p> + <p>Starlite is a light and flexible ASGI API framework, using Starlette and Pydantic as foundations. + </p> + </div> + </div> + <div class="card-footer"> + <a href="https://starlite-api.github.io/starlite" class="card-footer-item"><i class="fas fa-book"></i> Documentation</a> + <a href="https://github.com/starlite-api/starlite" class="card-footer-item"><i class="fab fa-github"></i> GitHub</a> + </div> + </div> + + <div class="card mb-4"> + <div class="card-content"> + <div class="content"> + <p class="subtitle">Sanic</p> + <p>Sanic is an ASGI compliant web framework designed for speed and simplicity. + </p> + </div> + </div> + <div class="card-footer"> + <a href="https://sanic.dev/en/guide/advanced/websockets.html" class="card-footer-item"><i class="fas fa-book"></i> Documentation</a> + <a href="https://github.com/sanic-org/sanic" class="card-footer-item"><i class="fab fa-github"></i> GitHub</a> + </div> + </div> + + +{% endblock %} + +{% block sidebar %} + + {% include "events/sidebar/code-jams/9.html" %} + +{% endblock %} diff --git a/pydis_site/templates/events/pages/code-jams/9/rules.html b/pydis_site/templates/events/pages/code-jams/9/rules.html new file mode 100644 index 00000000..72c0372e --- /dev/null +++ b/pydis_site/templates/events/pages/code-jams/9/rules.html @@ -0,0 +1,69 @@ +{% extends "events/base_sidebar.html" %} + +{% block title %}Summer Code Jam 2022{% endblock %} + +{% block breadcrumb %} + <li><a href="{% url "events:index" %}">Events</a></li> + <li><a href="{% url "events:page" path="code-jams" %}">Code Jams</a></li> + <li><a href="{% url "events:page" path="code-jams/9" %}">Summer Code Jam 2022</a></li> + <li class="is-active"><a href="#">Rules</a></li> +{% endblock %} + +{% block event_content %} +<ol> + <li><p>Your solution must use one of the approved frameworks (a list will be released soon). It is not permitted to circumvent this rule by e.g. using the approved framework as a wrapper for another framework.</p></li> + <li><p>Your solution should be platform agnostic. For example, if you use filepaths in your submission, use <code>pathlib</code> to create platform agnostic Path objects instead of hardcoding the paths.</p></li> + <li> + <p> + You must document precisely how to install and run your project. + This should be as easy as possible, which means you should consider using dependency managers like <code>pipenv</code> or <code>poetry</code>. + We would also encourage you to use <code>docker</code> and <code>docker-compose</code> to containerize your project, but this isn't a requirement. + </p> + </li> + <li> + You must get contributions from every member of your team, if you have an issue with someone on your team please contact a member of the administration team. + These contributions do not necessarily have to be code, for example it's absolutely fine for someone to contribute management, documentation, graphics or audio. + <strong> + Team members that do not contribute will be removed from the Code Jam, and will not receive their share of any prizes the team may win. + They may also be barred from entering future events. + </strong> + </li> + <li><p>You must use GitHub as source control.</p></li> + <li> + <p> + All code and assets must be compatible with the <a href="https://en.wikipedia.org/wiki/MIT_License">MIT license</a>. + This is because we will be merging your submission into our <code>summer-code-jam-2022</code> repo at the end of the jam, + and this repo is licensed with the MIT license. + <strong>Projects that include assets that are incompatible with this license may be disqualified.</strong> + </p> + </li> + <li><p>All code must be written and committed within the time constrictions of the jam. Late commits may be reverted, so make sure you leave enough time to bug test your program.</p></li> + <li> + <p> + Use English as the main language for your project, including names, comments, documentation, and commit messages. + Any text displayed in your application should also be in English, + although you are allowed to provide the user with options for internationalisation and translation. + </p> + </li> + <li> + <p> + Your team, once the coding portion of the code jam is complete, must create a video presentation that showcases and explains your final product. + This must be in a video format and must be uploaded somewhere for the judges to view (i.e. unlisted Youtube video, Vimeo, etc.) + The video can be as simple as a screen recording with annotated text. + Teams who do not submit a final video presentation may be disqualified. + </p> + </li> +</ol> + +<blockquote> + Please note that our regular + <a href="/pages/rules">community rules</a> and <a href="/pages/code-of-conduct">code of conduct</a> + also apply during the event and that we reserve the right to make changes to these rules at any time. +</blockquote> +{% endblock %} + +{% block sidebar %} + + {% include "events/sidebar/code-jams/9.html" %} + +{% endblock %} diff --git a/pydis_site/templates/events/pages/code-jams/_index.html b/pydis_site/templates/events/pages/code-jams/_index.html index 207d4b9a..74efcfaa 100644 --- a/pydis_site/templates/events/pages/code-jams/_index.html +++ b/pydis_site/templates/events/pages/code-jams/_index.html @@ -8,6 +8,12 @@ {% block title %}Code Jams{% endblock %} {% block event_content %} + <div class="block"> + <div class="notification is-success"> + The <b>2022 Summer Code Jam</b> is currently underway and you can still enter! <b>The qualifier is open until July 13</b>; check out the details <a href="{% url "events:page" path="code-jams/9" %}">here</a>. + </div> + </div> + <p> If you've been around the server for a while, or you just happened to join at the right time, you may have heard of something known as a Code Jam. @@ -31,7 +37,7 @@ <h2 class="title is-4" id="how-often-do-these-happen"><a href="#how-often-do-these-happen">How often do these happen?</a></h2> <p> - Our Code Jams happen twice a year. We have a Winter Jam and a Summer Jam. + Our Code Jams happen once a year every summer. </p> <h2 class="title is-4" id="what-happens-if-i-have-to-drop-out"><a href="#what-happens-if-i-have-to-drop-out">What happens if I have to drop out?</a></h2> diff --git a/pydis_site/templates/events/sidebar/code-jams/7.html b/pydis_site/templates/events/sidebar/code-jams/7.html index d4615c2a..4aefdbd9 100644 --- a/pydis_site/templates/events/sidebar/code-jams/7.html +++ b/pydis_site/templates/events/sidebar/code-jams/7.html @@ -1,7 +1,7 @@ {% load static %} <div class="box"> - <img src="https://raw.githubusercontent.com/python-discord/branding/master/events/summer_code_jam_2020/summer%20cj%202020%20discord%20banner.png" alt="Summer Code Jam 2020"> + <img src="https://raw.githubusercontent.com/python-discord/branding/master/jams/summer_code_jam_2020/summer%20cj%202020%20discord%20banner.png" alt="Summer Code Jam 2020"> <p class="menu-label">Sponsors</p> <a href="https://www.djangoproject.com/" target="_blank"> <img src="https://static.djangoproject.com/img/logos/django-logo-positive.png" alt="Django"> diff --git a/pydis_site/templates/events/sidebar/code-jams/9.html b/pydis_site/templates/events/sidebar/code-jams/9.html new file mode 100644 index 00000000..2351973f --- /dev/null +++ b/pydis_site/templates/events/sidebar/code-jams/9.html @@ -0,0 +1,21 @@ +{% load static %} +<div class="panel"> + <p class="panel-heading">Important Links</p> + <a class="panel-block has-text-link" href="{% url "events:page" path="code-jams/9/rules" %}">Rules</a> + <a class="panel-block has-text-link" href="{% url "events:page" path="code-jams/9/frameworks" %}">Approved Frameworks</a> + <a class="panel-block has-text-link" href="{% url "events:page" path="code-jams/code-style-guide" %}">The Code Style Guide</a> + </ul> +</div> +<div class="box"> + <img src="{% static "images/events/summer_code_jam_2022/site_banner.png" %}" alt="Summer Code Jam 2022"> + <h4 class="menu-label">Our Sponsors</h4> + <a href="https://www.digitalocean.com/" target="_blank"> + <img src="{% static "images/events/DO_Logo_Vertical_Blue.png" %}" alt="Digital Ocean"> + </a> + <a href="https://jetbrains.com" target="_blank"> + <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains"> + </a> + <a href="https://replit.com/" target="_blank"> + <img src="{% static "images/events/Replit.png" %}" alt="Replit"> + </a> +</div> diff --git a/pydis_site/templates/events/sidebar/code-jams/ongoing-code-jam.html b/pydis_site/templates/events/sidebar/code-jams/ongoing-code-jam.html index f4fa3a37..37569e57 100644 --- a/pydis_site/templates/events/sidebar/code-jams/ongoing-code-jam.html +++ b/pydis_site/templates/events/sidebar/code-jams/ongoing-code-jam.html @@ -1,8 +1,8 @@ {% load static %} <div class="box"> - <h4 class="menu-label">Ongoing Code Jam</h4> - <a href="{% url "events:page" path="code-jams/8" %}"> - <img src="{% static "images/events/summer_code_jam_2021/banner.png" %}" alt="Summer Code Jam 2021"> + <h4 class="menu-label">Upcoming Code Jam</h4> + <a href="{% url "events:page" path="code-jams/9" %}"> + <img src="{% static "images/events/summer_code_jam_2022/banner.png" %}" alt="Summer Code Jam 2022"> </a> </div> diff --git a/pydis_site/templates/events/sidebar/events-list.html b/pydis_site/templates/events/sidebar/events-list.html index 5dfe5dc2..8deac80e 100644 --- a/pydis_site/templates/events/sidebar/events-list.html +++ b/pydis_site/templates/events/sidebar/events-list.html @@ -1,10 +1,17 @@ <div class="box"> - <p class="menu-label">Event Calendar 2021</p> + <p class="menu-label">Event Calendar 2022</p> <ul class="menu-list"> - <li><a class="has-text-link" href="https://pyweek.org/31/" target="_blank" rel="noopener">March: PyWeek 31</a></li> - <li><a class="has-text-black" style="cursor: default;">May: Pixels</a></li> - <li><a class="has-text-link" href="{% url "events:page" path="code-jams/8" %}">July: Summer Code Jam</a></li> - <li><a class="has-text-link" href="https://pyweek.org/32/" target="_blank" rel="noopener">September: PyWeek 32</a></li> + <li><a class="has-text-link" href="https://pyweek.org/33/" target="_blank" rel="noopener">March: PyWeek 33</a></li> + <li><a class="has-text-link" href="{% url "events:page" path="code-jams/9" %}">July: Summer Code Jam</a></li> + <li><a class="has-text-link" href="https://pyweek.org/34/" target="_blank" rel="noopener">September: PyWeek 34</a></li> + <li><a class="has-text-black" style="cursor: default;">October: Pixels</a></li> <li><a class="has-text-black" style="cursor: default;">December: Advent of Code</a></li> </ul> </div> + +<div class="box"> + <p class="menu-label">Related Links</p> + <ul class="menu-list"> + <li><a class="has-text-link" href="{% url "events:page" path="code-jams" %}">Code Jams</a></li> + </ul> +</div> diff --git a/pydis_site/templates/events/sidebar/ongoing-event.html b/pydis_site/templates/events/sidebar/ongoing-event.html index 37dfdf77..e375fa38 100644 --- a/pydis_site/templates/events/sidebar/ongoing-event.html +++ b/pydis_site/templates/events/sidebar/ongoing-event.html @@ -1,8 +1,8 @@ {% load static %} <div class="box"> - <p class="menu-label">Ongoing Event</p> - <a href="{% url "events:page" path="code-jams/8" %}"> - <img src="{% static "images/events/summer_code_jam_2021/banner.png" %}" alt="Summer Code Jam 2021"> + <p class="menu-label">Upcoming Event</p> + <a href="{% url "events:page" path="code-jams/9" %}"> + <img src="{% static "images/events/summer_code_jam_2022/banner.png" %}" alt="Summer Code Jam 2022"> </a> </div> diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index 985ccae1..cdbac830 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,6 +9,13 @@ {% block content %} {% include "base/navbar.html" %} + <!-- Mobile-only Code Jam Banner --> + <section id="mobile-notice" class="is-primary is-hidden-tablet"> + <a href="/events/code-jams/9/"> + <img src="{% static "images/events/summer_code_jam_2022/front_page_banners/sign_up.png" %}" alt="Summer Code Jam 2022"> + </a> + </section> + <!-- Wave Hero --> <section id="wave-hero" class="section is-hidden-mobile"> @@ -37,7 +44,15 @@ ></iframe> </div> </div> + + {# Code Jam Banner #} + <div id="wave-hero-right" class="column is-half"> + <a href="/events/code-jams/9/"> + <img src="{% static "images/events/summer_code_jam_2022/front_page_banners/sign_up.png" %}" alt="Summer Code Jam 2022"> + </a> + </div> </div> + </div> {# Animated wave elements #} @@ -84,9 +99,9 @@ <div class="mini-timeline"> <i class="fa fa-asterisk"></i> <i class="fa fa-code"></i> - <i class="fab fa-python"></i> - <i class="fa fa-alien-monster"></i> - <i class="fa fa-duck"></i> + <i class="fab fa-lg fa-python"></i> + <i class="fab fa-discord"></i> + <i class="fa fa-sm fa-terminal"></i> <i class="fa fa-bug"></i> </div> @@ -173,6 +188,9 @@ Sponsors </h1> <div class="columns is-mobile is-multiline"> + <a href="https://www.netcup.eu/" class="column is-narrow"> + <img src="{% static "images/sponsors/netcup.png" %}" alt="netcup"/> + </a> <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085" class="column is-narrow"> <img src="{% static "images/sponsors/linode.png" %}" alt="Linode"/> </a> diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html index af7c8d65..5ca46296 100644 --- a/pydis_site/templates/resources/resource_box.html +++ b/pydis_site/templates/resources/resource_box.html @@ -1,6 +1,8 @@ {% load as_icon %} +{% load to_kebabcase %} +{% load get_category_icon %} -<div class="box" style="max-width: 800px;"> +<div class="box resource-box {{ resource.css_classes }}" data-resource-name="{{ resource.name }}"> {% if 'title_url' in resource %} <a href="{{ resource.title_url }}"> {% include "resources/resource_box_header.html" %} @@ -9,14 +11,69 @@ {% include "resources/resource_box_header.html" %} {% endif %} - <p class="is-italic">{{ resource.description|safe }}</p> + <p>{{ resource.description|safe }}</p> - {# Icons #} - {% for icon in resource.urls %} - <span class="icon is-size-4 is-medium" style="margin: 5px;"> - <a href="{{ icon.url }}"> - <i class="{{ icon.icon|as_icon }} is-size-3 resource-icon is-{{ icon.color }}"></i> - </a> - </span> - {% endfor %} + <div class="is-flex is-align-items-center"> + {# Add primary link #} + {% if "title_url" in resource %} + <span class="icon is-size-4" style="margin: 5px;"> + <a href="{{ resource.title_url }}"> + <i class="fas fa-external-link-alt fa-fw is-size-4 resource-icon is-hoverable is-primary"></i> + </a> + </span> + {% endif %} + + {# Add all additional icon #} + {% for icon in resource.urls %} + <span class="icon is-size-4" style="margin: 5px;"> + <a href="{{ icon.url }}"> + <i class="{{ icon.icon|as_icon }} fa-fw is-size-4 resource-icon is-hoverable is-{{ icon.color }}"></i> + </a> + </span> + {% endfor %} + + {# Tags #} + <div class="resource-tag-container is-flex ml-auto is-flex-wrap-wrap is-justify-content-end"> + {% for tag in resource.tags.topics %} + <span + class="tag resource-tag is-primary is-light ml-2 mt-2" + data-filter-name="topics" + data-filter-item="{{ tag|to_kebabcase }}" + > + <i class="{{ tag|title|get_category_icon }} mr-1"></i> + {{ tag|title }} + </span> + {% endfor %} + {% for tag in resource.tags.type %} + <span + class="tag resource-tag has-background-success-light has-text-success-dark ml-2 mt-2" + data-filter-name="type" + data-filter-item="{{ tag|to_kebabcase }}" + > + <i class="{{ tag|title|get_category_icon }} mr-1"></i> + {{ tag|title }} + </span> + {% endfor %} + {% for tag in resource.tags.payment_tiers %} + <span + class="tag resource-tag has-background-danger-light has-text-danger-dark ml-2 mt-2" + data-filter-name="payment-tiers" + data-filter-item="{{ tag|to_kebabcase }}" + > + <i class="{{ tag|title|get_category_icon }} mr-1"></i> + {{ tag|title }} + </span> + {% endfor %} + {% for tag in resource.tags.difficulty %} + <span + class="tag resource-tag has-background-info-light has-text-info-dark ml-2 mt-2" + data-filter-name="difficulty" + data-filter-item="{{ tag|to_kebabcase }}" + > + <i class="{{ tag|title|get_category_icon }} mr-1"></i> + {{ tag|title }} + </span> + {% endfor %} + </div> + </div> </div> diff --git a/pydis_site/templates/resources/resource_box_header.html b/pydis_site/templates/resources/resource_box_header.html index 84e1a79b..dfbdd92f 100644 --- a/pydis_site/templates/resources/resource_box_header.html +++ b/pydis_site/templates/resources/resource_box_header.html @@ -17,8 +17,7 @@ <span class="is-size-4 has-text-weight-bold"> {% if 'title_image' in resource %} <img src="{{ resource.title_image }}" alt="" style="height: 50px; {{ resource.title_image_style }}"> - {% endif %} - {% if 'name' in resource %} + {% elif 'name' in resource %} {{ resource.name }} {% endif %} </span> diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html index f1f487cf..101f9965 100644 --- a/pydis_site/templates/resources/resources.html +++ b/pydis_site/templates/resources/resources.html @@ -1,90 +1,180 @@ {% extends 'base/base.html' %} +{% load as_icon %} +{% load to_kebabcase %} +{% load get_category_icon %} {% load static %} {% block title %}Resources{% endblock %} {% block head %} - <link rel="stylesheet" href="{% static "css/resources/resources.css" %}"> + {# Inject a JSON object of all valid filter types from the view #} + <script> + const validFilters = {{ valid_filters | safe }} + </script> + + <link rel="stylesheet" href="{% static "css/resources/resources.css" %}"> + <link rel="stylesheet" href="{% static "css/collapsibles.css" %}"> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> + <script defer src="{% static "js/resources/resources.js" %}"></script> + <script defer src="{% static "js/collapsibles.js" %}"></script> + <script defer src="{% static "js/fuzzysort/fuzzysort.js" %}"></script> {% endblock %} {% block content %} - {% include "base/navbar.html" %} + {% include "base/navbar.html" %} + <input type="hidden" id="resource-type-input" value="{{ resource_type }}"> + <section class="section"> + <div class="columns is-variable is-6 is-centered"> + {# Filtering toolbox #} + <div class="column filtering-column is-one-third"> + <div class="content is-justify-content-center"> + <nav id="resource-filtering-panel" class="panel is-primary"> + <p class="panel-heading has-text-centered" id="filter-panel-header">Filter resources</p> + + {# Search bar #} + <p id="resource-search" class="control has-icons-left"> + <input class="input" placeholder="Search resources "> + <span class="icon is-small is-left"> + <i class="fas fa-magnifying-glass"></i> + </span> + </p> + + + {# Filter box tags #} + <div class="card filter-tags"> + <div class="is-flex ml-auto"> + <div id="tag-pool"> + {# A filter tag for when there are no filters active #} + <span class="tag no-tags-selected is-secondary ml-2 mt-2"> + <i class="fas fa-fw fa-ban mr-1"></i> + No filters selected + </span> + + {# A filter tag for search queries #} + <span class="tag search-query is-secondary ml-2 mt-2"> + <i class="fas fa-fw fa-magnifying-glass mr-1"></i> + <span class="tag inner">Search: ...</span> + </span> + + {% for filter_name, filter_data in filters.items %} + {% for filter_item in filter_data.filters %} + {% if filter_name == "Difficulty" %} + <span + class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2" + data-filter-name="{{ filter_name|to_kebabcase }}" + data-filter-item="{{ filter_item|to_kebabcase }}" + > + <i class="{{ filter_item|title|get_category_icon }} mr-1"></i> + {{ filter_item|title }} + <button class="delete is-small is-info has-background-info-light"></button> + </span> + {% endif %} + {% if filter_name == "Type" %} + <span + class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2" + data-filter-name="{{ filter_name|to_kebabcase }}" + data-filter-item="{{ filter_item|to_kebabcase }}" + > + <i class="{{ filter_item|title|get_category_icon }} mr-1"></i> + {{ filter_item|title }} + <button class="delete is-small is-success has-background-success-light"></button> + </span> + {% endif %} + {% if filter_name == "Payment tiers" %} + <span + class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2" + data-filter-name="{{ filter_name|to_kebabcase }}" + data-filter-item="{{ filter_item|to_kebabcase }}" + > + <i class="{{ filter_item|title|get_category_icon }} mr-1"></i> + {{ filter_item|title }} + <button class="delete is-small is-danger has-background-danger-light"></button> + </span> + {% endif %} + {% if filter_name == "Topics" %} + <span + class="filter-box-tag tag is-primary is-light ml-2 mt-2" + data-filter-name="{{ filter_name|to_kebabcase }}" + data-filter-item="{{ filter_item|to_kebabcase }}" + > + <i class="{{ filter_item|title|get_category_icon }} mr-1"></i> + {{ filter_item|title }} + <button class="delete is-small is-primary has-background-primary-light"></button> + </span> + {% endif %} + {% endfor %} + {% endfor %} + </div> + <div class="close-filters-button"> + {# A little x in the top right, visible only when filters are active, which removes all filters. #} + <a class="icon"> + <i class="fas fa-window-close"></i> + </a> - <section class="section"> - <div class="container"> - <div class="content"> - <h1>Resources</h1> + </div> + </div> + </div> - <div class="tile is-ancestor"> - <a class="tile is-parent" href="{% url "content:page_category" location="guides" %}"> - <article class="tile is-child box hero is-primary is-bold"> - <p class="title is-size-1"><i class="fad fa-info-circle" aria-hidden="true"></i> Guides</p> - <p class="subtitle is-size-4">Made by us, for you</p> - </article> - </a> + {# Filter checkboxes #} + {% for filter_name, filter_data in filters.items %} + <div class="card filter-category-header"> + <button type="button" class="card-header collapsible"> + <span class="card-header-title subtitle is-6 my-2 ml-2"> + <i class="fa-fw {{ filter_data.icon }} is-primary" aria-hidden="true"></i>  {{ filter_name }} + </span> + <span class="card-header-icon"> + {% if not filter_data.hidden %} + <i class="far fa-fw fa-window-minimize is-6 title" aria-hidden="true"></i> + {% else %} + <i class="fas fa-fw fa-angle-down is-6 title" aria-hidden="true"></i> + {% endif %} + </span> + </button> - <div class="tile is-vertical is-9"> - <div class="tile"> - <a class="tile is-8 is-parent" href="{% url "resources:resources" category="reading" %}"> - <article class="tile is-child box hero is-black" id="readingBlock"> - <p class="title is-size-1"><i class="fad fa-book-alt" aria-hidden="true"></i> Read</p> - <p class="subtitle is-size-4">Lovingly curated books to explore</p> - </article> - </a> + {# Checkboxes #} + {% if filter_data.hidden %} + <div class="collapsible-content collapsed"> + {% else %} + <div class="collapsible-content"> + {% endif %} + <div class="card-content"> + {% for filter_item in filter_data.filters %} + <a class="panel-block filter-panel"> + <label class="checkbox"> + <input + class="filter-checkbox" + type="checkbox" + data-filter-name="{{ filter_name|to_kebabcase }}" + data-filter-item="{{ filter_item|to_kebabcase }}" + > + {{ filter_item }} + </label> + </a> + {% endfor %} + </div> + </div> + </div> + {% endfor %} + </nav> + </div> + </div> - <div class="tile"> - <a class="tile is-parent" href="{% url "resources:resources" category="videos" %}"> - <article class="tile is-child box hero is-danger is-bold"> - <p class="title is-size-1"><i class="fad fa-video" aria-hidden="true"></i> Watch</p> - <p class="subtitle is-size-4">Visually engaging</p> - </article> - </a> - </div> - </div> + <div class="column is-two-thirds"> + {# Message to display when there are no hits #} + <div class="no-resources-found"> + <h2 class="title is-3 has-text-centered pt-0 pb-6">No matching resources found!</h2> + <img src="{% static "images/resources/duck_pond_404.jpg" %}"> + </div> - <div class="tile"> - <a class="tile is-parent" href="{% url "resources:resources" category="interactive" %}"> - <article class="tile is-child box hero is-black" id="interactiveBlock"> - <p class="title is-size-1"><i class="fad fa-code" aria-hidden="true"></i> Try</p> - <p class="subtitle is-size-4">Interactively discover the possibilities</p> - </article> - </a> - <a class="tile is-8 is-parent" href="{% url "resources:resources" category="courses" %}"> - <article class="tile is-child box hero is-success is-bold"> - <p class="title is-size-1"><i class="fad fa-graduation-cap" aria-hidden="true"></i> Learn</p> - <p class="subtitle is-size-4">Structured courses with clear goals</p> - </article> - </a> - </div> - </div> - </div> - <div class="tile is-ancestor"> - <div class="tile is-vertical is-9"> - <div class="tile"> - <a class="tile is-8 is-parent" href="{% url "resources:resources" category="communities" %}"> - <article class="tile is-child box hero is-black" id="communitiesBlock"> - <p class="title is-size-1"><i class="fad fa-users" aria-hidden="true"></i> Communities</p> - <p class="subtitle is-size-4">Some of our best friends</p> - </article> - </a> - <div class="tile"> - <a class="tile is-parent" href="{% url "resources:resources" category="podcasts" %}"> - <article class="tile is-child box hero is-black" id="podcastsBlock"> - <p class="title is-size-1"><i class="fad fa-podcast" aria-hidden="true"></i> Listen</p> - <p class="subtitle is-size-4">Regular podcasts to follow</p> - </article> - </a> - </div> - </div> - </div> - <a class="tile is-parent" href="{% url "resources:resources" category="tools" %}"> - <article class="tile is-child box hero is-dark"> - <p class="title is-size-1"><i class="fad fa-tools" aria-hidden="true"></i> Tools</p> - <p class="subtitle is-size-4">Things we love to use</p> - </article> - </a> - </div> - </div> - </div> - </section> + {# Resource cards #} + <div class="content is-flex is-justify-content-center"> + <div class="container is-fullwidth"> + {% for resource in resources.values %} + {% include "resources/resource_box.html" %} + {% endfor %} + </div> + </div> + </div> + </div> + </section> {% endblock %} diff --git a/pydis_site/templates/resources/resources_list.html b/pydis_site/templates/resources/resources_list.html deleted file mode 100644 index e2be3cb7..00000000 --- a/pydis_site/templates/resources/resources_list.html +++ /dev/null @@ -1,52 +0,0 @@ -{% extends "base/base.html" %} -{% load as_icon %} -{% load static %} - -{% block title %}{{ category_info.name }}{% endblock %} -{% block head %} - <link rel="stylesheet" href="{% static "css/resources/resources_list.css" %}"> -{% endblock %} - -{% block content %} - {% include "base/navbar.html" %} - - <section class="section breadcrumb-section"> - <div class="container"> - <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs"> - <ul> - <li><a href="{% url "resources:index" %}">Resources</a></li> - <li class="is-active"><a href="#">{{ category_info.name }}</a></li> - </ul> - </nav> - </div> - </section> - - <section class="section"> - <div class="container"> - <div class="content"> - <h1>{{ category_info.name }}</h1> - <p>{{ category_info.description|safe }}</p> - <div> - {% for resource in resources|dictsort:"position" %} - {% include "resources/resource_box.html" %} - {% endfor %} - - {% for subcategory in subcategories|dictsort:"category_info.position" %} - <h2 id="{{ subcategory.category_info.raw_name }}"> - <a href="{% url "resources:resources" category=category_info.raw_name %}#{{ subcategory.category_info.raw_name }}"> - {{ subcategory.category_info.name }} - </a> - </h2> - <p>{{ subcategory.category_info.description|safe }}</p> - - {% for resource in subcategory.resources|dictsort:"position" %} - {% with category_info=subcategory.category_info %} - {% include "resources/resource_box.html" %} - {% endwith %} - {% endfor %} - {% endfor %} - </div> - </div> - </div> - </section> -{% endblock %} diff --git a/pydis_site/templates/staff/logs.html b/pydis_site/templates/staff/logs.html index 8c92836a..5e2a200b 100644 --- a/pydis_site/templates/staff/logs.html +++ b/pydis_site/templates/staff/logs.html @@ -14,12 +14,16 @@ <li>Date: {{ deletion_context.creation }}</li> </ul> <div class="is-divider has-small-margin"></div> - {% for message in deletion_context.deletedmessage_set.all %} + {% for message in deletion_context.deletedmessage_set.all reversed %} <div class="discord-message"> <div class="discord-message-header"> <span class="discord-username" - style="color: {{ message.author.top_role.colour | hex_colour }}">{{ message.author }}</span><span - class="discord-message-metadata has-text-grey">{{ message.timestamp }} | User ID: {{ message.author.id }}</span> + style="color: {{ message.author.top_role.colour | hex_colour }}">{{ message.author }} + </span> + <span class="discord-message-metadata has-text-grey"> + User ID: {{ message.author.id }}<br> + {{ message.timestamp }} (Channel ID-Message ID: {{ message.channel_id }}-{{ message.id }}) + </span> </div> <div class="discord-message-content"> {{ message.content | escape | visible_newlines | safe }} |