Make the home page remember what tab you were on

public/js/tabs.js

@@ -1,24 +1,38 @@
-function initTabs(container, initialTab = null) {
+function initTabs(container, {
+    initialTab = null,
+    onSelect = (name) => {},
+}) {
     const buttons = Array.from(container.querySelectorAll("[data-tab-button]"));
     const tabs = Array.from(container.querySelectorAll("[data-tab]"));
 
-    if (!initialTab) {
+    const firstTab = tabs[0].getAttribute("data-tab");
-        initialTab = tabs[0].getAttribute("data-tab");
+
+    function selectTab(name, { sendEvent = true } = {}) {
+        if (!document.querySelector(`[data-tab="${name}"]`)) {
+            console.warn("no tab found with name", name);
+            return selectTab(firstTab, initial);
         }
 
-    function switchTo(name) {
         for (const tab of tabs) {
             tab.hidden = tab.getAttribute("data-tab") !== name;
         }
         for (const button of buttons) {
             button.classList.toggle("tab-button-active", button.getAttribute("data-tab-button") === name);
         }
+
+        if (sendEvent) {
+            onSelect(name);
         }
-    switchTo(initialTab);
+    }
+    selectTab(initialTab || firstTab, { sendEvent: false });
 
     for (const button of buttons) {
         button.addEventListener("click", () => {
-            switchTo(button.getAttribute("data-tab-button"));
+            selectTab(button.getAttribute("data-tab-button"));
         });
     }
+
+    return {
+        selectTab,
+    };
 }

src/templates/src/landing.html

@@ -154,29 +154,34 @@
 						<div data-tab="following" class="timeline">
 							{{ range .FollowingItems }}
 								{{ template "timeline_item.html" . }}
+							{{ else }}
+								<div class="pv4 f6 tc">You are not following anything. Follow users and projects to see their posts here.</div>
 							{{ end }}
+							TODO: READ MORE LINK
 						</div>
 					{{ end }}
 					<div data-tab="featured" class="timeline">
 						{{ range .FeaturedItems }}
 							{{ template "timeline_item.html" . }}
 						{{ end }}
+						TODO: READ MORE LINK
 					</div>
 					<div data-tab="recent" class="timeline">
 						{{ range .RecentItems }}
 							{{ template "timeline_item.html" . }}
 						{{ end }}
+						TODO: READ MORE LINK
 					</div>
 					<div data-tab="news" class="timeline">
 						{{ range .NewsItems }}
 							{{ template "timeline_item.html" . }}
 						{{ end }}
-					</div>
 						TODO: READ MORE LINK
 					</div>
 				</div>
 			</div>
 		</div>
+	</div>
 </div>
 
 <script>
@@ -191,7 +196,19 @@
 		chevron.classList.toggle("rot-180", !hide);
 	}
 
-	initTabs(document.querySelector("#landing-tabs"));
+	const noFollowing = document.querySelectorAll("[data-tab='following'] .timeline-item").length === 0;
+	const { selectTab } = initTabs(document.querySelector("#landing-tabs"), {
+		initialTab: document.location.hash.substring(1) || (noFollowing && "featured"),
+		onSelect(name) {
+			document.location.hash = `#${name}`;
+		}
+	});
+	window.addEventListener("hashchange", e => {
+		const tab = new URL(e.newURL).hash.substring(1);
+		if (tab) {
+			selectTab(tab, { sendEvent: false });
+		}
+	});
 </script>
 
 {{ end }}

src/website/landing.go

@@ -12,6 +12,8 @@ import (
 )
 
 func Index(c *RequestContext) ResponseData {
+	const maxPostsPerTab = 60
+
 	c.Perf.StartBlock("SQL", "Fetch subforum tree")
 	subforumTree := models.GetFullSubforumTree(c, c.Conn)
 	lineageBuilder := models.MakeSubforumLineageBuilder(subforumTree)
@@ -67,14 +69,14 @@ func Index(c *RequestContext) ResponseData {
 	}
 	featuredItems, err = FetchTimeline(c, c.Conn, c.CurrentUser, lineageBuilder, hmndata.TimelineQuery{
 		ProjectIDs: featuredProjectIDs,
-		Limit:      100,
+		Limit:      maxPostsPerTab,
 	})
 	if err != nil {
 		c.Logger.Warn().Err(err).Msg("failed to fetch featured feed")
 	}
 
 	recentItems, err = FetchTimeline(c, c.Conn, c.CurrentUser, lineageBuilder, hmndata.TimelineQuery{
-		Limit: 100,
+		Limit: maxPostsPerTab,
 	})
 	if err != nil {
 		c.Logger.Warn().Err(err).Msg("failed to fetch recent feed")
@@ -83,7 +85,7 @@ func Index(c *RequestContext) ResponseData {
 	newsThreads, err := hmndata.FetchThreads(c, c.Conn, c.CurrentUser, hmndata.ThreadsQuery{
 		ProjectIDs:     []int{models.HMNProjectID},
 		ThreadTypes:    []models.ThreadType{models.ThreadTypeProjectBlogPost},
-		Limit:          100,
+		Limit:          maxPostsPerTab,
 		OrderByCreated: true,
 	})
 	if err != nil {

todo-styles.md

@@ -3,7 +3,8 @@
 - [ ] Fix spacing of podcast episodes (used to use p-spaced)
 - [x] Audit uses of tables across the site to see where we might actually need to apply table-layout: fixed and border-collapse: collapse
     - There are zero tables on the site except one used for Asaf's debugging.
-- [ ] Recover <hr> styles and use them only in post-content
+- [x] Recover <hr> styles and use them only in post-content
+    - hr's are fine outside of post-content now too.
 - [ ] Audit and fix all uses of:
     - [ ] big
     - [ ] title
@@ -15,23 +16,23 @@
     - [ ] content
     - [ ] description
     - [ ] c--dim and friends
-- [ ] Re-evaluate form styles
+- [x] Re-evaluate form styles
-    - [ ] theme-color-light is used only for buttons
+    - [x] theme-color-light is used only for buttons
 - [x] center-layout vs. margin-center
-- [ ] Make sure old projects look ok (background images are gone)
+- [x] Make sure old projects look ok (background images are gone)
 - [ ] Audit or delete whenisit
-- optionbar fixes
+- [ ] optionbar fixes
     - [ ] Remove "external" styles (width, padding, etc.)
     - [ ] Fix options (no more "buttons")
     - [ ] Convert all buttons to links
     - [ ] Generally audit visuals
     - [ ] Find that thing and kill it?
-- [ ] Probably remove uses of .tab
+- [x] Probably remove uses of .tab
-- [ ] everything in _content.scss, ugh
+- [x] everything in _content.scss, ugh
-- [ ] Reduce saturation of --background-even-background
+- [-] Reduce saturation of --background-even-background
 - [ ] Update blog styles to not use `post` and other garbage
     - [ ] Remove from forum.css
-- [ ] Remove all uses of .content-block
+- [x] Remove all uses of .content-block
 - [ ] Figure out what's up with the projects on the jam pages
 - [ ] Determine if we actually need .project-carousel, or if our general carousel styles (?) are sufficient
 - [ ] Rename `-2024` files
@@ -57,7 +58,7 @@
 - [ ] Handle empty avatar URLs correctly in various places (render as theme-dependent default)
 - [x] Convert to new color vars
 - [ ] Make snippet descriptions partially collapse by default
-- [ ] Make the home page remember which tab you were on
+- [x] Make the home page remember which tab you were on
 - [ ] Convert any plain TODOs introduced in this massive branch into TODO(redesign)
 - [ ] Resolve TODO(redesign) comments
 - [ ] Audit all project lifecycles on HMN - probably remove "complete", replace with stuff like "alpha", "beta", maybe other stuff that makes sense for other types of projects.