Merge branch 'main' into swfarnsworth/resources

10 files changed, 403 insertions, 17 deletions

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>&ensp;Documentation</a>
+            <a href="https://github.com/tiangolo/fastapi" class="card-footer-item"><i class="fab fa-github"></i>&ensp;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>&ensp;Documentation</a>
+            <a href="https://github.com/encode/starlette" class="card-footer-item"><i class="fab fa-github"></i>&ensp;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>&ensp;Documentation</a>
+            <a href="https://github.com/aaugustin/websockets" class="card-footer-item"><i class="fab fa-github"></i>&ensp;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>&ensp;Documentation</a>
+            <a href="https://github.com/django/channels" class="card-footer-item"><i class="fab fa-github"></i>&ensp;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>&ensp;Documentation</a>
+            <a href="https://github.com/miguelgrinberg/flask-socketio" class="card-footer-item"><i class="fab fa-github"></i>&ensp;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>&ensp;Documentation</a>
+            <a href="https://github.com/python-hyper/wsproto" class="card-footer-item"><i class="fab fa-github"></i>&ensp;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>&ensp;Documentation</a>
+            <a href="https://github.com/starlite-api/starlite" class="card-footer-item"><i class="fab fa-github"></i>&ensp;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>&ensp;Documentation</a>
+            <a href="https://github.com/sanic-org/sanic" class="card-footer-item"><i class="fab fa-github"></i>&ensp;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/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 c7350cac..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>