From 5c916be6db8317a7301965d2b8d8cf44ba35bf28 Mon Sep 17 00:00:00 2001
From: Dan G <freemvmt@posteo.net>
Date: Tue, 14 Apr 2026 12:30:04 +0100
Subject: [PATCH 1/3] add social icons to nav menu across both viewports

---
 stopwatch/templates/base.html | 42 +++++++++++++++++++++++++++++------
 1 file changed, 35 insertions(+), 7 deletions(-)

diff --git a/stopwatch/templates/base.html b/stopwatch/templates/base.html
index 64e1ab7..d7a7c5b 100644
--- a/stopwatch/templates/base.html
+++ b/stopwatch/templates/base.html
@@ -62,7 +62,7 @@
                     <div class="modal-body bg-darkgrey red-shadow">
                         <div class="input-group">
                             <div class="heading-small bg-white d-flex align-items-center justify-content-center p-3">
-                                <i class="bi-search"></i>
+                                <i class="bi bi-search"></i>
                             </div>
                             <input name="query" tabindex="1" autofocus class="p-2 ps-0 form-control nooutline heading-large text-naturalcase" autocapitalize="off" aria-label="Search">
                         </div>
@@ -77,7 +77,19 @@
         {% block header %}
         <div class="container container-outline microcopy pt-2 pt-md-3 d-flex flex-row align-items-center justify-content-between">
             {{settings.stopwatch.SiteSettings.tagline|richtext}}
-            <div class="d-none d-md-block">
+            <div class="d-none d-md-flex align-items-center gap-3">
+                <a href="https://www.instagram.com/stopwatch_uk/" target="_blank" rel="noopener noreferrer" class="text-muteddarkgrey" aria-label="Instagram">
+                    <i class="bi bi-instagram fs-5"></i>
+                </a>
+                <a href="https://bsky.app/profile/stopwatchuk.bsky.social" target="_blank" rel="noopener noreferrer" class="text-muteddarkgrey" aria-label="BlueSky">
+                    <i class="bi bi-bluesky fs-5"></i>
+                </a>
+                <a href="https://www.tiktok.com/@stopwatch_uk" target="_blank" rel="noopener noreferrer" class="text-muteddarkgrey" aria-label="TikTok">
+                    <i class="bi bi-tiktok fs-5"></i>
+                </a>
+                <a href="https://www.linkedin.com/company/stopwatchuk/" target="_blank" rel="noopener noreferrer" class="text-muteddarkgrey" aria-label="LinkedIn">
+                    <i class="bi bi-linkedin fs-5"></i>
+                </a>
                 <a class="btn text-muteddarkgrey" href="/about-stopwatch">About</a>
                 <a href="{{settings.stopwatch.SiteSettings.donate_page.url}}" class="btn btn-primary">Donate</a>
             </div>
@@ -127,8 +139,24 @@
                 </svg>
               </button>
             </nav>
-            
+
             <div class="collapse bg-light d-md-none full-bleed" id="navbarToggleMenu">
+
+                <div class="d-flex justify-content-end gap-3 p-0 me-3 mb-3">
+                    <a href="https://www.instagram.com/stopwatch_uk/" target="_blank" rel="noopener noreferrer" class="text-dark" aria-label="Instagram">
+                        <i class="bi bi-instagram fs-5"></i>
+                    </a>
+                    <a href="https://bsky.app/profile/stopwatchuk.bsky.social" target="_blank" rel="noopener noreferrer" class="text-dark" aria-label="BlueSky">
+                        <i class="bi bi-bluesky fs-5"></i>
+                    </a>
+                    <a href="https://www.tiktok.com/@stopwatch_uk" target="_blank" rel="noopener noreferrer" class="text-dark" aria-label="TikTok">
+                        <i class="bi bi-tiktok fs-5"></i>
+                    </a>
+                    <a href="https://www.linkedin.com/company/stopwatchuk/" target="_blank" rel="noopener noreferrer" class="text-dark" aria-label="LinkedIn">
+                        <i class="bi bi-linkedin fs-5"></i>
+                    </a>
+                </div>
+
                 <ul class="nav nav-outline flex-column text-lg">
                     {% mainmenu %}
                         {% for item in menu.children %}
@@ -222,16 +250,16 @@
                         <div class="col-8 col-md-4">
                             <div class="d-flex gap-3">
                               <a href="https://www.instagram.com/stopwatch_uk/" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="Instagram">
-                                <i class="bi-instagram fs-5"></i>
+                                <i class="bi bi-instagram fs-5"></i>
                               </a>
                               <a href="https://bsky.app/profile/stopwatchuk.bsky.social" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="BlueSky">
