fix: resolve linting and TypeScript safety checks (#43) #135
Conversation
WalkthroughAdds ESLint configuration and fixes linting/TypeScript safety issues across the codebase: introduces type annotations, removes unused imports, narrows error handling with type guards, and migrates data structures to use explicit interfaces for improved type safety. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (3 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 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: 4
🧹 Nitpick comments (17)
components/common/discord-button.tsx (1)
4-4: LGTM! Unused import correctly removed.This change appropriately addresses the ESLint unused import error. Since
motionis not referenced anywhere in the component, commenting out the import resolves the linting issue without any functional impact.As an optional cleanup, you could fully remove the commented line instead of leaving it commented:
-// import { motion } from "motion/react" -Commented code can add visual clutter, and version control already preserves the history if the import is needed in the future.
components/sections/opensource/index.tsx (1)
22-22: Consider addingrelattribute for external links.Anchor tags with
target="_blank"should includerel="noopener noreferrer"to prevent potential tabnabbing attacks.Apply this diff to line 22:
- <a href={repo.html_url} target="_blank" className="underline"> + <a href={repo.html_url} target="_blank" rel="noopener noreferrer" className="underline">And to line 41:
- <a className="underline" target="_blank" href={repo.homepage}> + <a className="underline" target="_blank" rel="noopener noreferrer" href={repo.homepage}>Also applies to: 41-41
components/sections/features/index.tsx (4)
205-205: No-op Math.minMath.min(280, 280) is always 280; simplify.
- const baseWidth = Math.min(280, 280); + const baseWidth = 280;
178-183: Guard against count < 2 in angle calcAvoid division by zero if count changes in future.
- {Array.from({ length: count }).map((_, index) => { - const angle = (index / (count - 1)) * 180; + {Array.from({ length: count }).map((_, index) => { + const steps = Math.max(1, count - 1); + const angle = (index / steps) * 180;
239-244: Tiny perf tweak for logoIf keeping
, add lazy/async decoding. (Switching to next/image is optional.)
- <img - src="/logo.svg" - alt="HelixQue" - className="h-16 w-16 object-contain" - /> + <img + src="/logo.svg" + alt="HelixQue" + className="h-16 w-16 object-contain" + loading="lazy" + decoding="async" + />
258-259: Copy nitAdd punctuation after “conversations”.
- Skip cold outreach. Set your skills and preferences, get matched in seconds, and have meaningful conversations mock interviews, mentoring, code reviews, or pitch practice. + Skip cold outreach. Set your skills and preferences, get matched in seconds, and have meaningful conversations: mock interviews, mentoring, code reviews, or pitch practice..eslintrc.json (1)
1-21: Harden ESLint config (root + unused-disable reporting).Recommend:
- Set this config as the root to prevent parent configs leaking in monorepos.
- Fail on dead eslint-disable comments to keep the codebase clean.
{ + "root": true, "extends": ["next/core-web-vitals", "next/typescript"], "ignorePatterns": [ ".source/**/*", "node_modules/**/*", ".next/**/*", "out/**/*" ], "rules": { "@typescript-eslint/no-explicit-any": "error", + "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": [ "error", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" } ], "react/no-unescaped-entities": "error", - "@next/next/no-img-element": "warn" + "@next/next/no-img-element": "warn", + "reportUnusedDisableDirectives": "error" } }components/ui/particles.tsx (3)
222-237: Make deepMerge typesafe and array-safe; hoist it out of the component.Current instanceof/Object checks on unknown are fragile and will mis-handle arrays. Use a plain-object guard and handle arrays; also avoid re-creating the function per render.
- const deepMerge = (target: Record<string, unknown>, source: Record<string, unknown>): Record<string, unknown> => { - const output = { ...target } - if (source) { - Object.keys(source).forEach((key) => { - if (source[key] instanceof Object && key in target) { - output[key] = deepMerge( - target[key] as Record<string, unknown>, - source[key] as Record<string, unknown> - ) - } else { - output[key] = source[key] - } - }) - } - return output - } + const isPlainObject = (v: unknown): v is Record<string, unknown> => + Object.prototype.toString.call(v) === "[object Object]" + + const deepMerge = <T extends Record<string, unknown>>( + target: T, + source: Record<string, unknown> + ): T => { + const out: Record<string, unknown> = { ...target } + for (const key of Object.keys(source)) { + const s = source[key] + const t = (target as Record<string, unknown>)[key] + if (Array.isArray(s)) { + out[key] = s.slice() + } else if (isPlainObject(s) && isPlainObject(t)) { + out[key] = deepMerge(t, s) + } else { + out[key] = s + } + } + return out as T + }Optionally move helpers above the component to avoid re-allocation.
48-56: Verify tsParticles option keys: “detectsOn” vs “detectOn”.tsParticles typically uses “detectsOn”. If “detectOn” is ignored, behavior falls back to defaults silently. Please confirm and rename if needed.
- detectOn: "canvas", + detectsOn: "canvas",Apply in snow options, stars options, and defaultOptions interactivity.
Also applies to: 83-91, 150-159
134-140: Guard initialization against StrictMode double effects (optional).React StrictMode may run effects twice in dev. initParticlesEngine should be idempotent, but guard to be safe.
- useEffect(() => { - initParticlesEngine(async (engine) => { - await loadSlim(engine) - }).then(() => { - setIsInitialized(true) - }) - }, []) + useEffect(() => { + let mounted = true + if (!isInitialized) { + initParticlesEngine(async (engine) => { + await loadSlim(engine) + }).then(() => { + if (mounted) setIsInitialized(true) + }) + } + return () => { mounted = false } + }, [isInitialized])app/legal/[slug]/page.tsx (3)
31-42: Avoid sync fs on the request path; use async API.Using fs.*Sync can block the event loop if this page renders dynamically. Switch to fs/promises and await.
-import fs from 'fs'; +import fs from 'fs/promises'; ... -const files = fs.readdirSync(dir).filter((f) => f.endsWith('.md')); -const pages: PageData[] = files.map((file) => { - const slug = file.replace(/\.md$/, '').trim(); - try { - const raw = fs.readFileSync(path.join(dir, file), 'utf8'); - const { data } = matter(raw); - return { file, slug, title: (data && (data.title || data.name)) || slug }; - } catch { - return { file, slug, title: slug }; - } -}); +const files = (await fs.readdir(dir)).filter((f) => f.endsWith('.md')); +const pages: PageData[] = await Promise.all( + files.map(async (file) => { + const slug = file.replace(/\.md$/, '').trim(); + try { + const raw = await fs.readFile(path.join(dir, file), 'utf8'); + const { data } = matter(raw); + return { file, slug, title: (data && (data.title || data.name)) || slug }; + } catch { + return { file, slug, title: slug }; + } + }) +);
50-53: Async read for the matched file (consistency).-const fileContent = fs.readFileSync(filePath, 'utf-8'); +const fileContent = await fs.readFile(filePath, 'utf8');
31-46: Pre-render legal pages with generateStaticParams (perf + 404 accuracy).Since files live under content/legal, you can statically generate all slugs and get faster responses.
export async function generateStaticParams(): Promise<PageParams[]> { const dir = path.join(process.cwd(), 'content/legal') const files = (await fs.readdir(dir)).filter((f) => f.endsWith('.md')) return files.map((f) => ({ slug: f.replace(/\.md$/, '').trim() })) } // Optional: lock to known slugs at build time export const dynamicParams = falseapp/changelog/page.tsx (2)
19-20: Avoid double cast; add a narrow type guard instead.Replace unknown-as casting with a runtime guard to keep type safety and resilience to generator changes.
-const changelogDocs = docs as unknown as ChangelogDoc[] +const isChangelogDoc = (d: unknown): d is ChangelogDoc => + !!d && typeof d === "object" && + typeof (d as any).info?.path === "string" && + typeof (d as any).data?.title === "string" && + typeof (d as any).data?.body === "function" +const changelogDocs = Array.isArray(docs) ? docs.filter(isChangelogDoc) : []
21-27: Harden date parsing.Guard against invalid dates to avoid NaN comparisons.
- .sort((a, b) => { - const dateA = new Date(a.data.date).getTime() - const dateB = new Date(b.data.date).getTime() - return dateB - dateA - }) + .sort((a, b) => { + const dateA = Date.parse(a.data.date) + const dateB = Date.parse(b.data.date) + return (isNaN(dateB) ? 0 : dateB) - (isNaN(dateA) ? 0 : dateA) + })app/announcements/page.tsx (2)
17-27: Tighten getPriorityColor to the union type.Use the exact priority union for stronger type safety.
-interface AnnouncementDoc { +type Priority = "high" | "medium" | "low" +interface AnnouncementDoc { data: { title: string date: string - priority?: "high" | "medium" | "low" + priority?: Priority tags?: string[] body: React.ComponentType } info: { path: string } } -const getPriorityColor = (priority?: string) => { +const getPriorityColor = (priority?: Priority) => {
31-35: Avoid unknown-as casting; add a type guard.Same rationale as changelog page.
-const announcementDocsTyped = announcementDocs as unknown as AnnouncementDoc[] +const isAnnouncementDoc = (d: unknown): d is AnnouncementDoc => + !!d && typeof d === "object" && + typeof (d as any).info?.path === "string" && + typeof (d as any).data?.title === "string" && + typeof (d as any).data?.body === "function" +const announcementDocsTyped = Array.isArray(announcementDocs) + ? announcementDocs.filter(isAnnouncementDoc) + : []
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
.eslintrc.json(1 hunks)app/announcements/page.tsx(3 hunks)app/changelog/page.tsx(1 hunks)app/legal/[slug]/page.tsx(2 hunks)components/common/discord-button.tsx(1 hunks)components/common/header.tsx(1 hunks)components/sections/cta/index.tsx(2 hunks)components/sections/features/index.tsx(4 hunks)components/sections/opensource/index.tsx(1 hunks)components/ui/particles.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (4)
components/sections/cta/index.tsx (2)
components/utils/icons.tsx (1)
Icons(4-199)components/ui/border-beam.tsx (1)
BorderBeam(54-107)
app/announcements/page.tsx (1)
lib/utils.ts (1)
formatDate(10-16)
app/changelog/page.tsx (2)
source.config.ts (1)
docs(26-35)lib/utils.ts (1)
formatDate(10-16)
components/sections/features/index.tsx (1)
components/ui/cursor-cards.tsx (2)
CursorCardsContainer(123-149)CursorCard(151-209)
🔇 Additional comments (10)
components/common/header.tsx (1)
225-225: LGTM! Correctly removes unused parameter.The
indexparameter was not used in the mobile navigation menu rendering, so removing it properly addresses the ESLint unused variable warning while maintaining identical functionality.components/sections/opensource/index.tsx (1)
102-105: Excellent error handling improvements.The updated catch block properly:
- Removes unsafe
anytype annotation- Narrows the type with
e instanceof Error- Guards against post-unmount state updates
- Filters out
AbortErrorfrom cancellationsThis aligns perfectly with the PR's TypeScript safety objectives.
components/sections/cta/index.tsx (4)
8-14: LGTM! Type safety improvement.The interface properly types the Discord API response structure, replacing the previous
anytype as intended by the PR objectives.
17-17: LGTM! Proper type narrowing.Successfully replaces
anywith explicitDiscordServerData | nulltyping, improving type safety as intended.
43-43: Correct dependency array fix.Including
hasRequiredEnvVarsproperly satisfies the exhaustive-deps lint rule. Note that in Next.js,process.envvalues are replaced at build time, so this dependency is effectively constant and won't trigger re-runs in practice.
46-136: Layout changes appear inconsistent with stated PR objectives.The AI summary indicates layout restructuring ("swapped the previous Right Server Info panel to the Left Content area"), but the PR objectives explicitly state: "Do not alter UI appearance or functionality; changes should be limited to code quality, types, and error handling" and "No UI/UX changes; backward compatible."
Mixing layout changes with type-safety fixes increases risk and makes the PR harder to review. If these layout changes are intentional, please clarify in the PR description or consider splitting them into a separate PR.
Please verify whether these layout changes were intentional or accidentally included in this type-safety focused PR.
components/sections/features/index.tsx (2)
44-50: Good fix: interval lifecycle and dependencyStable dependency on signupSteps.length and cleanup looks correct.
147-248: AI summary inconsistency: SmartMatchingVisualization is still presentThe summary says this visualization was removed, but it’s defined and used here. Please reconcile PR notes or code.
Also applies to: 272-274
app/legal/[slug]/page.tsx (1)
21-29: Async params handling looks good.Awaiting params is compatible with Next 15’s async Request APIs. LGTM.
app/changelog/page.tsx (1)
1-1: ****The concern about "docs" including other content is unfounded. In
source.config.ts,docsis explicitly exported fromcontent/changelogonly, while announcements use a separate exportannouncementDocsfromcontent/announcements. Each import site already uses the correct scoped export—changelog usesdocsand announcements usesannouncementDocs. No changes needed.Likely an incorrect or invalid review comment.
| <div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto"> | ||
| <Link | ||
| href={`https://discord.gg/${process.env.NEXT_PUBLIC_DISCORD_INVITE_CODE}`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="group/cta-button bg-[#5865f2] text-white hover:bg-[#4752c4] font-medium flex h-10 items-center justify-center gap-2 rounded-full px-6 text-sm shadow-none transition-colors duration-300 w-full sm:w-auto" | ||
| > | ||
| <Icons.discord className="w-4 h-4" /> | ||
| Join Discord | ||
| <ChevronRight className="h-4 w-4 transition-transform duration-300 group-hover/cta-button:translate-x-1" /> | ||
| </Link> | ||
| <Link | ||
| href={`https://github.com/${process.env.NEXT_PUBLIC_GITHUB_REPO}/issues`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="group/cta-button bg-neutral-200 dark:bg-neutral-700 text-neutral-900 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-600 font-medium flex h-10 items-center justify-center gap-2 rounded-full px-6 text-sm shadow-none transition-colors duration-300 w-full sm:w-auto" | ||
| > | ||
| <Icons.github className="w-4 h-4" /> | ||
| Report Issues | ||
| </Link> | ||
| </div> |
There was a problem hiding this comment.
Missing null safety for environment variables in Link hrefs.
The Links use process.env.NEXT_PUBLIC_DISCORD_INVITE_CODE and process.env.NEXT_PUBLIC_GITHUB_REPO directly in template literals without null checks. When these environment variables are undefined, the URLs become https://discord.gg/undefined and https://github.com/undefined/issues, resulting in broken links.
While hasRequiredEnvVars is checked in the useEffect, it doesn't prevent these Links from rendering with malformed URLs.
Consider conditionally rendering these buttons or disabling them when environment variables are missing:
- <div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
+ <div className="flex flex-col sm:flex-row gap-3 w-full lg:w-auto">
+ {!hasRequiredEnvVars && (
+ <p className="text-sm text-red-500">Configuration missing. Please set required environment variables.</p>
+ )}
+ {hasRequiredEnvVars && (
+ <>
<Link
href={`https://discord.gg/${process.env.NEXT_PUBLIC_DISCORD_INVITE_CODE}`}
target="_blank"
rel="noopener noreferrer"
className="group/cta-button bg-[#5865f2] text-white hover:bg-[#4752c4] font-medium flex h-10 items-center justify-center gap-2 rounded-full px-6 text-sm shadow-none transition-colors duration-300 w-full sm:w-auto"
>
<Icons.discord className="w-4 h-4" />
Join Discord
<ChevronRight className="h-4 w-4 transition-transform duration-300 group-hover/cta-button:translate-x-1" />
</Link>
<Link
href={`https://github.com/${process.env.NEXT_PUBLIC_GITHUB_REPO}/issues`}
target="_blank"
rel="noopener noreferrer"
className="group/cta-button bg-neutral-200 dark:bg-neutral-700 text-neutral-900 dark:text-white hover:bg-neutral-300 dark:hover:bg-neutral-600 font-medium flex h-10 items-center justify-center gap-2 rounded-full px-6 text-sm shadow-none transition-colors duration-300 w-full sm:w-auto"
>
<Icons.github className="w-4 h-4" />
Report Issues
</Link>
+ </>
+ )}
</div>🤖 Prompt for AI Agents
components/sections/cta/index.tsx lines 59-79: the Link hrefs interpolate
process.env.NEXT_PUBLIC_DISCORD_INVITE_CODE and
process.env.NEXT_PUBLIC_GITHUB_REPO directly which can produce broken URLs when
those env vars are undefined; fix by reading the env values into local constants
at the top of the component, then conditionally render each Link only if its
corresponding env value is truthy (otherwise render a disabled button/anchor
with aria-disabled="true" and a non-navigating href like "#" and a visual
disabled style), or alternatively fall back to a safe default URL; ensure any
conditional rendering preserves layout (e.g., render placeholders) and that
accessibility attributes (aria-disabled, tabIndex) and visual disabled styles
are applied when env vars are missing.
| <h3 className="font-semibold text-foreground text-sm md:text-base"> | ||
| {error ? "Connection Error" : (serverData?.guild.name || "Loading...")} | ||
| </h3> | ||
| <p className="text-xs md:text-sm text-muted-foreground">Official Discord</p> | ||
| </div> | ||
| </div> | ||
| ) : ( | ||
| <> | ||
| <div className="space-y-3"> | ||
| <div className="flex items-center justify-between"> | ||
| <div className="flex items-center gap-2"> | ||
| <Users className="w-3 h-3 md:w-4 md:h-4 text-green-500" /> | ||
| <span className="text-xs md:text-sm text-muted-foreground">Online Members</span> | ||
| </div> | ||
| <span className="font-semibold text-foreground text-xs md:text-sm">{serverData?.approximate_presence_count || "-"}</span> | ||
|
|
||
| {error ? ( | ||
| <div className="py-8 text-center"> | ||
| <p className="text-sm text-muted-foreground">Failed to fetch server data</p> | ||
| </div> |
There was a problem hiding this comment.
Misleading error message conflates configuration and network errors.
The error state displays "Connection Error" and "Failed to fetch server data" for both missing environment variables (line 23) and actual fetch failures (line 39). This is misleading because missing configuration is not a connection error.
Consider distinguishing between these error types for clearer debugging:
export function CTASection() {
const [serverData, setServerData] = useState<DiscordServerData | null>(null);
- const [error, setError] = useState(false);
+ const [error, setError] = useState<'none' | 'config' | 'network'>('none');
const hasRequiredEnvVars = process.env.NEXT_PUBLIC_DISCORD_INVITE_CODE && process.env.NEXT_PUBLIC_GITHUB_REPO;
useEffect(() => {
if (!hasRequiredEnvVars) {
- setError(true);
+ setError('config');
return;
}
async function fetchData() {
try {
const res = await fetch("/api/discord");
if (!res.ok) {
throw new Error(`Failed to fetch: ${res.status}`);
}
const data = await res.json();
setServerData(data);
- setError(false);
+ setError('none');
} catch (err) {
console.error("Error fetching Discord data:", err);
- setError(true);
+ setError('network');
}
}
fetchData();
}, [hasRequiredEnvVars]);Then update the UI to show appropriate messages:
<h3 className="font-semibold text-foreground text-sm md:text-base">
- {error ? "Connection Error" : (serverData?.guild.name || "Loading...")}
+ {error === 'config' ? "Configuration Error" : error === 'network' ? "Connection Error" : (serverData?.guild.name || "Loading...")}
</h3>- {error ? (
+ {error !== 'none' ? (
<div className="py-8 text-center">
- <p className="text-sm text-muted-foreground">Failed to fetch server data</p>
+ <p className="text-sm text-muted-foreground">
+ {error === 'config' ? 'Missing environment variables' : 'Failed to fetch server data'}
+ </p>
</div>
) : (Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In components/sections/cta/index.tsx around lines 92 to 102, the UI currently
shows a generic "Connection Error" and "Failed to fetch server data" for both
missing configuration (env vars) and real network/fetch failures; update the
component to distinguish error types by surfacing a specific error kind or
message from the data-fetching logic (e.g., configError vs fetchError) and
render different headings and body text based on that type: when configError is
present show a clear "Configuration Error" and instructive message about missing
environment variables, and when fetchError is present show "Connection Error" /
"Failed to fetch server data" (or the fetch error message) so the UI accurately
reflects the root cause.
| className={`relative w-16 sm:w-20 md:w-24 h-18 sm:h-24 md:h-28 bg-gray-100 dark:bg-neutral-800 rounded-lg border border-gray-300 dark:border-neutral-700 overflow-hidden flex flex-col ${ | ||
| index <= currentStep ? "opacity-100" : "opacity-40" | ||
| } transition-opacity duration-500`} | ||
| initial={{ opacity: 0.5, y: 20 }} | ||
| animate={{ | ||
| scale: index === currentStep ? [1, 1.2, 1] : 1, | ||
| opacity: index <= currentStep ? 1 : 0.4, |
There was a problem hiding this comment.
🧩 Analysis chain
Likely invalid Tailwind class h-18
Tailwind doesn’t ship h-18 by default; consider h-[72px] (or h-16/h-20) unless custom spacing exists.
- className={`relative w-16 sm:w-20 md:w-24 h-18 sm:h-24 md:h-28 bg-gray-100 dark:bg-neutral-800 rounded-lg border border-gray-300 dark:border-neutral-700 overflow-hidden flex flex-col ${
+ className={`relative w-16 sm:w-20 md:w-24 h-[72px] sm:h-24 md:h-28 bg-gray-100 dark:bg-neutral-800 rounded-lg border border-gray-300 dark:border-neutral-700 overflow-hidden flex flex-col ${Run to verify custom spacing and other occurrences:
🏁 Script executed:
#!/bin/bash
# Check Tailwind config and find h-18 usages
cfg="$(fd -a -t f 'tailwind.config.*' | head -n1)"
if [ -n "$cfg" ]; then
echo "Found config at: $cfg"
sed -n '1,200p' "$cfg"
else
echo "No tailwind config found at repo root."
fi
echo "Occurrences of 'h-18':"
rg -n -C1 '\bh-18\b' --type=ts --type=tsxLength of output: 89
---
🏁 Script executed:
```shell
#!/bin/bash
# Search for Tailwind config anywhere in repo
echo "Searching for tailwind config files..."
fd -a -t f 'tailwind.config' | head -10
echo ""
echo "Searching for tailwind.config.* files:"
find . -name "tailwind.config.*" -type f 2>/dev/null | head -10
echo ""
echo "Searching for h-18 in TypeScript/TSX files:"
rg 'h-18' --type ts -n -C1 2>/dev/null || rg 'h-18' -n -C1 --include='*.tsx' --include='*.ts' 2>/dev/null
echo ""
echo "Checking if h-18 appears in any config or setup files:"
rg 'h-18' -n --include='*.js' --include='*.mjs' --include='*.json'
Length of output: 1061
🏁 Script executed:
#!/bin/bash
# Check package.json for tailwind config
echo "Checking package.json for tailwind:"
cat package.json 2>/dev/null | grep -A20 -B2 'tailwind\|theme'
echo ""
echo "Searching for config files (postcss, vite, next, etc.):"
ls -la | grep -E 'config|tailwind'
echo ""
echo "Checking for tailwind in postcss.config or other setup files:"
find . -maxdepth 2 -name "*.config.js" -o -name "*.config.ts" -o -name "postcss.config.*" 2>/dev/null | head -10Length of output: 1223
🌐 Web query:
Tailwind CSS default spacing scale h- classes values
💡 Result:
Default Tailwind h- classes (mapping to the spacing scale)
Numeric sizes (class → rem — px):
h-0 → 0rem — 0px; h-px → 0.0625rem — 1px; h-0.5 → 0.125rem — 2px; h-1 → 0.25rem — 4px; h-1.5 → 0.375rem — 6px; h-2 → 0.5rem — 8px; h-2.5 → 0.625rem — 10px; h-3 → 0.75rem — 12px; h-3.5 → 0.875rem — 14px; h-4 → 1rem — 16px; h-5 → 1.25rem — 20px; h-6 → 1.5rem — 24px; h-7 → 1.75rem — 28px; h-8 → 2rem — 32px; h-9 → 2.25rem — 36px; h-10 → 2.5rem — 40px; h-11 → 2.75rem — 44px; h-12 → 3rem — 48px; h-14 → 3.5rem — 56px; h-16 → 4rem — 64px; h-20 → 5rem — 80px; h-24 → 6rem — 96px; h-28 → 7rem — 112px; h-32 → 8rem — 128px; h-36 → 9rem — 144px; h-40 → 10rem — 160px; h-44 → 11rem — 176px; h-48 → 12rem — 192px; h-52 → 13rem — 208px; h-56 → 14rem — 224px; h-60 → 15rem — 240px; h-64 → 16rem — 256px; h-72 → 18rem — 288px; h-80 → 20rem — 320px; h-96 → 24rem — 384px. [1]
Other height utilities:
h-auto, fraction classes (e.g. h-1/2, h-1/3, h-2/3, h-3/4, etc.), h-full (100%), h-screen (100vh) and newer viewport variants (h-dvh, h-dvw, h-lvh, etc.). [2]
Sources: Tailwind spacing and height docs. [1][2]
References:
[1] Tailwind — Customizing spacing (default spacing scale).
[2] Tailwind — Height utilities (h- classes and special values).
---
🏁 Script executed:
```shell
#!/bin/bash
cat postcss.config.mjs
Length of output: 80
Remove invalid Tailwind class h-18 and use a valid alternative
The class h-18 does not exist in Tailwind's default spacing scale. Tailwind v4 spacing jumps from h-16 (64px) to h-20 (80px), with no h-18 defined. Since there is no custom Tailwind config in the repository, this class will not generate any CSS and will be silently ignored at runtime.
Replace with h-[72px] (or h-16 / h-20 if appropriate for your design):
- className={`relative w-16 sm:w-20 md:w-24 h-18 sm:h-24 md:h-28 bg-gray-100 dark:bg-neutral-800 rounded-lg border border-gray-300 dark:border-neutral-700 overflow-hidden flex flex-col ${
+ className={`relative w-16 sm:w-20 md:w-24 h-[72px] sm:h-24 md:h-28 bg-gray-100 dark:bg-neutral-800 rounded-lg border border-gray-300 dark:border-neutral-700 overflow-hidden flex flex-col ${📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| className={`relative w-16 sm:w-20 md:w-24 h-18 sm:h-24 md:h-28 bg-gray-100 dark:bg-neutral-800 rounded-lg border border-gray-300 dark:border-neutral-700 overflow-hidden flex flex-col ${ | |
| index <= currentStep ? "opacity-100" : "opacity-40" | |
| } transition-opacity duration-500`} | |
| initial={{ opacity: 0.5, y: 20 }} | |
| animate={{ | |
| scale: index === currentStep ? [1, 1.2, 1] : 1, | |
| opacity: index <= currentStep ? 1 : 0.4, | |
| className={`relative w-16 sm:w-20 md:w-24 h-[72px] sm:h-24 md:h-28 bg-gray-100 dark:bg-neutral-800 rounded-lg border border-gray-300 dark:border-neutral-700 overflow-hidden flex flex-col ${ | |
| index <= currentStep ? "opacity-100" : "opacity-40" | |
| } transition-opacity duration-500`} | |
| initial={{ opacity: 0.5, y: 20 }} | |
| animate={{ | |
| opacity: index <= currentStep ? 1 : 0.4, |
🤖 Prompt for AI Agents
components/sections/features/index.tsx lines 74-79: the Tailwind class "h-18" is
invalid; replace it with a valid height utility such as "h-[72px]" (or
"h-16"/"h-20" if you prefer the nearest scale), updating the className string
accordingly so the layout uses a real generated utility and leave the rest of
the props (initial/animate) unchanged.
| <motion.button | ||
| className="flex h-7 w-7 md:h-8 md:w-8 items-center justify-center rounded-lg bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 touch-manipulation" | ||
| initial={{ scale: 0, rotate: 180 }} | ||
| animate={{ scale: 1, rotate: 0 }} | ||
| transition={{ delay: 0.6, duration: 0.3, type: 'spring' }} | ||
| whileHover={{ scale: 1.1, rotate: 10 }} | ||
| whileTap={{ scale: 0.9 }} | ||
| > | ||
| <ArrowRight className="h-3 w-3 md:h-4 md:h-4" /> | ||
| </motion.button> |
There was a problem hiding this comment.
Fix a11y and class typo on Send button
Add type and aria-label; correct duplicated md:h-4 → md:w-4.
- <motion.button
- className="flex h-7 w-7 md:h-8 md:w-8 items-center justify-center rounded-lg bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 touch-manipulation"
+ <motion.button
+ type="button"
+ aria-label="Send message"
+ className="flex h-7 w-7 md:h-8 md:w-8 items-center justify-center rounded-lg bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 touch-manipulation"
...
- <ArrowRight className="h-3 w-3 md:h-4 md:h-4" />
+ <ArrowRight className="h-3 w-3 md:h-4 md:w-4" aria-hidden="true" focusable="false" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <motion.button | |
| className="flex h-7 w-7 md:h-8 md:w-8 items-center justify-center rounded-lg bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 touch-manipulation" | |
| initial={{ scale: 0, rotate: 180 }} | |
| animate={{ scale: 1, rotate: 0 }} | |
| transition={{ delay: 0.6, duration: 0.3, type: 'spring' }} | |
| whileHover={{ scale: 1.1, rotate: 10 }} | |
| whileTap={{ scale: 0.9 }} | |
| > | |
| <ArrowRight className="h-3 w-3 md:h-4 md:h-4" /> | |
| </motion.button> | |
| <motion.button | |
| type="button" | |
| aria-label="Send message" | |
| className="flex h-7 w-7 md:h-8 md:w-8 items-center justify-center rounded-lg bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 touch-manipulation" | |
| initial={{ scale: 0, rotate: 180 }} | |
| animate={{ scale: 1, rotate: 0 }} | |
| transition={{ delay: 0.6, duration: 0.3, type: 'spring' }} | |
| whileHover={{ scale: 1.1, rotate: 10 }} | |
| whileTap={{ scale: 0.9 }} | |
| > | |
| <ArrowRight className="h-3 w-3 md:h-4 md:w-4" aria-hidden="true" focusable="false" /> | |
| </motion.button> |
🤖 Prompt for AI Agents
In components/sections/features/index.tsx around lines 357 to 366, the Send
button is missing an explicit type and an accessible label and has a duplicated
class token; add type="button" and aria-label="Send" to the motion.button
element, and fix the className by replacing the duplicated "md:h-4 md:h-4" with
"md:h-4 md:w-4" so the icon sizes are correct.
|
@sankalp771 give us some time we are busy we will review it and merge it |
|
@jayanthjamin-web , @javatcoding1 any update? |
2 participants
🌟 Pre-submission Checklist
#pull-requestchannel in Discord to make sure no one else is working on this issue#pull-requestchannelSummary
This PR resolves all linting and TypeScript type safety issues that were previously skipped during the Hacktoberfest deadline. The production build now passes with 0 errors while maintaining complete UI integrity.
Key Achievements:
/changelogand/announcementspagesType of Changes
Testing Completed
Development Setup Verification
Code Quality
Related Issues
Closes #43
Detailed Changes
1. Build Errors Fixed
Problem:
/changelogand/announcementspages failing withTypeError: a.map is not a functionSolution:
source.getPages()with direct MDX imports (docsandannouncementDocs)ChangelogDoc,AnnouncementDoc)Files Changed:
app/changelog/page.tsxapp/announcements/page.tsx2. TypeScript Type Safety
Fixed explicit
anytypes in:app/legal/[slug]/page.tsx- Added proper interfaces for params and page datacomponents/sections/cta/index.tsx- CreatedDiscordServerDatainterfacecomponents/sections/features/index.tsx- AddedSemiCircleOrbitPropsinterfacecomponents/sections/opensource/index.tsx- Fixed error handling with proper type checkingcomponents/ui/particles.tsx- ReplacedanywithRecord<string, unknown>3. ESLint Errors Fixed
motionfromdiscord-button.tsxindex,isLast,size, and other unused declarationsuseEffectarraysLet's→Let's)4. Auto-Generated Files
.source/index.ts- Updated TypeScript suppression comments for auto-generated MDX imports5. Configuration
.eslintrc.jsonwith proper ignore patterns for auto-generated filesTest Results
✅ Production Build
✅ Linting
npm run lint # Result: 0 errors, 13 warnings (only img optimization suggestions)✅ TypeScript
npx tsc --noEmit # Result: No errors foundScreenshots/Videos
Before:
Screen.Recording.2025-10-26.153312.mp4
TypeError: a.map is not a functionScreen.Recording.2025-10-26.153717.mp4
After:
Screen.Recording.2025-10-26.154130.mp4
UI Verification:
Additional Notes
Code Quality Improvements:
No Breaking Changes:
Performance:
This PR is production-ready and addresses all requirements from issue #43. 🚀
Note: For faster PR review and approval, please stay active in our Discord server!
Summary by CodeRabbit
New Features
Bug Fixes
Chores