Skip to content

Commit cf84038

Browse files
chore: formatting
1 parent 96791e9 commit cf84038

37 files changed

+450
-359
lines changed
Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1-
'use client';
1+
"use client";
22

3-
import { useEffect, useRef } from 'react';
4-
import Link from 'next/link';
5-
import { loadBasicViewer, unloadBasicViewer } from '../../../examples/js/basic-viewer/implementation.js';
3+
import Link from "next/link";
4+
import { useEffect, useRef } from "react";
5+
import {
6+
loadBasicViewer,
7+
unloadBasicViewer,
8+
} from "../../../examples/js/basic-viewer/implementation.js";
69

710
export default function BasicViewerPage() {
811
const containerRef = useRef(null);
912

1013
useEffect(() => {
1114
const container = containerRef.current;
1215
const { NutrientViewer } = window;
13-
16+
1417
if (container && NutrientViewer) {
1518
loadBasicViewer(NutrientViewer, container);
1619
}
@@ -23,32 +26,34 @@ export default function BasicViewerPage() {
2326
}, []);
2427

2528
return (
26-
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
27-
<nav style={{
28-
padding: '1rem',
29-
backgroundColor: '#f5f5f5',
30-
borderBottom: '1px solid #ddd',
31-
display: 'flex',
32-
alignItems: 'center',
33-
gap: '1rem'
34-
}}>
35-
<Link
29+
<div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
30+
<nav
31+
style={{
32+
padding: "1rem",
33+
backgroundColor: "#f5f5f5",
34+
borderBottom: "1px solid #ddd",
35+
display: "flex",
36+
alignItems: "center",
37+
gap: "1rem",
38+
}}
39+
>
40+
<Link
3641
href="/"
3742
style={{
38-
textDecoration: 'none',
39-
color: '#4A8FED',
40-
fontSize: '0.9rem'
43+
textDecoration: "none",
44+
color: "#4A8FED",
45+
fontSize: "0.9rem",
4146
}}
4247
>
4348
← Back to Examples
4449
</Link>
45-
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>Basic Viewer</h2>
46-
<span style={{ fontSize: '0.9rem', color: '#666' }}>
50+
<h2 style={{ margin: 0, fontSize: "1.1rem" }}>Basic Viewer</h2>
51+
<span style={{ fontSize: "0.9rem", color: "#666" }}>
4752
Simple PDF viewing with standard controls
4853
</span>
4954
</nav>
50-
51-
<div ref={containerRef} style={{ flex: 1, width: '100%' }} />
55+
56+
<div ref={containerRef} style={{ flex: 1, width: "100%" }} />
5257
</div>
5358
);
54-
}
59+
}
Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import Script from 'next/script';
1+
import Script from "next/script";
22

33
export const metadata = {
4-
title: 'Nutrient Web SDK - Next.js Examples',
5-
description: 'Explore different ways to integrate Nutrient Web SDK with Next.js',
4+
title: "Nutrient Web SDK - Next.js Examples",
5+
description:
6+
"Explore different ways to integrate Nutrient Web SDK with Next.js",
67
};
78

89
export default function RootLayout({ children }) {
@@ -15,9 +16,9 @@ export default function RootLayout({ children }) {
1516
strategy="beforeInteractive"
1617
/>
1718
</head>
18-
<body style={{ margin: 0, fontFamily: 'system-ui, sans-serif' }}>
19+
<body style={{ margin: 0, fontFamily: "system-ui, sans-serif" }}>
1920
{children}
2021
</body>
2122
</html>
2223
);
23-
}
24+
}
Lines changed: 28 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,19 @@
1-
'use client';
1+
"use client";
22

3-
import { useEffect, useRef } from 'react';
4-
import Link from 'next/link';
5-
import { loadMagazineViewer, unloadMagazineViewer } from '../../../examples/js/magazine-mode/implementation.js';
3+
import Link from "next/link";
4+
import { useEffect, useRef } from "react";
5+
import {
6+
loadMagazineViewer,
7+
unloadMagazineViewer,
8+
} from "../../../examples/js/magazine-mode/implementation.js";
69

