From 8eb4dc9ea279335fa6b7db1bc3cdfee5b914fd40 Mon Sep 17 00:00:00 2001
From: hedy <hedy@tilde.cafe>
Date: Sat, 23 Mar 2024 19:48:41 +0800
Subject: Timeline: Migrate to Markdown source files - initial implementation

- The timeline app is introduced, moved from the home app.
- Add a basic README.md to illustrate the overall code breakdown of the
  app as it is in the current stage.
- Two entries are added for now.
- Add ability to link headers using the slug portion of the filename.
- The way markdown files are fetched is similar to that of the resources
  app - using the AppConfig ready() function, all resources are ensured
  to be only fetched once when the app is first laoded.

I debated whether to introduce the new functionality in the home app
instead, without creating a new app. Eventually I decided extracting it
to a standalone app now is better as it allows easier extension of
functionality in the future. The home app can remain as it is to only
server the `/` homepage.

The timeline CSS is kept the same, as with the structure of the timeline
HTML template.

Once the CSS rewrite PR is merged, it's relatively easy to fix conflicts
here (again, since timeline is now its own app, with the CSS file and
HTML template moved - extra advantage).

References to `home:timeline` are updated to use `timeline:index`
throughout the codebase, as far as my ripgrep search could go.

The format of the markdown + YAML entries are still up for debate, so
I've only added the first two entries for now. They can be completely
overwritten in the future once the formats are decided by using a script
to convert all the data from my JSON file into individual markdown
files:

    http://0x0.st/Xr78.txt

This link should last for at least a few months. (Originally saved on
https://paste.pythondiscord.com/KPJA, but it expires on 12th April 2024.)
---
 pydis_site/templates/base/navbar.html       |  2 +-
 pydis_site/templates/home/index.html        |  2 +-
 pydis_site/templates/timeline/timeline.html | 42 +++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 pydis_site/templates/timeline/timeline.html

(limited to 'pydis_site/templates')

diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html
index 2fcd8ad8..41f5fa10 100644
--- a/pydis_site/templates/base/navbar.html
+++ b/pydis_site/templates/base/navbar.html
@@ -88,7 +88,7 @@
           <a class="navbar-item" href="{% url "content:page_category" location="guides" %}">
             Guides
           </a>
-          <a class="navbar-item" href="{% url 'home:timeline' %}">
+          <a class="navbar-item" href="{% url 'timeline:index' %}">
             Timeline
           </a>
           <a class="navbar-item" href="{% url "content:page_category" location="rules" %}">
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html
index 393e7c19..036a785c 100644
--- a/pydis_site/templates/home/index.html
+++ b/pydis_site/templates/home/index.html
@@ -110,7 +110,7 @@
             </p>
 
             <div class="buttons are-large is-centered">
-              <a href="{% url 'home:timeline' %}" class="button is-primary">
+              <a href="{% url 'timeline:index' %}" class="button is-primary">
                 <span>Check it out!</span>
                 <span class="icon">
                   <i class="fas fa-arrow-right"></i>
diff --git a/pydis_site/templates/timeline/timeline.html b/pydis_site/templates/timeline/timeline.html
new file mode 100644
index 00000000..8f746b6e
--- /dev/null
+++ b/pydis_site/templates/timeline/timeline.html
@@ -0,0 +1,42 @@
+{% extends 'base/base.html' %}
+{% load static %}
+
+{% block title %}Timeline{% endblock %}
+{% block head %}
+  <link rel="stylesheet" href="{% static "css/home/timeline.css" %}">
+  <link rel="stylesheet" href="{% static "css/home/index.css" %}">
+{% endblock %}
+
+{% block content %}
+  {% include "base/navbar.html" %}
+
+  <section class="cd-timeline js-cd-timeline">
+    <div class="container max-width-lg cd-timeline__container">
+
+      {% for entry in entries %}
+
+        <div class="cd-timeline__block" id="{{ entry.slug }}">
+          <div class="cd-timeline__img cd-timeline__img--picture {{ entry.icon_color }}">
+            {% if entry.icon == "pydis" %}
+              <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture">
+            {% else %}
+              <i class="{{ entry.icon }}"></i>
+            {% endif %}
+          </div>
+
+          <div class="cd-timeline__content has-background-white-bis text-component content">
+            <h2><a href="#{{ entry.slug }}">{{ entry.title }}</a></h2>
+            {{ entry.content|safe }}
+            <div class="flex justify-between items-center">
+              <span class="cd-timeline__date has-text-grey">{{ entry.date }}</span>
+            </div>
+          </div>
+        </div>
+
+      {% endfor %}
+
+    </div>
+  </section>
+
+  <script src="{% static "js/timeline/main.js" %}"></script>
+{% endblock %}
-- 
cgit v1.2.3