Info pages #13xan #13xak (#36)

* Info pages and templates

* Info pages and templates

* Info pages and templates

* Update navigation and fix up HTML

* Navigation HTML spacing for readability

* Fix error views not using `self.render()`

* `render()` method should accept Any for context values

* Change header linking CSS to a dedicated class

* Rules page

* Basic resources page setup

* Fix headers for new CSS class

* Resource categories and initial resource data

* Add link to JSON file on GH - won't work until the branch is merged

* Remove info overview page and redirect info root url to resources

* Flake8

* Add some tests

* Line lengths

4 files changed, 205 insertions, 19 deletions

diff --git a/templates/main/info/help.html b/templates/main/info/help.html
index d3084f8b..de041f66 100644
--- a/templates/main/info/help.html
+++ b/templates/main/info/help.html
@@ -4,7 +4,7 @@
     <div class="uk-section">
         <div class="uk-container uk-container-small">
             <article class="uk-article">
-                <h1 class="uk-article-title" id="top">
+                <h1 class="uk-article-title hover-title" id="top">
                     Getting Help
 
                     <a href="#top" class="uk-text-primary" title="Permanent link to this header">
@@ -26,7 +26,7 @@
                     behind that essay are in no way affiliated with us - please do not bother them with your Python
                     problems.
                 </p>
-                <h2 class="uk-article-title" id="before">
+                <h2 class="uk-article-title hover-title" id="before">
                     Before You Ask
 
                     <a href="#before" class="uk-text-primary" title="Permanent link to this header">
@@ -110,7 +110,7 @@
                     whether someone else has asked your question recently, or just feel free to pick one of the help channels
                     and ask your question.
                 </p>
-                <h2 class="uk-article-title" id="good-question">
+                <h2 class="uk-article-title hover-title" id="good-question">
                     A Good Question
 
                     <a href="#good-question" class="uk-text-primary" title="Permanent link to this header">
@@ -297,7 +297,7 @@
     <div class="uk-section">
         <div class="uk-container uk-container-small">
             <article class="uk-article">
-                <h2 class="uk-article-title" id="answers">
+                <h2 class="uk-article-title hover-title" id="answers">
                     Interpreting Answers
 
                     <a href="#answers" class="uk-text-primary" title="Permanent link to this header">
@@ -364,7 +364,7 @@
                     people applying actively them, visibly, in public.
                 </p>
 
-                <h2 class="uk-article-title" id="what-not-to-ask">
+                <h2 class="uk-article-title hover-title" id="what-not-to-ask">
                     What Not To Ask
 
                     <a href="#what-not-to-ask" class="uk-text-primary" title="Permanent link to this header">
