Skip to content

Commit 32838ab

Browse files
hitesh-shetty-cstkhitesh-shetty-cstk
committed
feat: add structured data component, update metadata, and include robots.txt for SEO optimization
1 parent 93836a4 commit 32838ab

6 files changed

Lines changed: 249 additions & 17 deletions

File tree

‎examples/site/public/og-image.webp‎

36.7 KB
Loading

‎examples/site/public/robots.txt‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# robots.txt for Offline Detector Demo Site
2+
3+
User-agent: *
4+
Allow: /
5+
6+
# Allow all search engines
7+
User-agent: Googlebot
8+
Allow: /
9+
10+
User-agent: Bingbot
11+
Allow: /
12+
13+
# Sitemap location
14+
Sitemap: https://hiteshshetty-dev.github.io/offline-detector/sitemap.xml
15+

‎examples/site/src/app/layout.tsx‎

Lines changed: 102 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,119 @@
1-
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono } from "next/font/google";
3-
import "./globals.css";
1+
import type { Metadata } from 'next';
2+
import React from 'react';
3+
import { Geist, Geist_Mono } from 'next/font/google';
4+
import './globals.css';
45

56
const geistSans = Geist({
6-
variable: "--font-geist-sans",
7-
subsets: ["latin"],
7+
variable: '--font-geist-sans',
8+
subsets: ['latin'],
89
});
910

1011
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
12-
subsets: ["latin"],
12+
variable: '--font-geist-mono',
13+
subsets: ['latin'],
1314
});
1415

16+
const siteUrl = 'https://hiteshshetty-dev.github.io';
17+
const basePath = '/offline-detector';
18+
1519
export const metadata: Metadata = {
16-
title: "Offline Detector | Example Site",
17-
description: "A lightweight TypeScript library for detecting online/offline status in browsers with modern bundler support. Minimal dependencies, tree-shakable, and works with any bundler.",
20+
metadataBase: new URL(`${siteUrl}${basePath}`),
21+
title: {
22+
default:
23+
'Offline Detector - Real-time Network Connectivity Detection Library',
24+
template: '%s | Offline Detector',
25+
},
26+
description:
27+
'A lightweight TypeScript library for detecting online/offline status in browsers with modern bundler support. Features intelligent network verification, debounced state changes, and flexible configuration options. Minimal dependencies, tree-shakable, and works with any bundler.',
28+
keywords: [
29+
'offline detector',
30+
'network detection',
31+
'online offline status',
32+
'connectivity monitoring',
33+
'TypeScript library',
34+
'browser network',
35+
'network status',
36+
'offline detection',
37+
'web connectivity',
38+
'network monitoring',
39+
'JavaScript library',
40+
'bundler agnostic',
41+
'tree-shakable',
42+
'lightweight library',
43+
],
44+
authors: [
45+
{ name: 'Hitesh Shetty', url: 'https://hiteshshetty.com' },
46+
{ name: 'Hitesh Shetty', url: 'https://github.com/hiteshshetty-dev' },
47+
],
48+
creator: 'Hitesh Shetty',
49+
publisher: 'Hitesh Shetty',
50+
formatDetection: {
51+
email: false,
52+
address: false,
53+
telephone: false,
54+
},
55+
openGraph: {
56+
type: 'website',
57+
locale: 'en_US',
58+
url: `${siteUrl}${basePath}`,
59+
siteName: 'Offline Detector',
60+
title:
61+
'Offline Detector - Real-time Network Connectivity Detection Library',
62+
description:
63+
'A lightweight TypeScript library for detecting online/offline status in browsers. Features intelligent network verification, debounced state changes, and flexible configuration options.',
64+
images: [
65+
{
66+
url: `${siteUrl}${basePath}/og-image.webp`,
67+
width: 1200,
68+
height: 630,
69+
alt: 'Offline Detector - Network Connectivity Detection Library',
70+
},
71+
],
72+
},
73+
twitter: {
74+
card: 'summary_large_image',
75+
title: 'Offline Detector - Real-time Network Connectivity Detection',
76+
description:
77+
'A lightweight TypeScript library for detecting online/offline status in browsers with modern bundler support.',
78+
creator: '@hiteshshetty-dev',
79+
images: [`${siteUrl}${basePath}/og-image.webp`],
80+
},
81+
robots: {
82+
index: true,
83+
follow: true,
84+
googleBot: {
85+
index: true,
86+
follow: true,
87+
'max-video-preview': -1,
88+
'max-image-preview': 'large',
89+
'max-snippet': -1,
90+
},
91+
},
92+
alternates: {
93+
canonical: `${siteUrl}${basePath}`,
94+
},
95+
category: 'technology',
96+
classification: 'Software Library',
97+
icons: {
98+
icon: `${siteUrl}${basePath}/favicon.ico`,
99+
apple: `${siteUrl}${basePath}/favicon.ico`,
100+
},
101+
appleWebApp: {
102+
capable: true,
103+
statusBarStyle: 'black-translucent',
104+
title: 'Offline Detector',
105+
},
106+
other: {
107+
'apple-mobile-web-app-capable': 'yes',
108+
'apple-mobile-web-app-status-bar-style': 'black-translucent',
109+
},
18110
};
19111