710
export default function MagazineModePage() {
811
const containerRef = useRef(null);
912

1013
useEffect(() => {
1114
const container = containerRef.current;
1215
const { NutrientViewer } = window;
13-
16+
1417
if (container && NutrientViewer) {
1518
loadMagazineViewer(NutrientViewer, container);
1619
}
@@ -23,32 +26,34 @@ export default function MagazineModePage() {
2326
}, []);
2427

2528
return (
26-
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
27-
<nav style={{
28-
padding: '1rem',
29-
backgroundColor: '#f5f5f5',
30-
borderBottom: '1px solid #ddd',
31-
display: 'flex',
32-
alignItems: 'center',
33-
gap: '1rem'
34-
}}>
35-
<Link
29+
<div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
30+
<nav
31+
style={{
32+
padding: "1rem",
33+
backgroundColor: "#f5f5f5",
34+
borderBottom: "1px solid #ddd",
35+
display: "flex",
36+
alignItems: "center",
37+
gap: "1rem",
38+
}}
39+
>
40+
<Link
3641
href="/"
3742
style={{
38-
textDecoration: 'none',
39-
color: '#4A8FED',
40-
fontSize: '0.9rem'
43+
textDecoration: "none",
44+
color: "#4A8FED",
45+
fontSize: "0.9rem",
4146
}}
4247
>
4348
← Back to Examples
4449
</Link>
45-
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>Magazine Mode</h2>
46-
<span style={{ fontSize: '0.9rem', color: '#666' }}>
50+
<h2 style={{ margin: 0, fontSize: "1.1rem" }}>Magazine Mode</h2>
51+
<span style={{ fontSize: "0.9rem", color: "#666" }}>
4752
Double-page layout with custom toolbar and fullscreen support
4853
</span>
4954
</nav>
50-
51-
<div ref={containerRef} style={{ flex: 1, width: '100%' }} />
55+
56+
<div ref={containerRef} style={{ flex: 1, width: "100%" }} />
5257
</div>
5358
);
54-
}
59+
}
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
33
experimental: {
4-
optimizePackageImports: ['react-icons'],
4+
optimizePackageImports: ["react-icons"],
55
},
66
};
77

8-
export default nextConfig;
8+
export default nextConfig;

frameworks/nextjs/JS/app/page.jsx

Lines changed: 54 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,79 @@
1-
'use client';
1+
"use client";
22

3-
import Link from 'next/link';
3+
import Link from "next/link";
44

55
export default function HomePage() {
66
const examples = [
77
{
8-
path: '/basic-viewer',
9-
title: 'Basic Viewer',
10-
description: 'Simple PDF document loading with basic controls',
11-
features: ['Document loading', 'Zoom controls', 'Page navigation']
8+
path: "/basic-viewer",
9+
title: "Basic Viewer",
10+
description: "Simple PDF document loading with basic controls",
11+
features: ["Document loading", "Zoom controls", "Page navigation"],
1212
},
1313
{
14-
path: '/magazine-mode',
15-
title: 'Magazine Mode',
16-
description: 'Advanced magazine-style reader with custom features',
17-
features: ['Double-page layout', 'Custom toolbar', 'Fullscreen support', 'iOS optimization']
18-
}
14+
path: "/magazine-mode",
15+
title: "Magazine Mode",
16+
description: "Advanced magazine-style reader with custom features",
17+
features: [
18+
"Double-page layout",
19+
"Custom toolbar",
20+
"Fullscreen support",
21+
"iOS optimization",
22+
],
23+
},
1924
];
2025