diff --git a/templates/main/info/resources.html b/templates/main/info/resources.html
new file mode 100644
index 00000000..576d68ec
--- /dev/null
+++ b/templates/main/info/resources.html
@@ -0,0 +1,56 @@
+{% extends "main/base.html" %}
+{% block title %}Resources{% endblock %}
+{% block content %}
+    <div class="uk-section">
+        <div class="uk-container uk-container-small">
+            <article class="uk-article">
+                <h1 class="uk-article-title hover-title" id="top">
+                    Resources
+
+                    <a href="#top" class="uk-text-primary" title="Permanent link to this header">
+                        <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i>
+                    </a>
+                </h1>
+                <p class="uk-article-meta">
+                    Learn you a Haskell for great- wait, wrong book
+                </p>
+                <p>
+                    This page is intended to be a listing of useful resources for beginner and experienced Python
+                    programmers alike. This page is generated from a JSON file
+                    <a href="https://github.com/discord-python/site/blob/master/static/resources.json">on GitHub</a> -
+                    if there's a great resource that you love and you don't see it on this page, feel free to submit a
+                    pull request!
+                </p>
+
+                {% if categories is none %}
+                    <div class="uk-alert-danger" uk-alert>
+                        <p>
+                            We were unable to load the <code>resources.json</code> file. If you see this, please
+                            notify us!
+                        </p>
+                    </div>
+                {% else %}
+                    {% for category_name, category_data in categories.items() %}
+                        <h2 class="uk-heading-divider hover-title" id="{{ category_name.replace(" ", "-").lower() }}">
+                            {{ category_name }}
+
+                            <a href="#{{ category_name.replace(" ", "-").lower() }}" class="uk-text-primary" title="Permanent link to this header">
+                                <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i>
+                            </a>
+                            <br/>
+                            <p class="uk-article-meta">
+                                {{ category_data.description }}
+                            </p>
+                        </h2>
+                        {% for item, data in category_data.resources.items() %}
+                            <p>
+                                <strong>{{ item }}</strong> &nbsp;<a href="{{ data.url }}"><i class="fas fa-link"></i></a><br />
+                                <span class="uk-text-meta">{{ data.description }}</span>
+                            </p>
+                        {% endfor %}
+                    {% endfor %}
+                {% endif %}
+            </article>
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/main/info/rules.html b/templates/main/info/rules.html
new file mode 100644
index 00000000..1853f090
--- /dev/null
+++ b/templates/main/info/rules.html
@@ -0,0 +1,116 @@
+{% extends "main/base.html" %}
+{% block title %}Rules{% endblock %}
+{% block content %}
+    <div class="uk-section">
+        <div class="uk-container uk-container-small">
+            <article class="uk-article">
+                <h1 class="uk-article-title hover-title" id="top">
+                    Rules
+
+                    <a href="#top" class="uk-text-primary" title="Permanent link to this header">
+                        <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i>
+                    </a>
+                </h1>
+                <p class="uk-article-meta">
+                    Keeping our noses clean since 2017
+                </p>
+                <p>
+                    We have a small but strict set of rules on our server. Please read over them and take them on board -
+                    if you don't understand anything or need some clarification, feel free to ask any staff member!
+                </p>
+                <ol>
+                    <li>
+                        Be polite, and do not spam
+                    </li>
+                    <li>
+                        Follow the <a href="https://discordapp.com/guidelines">Discord community guidelines</a>
+                    </li>
+                    <li>
+                        Be patient both with users asking questions, and the users answering them
+                    </li>
+                    <li>
+                        Listen to and respect the staff members - we're here to help, but we're all human beings
+                    </li>
+                    <li>
+                        All discussion should be kept within the relevant channels for the subject.
+                        <ul>
+                            <li>
+                                General Python help and support requests go to one of the three help channels - pick
+                                the one that is the quietest at the time.
+                            </li>
+                            <li>
+                                The topical channels can be used for help and support requests, but general discussion
+                                about the subjects covered by them should go there also.
+                            </li>
+                            <li>
+                                If you're working with one of the bots, we ask you to specifically do that in
+                                <code>#bot-commands</code>, to keep the other channels clear of bot output.
+                            </li>
+                            <li>
+                                If you're working on a Python project or something directly related to our server, feel
+                                free to post a link to it in <code>#show-your-projects</code>. We prefer links to source
+                                code over websites, but we'll also accept screenshots and videos if you're not yet ready
+                                to release the code.
+                                <ul>
+                                    <li>
+                                        If you or someone else posts a project to <code>#show-your-projects</code>, you may
+                                        discuss it in <code>#show-your-projects-discussion</code>. <code>#show-your-projects</code>
+                                        is intended to be a listing channel, and any discussion there is removed regularly.
+                                    </li>
+                                    <li>
+                                        Please note, we <strong>do not</strong> allow postings for communities (such as
+                                        forums or other Discord servers) or commercial projects.
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        This is an English-speaking server. Please speak English to the best of your ability. Google
+                        translate is fine if you're not sure.
+                    </li>
+                    <li>
+                        Keep all discussions SFW - No <a href="https://www.wikiwand.com/en/Ecchi">ecchi</a>
+                        or <a href="https://www.wikiwand.com/en/Not_safe_for_work">NSFW media</a>. If you wouldn't want
+                        the entire world to know about your interest in it, it doesn't belong on this server.
+                    </li>
+                    <li>
+                        We do not allow advertisements for communities or commercial projects - Contact us directly if
+                        you want to discuss a partnership!
+                    </li>
+                </ol>
+
+                <h1 class="uk-article-title hover-title" id="infractions">
+                    Infractions
+
+                    <a href="#infractions" class="uk-text-primary" title="Permanent link to this header">
+                        <i class="fas fa-paragraph" data-fa-transform="shrink-8"></i>
+                    </a>
+                </h1>
+                <p class="uk-article-meta">
+                    Why you gotta be so rude?
+                </p>
+                <p>
+                    We have a generally no-nonsense policy when it comes to our rules. If you notice someone breaking
+                    them, feel free to mention or DM a staff member and we'll try to deal with it as soon as possible.
+                </p>
+                <p>
+                    The possible actions we take based on infractions can include the following:
+                </p>
+                <ul>
+                    <li>A public verbal/textual warning</li>
+                    <li>A short temporary mute</li>
+                    <li>A long temporary mute</li>
+                    <li>A kick from the server</li>
+                    <li>A temporary ban from the server</li>
+                    <li>A permanent ban from the server</li>
+                </ul>
+                <p>
+                    While we do discuss more serious matters internally before handing out a punishment, simpler
+                    infractions are dealt with directly by individual staffers and the punishment they hand out is left
+                    to their own decision-making.
+                </p>
+            </article>
+        </div>
+    </div>
+{% endblock %}
\ No newline at end of file
diff --git a/templates/main/navigation.html b/templates/main/navigation.html
index 5b518822..3178895e 100644
--- a/templates/main/navigation.html
+++ b/templates/main/navigation.html
@@ -11,40 +11,54 @@
             </a>
         </div>
 
