Add social media font generators and update tool categorization #726
Conversation
- Introduced a new section for social media font generators on the tools page, featuring various platforms such as LinkedIn, Discord, and Facebook. - Updated the ToolPageLayout and RelatedTools components to accommodate the new "social-media" category. - Enhanced the platform icon mapping for better visual representation of social media tools. - Improved overall structure and organization of tools for a more intuitive user experience.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedThe pull request is closed. WalkthroughA new FontGeneratorTool component generates stylized Unicode text transformations. Centralized platform-configs module defines 19 social media platform configurations. ToolPageLayout and RelatedTools extend to support "social-media" category. Per-platform font generator pages use dynamic routing. Tools index displays social media font generator cards. Old migration guide removed. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
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: 3
♻️ Duplicate comments (6)
docs/src/app/(home)/tools/(font-generators)/telegram-font-generator/page.tsx (1)
1-98: LGTM! Implementation follows established pattern.The Telegram font generator page correctly uses the shared components and platform configuration. All metadata, structured data, and page composition are properly aligned with the established pattern.
Note: The code duplication concern has been raised in the slack-font-generator/page.tsx review.
docs/src/app/(home)/tools/(font-generators)/nostr-font-generator/page.tsx (1)
1-98: LGTM! Correctly handles Nostr's unlimited character length.The Nostr page properly leverages the platform configuration where
characterLimitisundefined, which is appropriate for a decentralized protocol without inherent text length restrictions.docs/src/app/(home)/tools/(font-generators)/x-font-generator/page.tsx (1)
1-98: LGTM! X platform configuration properly applied.The X (Twitter) font generator page correctly implements the shared pattern with appropriate platform-specific configuration.
docs/src/app/(home)/tools/(font-generators)/reddit-font-generator/page.tsx (1)
1-98: LGTM! Reddit configuration properly integrated.The Reddit font generator correctly uses the platform configuration with its notably high character limit (40,000), appropriate for Reddit's long-form discussion format.
docs/src/app/(home)/tools/(font-generators)/tiktok-font-generator/page.tsx (1)
1-98: LGTM! TikTok implementation follows pattern.The TikTok font generator page is correctly implemented using the shared components and platform configuration.
docs/src/app/(home)/tools/(font-generators)/warpcast-font-generator/page.tsx (1)
1-98: LGTM! Warpcast implementation correct.The Warpcast font generator page properly uses the platform configuration, correctly referencing Warpcast as a client for the Farcaster protocol.
🧹 Nitpick comments (2)
docs/src/app/(home)/tools/page.tsx (1)
201-229: Consider adding type safety to platformIconMap.The
Record<string, any>type for platformIconMap loses type safety. Consider using a more specific type:type IconComponent = React.ComponentType<{ className?: string }>; const platformIconMap: Record<string, IconComponent> = { // ... };This would catch type errors at compile time if an invalid icon component is assigned.
docs/src/app/(home)/tools/(font-generators)/discord-font-generator/page.tsx (1)
1-98: Discord font generator implementation is correct; minor wording nitThe page is correctly wired to
platformConfigs.discordand matches the shared layout/tool pattern. Non-blocking nit: in Line 68, “posts, comments, or bio” could be adjusted to “messages, channels, or bio” to better match Discord terminology if you want to polish the copy.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (24)
docs/src/app/(home)/tools/(font-generators)/bluesky-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/discord-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/dribbble-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/facebook-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/instagram-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/lemmy-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/linkedin-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/mastodon-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/nostr-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/pinterest-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/reddit-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/slack-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/telegram-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/threads-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/tiktok-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/vk-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/warpcast-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/x-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/(font-generators)/youtube-font-generator/page.tsx(1 hunks)docs/src/app/(home)/tools/components/FontGeneratorTool.tsx(1 hunks)docs/src/app/(home)/tools/components/ToolPageLayout.tsx(3 hunks)docs/src/app/(home)/tools/components/platform-configs.ts(1 hunks)docs/src/app/(home)/tools/page.tsx(3 hunks)docs/src/components/RelatedTools.tsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (13)
docs/src/app/(home)/tools/(font-generators)/telegram-font-generator/page.tsx (6)
docs/src/app/(home)/tools/(font-generators)/dribbble-font-generator/page.tsx (2)
metadata(8-26)PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/(font-generators)/linkedin-font-generator/page.tsx (1)
metadata(8-26)docs/src/app/(home)/tools/(font-generators)/mastodon-font-generator/page.tsx (2)
metadata(8-26)PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/(font-generators)/pinterest-font-generator/page.tsx (2)
metadata(8-26)PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/(font-generators)/x-font-generator/page.tsx (1)
PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
ToolPageLayout(33-116)
docs/src/app/(home)/tools/(font-generators)/slack-font-generator/page.tsx (3)
docs/src/app/(home)/tools/components/platform-configs.ts (1)
platformConfigs(12-203)docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
ToolPageLayout(33-116)docs/src/app/(home)/tools/components/FontGeneratorTool.tsx (1)
FontGeneratorTool(1195-1286)
docs/src/app/(home)/tools/(font-generators)/threads-font-generator/page.tsx (4)
docs/src/app/(home)/tools/components/platform-configs.ts (1)
platformConfigs(12-203)docs/src/app/(home)/tools/(font-generators)/x-font-generator/page.tsx (1)
PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
ToolPageLayout(33-116)docs/src/app/(home)/tools/components/FontGeneratorTool.tsx (1)
FontGeneratorTool(1195-1286)
docs/src/app/(home)/tools/(font-generators)/dribbble-font-generator/page.tsx (5)
docs/src/app/(home)/tools/(font-generators)/discord-font-generator/page.tsx (2)
metadata(8-26)PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/(font-generators)/linkedin-font-generator/page.tsx (1)
metadata(8-26)docs/src/app/(home)/tools/(font-generators)/x-font-generator/page.tsx (1)
PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
ToolPageLayout(33-116)docs/src/app/(home)/tools/components/FontGeneratorTool.tsx (1)
FontGeneratorTool(1195-1286)
docs/src/app/(home)/tools/(font-generators)/youtube-font-generator/page.tsx (7)
docs/src/app/(home)/tools/components/platform-configs.ts (1)
platformConfigs(12-203)docs/src/app/(home)/tools/(font-generators)/facebook-font-generator/page.tsx (2)
metadata(8-26)PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/(font-generators)/linkedin-font-generator/page.tsx (1)
metadata(8-26)docs/src/app/(home)/tools/(font-generators)/mastodon-font-generator/page.tsx (2)
metadata(8-26)PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/(font-generators)/warpcast-font-generator/page.tsx (1)
PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
ToolPageLayout(33-116)docs/src/app/(home)/tools/components/FontGeneratorTool.tsx (1)
FontGeneratorTool(1195-1286)
docs/src/app/(home)/tools/(font-generators)/vk-font-generator/page.tsx (2)
docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
ToolPageLayout(33-116)docs/src/app/(home)/tools/components/FontGeneratorTool.tsx (1)
FontGeneratorTool(1195-1286)
docs/src/app/(home)/tools/(font-generators)/instagram-font-generator/page.tsx (3)
docs/src/app/(home)/tools/components/platform-configs.ts (1)
platformConfigs(12-203)docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
ToolPageLayout(33-116)docs/src/app/(home)/tools/components/FontGeneratorTool.tsx (1)
FontGeneratorTool(1195-1286)
docs/src/app/(home)/tools/(font-generators)/tiktok-font-generator/page.tsx (3)
docs/src/app/(home)/tools/components/platform-configs.ts (1)
platformConfigs(12-203)docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
ToolPageLayout(33-116)docs/src/app/(home)/tools/components/FontGeneratorTool.tsx (1)
FontGeneratorTool(1195-1286)
docs/src/app/(home)/tools/(font-generators)/nostr-font-generator/page.tsx (6)
docs/src/app/(home)/tools/components/platform-configs.ts (1)
platformConfigs(12-203)docs/src/app/(home)/tools/(font-generators)/linkedin-font-generator/page.tsx (1)
metadata(8-26)server/public/rrweb.min.js (1)
p(4-4)docs/src/app/(home)/tools/(font-generators)/x-font-generator/page.tsx (1)
PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
ToolPageLayout(33-116)docs/src/app/(home)/tools/components/FontGeneratorTool.tsx (1)
FontGeneratorTool(1195-1286)
docs/src/app/(home)/tools/(font-generators)/warpcast-font-generator/page.tsx (5)
docs/src/app/(home)/tools/components/platform-configs.ts (1)
platformConfigs(12-203)docs/src/app/(home)/tools/(font-generators)/dribbble-font-generator/page.tsx (2)
metadata(8-26)PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/(font-generators)/x-font-generator/page.tsx (1)
PlatformFontGeneratorPage(79-98)docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
ToolPageLayout(33-116)docs/src/app/(home)/tools/components/FontGeneratorTool.tsx (1)
FontGeneratorTool(1195-1286)
docs/src/app/(home)/tools/page.tsx (1)
docs/src/app/(home)/tools/components/platform-configs.ts (1)
platformList(205-205)
docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
docs/src/components/Breadcrumbs.tsx (1)
Breadcrumbs(13-48)
docs/src/app/(home)/tools/(font-generators)/facebook-font-generator/page.tsx (2)
docs/src/app/(home)/tools/components/platform-configs.ts (1)
platformConfigs(12-203)docs/src/app/(home)/tools/components/ToolPageLayout.tsx (1)
ToolPageLayout(33-116)
⏰ 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). (2)
- GitHub Check: Build Client Images (ubuntu-latest, linux/amd64)
- GitHub Check: Build Client Images (ubuntu-24.04-arm, linux/arm64)
🔇 Additional comments (16)
docs/src/app/(home)/tools/components/ToolPageLayout.tsx (2)
21-21: LGTM! Type extension supports new social media tools.The addition of "social-media" to the category union type correctly enables the new font generator tools to integrate with the related tools system.
76-100: Good defensive coding with conditional FAQ rendering.Wrapping the FAQ section in a
{faqs.length > 0 &&check prevents rendering an empty accordion structure when no FAQs are present, improving the user experience.docs/src/app/(home)/tools/components/platform-configs.ts (1)
1-205: Excellent centralized configuration pattern.The platform-configs approach provides a single source of truth for platform-specific data, making it easy to maintain and extend. The typed interface ensures consistency across all platform entries.
docs/src/app/(home)/tools/(font-generators)/facebook-font-generator/page.tsx (1)
1-98: Duplicate page structure.This page follows the exact same pattern as the YouTube font generator page. The code duplication concern has been raised in the YouTube page review.
docs/src/app/(home)/tools/(font-generators)/dribbble-font-generator/page.tsx (1)
1-98: Duplicate page structure.This page follows the same duplicated pattern. See the YouTube font generator page review for the refactoring suggestion.
docs/src/app/(home)/tools/page.tsx (1)
289-300: Social media section integrates well.The new Social Media Font Generators section follows the established pattern used by other tool sections, with consistent styling and layout.
docs/src/app/(home)/tools/(font-generators)/linkedin-font-generator/page.tsx (1)
1-98: Duplicate page structure.This page follows the same duplicated pattern. See the YouTube font generator page review for the refactoring suggestion.
docs/src/app/(home)/tools/(font-generators)/instagram-font-generator/page.tsx (1)
1-98: Duplicate page structure.This page follows the same duplicated pattern. See the YouTube font generator page review for the refactoring suggestion.
docs/src/app/(home)/tools/(font-generators)/pinterest-font-generator/page.tsx (1)
1-98: Pinterest font generator page wiring looks correctImports, metadata, structuredData, educationalContent, and ToolPageLayout/FontGeneratorTool props are all consistent with the shared pattern and the
/tools/pinterest-font-generatorslug. No issues from a correctness or integration standpoint.docs/src/app/(home)/tools/(font-generators)/threads-font-generator/page.tsx (1)
1-98: Threads font generator page is consistent and type-safeThe page follows the shared font‑generator pattern, correctly derives all metadata, slugs, and props from
platformConfigs.threads, and passesrelatedToolsCategory="social-media"for RelatedTools integration. Looks good.docs/src/app/(home)/tools/(font-generators)/bluesky-font-generator/page.tsx (1)
1-98: Bluesky font generator page matches the shared implementation patternPlatform data, metadata, structuredData, and ToolPageLayout/FontGeneratorTool props are wired correctly for Bluesky and aligned with other social-media font pages.
docs/src/app/(home)/tools/(font-generators)/vk-font-generator/page.tsx (1)
1-98: VK font generator page wiring looks solidUses
platformConfigs.vkconsistently for metadata, structured data, slugs, and FontGeneratorTool props. Integration with RelatedTools viarelatedToolsCategory="social-media"is correct.docs/src/app/(home)/tools/(font-generators)/mastodon-font-generator/page.tsx (1)
1-98: Mastodon font generator page is correctly wiredAll metadata, structuredData, and ToolPageLayout/FontGeneratorTool props are consistently derived from
platformConfigs.mastodon. Nothing blocking here.docs/src/app/(home)/tools/(font-generators)/lemmy-font-generator/page.tsx (1)
1-98: Lemmy font generator page follows the shared pattern correctlyThe Lemmy page cleanly reuses platformConfigs, ToolPageLayout, and FontGeneratorTool with the expected slugs and CTA wiring. Looks good as-is.
docs/src/components/RelatedTools.tsx (1)
8-257: RelatedTools now correctly supports the “social-media” categoryThe category unions on
ToolandRelatedToolsPropsare updated consistently, and all new social-media tools use matchingcategory: "social-media"and/tools/<platform>-font-generatorhrefs that align with the new pages. The existing prioritization logic for same-category tools continues to work as expected.docs/src/app/(home)/tools/components/FontGeneratorTool.tsx (1)
1195-1286: LGTM! Component implementation is clean and functional.The FontGeneratorTool component provides a well-structured implementation with:
- Proper error handling in clipboard operations
- Clear user feedback with the copied state indicator
- Character limit validation and warnings
- Responsive UI that shows/hides sections appropriately
| import { ToolPageLayout } from "../../components/ToolPageLayout"; | ||
| import { FontGeneratorTool } from "../../components/FontGeneratorTool"; | ||
| import { platformConfigs } from "../../components/platform-configs"; | ||
| import type { Metadata } from "next"; | ||
|
|
||
| const platform = platformConfigs.slack; | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: `Free ${platform.displayName} | Unicode Font Styles for ${platform.name}`, | ||
| description: platform.description, | ||
| openGraph: { | ||
| title: `Free ${platform.displayName}`, | ||
| description: platform.description, | ||
| type: "website", | ||
| url: `https://rybbit.com/tools/${platform.id}-font-generator`, | ||
| siteName: "Rybbit Documentation", | ||
| }, | ||
| twitter: { | ||
| card: "summary_large_image", | ||
| title: `Free ${platform.displayName}`, | ||
| description: platform.description, | ||
| }, | ||
| alternates: { | ||
| canonical: `https://rybbit.com/tools/${platform.id}-font-generator`, | ||
| }, | ||
| }; | ||
|
|
||
| const structuredData = { | ||
| "@context": "https://schema.org", | ||
| "@type": "WebApplication", | ||
| name: platform.displayName, | ||
| description: platform.description, | ||
| url: `https://rybbit.com/tools/${platform.id}-font-generator`, | ||
| applicationCategory: "Utility", | ||
| offers: { | ||
| "@type": "Offer", | ||
| price: "0", | ||
| priceCurrency: "USD", | ||
| }, | ||
| author: { | ||
| "@type": "Organization", | ||
| name: "Rybbit", | ||
| url: "https://rybbit.com", | ||
| }, | ||
| }; | ||
|
|
||
| const educationalContent = ( | ||
| <> | ||
| <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4"> | ||
| About {platform.name} Font Styles | ||
| </h2> | ||
| <p className="text-neutral-700 dark:text-neutral-300 leading-relaxed mb-6"> | ||
| {platform.educationalContent} | ||
| </p> | ||
|
|
||
| <h3 className="text-xl font-semibold text-neutral-900 dark:text-white mb-3">How to Use</h3> | ||
| <ol className="space-y-2 text-neutral-700 dark:text-neutral-300 mb-6"> | ||
| <li> | ||
| <strong>Type your text</strong> in the input box above | ||
| </li> | ||
| <li> | ||
| <strong>Browse the font styles</strong> that appear automatically | ||
| </li> | ||
| <li> | ||
| <strong>Click "Copy"</strong> on any style you like | ||
| </li> | ||
| <li> | ||
| <strong>Paste it</strong> into your {platform.name} posts, comments, or bio | ||
| </li> | ||
| </ol> | ||
|
|
||
| <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-6"> | ||
| <strong>Note:</strong> These fonts use Unicode characters and work across most platforms and devices. However, | ||
| some fonts may not display correctly on older systems or certain applications. | ||
| </p> | ||
| </> | ||
| ); | ||
|
|
||
| export default function PlatformFontGeneratorPage() { | ||
| return ( | ||
| <ToolPageLayout | ||
| toolSlug={`${platform.id}-font-generator`} | ||
| title={platform.displayName} | ||
| description={platform.description} | ||
| badge="Free Tool" | ||
| toolComponent={ | ||
| <FontGeneratorTool platformName={platform.name} characterLimit={platform.characterLimit} /> | ||
| } | ||
| educationalContent={educationalContent} | ||
| faqs={[]} | ||
| relatedToolsCategory="social-media" | ||
| ctaTitle="Track your social media engagement with Rybbit" | ||
| ctaDescription="Monitor clicks, traffic sources, and content performance across all your social platforms." | ||
| ctaEventLocation={`${platform.id}_font_generator_cta`} | ||
| structuredData={structuredData} | ||
| /> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Consider consolidating duplicate platform pages into a dynamic route.
All platform font generator pages (Slack, Telegram, X, Reddit, TikTok, Warpcast, Nostr, etc.) follow an identical structure, differing only in the platform configuration key. This represents significant code duplication across 20+ files.
Consider refactoring to use Next.js dynamic routes:
// app/(home)/tools/(font-generators)/[platform]-font-generator/page.tsx
import { notFound } from 'next/navigation';
import { ToolPageLayout } from "../../components/ToolPageLayout";
import { FontGeneratorTool } from "../../components/FontGeneratorTool";
import { platformConfigs } from "../../components/platform-configs";
import type { Metadata } from "next";
export async function generateStaticParams() {
return Object.keys(platformConfigs).map((platform) => ({
platform,
}));
}
export async function generateMetadata({ params }: { params: { platform: string } }): Promise<Metadata> {
const platform = platformConfigs[params.platform];
if (!platform) return {};
return {
title: `Free ${platform.displayName} | Unicode Font Styles for ${platform.name}`,
description: platform.description,
// ... rest of metadata
};
}
export default function PlatformFontGeneratorPage({ params }: { params: { platform: string } }) {
const platform = platformConfigs[params.platform];
if (!platform) notFound();
// ... rest of implementation
}This would reduce maintenance burden and eliminate the risk of inconsistencies between platform pages.
🤖 Prompt for AI Agents
In docs/src/app/(home)/tools/(font-generators)/slack-font-generator/page.tsx
lines 1-98 the page duplicates identical code across many platforms; refactor
into a single dynamic route [platform]-font-generator by creating
app/(home)/tools/(font-generators)/[platform]-font-generator/page.tsx, import
platformConfigs and use generateStaticParams to emit available keys, implement
generateMetadata that reads platformConfigs[params.platform], and in the default
export read params to look up platform and call notFound() if missing; then
render ToolPageLayout/FontGeneratorTool with platform-derived props
(displayName, name, description, characterLimit, structuredData,
ctaEventLocation) and remove the per-platform static files.
| import { ToolPageLayout } from "../../components/ToolPageLayout"; | ||
| import { FontGeneratorTool } from "../../components/FontGeneratorTool"; | ||
| import { platformConfigs } from "../../components/platform-configs"; | ||
| import type { Metadata } from "next"; | ||
|
|
||
| const platform = platformConfigs.youtube; | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: `Free ${platform.displayName} | Unicode Font Styles for ${platform.name}`, | ||
| description: platform.description, | ||
| openGraph: { | ||
| title: `Free ${platform.displayName}`, | ||
| description: platform.description, | ||
| type: "website", | ||
| url: `https://rybbit.com/tools/${platform.id}-font-generator`, | ||
| siteName: "Rybbit Documentation", | ||
| }, | ||
| twitter: { | ||
| card: "summary_large_image", | ||
| title: `Free ${platform.displayName}`, | ||
| description: platform.description, | ||
| }, | ||
| alternates: { | ||
| canonical: `https://rybbit.com/tools/${platform.id}-font-generator`, | ||
| }, | ||
| }; | ||
|
|
||
| const structuredData = { | ||
| "@context": "https://schema.org", | ||
| "@type": "WebApplication", | ||
| name: platform.displayName, | ||
| description: platform.description, | ||
| url: `https://rybbit.com/tools/${platform.id}-font-generator`, | ||
| applicationCategory: "Utility", | ||
| offers: { | ||
| "@type": "Offer", | ||
| price: "0", | ||
| priceCurrency: "USD", | ||
| }, | ||
| author: { | ||
| "@type": "Organization", | ||
| name: "Rybbit", | ||
| url: "https://rybbit.com", | ||
| }, | ||
| }; | ||
|
|
||
| const educationalContent = ( | ||
| <> | ||
| <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-4"> | ||
| About {platform.name} Font Styles | ||
| </h2> | ||
| <p className="text-neutral-700 dark:text-neutral-300 leading-relaxed mb-6"> | ||
| {platform.educationalContent} | ||
| </p> | ||
|
|
||
| <h3 className="text-xl font-semibold text-neutral-900 dark:text-white mb-3">How to Use</h3> | ||
| <ol className="space-y-2 text-neutral-700 dark:text-neutral-300 mb-6"> | ||
| <li> | ||
| <strong>Type your text</strong> in the input box above | ||
| </li> | ||
| <li> | ||
| <strong>Browse the font styles</strong> that appear automatically | ||
| </li> | ||
| <li> | ||
| <strong>Click "Copy"</strong> on any style you like | ||
| </li> | ||
| <li> | ||
| <strong>Paste it</strong> into your {platform.name} posts, comments, or bio | ||
| </li> | ||
| </ol> | ||
|
|
||
| <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-6"> | ||
| <strong>Note:</strong> These fonts use Unicode characters and work across most platforms and devices. However, | ||
| some fonts may not display correctly on older systems or certain applications. | ||
| </p> | ||
| </> | ||
| ); | ||
|
|
||
| export default function PlatformFontGeneratorPage() { | ||
| return ( | ||
| <ToolPageLayout | ||
| toolSlug={`${platform.id}-font-generator`} | ||
| title={platform.displayName} | ||
| description={platform.description} | ||
| badge="Free Tool" | ||
| toolComponent={ | ||
| <FontGeneratorTool platformName={platform.name} characterLimit={platform.characterLimit} /> | ||
| } | ||
| educationalContent={educationalContent} | ||
| faqs={[]} | ||
| relatedToolsCategory="social-media" | ||
| ctaTitle="Track your social media engagement with Rybbit" | ||
| ctaDescription="Monitor clicks, traffic sources, and content performance across all your social platforms." | ||
| ctaEventLocation={`${platform.id}_font_generator_cta`} | ||
| structuredData={structuredData} | ||
| /> | ||
| ); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Consider extracting the repeated page structure into a factory function.
All font generator pages (YouTube, Facebook, Dribbble, LinkedIn, Instagram, etc.) follow an identical pattern with only the platform configuration varying. The metadata, structuredData, educationalContent, and page component structure are duplicated across 19+ files.
Consider creating a factory function or generator:
// Example: platform-font-generator-factory.ts
export function createFontGeneratorPage(platformKey: keyof typeof platformConfigs) {
const platform = platformConfigs[platformKey];
const metadata: Metadata = {
title: `Free ${platform.displayName} | Unicode Font Styles for ${platform.name}`,
description: platform.description,
// ... rest of metadata
};
// ... rest of shared logic
return { metadata, default: PlatformFontGeneratorPage };
}This would reduce maintenance burden and ensure consistency across all platform pages.
🤖 Prompt for AI Agents
docs/src/app/(home)/tools/(font-generators)/youtube-font-generator/page.tsx
lines 1-98: this page duplicates identical structure used by 19+ other platform
pages; extract a factory function (e.g., createFontGeneratorPage(platformKey))
in a shared module that takes a platform key from platformConfigs, builds and
returns the page component and exported Metadata, structuredData and any other
Next exports; update this file to import the factory and call it with "youtube"
(or platform.id) and re-export the returned metadata and default component,
ensuring types (Metadata) and Next export names remain the same and preserving
props passed into ToolPageLayout (platform-specific values should come from the
platform config).
| { | ||
| name: "Bold Script", | ||
| description: "𝓑𝓸𝓵𝓭 𝓒𝓾𝓻𝓼𝓲𝓿𝓮", | ||
| transform: (text: string) => { | ||
| const boldScript = { | ||
| a: "𝓪", | ||
| b: "𝓫", | ||
| c: "𝓬", | ||
| d: "𝓭", | ||
| e: "𝓮", | ||
| f: "𝓯", | ||
| g: "𝓰", | ||
| h: "𝓱", | ||
| i: "𝓲", | ||
| j: "𝓳", | ||
| k: "𝓴", | ||
| l: "𝓵", | ||
| m: "𝓶", | ||
| n: "𝓷", | ||
| o: "𝓸", | ||
| p: "𝓹", | ||
| q: "𝓺", | ||
| r: "𝓻", | ||
| s: "𝓼", | ||
| t: "𝓽", | ||
| u: "𝓾", | ||
| v: "𝓿", | ||
| w: "𝔀", | ||
| x: "𝔁", | ||
| y: "𝔂", | ||
| z: "𝔃", | ||
| A: "𝓐", | ||
| B: "𝓑", | ||
| C: "𝓒", | ||
| D: "𝓓", | ||
| E: "𝓔", | ||
| F: "𝓕", | ||
| G: "𝓖", | ||
| H: "𝓗", | ||
| I: "𝓘", | ||
| J: "𝓙", | ||
| K: "𝓚", | ||
| L: "𝓛", | ||
| M: "𝓜", | ||
| N: "𝓝", | ||
| O: "𝓞", | ||
| P: "𝓟", | ||
| Q: "𝓠", | ||
| R: "𝓡", | ||
| S: "𝓢", | ||
| T: "𝓣", | ||
| U: "𝓤", | ||
| V: "𝓥", | ||
| W: "𝓦", | ||
| X: "𝓧", | ||
| Y: "𝓨", | ||
| Z: "𝓩", | ||
| }; | ||
| return text | ||
| .split("") | ||
| .map(char => boldScript[char as keyof typeof boldScript] || char) | ||
| .join(""); | ||
| }, | ||
| }, |
There was a problem hiding this comment.
Fix duplicate character mapping in Bold Script transformation.
The "Bold Script" style (lines 270-331) uses identical Unicode character mappings as the "Script/Cursive" style (lines 206-267). Both transformations produce the same output, which means users see no difference between these two styles.
The Bold Script mapping should use the Mathematical Bold Script Unicode block (U+1D4D0–U+1D503 for lowercase, U+1D49C–U+1D4CF for uppercase) instead of duplicating the Script/Cursive mappings.
Apply this diff to fix the Bold Script transformation:
{
name: "Bold Script",
description: "𝓑𝓸𝓵𝓭 𝓒𝓾𝓻𝓼𝓲𝓿𝓮",
transform: (text: string) => {
const boldScript = {
- a: "𝓪",
- b: "𝓫",
- c: "𝓬",
+ a: "𝓐",
+ b: "𝓑",
+ c: "𝓒",
// ... (update all mappings to use the correct Bold Script Unicode block)
};Note: You'll need to replace all character mappings with the correct Mathematical Bold Script Unicode characters. The current mappings are from the regular Script block.
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In docs/src/app/(home)/tools/components/FontGeneratorTool.tsx around lines 269
to 332, the "Bold Script" transform currently duplicates the regular
Script/Cursive Unicode mappings; replace those mappings with the Mathematical
Bold Script characters (uppercase U+1D49C–U+1D4CF and lowercase
U+1D4D0–U+1D503). Update each entry for A–Z and a–z to the correct codepoints
(use the corresponding Unicode characters, not the old Script block glyphs),
keep the same lookup object shape and fallback behavior, and verify the
transform returns the mapped string as before. Ensure no other mappings are
changed and run a quick manual check that "Bold Script" output differs from the
Script/Cursive style.
- Updated CLAUDE.md to provide a comprehensive guide for adding tools, including a new structure for multi-platform tools. - Consolidated tool logic into shared components to reduce duplication and improve maintainability. - Removed the outdated MIGRATION_GUIDE.md file to streamline documentation. - Enhanced educational content and styling guidelines for better user experience across tools.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
docs/src/app/(home)/tools/CLAUDE.md (1)
63-92: Clarify that the Multi-Platform Tools pattern is new architecture introduced in this PR.The section beginning at line 63 introduces a new structural pattern for multi-platform tools (font generators). Consider adding a brief intro line to signal this is a newly documented pattern being adopted—e.g., "NEW: For tools that are identical across platforms..." or similar. This helps developers understand this represents a shift from the per-tool approach above.
# Multi-Platform Tools (Same Tool, Multiple Platforms) +**NEW PATTERN:** For tools that are identical across platforms but with different branding (e.g., font generators for LinkedIn, Discord, X, etc.), use this pattern to avoid duplication and centralize platform metadata. -For tools that are identical across platforms but with different branding (e.g., font generators for LinkedIn, Discord, X, etc.), use this pattern to avoid duplication.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
docs/src/app/(home)/tools/CLAUDE.md(1 hunks)docs/src/app/(home)/tools/MIGRATION_GUIDE.md(0 hunks)
💤 Files with no reviewable changes (1)
- docs/src/app/(home)/tools/MIGRATION_GUIDE.md
⏰ 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). (2)
- GitHub Check: Build Client Images (ubuntu-latest, linux/amd64)
- GitHub Check: Build Client Images (ubuntu-24.04-arm, linux/arm64)
🔇 Additional comments (3)
docs/src/app/(home)/tools/CLAUDE.md (3)
1-61: Comprehensive and well-structured guidance for basic tool setup.The section clearly documents the ToolPageLayout props, styling conventions, critical rules, and common patterns. The structure and examples are accessible and follow current Rybbit conventions.
93-244: Excellent step-by-step guide for multi-platform tool pattern.The documentation walks through the pattern clearly:
- Shared component creation (Step 1)
- Centralized config structure (Step 2)
- Template page approach (Step 3)
- Automated duplication via bash (Step 4)
- Registration and related tools (Step 5)
The benefits and "when to use" guidance help developers decide appropriate use cases. The code examples are practical and the bash script reduces manual duplication.
142-142: Export verified—no action needed.The verification confirms that
platformListis correctly exported inplatform-configs.tswith the exact same implementation shown in CLAUDE.md. Pages relying on this export will have access to the platform listing as expected.
…d enhance formatting consistency - Added 'social-media' option to the relatedToolsCategory prop for improved categorization. - Enhanced formatting by ensuring consistent use of semicolons in code examples and clarifying JSX structure. - Updated educational content guidelines to maintain clarity and consistency across tool documentation.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/src/app/(home)/tools/CLAUDE.md (2)
214-216: Bash script uses macOS-specificsedsyntax—add Linux compatibility note.The
sed -i ''command at line 214 uses macOS syntax. On Linux systems, the command should besed -i(without empty quotes). Consider adding a platform compatibility note or providing both variants to guide developers across different environments.Example note to add:
# macOS: sed -i '' "s/platformConfigs.platform1/platformConfigs.${platform}/g" ... # Linux: sed -i "s/platformConfigs.platform1/platformConfigs.${platform}/g" ...
171-172: Optional: Add metadata description length guidance to template.The template references
platform.descriptionfor metadata but doesn't highlight the 150-160 character guideline mentioned at lines 46–47. Consider adding an inline comment or validation note to help developers construct platform descriptions that meet SEO requirements.// Ensure platform.description is 150-160 characters for optimal SEO export const metadata: Metadata = { title: `Free ${platform.displayName} | Rybbit`, // < 60 chars description: platform.description, // Should be 150-160 chars
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/src/app/(home)/tools/CLAUDE.md(1 hunks)
⏰ 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). (2)
- GitHub Check: Build Client Images (ubuntu-24.04-arm, linux/arm64)
- GitHub Check: Build Client Images (ubuntu-latest, linux/amd64)
🔇 Additional comments (1)
docs/src/app/(home)/tools/CLAUDE.md (1)
23-23: ✅ Previous critical issue resolved: "social-media" category now documented.The
relatedToolsCategoryunion type now correctly includes the new "social-media" category required by the PR objectives, aligning with updates to ToolPageLayout and RelatedTools components.
…orms to streamline tool offerings and improve maintainability.
- Introduced transformations for digits (0-9) across various font styles. - Removed the deprecated "Bold Script" and "Subscript" font styles to streamline the tool. - Added new font styles including "Italic Sans-Serif," "Bold Italic Sans-Serif," and "Bold Fraktur" for enhanced text styling options. - Implemented additional transformations for special characters and introduced new styles like "Negative Circled" and "Parenthesized." - Enhanced overall functionality and maintainability of the FontGeneratorTool.
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.