20112
export default function RootLayout({
21113
children,
22114
}: Readonly<{
23115
children: React.ReactNode;
24-
}>) {
116+
}>): React.ReactNode {
25117
return (
26118
<html lang="en">
27119
<body

‎examples/site/src/app/page.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,21 @@ import InstallationSection from '../components/InstallationSection';
66
import FeatureSection from '../components/FeatureSection';
77
import HeroSection from '../components/HeroSection';
88
import NetworkToggle from '../components/NetworkToggle';
9+
import StructuredData from '../components/StructuredData';
910

1011
export default function Home() {
1112
const { isOnline } = useOfflineDetector();
1213

1314
return (
14-
<div className="min-h-screen hero-gradient">
15-
<NetworkToggle />
16-
<HeroSection isOnline={isOnline} />
17-
<FeatureSection />
18-
<InstallationSection />
19-
<Footer />
20-
</div>
15+
<>
16+
<StructuredData />
17+
<main className="min-h-screen hero-gradient">
18+
<NetworkToggle />
19+
<HeroSection isOnline={isOnline} />
20+
<FeatureSection />
21+
<InstallationSection />
22+
<Footer />
23+
</main>
24+
</>
2125
);
2226
}

‎examples/site/src/app/sitemap.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { MetadataRoute } from 'next';
2+
3+
const siteUrl = 'https://hiteshshetty-dev.github.io';
4+
const basePath = '/offline-detector';
5+
6+
export const dynamic = 'force-static';
7+
8+
export default function sitemap(): MetadataRoute.Sitemap {
9+
const baseUrl = `${siteUrl}${basePath}`;
10+
11+
return [
12+
{
13+
url: baseUrl,
14+
lastModified: new Date(),
15+
changeFrequency: 'monthly',
16+
priority: 1,
17+
},
18+
];
19+
}

‎examples/site/src/components/StructuredData.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import React from 'react';
2+
3+
const siteUrl = 'https://hiteshshetty-dev.github.io';
4+
const basePath = '/offline-detector';
5+
6+
export default function StructuredData() {
7+
const baseUrl = `${siteUrl}${basePath}`;
8+
9+
const structuredData = {
10+
'@context': 'https://schema.org',
11+
'@graph': [
12+
{
13+
'@type': 'WebSite',
14+
'@id': `${baseUrl}#website`,
15+
name: 'Offline Detector',
16+
description:
17+
'A lightweight TypeScript library for detecting online/offline status in browsers with modern bundler support.',
18+
url: baseUrl,
19+
author: {
20+
'@type': 'Person',
21+
'@id': 'https://hiteshshetty.com#person',
22+
name: 'Hitesh Shetty',
23+
url: 'https://hiteshshetty.com',
24+
sameAs: [
25+
'https://hiteshshetty.com',
26+
'https://github.com/hiteshshetty-dev',
27+
],
28+
},
29+
publisher: {
30+
'@id': 'https://hiteshshetty.com#person',
31+
},
32+
},
33+
{
34+
'@type': 'SoftwareApplication',
35+
'@id': `${baseUrl}#software`,
36+
name: 'Offline Detector',
37+
applicationCategory: 'DeveloperApplication',
38+
operatingSystem: 'Web Browser',
39+
description:
40+
'A lightweight TypeScript library for detecting online/offline status in browsers. Features intelligent network verification, debounced state changes, and flexible configuration options.',
41+
url: baseUrl,
42+
downloadUrl: 'https://www.npmjs.com/package/offline-detector',
43+
softwareVersion: '1.0.0',
44+
releaseNotes:
45+
'Initial release with comprehensive network detection capabilities',
46+
author: {
47+
'@id': 'https://hiteshshetty.com#person',
48+
},
49+
offers: {
50+
'@type': 'Offer',
51+
price: '0',
52+
priceCurrency: 'USD',
53+
},
54+
aggregateRating: {
55+
'@type': 'AggregateRating',
56+
ratingValue: '5',
57+
ratingCount: '1',
58+
},
59+
featureList: [
60+
'Real-time network detection',
61+
'TypeScript support',
62+
'Lightweight and tree-shakable',
63+
'Bundler agnostic',
64+
'Intelligent network verification',
65+
'Debounced state changes',
66+
'Flexible configuration',
67+
],
68+
screenshot: `${baseUrl}/og-image.webp`,
69+
},
70+
{
71+
'@type': 'Organization',
72+
'@id': `${baseUrl}#organization`,
73+
name: 'Offline Detector',
74+
url: baseUrl,
75+
logo: `${baseUrl}/og-image.webp`,
76+
sameAs: [
77+
'https://hiteshshetty.com',
78+
'https://github.com/hiteshshetty-dev/offline-detector',
79+
],
80+
},
81+
{
82+
'@type': 'BreadcrumbList',
83+
'@id': `${baseUrl}#breadcrumb`,
84+
itemListElement: [
85+
{
86+
'@type': 'ListItem',
87+
position: 1,
88+
name: 'Home',
89+
item: baseUrl,
90+
},
91+
],
92+
},
93+
],
94+
};
95+
96+
return (
97+
<script
98+
type="application/ld+json"
99+
dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
100+
/>
101+
);
102+
}

0 commit comments

Comments
 (0)