-        <div class="uk-navbar-right uk-visible@m">
-            <ul class="uk-navbar-nav">
+        <div class="uk-navbar-right">
+            <ul class="uk-navbar-nav uk-visible@m">
                 {% if current_page == "index" %}
                     <li class="uk-active"><a href="/"><i class="uk-icon fas fa-home"></i> &nbsp;Home</a></li>
                 {% else %}
                     <li><a href="/"><i class="uk-icon fas fa-home"></i> &nbsp;Home</a></li>
                 {% endif %}
                 <li><a href="/invite"><i class="uk-icon fab fa-discord"></i> &nbsp;Discord</a></li>
+            </ul>
+            <ul class="uk-navbar-nav">
                 <li>
                     <a><i class="uk-icon fas fa-chevron-down"></i></a>
                     <div class="uk-navbar-dropdown uk-background-secondary" uk-dropdown>
                         <ul class="uk-nav uk-navbar-dropdown-nav">
+                            <li class="uk-nav-header uk-hidden@m">Navigation</li>
+                            <li class="uk-nav-item uk-hidden@m"><a href="/"><i class="uk-icon fas fa-home"></i> &nbsp;Home</a></li>
+                            <li class="uk-nav-item uk-hidden@m"><a href="/invite"><i class="uk-icon fab fa-discord"></i> &nbsp;Discord</a></li>
+                            <li class="uk-nav-divider uk-hidden@m"></li>
+
+                            {% if current_page.startswith("info") %}
+                                <li class="uk-nav-header uk-active">Information</li>
+                            {% else %}
+                                <li class="uk-nav-header">Information</li>
+                            {% endif %}
+
                             {% if current_page == "info/help" %}
                                 <li class="uk-active"><a href="/info/help">Getting Help</a></li>
                             {% else %}
                                 <li><a href="/info/help">Getting Help</a></li>
                             {% endif %}
+
+                            {% if current_page == "info/rules" %}
+                                <li class="uk-active"><a href="/info/rules">Server Rules</a></li>
+                            {% else %}
+                                <li><a href="/info/rules">Server Rules</a></li>
+                            {% endif %}
+
+                            {% if current_page == "info/resources" %}
+                                <li class="uk-active"><a href="/info/resources">Resources</a></li>
+                            {% else %}
+                                <li><a href="/info/resources">Resources</a></li>
+                            {% endif %}
+
                             <li class="uk-nav-divider"></li>
                         </ul>
                     </div>
                 </li>
             </ul>
         </div>
-
-        <div class="uk-navbar-right uk-hidden@m">
-            <button class="uk-button" style="font-size: 2em;"><i class="uk-icon fas fa-angle-down"></i></button>
-                <div uk-dropdown>
-                    <ul class="uk-nav uk-dropdown-nav">
-                        <li class="uk-nav-item"><a href="/"><i class="uk-icon fas fa-home"></i> &nbsp;Home</a></li>
-                        <li class="uk-nav-item"><a href="/invite"><i class="uk-icon fab fa-discord"></i> &nbsp;Discord</a></li>
-                        <li class="uk-nav-item"><a href="/info/help"><i class="uk-icon fas fa-question"></i> &nbsp;Getting Help</a></li>
-                    </ul>
-                </div>
-        </div>
-
     </nav>
 </div>