Add uuids and the ability to permalink

main/migrations/0003_thought_uuid.py

@@ -0,0 +1,34 @@
+# Generated by Django 3.1.3 on 2020-11-21 23:54
+
+from django.db import migrations, models
+import uuid
+
+
+def add_uuids(apps, schema_editor):
+    Thought = apps.get_model("main", "Thought")
+    for thought in Thought.objects.all():
+        thought.uuid = uuid.uuid4()
+        thought.save()
+
+
+def reverse_add_uuids(apps, schema_editor):
+    pass
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0002_auto_20200906_0324'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='thought',
+            name='uuid',
+            field=models.UUIDField(default=uuid.uuid4, editable=False),
+        ),
+        migrations.RunPython(
+            add_uuids,
+            reverse_code=reverse_add_uuids
+        )
+    ]

main/models.py

@@ -1,3 +1,5 @@
+import uuid
+
 from django.db import models
 
 
@@ -5,5 +7,5 @@ class Thought(models.Model):
     text = models.CharField(max_length=140)
     extended_text = models.TextField(blank=True)
     posted = models.DateTimeField(auto_now_add=True)
+    uuid = models.UUIDField(default=uuid.uuid4, editable=False)
     timezone_offset = models.IntegerField()  # The number of minutes behind UTC we were when this was posted
-

main/static/main/main.css

@@ -112,6 +112,10 @@ body {
     line-height: 1.5em;
 }
 
+.thought.highlighted .main, .thought.highlighted .extended-text {
+    margin-left: 25px;
+}
+
 button.show-more {
     background: none;
     border: none;

main/templates/whispermaphone/index.html

@@ -23,7 +23,7 @@
 
     <section class="main-wrap">
     {% for thought in thoughts %}
-        <div class="thought">
+        <div class="thought{% if thought.uuid == highlighted %} highlighted{% endif %}" id="{{thought.uuid}}">
             <div class="main">
                 <span class="main-text text">{{thought.text}}</span>
             </div>
@@ -77,6 +77,11 @@
             }
             timestampEl.textContent = `${time.getFullYear()}-${time.getMonth()+1}-${time.getDate()}, ${hours}:${minutes}${ampm}`
         }
+
+        const highlighted = document.querySelector(".highlighted");
+        if (highlighted) {
+            highlighted.scrollIntoView();
+        }
     </script>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.2.0/build/styles/tomorrow-night.min.css">

main/views.py

@@ -1,3 +1,5 @@
+import uuid
+
 from django.http import HttpResponse
 from django.shortcuts import render
 from .models import Thought
@@ -11,8 +13,14 @@ def index(request):
     except KeyError:
         pass
 
+    try:
+        highlighted_uuid = uuid.UUID(request.GET.get("show", ""))
+    except ValueError:
+        highlighted_uuid = ""
+
     return render(request, "whispermaphone/index.html", {
         "thoughts": Thought.objects.order_by("-posted"),
+        "highlighted": highlighted_uuid,
         "authenticated": authenticated
     })