New "plain" page style for most logged out pages

activities/views/debug.py

@@ -4,7 +4,7 @@ import httpx
 from asgiref.sync import async_to_sync
 from django import forms
 from django.utils.decorators import method_decorator
-from django.views.generic import FormView
+from django.views.generic import FormView, TemplateView
 
 from core.ld import canonicalise
 from users.decorators import admin_required
@@ -46,3 +46,13 @@ class JsonViewer(FormView):
         context["result"] = result
         context["raw_result"] = raw_result
         return self.render_to_response(context)
+
+
+class NotFound(TemplateView):
+
+    template_name = "404.html"
+
+
+class ServerError(TemplateView):
+
+    template_name = "500.html"

core/views.py

@@ -7,33 +7,32 @@ from django.utils.safestring import mark_safe
 from django.views.generic import TemplateView, View
 from django.views.static import serve
 
+from activities.services.timeline import TimelineService
 from activities.views.timelines import Home
 from core.decorators import cache_page
 from core.models import Config
-from users.models import Identity
 
 
 def homepage(request):
     if request.user.is_authenticated:
         return Home.as_view()(request)
     else:
-        return LoggedOutHomepage.as_view()(request)
+        return About.as_view()(request)
 
 
 @method_decorator(cache_page(public_only=True), name="dispatch")
-class LoggedOutHomepage(TemplateView):
+class About(TemplateView):
 
-    template_name = "index.html"
+    template_name = "about.html"
 
     def get_context_data(self):
