Skip to content

Commit bb83c28

Browse files
AmitkanswalAmitkanswal
committed
feat:updated next to latest
Signed-off-by: Amitkanswal <amitkanswal7@gmail.com>
1 parent 112a157 commit bb83c28

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

62 files changed

+10649
-12626
lines changed

‎.env.local.sample‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@
33

44
# Contentstack is the tool we use to manage our website's content.
55
# You need to replace 'your_stack_api_key', 'your_delivery_token', and 'your_environment_name' with the actual information.
6-
CONTENTSTACK_API_KEY=your_stack_api_key
7-
CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token
8-
CONTENTSTACK_ENVIRONMENT=your_environment_name
6+
NEXT_PUBLIC_CONTENTSTACK_API_KEY=your_stack_api_key
7+
NEXT_PUBLIC_CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token
8+
NEXT_PUBLIC_CONTENTSTACK_ENVIRONMENT=your_environment_name
99

1010
# Live Preview lets us see changes before they are shown on the website.
1111
# Replace 'your_live_preview_token' with the actual information.
12-
CONTENTSTACK_PREVIEW_HOST=rest-preview.contentstack.com
13-
CONTENTSTACK_PREVIEW_TOKEN=your_live_preview_token
14-
CONTENTSTACK_APP_HOST=app.contentstack.com
15-
CONTENTSTACK_LIVE_PREVIEW=true
16-
CONTENTSTACK_LIVE_EDIT_TAGS=false
12+
NEXT_PUBLIC_CONTENTSTACK_PREVIEW_HOST=rest-preview.contentstack.com
13+
NEXT_PUBLIC_CONTENTSTACK_PREVIEW_TOKEN=your_live_preview_token
14+
NEXT_PUBLIC_CONTENTSTACK_APP_HOST=app.contentstack.com
15+
NEXT_PUBLIC_CONTENTSTACK_LIVE_PREVIEW=true
16+
NEXT_PUBLIC_CONTENTSTACK_LIVE_EDIT_TAGS=false
1717

1818
# These are extra settings. You can remove the '#' at the start of the line and fill these if needed.
1919
# CONTENTSTACK_API_HOST= api.contentstack.io

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ yarn-error.log*
2626
.pnpm-debug.log*
2727

2828
# local env files
29+
.env
2930
.env*.local
3031

3132
# vercel

‎.npmrc‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +0,0 @@
1-
timeout=60000

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2024 Contentstack
3+
Copyright (c) 2025 Contentstack
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎app/[page]/page.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import { Metadata } from 'next';
2+
import { notFound } from 'next/navigation';
3+
import { getPageRes } from '../../helper';
4+
import { initializeLivePreview } from '@/helper/live-preview';
5+
import RenderComponents from '@/components/render-components';
6+
7+
interface PageParams {
8+
params: {
9+
page: string;
10+
};
11+
}
12+
13+
// Generate dynamic metadata for the page
14+
export async function generateMetadata({ params }: PageParams): Promise<Metadata> {
15+
try {
16+
// Await the params object before accessing its properties
17+
const pageParam = await params.page;
18+
const entryUrl = pageParam.includes('/') ? pageParam : `/${pageParam}`;
19+
const page = await getPageRes(entryUrl);
20+
21+
if (page?.seo && page.seo.enable_search_indexing) {
22+
const seoData: Record<string, string> = {};
23+
24+
for (const key in page.seo) {
25+
if (key !== 'enable_search_indexing') {
26+
const metaKey = key.includes('meta_') ? key.split('meta_')[1] : key;
27+
//@ts-ignore
28+
seoData[metaKey] = page.seo[key].toString();
29+
}
30+
}
31+
32+
return {
33+
title: seoData.title || `${pageParam} - Contentstack-Nextjs-Starter-App`,
34+
description: seoData.description,
35+
...seoData
36+
};
37+
}
38+
39+
return {
40+
title: `${pageParam} - Contentstack-Nextjs-Starter-App`
41+
};
42+
} catch (error) {
43+
console.error('Error generating metadata:', error);
44+
return {
45+
title: 'Contentstack-Nextjs-Starter-App'
46+
};
47+
}
48+
}
49+
50+
export default async function DynamicPage({ params }: PageParams) {
51+
try {
52+
// Initialize LivePreview if applicable (handled by middleware + utility function)
53+
await initializeLivePreview();
54+
55+
// Await the params object before accessing its properties
56+
const pageParam = await params.page;
57+
const entryUrl = pageParam.includes('/') ? pageParam : `/${pageParam}`;
58+
const page = await getPageRes(entryUrl);
59+
60+
if (!page) {
61+
notFound();
62+
}
63+
64+
return (
65+
<RenderComponents
66+
pageComponents={page.page_components}
67+
contentTypeUid="page"
68+
entryUid={page.uid}
69+
locale={page.locale}
70+
/>
71+
);
72+
} catch (error) {
73+
console.error('Error in dynamic page:', error);
74+
notFound();
75+
}
76+
}