2126
return (
22-
<div style={{ padding: '2rem', maxWidth: '1200px', margin: '0 auto' }}>
23-
<header style={{ textAlign: 'center', marginBottom: '3rem' }}>
27+
<div style={{ padding: "2rem", maxWidth: "1200px", margin: "0 auto" }}>
28+
<header style={{ textAlign: "center", marginBottom: "3rem" }}>
2429
<h1>Nutrient Web SDK - Next.js Examples</h1>
25-
<p style={{ fontSize: '1.1rem', color: '#666' }}>
30+
<p style={{ fontSize: "1.1rem", color: "#666" }}>
2631
Explore different ways to integrate Nutrient Web SDK with Next.js
2732
</p>
2833
</header>
2934

30-
<div style={{
31-
display: 'grid',
32-
gridTemplateColumns: 'repeat(auto-fit, minmax(350px, 1fr))',
33-
gap: '2rem'
34-
}}>
35+
<div
36+
style={{
37+
display: "grid",
38+
gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))",
39+
gap: "2rem",
40+
}}
41+
>
3542
{examples.map((example) => (
3643
<div
3744
key={example.path}
3845
style={{
39-
border: '1px solid #ddd',
40-
borderRadius: '8px',
41-
padding: '1.5rem',
42-
backgroundColor: '#f9f9f9'
46+
border: "1px solid #ddd",
47+
borderRadius: "8px",
48+
padding: "1.5rem",
49+
backgroundColor: "#f9f9f9",
4350
}}
4451
>
45-
<h3 style={{ margin: '0 0 1rem 0' }}>{example.title}</h3>
46-
<p style={{ color: '#666', marginBottom: '1rem' }}>
52+
<h3 style={{ margin: "0 0 1rem 0" }}>{example.title}</h3>
53+
<p style={{ color: "#666", marginBottom: "1rem" }}>
4754
{example.description}
4855
</p>
49-
50-
<h4 style={{ fontSize: '0.9rem', margin: '1rem 0 0.5rem 0' }}>Features:</h4>
51-
<ul style={{ fontSize: '0.9rem', color: '#555' }}>
56+
57+
<h4 style={{ fontSize: "0.9rem", margin: "1rem 0 0.5rem 0" }}>
58+
Features:
59+
</h4>
60+
<ul style={{ fontSize: "0.9rem", color: "#555" }}>
5261
{example.features.map((feature) => (
5362
<li key={feature}>{feature}</li>
5463
))}
5564
</ul>
56-
65+
5766
<Link
5867
href={example.path}
5968
style={{
60-
display: 'inline-block',
61-
marginTop: '1rem',
62-
padding: '0.5rem 1rem',
63-
backgroundColor: '#4A8FED',
64-
color: 'white',
65-
textDecoration: 'none',
66-
borderRadius: '4px',
67-
fontSize: '0.9rem'
69+
display: "inline-block",
70+
marginTop: "1rem",
71+
padding: "0.5rem 1rem",
72+
backgroundColor: "#4A8FED",
73+
color: "white",
74+
textDecoration: "none",
75+
borderRadius: "4px",
76+
fontSize: "0.9rem",
6877
}}
6978
>
7079
View Example →
@@ -73,14 +82,18 @@ export default function HomePage() {
7382
))}
7483
</div>
7584

76-
<footer style={{ textAlign: 'center', marginTop: '3rem', color: '#666' }}>
85+
<footer style={{ textAlign: "center", marginTop: "3rem", color: "#666" }}>
7786
<p>
78-
Learn more: {' '}
79-
<a href="https://www.nutrient.io/guides/web/" target="_blank" rel="noopener noreferrer">
87+
Learn more:{" "}
88+
<a
89+
href="https://www.nutrient.io/guides/web/"
90+
target="_blank"
91+
rel="noopener noreferrer"
92+
>
8093
Nutrient Web SDK Documentation
8194
</a>
8295
</p>
8396
</footer>
8497
</div>
8598
);
86-
}
99+
}

frameworks/nextjs/TS/app/layout.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1-
import Script from 'next/script';
2-
import { ReactNode } from 'react';
1+
import Script from "next/script";
2+
import type { ReactNode } from "react";
33

44
export const metadata = {
5-
title: 'Nutrient Web SDK - Next.js TypeScript Examples',
6-
description: 'Explore different ways to integrate Nutrient Web SDK with Next.js and TypeScript',
5+
title: "Nutrient Web SDK - Next.js TypeScript Examples",
6+
description:
7+
"Explore different ways to integrate Nutrient Web SDK with Next.js and TypeScript",
78
};
89

910
interface RootLayoutProps {
@@ -20,9 +21,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
2021
strategy="beforeInteractive"
2122
/>
2223
</head>
23-
<body style={{ margin: 0, fontFamily: 'system-ui, sans-serif' }}>
24+
<body style={{ margin: 0, fontFamily: "system-ui, sans-serif" }}>
2425
{children}
2526
</body>
2627
</html>
2728
);
28-
}
29+
}

0 commit comments

Comments
 (0)