layout tweaks for trending

TylerFisher · Jan 3, 2025 · 3475390 · 3475390
1 parent 773f8e0
commit 3475390
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 35 deletions.
diff --git a/app/components/nav/Header.module.css b/app/components/nav/Header.module.css
@@ -38,6 +38,9 @@
   .header-wrapper {
     border-bottom: none;
   }
+  .onboarding-logo {
+    margin-bottom: -2rem;
+  }
 }
 
 

diff --git a/app/components/nav/Layout.module.css b/app/components/nav/Layout.module.css
@@ -22,7 +22,7 @@
 	padding: 1em;
 	box-shadow: var(--base-card-surface-box-shadow);
 	border-radius: 0;
-	margin: 3.5rem auto 1rem;
+	margin: 2.5rem auto 1rem;
 	width: 100%;
 }
 
@@ -32,10 +32,14 @@
     margin: 0 0.5em;
   }
   .content {
-		grid-column: col-start / span 8;
+		grid-column: col-start 3 / span 8;
     border-radius: var(--radius-4);
-    margin-top: 3.75rem;
 	}
+
+  .content.grid {
+    grid-column: col-start / span 8;
+  }
+
   .right {
     display: block;
 		grid-column: col-start 9 / span 4;
@@ -67,6 +71,10 @@
     margin-top: 2rem;
 	}
 
+  .content.grid {
+    grid-column: col-start 4 / span 6;
+  }
+
   .right {
     top: 0;
     grid-column: col-start 10 / span 3;

diff --git a/app/components/nav/Layout.tsx b/app/components/nav/Layout.tsx
@@ -33,7 +33,9 @@ const Layout = ({ children, hideNav, sidebar }: LayoutProps) => {
 						<Nav layoutFormId="desktop-layout" themeFormId="desktop-theme" />
 					</aside>
 				)}
-				<main className={styles.content}>{children}</main>
+				<main className={`${styles.content} ${sidebar && styles.grid}`}>
+					{children}
+				</main>
 				{sidebar && <aside className={styles.right}>{sidebar}</aside>}
 			</div>
 		</Container>

diff --git a/app/routes/links/trending.tsx b/app/routes/links/trending.tsx
@@ -13,14 +13,12 @@ import {
 	Callout,
 	Flex,
 	Heading,
-	Link,
-	Select,
 	Separator,
 	Spinner,
 	Text,
 } from "@radix-ui/themes";
-import { Await, NavLink, useSearchParams } from "react-router";
-import { Suspense, useState } from "react";
+import { Await, NavLink } from "react-router";
+import { Suspense } from "react";
 import PostRep from "~/components/linkPosts/PostRep";
 import NumberRanking from "~/components/linkPosts/NumberRanking";
 import { TrendingUp } from "lucide-react";
@@ -44,6 +42,19 @@ export const loader = async ({ request }: Route.LoaderArgs) => {
 	};
 };
 
+const PromoContent = () => (
+	<Flex justify="center" align="center" direction="column" gap="2">
+		<Text as="p">Want to see the most popular links in your own network? </Text>
+		<Text as="p">
+			<NavLink to="/accounts/signup">
+				<Button type="button" size="3">
+					Sign up for Sill
+				</Button>
+			</NavLink>
+		</Text>
+	</Flex>
+);
+
 const TopTen = ({ loaderData }: Route.ComponentProps) => {
 	const { existingUser, topTen } = loaderData;
 	const layout = useLayout();
@@ -62,24 +73,7 @@ const TopTen = ({ loaderData }: Route.ComponentProps) => {
 						borderTop: "1px solid var(--accent-11)",
 					}}
 				>
-					<Flex justify="center" align="center" direction="column" gap="2">
-						<Text as="p">
-							Want to see the most popular links in your own network?{" "}
-						</Text>
-						<Text as="p">
-							{existingUser ? (
-								<NavLink to="/links">
-									<Button type="button">See your top links</Button>
-								</NavLink>
-							) : (
-								<NavLink to="/accounts/signup">
-									<Button type="button" size="4">
-										Sign up for Sill
-									</Button>
-								</NavLink>
-							)}
-						</Text>
-					</Flex>
+					<PromoContent />
 				</Box>
 			)}
 
@@ -94,9 +88,8 @@ const TopTen = ({ loaderData }: Route.ComponentProps) => {
 					</Callout.Icon>
 					<Callout.Text>
 						Trending is a list of the most popular links on Sill right now. Sill
-						calculates popularity by looking at the number of accounts who have
-						posted a link on Bluesky or Mastodon. Read more{" "}
-						<Link href="https://docs.sill.social">here</Link>.
+						calculates popularity by looking at the number of accounts Sill
+						knows about who have posted a link on Bluesky or Mastodon.
 					</Callout.Text>
 				</Callout.Root>
 
@@ -111,7 +104,7 @@ const TopTen = ({ loaderData }: Route.ComponentProps) => {
 				>
 					<Await resolve={topTen}>
 						{(topTen) => (
-							<Box>
+							<Box mb={!existingUser ? "100px" : "0"}>
 								{topTen.map((linkPost, index) => (
 									<Box key={linkPost.link?.id} position="relative">
 										<NumberRanking ranking={index + 1} layout={layout} />
@@ -150,7 +143,7 @@ const TopTen = ({ loaderData }: Route.ComponentProps) => {
 												</Box>
 											</>
 										)}
-										<Separator size="4" my="7" />
+										{index < topTen.length - 1 && <Separator size="4" my="7" />}
 									</Box>
 								))}
 							</Box>

diff --git a/app/utils/shorteners.txt b/app/utils/shorteners.txt
@@ -3204,6 +3204,7 @@ go.bbb.org
 go.bengals.com
 go.bioshack.org
 go.brit.co
+go.bsky.app
 go.btwrdn.co
 go.cb.pr
 go.cbs4indy.com

diff --git a/app/utils/trackingParams.txt b/app/utils/trackingParams.txt
@@ -121,4 +121,5 @@ gifting_article
 itid
 tgrp
 feature
-pvid
+pvid
+via
diff --git a/workers/process-queue.tsx b/workers/process-queue.tsx
@@ -144,10 +144,8 @@ async function processQueue() {
       Batch Duration: ${batchDuration}ms
     `);
 		} else {
-			// refresh network top ten
+			await db.refreshMaterializedView(networkTopTenView);
 			if (process.env.NODE_ENV === "production") {
-				await db.refreshMaterializedView(networkTopTenView);
-
 				const users = await db.query.user.findMany({
 					orderBy: asc(user.createdAt),
 				});
-Original file line number
+Diff line change
@@ Expand Up / @@ -121,4 +121,5 @@ gifting_article @@
     itid
     tgrp
     feature
-    pvid
+    pvid
+    via