‎app/app-layout.tsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React from 'react';
2+
import Header from '../components/header';
3+
import Footer from '../components/footer';
4+
import DevTools from '../components/devtools';
5+
import { getHeaderRes, getFooterRes, getAllEntries } from '../helper';
6+
import { HeaderProps, FooterProps } from "../typescript/layout";
7+
import { Page } from '@/typescript/pages';
8+
import { unstable_cache } from 'next/cache';
9+
import { initializeLivePreview } from '@/helper/live-preview';
10+
11+
const getCachedNavigation = unstable_cache(
12+
async (entries: Page[], header: HeaderProps, footer: FooterProps) => {
13+
return dynamicHeadersAndFooter(entries, header, footer);
14+
},
15+
['navigation-data'],
16+
);
17+
// dynamically update header and footer page links
18+
const dynamicHeadersAndFooter = (entries: Page[], header: HeaderProps, footer: FooterProps): [HeaderProps, FooterProps] => {
19+
const newHeader = { ...header };
20+
const newFooter = { ...footer };
21+
22+
if (entries.length > 0 && newHeader.navigation_menu) {
23+
entries.forEach((entry) => {
24+
// Only process entries with valid title and URL
25+
if (!entry.title || !entry.url) return;
26+
27+
const hFound = newHeader.navigation_menu.find(
28+
(navLink) => navLink.label === entry.title
29+
);
30+
31+
if (!hFound) {
32+
newHeader.navigation_menu.push({
33+
label: entry.title,
34+
page_reference: [
35+
//@ts-ignore
36+
{ title: entry.title, url: entry.url, $: entry.$ },
37+
],
38+
$: {},
39+
});
40+
}
41+
42+
const fFound = newFooter.navigation.link.find(
43+
(nlink) => nlink.title === entry.title
44+
);
45+
46+
if (!fFound) {
47+
newFooter.navigation.link.push({
48+
title: entry.title,
49+
href: entry.url,
50+
//@ts-ignore
51+
$: entry.$,
52+
});
53+
}
54+
});
55+
}
56+
57+
return [newHeader, newFooter];
58+
}
59+
60+
export default async function AppLayout({
61+
children,
62+
hasLivePreview = false,
63+
}: {
64+
children: React.ReactNode;
65+
hasLivePreview?: boolean;
66+
}) {
67+
try {
68+
// Initialize LivePreview if the middleware detected LivePreview parameters
69+
if (hasLivePreview) {
70+
await initializeLivePreview();
71+
}
72+
73+
const [headerData, footerData, entriesData] = await Promise.all([
74+
getHeaderRes(),
75+
getFooterRes(),
76+
getAllEntries()
77+
]);
78+
79+
const [dynamicHeader, dynamicFooter] = await getCachedNavigation(entriesData, headerData, footerData);
80+
81+
const JSON_DATA = {
82+
header: dynamicHeader,
83+
footer: dynamicFooter
84+
};
85+
86+
return (
87+
<>
88+
{dynamicHeader && <Header header={dynamicHeader} entries={entriesData} />}
89+
<main className="mainClass">
90+
{children}
91+
<DevTools response={JSON_DATA} />
92+
</main>
93+
{dynamicFooter && <Footer footer={dynamicFooter} entries={entriesData} />}
94+
</>
95+
);
96+
} catch (error) {
97+
console.error('Error in AppLayout:', error);
98+
return (
99+
<>
100+
<main className="mainClass">
101+
{children}
102+
</main>
103+
</>
104+
);
105+
}
106+
}

