feat(resources): add curated design galleries page#493
Merged
Conversation
Add /resources with OG previews, outbound ref tags, and a gallery grid. Co-authored-by: Cursor <cursoragent@cursor.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR adds a Resources page: a typed resource dataset and getter, an outbound-ref URL helper, grid UI components (backdrop, grid, item), a ResourcesShell that assembles them, and a Next.js page exporting metadata and rendering the shell. ChangesResources Page
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
lib/resources.ts (1)
484-486: 💤 Low valueConsider removing the wrapper function.
getResources()directly returns theRESOURCESarray without transformation or side effects. Consumers can importRESOURCESdirectly, simplifying the API.♻️ Simplification option
Consumers can use:
-import { getResources } from "`@/lib/resources`"; -const resources = getResources(); +import { RESOURCES } from "`@/lib/resources`"; +const resources = RESOURCES;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@lib/resources.ts` around lines 484 - 486, Remove the trivial wrapper getResources and have callers use the RESOURCES array directly: delete the getResources() function (and its export) and ensure RESOURCES remains exported; then update any imports/usages of getResources() to import RESOURCES and reference it directly (search for getResources and replace calls with RESOURCES).components/resources/resource-grid-item.tsx (1)
14-20: ⚡ Quick winConsider using Next.js Image component.
The native
<img>tag bypasses Next.js image optimization. While the eslint-disable suggests this is intentional, usingnext/imagewould provide automatic optimization, better performance, and proper srcset generation for external OG images.⚡ Proposed migration to Next.js Image
+import Image from "next/image"; import { withOutboundRef } from "`@/lib/outbound-ref`"; import type { Resource } from "`@/lib/resources`"; <div className="overflow-hidden rounded-md bg-[hsl(var(--surface-alt))] ring-1 ring-foreground/[0.08]"> - {/* eslint-disable-next-line `@next/next/no-img-element` */} - <img + <Image src={resource.ogImage} alt="" - loading="lazy" + width={1200} + height={630} + unoptimized={false} className="aspect-[1200/630] w-full object-cover object-top opacity-90 transition-opacity group-hover:opacity-100" /> </div>Note: If external images are not configured in
next.config.js, you may need to add the domains or useunoptimizedprop.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/resources/resource-grid-item.tsx` around lines 14 - 20, Replace the native img element in resource-grid-item.tsx with Next.js's Image: import Image from 'next/image', swap the <img src={resource.ogImage} ... /> usage to <Image ... /> using resource.ogImage as src and a meaningful alt (e.g., resource.title), preserve the class-based styling via layout/priority/sizes or the fill prop and object-fit support, and if external OG domains aren’t configured in next.config.js add unoptimized to the Image or add the domain to images.domains; ensure loading="lazy" behavior is preserved via Image props if needed.components/resources/resources-shell.tsx (1)
33-40: ⚡ Quick winConsider using brand yellow for the "Suggest one" link.
According to coding guidelines, brand yellow
#ffcc00should be used for highlights and badges. The "Suggest one" call-to-action link is a natural candidate for this accent color to draw attention.🎨 Proposed brand color application
<Link href={withOutboundRef("https://github.com/codse/animata")} target="_blank" rel="noopener noreferrer" - className="text-sm text-foreground underline decoration-foreground/20 underline-offset-4 hover:decoration-foreground/50" + className="text-sm text-[`#ffcc00`] underline decoration-[`#ffcc00`]/20 underline-offset-4 hover:decoration-[`#ffcc00`]/50" > Suggest one </Link>As per coding guidelines, use brand yellow
#ffcc00(from logo) for highlights and badges.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/resources/resources-shell.tsx` around lines 33 - 40, Update the "Suggest one" Link so it uses the brand yellow highlight instead of the current foreground color: locate the Link element (withOutboundRef(...), text "Suggest one") and replace or extend its className to apply the brand color (hex `#ffcc00`) for the text and adjust decoration on hover (e.g., text-[`#ffcc00`] and decoration-[`#ffcc00`]/50 or equivalent utility) while preserving underline and accessibility attributes (target, rel). Ensure the color change is applied only to this Link and does not affect surrounding elements.Source: Coding guidelines
app/(main)/resources/page.tsx (1)
5-12: ⚡ Quick winAdd Open Graph image metadata.
The metadata includes
titleanddescriptionfor Open Graph but omitsimages. Adding an OG image will improve social media previews when this page is shared.🖼️ Proposed enhancement
export const metadata: Metadata = { title: "Resources", description: "Sites we use while building animata.", openGraph: { title: "Resources", description: "Sites we use while building animata.", + type: "website", + images: [ + { + url: "/og-resources.png", + width: 1200, + height: 630, + alt: "Animata Resources", + }, + ], }, };Note: Create the corresponding
/public/og-resources.pngimage.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/`(main)/resources/page.tsx around lines 5 - 12, The Open Graph metadata is missing an images entry; update the exported const metadata (specifically the openGraph property) to include an images array pointing to the new OG image (for example "/og-resources.png" or a full URL) and create the corresponding file in public (e.g., public/og-resources.png); ensure the openGraph.images entry contains at least url and optionally alt/width/height for better previews.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@lib/outbound-ref.ts`:
- Around line 5-16: The withOutboundRef function currently calls new URL(href)
which can throw for malformed hrefs (e.g., invalid port) and crash callers; wrap
the URL construction in a try/catch inside withOutboundRef (referencing
withOutboundRef and OUTBOUND_REF) and on error simply return the original href
(or href unchanged) so rendering doesn't crash, while still preserving existing
behavior of adding the ref param when URL parsing succeeds.
---
Nitpick comments:
In `@app/`(main)/resources/page.tsx:
- Around line 5-12: The Open Graph metadata is missing an images entry; update
the exported const metadata (specifically the openGraph property) to include an
images array pointing to the new OG image (for example "/og-resources.png" or a
full URL) and create the corresponding file in public (e.g.,
public/og-resources.png); ensure the openGraph.images entry contains at least
url and optionally alt/width/height for better previews.
In `@components/resources/resource-grid-item.tsx`:
- Around line 14-20: Replace the native img element in resource-grid-item.tsx
with Next.js's Image: import Image from 'next/image', swap the <img
src={resource.ogImage} ... /> usage to <Image ... /> using resource.ogImage as
src and a meaningful alt (e.g., resource.title), preserve the class-based
styling via layout/priority/sizes or the fill prop and object-fit support, and
if external OG domains aren’t configured in next.config.js add unoptimized to
the Image or add the domain to images.domains; ensure loading="lazy" behavior is
preserved via Image props if needed.
In `@components/resources/resources-shell.tsx`:
- Around line 33-40: Update the "Suggest one" Link so it uses the brand yellow
highlight instead of the current foreground color: locate the Link element
(withOutboundRef(...), text "Suggest one") and replace or extend its className
to apply the brand color (hex `#ffcc00`) for the text and adjust decoration on
hover (e.g., text-[`#ffcc00`] and decoration-[`#ffcc00`]/50 or equivalent utility)
while preserving underline and accessibility attributes (target, rel). Ensure
the color change is applied only to this Link and does not affect surrounding
elements.
In `@lib/resources.ts`:
- Around line 484-486: Remove the trivial wrapper getResources and have callers
use the RESOURCES array directly: delete the getResources() function (and its
export) and ensure RESOURCES remains exported; then update any imports/usages of
getResources() to import RESOURCES and reference it directly (search for
getResources and replace calls with RESOURCES).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3f54274a-58fd-4556-8562-13e596a03f3b
📒 Files selected for processing (8)
app/(main)/resources/page.tsxcomponents/resources/grid-backdrop.tsxcomponents/resources/resource-grid-item.tsxcomponents/resources/resource-grid.tsxcomponents/resources/resources-shell.tsxlib/outbound-ref.tslib/resources.tspublic/resources/unsection.webp
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Deploying animata with
|
| Latest commit: |
e201078
|
| Status: | ⚡️ Build in progress... |
hari
approved these changes
Jun 9, 2026
Contributor
|
remove the unsection image |
Co-authored-by: Cursor <cursoragent@cursor.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add /resources with OG previews, outbound ref tags, and a gallery grid.
Summary by CodeRabbit