Fix all conflicts

hopefully I dont have to do this again
author: hedy <[email protected]> 2023-12-14 20:28:17 +0800
committer: hedy <[email protected]> 2023-12-14 20:28:17 +0800
commit: 449c08fd5459b2f804dbf825086ec1dd0f244d8a (patch)
tree: e4589cb227cdb2e611bcbf9b02ea481fe24cdb34 /pydis_site/templates
parent: Resize theme switch (diff)
parent: Merge pull request #1173 from python-discord/dependabot/pip/sentry-sdk-1.39.0 (diff)
32 files changed, 2075 insertions, 351 deletions
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index 6577a4cf..f6a1bc26 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -74,6 +74,9 @@
           <a class="navbar-item" href="{% url "resources:index" %}" >
             Resources
           </a>
+          <a class="navbar-item" href="{% url "content:pages" %}">
+              Content
+          </a>
           <a class="navbar-item" href="{% url "events:index" %}">
             Events
           </a>
diff --git a/pydis_site/templates/content/base.html b/pydis_site/templates/content/base.html
index 4a19a275..bda6d954 100644
--- a/pydis_site/templates/content/base.html
+++ b/pydis_site/templates/content/base.html
@@ -1,5 +1,6 @@
 {% extends 'base/base.html' %}
 {% load static %}
+{% load page_src %}
 
 {% block title %}{{ page_title }}{% endblock %}
 {% block head %}
@@ -8,6 +9,10 @@
     <meta property="og:description" content="{{ page_description }}" />
     <link rel="stylesheet" href="{% static "css/content/page.css" %}">
     <link rel="stylesheet" href="{% static "css/collapsibles.css" %}">
+    <link rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/atom-one-dark.min.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>
+    <script>hljs.highlightAll();</script>
     <script src="{% static "js/collapsibles.js" %}"></script>
 {% endblock %}
 
@@ -25,17 +30,28 @@
                     <li class="is-active"><a href="#">{{ page_title }}</a></li>
                 </ul>
             </nav>