-                                <i class="bi-bluesky fs-5"></i>
+                                <i class="bi bi-bluesky fs-5"></i>
                               </a>
                               <a href="https://www.tiktok.com/@stopwatch_uk" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="TikTok">
-                                <i class="bi-tiktok fs-5"></i>
+                                <i class="bi bi-tiktok fs-5"></i>
                               </a>
                               <a href="https://www.linkedin.com/company/stopwatchuk/" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="LinkedIn">
-                                  <i class="bi-linkedin fs-5"></i>
+                                  <i class="bi bi-linkedin fs-5"></i>
                               </a>
                             </div>
                         </div>

From e2007e98e2d5cabb174a02115d8913f1eb59c9d7 Mon Sep 17 00:00:00 2001
From: Dan G <freemvmt@posteo.net>
Date: Tue, 21 Apr 2026 12:58:52 +0100
Subject: [PATCH 2/3] extract social links as template to include (DRY)

---
 stopwatch/templates/base.html                 | 39 ++-----------------
 .../stopwatch/includes/social_links.html      | 12 ++++++
 2 files changed, 15 insertions(+), 36 deletions(-)
 create mode 100644 stopwatch/templates/stopwatch/includes/social_links.html

diff --git a/stopwatch/templates/base.html b/stopwatch/templates/base.html
index d7a7c5b..ff32095 100644
--- a/stopwatch/templates/base.html
+++ b/stopwatch/templates/base.html
@@ -78,18 +78,7 @@
         <div class="container container-outline microcopy pt-2 pt-md-3 d-flex flex-row align-items-center justify-content-between">
             {{settings.stopwatch.SiteSettings.tagline|richtext}}
             <div class="d-none d-md-flex align-items-center gap-3">
-                <a href="https://www.instagram.com/stopwatch_uk/" target="_blank" rel="noopener noreferrer" class="text-muteddarkgrey" aria-label="Instagram">
-                    <i class="bi bi-instagram fs-5"></i>
-                </a>
-                <a href="https://bsky.app/profile/stopwatchuk.bsky.social" target="_blank" rel="noopener noreferrer" class="text-muteddarkgrey" aria-label="BlueSky">
-                    <i class="bi bi-bluesky fs-5"></i>
-                </a>
-                <a href="https://www.tiktok.com/@stopwatch_uk" target="_blank" rel="noopener noreferrer" class="text-muteddarkgrey" aria-label="TikTok">
-                    <i class="bi bi-tiktok fs-5"></i>
-                </a>
-                <a href="https://www.linkedin.com/company/stopwatchuk/" target="_blank" rel="noopener noreferrer" class="text-muteddarkgrey" aria-label="LinkedIn">
-                    <i class="bi bi-linkedin fs-5"></i>
-                </a>
+                {% include "stopwatch/includes/social_links.html" with link_class="text-muteddarkgrey" only %}
                 <a class="btn text-muteddarkgrey" href="/about-stopwatch">About</a>
                 <a href="{{settings.stopwatch.SiteSettings.donate_page.url}}" class="btn btn-primary">Donate</a>
             </div>
@@ -143,18 +132,7 @@
             <div class="collapse bg-light d-md-none full-bleed" id="navbarToggleMenu">
 
                 <div class="d-flex justify-content-end gap-3 p-0 me-3 mb-3">
-                    <a href="https://www.instagram.com/stopwatch_uk/" target="_blank" rel="noopener noreferrer" class="text-dark" aria-label="Instagram">
-                        <i class="bi bi-instagram fs-5"></i>
-                    </a>
-                    <a href="https://bsky.app/profile/stopwatchuk.bsky.social" target="_blank" rel="noopener noreferrer" class="text-dark" aria-label="BlueSky">
-                        <i class="bi bi-bluesky fs-5"></i>
-                    </a>
-                    <a href="https://www.tiktok.com/@stopwatch_uk" target="_blank" rel="noopener noreferrer" class="text-dark" aria-label="TikTok">
-                        <i class="bi bi-tiktok fs-5"></i>
-                    </a>
-                    <a href="https://www.linkedin.com/company/stopwatchuk/" target="_blank" rel="noopener noreferrer" class="text-dark" aria-label="LinkedIn">
-                        <i class="bi bi-linkedin fs-5"></i>
-                    </a>
+                    {% include "stopwatch/includes/social_links.html" with link_class="text-dark" only %}
                 </div>
 
                 <ul class="nav nav-outline flex-column text-lg">
@@ -249,18 +227,7 @@
                     <div class="row mb-4 g-4">
                         <div class="col-8 col-md-4">
                             <div class="d-flex gap-3">