‎app/blog/[post]/blog-loader.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.blog-container {
2+
display: flex;
3+
flex-direction: column;
4+
padding: 24px;
5+
max-width: 1200px;
6+
margin: 0 auto;
7+
gap: 40px;
8+
}
9+
10+
@media (min-width: 768px) {
11+
.blog-container {
12+
flex-direction: row;
13+
}
14+
}
15+
16+
.blog-main {
17+
flex: 1;
18+
display: flex;
19+
flex-direction: column;
20+
gap: 16px;
21+
}
22+
23+
.blog-title {
24+
font-size: 28px;
25+
font-weight: bold;
26+
}
27+
28+
.blog-meta {
29+
font-size: 14px;
30+
color: #666;
31+
}
32+
33+
.blog-quote {
34+
font-style: italic;
35+
color: #555;
36+
}
37+
38+
.blog-paragraphs {
39+
margin-top: 16px;
40+
}
41+
42+
.blog-sidebar {
43+
width: 260px;
44+
display: flex;
45+
flex-direction: column;
46+
gap: 24px;
47+
}
48+
49+
.sidebar-heading {
50+
font-size: 18px;
51+
font-weight: bold;
52+
}
53+
54+
.sidebar-post h3 {
55+
font-size: 16px;
56+
font-weight: 500;
57+
}
58+
59+
.sidebar-post p {
60+
font-size: 14px;
61+
color: #666;
62+
}

‎app/blog/[post]/loading.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
"use client";
2+
import React from "react";
3+
import Skeleton from "react-loading-skeleton";
4+
import "react-loading-skeleton/dist/skeleton.css";
5+
import "./blog-loader.css";
6+
7+
const BlogSkeleton = () => {
8+
return (
9+
<div className="blog-container">
10+
{/* Main content */}
11+
<div className="blog-main">
12+
<h1 className="blog-title">
13+
<Skeleton width={300} />
14+
</h1>
15+
<p className="blog-meta">
16+
<Skeleton width={150} />
17+
</p>
18+
<blockquote className="blog-quote">
19+
<Skeleton count={2} />
20+
</blockquote>
21+
<div className="blog-paragraphs">
22+
<Skeleton count={5} />
23+
</div>
24+
<div className="blog-paragraphs">
25+
<Skeleton count={5} />
26+
</div>
27+
</div>
28+
29+
{/* Sidebar */}
30+
<aside className="blog-sidebar">
31+
<h2 className="sidebar-heading">
32+
<Skeleton width={120} />
33+
</h2>
34+
35+
<div className="sidebar-post">
36+
<h3>
37+
<Skeleton width={`80%`} />
38+
</h3>
39+
<p>
40+
<Skeleton count={2} />
41+
</p>
42+
</div>
43+
44+
<div className="sidebar-post">
45+
<h3>
46+
<Skeleton width={`80%`} />
47+
</h3>
48+
<p>
49+
<Skeleton count={2} />
50+
</p>
51+
</div>
52+
</aside>
53+
</div>
54+
);
55+
};
56+
57+
export default BlogSkeleton;

0 commit comments

Comments
 (0)