+        </div>
+        <div class="is-flex is-pulled-right is-right">
             {# Sub-Article dropdown for category pages #}
             {% if subarticles %}
                 {% include "content/dropdown.html" %}
             {% endif %}
+            {# Edit on GitHub for content articles #}
+            {% if page and not tag %}
+                <div id="edit-on-github">
+                    <a href="{{ request.path | page_src_url }}">
+                        <i class="fa-solid fa-pencil"></i>
+                        Edit on GitHub
+                    </a>
+                </div>
+            {% endif %}
         </div>
     </section>
 
     <section class="section">
         <div class="container">
             <div class="content">
-                <h1 class="title">{{ page_title }}</h1>
+                <h1 class="title">{% block title_element %}{{ page_title }}{% endblock %}</h1>
                 {% block page_content %}{% endblock %}
             </div>
         </div>
diff --git a/pydis_site/templates/content/dropdown.html b/pydis_site/templates/content/dropdown.html
index 13c89c68..60560547 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" style="z-index: 1">
+<div class="dropdown" 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/content/listing.html b/pydis_site/templates/content/listing.html
index 9dac17d9..c21cea74 100644
--- a/pydis_site/templates/content/listing.html
+++ b/pydis_site/templates/content/listing.html
@@ -1,6 +1,22 @@
+{# Base navigation screen for resources #}
 {% extends 'content/base.html' %}
+{% load static %}
+
+{# Show a GitHub button on tag pages #}
+{% if is_tag_listing %}
+{% block title_element %}
+    <link rel="stylesheet" href="{% static "css/content/color.css" %}">
+    <div class="level">
+        <div class="level-left">{{ block.super }}</div>
+        <div class="level-right">
+            <a class="level-item fab fa-github" href="{{ tag_url }}"></a>
+        </div>
+    </div>
+{% endblock %}
+{% endif %}
 
 {% block page_content %}
+    {# Nested Categories #}
     {% for category, data in categories.items %}
         <div class="box has-background-white-bis" style="max-width: 800px;">
             <span class="icon is-size-4 is-medium">
@@ -13,15 +29,22 @@
             <p class="is-italic">{{ data.description }}</p>
         </div>
     {% endfor %}
+
+    {# Single Pages #}
     {% for page, data in pages.items %}
         <div class="box has-background-white-bis" style="max-width: 800px;">
             <span class="icon is-size-4 is-medium">
                 <i class="{{ data.icon|default:"fab fa-python" }} is-size-3 is-black has-icon-padding" aria-hidden="true"></i>
             </span>
-            <a href="{% url "content:page_category" location=path|add:page %}">
+            <a href="{% url app_name location=path|add:page %}">
                 <span class="is-size-4 has-text-weight-bold">{{ data.title }}</span>
             </a>
-            <p class="is-italic">{{ data.description }}</p>
+            {% if is_tag_listing %}
+                <div class="tag-container">{{ data.description | safe }}</div>
+            {% else %}
+                <p class="is-italic">{{ data.description }}</p>
+            {% endif %}
         </div>
     {% endfor %}
+    <script src="{% static 'js/content/listing.js' %}"></script>
 {% endblock %}
diff --git a/pydis_site/templates/content/page.html b/pydis_site/templates/content/page.html
index c870b6bd..0d7087dd 100644
--- a/pydis_site/templates/content/page.html
+++ b/pydis_site/templates/content/page.html
@@ -1,13 +1,5 @@
 {% extends 'content/base.html' %}
 
-{% block head %}
-    {{ block.super }}
-    <link rel="stylesheet"
-      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/atom-one-dark.min.css">
-    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>
-    <script>hljs.initHighlightingOnLoad();</script>
-{% endblock %}
-
 {% block page_content %}
     {% if relevant_links or toc %}
         <div class="columns is-variable is-8">
diff --git a/pydis_site/templates/content/tag.html b/pydis_site/templates/content/tag.html
new file mode 100644
index 00000000..fa9e44f5
--- /dev/null
+++ b/pydis_site/templates/content/tag.html
@@ -0,0 +1,40 @@
+{% extends "content/page.html" %}
+{% load static %}
+
+{% block head %}
+    {{ block.super }}
+    <link rel="stylesheet" href="{% static 'css/content/color.css' %}"/>
+    <link rel="stylesheet" href="{% static 'css/content/tag.css' %}"/>
+    <title>{{ tag.name }}</title>
+{% endblock %}
+
+{% block title_element %}
+    <div class="level mb-2">
+        <div class="level-left">{{ block.super }}</div>
+        <div class="level-right">
+            <a class="level-item fab fa-github" href="{{ tag.url }}"></a>
+        </div>
+    </div>
+
+    <div class="dropdown is-size-6 is-hoverable">
+        <div class="dropdown-trigger ">
+            <a aria-haspopup="menu" href="{{ tag.last_commit.url }}">
+                <span class="update-time">
+                    Last Updated: {{ tag.last_commit.date | date:"F j, Y g:i A e" }}
+                </span>
+            </a>
+        </div>
+        <div class="dropdown-menu">
+            <div class="dropdown-content">
+                <div class="dropdown-item">Last edited by:</div>
+                {% for user in tag.last_commit.format_authors %}
+                    <div class="dropdown-item">{{ user }}</div>
+                {% endfor %}
+                <div class="dropdown-divider"></div>
+                {% for line in tag.last_commit.lines %}
+                    <div class="dropdown-item">{{ line }}</div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+{% endblock %}
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html
index ed1bbfed..2fbf0b85 100644
--- a/pydis_site/templates/events/index.html
+++ b/pydis_site/templates/events/index.html
@@ -8,11 +8,11 @@
 
 {% block event_content %}
     <div class="box has-background-white-bis">
-        <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>
+        <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>
+        <iframe style="max-width: 100%;" width="560" height="315" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
     </div>
 
     <div class="box has-background-white-bis">
diff --git a/pydis_site/templates/events/pages/code-jams/10/_index.html b/pydis_site/templates/events/pages/code-jams/10/_index.html
new file mode 100644
index 00000000..388f0df0
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/10/_index.html
@@ -0,0 +1,119 @@
+{% extends "events/base_sidebar.html" %}
+
+{% load static %}
+
+{% block title %}Code Jam 2023{% 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="#">Code Jam 2023</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="winners"><a href="#winners">Code Jam Winners</a></h3>
+        <p>Congratulations to our winners and the two runner ups! Check out their projects below.</p>
+
+        <h4 class="mt-5 mb-2"><i class="fa fa-trophy"></i> Dynamic Typists: next level CAPTCHA</h4>
+        <p class="my-1"><em>tfblunt, the_outlaw_josey_wales, istalantar, maxyodedara5, ooliver</em></p>
+        <p class="my-1">
+            Taking captchas to the next level in an effort to foil some of the new AIs. The captchas are image based with a twist.
+        </p>
+        <p>
+            <a href="https://github.com/thijsfranck/the-dynamic-typists" title="The Dynamic Typists GitHub Repository" target="_blank" rel="noopener"><i class="fa fa-github"></i> GitHub Repository</a>
+            <br/>
+
+        </p>
+
+        <h4 class="mt-5 mb-2"><i class="fa fa-medal"></i> Magic Methods: Code Stego</h4>
+        <p class="my-1"><em>moltensteel, _h_s_p_, ilovetensor, fusionx96, koushireo</em></p>
+        <p class="my-1">
+            Given a snippet of code, create an image of the code to easily share and also embed the code into the image of the code itself.
+        </p>
+        <p>
+            <a href="https://github.com/StoneSteel27/The-Magic-Methods" title="The Magic Methods GitHub Repository" target="_blank" rel="noopener"><i class="fa fa-github"></i> GitHub Repository</a>
+            <br/>
+        </p>
+
+        <h4 class="mt-5 mb-2"><i class="fa fa-medal"></i> Async Aggregators: Digital Shadows</h4>
+        <p class="my-1"><em>flowglow, leo.the.lion, dfebs, avongard, chronsfu, _sardines_</em></p>
+        <p class="my-1">
+            Image manipulation puzzle game. Adjust image manipulation sliders to find secret codes.
+        <p>
+            <a href="https://github.com/Flow-Glow/Code-Jam-2023-Async-Aggregators" title="The Async Aggregators GitHub Repository" target="_blank" rel="noopener"><i class="fa fa-github"></i> GitHub Repository</a>
+            <br/>
+        </p>
+
+    <h3 id="submissions"><a href="#submissions">Submissions</a></h3>
+    <p>
+        By the end of the jam, 17 teams made project submissions. Check them all out here:
+        <div class="has-text-centered"><a class="button is-link" href="submissions">View Submissions</a></div>
+    </p>
+
+    <h3 id="important-dates"><a href="#important-dates">Important Dates</a></h3>
+    <ul>
+        <li>Wednesday, August 16 - The Qualifier is released</li>
+        <li>Wednesday, August 23 - The Qualifier closes</li>
+        <li>Wednesday, August 23 - Voting for the theme opens</li>
+        <li>Thursday, August 31 - Code Jam Begins</li>
+        <li>Sunday, September 10 - Coding portion of the jam ends</li>
+        <li>Thursday, September 14 - Code Jam submissions are closed</li>
+    </ul>
+
+    <h3 id="qualifier"><a href="#how-to-join">The Qualifier</a></h3>
+    <p>
+        The qualifier is a coding challenge that you are required to complete before registering for the code jam.
+        This is meant as a basic assessment of your skills to ensure you have enough Python knowledge to effectively contribute in a team environment.
+
+        The qualifier will be released on August 16th.
+    </p>
+
+    <h3 id="technology"><a href="#technology">Technology</a></h3>
+    <p>
+        The chosen technology for this year is <strong>Image Processing and Manipulation</strong>.
+        Each team must make use of <a href="{% url "events:page" path="code-jams/10/frameworks" %}">the approved frameworks</a> to create an app that strongly incorporates Image Processing and Manipulation.
+    </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/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>
+
+{% endblock %}
+
+{% block sidebar %}
+
+    {% include "events/sidebar/code-jams/10.html" %}
+
+{% endblock %}
diff --git a/pydis_site/templates/events/pages/code-jams/10/frameworks.html b/pydis_site/templates/events/pages/code-jams/10/frameworks.html
new file mode 100644
index 00000000..b5bc7204
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/10/frameworks.html
@@ -0,0 +1,239 @@
+{% extends "events/base_sidebar.html" %}
+
+{% load static %}
+
+{% block title %}Summer Code Jam 2023{% 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/10" %}">Code Jam 2023</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 (or multiple) 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 in the Discord server.
+
+    </p>
+    <p>
+        Other libraries can be used to help build your application, but if their primary purpose is image manipulation or processing then they must be approved or from this list.
+        In particular, if you'd like to use a graph/plot creating library similar to Matplotlib or a machine learning framework/model, double check with us before deciding to use it.
+    </p>
+
+    <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">Pillow</p>
+                <p>
+                    Pillow is a fork of the Python Imaging Library (PIL). The Python Imaging Library adds image processing capabilities to your Python interpreter.
+                    This library provides extensive file format support, an efficient internal representation, and fairly powerful image processing capabilities.
+                    The core image library is designed for fast access to data stored in a few basic pixel formats. It should provide a solid foundation for a general image processing tool.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://python-pillow.org/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/python-pillow/Pillow" 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">OpenCV-Python</p>
+                <p>
+                    OpenCV (Open Source Computer Vision Library: http://opencv.org) is an open-source library that includes several hundreds of computer vision algorithms.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://docs.opencv.org/4.x/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/opencv/opencv-python" 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">NumPy</p>
+                <p>
+                    NumPy is the fundamental package for scientific computing with Python.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://numpy.org/doc/stable/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/numpy/numpy" 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">scikit-image</p>
+                <p>
+                    scikit-image is a collection of algorithms for image processing.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://scikit-image.org/docs/stable/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/scikit-image/scikit-image" 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">matplotlib</p>
+                <p>
+                    Matplotlib is a comprehensive library for creating static, animated, and interactive visualizations in Python. Matplotlib makes easy things easy and hard things possible.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://matplotlib.org/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/matplotlib/matplotlib" 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">PyQtGraph</p>
+                <p>
+                    PyQtGraph is intended for use in mathematics / scientific / engineering applications.
+                    Despite being written entirely in Python, the library is fast due to its heavy leverage of numpy for number crunching, Qt's GraphicsView framework for 2D display, and OpenGL for 3D display.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://www.pyqtgraph.org/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/pyqtgraph/pyqtgraph" 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">SciPy</p>
+                <p>
+                    SciPy is a collection of mathematical algorithms and convenience functions built on NumPy.
+                    It adds significant power to Python by providing the user with high-level commands and classes for manipulating and visualizing data.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://docs.scipy.org/doc/scipy/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/scipy/scipy" 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">Mahotas</p>
+                <p>
+                    Mahotas is a computer vision and image processing library for Python.
+                    It includes many algorithms implemented in C++ for speed while operating in numpy arrays and with a very clean Python interface.
+                    Mahotas currently has over 100 functions for image processing and computer vision and it keeps growing.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://mahotas.readthedocs.io/en/latest/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/luispedro/mahotas" 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">VisPy</p>
+                <p>
+                    VisPy is a high-performance interactive 2D/3D data visualization library.
+                    VisPy leverages the computational power of modern Graphics Processing Units (GPUs) through the OpenGL library to display very large datasets.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://vispy.org/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/vispy/vispy" 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">bokeh</p>
+                <p>
+                    Bokeh is an interactive visualization library for modern web browsers.
+                    It provides elegant, concise construction of versatile graphics and affords high-performance interactivity across large or streaming datasets.
+                    Bokeh can help anyone who wants to create interactive plots, dashboards, and data applications quickly and easily.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://docs.bokeh.org/en/latest/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/bokeh/bokeh" 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">ffmpeg-python</p>
+                <p>
+                    A Python wrapper for the powerful FFmpeg software.
+                </p>
+                <p>
+                    ⚠ You can use other ffmpeg Python bindings, but both with this one and others, make sure that it works well with newer Python versions and be mindful of issues reported in their repositories.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://kkroening.github.io/ffmpeg-python/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/kkroening/ffmpeg-python" 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">imageio</p>
+                <p>
+                    Imageio is a Python library that provides an easy interface to read and write a wide range of image data, including animated images, video, volumetric data, and scientific formats.
+                    It is cross-platform, runs on Python 3.8+, and is easy to install.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://imageio.readthedocs.io/en/stable/" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/imageio/imageio" class="card-footer-item"><i class="fab fa-github"></i>&ensp;GitHub</a>
+        </div>
+    </div>
+
+    <h4 id="can-i-use-ml"><a href="#can-i-use-ml">Q: Can I use machine learning libraries?</a></h4>
+    <p>
+        A: Yes, you can use libraries such as scikit-learn, PyTorch, TensorFlow, etc.
+        <b>However</b>:
+    </p>
+        <ol type="1">
+            <li>Your project should be easy to install and run, so it can't require a dedicated GPU or otherwise significant computational resources.</li>
+            <li>This might prove to be a barrier for your teammates to contribute to the project if they're not knowledgeable in the field.</li>
+            <li>We would still like to see more "classical" image processing techniques. This isn't an ML code jam.</li>
+            <li>If you use pretrained models you need to specify where you took them from, and they need to be compatible with the project license.</li>
+        </ol>
+
+{% endblock %}
+
+{% block sidebar %}
+
+    {% include "events/sidebar/code-jams/10.html" %}
+
+{% endblock %}
diff --git a/pydis_site/templates/events/pages/code-jams/10/rules.html b/pydis_site/templates/events/pages/code-jams/10/rules.html
new file mode 100644
index 00000000..0bbb47d0
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/10/rules.html
@@ -0,0 +1,85 @@
+{% extends "events/base_sidebar.html" %}
+
+{% block title %}Summer Code Jam 2023{% 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/10" %}">Code Jam 2023</a></li>
+    <li class="is-active"><a href="#">Rules</a></li>
+{% endblock %}
+
+{% block event_content %}
+<ol>
+    <li><p>Your solution must use one or more of the approved frameworks. 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>
+            <strong>The core of your project must focus and incorporate image processing and manipulation</strong>.
+        </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-2023</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>
+    <li>
+        <p>
+            Any images or videos used must have one of the following licenses and follow the licensing guidelines:
+            <ul>
+                <li>Public Domain License</li>
+                <li>Copyright Free Image License</li>
+                <li>CC-BY (Creative Commons "By")</li>
+                <li>CC-BY-SA (Creative Commons "Share Alike")</li>
+            </ul>
+        </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/10.html" %}
+
+{% endblock %}
diff --git a/pydis_site/templates/events/pages/code-jams/10/submissions.html b/pydis_site/templates/events/pages/code-jams/10/submissions.html
new file mode 100644
index 00000000..de2e2d95
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/10/submissions.html
@@ -0,0 +1,178 @@
+{% extends "events/base_sidebar.html" %}
+
+{% load static %}
+
+{% block title %}Code Jam 2023{% 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/10" %}">Code Jam 2022</a></li>
+    <li class="is-active"><a href="#">Submissions</a></li>
+{% endblock %}
+
+{% block event_content %}
+    <p>
+        Below is a list of all projects submitted by the end of Summer Code Jam 2022
+    </p>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Async Aggregators</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/Flow-Glow/Code-Jam-2023-Async-Aggregators" title="The Async Aggregators">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Benevolent Dictators</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/ransomw/the-benevolent-dictators" title="The Benevolent Dictators">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Dot Operators</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/LukeHankey/the-dot-operators/tree/readme" title="The Dot Operators">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Dynamic Typists</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/thijsfranck/the-dynamic-typists" title="The Dynamic Typists">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Emerging Exceptions</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/FloncDev/emerging-exceptions" title="The Emerging Exceptions">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Expected Indents</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/BUSH222/cj-The-Expected-Indents" title="The Expected Indents">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Itinerant Iterators</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/smileyface12349/itinerant-iterators" title="The Itinerant Iterators">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Magic Methods</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/StoneSteel27/The-Magic-Methods" title="The Magic Methods">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Missing Dependencies</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/Bobby-McBobface/the-missing-dependencies" title="The Missing Dependencies">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Monkey Patches</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/mache102/cj10-monkey-patches" title="The Monkey Patches">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Neverending Loops</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/inkontoasty/the-neverending-loops" title="The Neverending Loops">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Pickled Peps</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/A5rocks/code-jam-10" title="The Pickled Peps">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Readable Regexes</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/Artemis21/pydis-jam23" title="The Readable Regexes">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Rubber Duck Debuggers</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/nozwock/code-jam-the-rubber-duck-debuggers" title="The Rubber Duck Debuggers">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">The Thick Wrappers</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/DavidLlanio/cj10_the_thick_wrappers/" title="The Thick Wrappers">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+          <p class="has-text-centered">The Top Level Walruses</p>
+        </div>
+        <div class="column is-half">
+          <p class="has-text-centered"><a href="https://github.com/lemonyte/the-top-level-walruses" title="The Top Level Walruses">GitHub</a></p>
+        </div>
+      </div>
+
+      <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+          <p class="has-text-centered">The Wheels of Cheese</p>
+        </div>
+        <div class="column is-half">
+          <p class="has-text-centered"><a href="https://github.com/kronifer/code-jam-10" title="The Wheels of Cheese">GitHub</a></p>
+        </div>
+      </div>
+
+{% endblock %}
+
+{% block sidebar %}
+
+    {% include "events/sidebar/code-jams/9.html" %}
+
+{% endblock %}
diff --git a/pydis_site/templates/events/pages/code-jams/8/_index.html b/pydis_site/templates/events/pages/code-jams/8/_index.html
index bbfe654a..0d613e2c 100644
--- a/pydis_site/templates/events/pages/code-jams/8/_index.html
+++ b/pydis_site/templates/events/pages/code-jams/8/_index.html
@@ -26,7 +26,7 @@
         <h4 class="mt-5 mb-2"><i class="fa fa-trophy"></i> Perceptive Porcupines: WTPython!?</h4>
         <p class="my-1"><em>VV, Poppinawhile, ethansocal, Jeff Z, Cohan, ¯\_(ツ)_/¯</em></p>
         <p class="my-1">
-            What the Python (wtpython) is a simple terminal user interface that allows you to explore relevant answers on Stackoverflow without leaving your terminal or IDE. When you get an error, all you have to do is swap python for wtpython. When your code hits an error, you'll see a textual interface for exploring relevant answers allowing you to stay focused and ship faster!
+            What the Python (wtpython) is a simple terminal user interface that allows you to explore relevant answers on Stackoverflow without leaving your terminal or IDE. When you get an error, all you have to do is swap Python for wtpython. When your code hits an error, you'll see a textual interface for exploring relevant answers allowing you to stay focused and ship faster!
         </p>
         <p>
             <a href="https://www.youtube.com/watch?v=DV3uMdsw9KE" title="Perceptive Porcupines Demo Video" target="_blank" rel="noopener"><i class="fa fa-video"> </i> Demo video</a>
@@ -89,7 +89,7 @@
     <h3 id="qualifier"><a href="#qualifier">The Qualifier</a></h3>
     <p>
         The qualifier is a coding challenge that you are required to complete before registering for the code jam.
-        This is meant as a basic assessment of your skills to ensure you have enough python knowledge to effectively contribute in a team environment.
+        This is meant as a basic assessment of your skills to ensure you have enough Python knowledge to effectively contribute in a team environment.
     </p>
     <p class="has-text-centered"><a class="button is-link" href="https://github.com/python-discord/cj8-qualifier" target="_blank" rel="noopener">View the Qualifier</a></p>
     <p>
diff --git a/pydis_site/templates/events/pages/code-jams/8/frameworks.html b/pydis_site/templates/events/pages/code-jams/8/frameworks.html
index 1c02e38a..d8fbe96f 100644
--- a/pydis_site/templates/events/pages/code-jams/8/frameworks.html
+++ b/pydis_site/templates/events/pages/code-jams/8/frameworks.html
@@ -103,7 +103,7 @@
             <ul>
                 <li><a href="https://python-prompt-toolkit.readthedocs.io/en/stable/" target="_blank">Documentation Link</a></li>
                 <li><strong>Supports:</strong> Linux, Mac, and Windows</li>
-                <li>Pure python library</li>
+                <li>Pure Python library</li>
             </ul>
         </div>
         <div class="column">
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..5c094b22
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/9/_index.html
@@ -0,0 +1,168 @@
+{% 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="winners"><a href="#winners">Code Jam Winners</a></h3>
+        <p>Congratulations to our winners and the two runner ups! Check out their projects below.</p>
+
+        <h4 class="mt-5 mb-2"><i class="fa fa-trophy"></i> Cerebral Centaurs: Drawn</h4>
+        <p class="my-1"><em>Palmirka, Tu®tle, collerek, Rortox</em></p>
+        <p class="my-1">
+            Drawn is based on old school Pictionary game, with additional surprises waiting for the drawer each turn.
+        </p>
+        <p>
+            <a href="https://github.com/collerek/cerebral-centaurs" title="Cerebral Centaurs GitHub Repository" target="_blank" rel="noopener"><i class="fa fa-github"></i> GitHub Repository</a>
+            <br/>
+
+        </p>
+
+        <h4 class="mt-5 mb-2"><i class="fa fa-medal"></i> Kingly Kelpies: for level_id in range(14)</h4>
+        <p class="my-1"><em>Kingu, Falkan, Bamboodja, Redriel, Vinyzu</em></p>
+        <p class="my-1">
+            A simple multiplayer puzzle game, in which your aim is to reach the goal by pressing buttons, standing on plates and moving boxes.
+        </p>
+        <p>
+            <a href="https://www.youtube.com/watch?v=-VQ_ijuo-Mg" title="Kingly Kelpies Demo Video" target="_blank" rel="noopener"><i class="fa fa-video"> </i> Demo video</a>
+            <br/>
+            <a href="https://github.com/Kingly-elpies/KinglyKelpies" title="Kingly Kelpies GitHub Repository" target="_blank" rel="noopener"><i class="fa fa-github"></i> GitHub Repository</a>
+            <br/>
+        </p>
+
+        <h4 class="mt-5 mb-2"><i class="fa fa-medal"></i> Logical Leprechauns: Curse of the Mites</h4>
+        <p class="my-1"><em>Fyx, Aboo Minister, A5rocks, Bautista, ~tylerr</em></p>
+        <p class="my-1">
+            Curse of the Mites is a text based MUD (multi-user dungeon) in which you play as a caterpillar whose goal is to grow into a butterfly to escape the forest cursed by mites.
+        <p>
+            <a href="https://github.com/AbooMinister25/Curse-of-the-Mites" title="Logical Leprechauns GitHub Repository" target="_blank" rel="noopener"><i class="fa fa-github"></i> GitHub Repository</a>
+            <br/>
+        </p>
+
+    <h3 id="submissions"><a href="#submissions">Submissions</a></h3>
+    <p>
+        By the end of the jam, 20+ teams made project submissions. Check them all out here:
+        <div class="has-text-centered"><a class="button is-link" href="submissions">View Submissions</a></div>
+    </p>
+
+    <h3 id="important-dates"><a href="#important-dates">Important Dates</a></h3>
+    <ul>
+        <li>Saturday, June 18 - Form to submit theme suggestions opens</li>
+        <li>Wednesday, June 29 - The Qualifier is released</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="qualifier"><a href="#how-to-join">The Qualifier</a></h3>
+    <p>
+        The qualifier is a coding challenge that you are required to complete before registering for the code jam.
+        This is meant as a basic assessment of your skills to ensure you have enough Python knowledge to effectively contribute in a team environment.
+    </p>
+    <p class="has-text-centered"><a class="button is-link" href="https://github.com/python-discord/code-jam-qualifier-9/" target="_blank" rel="noopener">View the Qualifier</a></p>
+    <p>
+        Please note the requirements for the qualifier.
+        <ul>
+            <li>The qualifier must be completed using Python 3.10</li>
+            <li>No external modules are allowed, only those available through the standard library.</li>
+            <li>The Qualifier must be submitted through the Code Jam sign-up form.</li>
+        </ul>
+    </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..b462c733
--- /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">aiohttp</p>
+                <p>aiohttp provides both a client and server WebSocket implementation, while avoiding callback-hell.
+                </p>
+            </div>
+        </div>
+        <div class="card-footer">
+            <a href="https://docs.aiohttp.org/en/stable/client_quickstart.html#websockets" class="card-footer-item"><i class="fas fa-book"></i>&ensp;Documentation</a>
+            <a href="https://github.com/aio-libs/aiohttp" 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">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>
+
+    <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>
+
+
+{% 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..9a28852f
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/9/rules.html
@@ -0,0 +1,80 @@
+{% 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. 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>
+            <strong>The core of your project must use WebSockets as its communication protocol.</strong>.
+            This means that you are allowed to use other methods of communication where WebSockets cannot be implemented, however, that should be a non-significant portion of your project.
+            For example, serving static files for a website cannot be done over WebSockets and it does not pose as a significant portion of a project, therefore it is allowed.
+        </p>
+
+        <p>This rule does not apply to databases and files when used for <i>storage purposes</i> even though that may be a significant portion of your project. Working with subprocesses (through stdin/stdout or <code>multiprocessing.Pool()</code>/<code>concurrent.futures.ProcessPoolExecutor()</code>) is also exempt from this rule.</p>
+
+        <p>If you're unsure about your use of non-WebSocket communication, please reach out to the events team.</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/9/submissions.html b/pydis_site/templates/events/pages/code-jams/9/submissions.html
new file mode 100644
index 00000000..e0139ce8
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/9/submissions.html
@@ -0,0 +1,232 @@
+{% 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="#">Submissions</a></li>
+{% endblock %}
+
+{% block event_content %}
+    <p>
+        Below is a list of all projects submitted by the end of Summer Code Jam 2022
+    </p>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Artful Angels</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/Artful-Angels/code-jam" title="Artful Angels">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Burly Barghests</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/jasonho1308/summer-code-jam-2022" title="Burly Barghests">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Cerebral Centaurs</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/collerek/cerebral-centaurs" title="Cerebral Centaurs">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Dynamic Dryads</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/Kronifer/code-jam-9" title="Dynamic Dryads">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Generous Giants</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/bast0006/cj9-generous-giants/" title="Generous Giants">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Genuine Djinn</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/srijal30/genuine-djinn" title="Genuine Djinn">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Gorgeous Ghouls</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/Gorgeous-Ghouls/Blak" title="Gorgeous Ghouls">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Heroic Hydra</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/mkadiya20/heroic-hydra" title="Heroic Hydra">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Kindly Kappa</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/Vthechamp22/kindly-kappa" title="Kindly Kappa">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Kingly Kelpies</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/Kingly-elpies/KinglyKelpies" title="Kingly Kelpies">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Logical Leprechauns</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/AbooMinister25/Curse-of-the-Mites" title="Logical Leprechauns">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Lucky Leucrota</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/lucky-leucrota/cj9-lucky-leucrota" title="Lucky Leucrota">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Muscular Mermaids</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/vonvic/Python-CodeJam-2022-MM" title="Muscular Mermaids">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Old-Fashioned Orcs</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/smileyface12349/old-fashioned-orcs" title="Old-Fashioned Orcs">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+            <p class="has-text-centered">Sassy Snallygasters</p>
+        </div>
+        <div class="column is-half">
+            <p class="has-text-centered"><a href="https://github.com/SFM61319/sassy-snallygasters_code-jam-9" title="Sassy Snallygasters">GitHub</a></p>
+        </div>
+    </div>
+
+    <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+          <p class="has-text-centered">Silly Selkies</p>
+        </div>
+        <div class="column is-half">
+          <p class="has-text-centered"><a href="https://github.com/kguzek/code-jam-2022" title="Silly Selkies">GitHub</a></p>
+        </div>
+      </div>
+
+      <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+          <p class="has-text-centered">Spiffy Sphinxes</p>
+        </div>
+        <div class="column is-half">
+          <p class="has-text-centered"><a href="https://github.com/Sanyok6/Chesstopia" title="Spiffy Sphinxes">GitHub</a></p>
+        </div>
+      </div>
+
+      <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+          <p class="has-text-centered">Stately Satyrs</p>
+        </div>
+        <div class="column is-half">
+          <p class="has-text-centered"><a href="https://github.com/Lime-Parallelogram/cj2022-stately-satyrs" title="Stately Satyrs">GitHub</a></p>
+        </div>
+      </div>
+
+      <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+          <p class="has-text-centered">Tireless Timingila</p>
+        </div>
+        <div class="column is-half">
+          <p class="has-text-centered"><a href="https://github.com/Ibrahim2750mi/tireless-timingila" title="Tireless Timingila">GitHub</a></p>
+        </div>
+      </div>
+
+      <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+          <p class="has-text-centered">Towering Tupilaqs</p>
+        </div>
+        <div class="column is-half">
+          <p class="has-text-centered"><a href="https://github.com/TheFactoryMustGrowLarger/towering-tupilaqs" title="Towering Tupilaqs">GitHub</a></p>
+        </div>
+      </div>
+
+      <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+          <p class="has-text-centered">Valiant Valkyries</p>
+        </div>
+        <div class="column is-half">
+          <p class="has-text-centered"><a href="https://github.com/legosiv/valiant-valkyries" title="Valiant Valkyries">GitHub</a></p>
+        </div>
+      </div>
+
+      <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+          <p class="has-text-centered">Wily Werewolves</p>
+        </div>
+        <div class="column is-half">
+          <p class="has-text-centered"><a href="https://github.com/HarshitJoshi9152/Codejam-2022-pythondiscord" title="Wily Werewolves">GitHub</a></p>
+        </div>
+      </div>
+
+      <div class="columns is-mobile is-centered">
+        <div class="column is-half">
+          <p class="has-text-centered">Zesty Zombies</p>
+        </div>
+        <div class="column is-half">
+          <p class="has-text-centered"><a href="https://github.com/nitinramvelraj/zesty-zombies-2.0" title="Zesty Zombies">GitHub</a></p>
+        </div>
+      </div>
+
+{% 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..c7975679 100644
--- a/pydis_site/templates/events/pages/code-jams/_index.html
+++ b/pydis_site/templates/events/pages/code-jams/_index.html
@@ -31,7 +31,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/pages/game-jams/2020/judging.html b/pydis_site/templates/events/pages/game-jams/2020/judging.html
index 1ec836ac..1cbe2679 100644
--- a/pydis_site/templates/events/pages/game-jams/2020/judging.html
+++ b/pydis_site/templates/events/pages/game-jams/2020/judging.html
@@ -50,7 +50,7 @@
     <p>We require that you make the project easy to comprehend, easy to install, and easy to run. To ensure this, your submission must contain a <code>README.md</code> in your team folder which clearly documents how to interact with it.
     </p>
     <p>
-    First of all, you need to include instructions on exactly how to get your game running. We require that you use a <strong>dependency manager</strong> and encourage you to make a <strong>click-and-play option</strong>, and these should be documented in this section. Please see <a href="/events/game-jam-2020/technical-requirements/">our technical requirements page</a> for more information on this. Remember, we have to judge dozens of submissions, so if every submission can be set up and run by just doing <code>pipenv install</code> and then <code>pipenv run start</code>, it will make our job significantly easier.
+    First of all, you need to include instructions on exactly how to get your game running. We require that you use a <strong>dependency manager</strong> and encourage you to make a <strong>click-and-play option</strong>, and these should be documented in this section. Please see <a href="/events/game-jams/2020/technical-requirements/">our technical requirements page</a> for more information on this. Remember, we have to judge dozens of submissions, so if every submission can be set up and run by just doing <code>pipenv install</code> and then <code>pipenv run start</code>, it will make our job significantly easier.
     </p>
     <p>
     The readme should also contain information about the game, screenshots, a logo if you got it, your team name, instructions on how to play and anything else that helps provide a high-level overview over the game. This is also extremely helpful when we are judging so many projects, so that we can easily see which is which by looking through readmes. For an example of an excellent readme, check out <a href="https://github.com/python-discord/code-jam-6/blob/master/amphibian-alchemists/README.md">this readme created by the Amphibian Alchemists team during Code Jam 6</a>.
diff --git a/pydis_site/templates/events/sidebar/code-jams/10.html b/pydis_site/templates/events/sidebar/code-jams/10.html
new file mode 100644
index 00000000..31b5bda5
--- /dev/null
+++ b/pydis_site/templates/events/sidebar/code-jams/10.html
@@ -0,0 +1,8 @@
+{% 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/10/rules" %}">Rules</a>
+        <a class="panel-block has-text-link" href="{% url "events:page" path="code-jams/10/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>
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..d74470cc 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/10" %}">
+        <img src="{% static "images/events/cj10_2023_banner2.png" %}" alt="Code Jam 2023">
     </a>
 </div>
diff --git a/pydis_site/templates/events/sidebar/code-jams/previous-code-jams.html b/pydis_site/templates/events/sidebar/code-jams/previous-code-jams.html
index 21b2ccb4..b7875ff6 100644
--- a/pydis_site/templates/events/sidebar/code-jams/previous-code-jams.html
+++ b/pydis_site/templates/events/sidebar/code-jams/previous-code-jams.html
@@ -1,6 +1,8 @@
 <div class="box">
     <p class="menu-label">Previous Code Jams</p>
     <ul class="menu-list">
+        <li><a class="has-text-link" href="{% url "events:page" path="code-jams/10" %}">Code Jam 10: Secret Codes</a></li>
+        <li><a class="has-text-link" href="{% url "events:page" path="code-jams/9" %}">Code Jam 9: It's Not A Bug, It's A Feature</a></li>
         <li><a class="has-text-link" href="{% url "events:page" path="code-jams/8" %}">Code Jam 8: Think Inside the Box</a></li>
         <li><a class="has-text-link" href="{% url "events:page" path="code-jams/7" %}">Code Jam 7: Early Internet</a></li>
         <li><a class="has-text-link" href="{% url "events:page" path="code-jams/6" %}">Code Jam 6: Ancient Technology</a></li>
diff --git a/pydis_site/templates/events/sidebar/events-list.html b/pydis_site/templates/events/sidebar/events-list.html
index b97721be..14034702 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 2023</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="is-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="is-black" style="cursor: default;">December: Advent of Code</a></li>
+        <li><a class="has-text-black" style="cursor: default;">March: PyWeek 35</a></li>
+        <li><a class="has-text-black" style="cursor: default;">August/September: Code Jam 2023</a></li>
+        <li><a class="has-text-black" style="cursor: default;">September: PyWeek 36</a></li>
+        <li><a class="has-text-black" style="cursor: default;">TBD: 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..782ef23c 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/10" %}">
+        <img src="{% static "images/events/cj10_2023_banner2.png" %}" alt="Code Jam 2023">
     </a>
 </div>
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index f66c7675..0e592f72 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/cj10_2023_banner3.png" %}" alt="Code Jam 2023">
+    </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/10/">
+              <img src="{% static "images/events/cj10_2023_banner3.png" %}" alt="Code Jam 2023">
+            </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>
 
@@ -174,28 +189,28 @@
         </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"/>
+            <img src="{% static "images/sponsors/netcup.png" %}" alt="netcup" loading="lazy"/>
           </a>
           <a href="https://www.linode.com/?r=3bc18ce876ff43ea31f201b91e8e119c9753f085" class="column is-narrow">
-            <img src="{% static "images/sponsors/linode.png" %}" alt="Linode"/>
+            <img src="{% static "images/sponsors/linode.png" %}" alt="Linode" loading="lazy"/>
           </a>
           <a href="https://jetbrains.com" class="column is-narrow">
-            <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains"/>
+            <img src="{% static "images/sponsors/jetbrains.png" %}" alt="JetBrains" loading="lazy"/>
           </a>
           <a href="https://sentry.io" class="column is-narrow">
-            <img src="{% static "images/sponsors/sentry.png" %}" alt="Sentry"/>
+            <img src="{% static "images/sponsors/sentry.png" %}" alt="Sentry" loading="lazy"/>
           </a>
           <a href="https://notion.so" class="column is-narrow">
-            <img src="{% static "images/sponsors/notion.png" %}" alt="Notion"/>
+            <img src="{% static "images/sponsors/notion.png" %}" alt="Notion" loading="lazy"/>
           </a>
           <a href="https://streamyard.com" class="column is-narrow">
-            <img src="{% static "images/sponsors/streamyard.png" %}" alt="StreamYard"/>
+            <img src="{% static "images/sponsors/streamyard.png" %}" alt="StreamYard" loading="lazy"/>
           </a>
           <a href="https://www.netlify.com/" class="column is-narrow">
-            <img src="{% static "images/sponsors/netlify.png" %}" alt="Netlify"/>
+            <img src="{% static "images/sponsors/netlify.png" %}" alt="Netlify" loading="lazy"/>
           </a>
           <a href="https://www.cloudflare.com/" class="column is-narrow">
-            <img src="{% static "images/sponsors/cloudflare.png" %}" alt="Cloudflare"/>
+            <img src="{% static "images/sponsors/cloudflare.png" %}" alt="Cloudflare" loading="lazy"/>
           </a>
         </div>
       </div>
diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html
index 846f4ab2..10c91007 100644
--- a/pydis_site/templates/home/timeline.html
+++ b/pydis_site/templates/home/timeline.html
@@ -10,130 +10,207 @@
 {% block content %}
   {% include "base/navbar.html" %}
 
-  <section class="cd-timeline js-cd-timeline has-background-white">
+  <section class="cd-timeline js-cd-timeline">
     <div class="container max-width-lg cd-timeline__container">
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
+          <i class="fa fa-comments"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Switch to new paste service</h2>
+          <p class="color-contrast-medium">
+            We migrate over to <a href="https://github.com/supakeen/pinnwand">pinnwand</a>
+            as the service that powers our paste bin over at
+            <a href="https://paste.pythondiscord.com">https://paste.pythondiscord.com/</a>.
+            We made the switch as it comes with native light/dark modes, support for multi-file
+            pastes, additional support for text highlighting languages, and plus, it's written in
+            Python!
+          </p>
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Jul 11th, 2023</span>
+          </div>
+        </div>
+      </div>
+
       <div class="cd-timeline__block">
         <div class="cd-timeline__img cd-timeline__img--picture">
           <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Python Discord is created</h2>
-          <p class="color-contrast-medium has-text-dark has-text-dark"><strong>Joe Banks</strong> becomes one of the owners around 3 days after it
-            is created, and <strong>Leon Sandøy</strong> (lemon) joins the owner team later in the year, when the community
-            has around 300 members.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Retirement of Joe and Sebastiaan</h2>
+          <p class="color-contrast-medium">
+            Having been at the helm of Python Discord for over 5 and 3 years respectively, Joe and
+            Sebastiaan retire and step down. They gain the @Founders role and continue as advisors
+            to the @Directors, the new name of the original @Owners role.
 
+            At the same time, Mina and Zig join Leon as co-directors.
+          </p>
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Jan 8th, 2017</span>
+            <span class="cd-timeline__date">Jan 30th, 2023</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
+          <i class="fa fa-comments"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Python Discord hits 1,000 members</h2>
-          <p class="color-contrast-medium has-text-dark">Our main source of new users at this point is a post on Reddit that
-            happens to get very good SEO. We are one of the top 10 search engine hits for the search term
-            "python discord".</p>
-
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Switch to forum-based help system</h2>
+          <p class="color-contrast-medium">
+            We migrate our help system to use a forum channel, retiring our home-grown rotating help
+            system after 3 years of service and nearly 500,000 help sessions. Forum channels offer
+            a better experience as members can create their own dedicated thread in a discoverable place.
+          </p>
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Nov 10th, 2017</span>
+            <span class="cd-timeline__date">Nov 25th, 2022</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
         <div class="cd-timeline__img cd-timeline__img--picture">
-          <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
+          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-            <div class="cd-timeline__content text-component has-background-white-bis">
-                <h2 class="has-text-dark">Our logo is born. Thanks @Aperture!</h2>
-                <p class="pydis-logo-banner"><img
-                        src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg">
-                </p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Python 3.11 Release Stream</h2>
+          <p class="color-contrast-medium">
+            With the Python 3.10 Release Stream being such a success, we brought it back for the
+            release of Python 3.11. Hosted by Leon, and CPython 3.11 Release Manager, Pablo Galindo,
+            they were joined by other CPython Core Developers. Together, they discuss the specific
+            features and the overall development process of the release.
+          </p>
+
+          <div class="force-aspect-container">
+            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/PGZPSWZSkJI" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen></iframe>
+          </div>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Feb 3rd, 2018</span>
+            <span class="cd-timeline__date">Oct 24th, 2022</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img pastel-lime cd-timeline__img--picture">
+          <i class="fa fa-dice"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">PyDis hits 2,000 members; pythondiscord.com and @Python are live</h2>
-          <p class="color-contrast-medium has-text-dark">The public moderation bot we're using at the time, Rowboat, announces
-            it will be shutting down. We decide that we'll write our own bot to handle moderation, so that we
-            can have more control over its features. We also buy a domain and start making a website in Flask.
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Summer Code Jam 2022 (CJ9)</h2>
+          <p class="color-contrast-medium">
+            We host the 9th Code Jam. This year, teams had to use <b>websockets</b> to create a
+            project based on the theme, <b>It's not a bug, it's a feature</b>. In all, 24 teams
+            submitted their projects. At the end, we held a livestream demoing the top 10 projects
+            and announcing the winner!
           </p>
 
+          <div class="force-aspect-container">
+            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/YZcVjFED6Hg" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen></iframe>
+          </div>
+
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Mar 4th, 2018</span>
+            <span class="cd-timeline__date">July 21st, 2022</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
-          <i class="fa fa-dice"></i>
+        <div style="background-color: grey;" class="cd-timeline__img cd-timeline__img--picture">
+          <i class="fa fa-handshake"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">First code jam with the theme “snakes”</h2>
-          <p class="color-contrast-medium has-text-dark">Our very first Code Jam attracts a handful of users who work in random
-            teams of 2. We ask our participants to write a snake-themed Discord bot. Most of the code written
-            for this jam still lives on in Sir Lancebot, and you can play with it by using the
-            <code>.snakes</code> command. For more information on this event, see <a
-                href="https://pythondiscord.com/pages/code-jams/code-jam-1-snakes-bot/">the event page</a></p>
-
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Partnership with pyqtgraph</h2>
+          <p class="color-contrast-medium">
+            The <code>#pyqtgraph</code> channel is created for the Scientific Graphics and GUI
+            library pyqtgraph, joining <code>#black-formatter</code>.
+          </p>
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Mar 23rd, 2018</span>
+            <span class="cd-timeline__date">May 19th, 2022</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-lime cd-timeline__img--picture">
-          <i class="fa fa-scroll"></i>
+        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
+          <i class="fa fa-robot"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">The privacy policy is created</h2>
-          <p class="color-contrast-medium has-text-dark">Since data privacy is quite important to us, we create a privacy page
-            pretty much as soon as our new bot and site starts collecting some data. To this day, we keep <a
-                href="https://pythondiscord.com/pages/privacy/">our privacy policy</a> up to date with all
-            changes, and since April 2020 we've started doing <a
-                href="https://pythondiscord.notion.site/6784e3a9752444e89d19e65fd4510d8d">monthly data reviews</a>.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Addition of @Sir Robin</h2>
+          <p class="color-contrast-medium">
+            Our arsenal of bots grows! We add @Sir Robin to power and manage all of our future
+            events and to support the Events Team.
+          </p>
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Feb 21st, 2022</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
+          <i class="fa fa-question"></i>
+        </div>
 
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Trivia Night</h2>
+          <p class="color-contrast-medium">
+            How well do you know Python inside out? Members got to find out in a Trivia Night event.
+            Contestants were given questions about Python's internals, its development, and more.
+            To win, contestants had to get the most questions right while being fast to answer.
+          </p>
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">May 21st, 2018</span>
+            <span class="cd-timeline__date">Feb 12th, 2022</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
-          <i class="fa fa-handshake"></i>
+        <div class="cd-timeline__img cd-timeline__img--picture">
+          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Do You Even Python and PyDis merger</h2>
-          <p class="color-contrast-medium has-text-dark">At this point in time, there are only two serious Python communities on
-            Discord - Ours, and one called Do You Even Python. We approach the owners of DYEP with a bold
-            proposal - let's shut down their community, replace it with links to ours, and in return we will let
-            their staff join our staff. This gives us a big boost in members, and eventually leads to @eivl and
-            @Mr. Hemlock joining our Admin team</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Creation of Events Team</h2>
+          <p class="color-contrast-medium">
+            We form the Events Team to organise and run future events. Led by Kat and comprised by
+            staff members, the goal of the team is to ultimately host more events in a more
+            sustainable way.
+          </p>
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Feb 9th, 2022</span>
+          </div>
+        </div>
+      </div>
 
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
+          <i class="fa fa-code"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Deployment of Smarter Resources</h2>
+          <p class="color-contrast-medium">
+            We gave our resources pages some much needed love and
+            <a href="https://www.pythondiscord.com/resources/">
+              reorganised them into a single page</a>,
+            complete with a shiny new resource filter that allows you to more quickly find
+            ones that relate to your interests, experience, learning style, and ability to pay!
+          </p>
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Jun 9th, 2018</span>
+            <span class="cd-timeline__date">Feb 2nd, 2022</span>
           </div>
         </div>
       </div>
@@ -143,152 +220,216 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">PyDis hits 5,000 members and partners with r/Python</h2>
-          <p class="color-contrast-medium has-text-dark">As we continue to grow, we approach the r/Python subreddit and ask to
-            become their official Discord community. They agree, and we become listed in their sidebar, giving
-            us yet another source of new members.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>We hit 300 000 members!</h2>
+          <p class="color-contrast-medium">
+            Thanks to an increasing growth rate, Python Discord's membership count doubled from
+            150,000 to 300,000 in less than a year!
+          </p>
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Jan 19, 2022</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img cd-timeline__img--picture">
+          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>We host the Python 3.10 Release Stream</h2>
+          <p class="color-contrast-medium">
+            Leon and Pablo Galindo, CPython Core Developer and Release Manager, host the Python 3.10
+            Release Stream, joined by other core devs Carol Willing, Irit Katriel, Łukasz Langa, and
+            Brandt Bucher. They talked in-depth about the new features introduced in 3.10, the
+            development of those features, and more!
+          </p>
+
+          <div class="force-aspect-container">
+            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/AHT2l3hcIJg" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen></iframe>
+          </div>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Jun 20th, 2018</span>
+            <span class="cd-timeline__date">Oct 4th, 2021</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
+        <div style="background-color: grey;" class="cd-timeline__img cd-timeline__img--picture">
           <i class="fa fa-handshake"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">PyDis is now partnered with Discord; the vanity URL discord.gg/python is created</h2>
-          <p class="color-contrast-medium has-text-dark">After being rejected for their Partner program several times, we
-            finally get approved. The recent partnership with the r/Python subreddit plays a significant role in
-            qualifying us for this partnership.</p>
-
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Partnership with Black</h2>
+          <p class="color-contrast-medium">
+            We partner with the uncompromising code formatter project, Black, who were looking for a
+            new home for their real-time chat. Python Discord ended up being that home, resulting in
+            the creation of the <code>#black-formatter</code> channel.
+          </p>
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Jul 10th, 2018</span>
+            <span class="cd-timeline__date">May 24th, 2021</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
+        <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
           <i class="fa fa-dice"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">First Hacktoberfest PyDis event; @Sir Lancebot is created</h2>
-          <p class="color-contrast-medium has-text-dark">We create a second bot for our community and fill it up with simple,
-            fun and relatively easy issues. The idea is to create an approachable arena for our members to cut
-            their open-source teeth on, and to provide lots of help and hand-holding for those who get stuck.
-            We're training our members to be productive contributors in the open-source ecosystem.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Summer Code Jam 2021 (CJ8)</h2>
+          <p class="color-contrast-medium">
+            We host the 8th now-annual Code Jam. Teams had to create a program with an text-based user
+            interface (TUI), all designed around the theme of “think inside the box.” Ultimately, 51
+            teams submitted projects.
+            <a href="https://www.pythondiscord.com/events/code-jams/8/">
+              The winning submissions are listed on our website.
+            </a>
+          </p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Oct 1st, 2018</span>
+            <span class="cd-timeline__date">July 9, 2021</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img pastel-purple cd-timeline__img--picture">
+          <i class="fa fa-palette"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">PyDis hits 10,000 members</h2>
-          <p class="color-contrast-medium has-text-dark">We partner with RLBot, move from GitLab to GitHub, and start putting
-            together the first Advent of Code event.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Inaugural run of Pixels</h2>
+          <p class="color-contrast-medium">
+            Inspired by the subreddit, r/place, Pixels was our collaborative canvas event held
+            between May 25 to June 14, providing a beginner-friendly API to paint pixels on a
+            virtual canvas.
+          </p>
+          <p class="color-contrast-medium">
+            Later, we released <a href="https://blog.pythondiscord.com/pixels-summer-2021/">a blog post</a>
+            summarizing what happened, our motives, and some stories from during development.
+          </p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Nov 24th, 2018</span>
+            <span class="cd-timeline__date">May 24, 2021</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
-          <i class="fa fa-code"></i>
+        <div class="cd-timeline__img cd-timeline__img--picture">
+          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">django-simple-bulma is released on PyPi</h2>
-          <p class="color-contrast-medium has-text-dark">Our very first package on PyPI, <a
-              href="https://pypi.org/project/django-simple-bulma/">django-simple-bulma</a> is a package that
-            sets up the Bulma CSS framework for your Django application and lets you configure everything in
-            settings.py.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Owners become PSF Fellows</h2>
+          <p class="color-contrast-medium">Joe, Leon, and Sebastiaan
+            <a href="https://pyfound.blogspot.com/2021/04/python-software-foundation-fellow.html">
+              are recognized as Python Software Foundation Fellows
+            </a>
+            for their substantial contributions to the Python ecosystem by fostering
+            Python Discord.
+          </p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Dec 19th, 2018</span>
+            <span class="cd-timeline__date">April 23, 2021</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
-          <i class="fa fa-users"></i>
+        <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
+          <i class="fa fa-youtube-play"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">PyDis hits 15,000 members; the “hot ones special” video is released</h2>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Summer Code Jam 2020 Highlights</h2>
+          <p class="color-contrast-medium">
+            We release a new video to our YouTube showing the best projects from the Summer Code Jam 2020.
+            Better late than never!
+          </p>
+
           <div class="force-aspect-container">
-            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
+            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/g9cnp4W0P54" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Apr 8th, 2019</span>
+            <span class="cd-timeline__date">Mar 21st, 2021</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
-          <i class="fa fa-code"></i>
+        <div class="cd-timeline__img pastel-purple cd-timeline__img--picture">
+          <i class="fa fa-comment"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">The Django rewrite of pythondiscord.com is now live!</h2>
-          <p class="color-contrast-medium has-text-dark">The site is getting more and more complex, and it's time for a rewrite.
-            We decide to go for a different stack, and build a website based on Django, DRF, Bulma and
-            PostgreSQL.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>New feature: Weekly discussion channel</h2>
+          <p class="color-contrast-medium">Every week (or two weeks), we'll be posting a new topic to discuss in a
+            channel called <b>#weekly-topic-discussion</b>. Our inaugural topic is a PyCon talk by Anthony Shaw called
+            <b>Wily Python: Writing simpler and more maintainable Python.</b></a>.
+          </p>
+
+          <div class="force-aspect-container">
+            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/dqdsNoApJ80" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen></iframe>
+          </div>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Sep 15, 2019</span>
+            <span class="cd-timeline__date">Mar 13th, 2021</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-lime cd-timeline__img--picture">
-          <i class="fa fa-scroll"></i>
+        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
+          <i class="fa fa-microphone"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">The code of conduct is created</h2>
-          <p class="color-contrast-medium has-text-dark">Inspired by the Adafruit, Rust and Django communities, an essential
-            community pillar is created; Our <a href="https://pythondiscord.com/pages/code-of-conduct/">Code of
-              Conduct.</a></p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>We're on the Teaching Python podcast!</h2>
+          <p class="color-contrast-medium">Leon joins Sean and Kelly on the Teaching Python podcast to discuss how the pandemic has
+            changed the way we learn, and what role communities like Python Discord can play in this new world.
+            You can find the episode <a href="https://www.teachingpython.fm/63">at teachingpython.fm</a>.
+          </p>
+
+          <iframe width="100%" height="166" frameborder="0" scrolling="no"
+                src="https://player.fireside.fm/v2/UIYXtbeL+qOjGAsKi?theme=dark"
+          ></iframe>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Oct 26th, 2019</span>
+            <span class="cd-timeline__date">Mar 13th, 2021</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img cd-timeline__img--picture">
-          <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
+        <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
+          <i class="fa fa-microphone"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Sebastiaan Zeef becomes an owner</h2>
-          <p class="color-contrast-medium has-text-dark">After being a long time active contributor to our projects and the driving
-            force behind many of our events, Sebastiaan Zeef joins the Owners Team alongside Joe & Leon.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Leon Sandøy appears on Talk Python To Me</h2>
+          <p class="color-contrast-medium">Leon goes on the Talk Python to Me podcast with Michael Kennedy
+            to discuss the history of Python Discord, the critical importance of culture, and how to run a massive
+            community. You can find the episode <a href="https://talkpython.fm/episodes/show/305/python-community-at-python-discord"> at talkpython.fm</a>.
+          </p>
+
+          <iframe width="100%" height="166" scrolling="no" frameborder="no"
+               src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/996083146&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false">
+          </iframe>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Sept 22nd, 2019</span>
+            <span class="cd-timeline__date">Mar 1st, 2021</span>
           </div>
         </div>
       </div>
@@ -298,54 +439,73 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">PyDis hits 30,000 members</h2>
-          <p class="color-contrast-medium has-text-dark">More than tripling in size since the year before, the community hits
-            30000 users. At this point, we're probably the largest Python chat community on the planet.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>We now have 150,000 members!</h2>
+          <p class="color-contrast-medium">Our growth continues to accelerate.</p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Dec 22nd, 2019</span>
+            <span class="cd-timeline__date">Feb 18th, 2021</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
         <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
-          <i class="fa fa-dice"></i>
+          <i class="fa fa-music"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy</h2>
-          <p class="color-contrast-medium has-text-dark">Our Code Jams are becoming an increasingly big deal, and the Kivy core
-            developers join us to judge the event and help out our members during the event. One of them,
-            @tshirtman, even joins our staff!</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>We release The PEP 8 song</h2>
+          <p class="color-contrast-medium">We release the PEP 8 song on our YouTube channel, which finds tens of
+            thousands of listeners!</p>
 
           <div class="force-aspect-container">
-            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0"
+            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/hgI0p1zf31k" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Jan 17, 2020</span>
+            <span class="cd-timeline__date">February 8th, 2021</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
-          <i class="fa fa-comments"></i>
+        <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
+          <i class="fa fa-snowflake-o"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">The new help channel system is live</h2>
-          <p class="color-contrast-medium has-text-dark">We release our dynamic help-channel system, which allows you to claim
-            your very own help channel instead of fighting over the static help channels. We release a <a
-                href="https://pythondiscord.com/pages/resources/guides/help-channels/">Help Channel Guide</a> to
-            help our members fully understand how the system works.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Advent of Code attracts hundreds of participants</h2>
+          <p class="color-contrast-medium">
+            A total of 443 Python Discord members sign up to be part of
+            <a href="https://adventofcode.com/">Eric Wastl's excellent Advent of Code event</a>.
+            As always, we provide dedicated announcements, scoreboards, bot commands and channels for our members
+            to enjoy the event in.
+
+          </p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Apr 5th, 2020</span>
+            <span class="cd-timeline__date">December 1st - 25th, 2020</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
+          <i class="fa fa-wrench"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>We migrate all our infrastructure to Kubernetes</h2>
+          <p class="color-contrast-medium">As our tech stack grows, we decide to migrate all our services over to a
+            container orchestration paradigm via Kubernetes. This gives us better control and scalability.
+            <b>Joe Banks</b> takes on the role as DevOps Lead.
+          </p>
+
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Nov 29th, 2020</span>
           </div>
         </div>
       </div>
@@ -355,54 +515,90 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Python Discord hits 40,000 members, and is now bigger than Liechtenstein.</h2>
-          <p class="color-contrast-medium has-text-dark"><img
-              src="https://cdn.discordapp.com/attachments/354619224620138496/699666518476324954/unknown.png">
-          </p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Python Discord hits 100,000 members!</h2>
+          <p class="color-contrast-medium">Only six months after hitting 40,000 users, we hit 100,000 users. A
+            monumental milestone,
+            and one we're very proud of. To commemorate it, we create this timeline.</p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Apr 14, 2020</span>
+            <span class="cd-timeline__date">Oct 22nd, 2020</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-purple cd-timeline__img--picture">
-          <i class="fa fa-gamepad"></i>
+        <div class="cd-timeline__img cd-timeline__img--picture">
+          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology</h2>
-          <p class="color-contrast-medium has-text-dark">The creator of Arcade, Paul Vincent Craven, joins us as a judge.
-            Several of the Code Jam participants also end up getting involved contributing to the Arcade
-            repository.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Python Discord hosts the 2020 CPython Core Developer Q&A</h2>
+          <div class="force-aspect-container">
+            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen></iframe>
+          </div>
+
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Oct 21st, 2020</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
+          <i class="fa fa-handshake"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Python Discord is now the new home of the PyWeek event!</h2>
+          <p class="color-contrast-medium">PyWeek, a game jam that has been running since 2005, joins Python
+            Discord as one of our official events. Find more information about PyWeek on <a
+                href="https://pyweek.org/">their official website</a>.</p>
+
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Aug 16th, 2020</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
+          <i class="fa fa-dice"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology</h2>
+          <p class="color-contrast-medium">Sponsored by the Django Software Foundation and JetBrains, the Summer
+            Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic
+            projects. Check them out in our judge stream below:</p>
 
           <div class="force-aspect-container">
-            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0"
+            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Apr 17th, 2020</span>
+            <span class="cd-timeline__date">Jul 31st, 2020</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
-          <i class="fa fa-comments"></i>
+        <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
+          <i class="fa fa-chart-bar"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">ModMail is now live</h2>
-          <p class="color-contrast-medium has-text-dark">Having originally planned to write our own ModMail bot from scratch, we
-            come across an exceptionally good <a href="https://github.com/kyb3r/modmail">ModMail bot by
-              kyb3r</a> and decide to just self-host that one instead.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Python Discord Public Statistics are now live</h2>
+          <p class="color-contrast-medium">After getting numerous requests to publish beautiful data on member
+            count and channel use, we create <a href="https://stats.pythondiscord.com/">stats.pythondiscord.com</a> for
+            all to enjoy.</p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">May 25th, 2020</span>
+            <span class="cd-timeline__date">Jun 4th, 2020</span>
           </div>
         </div>
       </div>
@@ -412,9 +608,9 @@
           <i class="fa fa-handshake"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Python Discord is now listed on python.org/community</h2>
-          <p class="color-contrast-medium has-text-dark">After working towards this goal for months, we finally work out an
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Python Discord is now listed on python.org/community</h2>
+          <p class="color-contrast-medium">After working towards this goal for months, we finally work out an
             arrangement with the PSF that allows us to be listed on that most holiest of websites:
             https://python.org/. <a href="https://youtu.be/yciX2meIkXI?t=3">There was much rejoicing.</a></p>
 
@@ -425,77 +621,99 @@
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
-          <i class="fa fa-chart-bar"></i>
+        <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
+          <i class="fa fa-comments"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Python Discord Public Statistics are now live</h2>
-          <p class="color-contrast-medium has-text-dark">After getting numerous requests to publish beautiful data on member
-            count and channel use, we create <a href="https://stats.pythondiscord.com/">stats.pythondiscord.com</a> for
-            all to enjoy.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>ModMail is now live</h2>
+          <p class="color-contrast-medium">Having originally planned to write our own ModMail bot from scratch, we
+            come across an exceptionally good <a href="https://github.com/kyb3r/modmail">ModMail bot by
+              kyb3r</a> and decide to just self-host that one instead.</p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Jun 4th, 2020</span>
+            <span class="cd-timeline__date">May 25th, 2020</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
-          <i class="fa fa-dice"></i>
+        <div class="cd-timeline__img pastel-purple cd-timeline__img--picture">
+          <i class="fa fa-gamepad"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology</h2>
-          <p class="color-contrast-medium has-text-dark">Sponsored by the Django Software Foundation and JetBrains, the Summer
-            Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic
-            projects. Check them out in our judge stream below:</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology</h2>
+          <p class="color-contrast-medium">The creator of Arcade, Paul Vincent Craven, joins us as a judge.
+            Several of the Code Jam participants also end up getting involved contributing to the Arcade
+            repository.</p>
 
           <div class="force-aspect-container">
-            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0"
+            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Jul 31st, 2020</span>
+            <span class="cd-timeline__date">Apr 17th, 2020</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
-          <i class="fa fa-handshake"></i>
+        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
+          <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Python Discord is now the new home of the PyWeek event!</h2>
-          <p class="color-contrast-medium has-text-dark">PyWeek, a game jam that has been running since 2005, joins Python
-            Discord as one of our official events. Find more information about PyWeek on <a
-                href="https://pyweek.org/">their official website</a>.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Python Discord hits 40,000 members, and is now bigger than Liechtenstein.</h2>
+          <p class="color-contrast-medium"><img
+              src="https://cdn.discordapp.com/attachments/354619224620138496/699666518476324954/unknown.png">
+          </p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Aug 16th, 2020</span>
+            <span class="cd-timeline__date">Apr 14, 2020</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img cd-timeline__img--picture">
-          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
+        <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
+          <i class="fa fa-comments"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Python Discord hosts the 2020 CPython Core Developer Q&A</h2>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>The new help channel system is live</h2>
+          <p class="color-contrast-medium">We release our dynamic help-channel system, which allows you to claim
+            your very own help channel instead of fighting over the static help channels. We release a <a
+                href="https://pythondiscord.com/pages/resources/guides/help-channels/">Help Channel Guide</a> to
+            help our members fully understand how the system works.</p>
+
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Apr 5th, 2020</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
+          <i class="fa fa-dice"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy</h2>
+          <p class="color-contrast-medium">Our Code Jams are becoming an increasingly big deal, and the Kivy core
+            developers join us to judge the event and help out our members during the event. One of them,
+            @tshirtman, even joins our staff!</p>
+
           <div class="force-aspect-container">
-            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0"
+            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Oct 21st, 2020</span>
+            <span class="cd-timeline__date">Jan 17, 2020</span>
           </div>
         </div>
       </div>
@@ -505,76 +723,100 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Python Discord hits 100,000 members!</h2>
-          <p class="color-contrast-medium has-text-dark">Only six months after hitting 40,000 users, we hit 100,000 users. A
-            monumental milestone,
-            and one we're very proud of. To commemorate it, we create this timeline.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>PyDis hits 30,000 members</h2>
+          <p class="color-contrast-medium">More than tripling in size since the year before, the community hits
+            30000 users. At this point, we're probably the largest Python chat community on the planet.</p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Oct 22nd, 2020</span>
+            <span class="cd-timeline__date">Dec 22nd, 2019</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
-          <i class="fa fa-wrench"></i>
+        <div class="cd-timeline__img cd-timeline__img--picture">
+          <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">We migrate all our infrastructure to Kubernetes</h2>
-          <p class="color-contrast-medium has-text-dark">As our tech stack grows, we decide to migrate all our services over to a
-            container orchestration paradigm via Kubernetes. This gives us better control and scalability.
-            <b>Joe Banks</b> takes on the role as DevOps Lead.
-          </p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Sebastiaan Zeef becomes an owner</h2>
+          <p class="color-contrast-medium">After being a long time active contributor to our projects and the driving
+            force behind many of our events, Sebastiaan Zeef joins the Owners Team alongside Joe & Leon.</p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Nov 29th, 2020</span>
+            <span class="cd-timeline__date">Sept 22nd, 2019</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
-          <i class="fa fa-snowflake-o"></i>
+        <div class="cd-timeline__img pastel-lime cd-timeline__img--picture">
+          <i class="fa fa-scroll"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Advent of Code attracts hundreds of participants</h2>
-          <p class="color-contrast-medium has-text-dark">
-            A total of 443 Python Discord members sign up to be part of
-            <a href="https://adventofcode.com/">Eric Wastl's excellent Advent of Code event</a>.
-            As always, we provide dedicated announcements, scoreboards, bot commands and channels for our members
-            to enjoy the event in.
-
-          </p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>The code of conduct is created</h2>
+          <p class="color-contrast-medium">Inspired by the Adafruit, Rust and Django communities, an essential
+            community pillar is created; Our <a href="https://pythondiscord.com/pages/code-of-conduct/">Code of
+              Conduct.</a></p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">December 1st - 25th, 2020</span>
+            <span class="cd-timeline__date">Oct 26th, 2019</span>
           </div>
         </div>
       </div>
 
-
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
-          <i class="fa fa-music"></i>
+        <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
+          <i class="fa fa-code"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">We release The PEP 8 song</h2>
-          <p class="color-contrast-medium has-text-dark">We release the PEP 8 song on our YouTube channel, which finds tens of
-            thousands of listeners!</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>The Django rewrite of pythondiscord.com is now live!</h2>
+          <p class="color-contrast-medium">The site is getting more and more complex, and it's time for a rewrite.
+            We decide to go for a different stack, and build a website based on Django, DRF, Bulma and
+            PostgreSQL.</p>
+
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Sep 15, 2019</span>
+          </div>
+        </div>
+      </div>
 
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
+          <i class="fa fa-users"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>PyDis hits 15,000 members; the “hot ones special” video is released</h2>
           <div class="force-aspect-container">
-            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/hgI0p1zf31k" frameborder="0"
+            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0"
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                     allowfullscreen></iframe>
           </div>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">February 8th, 2021</span>
+            <span class="cd-timeline__date">Apr 8th, 2019</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-orange cd-timeline__img--picture">
+          <i class="fa fa-code"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>django-simple-bulma is released on PyPi</h2>
+          <p class="color-contrast-medium">Our very first package on PyPI, <a
+              href="https://pypi.org/project/django-simple-bulma/">django-simple-bulma</a> is a package that
+            sets up the Bulma CSS framework for your Django application and lets you configure everything in
+            settings.py.</p>
+
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Dec 19th, 2018</span>
           </div>
         </div>
       </div>
@@ -584,104 +826,191 @@
           <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">We now have 150,000 members!</h2>
-          <p class="color-contrast-medium has-text-dark">Our growth continues to accelerate.</p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>PyDis hits 10,000 members</h2>
+          <p class="color-contrast-medium">We partner with RLBot, move from GitLab to GitHub, and start putting
+            together the first Advent of Code event.</p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Feb 18th, 2021</span>
+            <span class="cd-timeline__date">Nov 24th, 2018</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-green cd-timeline__img--picture">
-          <i class="fa fa-microphone"></i>
+        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
+          <i class="fa fa-dice"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Leon Sandøy appears on Talk Python To Me</h2>
-          <p class="color-contrast-medium has-text-dark">Leon goes on the Talk Python to Me podcast with Michael Kennedy
-            to discuss the history of Python Discord, the critical importance of culture, and how to run a massive
-            community. You can find the episode <a href="https://talkpython.fm/episodes/show/305/python-community-at-python-discord"> at talkpython.fm</a>.
-          </p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>First Hacktoberfest PyDis event; @Sir Lancebot is created</h2>
+          <p class="color-contrast-medium">We create a second bot for our community and fill it up with simple,
+            fun and relatively easy issues. The idea is to create an approachable arena for our members to cut
+            their open-source teeth on, and to provide lots of help and hand-holding for those who get stuck.
+            We're training our members to be productive contributors in the open-source ecosystem.</p>
 
-          <iframe width="100%" height="166" scrolling="no" frameborder="no"
-               src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/996083146&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false">
-          </iframe>
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Oct 1st, 2018</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
+          <i class="fa fa-handshake"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>PyDis is now partnered with Discord; the vanity URL discord.gg/python is created</h2>
+          <p class="color-contrast-medium">After being rejected for their Partner program several times, we
+            finally get approved. The recent partnership with the r/Python subreddit plays a significant role in
+            qualifying us for this partnership.</p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Mar 1st, 2021</span>
+            <span class="cd-timeline__date">Jul 10th, 2018</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
+          <i class="fa fa-users"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>PyDis hits 5,000 members and partners with r/Python</h2>
+          <p class="color-contrast-medium">As we continue to grow, we approach the r/Python subreddit and ask to
+            become their official Discord community. They agree, and we become listed in their sidebar, giving
+            us yet another source of new members.</p>
+
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Jun 20th, 2018</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
         <div class="cd-timeline__img pastel-pink cd-timeline__img--picture">
-          <i class="fa fa-microphone"></i>
+          <i class="fa fa-handshake"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">We're on the Teaching Python podcast!</h2>
-          <p class="color-contrast-medium has-text-dark">Leon joins Sean and Kelly on the Teaching Python podcast to discuss how the pandemic has
-            changed the way we learn, and what role communities like Python Discord can play in this new world.
-            You can find the episode <a href="https://teachingpython.fm/63"> at teachingpython.fm</a>.
-          </p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Do You Even Python and PyDis merger</h2>
+          <p class="color-contrast-medium">At this point in time, there are only two serious Python communities on
+            Discord - Ours, and one called Do You Even Python. We approach the owners of DYEP with a bold
+            proposal - let's shut down their community, replace it with links to ours, and in return we will let
+            their staff join our staff. This gives us a big boost in members, and eventually leads to @eivl and
+            @Mr. Hemlock joining our Admin team</p>
 
-          <iframe width="100%" height="166" frameborder="0" scrolling="no"
-                src="https://player.fireside.fm/v2/UIYXtbeL+qOjGAsKi?theme=dark"
-          ></iframe>
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Jun 9th, 2018</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-lime cd-timeline__img--picture">
+          <i class="fa fa-scroll"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>The privacy policy is created</h2>
+          <p class="color-contrast-medium">Since data privacy is quite important to us, we create a privacy page
+            pretty much as soon as our new bot and site starts collecting some data. To this day, we keep <a
+                href="https://pythondiscord.com/pages/privacy/">our privacy policy</a> up to date with all
+            changes, and since April 2020 we've started doing <a
+                href="https://pythondiscord.notion.site/6784e3a9752444e89d19e65fd4510d8d">monthly data reviews</a>.</p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Mar 13th, 2021</span>
+            <span class="cd-timeline__date">May 21st, 2018</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-purple cd-timeline__img--picture">
-          <i class="fa fa-comment"></i>
+        <div class="cd-timeline__img pastel-blue cd-timeline__img--picture">
+          <i class="fa fa-dice"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">New feature: Weekly discussion channel</h2>
-          <p class="color-contrast-medium has-text-dark">Every week (or two weeks), we'll be posting a new topic to discuss in a
-            channel called <b>#weekly-topic-discussion</b>. Our inaugural topic is a PyCon talk by Anthony Shaw called
-            <b>Wily Python: Writing simpler and more maintainable Python.</b></a>.
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>First code jam with the theme “snakes”</h2>
+          <p class="color-contrast-medium">Our very first Code Jam attracts a handful of users who work in random
+            teams of 2. We ask our participants to write a snake-themed Discord bot. Most of the code written
+            for this jam still lives on in Sir Lancebot, and you can play with it by using the
+            <code>.snakes</code> command. For more information on this event, see <a
+                href="https://pythondiscord.com/pages/code-jams/code-jam-1-snakes-bot/">the event page</a></p>
+
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Mar 23rd, 2018</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
+          <i class="fa fa-users"></i>
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>PyDis hits 2,000 members; pythondiscord.com and @Python are live</h2>
+          <p class="color-contrast-medium">The public moderation bot we're using at the time, Rowboat, announces
+            it will be shutting down. We decide that we'll write our own bot to handle moderation, so that we
+            can have more control over its features. We also buy a domain and start making a website in Flask.
           </p>
 
-          <div class="force-aspect-container">
-            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/dqdsNoApJ80" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen></iframe>
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Mar 4th, 2018</span>
           </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img cd-timeline__img--picture">
+          <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
+        </div>
+
+            <div class="cd-timeline__content has-background-white-bis text-component">
+                <h2>Our logo is born. Thanks @Aperture!</h2>
+                <p class="pydis-logo-banner"><img
+                        src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_banner/logo_site_banner.svg">
+                </p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Mar 13th, 2021</span>
+            <span class="cd-timeline__date">Feb 3rd, 2018</span>
           </div>
         </div>
       </div>
 
       <div class="cd-timeline__block">
-        <div class="cd-timeline__img pastel-red cd-timeline__img--picture">
-          <i class="fa fa-youtube-play"></i>
+        <div class="cd-timeline__img pastel-dark-blue cd-timeline__img--picture">
+          <i class="fa fa-users"></i>
         </div>
 
-        <div class="cd-timeline__content text-component has-background-white-bis">
-          <h2 class="has-text-dark">Summer Code Jam 2020 Highlights</h2>
-          <p class="color-contrast-medium has-text-dark">
-            We release a new video to our YouTube showing the best projects from the Summer Code Jam 2020.
-            Better late than never!
-          </p>
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Python Discord hits 1,000 members</h2>
+          <p class="color-contrast-medium">Our main source of new users at this point is a post on Reddit that
+            happens to get very good SEO. We are one of the top 10 search engine hits for the search term
+            "python discord".</p>
 
-          <div class="force-aspect-container">
-            <iframe class="force-aspect-content" src="https://www.youtube.com/embed/g9cnp4W0P54" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowfullscreen></iframe>
+          <div class="flex justify-between items-center">
+            <span class="cd-timeline__date">Nov 10th, 2017</span>
           </div>
+        </div>
+      </div>
+
+      <div class="cd-timeline__block">
+        <div class="cd-timeline__img cd-timeline__img--picture">
+          <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
+        </div>
+
+        <div class="cd-timeline__content has-background-white-bis text-component">
+          <h2>Python Discord is created</h2>
+          <p class="color-contrast-medium"><strong>Joe Banks</strong> becomes one of the owners around 3 days after it
+            is created, and <strong>Leon Sandøy</strong> (lemon) joins the owner team later in the year, when the community
+            has around 300 members.</p>
 
           <div class="flex justify-between items-center">
-            <span class="cd-timeline__date">Mar 21st, 2021</span>
+            <span class="cd-timeline__date">Jan 8th, 2017</span>
           </div>
         </div>
       </div>
diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index b86947b9..b082c460 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -2,7 +2,7 @@
 {% load to_kebabcase %}
 {% load get_category_icon %}
 
-<div class="box resource-box has-background-white-bis {{ resource.css_classes }}">
+<div class="box resource-box has-background-white-bis {{ resource.css_classes }}" data-resource-name="{{ resource.name }}">
     {% if 'title_url' in resource %}
         <a href="{{ resource.title_url }}">
             {% include "resources/resource_box_header.html" %}
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 9c76bc8b..c728b6b4 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -16,6 +16,7 @@
     <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 %}
@@ -27,18 +28,33 @@
             <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>
+                        <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 is-white has-background-white-bis">
                             <div class="is-flex ml-auto">
-                                <div>
+                                <div id="tag-pool">
                                     {# A filter tag for when there are no filters active #}
-                                    <span class="no-tags-selected tag has-background-disabled has-text-disabled ml-2 mt-2 has-background-white-ter">
-                                            <i class="fas fa-ban mr-1"></i>
+                                    <span class="tag no-tags-selected is-secondary ml-2 mt-2 has-background-white-ter">
+                                            <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" %}
@@ -152,7 +168,7 @@
 
                 {# Resource cards #}
                 <div class="content is-flex is-justify-content-center">
-                    <div>
+                    <div class="container is-fullwidth">
                         {% for resource in resources.values %}
                             {% include "resources/resource_box.html" %}
                         {% endfor %}
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 }}
author	hedy <[email protected]>	2023-12-14 20:28:17 +0800
committer	hedy <[email protected]>	2023-12-14 20:28:17 +0800
commit	449c08fd5459b2f804dbf825086ec1dd0f244d8a (patch)
tree	e4589cb227cdb2e611bcbf9b02ea481fe24cdb34 /pydis_site/templates
parent	Resize theme switch (diff)
parent	Merge pull request #1173 from python-discord/dependabot/pip/sentry-sdk-1.39.0 (diff)