Merge branch 'main' into otn_softdel

46 files changed, 829 insertions, 202 deletions

diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
index efc08040..4208f727 100644
--- a/.github/workflows/deploy.yaml
+++ b/.github/workflows/deploy.yaml
@@ -44,3 +44,9 @@ jobs:
               site/deployment.yaml
           images: 'ghcr.io/python-discord/site:${{ steps.sha_tag.outputs.tag }}'
           kubectl-version: 'latest'
+
+      - name: Purge Cloudflare Edge Cache
+        uses: jakejarvis/cloudflare-purge-action@master
+        env:
+          CLOUDFLARE_ZONE: 989c984a358bfcd1e9b9d188cc86c1df
+          CLOUDFLARE_TOKEN: ${{ secrets.CLOUDFLARE_CACHE_TOKEN }}
diff --git a/.gitignore b/.gitignore
index e8a4d31f..e4ad2c19 100644
--- a/.gitignore
+++ b/.gitignore
@@ -116,6 +116,9 @@ rethinkdb_data/
 # Node modules
 node_modules/
 
+# User configuration
+docker-compose.override.yml
+
 pip-wheel-metadata/
 staticfiles/
 
diff --git a/docker-compose.yml b/docker-compose.yml
index 1f49f1f3..05867a46 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -11,7 +11,7 @@
 version: "3.6"
 services:
   postgres:
-    image: postgres:12-alpine
+    image: postgres:13-alpine
     ports:
       - "127.0.0.1:7777:5432"
     environment:
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index 5af383b4..00000000
--- a/docs/README.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Documentation
-
-This directory contains useful documentation for working with and using our site.
-
-## Table of contents
-
-* [Setup guide](setup.md)
-
-  * [PostgreSQL setup](setup.md#postgresql-setup)
-
-  * [Development with Docker](setup.md#development-with-docker)
-
-  * [Development with `pip`](setup.md#development-with-pip)
-
-> Note: If you're looking to add redirects to the site, the `redirects` app is **NOT** the way to go.
-> Convenience redirects should use our [Cloudflare Worker](https://github.com/python-discord/workers/tree/main/short-urls).
-> Ask in the server if you have any questions!
diff --git a/docs/configuration.md b/docs/configuration.md
deleted file mode 100644
index 037f029f..00000000
--- a/docs/configuration.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Configuration
-The website is configured through the following environment variables:
-
-## Essential
-- **`DATABASE_URL`**: A string specifying the PostgreSQL database to connect to,
-  in the form `postgresql://user:password@host/database`, such as
-  `postgresql://joethedestroyer:ihavemnesia33@localhost/pysite_dev`
-
-- **`DEBUG`**: Controls Django's internal debugging setup. Enable this when
-  you're developing locally. Optional, defaults to `False`.
-
-- **`LOG_LEVEL`**: Any valid Python `logging` module log level - one of `DEBUG`,
-  `INFO`, `WARN`, `ERROR` or `CRITICAL`. When using debug mode, this defaults to
-  `INFO`. When testing, defaults to `ERROR`. Otherwise, defaults to `WARN`.
-
-## Deployment
-- **`ALLOWED_HOSTS`**: A comma-separated lists of alternative hosts to allow to
-  host the website on, when `DEBUG` is not set. Optional, defaults to the
-  `pythondiscord.com` family of domains.
-
-- **`SECRET_KEY`**: The secret key used in various parts of Django. Keep this
-  secret as the name suggests! This is managed for you in debug setups.
-
-- **`STATIC_ROOT`**: The root in which `python manage.py collectstatic` collects
-  static files. Optional, defaults to `/var/www/pythondiscord.com`.
diff --git a/docs/setup.md b/docs/setup.md
deleted file mode 100644
index d88021cc..00000000
--- a/docs/setup.md
+++ /dev/null
@@ -1,91 +0,0 @@
-# Setup
-
-Setting up the Python site for local development
-is quick and easy using `pip`.
-Alternatively, you can set it up using Docker.
-Both of these methods are documented here.
-
-## PostgreSQL setup
-
-Install PostgreSQL according to its documentation.
-Then, create databases and users:
-
-```sql
-$ psql -qd postgres
-postgres=# CREATE USER pysite WITH CREATEDB;
-postgres=# CREATE DATABASE pysite OWNER pysite;
-```
-
-Using different databases for development
-and tests is recommended because Django
-will expect an empty database when running tests.
-Now that PostgreSQL is set up, simply set the proper database URL
-in your environment variables:
-
-```sh
-export DATABASE_URL=postgres://pysite@localhost/pysite
-```
-
-After this step, inside the `.env` file, set the `SECRET_KEY` variable which can be anything you like.
-
-A simpler approach to automatically configuring this might come in the
-near future - if you have any suggestions, please let us know!
-
-## Development with Docker
-
-To quickly set up the site locally, you can use Docker.
-You will need Docker itself and `docker-compose` -
-you can omit the latter if you want to use PostgreSQL on
-your host. Refer to the docker documentation on how to install Docker.
-
-If you want to set the site up using `docker-compose`, simply run
-
-```sh
-docker-compose up
-```
-
-and it will do its magic.
-
-Otherwise, you need to set a bunch of environment variables (or pass them along to
-the container). You will also need to have a running PostgreSQL instance if you want
-to run on your host's PostgreSQL instance.
-
-## Development with `pip`
-
-This is the recommended way if you wish to quickly test your changes and don't want
-the overhead that Docker brings.
-
-Follow the PostgreSQL setup instructions above. Then, create a virtual environment
-for the project. If you're new to this, you may want to check out [Installing packages
-using pip and virtualenv](https://packaging.python.org/guides/installing-using-pip-and-virtualenv/)
-from the Python Packaging User Guide.
-
-Enter the virtual environment. Now you can run
-
-```sh
-pip install -e .[lint,test]
-```
-
-to install base dependencies along with lint and test dependencies.
-
-To run tests, use `python manage.py test`.
-
-## Hosts file
-
-Make sure you add the following to your hosts file:
-
-```sh
-127.0.0.1   pythondiscord.local
-127.0.0.1   api.pythondiscord.local
-127.0.0.1   staff.pythondiscord.local
-127.0.0.1   admin.pythondiscord.local
-```
-When trying to access the site, you'll be using the domains above instead of the usual `localhost:8000`.
-
-Finally, you will need to set the environment variable `DEBUG=1`. If you have `python-dotenv` installed, you can put this into a
- `.env` file to have it exported automatically. It's also recommended to
-export `LOG_LEVEL=INFO` when using `DEBUG=1` if you don't want super verbose logs.
-
-To run the server, run `python manage.py runserver`. If it gives you an error saying
-`django.core.exceptions.ImproperlyConfigured: Set the DATABASE_URL environment variable` please make sure the server that your postgres database is located at is running
-and run the command `$(export cat .env)`. Happy hacking!
diff --git a/pydis_site/apps/api/migrations/0070_auto_20210618_2114.py b/pydis_site/apps/api/migrations/0070_auto_20210618_2114.py
new file mode 100644
index 00000000..1d25e421
--- /dev/null
+++ b/pydis_site/apps/api/migrations/0070_auto_20210618_2114.py
@@ -0,0 +1,19 @@
+# Generated by Django 3.0.14 on 2021-06-18 21:14
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0069_documentationlink_validators'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='role',
+            name='permissions',
+            field=models.BigIntegerField(help_text='The integer value of the permission bitset of this role from Discord.', validators=[django.core.validators.MinValueValidator(limit_value=0, message='Role permissions cannot be negative.')]),
+        ),
+    ]
diff --git a/pydis_site/apps/api/migrations/0071_increase_message_content_4000.py b/pydis_site/apps/api/migrations/0071_increase_message_content_4000.py
new file mode 100644
index 00000000..6ca5d21a
--- /dev/null
+++ b/pydis_site/apps/api/migrations/0071_increase_message_content_4000.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.0.14 on 2021-06-24 14:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('api', '0070_auto_20210618_2114'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='deletedmessage',
+            name='content',
+            field=models.CharField(blank=True, help_text='The content of this message, taken from Discord.', max_length=4000),
+        ),
+    ]
diff --git a/pydis_site/apps/api/models/bot/message.py b/pydis_site/apps/api/models/bot/message.py
index ff06de21..60e2a553 100644
--- a/pydis_site/apps/api/models/bot/message.py
+++ b/pydis_site/apps/api/models/bot/message.py
@@ -43,7 +43,7 @@ class Message(ModelReprMixin, models.Model):
         verbose_name="Channel ID"
     )
     content = models.CharField(
-        max_length=2_000,
+        max_length=4_000,
         help_text="The content of this message, taken from Discord.",
         blank=True
     )
