Skip to content

Commit 78d015c

Browse files
RanitManikRanitManik
authored
feat: enhanced SEO (#28)
2 parents 98747c9 + 6720072 commit 78d015c

8 files changed

Lines changed: 1052 additions & 17 deletions

File tree

‎app/_components/content-page-layout.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import Link from "next/link";
2+
import Logo from "@/components/logo";
3+
4+
export default function ContentPageLayout({
5+
children,
6+
currentPage,
7+
}: {
8+
children: React.ReactNode;
9+
currentPage: "features" | "guides" | "faq";
10+
}) {
11+
const navItems = [
12+
{ href: "/", label: "Home", key: "home" },
13+
{ href: "/features", label: "Features", key: "features" },
14+
{ href: "/guides", label: "Guides", key: "guides" },
15+
{ href: "/faq", label: "FAQ", key: "faq" },
16+
];
17+
18+
return (
19+
<div className="bg-background flex min-h-screen flex-col">
20+
{/* Navigation */}
21+
<nav className="bg-background_darker border-border sticky top-0 z-50 border-b">
22+
<div className="mx-auto max-w-6xl px-4 py-4 sm:px-6 lg:px-8">
23+
<div className="flex items-center justify-between">
24+
<Link
25+
href="/"
26+
className="flex items-center gap-3 transition-opacity hover:opacity-80"
27+
>
28+
<div className="h-8 w-8">
29+
<Logo />
30+
</div>
31+
<span className="text-foreground-50 hidden text-sm font-semibold sm:inline">
32+
README Builder
33+
</span>
34+
</Link>
35+
36+
<div className="flex gap-1 sm:gap-2">
37+
{navItems.map((item) => (
38+
<Link
39+
key={item.key}
40+
href={item.href}
41+
className={`rounded-md px-3 py-2 text-sm font-medium transition-colors sm:px-4 ${
42+
currentPage === item.key
43+
? "bg-accent text-background"
44+
: "text-foreground-300 hover:text-foreground-50 hover:bg-neutral-900"
45+
}`}
46+
>
47+
<span className="hidden sm:inline">{item.label}</span>
48+
<span className="sm:hidden">{item.label.slice(0, 1)}</span>
49+
</Link>
50+
))}
51+
</div>
52+
</div>
53+
</div>
54+
</nav>
55+
56+
{/* Main Content */}
57+
<main className="flex-1">{children}</main>
58+
59+
{/* Footer CTA */}
60+
<footer className="bg-background_darker border-border mt-20 border-t">
61+
<div className="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
62+
<div className="text-center">
63+
<p className="text-foreground-300 mb-6">
64+
Ready to create your professional GitHub profile README?
65+
</p>
66+
<Link
67+
href="/"
68+
className="bg-accent text-background hover:bg-accent-600 inline-block rounded-lg px-6 py-3 font-semibold transition-colors"
69+
>
70+
Start Building Now →
71+
</Link>
72+
</div>
73+
</div>
74+
</footer>
75+
</div>
76+
);
77+
}

‎app/faq/page.tsx‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
import type { Metadata } from "next";
2+
import Script from "next/script";
3+
import { getSiteUrl, siteConfig } from "@/lib/site";
4+
import Link from "next/link";
5+
import ContentPageLayout from "@/app/_components/content-page-layout";
6+
7+
const siteUrl = getSiteUrl();
8+
9+
export const metadata: Metadata = {
10+
title: "FAQ - GitHub README Builder",
11+
description:
12+
"Find answers to frequently asked questions about the GitHub Profile README Builder.",
13+
alternates: siteUrl
14+
? {
15+
canonical: "/faq",
16+
}
17+
: undefined,
18+
openGraph: {
19+
type: "website",
20+
title: "FAQ - GitHub README Builder",
21+
description: "Frequently asked questions about the GitHub Profile README Builder",
22+
url: siteUrl ? `${siteUrl.toString().replace(/\/$/, "")}/faq` : undefined,
23+
},
24+
};
25+
26+
const breadcrumbSchema = {
27+
"@context": "https://schema.org",
28+
"@type": "BreadcrumbList",
29+
itemListElement: [
30+
{
31+
"@type": "ListItem",
32+
position: 1,
33+
name: "Home",
34+
item: siteUrl?.toString() ?? "",
35+
},
36+
{
37+
"@type": "ListItem",
38+
position: 2,
39+
name: "FAQ",
40+
item: siteUrl ? `${siteUrl.toString().replace(/\/$/, "")}/faq` : "",
41+
},
42+
],
43+
};
44+
45+
const faqSchema = {
46+
"@context": "https://schema.org",
47+
"@type": "FAQPage",
48+
mainEntity: [
49+
{
50+
"@type": "Question",
51+
name: "What is the GitHub Profile README Builder?",
52+
acceptedAnswer: {
53+
"@type": "Answer",
54+
text: "The GitHub Profile README Builder is a free web application that helps developers create stunning GitHub profile READMEs with a guided 5-step workflow. It includes a live preview, skill badges, widgets configuration, and export-ready markdown.",
55+
},
56+
},
57+
{
58+
"@type": "Question",
59+
name: "Is the GitHub README Builder free to use?",
60+
acceptedAnswer: {
61+
"@type": "Answer",
62+
text: "Yes! The GitHub Profile README Builder is completely free. No sign-up required, no limitations, and no hidden costs.",
63+
},
64+
},
65+
{
66+
"@type": "Question",
67+
name: "Do I need to code to use this README generator?",
68+
acceptedAnswer: {
69+
"@type": "Answer",
70+
text: "No coding required at all! The builder uses an intuitive form-based interface with a live preview. You can create a professional README without touching any code.",
71+
},
72+
},
73+
{
74+
"@type": "Question",
75+
name: "What widgets and sections does the README builder support?",
76+
acceptedAnswer: {
77+
"@type": "Answer",
78+
text: "The builder supports profile intro, work and education history, social links, skill badges, GitHub stats, contribution streaks, top languages, GitHub trophies, WakaTime cards, pinned repositories, and profile view counters.",
79+
},
80+
},
81+
{
82+
"@type": "Question",
83+
name: "Can I edit the generated markdown after downloading it?",
84+
acceptedAnswer: {
85+
"@type": "Answer",
86+
text: "Absolutely! The generated markdown is standard GitHub Markdown (GFM), so you can edit it in any text editor or directly on GitHub. You can always regenerate it later using the builder.",
87+
},
88+
},
89+
{
90+
"@type": "Question",
91+
name: "How do I use the generated README on my GitHub profile?",
92+
acceptedAnswer: {
93+
"@type": "Answer",
94+
text: "Once you generate your README, download it or copy the text. Then create a special repository with your GitHub username as the name (e.g., 'ranitmanik/ranitmanik'). Upload or paste the README.md file into that repository, and it will automatically appear on your GitHub profile.",
95+
},
96+
},
97+
{
98+
"@type": "Question",
99+
name: "Is my data saved anywhere?",
100+
acceptedAnswer: {
101+
"@type": "Answer",
102+
text: "No, your data is completely private and only stored in your browser's local storage. It's never sent to any server. You have full control over your data.",
103+
},
104+
},
105+
{
106+
"@type": "Question",
107+
name: "Can I use the GitHub stats and widgets on my README?",
108+
acceptedAnswer: {
109+
"@type": "Answer",
110+
text: "Yes! The builder integrates with popular GitHub widget providers like github-readme-stats, github-readme-streak-stats, github-readme-activity-graph, and more. You can toggle these widgets on and off as needed.",
111+
},
112+
},
113+
{
114+
"@type": "Question",
115+
name: "How do I update my GitHub profile README later?",
116+
acceptedAnswer: {
117+
"@type": "Answer",
118+
text: "Simply use the README builder again to regenerate your profile. Edit your information in the form, see the live preview, and download or copy the updated markdown to replace your existing README.",
119+
},
120+
},
121+
{
122+
"@type": "Question",
123+
name: "Does this tool support multiple profile images?",
124+
acceptedAnswer: {
125+
"@type": "Answer",
126+
text: "You can add an image URL in the Personal Info section. This could be your avatar, profile picture, or any image you want to showcase at the top of your README.",
127+
},
128+
},
129+
{
130+
"@type": "Question",
131+
name: "Can I customize the colors and styling?",
132+
acceptedAnswer: {
133+
"@type": "Answer",
134+
text: "The builder generates markdown that you can further customize. Some widgets support color parameters that you can modify after generation. The live preview shows you exactly what it will look like.",
135+
},
136+
},
137+
{
138+
"@type": "Question",
139+
name: "Is there an API or can I contribute to the project?",
140+
acceptedAnswer: {
141+
"@type": "Answer",
142+
text: "The GitHub README Builder is open source! You can find the source code on GitHub at github.com/RanitManik/github-profile-readme-builder. Contributions, issues, and feature requests are welcome!",
143+
},
144+
},
145+
],
146+
};
147+
148+
const faqs = [
149+
{
150+
question: "What is the GitHub Profile README Builder?",
151+
answer: "The GitHub Profile README Builder is a free web application that helps developers create stunning GitHub profile READMEs with a guided 5-step workflow. It includes a live preview, skill badges, widgets configuration, and export-ready markdown.",
152+
},
153+
{
154+
question: "Is the GitHub README Builder free to use?",
155+
answer: "Yes! The GitHub Profile README Builder is completely free. No sign-up required, no limitations, and no hidden costs.",
156+
},
157+
{
158+
question: "Do I need to code to use this README generator?",
159+
answer: "No coding required at all! The builder uses an intuitive form-based interface with a live preview. You can create a professional README without touching any code.",
160+
},
161+
{
162+
question: "What widgets and sections does the README builder support?",
163+
answer: "The builder supports profile intro, work and education history, social links, skill badges, GitHub stats, contribution streaks, top languages, GitHub trophies, WakaTime cards, pinned repositories, and profile view counters.",
164+
},
165+
{
166+
question: "Can I edit the generated markdown after downloading it?",
167+
answer: "Absolutely! The generated markdown is standard GitHub Markdown (GFM), so you can edit it in any text editor or directly on GitHub. You can always regenerate it later using the builder.",
168+
},
169+
{
170+
question: "How do I use the generated README on my GitHub profile?",
171+
answer: "Once you generate your README, download it or copy the text. Then create a special repository with your GitHub username as the name (e.g., 'ranitmanik/ranitmanik'). Upload or paste the README.md file into that repository, and it will automatically appear on your GitHub profile.",
172+
},
173+
{
174+
question: "Is my data saved anywhere?",
175+
answer: "No, your data is completely private and only stored in your browser's local storage. It's never sent to any server. You have full control over your data.",
176+
},
177+
{
178+
question: "Can I use the GitHub stats and widgets on my README?",
179+
answer: "Yes! The builder integrates with popular GitHub widget providers like github-readme-stats, github-readme-streak-stats, github-readme-activity-graph, and more. You can toggle these widgets on and off as needed.",
180+
},
181+
{
182+
question: "How do I update my GitHub profile README later?",
183+
answer: "Simply use the README builder again to regenerate your profile. Edit your information in the form, see the live preview, and download or copy the updated markdown to replace your existing README.",
184+
},
185+
{
186+
question: "Does this tool support multiple profile images?",
187+
answer: "You can add an image URL in the Personal Info section. This could be your avatar, profile picture, or any image you want to showcase at the top of your README.",
188+
},
189+
{
190+
question: "Can I customize the colors and styling?",
191+
answer: "The builder generates markdown that you can further customize. Some widgets support color parameters that you can modify after generation. The live preview shows you exactly what it will look like.",
192+
},
193+
{
194+
question: "Is there an API or can I contribute to the project?",
195+
answer: "The GitHub README Builder is open source! You can find the source code on GitHub. Contributions, issues, and feature requests are welcome!",
196+
},
197+
];
198+
199+
export default function FAQPage() {
200+
return (
201+
<>
202+
<Script
203+
id="breadcrumb-schema"
204+
type="application/ld+json"
205+
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
206+
/>
207+
<Script
208+
id="faq-schema"
209+
type="application/ld+json"
210+
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
211+
/>
212+
<ContentPageLayout currentPage="faq">
213+
<section className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:px-8">
214+
<div className="text-center">
215+
<h1 className="text-foreground-50 text-4xl font-bold sm:text-5xl">
216+
Frequently Asked Questions
217+
</h1>
218+
<p className="text-foreground-300 mt-4 text-lg">
219+
Find answers to common questions about the GitHub README Builder.
220+
</p>
221+
</div>
222+
</section>
223+
224+
<section className="mx-auto max-w-4xl px-4 pb-20 sm:px-6 lg:px-8">
225+
<div className="space-y-4">
226+
{faqs.map((faq, index) => (
227+
<div
228+
key={index}
229+
className="border-border hover:border-accent rounded-lg border bg-neutral-950 p-6 transition-colors"
230+
>
231+
<h3 className="text-foreground-50 mb-3 text-lg font-bold">
232+
{faq.question}
233+
</h3>
234+
<p className="text-foreground-300 text-sm leading-relaxed">
235+
{faq.answer}
236+
</p>
237+
</div>
238+
))}
239+
</div>
240+
</section>
241+
</ContentPageLayout>
242+
</>
243+
);
244+
}

0 commit comments

Comments
 (0)