+        service = TimelineService(self.request.identity)
         return {
-            "about": mark_safe(
+            "current_page": "about",
+            "content": mark_safe(
                 markdown_it.MarkdownIt().render(Config.system.site_about)
             ),
-            "identities": Identity.objects.filter(
-                local=True,
-                discoverable=True,
-            ).order_by("-created")[:20],
+            "posts": service.local()[:10],
         }
 
 

static/css/style.css

@@ -122,8 +122,13 @@ main {
     border-radius: 5px;
 }
 
+.no-sidebar main {
+    box-shadow: none;
+    max-width: 800px;
+}
+
 footer {
-    width: 900px;
+    max-width: 900px;
     margin: 0 auto;
     padding: 0 0 10px 0;
     color: var(--color-text-duller);
@@ -131,6 +136,10 @@ footer {
     font-size: 90%;
 }
 
+.no-sidebar footer {
+    max-width: 800px;
+}
+
 footer a {
     border-bottom: 1px solid var(--color-text-duller);
     margin-right: 5px;
@@ -141,6 +150,10 @@ header {
     height: 50px;
 }
 
+.no-sidebar header {
+    justify-content: center;
+}
+
 header .logo {
     font-family: "Raleway";
     font-weight: bold;
@@ -155,6 +168,10 @@ header .logo {
     z-index: 10;
 }
 
+.no-sidebar header .logo {
+    border-radius: 5px;
+}
+
 header .logo:hover {
     border-bottom: 3px solid rgba(255, 255, 255, 0.3);
 }
@@ -173,6 +190,10 @@ header menu {
     z-index: 10;
 }
 
+.no-sidebar header menu {
+    flex-grow: 0;
+}
+
 header menu a {
     padding: 10px 20px 4px 20px;
     color: #eee;
@@ -180,6 +201,10 @@ header menu a {
     border-bottom: 3px solid rgba(0, 0, 0, 0);
 }
 
+.no-sidebar header menu a {
+    margin: 0 10px;
+}
+
 body.has-banner header menu a {
     background: rgba(0, 0, 0, 0.5);
     border-right: 0;
@@ -190,6 +215,12 @@ header menu a.selected {
     border-bottom: 3px solid var(--color-highlight);
 }
 
+.no-sidebar header menu a:hover:not(.logo) {
+    border-bottom: 3px solid rgba(0, 0, 0, 0);
+    background-color: var(--color-bg-menu);
+    border-radius: 5px;
+}
+
 header menu a i {
     font-size: 24px;
     display: inline-block;
@@ -225,10 +256,6 @@ header menu a.identity {
     width: 250px;
 }
 
-body.no-sidebar header menu a.identity {
-    display: none;
-}
-
 header menu a.identity i {
     display: inline-block;
     vertical-align: middle;
@@ -341,10 +368,6 @@ nav a i {
     border-radius: 0 0 5px 0;
 }
 
-body.no-sidebar .right-column {
-    display: none;
-}
-
 .right-column h2 {
     background: var(--color-highlight);
     padding: 8px 10px;
@@ -357,7 +380,43 @@ img.emoji {
     height: 0.8em;
 }
 
-/* Generic markdown styling */
+/* Generic markdown styling and sections */
+
+.no-sidebar section {
+    max-width: 700px;
+    background: var(--color-bg-box);
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
+    margin: 25px auto 45px auto;
+    padding: 5px 15px;
+}
+
+.no-sidebar section.shell {
+    background: none;
+    box-shadow: none;
+    padding: 0;
+}
+
+.no-sidebar #main-content>h1 {
+    max-width: 700px;
+    margin: 25px auto 5px auto;
+    font-weight: bold;
+    font-size: 120%;
+    text-transform: uppercase;
+    color: var(--color-text-main);
+}
+
+.no-sidebar h1+section {
+    margin-top: 0;
+}
+
+.markdown .banner {
+    width: calc(100% + 30px);
+    height: auto;
+    object-fit: cover;
+    margin: -5px -15px 10px -15px;
+    border-radius: 5px 0 0 0;
+    display: block;
+}
 
 .markdown p {
     margin: 4px 0 10px 0;
@@ -461,6 +520,11 @@ img.emoji {
 
 /* Forms */
 
+.no-sidebar form {
+    max-width: 500px;
+    margin: 40px auto;
+}
+
 fieldset {
     border: 0;
     background: var(--color-bg-box);
@@ -1256,14 +1320,14 @@ form .post {
         top: 50px;
     }
 
-    header {
+    body:not(.no-sidebar) header {
         height: var(--md-header-height);
         position: fixed;
         width: 100%;
         z-index: 9;
     }
 
-    header menu a {
+    body:not(.no-sidebar) header menu a {
         background: rgba(0, 0, 0, 0.5);
     }
 
@@ -1274,7 +1338,11 @@ form .post {
         border-radius: 0;
     }
 
-    footer {
+    .no-sidebar main {
+        margin: 20px auto 20px auto;
+    }
+
+    body:not(.no-sidebar) footer {
         position: fixed;
         bottom: 0;
         right: 0;
@@ -1284,12 +1352,12 @@ form .post {
         text-align: right;
     }
 
-    footer a {
+    body:not(.no-sidebar) footer a {
         display: block;
         border: 0;
     }
 
-    header .logo {
+    body:not(.no-sidebar) header .logo {
         border-radius: 0;
     }
 
@@ -1342,7 +1410,7 @@ form .post {
         display: none;
     }
 
-    footer {
+    body:not(.no-sidebar) footer {
         display: none;
     }
 

takahe/urls.py

@@ -17,7 +17,6 @@ urlpatterns = [
     path("local/", timelines.Local.as_view(), name="local"),
     path("federated/", timelines.Federated.as_view(), name="federated"),
     path("search/", search.Search.as_view(), name="search"),
-    path("debug/json/", debug.JsonViewer.as_view(), name="debug_json"),
     path("tags/<hashtag>/", timelines.Tag.as_view(), name="tag"),
     path("explore/", explore.Explore.as_view(), name="explore"),
     path("explore/tags/", explore.ExploreTag.as_view(), name="explore-tag"),
@@ -190,11 +189,7 @@ urlpatterns = [
     path("identity/select/", identity.SelectIdentity.as_view()),
     path("identity/create/", identity.CreateIdentity.as_view()),
     # Flat pages
-    path(
-        "about/",
-        core.FlatPage.as_view(title="About This Server", config_option="site_about"),
-        name="about",
-    ),
+    path("about/", core.About.as_view(), name="about"),
     path(
         "pages/privacy/",
         core.FlatPage.as_view(title="Privacy Policy", config_option="policy_privacy"),
@@ -210,6 +205,10 @@ urlpatterns = [
         core.FlatPage.as_view(title="Server Rules", config_option="policy_rules"),
         name="rules",
     ),
+    # Debug aids
+    path("debug/json/", debug.JsonViewer.as_view(), name="debug_json"),
+    path("debug/404/", debug.NotFound.as_view(), name="not_found"),
+    path("debug/500/", debug.ServerError.as_view(), name="server_error"),
     # Media/image proxy
     path(
         "proxy/identity_icon/<identity_id>/",

templates/404.html

@@ -1,6 +1,8 @@
-{% extends "base.html" %}
+{% extends "base_plain.html" %}
 
 {% block content %}
     <h1>Page Not Found</h1>
+    <section class="markdown">
         <p>Sorry about that.</p>
+    </section>
 {% endblock %}

templates/500.html

@@ -1,6 +1,8 @@
-{% extends "base.html" %}
+{% extends "base_plain.html" %}
 
 {% block content %}
-    <h1>Internal Server Error</h1>
-    <p>Sorry about that.</p>
+    <h1>Internal Error</h1>
+    <section class="markdown">
+        <p>Sorry about that. We'll try to have this working again soon.</p>
+    </section>
 {% endblock %}

templates/about.html

@@ -0,0 +1,19 @@
+{% extends "base_plain.html" %}
+
+{% block title %}Welcome{% endblock %}
+
+{% block content %}
+    <section class="markdown">
+        <img class="banner" src="{{ config.site_banner }}">
+        {{ content }}
+    </section>
+
+    {% if not request.user.is_authenticated %}
+        <h1>Recent Posts</h1>
+        <section class="posts shell">
+            {% for post in posts %}
+                {% include "activities/_post.html" %}
+            {% endfor %}
+        </section>
+    {% endif %}
+{% endblock %}

templates/auth/login.html

@@ -1,9 +1,7 @@
-{% extends "base.html" %}
+{% extends "base_plain.html" %}
 
 {% block title %}Login{% endblock %}
 
-{% block body_class %}no-sidebar{% endblock %}
-
 {% block content %}
     <form action="." method="POST">
         {% csrf_token %}

templates/auth/signup.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "base_plain.html" %}
 
 {% block title %}Create Account{% endblock %}
 

templates/base.html

@@ -23,6 +23,7 @@
     <a id='skip-to-main' class='screenreader-text' href='#main-content'>Skip to Content</a>
     <a id='skip-to-nav' class='screenreader-text' href='#side-navigation'>Skip to Navigation</a>
     <main>
+        {% block body_main %}
         <header>
             <a class="logo" href="/">
                 <img src="{{ config.site_icon }}" width="32">
@@ -73,6 +74,7 @@
                 </div>
             </div>
         {% endblock %}
+        {% endblock %}
     </main>
 
     <footer>

templates/base_plain.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+
+{% block body_class %}no-sidebar{% endblock %}
+
+{% block body_main %}
+    <header>
+        <menu>
+            {% if not request.user.is_authenticated and current_page == "about" and config.signup_allowed %}
+                <a href="/auth/signup/">Sign Up</a>
+            {% else %}
+                <a href="/">Home</a>
+            {% endif %}
+            <a class="logo" href="/">
+                <img src="{{ config.site_icon }}" width="32">
+                {{ config.site_name }}
+            </a>
+            {% if request.user.is_authenticated %}
+                <a href="javascript:history.back()">Back</a>
+            {% else %}
+                <a href="/auth/login/">Login</a>
+            {% endif %}
+        </menu>
+    </header>
+
+    <div id="main-content">
+        {% block content %}
+        {% endblock %}
+    </div>
+{% endblock %}

templates/flatpage.html

@@ -1,10 +1,10 @@
-{% extends "base.html" %}
+{% extends "base_plain.html" %}
 
 {% block title%}{{ title }}{% endblock %}
 
 {% block content %}
     <h1>{{ title }}</h1>
-    <div class="markdown">
+    <section class="markdown">
         {{ content }}
-    </div>
+    </section>
 {% endblock %}

templates/index.html

@@ -1,15 +0,0 @@
-{% extends "base.html" %}
-
-{% block title %}Welcome{% endblock %}
-
-
-{% block content %}
-    <div class="about">
-        <img class="banner" src="{{ config.site_banner }}">
-        {{ about }}
-    </div>
-    <h2>People</h2>
-    {% for identity in identities %}
-        {% include "activities/_identity.html" %}
-    {% endfor %}
-{% endblock %}

users/views/auth.py

@@ -35,7 +35,7 @@ class Signup(FormView):
     class form_class(forms.Form):
 
         email = forms.EmailField(
-            help_text="We will send a link to this email to set your password and create your account",
+            help_text="We will send a link to this email to create your account.",
         )
 
         def __init__(self, *args, **kwargs):