-                              <a href="https://www.instagram.com/stopwatch_uk/" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="Instagram">
-                                <i class="bi bi-instagram fs-5"></i>
-                              </a>
-                              <a href="https://bsky.app/profile/stopwatchuk.bsky.social" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="BlueSky">
-                                <i class="bi bi-bluesky fs-5"></i>
-                              </a>
-                              <a href="https://www.tiktok.com/@stopwatch_uk" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="TikTok">
-                                <i class="bi bi-tiktok fs-5"></i>
-                              </a>
-                              <a href="https://www.linkedin.com/company/stopwatchuk/" target="_blank" rel="noopener noreferrer" class="text-white" aria-label="LinkedIn">
-                                  <i class="bi bi-linkedin fs-5"></i>
-                              </a>
+                                {% include "stopwatch/includes/social_links.html" with link_class="text-white" only %}
                             </div>
                         </div>
                     </div>
diff --git a/stopwatch/templates/stopwatch/includes/social_links.html b/stopwatch/templates/stopwatch/includes/social_links.html
new file mode 100644
index 0000000..d51e8c3
--- /dev/null
+++ b/stopwatch/templates/stopwatch/includes/social_links.html
@@ -0,0 +1,12 @@
+<a href="https://www.instagram.com/stopwatch_uk/" target="_blank" rel="noopener noreferrer" class="{{ link_class|default:'text-dark' }}" aria-label="Instagram">
+    <i class="bi bi-instagram fs-5"></i>
+</a>
+<a href="https://bsky.app/profile/stopwatchuk.bsky.social" target="_blank" rel="noopener noreferrer" class="{{ link_class|default:'text-dark' }}" aria-label="Bluesky">
+    <i class="bi bi-bluesky fs-5"></i>
+</a>
+<a href="https://www.tiktok.com/@stopwatch_uk" target="_blank" rel="noopener noreferrer" class="{{ link_class|default:'text-dark' }}" aria-label="TikTok">
+    <i class="bi bi-tiktok fs-5"></i>
+</a>
+<a href="https://www.linkedin.com/company/stopwatchuk/" target="_blank" rel="noopener noreferrer" class="{{ link_class|default:'text-dark' }}" aria-label="LinkedIn">
+    <i class="bi bi-linkedin fs-5"></i>
+</a>

From 91059e62e75b69d3e890e1058de15cc98a7735d5 Mon Sep 17 00:00:00 2001
From: Dan G <freemvmt@posteo.net>
Date: Tue, 21 Apr 2026 13:02:19 +0100
Subject: [PATCH 3/3] add brief troubleshooting notes to readme

---
 readme.md | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/readme.md b/readme.md
index a26756f..bcff833 100644
--- a/readme.md
+++ b/readme.md
@@ -32,6 +32,8 @@ Staging: https://stopwatch.commonknowledge.dev/
   python manage.py setup_pages --scratch True --ensure-site True --ensure-pages True
   ```
 
+If you're having issues getting started this way, see [Troubleshooting](#troubleshooting-setup) for some ideas.
+
 ### Hard mode: Using Dockerfiles
 
 Figure it out for yourself based on the .devcontainer dockerfile and write it up here ;)
@@ -47,3 +49,15 @@ They both run .bin in ./.bin to configure their environments and install depende
 - Base container configuration, which is run infrequently (installing apt packages, etc) should be configured in prepare.sh.
 - Frequently-run .bin (installing pip packages, etc) should go in install.sh. The difference between these is that changing prepare.sh triggers a full rebuild of the development container, whereas install.sh is only run after the container is built.
 - build.sh is the last thing run on deploy to production
+
+## Troubleshooting setup
+
+This is based on the experience of @freemvmt trying to set up the project on [Easy mode](#easy-mode-vscode-dev-container) for the first time in March 2026.
+
+1. The `Clone Repository in Container Volume` function, which pulls `main` from the remote and tries to build it in a local Docker container, didn't work for me, whereas `Open Folder in Container` (i.e. using my local copy of the repo) did.
+
+2. Once inside the container, `install.sh` was failing due to multiple copies of `virtualenv` being available. I fixed this by changing all references of `pipenv` to `python -m pipenv`, to ensure that we use the version associated with the python installation (merged in via #[86](https://github.com/commonknowledge/stopwatch/pull/86)).
+
+3. The 'import' option in Wagtail admin dashboard only appeared after populating the `stopwatch/settings/local.py` file. Even then, the import function proved error prone, so we instead used a psql dump from staging to produce a relevant dev environment (i.e. I ran something like `PGPASSWORD=postgres psql -h db -U postgres -d postgres < /workspace/stopwatch_staging.psql`).
+
+4. The dev site was not initially styled, despite the webpack server that runs as part of the 'App' config in `launch.json` - I ran `yarn webpack` manually to fix that.