refactor(ui): remove article footer and update sidebar links #2056
Conversation
📝 WalkthroughWalkthroughThis PR refactors the blog post view layout from a multi-column structure with table of contents and sidebars into a simplified sectioned design. It updates related articles card rendering, modifies CTA sections across blog/docs/handbook pages, adjusts article filtering logic, and makes footer visibility changes in the routing layer. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/web/src/routes/_view/blog/$slug.tsx (2)
20-26: Redundant check - dead code.The condition on line 24-26 is never reached because line 20 already throws
notFound()whenarticle.published !== true(which includesfalse).loader: async ({ params }) => { const article = allArticles.find((article) => article.slug === params.slug); if (!article || (!import.meta.env.DEV && article.published !== true)) { throw notFound(); } - if (!import.meta.env.DEV && article.published === false) { - throw notFound(); - } - const relatedArticles = allArticles
40-42: Missing fallback for undefinedupdateddate.Using
a.updateddirectly without a fallback will produceNaNwhenupdatedis undefined, causing unpredictable sort order. The index file correctly usesa.updated || a.created.- return new Date(b.updated).getTime() - new Date(a.updated).getTime(); + const aDate = a.updated || a.created; + const bDate = b.updated || b.created; + return new Date(bDate).getTime() - new Date(aDate).getTime();
🧹 Nitpick comments (4)
apps/web/src/routes/_view/company-handbook/route.tsx (1)
90-94: LGTM! Padding adjustment aligns with PR objectives.The increased left padding (
pl-5) creates better visual hierarchy for the sidebar links. The change is intentional and correct.Optional: Consider using
cnutility for className logic.As per coding guidelines, the conditional className logic could be refactored using the
cnutility for better readability and maintainability:import { cn } from "@hypr/utils"; // ... className={cn([ "block pl-5 pr-3 py-1.5 text-sm rounded-sm transition-colors", currentSlug === doc.slug ? "bg-neutral-100 text-stone-600 font-medium" : "text-neutral-600 hover:text-stone-600 hover:bg-neutral-50" ])}Based on coding guidelines, prefer
cnfor conditional classNames to improve maintainability.apps/web/src/routes/_view/route.tsx (1)
119-122: Consider usingcnfor conditionalclassNamecompositionBoth the
MobileDocsDrawercontainer (Lines 119–122) and the docs links (Lines 158–162) manually interpolate conditional class strings. To better follow the TSX guidelines and improve readability, you could switch tocnfrom@hypr/utilsand group base vs. conditional classes, e.g.:import { cn } from "@hypr/utils"; <div className={cn( "fixed top-[69px] left-0 h-[calc(100vh-69px)] w-72 bg-white border-r border-neutral-100 shadow-2xl shadow-neutral-900/20 z-50 md:hidden transition-transform duration-300 ease-in-out", isOpen ? "translate-x-0" : "-translate-x-full", )} >and similarly for the active vs. inactive link styles.
Also applies to: 158-162
apps/web/src/routes/_view/blog/$slug.tsx (2)
102-106: Consider extracting shared constant.
AUTHOR_AVATARSis duplicated in bothindex.tsxand$slug.tsx. Extract to a shared module (e.g.,@/constants/authors.ts) to keep them in sync.
307-309: Duplicated ogImage URL construction.This logic is duplicated from the
head()function (lines 51-53). Consider extracting to a shared helper function for consistency.// Could be extracted to a helper, e.g.: function getArticleOgImage(article: { coverImage?: string; title: string; author?: string; created?: string }) { return article.coverImage || `https://hyprnote.com/og?type=blog&title=${encodeURIComponent(article.title)}${article.author ? `&author=${encodeURIComponent(article.author)}` : ""}${article.created ? `&date=${encodeURIComponent(new Date(article.created).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }))}` : ""}`; }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/web/src/routes/_view/blog/$slug.tsx(5 hunks)apps/web/src/routes/_view/blog/index.tsx(1 hunks)apps/web/src/routes/_view/company-handbook/-components.tsx(1 hunks)apps/web/src/routes/_view/company-handbook/route.tsx(1 hunks)apps/web/src/routes/_view/docs/-components.tsx(1 hunks)apps/web/src/routes/_view/route.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/routes/_view/company-handbook/route.tsxapps/web/src/routes/_view/route.tsxapps/web/src/routes/_view/blog/index.tsxapps/web/src/routes/_view/company-handbook/-components.tsxapps/web/src/routes/_view/docs/-components.tsxapps/web/src/routes/_view/blog/$slug.tsx
🧠 Learnings (1)
📚 Learning: 2025-11-24T16:32:19.706Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:19.706Z
Learning: Applies to **/*.{ts,tsx} : Use `motion/react` instead of `framer-motion`.
Applied to files:
apps/web/src/routes/_view/blog/$slug.tsx
🧬 Code graph analysis (3)
apps/web/src/routes/_view/route.tsx (1)
apps/web/src/components/footer.tsx (1)
Footer(10-315)
apps/web/src/routes/_view/docs/-components.tsx (2)
apps/storybook/stories/Button.stories.tsx (1)
Link(51-56)packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/blog/$slug.tsx (5)
apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)apps/web/src/hooks/use-platform.ts (2)
usePlatform(5-33)getPlatformCTA(35-43)apps/web/src/components/image.tsx (1)
Image(4-24)apps/web/src/components/download-button.tsx (1)
DownloadButton(5-21)packages/utils/src/cn.ts (1)
cn(20-22)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: Redirect rules - hyprnote-storybook
- GitHub Check: Header rules - hyprnote-storybook
- GitHub Check: Pages changed - hyprnote-storybook
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: ci
- GitHub Check: fmt
🔇 Additional comments (8)
apps/web/src/routes/_view/docs/-components.tsx (1)
168-180: LGTM! Clean CTA refactor.The changes successfully update the sidebar CTA from a "Book a call" anchor to a "Download for free" link that navigates to
/download. The use of TanStack Router'sLinkcomponent is appropriate for client-side navigation, and thecnutility usage follows the coding guidelines correctly with array syntax and logical grouping.apps/web/src/routes/_view/company-handbook/-components.tsx (1)
154-169: CTA implementation follows guidelines correctlyThe
Linkto/download, copy, and styling are appropriate. Thecnutility is correctly applied with logical grouping, and no unnecessary types or state management patterns are present.apps/web/src/routes/_view/route.tsx (1)
53-53: Footer now always rendering looks consistent with global layout refactorMaking
<Footer />unconditional keeps the layout simple (flex-1main + global footer) and matches the PR’s intent to centralize footer behavior instead of handling it specially per docs page. No functional issues from this change stand out.apps/web/src/routes/_view/blog/index.tsx (1)
56-58: LGTM!The stricter
=== truecheck correctly excludes articles wherepublishedisundefinedor any other falsy value, ensuring only explicitly published articles appear in production.apps/web/src/routes/_view/blog/$slug.tsx (4)
108-150: LGTM!Clean semantic structure with proper heading hierarchy and consistent date formatting.
200-244: LGTM!Platform-aware CTA rendering is well-implemented with proper use of the
usePlatformhook and conditional rendering.
246-304: LGTM!Scroll-based visibility logic is correctly implemented with proper cleanup. Uses
motion/reactas per guidelines. Based on learnings, the motion import is correct.
80-100: LGTM!Clean refactoring with well-separated concerns. The simplified sectioned layout improves readability and maintainability.
ComputelessComputer
deleted the
refactor/remove-article-footer-sidebar-links
branch
No description provided.