diff --git a/pydis_site/apps/api/models/bot/role.py b/pydis_site/apps/api/models/bot/role.py
index cfadfec4..733a8e08 100644
--- a/pydis_site/apps/api/models/bot/role.py
+++ b/pydis_site/apps/api/models/bot/role.py
@@ -1,6 +1,6 @@
 from __future__ import annotations
 
-from django.core.validators import MaxValueValidator, MinValueValidator
+from django.core.validators import MinValueValidator
 from django.db import models
 
 from pydis_site.apps.api.models.mixins import ModelReprMixin
@@ -38,16 +38,12 @@ class Role(ModelReprMixin, models.Model):
         ),
         help_text="The integer value of the colour of this role from Discord."
     )
-    permissions = models.IntegerField(
+    permissions = models.BigIntegerField(
         validators=(
             MinValueValidator(
                 limit_value=0,
                 message="Role permissions cannot be negative."
             ),
-            MaxValueValidator(
-                limit_value=2 << 32,
-                message="Role permission bitset exceeds value of having all permissions"
-            )
         ),
         help_text="The integer value of the permission bitset of this role from Discord."
     )
diff --git a/pydis_site/apps/api/tests/test_models.py b/pydis_site/apps/api/tests/test_models.py
index 66052e01..5c9ddea4 100644
--- a/pydis_site/apps/api/tests/test_models.py
+++ b/pydis_site/apps/api/tests/test_models.py
@@ -1,6 +1,7 @@
 from datetime import datetime as dt
 
-from django.test import SimpleTestCase
+from django.core.exceptions import ValidationError
+from django.test import SimpleTestCase, TestCase
 from django.utils import timezone
 
 from pydis_site.apps.api.models import (
@@ -34,6 +35,43 @@ class ReprMixinTests(SimpleTestCase):
         self.assertEqual(repr(self.klass), expected)
 
 
+class NitroMessageLengthTest(TestCase):
+    def setUp(self):
+        self.user = User.objects.create(id=50, name='bill', discriminator=5)
+        self.context = MessageDeletionContext.objects.create(
+            id=50,
+            actor=self.user,
+            creation=dt.utcnow()
+        )
+
+    def test_create(self):
+        message = DeletedMessage(
+            id=46,
+            author=self.user,
+            channel_id=666,
+            content="w"*4000,
+            deletion_context=self.context,
+            embeds=[]
+        )
+
+        try:
+            message.clean_fields()
+        except Exception as e:  # pragma: no cover
+            self.fail(f"Creation of message of length 3950 failed with: {e}")
+
+    def test_create_failure(self):
+        message = DeletedMessage(
+            id=47,
+            author=self.user,
+            channel_id=666,
+            content="w"*4001,
+            deletion_context=self.context,
+            embeds=[]
+        )
+
+        self.assertRaisesRegex(ValidationError, "content':", message.clean_fields)
+
+
 class StringDunderMethodTests(SimpleTestCase):
     def setUp(self):
         self.nomination = Nomination(
diff --git a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/sir-lancebot.md b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/sir-lancebot.md
index 601cfa4a..068b08ae 100644
--- a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/sir-lancebot.md
+++ b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/sir-lancebot.md
@@ -97,7 +97,7 @@ The first time you run this command, it may take a few minutes while Docker down
 $ docker-compose up
 ```
 
-If you get any Docker related errors, reference the [Possible Issues](./docker/possible-issues) section of the Docker page.
+If you get any Docker related errors, reference the [Possible Issues](../docker#possible-issues) section of the Docker page.
 {: .notification .is-warning }
 
 ## Run on the host
diff --git a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/sir-lancebot/env-var-reference.md b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/sir-lancebot/env-var-reference.md
index 5c472eb2..2a7ef0d6 100644
--- a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/sir-lancebot/env-var-reference.md
+++ b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/sir-lancebot/env-var-reference.md
@@ -32,7 +32,7 @@ Additionally, you may find the following environment variables useful during dev
 | `REDIS_PASSWORD` | |
 | `USE_FAKEREDIS` | If the FakeRedis module should be used. Set this to true if you don't have a Redis database setup. |
 | `BOT_SENTRY_DSN` | The DSN of the sentry monitor. |
-| `TRASHCAN_EMOJI` | The emoji to use for the trashcan during paginated embeds |
+| `TRASHCAN_EMOJI` | The full emoji to use for the trashcan. Format should be like the output of `\:emoji:`. |
 
 
 ---
diff --git a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/site.md b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/site.md
index ada47931..24227f24 100644
--- a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/site.md
+++ b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/site.md
@@ -79,6 +79,9 @@ SECRET_KEY=suitable-for-development-only
 STATIC_ROOT=staticfiles
 ```
 
+The [Configuration in Detail](#configuration-in-detail) section contains
+detailed information about these settings.
+
 #### Notes regarding `DATABASE_URL`
 
 - If the database is hosted locally i.e. on the same machine as the webserver, then use `localhost` for the host. Windows and macOS users may need to use the [Docker host IP](../hosts-file/#windows) instead.
@@ -143,3 +146,36 @@ Unless you are editing the Dockerfile or docker-compose.yml, you shouldn't need
 Django provides an interface for administration with which you can view and edit the models among other things.
 
 It can be found at [http://admin.pythondiscord.local:8000](http://admin.pythondiscord.local:8000). The default credentials are `admin` for the username and `admin` for the password.
+
+---
+
+# Configuration in detail
+
+The website is configured through the following environment variables:
+
+## Essential
+- **`DATABASE_URL`**: A string specifying the PostgreSQL database to connect to,
+  in the form `postgresql://user:password@host/database`, such as
+  `postgresql://joethedestroyer:ihavemnesia33@localhost/pysite_dev`
+
+- **`METRICITY_DB_URL`**: A string specifying the PostgreSQL metric database to
+ connect to, in the same form as `$DATABASE_URL`.
+
+- **`DEBUG`**: Controls Django's internal debugging setup. Enable this when
+  you're developing locally. Optional, defaults to `False`.
+
+- **`LOG_LEVEL`**: Any valid Python `logging` module log level - one of `DEBUG`,
+  `INFO`, `WARN`, `ERROR` or `CRITICAL`. When using debug mode, this defaults to
+  `INFO`. When testing, defaults to `ERROR`. Otherwise, defaults to `WARN`.
+
+## Deployment
+- **`ALLOWED_HOSTS`**: A comma-separated lists of alternative hosts to allow to
+  host the website on, when `DEBUG` is not set. Optional, defaults to the
+  `pythondiscord.com` family of domains.
+
+- **`SECRET_KEY`**: The secret key used in various parts of Django. Keep this
+  secret as the name suggests! This is managed for you in debug setups.
+
+- **`STATIC_ROOT`**: The root in which `python manage.py collectstatic`
+  collects static files. Optional, defaults to `/app/staticfiles` for the
+  standard Docker deployment.
diff --git a/pydis_site/apps/resources/resources/communities/rlbot.yaml b/pydis_site/apps/resources/resources/communities/rlbot.yaml
deleted file mode 100644
index d12c1dec..00000000
--- a/pydis_site/apps/resources/resources/communities/rlbot.yaml
+++ /dev/null
@@ -1,13 +0,0 @@
-description: RLBot is a community of programmers making awesome Rocket League bots.
-  They've created a framework that you can use to write bots in a number of languages (including Python),
-  and they host regular tournaments where botmakers can pit their creations against each other.
-title_image: https://i.imgur.com/S8L1muZ.png
-title_url: https://discord.gg/4JJdJKb
-position: 7
-urls:
-  - icon: branding/discord
-    url: https://discord.gg/4JJdJKb
-    color: blurple
-  - icon: regular/link
-    url: https://www.rlbot.org/
-    color: teal
diff --git a/pydis_site/apps/resources/resources/tools/ides/repl_it.yaml b/pydis_site/apps/resources/resources/tools/ides/replit.yaml
index 8cd14e14..844c5016 100644
--- a/pydis_site/apps/resources/resources/tools/ides/repl_it.yaml
+++ b/pydis_site/apps/resources/resources/tools/ides/replit.yaml
@@ -1,5 +1,5 @@
 description: A free, collaborative, in-browser IDE to code in 50+ languages —
   without spending a second on setup.
-name: repl.it
-title_url: https://repl.it/
+name: replit
+title_url: https://replit.com/
 position: 3
diff --git a/pydis_site/static/css/error_pages.css b/pydis_site/static/css/error_pages.css
index e59e2a54..042a53a0 100644
--- a/pydis_site/static/css/error_pages.css
+++ b/pydis_site/static/css/error_pages.css
@@ -48,7 +48,6 @@ li {
     display: flex;
     flex-direction: column;
     max-width: 512px;
-    background-color: white;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 5px 7px 40px rgba(0, 0, 0, 0.432);
@@ -64,4 +63,5 @@ li {
 
 .content-box {
     padding: 25px;
+    background: #fff;
 }
diff --git a/pydis_site/static/images/events/DO_Logo_Vertical_Blue.png b/pydis_site/static/images/events/DO_Logo_Vertical_Blue.png
new file mode 100644
index 00000000..ad528652
--- /dev/null
+++ b/pydis_site/static/images/events/DO_Logo_Vertical_Blue.png
diff --git a/pydis_site/static/images/events/Tabnine.png b/pydis_site/static/images/events/Tabnine.png
new file mode 100644
index 00000000..eee42a5e
--- /dev/null
+++ b/pydis_site/static/images/events/Tabnine.png
diff --git a/pydis_site/static/images/events/summer_code_jam_2021/banner.png b/pydis_site/static/images/events/summer_code_jam_2021/banner.png
new file mode 100644
index 00000000..778c7c90
--- /dev/null
+++ b/pydis_site/static/images/events/summer_code_jam_2021/banner.png
diff --git a/pydis_site/static/images/events/summer_code_jam_2021/cj8_asciimatics.png b/pydis_site/static/images/events/summer_code_jam_2021/cj8_asciimatics.png
new file mode 100644
index 00000000..ac52338e
--- /dev/null
+++ b/pydis_site/static/images/events/summer_code_jam_2021/cj8_asciimatics.png
diff --git a/pydis_site/static/images/events/summer_code_jam_2021/cj8_blessed.gif b/pydis_site/static/images/events/summer_code_jam_2021/cj8_blessed.gif
new file mode 100644
index 00000000..8bdbf5b1
--- /dev/null
+++ b/pydis_site/static/images/events/summer_code_jam_2021/cj8_blessed.gif
diff --git a/pydis_site/static/images/events/summer_code_jam_2021/cj8_curses.png b/pydis_site/static/images/events/summer_code_jam_2021/cj8_curses.png
new file mode 100644
index 00000000..c1a177ff
--- /dev/null
+++ b/pydis_site/static/images/events/summer_code_jam_2021/cj8_curses.png
diff --git a/pydis_site/static/images/events/summer_code_jam_2021/cj8_prompttoolkit.png b/pydis_site/static/images/events/summer_code_jam_2021/cj8_prompttoolkit.png
new file mode 100644
index 00000000..a359a7af
--- /dev/null
+++ b/pydis_site/static/images/events/summer_code_jam_2021/cj8_prompttoolkit.png
diff --git a/pydis_site/static/images/events/summer_code_jam_2021/cj8_rich.gif b/pydis_site/static/images/events/summer_code_jam_2021/cj8_rich.gif
new file mode 100644
index 00000000..3a0ffbf3
--- /dev/null
+++ b/pydis_site/static/images/events/summer_code_jam_2021/cj8_rich.gif
diff --git a/pydis_site/static/images/events/summer_code_jam_2021/cj8_urwid.png b/pydis_site/static/images/events/summer_code_jam_2021/cj8_urwid.png
new file mode 100644
index 00000000..98a264b7
--- /dev/null
+++ b/pydis_site/static/images/events/summer_code_jam_2021/cj8_urwid.png
diff --git a/pydis_site/static/images/events/summer_code_jam_2021/front_page_banners/currently_live.png b/pydis_site/static/images/events/summer_code_jam_2021/front_page_banners/currently_live.png
new file mode 100644
index 00000000..939aca2a
--- /dev/null
+++ b/pydis_site/static/images/events/summer_code_jam_2021/front_page_banners/currently_live.png
diff --git a/pydis_site/static/images/events/summer_code_jam_2021/front_page_banners/random_team.png b/pydis_site/static/images/events/summer_code_jam_2021/front_page_banners/random_team.png
new file mode 100644
index 00000000..ea48ef4b
--- /dev/null
+++ b/pydis_site/static/images/events/summer_code_jam_2021/front_page_banners/random_team.png
diff --git a/pydis_site/static/images/events/summer_code_jam_2021/front_page_banners/sign_up_now.png b/pydis_site/static/images/events/summer_code_jam_2021/front_page_banners/sign_up_now.png
new file mode 100644
index 00000000..7258b1b9
--- /dev/null
+++ b/pydis_site/static/images/events/summer_code_jam_2021/front_page_banners/sign_up_now.png
diff --git a/pydis_site/static/images/sponsors/cloudflare.png b/pydis_site/static/images/sponsors/cloudflare.png
new file mode 100644
index 00000000..e2cd3b44
--- /dev/null
+++ b/pydis_site/static/images/sponsors/cloudflare.png
diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index 4cc49dc6..d7cb49b2 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -57,12 +57,12 @@
 
       {# More #}
       <div class="navbar-item has-dropdown is-hoverable">
-        <a class="navbar-link is-hidden-touch">
+        <span class="navbar-link is-hidden-touch">
           More
-        </a>
-        <a class="navbar-link is-arrowless is-hidden-desktop">
+        </span>
+        <span class="navbar-link is-arrowless is-hidden-desktop">
           More
-        </a>
+        </span>
         <div class="navbar-dropdown">
           <a class="navbar-item" href="{% url "resources:index" %}">
             Resources
@@ -70,6 +70,9 @@
           <a class="navbar-item" href="{% url "resources:resources" category="tools" %}">
             Tools
           </a>
+          <a class="navbar-item" href="{% url "events:index" %}">
+            Events
+          </a>
           <a class="navbar-item" href="{% url "content:page_category" location="guides/pydis-guides/contributing"%}">
             Contributing
           </a>
@@ -88,16 +91,6 @@
           <a class="navbar-item" href="{% url "content:page_category" location="privacy" %}">
             Privacy
           </a>
-          <hr class="navbar-divider">
-          <div class="navbar-item">
-            <strong>Events</strong>
-          </div>
-          <a class="navbar-item" href="{% url "events:page" path="code-jams/7" %}">
-            Most Recent: Code Jam 7
-          </a>
-          <a class="navbar-item" href="{% url "events:index" %}">
-            All events
-          </a>
         </div>
       </div>
 
diff --git a/pydis_site/templates/events/index.html b/pydis_site/templates/events/index.html
index 024e7fdc..daad1c9c 100644
--- a/pydis_site/templates/events/index.html
+++ b/pydis_site/templates/events/index.html
@@ -9,6 +9,9 @@
 {% block event_content %}
     <div class="box">
         <h2 class="title is-4">Code Jams</h2>
+        <div class="notification is-success">
+            The 2021 Summer Code Jam qualifier will open June 21st. Check out the details <a href="{% url "events:page" path="code-jams/8" %}">here</a>.
+        </div>
         <p>Each year, we organize a Winter Code Jam and a Summer Code Jam. 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 Winter Code Jam 2020 was Kivy, a cross-platform GUI framework.</p>
         <p>To help fuel the creative process, we provide a specific theme, like <strong>Ancient Technology</strong> or <strong>This App Hates You</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>
@@ -118,6 +121,6 @@
 {% endblock %}
 
 {% block sidebar %}
-    {% include "events/sidebar/upcoming-event.html" %}
+    {% include "events/sidebar/ongoing-event.html" %}
     {% include "events/sidebar/events-list.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
new file mode 100644
index 00000000..34171969
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/8/_index.html
@@ -0,0 +1,131 @@
+{% extends "events/base_sidebar.html" %}
+
+{% load static %}
+
+{% block title %}Summer Code Jam 2021{% 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 2021</a></li>
+{% endblock %}
+
+{% block event_content %}
+    <p>Twice 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 8 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 8 days is complete, your team has 3 days to finish documentation and create a video presentation showcasing
+        and walking through the program that your team has created.
+    </p>
+
+    <h3 id="important-dates"><a href="#important-dates">Important Dates</a></h3>
+    <ul>
+        <li>Tuesday, June 15 - Form to submit theme suggestions opens</li>
+        <li>Monday, June 21 - <a href="https://github.com/python-discord/cj8-qualifier">The Qualifier</a> is released</li>
+        <li>Friday, June 25 - Voting for the theme opens</li>
+        <li>Saturday, June 26 @ 4PM UTC- <a class="has-text-link" href="{% url "events:page" path="code-jams/8/github-bootcamp" %}">GitHub Bootcamp</a></li>
+        <li>Wednesday, July 1 - The Qualifier closes</li>
+        <li>Friday, July 9 @ 5PM UTC - Code Jam begins and the theme is announced</li>
+        <li>Saturday, July 17 @ 5PM UTC - Coding portion of the jam ends</li>
+        <li>Tuesday, July 20 - Code Jam submissions are closed and video presentation must be submitted</li>
+    </ul>
+
+    <h3 id="technology"><a href="#technology">Technology</a></h3>
+    <p>
+        The chosen technology/tech stack for this year is <strong>Text User Interfaces</strong> (TUIs).
+        Each team must create a program with one of <a href="{% url "events:page" path="code-jams/8/frameworks" %}">the approved frameworks</a> that creates a user interface that is text based.
+        For more information of TUIs and what's involved with such an interface, check out <a href="https://en.wikipedia.org/wiki/Text-based_user_interface">this wikipedia article</a>.
+    </p>
+    <h3 if="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.
+    </p>
+    <p class="has-text-centered"><a class="button is-link" href="https://github.com/python-discord/cj8-qualifier" target="_blank">View the Qualifier</a></p
+    <p>
+        Please note the requirements for the qualifier.
+        <ul>
+            <li>The qualifier must be completed using Python 3.9</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="how-to-join"><a href="#how-to-join">How to Join</a></h3>
+    <p>
+        To enter into the code jam you must complete <a href="#qualifier">The Qualifier</a> and submit the sign-up form.
+        Don't forget to join us on Discord at <a href="https://discord.gg/python">discord.gg/python</a>!
+        <div class="has-text-centered"><a class="button is-link" href="https://form.jotform.com/211714357615050" target="_blank">Sign up for the Code Jam</a></div>
+    </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, a big thank you to our Patreon patrons for supporting this server and allowing us
+        to provide our prizes as well.
+    </p>
+    <!-- This is going to be the sponsor section -->
+    <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/">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>
+                    $250 in 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/">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/Tabnine.png" %}" alt="Tabnine">
+                </div>
+                <div class="media-content">
+                    <p class="subtitle has-link"><a href="https://www.tabnine.com/now?utm_source=discord&utm_medium=Ins&utm_campaign=PythonDis">Tabnine</a></p>
+                    <p class="is-italic">Tabnine is an AI-powered code completion tool used by millions of devs around the world every day
+                        - Tabnine supports dozens of programming languages, in all of your favorite IDEs, saving you tons of time - so that you can type less and code more.
+                    Tabnine comes as a plugin and has a free-forever basic plan, so you can get started with it right away!
+                    </p>
+                    <p><strong>Prizes</strong><br>
+                    1-year Pro Licenses to Tabnine to the members of a winning team.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+{% endblock %}
+
+{% block sidebar %}
+
+    {% include "events/sidebar/code-jams/8.html" %}
+
+{% endblock %}
diff --git a/pydis_site/templates/events/pages/code-jams/8/frameworks.html b/pydis_site/templates/events/pages/code-jams/8/frameworks.html
new file mode 100644
index 00000000..34ac4f0a
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/8/frameworks.html
@@ -0,0 +1,121 @@
+{% extends "events/base_sidebar.html" %}
+
+{% load static %}
+
+{% block title %}Summer Code Jam 2021{% 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/8" %}">Summer Code Jam 2021</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 take note of what frameworks are available for which platform.
+        Please work with your team to choose a library that everyone can develop on, whether it's cross platform or something you can use WSL or a Virtual Machine for.
+    </p>
+    <h3 id="urwid"><a href="#urwid">Urwid</a></h3>
+    <div class="columns">
+        <div class="column">
+            <ul>
+                <li><a href="http://urwid.org/" target="_blank">Documentation Link</a></li>
+                <li><strong>Supports:</strong> Linux, Mac, other unix-like OS</li>
+                <li>Somewhat in-depth tutorial</li>
+                <li>Uses widgets in a fairly straight forward design</li>
+                <li>Docs include tutorials of both functional and class-based examples</li>
+            </ul>
+        </div>
+        <div class="column">
+            <img src="{% static "images/events/summer_code_jam_2021/cj8_urwid.png" %}" alt="urwid">
+        </div>
+    </div>
+    <h3 id="curses"><a href="#curses">Curses</a></h3>
+    <div class="columns">
+        <div class="column">
+            <ul>
+                <li><a href="https://docs.python.org/3/howto/curses.html" target="_blank">Documentation Link</a></li>
+                <li><strong>Supports:</strong> Linux and other unix-like OS</li>
+                <li>Part of the standard library</li>
+                <li>Extensive how-to guide</li>
+                <li>Very basic, more effort to get working/looking good</li>
+                <li>To supplement curses the following libraries are approved, although no guarantees are made for stability.</li>
+                <ul>
+                    <li><a href="https://pypi.org/project/UniCurses/" target="_blank">Unicurses</a> - a wrapper for Python 3.x that provides a unified set of Curses functions of all platforms.</li>
+                    <li><a href="https://github.com/salt-die/nurses" target="_blank">Nurses</a> - a combination of curses and numpy, made by our very own salt-die</li>
+                </ul>
+
+            </ul>
+        </div>
+        <div class="column">
+            <img src="{% static "images/events/summer_code_jam_2021/cj8_curses.png" %}" alt="curses">
+        </div>
+    </div>
+    <h3 id="blessed"><a href="#blessed">Blessed</a></h3>
+    <div class="columns">
+        <div class="column">
+            <ul>
+                <li><a href="https://blessed.readthedocs.io/en/latest/intro.html" target="_blank">Documentation Link</a></li>
+                <li><strong>Supports:</strong> Linux, Mac, and Windows</li>
+                <li>Sits on top of curses to add more pythonic bindings</li>
+                <li>Doesn't provide any widgets or layouts</li>
+            </ul>
+        </div>
+        <div class="column">
+            <img src="{% static "images/events/summer_code_jam_2021/cj8_blessed.gif" %}" alt="blessed">
+        </div>
+    </div>
+    <h3 id="rich"><a href="#rich">Rich</a></h3>
+    <div class="columns">
+        <div class="column">
+            <ul>
+                <li><a href="https://rich.readthedocs.io/en/stable/introduction.html" target="_blank">Documentation Link</a></li>
+                <li><strong>Supports:</strong> Linux, Mac, and Windows</li>
+                <li>Documentation is good and overall is very OOP focused</li>
+                <li>Robust with many features and example snippets</li>
+                <li>To supplement Rich the following library is approved, although no guarantees are made for stability.</li>
+                <ul>
+                    <li><a href="https://github.com/willmcgugan/textual" target="_blank">Textual</a> - a TUI framework using Rich as the render.
+                        <br>It is still under active development, is only available on Mac/Linux, and is not stable yet.</li>
+                </ul>
+            </ul>
+        </div>
+        <div class="column">
+            <img src="{% static "images/events/summer_code_jam_2021/cj8_rich.gif" %}" alt="rich">
+        </div>
+    </div>
+    <h3 id="asciimatics"><a href="#asciimatics">Asciimatics</a></h3>
+    <div class="columns">
+        <div class="column">
+            <ul>
+                <li><a href="https://asciimatics.readthedocs.io/en/stable/intro.html" target="_blank">Documentation Link</a></li>
+                <li><strong>Supports:</strong> Linux, Mac, and Windows</li>
+                <li>Documentation is well structured and straightforward to navigate</li>
+            </ul>
+        </div>
+        <div class="column">
+            <img src="{% static "images/events/summer_code_jam_2021/cj8_asciimatics.png" %}" alt="asciimatics">
+        </div>
+    </div>
+    <h3 id="prompt-toolkit"><a href="#prompt-toolkit">Python Prompt Toolkit</a></h3>
+    <div class="columns">
+        <div class="column">
+            <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>
+            </ul>
+        </div>
+        <div class="column">
+            <img src="{% static "images/events/summer_code_jam_2021/cj8_prompttoolkit.png" %}" alt="python prompt toolkit">
+        </div>
+    </div>
+
+
+{% endblock %}
+
+{% block sidebar %}
+
+    {% include "events/sidebar/code-jams/8.html" %}
+
+{% endblock %}
diff --git a/pydis_site/templates/events/pages/code-jams/8/github-bootcamp.html b/pydis_site/templates/events/pages/code-jams/8/github-bootcamp.html
new file mode 100644
index 00000000..836ed3ed
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/8/github-bootcamp.html
@@ -0,0 +1,45 @@
+{% extends "events/base_sidebar.html" %}
+
+{% load static %}
+
+{% block title %}Summer Code Jam 2021{% 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/8" %}">Summer Code Jam 2021</a></li>
+    <li class="is-active"><a href="#">GitHub Bootcamp</a></li>
+{% endblock %}
+
+{% block event_content %}
+    <p>
+        <strong>This year we'll be running a GitHub Bootcamp on Saturday, June 26th at 4PM UTC.</strong>
+        This bootcamp is intended to be an interactive workshop session where we help participants
+        get setup with git and using it in a team environment. If you are new to git or would like to brush up on it,
+        then this is the perfect event for you.
+    </p>
+    <p>
+        The instructional parts of this bootcamp will be recorded. We'll also be providing a cheatsheet / reference guide to all attendees that will
+        be made available here for download.
+    </p>
+    <h3>Session 1: Setting up Git</h3>
+    <p>
+        This first session will run for an hour starting at 4PM UTC. It will be focused on installing and setting up git for the first time.
+        We'll have helpers available to help you set up git and integrated with your editor of choice.
+        Whether it's PyCharm, VSCode, or vim, we can help you get rolling with version control.
+    </p>
+    <h3>Session 2: Using git and github in a team environment</h3>
+    <p>
+        This session will run for an hour starting at 5PM UTC. It will be focused on using git and GitHub in a team environment.
+        You'll be put in a group with other attendees and use the common git commands for working in a repo.
+        You'll learn how to set-up a GitHub repository with other contributors, how to make branches, make commits, pull down changes, and then make pull requests.
+        We'll also be going over different strategies for creating branches and best practices for commits and pull requests.
+    </p>
+
+{% endblock %}
+
+{% block sidebar %}
+
+    {% include "events/sidebar/code-jams/8.html" %}
+
+{% endblock %}
diff --git a/pydis_site/templates/events/pages/code-jams/8/rules.html b/pydis_site/templates/events/pages/code-jams/8/rules.html
new file mode 100644
index 00000000..b1220a2d
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/8/rules.html
@@ -0,0 +1,69 @@
+{% extends "events/base_sidebar.html" %}
+
+{% block title %}Summer Code Jam 2021{% 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/8" %}">Summer Code Jam 2021</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.</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-2021</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.
+            The 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>
+
+<!-- Change links after migrating them is done. -->
+<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/8.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 fcbfa4d9..22a86db3 100644
--- a/pydis_site/templates/events/pages/code-jams/_index.html
+++ b/pydis_site/templates/events/pages/code-jams/_index.html
@@ -66,7 +66,7 @@
 {% endblock %}
 
 {% block sidebar %}
-    {% include "events/sidebar/code-jams/upcoming-code-jam.html" %}
+    {% include "events/sidebar/code-jams/ongoing-code-jam.html" %}
     {% include "events/sidebar/code-jams/previous-code-jams.html" %}
     {% include "events/sidebar/code-jams/useful-information.html" %}
 {% endblock %}
diff --git a/pydis_site/templates/events/pages/code-jams/code-style-guide.html b/pydis_site/templates/events/pages/code-jams/code-style-guide.html
new file mode 100644
index 00000000..4ff5baaf
--- /dev/null
+++ b/pydis_site/templates/events/pages/code-jams/code-style-guide.html
@@ -0,0 +1,268 @@
+{% extends "events/base_sidebar.html" %}
+
+{% 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="#">The Code Style Guide</a></li>
+{% endblock %}
+
+{% block title %}The Code Style Guide{% endblock %}
+
+{% block event_content %}
+    <p>
+        For end-users, the most important parts of the software are functionality and UI/UX.
+        But for developers, there is one more important aspect - code style.
+        While ugly code can do everything that it has to do, developing it further may be a difficult task,
+        especially if the developer didn't write the original code.
+        Which one of the following do you prefer to read and work with?
+    </p>
+    <pre><code class="language-python">MyPath = '/file.txt'
+from pathlib import *
+import os.path,sys
+def check(p):
+  """Uses os.path.exist         """
+  return os.path.exists(p)
+
+def getF(
+  p):
+  """Not sure what this do, this just worked.
+  """
+  return Path(p
+  )
+result=[check(MyPath),getF(MyPath)]</code></pre>
+    <p>or</p>
+    <pre><code class="language-python">import os.path
+from pathlib import Path
+
+FILE_PATH = '/file.txt'
+
+
+def check_file_exists(path: str) -> bool:
+    """Checks does file exists in path. Uses os.path.exists."""
+    return os.path.exists(path)
+
+
+def get_path_object(path: str) -> Path:
+    """
+    Returns Path object of the path provided in arguments.
+
+    This is here for backward compatibility, will be removed in the future.
+    """
+    return Path(path)
+
+result = [
+    check_file_exists(FILE_PATH),
+    get_path_object(FILE_PATH),
+]</code></pre>
+
+    <p>
+        The second is definitely easier to read and understand.
+        These scripts are small and even with the first code snippet you can understand what the code does pretty quickly,
+        but what if the project has thousands and thousands of files in a really complex folder structure?
+        Do you want to work with code that looks like the first example?
+        You can save hours sometimes if you write beautiful code that follows the style guidelines.
+    </p>
+    <p>
+        The most important code style document for Python is <b><a href="https://www.python.org/dev/peps/pep-0008/">PEP 8</a></b>.
+        This Python Enhancement Proposal lays out the majority of all Python code style guidelines.
+        This article will cover the most important aspects of PEP 8.
+    </p>
+
+    <h2>Linters</h2>
+    <p>
+        But everyone makes mistakes and there are so many style rules that can be really difficult to remember and always follow.
+        Luckily, we have amazing tools that help us - linters. While there are many linters,
+        we'd like code jam participants to use <b><a href="https://flake8.pycqa.org/en/latest/">flake8</a></b>.
+        Flake8 points out to you rules what you did break in your code so you can fix them.
+    </p>
+
+    <h2>Guidelines</h2>
+    <h3>Basics</h3>
+    <p>For indentation, you should use 4 spaces. Using tabs is not suggested, but if you do, you can't mix spaces and tabs.</p>
+    <p>
+        PEP 8 defines a maximum line length of 79 characters, however,
+        we are not so strict - teams are welcome to choose a maximum line length between 79 and 119 characters.
+    </p>
+    <p>2 blank lines should be left before functions and classes. Single blank lines are used to split sections and make logical breaks.</p>
+
+    <h3>Naming</h3>
+    <p>Module, file, function, and variable names (except type variables) should be lowercase and use underscores.</p>
+    <pre><code class="language-python"># File: my_module.py/mymodule.py
+
+def my_function():
+    my_variable = "value"</code></pre>
+    <p>Class and type variable names should use the PascalCase style.</p>
+    <pre><code class="language-python">from typing import List
+
+
+class MyClass:
+    pass
+
+ListOfMyClass = List[MyClass]</code></pre>
+    <p>Constant names should use the SCREAMING_SNAKE_CASE style.</p>
+    <pre><code class="language-python">MY_CONSTANT = 1</code></pre>
+    <p>
+        You should avoid single-character names, as these might be confusing.
+        But if you still do, you should avoid characters that may look like zero or one in some fonts:
+        "O" (uppercase o), "l" (lowercase L), and "I" (uppercase i).
+    </p>
+
+    <h3>Operators</h3>
+    <p>
+        If you have a chain of mathematic operations that you split into multiple lines,
+        you should put the operator at the beginning of the line and not the end of the line.
+    </p>
+    <pre><code class="language-python"># No
+result = (
+    1 +
+    2 *
+    3
+)
+
+# Yes
+result = (
+    1
+    + 2
+    * 3
+)</code></pre>
+    <p>If you ever check if something is equivalent to <code>None</code>, you should use <code>is</code> and <code>is not</code> instead of the <code>==</code> operator.</p>
+    <pre><code class="language-python"># No
+if variable == None:
+    print("Variable is None")
+
+# Yes
+if variable is None:
+    print("Variable is None")</code></pre>
+    <p>
+        You should prefer using <code>&lt;item one&gt; is not &lt;item two&gt;</code> over <code>not &lt;item one&gt; is &lt;item two&gt;</code>.
+        Using the latter makes it harder to understand what the expression is trying to do.
+    </p>
+    <pre><code class="language-python"># No
+if not variable is None:
+    print("Variable is not None")
+
+# Yes - it is much easier to read and understand this than previous
+if variable is not None:
+    print("Variable is not None")</code></pre>
+
+    <h3>Imports</h3>
+    <p>Imports should be at top of the file, the only things that should be before them are module comments and docstrings.</p>
+    <p>You shouldn't import multiple modules in one line, but give each module import its own line instead.</p>
+    <pre><code class="language-python"># No
+import pathlib, os
+
+# Yes
+import os
+import pathlib</code></pre>
+    <p>Wildcard imports should be avoided in most cases. It clutters the namespace and makes it less clear where functions or classes are coming from.</p>
+    <pre><code class="language-python"># No
+from pathlib import *
+
+# Yes
+from pathlib import Path</code></pre>
+    <p>You should use <b><a href="https://pycqa.github.io/isort/">isort</a></b> imports order specification, which means:</p>
+    <ul>
+        <li>
+            <b>Group by type:</b> order of import types should be: <code>__future__</code> imports, standard library imports,
+            third-party library imports, and finally project imports.
+        </li>
+        <li>
+            <b>Group by import method:</b> inside each group, first should come imports in format <code>import &lt;package&gt;</code>
+            and after them <code>from &lt;package&gt; import &lt;items&gt;</code>.
+        </li>
+        <li>
+            <b>Order imports alphabetically:</b> inside each import method group, imports should be ordered by package names.
+        </li>
+        <li>
+            <b>Order individual import items by type and alphabetically:</b> in <code>from &lt;package&gt; import &lt;items&gt;</code> format,
+            <code>&lt;items&gt;</code> should be ordered alphabetically, starting with bare module imports.
+        </li>
+    </ul>
+
+    <h3>Comments</h3>
+    <p>
+        Comments are really important because they help everyone understand what code does.
+        In general, comments should explain <i>why</i> you are doing something if it's not obvious.
+        You should aim to write code that makes it obvious what it is doing and you can use the comments to explain why and provide some context.
+    </p>
+    <p>
+        Keep in mind that just as important as having comments, is making sure they stay up to date.
+        Out-of-date and incorrect comments confuse readers of your code (including future you).
+    </p>
+    <p>Comments content should start with a capital letter and be a full sentence(s).</p>
+    <p>There are three types of comments: block comments, inline comments, and docstrings.</p>
+    <ul>
+        <li>
+            <h4>Block comments</h4>
+            <p>
+                Probably most common comment type. Should be indented to the same level as the code they describe.
+                Each line in the block comment has to start with <code>#</code> and should be followed by a single space.
+                To separate paragraphs, use one line containing only <code>#</code>.
+            </p>
+            <pre><code class="language-python">if variable is None or variable == 1:
+    # If variable is None, something went wrong previously.
+    #
+    # Here starts a new important paragraph.</code></pre>
+        </li>
+        <li>
+            <h4>Inline comments</h4>
+            <p>
+                You should prefer block comments over inline comments and use inline comments only where it is really necessary.
+                Never use inline comments to explain obvious things like what a line does.
+            </p>
+            <p>If you want to use an inline comment on a variable, think first, maybe you can use a better variable name instead.</p>
+            <p>
+                After code and before the start of inline comments should be at least two spaces.
+                Just like block comments, inline comments also have to start with <code>#</code> followed by a single space.
+            </p>
+            <pre><code class="language-python"># Do not use inline comments to explain things
+# that the reader can understand even without the inline comment.
+my_variable = "Value!"  # Assign value to my_variable
+
+# Here better variable name can be used like shown in the second line.
+x = "Walmart"  # Shop name
+shop_name = "Walmart"
+
+# Sometimes, if something is not obvious, then inline comments are useful.
+# Example is from PEP 8.
+x = x + 1  # Compensate for border</code></pre>
+        </li>
+        <li>
+            <h4>Docstrings</h4>
+            <p>
+                Last, but not least important comment type is docstring, which is a short version of documentation string.
+                Docstring rules haven't been defined by PEP 8, but by <a href="https://www.python.org/dev/peps/pep-0257">PEP 257</a> instead.
+            </p>
+            <p>Docstrings should start and end with three quotes (""").</p>
+            <p>There are two types of docstrings: one-line docstrings and multiline docstrings.</p>
+            <p>
+                One-line docstrings have to start and end in the same line, while multiline docstrings start and end in different lines.
+                Multiline docstring has two parts: summary line and a longer description, which are separated by one empty line.
+                The multiline docstring start and end quotes should be on different lines than the content.
+            </p>
+            <pre><code class="language-python"># This is a one-line docstring.
+"""This is one line module docstring."""
+
+
+# This is a multiline docstring.
+def my_function():
+    """
+    This is the summary line.
+
+    This is the description.
+    """</code></pre>
+        </li>
+    </ul>
+
+    <h2>Too much for you?</h2>
+    <p>
+        Do all these style rules make your head explode? We have something for you! We have a song!
+        We have <a href="https://www.youtube.com/watch?v=hgI0p1zf31k">The PEP 8 Song (featuring lemonsaurus)</a>!
+        Great way to get started with writing beautiful code.
+    </p>
+    <iframe width="500" height="315" src="https://www.youtube.com/embed/hgI0p1zf31k"></iframe>
+{% endblock %}
+
+{% block sidebar %}
+    {% include "events/sidebar/code-jams/useful-information.html" %}
+{% endblock %}
diff --git a/pydis_site/templates/events/sidebar/code-jams/8.html b/pydis_site/templates/events/sidebar/code-jams/8.html
new file mode 100644
index 00000000..de8c6b0b
--- /dev/null
+++ b/pydis_site/templates/events/sidebar/code-jams/8.html
@@ -0,0 +1,22 @@
+{% 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/8/rules" %}">Rules</a>
+        <a class="panel-block has-text-link" href="{% url "events:page" path="code-jams/8/frameworks" %}">Approved Frameworks</a>
+        <a class="panel-block has-text-link" href="{% url "events:page" path="code-jams/8/github-bootcamp" %}">GitHub Bootcamp</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_2021/banner.png" %}" alt="Summer Code Jam 2021">
+    <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://www.tabnine.com/now?utm_source=discord&utm_medium=Ins&utm_campaign=PythonDis" target="_blank">
+        <img src="{% static "images/events/Tabnine.png" %}" alt="Tabnine">
+    </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
new file mode 100644
index 00000000..f4fa3a37
--- /dev/null
+++ b/pydis_site/templates/events/sidebar/code-jams/ongoing-code-jam.html
@@ -0,0 +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">
+    </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 154f6ac4..9f9ecd1a 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,7 @@
 <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/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>
         <li><a class="has-text-link" href="{% url "events:page" path="code-jams/5" %}">Code Jam 5: Climate Change</a></li>
         <li><a class="has-text-link" href="{% url "events:page" path="code-jams/4" %}">Code Jam 4: This App Hates You</a></li>
diff --git a/pydis_site/templates/events/sidebar/code-jams/upcoming-code-jam.html b/pydis_site/templates/events/sidebar/code-jams/upcoming-code-jam.html
deleted file mode 100644
index 914a9545..00000000
--- a/pydis_site/templates/events/sidebar/code-jams/upcoming-code-jam.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% load static %}
-
-<div class="box">
-    <p class="menu-label">Upcoming Code Jam</p>
-    <a href="{% url "events:page" path="code-jams/7" %}">
-        <img src="{% static "images/events/summer_code_jam_2020.png" %}" alt="">
-    </a>
-</div>
diff --git a/pydis_site/templates/events/sidebar/code-jams/useful-information.html b/pydis_site/templates/events/sidebar/code-jams/useful-information.html
index c4e665e6..87a92ade 100644
--- a/pydis_site/templates/events/sidebar/code-jams/useful-information.html
+++ b/pydis_site/templates/events/sidebar/code-jams/useful-information.html
@@ -4,5 +4,6 @@
         <li><a class="has-text-link" href="{% url "events:page" path="code-jams/using-git" %}">How to use git</a></li>
         <li><a class="has-text-link" href="{% url "events:page" path="code-jams/judging" %}">How does judging work?</a></li>
         <li><a class="has-text-link" href="{% url "events:page" path="code-jams/pull-request" %}">Opening a Pull Request</a></li>
+        <li><a class="has-text-link" href="{% url "events:page" path="code-jams/code-style-guide" %}">The Code Style Guide</a></li>
     </ul>
 </div>
diff --git a/pydis_site/templates/events/sidebar/ongoing-event.html b/pydis_site/templates/events/sidebar/ongoing-event.html
new file mode 100644
index 00000000..37dfdf77
--- /dev/null
+++ b/pydis_site/templates/events/sidebar/ongoing-event.html
@@ -0,0 +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">
+    </a>
+</div>
diff --git a/pydis_site/templates/events/sidebar/upcoming-event.html b/pydis_site/templates/events/sidebar/upcoming-event.html
deleted file mode 100644
index 5c1d925a..00000000
--- a/pydis_site/templates/events/sidebar/upcoming-event.html
+++ /dev/null
@@ -1,8 +0,0 @@
-{% load static %}
-
-<div class="box">
-    <p class="menu-label">Upcoming Event</p>
-    <a href="{% url "events:page" path="code-jams/7" %}">
-        <img src="{% static "images/events/summer_code_jam_2020.png" %}" alt="">
-    </a>
-</div>
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index 18f6b77b..072e3817 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -11,15 +11,9 @@
 
   <!-- Mobile-only Notice -->
   <section id="mobile-notice" class="message is-primary is-hidden-tablet">
-    <div class="message-header">
-      <p>100K Member Milestone!</p>
-    </div>
-    <div class="message-body">
-      Thanks to all our members for helping us create this friendly and helpful community!
-      <br><br>
-      As a nice treat, we've created a <a href="{% url 'timeline' %}">Timeline page</a> for people
-      to discover the events that made our community what it is today. Be sure to check it out!
-    </div>
+    <a href="/events/code-jams/8/">
+        <img src="{% static "images/events/summer_code_jam_2021/front_page_banners/currently_live.png" %}" alt="Summer Code Jam 2021">
+    </a>
   </section>
 
   <!-- Wave Hero -->
@@ -29,7 +23,7 @@
         <div class="columns is-variable is-8">
 
           {# Embedded Welcome video #}
-          <div id="wave-hero-centered" class="column is-half">
+          <div id="wave-hero-left" class="column is-half">
             <div class="force-aspect-container">
               <iframe
               class="force-aspect-content"
@@ -50,6 +44,13 @@
               ></iframe>
             </div>
           </div>
+
+          {# Code Jam banner #}
+          <div id="wave-hero-right" class="column is-half">
+            <a href="/events/code-jams/8/">
+              <img src="{% static "images/events/summer_code_jam_2021/front_page_banners/currently_live.png" %}" alt="Summer Code Jam 2021">
+            </a>
+          </div>
         </div>
       </div>
 
@@ -200,6 +201,8 @@
           </a>
           <a href="https://streamyard.com" class="column is-narrow">
             <img src="{% static "images/sponsors/streamyard.png" %}" alt="StreamYard"/>
+          <a href="https://www.cloudflare.com/" class="column is-narrow">
+            <img src="{% static "images/sponsors/cloudflare.png" %}" alt="Cloudflare"/>
           </a>
         </div>
       </div>